/* Fuentes oficiales de marca Gauss: Geist (cuerpo) + Exo 2 (titulos). DM Mono se mantiene para codigos SKU y datos en monospace. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Exo+2:wght@500;600;700&family=DM+Mono:wght@400;500&display=swap'); :root { /* Paleta oficial Gauss (manual de marca 2026): #011B40 navy dark · #0E3F5D navy medium · #00BEE8 cyan acento #FF6D00 naranja acento · #F3F4F7 fondo neutro · #FFFFFF blanco */ --blue: #011B40; --blue-light: #0E3F5D; --blue-pale: #F3F4F7; --blue-mid: #BFD3E0; --accent: #00BEE8; --orange-accent: #FF6D00; --green: #16A34A; --green-pale: #DCFCE7; --amber: #D97706; --amber-pale: #FEF3C7; --red: #DC2626; --red-pale: #FEE2E2; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-700: #374151; --gray-900: #111827; --white: #FFFFFF; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); /* ── Paleta secundaria (botones tematicos y acciones especiales) ── */ --purple: #7C3AED; /* batch saldos / objetivos / crear */ --purple-light: #8B5CF6; --purple-pale: #EDE9FE; --cyan: #0891B2; /* examinar / read-only */ --cyan-light: #06B6D4; --cyan-pale: #CFFAFE; --whatsapp: #25D366; /* compartir WhatsApp */ --whatsapp-dark: #128C7E; --excel: #16A34A; /* descargar Excel (alias green) */ --excel-dark: #15803D; --indigo: #4F46E5; /* acciones secundarias destacadas */ --indigo-pale: #E0E7FF; /* ── Variables SEMANTICAS de superficies y texto ── */ /* Estas son las que cambian entre light y dark. El resto de la paleta (blue, green, red, etc.) se mantiene igual — solo swap de fondos y texto. Los componentes que usan estas variables se adaptan solos. */ --bg-page: #F9FAFB; /* fondo del */ --bg-card: #FFFFFF; /* fondo de las tarjetas */ --bg-elevated: #FFFFFF; /* modales, popovers */ --bg-sidebar: #011B40; /* fondo del sidebar (queda navy siempre) */ --bg-topbar: #FFFFFF; /* fondo del topbar */ --bg-hover: #F3F4F6; /* hover en filas y items */ --bg-input: #FFFFFF; /* inputs, selects, textareas */ --bg-code: #F3F4F6; /* bloques de code / mono */ --text-primary: #111827; /* texto principal */ --text-secondary: #374151; /* texto medio (parrafos, labels) */ --text-muted: #6B7280; /* hints, captions */ --text-hint: #9CA3AF; /* placeholders */ --border-subtle: #E5E7EB; /* hairlines */ --border-strong: #D1D5DB; /* emphasis */ color-scheme: light; } /* ── DARK MODE ── Se activa con o body.dark. Solo swappea las variables semanticas de arriba — el resto de la paleta (blue, red, green) se mantiene. Los tonos de accent se pueden aclarar via CSS variables adicionales por componente si hace falta. */ :root[data-theme="dark"], body.dark { --bg-page: #0F172A; /* dark navy suave */ --bg-card: #1E293B; /* card mas claro que page */ --bg-elevated: #334155; /* modales encima del backdrop */ --bg-sidebar: #0B1220; /* sidebar mas oscuro que page */ --bg-topbar: #1E293B; /* mismo tono que card */ --bg-hover: rgba(255,255,255,0.04); --bg-input: #0F172A; --bg-code: #0B1220; --text-primary: #F1F5F9; /* casi-blanco */ --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-hint: #64748B; --border-subtle: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); /* Sombras invertidas para dark (necesitan mas contraste) */ --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -1px rgba(0,0,0,.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -2px rgba(0,0,0,.3); color-scheme: dark; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family: 'Geist', 'DM Sans', sans-serif; background: var(--bg-page); color: var(--text-primary); min-height: 100vh; font-size: 14px; transition: background-color 0.2s ease, color 0.2s ease; } /* Titulos usan Exo 2 segun manual de marca. Fallback a Geist y DM Sans si la fuente no cargo aun (FOUT minimo). */ h1, h2, h3, h4, h5, h6, .card-title, .topbar-title, .kpi-value, .login-logo .brand { font-family: 'Exo 2', 'Geist', 'DM Sans', sans-serif; letter-spacing: -0.01em; } /* LOGIN PAGE */ .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%); } .login-card { background: white; border-radius: 16px; padding: 48px 48px 40px; width: 480px; box-shadow: var(--shadow-lg); } .login-logo { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 36px; } .login-logo-img { display: block; width: 380px; max-width: 100%; height: auto; margin-bottom: 14px; object-fit: contain; } .login-logo .brand { font-size: 28px; font-weight: 700; color: var(--blue); } .login-logo .sub { font-size: 13px; color: var(--gray-500); letter-spacing: 3px; text-transform: uppercase; } .login-card .form-group { margin-bottom: 16px; } .login-card .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .login-card .form-input { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 14px; font-family: 'Geist', 'DM Sans', sans-serif; outline: none; transition: border-color .15s; } .login-card .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.1); } .login-error { color: var(--red); font-size: 13px; margin-bottom: 12px; display: none; } .btn-login { width: 100%; padding: 11px; background: var(--blue); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Geist', 'DM Sans', sans-serif; transition: background .15s; } .btn-login:hover { background: var(--blue-light); } /* LAYOUT */ .layout { display:flex; min-height:100vh; } .sidebar { width: 220px; background: var(--blue); display: flex; flex-direction: column; position: fixed; top:0; left:0; bottom:0; z-index: 100; min-height: 0; /* permite que sidebar-nav haga overflow correcto en flex */ } .sidebar-logo { padding: 24px 20px 20px; border-bottom: 1px solid rgba(255,255,255,.1); position: relative; } .sidebar-logo .brand { font-size: 18px; font-weight: 700; color: white; letter-spacing: -.3px; } .sidebar-logo .sub { font-size: 10px; color: rgba(255,255,255,.5); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; } /* .sidebar-nav - flex:1 => toma el alto disponible entre logo y footer - overflow-y:auto => scroll interno cuando hay muchos items o zoom alto - min-height:0 => necesario para que el overflow funcione dentro de un flex-column (sino el flex hijo se expande al contenido y no scrollea) */ .sidebar-nav { padding: 12px 0; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; /* Scrollbar sutil que no rompe el look oscuro del sidebar */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; } .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); } /* Sub-tabs Catálogo/Plantillas — barra arriba de ambas views */ .catalog-subtabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb; } .catalog-subtab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 18px; font-size: 13px; font-weight: 500; color: #64748b; cursor: pointer; font-family: inherit; transition: all 0.15s; margin-bottom: -1px; } .catalog-subtab:hover { color: #1e293b; background: #f8fafc; } .catalog-subtab.active { color: #1e40af; border-bottom-color: #2563eb; font-weight: 600; } .nav-section { padding: 8px 16px 4px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: 1.2px; } /* Secciones collapsable — click en el header togglea sus nav-items */ .nav-section-collapsible { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: color .15s; } .nav-section-collapsible:hover { color: rgba(255,255,255,.55); } .nav-section-chevron { font-size: 10px; color: rgba(255,255,255,.35); transition: transform .18s ease; line-height: 1; } .nav-section-collapsible.collapsed .nav-section-chevron { transform: rotate(-90deg); } .nav-section-items { overflow: hidden; max-height: 500px; transition: max-height .2s ease; } .nav-section-items.collapsed { max-height: 0; } /* En modo sidebar-collapsed (icon-only), las secciones colapsables se comportan como items normales — sin chevron ni collapse. */ body.sidebar-collapsed .nav-section-chevron { display: none; } body.sidebar-collapsed .nav-section-items { max-height: none !important; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: rgba(255,255,255,.7); cursor: pointer; font-size: 13.5px; font-weight: 400; transition: all .15s; border-left: 3px solid transparent; } .nav-item:hover { background: rgba(255,255,255,.06); color: white; } .nav-item.active { background: rgba(255,255,255,.1); color: white; font-weight: 600; border-left-color: #60A5FA; } .nav-icon { width:16px; text-align:center; font-size:15px; } /* Grupo expandible en el sidebar (padre + sub-items). El padre lleva .nav-group; los hijos viven en .nav-subgroup y son .nav-sub-item (indentados y en font menor). En modo colapsado el subgrupo se oculta y el padre funciona como shortcut al primer hijo (data-view en el padre). */ .nav-group { justify-content: flex-start; } .nav-chevron { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.4); transition: transform .18s ease; line-height: 1; } .nav-group.open .nav-chevron { transform: rotate(90deg); } .nav-subgroup { overflow: hidden; max-height: 0; transition: max-height .2s ease; /* Linea vertical sutil para dar sensacion de "rama" bajo el padre */ position: relative; } .nav-subgroup.open { max-height: 200px; } .nav-subgroup::before { content: ''; position: absolute; left: 27px; top: 4px; bottom: 4px; width: 1px; background: rgba(255,255,255,.10); pointer-events: none; } .nav-sub-item { padding-left: 46px; font-size: 12.5px; color: rgba(255,255,255,.6); } .nav-sub-item .nav-icon { font-size: 13px; opacity: .85; } .nav-sub-item.active { background: rgba(255,255,255,.06); border-left-color: #60A5FA; } /* En colapsado: sin subgrupo ni chevron; el padre queda como item normal */ body.sidebar-collapsed .nav-subgroup { display: none; } body.sidebar-collapsed .nav-chevron { display: none; } /* Grid 40/60 de Seguimiento de cotizaciones (Clientes vendidos | Cotizaciones). En pantallas chicas colapsa a una columna. */ @media (max-width: 768px) { .outcome-2col-grid { grid-template-columns: 1fr !important; } } /* Hover en el card 'Clientes vendidos' */ #clientes-kpi-card:hover { box-shadow: 0 2px 8px rgba(124,58,237,0.12); } /* KPI cards modernas de Cotizaciones (Pendientes/Ganadas/Perdidas). Hover con lift sutil + sombra tintada del color del outcome. */ .oc-kpi-card { cursor: default; position: relative; } .oc-kpi-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } /* Prefijo count con separador visual del monto */ .oc-kpi-card [id$="-amt"]::before { content: "· "; opacity: 0.5; margin-right: 2px; } /* KPI cards de Ventas mensuales (Facturado, Cantidad, Ticket) */ .sales-kpi-modern { transition: box-shadow 0.15s, transform 0.15s; cursor: default; } .sales-kpi-modern:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); } /* Barras del grafico Evolucion — hover con lift + brightness */ .sales-evo-bar-inner { transition: filter 0.15s, transform 0.15s; } .sales-evo-bar:hover .sales-evo-bar-inner { filter: brightness(1.08); } .sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1); } .user-chip { display: flex; align-items: center; gap: 10px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items:center; justify-content:center; font-size: 13px; font-weight: 600; color: white; } .user-name { font-size: 13px; color: white; font-weight: 500; } .user-role { font-size: 11px; color: rgba(255,255,255,.45); } .logout-btn { background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 11px; margin-top: 8px; font-family: 'Geist', 'DM Sans', sans-serif; } .logout-btn:hover { color: white; } /* MAIN */ .main { margin-left: 220px; flex: 1; display: flex; flex-direction: column; } /* TOPBAR */ .topbar { background: var(--bg-topbar); border-bottom: 1px solid var(--border-subtle); padding: 8px 28px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; } .topbar-title { font-size: 16px; font-weight: 600; color: var(--text-primary); } .topbar-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .topbar-actions { display:flex; gap:8px; align-items:center; } /* BUTTONS */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all .15s; font-family: 'Geist', 'DM Sans', sans-serif; } .btn-primary { background: var(--blue); color: white; box-shadow: var(--shadow); } .btn-primary:hover { background: var(--blue-light); } .btn-secondary { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-subtle); box-shadow: var(--shadow); } .btn-secondary:hover { background: var(--bg-hover); } .btn-ghost { background: transparent; color: var(--text-muted); padding: 7px 10px; } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-secondary); } .btn-green { background: var(--green); color: white; box-shadow: var(--shadow); } .btn-green:hover { background: var(--excel-dark); } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn-danger { background: var(--red); color: white; } .btn-danger:hover { background: #B91C1C; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ── Botones tematicos unificados (reemplazan inline styles) ── */ .btn-purple { background: var(--purple); color: white; border-color: var(--purple); box-shadow: var(--shadow); } .btn-purple:hover { background: var(--purple-light); border-color: var(--purple-light); } .btn-cyan { background: var(--cyan); color: white; border-color: var(--cyan); box-shadow: var(--shadow); } .btn-cyan:hover { background: var(--cyan-light); border-color: var(--cyan-light); } .btn-whatsapp { background: var(--whatsapp); color: white; border-color: var(--whatsapp); box-shadow: var(--shadow); } .btn-whatsapp:hover { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); } .btn-excel { background: var(--excel); color: white; border-color: var(--excel); box-shadow: var(--shadow); } .btn-excel:hover { background: var(--excel-dark); border-color: var(--excel-dark); } .btn-indigo { background: var(--indigo); color: white; border-color: var(--indigo); box-shadow: var(--shadow); } .btn-indigo:hover { background: #4338CA; border-color: #4338CA; } /* CONTENT */ .content { padding: 24px 28px; flex:1; } /* VIEWS */ .view { display: none; } .view.active { display: block; } /* CARD */ .card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); color: var(--text-primary); } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .card-body { padding: 22px 24px; } /* ── KPI card (metricas compactas: label arriba + valor grande) ── */ .kpi-card { background: white; border: 1px solid var(--gray-200); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); } .kpi-label { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .4px; font-weight: 500; } .kpi-value { font-size: 22px; font-weight: 700; color: var(--blue); margin-top: 4px; line-height: 1.2; } .kpi-value.kpi-green { color: var(--excel-dark); } .kpi-value.kpi-amber { color: #A16207; } .kpi-value.kpi-red { color: #B91C1C; } .kpi-value.kpi-blue { color: var(--blue); } .kpi-value.kpi-purple { color: var(--purple); } .kpi-sub { font-size: 11px; color: var(--gray-500); margin-top: 2px; } /* Grid responsivo de KPIs */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } /* ── Alert card (mensajes informativos en cuerpo de card) ── */ .alert-card { border-radius: 8px; padding: 12px 14px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; } .alert-card.info { background: var(--blue-pale); border: 1px solid var(--blue-mid); color: var(--blue); } .alert-card.success { background: var(--green-pale); border: 1px solid #86EFAC; color: #166534; } .alert-card.warn { background: var(--amber-pale); border: 1px solid #FCD34D; color: #92400E; } .alert-card.danger { background: var(--red-pale); border: 1px solid #FCA5A5; color: #B91C1C; } .alert-card.purple { background: var(--purple-pale); border: 1px solid #C4B5FD; color: #5B21B6; } /* Esconder columnas marcadas con .col-seller cuando el body tiene la clase .role-vendedor (no admin). Aplica a th y td. El JS de App.init pone la clase segun el rol del usuario logueado. */ body.role-vendedor .col-seller { display: none; } /* Rol ECOM: dashboard reducido a solo la card de costo de stock. Todo lo demás del dashboard (KPIs, hero objetivo, alertas, seguimientos) queda oculto. La card #costo-stock-card mantiene su display (lo maneja Dashboard.loadCostoStock — sin snapshot muestra empty state). */ body.role-ecom #view-dashboard > *:not(#costo-stock-card):not(script) { display: none !important; } /* ── Sidebar colapsada (solo iconos) ──────────────────────────────── Toggle con #btn-collapse-sidebar. Persistido en localStorage. No aplica en mobile (ahi sigue siendo drawer). */ body.sidebar-collapsed .sidebar { width: 64px; } body.sidebar-collapsed .main { margin-left: 64px; } body.sidebar-collapsed .sidebar-logo-full { display: none !important; } body.sidebar-collapsed .sidebar-logo-mini { display: block !important; } body.sidebar-collapsed .sidebar-logo { padding: 18px 8px; } body.sidebar-collapsed .nav-section { display: none; } body.sidebar-collapsed .nav-item { padding: 12px 0; justify-content: center; gap: 0; font-size: 0; /* esconde el texto manteniendo el icono */ position: relative; } body.sidebar-collapsed .nav-item .nav-icon { font-size: 18px; margin: 0; } body.sidebar-collapsed .nav-item .nav-soon-badge { display: none; } /* Tooltip al hover (usa el texto del nav-item via JS data-tooltip) */ body.sidebar-collapsed .nav-item:hover::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: #1f2937; color: white; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; z-index: 1000; pointer-events: none; } /* Footer del sidebar tambien compacto */ body.sidebar-collapsed .sidebar-footer { padding: 10px 6px; font-size: 0; } body.sidebar-collapsed .sidebar-footer * { font-size: 11px; } body.sidebar-collapsed .sidebar-footer > div:first-child { display: none; } /* Boton de colapsar: cuando esta cerrado, voltear el chevron */ body.sidebar-collapsed #btn-collapse-sidebar { right: 50%; transform: translateX(50%); top: 8px; } body.sidebar-collapsed #btn-collapse-sidebar::before { content: '›'; } body.sidebar-collapsed #btn-collapse-sidebar { font-size: 0; } body.sidebar-collapsed #btn-collapse-sidebar::before { font-size: 14px; } /* Smooth transitions */ .sidebar, .main { transition: width .2s ease, margin-left .2s ease; } /* ── Data table unificada (estilo base para nuevas tablas) .quote-table, .catalog-table y .history-table siguen funcionando como estaban; esta clase es el patron para componentes nuevos para evitar duplicar styling. ── */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table thead th { text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; padding: 11px 14px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); white-space: nowrap; } .data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--gray-50); } /* Variante con zebra (filas alternadas) */ .data-table.striped tbody tr:nth-child(even) td { background: var(--gray-50); } .data-table.striped tbody tr:hover td { background: var(--blue-pale); } /* Variante con hover clickable (para listas que abren detalle) */ .data-table.clickable tbody tr { cursor: pointer; } .data-table.clickable tbody tr:hover td { background: var(--blue-pale); } /* Variante compacta (mas info por pantalla) */ .data-table.compact thead th { padding: 8px 12px; } .data-table.compact tbody td { padding: 8px 12px; } /* Helpers de celdas */ .data-table .td-code { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gray-500); } .data-table .td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .data-table .td-muted { color: var(--gray-500); font-size: 12px; } /* FORM */ .form-row { display:flex; gap:20px; margin-bottom: 18px; } .form-group { flex:1; } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .form-input, .form-select { width: 100%; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 13.5px; font-family: 'Geist', 'DM Sans', sans-serif; color: var(--text-primary); background: var(--bg-input); transition: border-color .15s; outline: none; } .form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.1); } /* SEARCH */ .search-wrap { position: relative; margin-bottom: 16px; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 16px; pointer-events: none; } .search-input { width: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 13.5px; font-family: 'Geist', 'DM Sans', sans-serif; outline: none; transition: all .15s; } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.1); } /* PRODUCT LIST */ .product-list { display:flex; flex-direction:column; gap:2px; max-height: 400px; overflow-y:auto; } .product-row { display: flex; align-items: center; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background .1s; gap: 12px; } .product-row:hover { background: var(--blue-pale); } .product-row.out-of-stock { opacity: .6; } .product-code { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gray-500); width: 100px; flex-shrink: 0; } .product-name { flex: 1; font-size: 13px; color: var(--gray-900); line-height: 1.3; } .product-price { font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; } .stock-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; flex-shrink: 0; } .stock-ok { background: var(--green-pale); color: var(--green); } .stock-low { background: var(--amber-pale); color: var(--amber); } .stock-out { background: var(--red-pale); color: var(--red); } .add-btn { width: 28px; height: 28px; border-radius: 7px; background: var(--blue-pale); color: var(--blue); border: none; cursor: pointer; display: flex; align-items:center; justify-content:center; font-size: 18px; font-weight: 300; transition: all .15s; flex-shrink: 0; } .add-btn:hover { background: var(--blue); color: white; } /* QUOTE TABLE */ .quote-table { width:100%; border-collapse:collapse; } .quote-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; padding: 11px 14px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); } .quote-table td { padding: 7px 14px; font-size: 13px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .quote-table tr:last-child td { border-bottom: none; } .quote-table tbody tr:nth-child(even) td { background: var(--blue-pale); } .quote-table tr:hover td { background: #DDE6F4; } /* hover mas suave que blue-mid */ .quote-table tr.reference-row td { background: #FFFBEB; } .quote-table tr.no-stock-row td { background: #FEF3C7; } .quote-table tr.no-stock-row td:first-child { border-left: 3px solid #D97706; } .quote-table tr.alternative-row td { background: #F0FFF4; font-style: italic; } .qty-input { width: 90px; padding: 5px 8px; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 13px; text-align: center; font-family: 'Geist', 'DM Sans', sans-serif; } .qty-input:focus { outline:none; border-color: var(--accent); } .remove-btn { width: 26px; height: 26px; border-radius: 6px; background: var(--red-pale); color: var(--red); border: none; cursor: pointer; display: flex; align-items:center; justify-content:center; font-size: 14px; transition: all .15s; } .remove-btn:hover { background: var(--red); color: white; } .td-code { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gray-500); } .td-price { font-weight: 600; color: var(--blue); } .td-total { font-weight: 700; color: var(--gray-900); } /* TOTALS */ .totals-panel { background: var(--bg-hover); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; } .totals-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13.5px; color: var(--text-secondary); } .totals-row.total { border-top: 2px solid var(--border-strong); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 700; color: var(--text-primary); } .discount-badge { font-size: 11px; background: var(--green-pale); color: var(--green); padding: 2px 8px; border-radius: 99px; font-weight: 600; } /* TAGS */ .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; } .tag-blue { background: var(--blue-pale); color: var(--blue); } .tag-amber { background: var(--amber-pale); color: var(--amber); } .tag-green { background: var(--green-pale); color: var(--green); } /* GRIDS */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } /* CHAT PANEL */ .chat-panel { position: fixed; right: 0; top: 56px; bottom: 0; width: 380px; background: white; border-left: 1px solid var(--gray-200); display: flex; flex-direction: column; z-index: 90; transform: translateX(100%); transition: transform .3s ease; box-shadow: -4px 0 15px rgba(0,0,0,.05); } .chat-panel.open { transform: translateX(0); } .chat-header { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; background: var(--blue-pale); } .chat-header h3 { font-size: 14px; font-weight: 600; color: var(--blue); } .chat-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--gray-500); padding: 4px; } .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .chat-msg { max-width: 90%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; } .chat-msg.user { background: var(--blue); color: white; align-self: flex-end; border-bottom-right-radius: 4px; } .chat-msg.assistant { background: var(--gray-100); color: var(--gray-900); align-self: flex-start; border-bottom-left-radius: 4px; } .chat-msg.system { background: var(--amber-pale); color: var(--amber); align-self: center; font-size: 12px; text-align: center; } .chat-input-wrap { padding: 12px 16px; border-top: 1px solid var(--gray-200); display: flex; gap: 8px; } .chat-input { flex: 1; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 13px; font-family: 'Geist', 'DM Sans', sans-serif; outline: none; resize: none; } .chat-input:focus { border-color: var(--accent); } .chat-send { padding: 10px 16px; background: var(--blue); color: white; border: none; border-radius: 8px; cursor: pointer; font-family: 'Geist', 'DM Sans', sans-serif; font-weight: 600; font-size: 13px; } .chat-send:hover { background: var(--blue-light); } .chat-send:disabled { opacity: .5; cursor: not-allowed; } /* NOTIFICATION */ .notif { position: fixed; /* z-index ALTO: por encima de modal-overlay (1000) y cualquier overlay interno. Antes con z-index 999 el toast quedaba TAPADO por modales abiertos (ej. ficha del cliente) y no se podia leer. */ top: 20px; right: 20px; background: var(--blue); color: white; padding: 14px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; /* Sombra mas fuerte para distinguirlo del fondo de cualquier modal */ box-shadow: 0 10px 25px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1); z-index: 10001; display: flex; align-items: center; gap: 8px; animation: slideIn .3s ease; pointer-events: none; /* Garantizar que sea legible incluso si hay backdrop oscuro detras */ min-width: 200px; max-width: min(420px, 90vw); line-height: 1.35; } .notif.success { background: var(--green); } .notif.error { background: var(--red); } .notif.hidden { opacity: 0; transition: opacity .5s; } @keyframes slideIn { from { transform: translateX(120%); opacity:0; } to { transform: translateX(0); opacity:1; } } /* SECTION LABEL */ .section-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; } /* HISTORY TABLE */ .history-table { width: 100%; border-collapse: collapse; color: var(--text-primary); } .history-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; padding: 8px 12px; background: var(--bg-hover); border-bottom: 1px solid var(--border-subtle); } .history-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); } .history-table tr:hover td { background: var(--bg-hover); cursor: pointer; } /* CRM SEGUIMIENTO TABLE — pulido: compactar, zebra, hover, sticky header */ .crm-seguimiento-table { border-collapse: separate; border-spacing: 0; } .crm-seguimiento-table thead { position: sticky; top: 0; z-index: 2; } .crm-seguimiento-table thead th { background: #fafbfc; border-bottom: 1px solid #e5e7eb; letter-spacing: 0.5px; padding: 10px 12px; } .crm-seguimiento-table tbody td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; } .crm-seguimiento-table tbody tr:nth-child(even) td { background: #fafbfc; } .crm-seguimiento-table tbody tr:hover td { background: #eff6ff !important; cursor: default; } .crm-seguimiento-table tbody tr.client-row > td:first-child { font-weight: 600; color: #111827; } .crm-seguimiento-table .crm-edit-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; color: #6b7280; font-size: 13px; transition: all 0.15s; } .crm-seguimiento-table .crm-edit-icon:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; } .crm-seguimiento-table .crm-actions-count-badge { background: #ede9fe; color: #6d28d9; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; } /* SITUACION column: forzar ancho compacto para que no se coma el espacio a costa del nombre del cliente. */ .crm-seguimiento-table th.col-situacion, .crm-seguimiento-table td.col-situacion { width: 120px; max-width: 120px; } /* SITUACION pill — convierte el