/* ==========================================================================
   Nebula CRM — tema "Glass contenido" (css/glass.css)
   Se carga AL FINAL del <head> de cada página (después de los <style> inline),
   sobre variables/base/layout/inbox/leads/pipeline/config. Solo presentación.
   - Aurora sutil (azul / índigo de marca) solo en el fondo de la página.
   - Glass (blur + borde claro + highlight) SOLO en contenedores: topbar, paneles,
     cards, modales. Mensajes, filas, inputs y botones van sobre superficies casi sólidas.
   - Sidebar/zona de marca: MISMO fondo oscuro sólido en modo claro y oscuro (logo sin recuadro).
   - Fallback sólido: prefers-reduced-transparency, (update: slow), sin soporte de
     backdrop-filter, o forzado con <html data-glass="off">.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. TOKENS — oscuro por defecto
   ------------------------------------------------------------------------- */
:root {
  /* Marca (relleno). El azul como TEXTO usa --gl-blue-text (contraste AA). */
  --color-primary: #1171FF;
  --color-primary-hover: #0D5FD9;
  --color-primary-light: rgba(17, 113, 255, 0.20);
  --color-primary-subtle: rgba(17, 113, 255, 0.12);

  /* Superficies (opacas: se usan en inputs, selects, popovers) */
  --color-bg: #060A16;
  --color-surface: #0F1528;
  --color-surface-2: #161D38;
  --color-surface-3: #212A4D;
  --color-border: rgba(170, 190, 255, 0.14);
  --color-border-strong: rgba(170, 190, 255, 0.30);

  /* Texto */
  --color-text: #F1F4FF;
  --color-text-secondary: #B2BAD6;
  --color-text-muted: #98A1C2;

  /* Estado */
  --color-success: #34D27B;
  --color-success-light: rgba(52, 210, 123, 0.16);
  --color-warning: #FBB02C;
  --color-warning-light: rgba(251, 176, 44, 0.16);
  --color-danger: #FF8585;
  --color-danger-light: rgba(255, 107, 107, 0.18);

  /* Etiquetas de lead */
  --color-frio: #6EA8FF;
  --color-frio-light: rgba(110, 168, 255, 0.18);
  --color-tibio: #FBB02C;
  --color-tibio-light: rgba(251, 176, 44, 0.18);
  --color-caliente: #FF8585;
  --color-caliente-light: rgba(255, 107, 107, 0.18);

  /* Tipografia (Poppins; tamanos apenas mas compactos y legibles) */
  --font-size-xs: 11.5px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;

  /* Radios: mas suaves */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Sombras con profundidad de vidrio */
  --shadow-sm: 0 1px 2px rgba(2, 5, 16, 0.5);
  --shadow-md: 0 6px 18px rgba(2, 5, 16, 0.5);
  --shadow-lg: 0 18px 50px rgba(2, 5, 16, 0.65);
  --shadow-primary: 0 6px 22px rgba(17, 113, 255, 0.42);

  --sidebar-width: 232px;
  --topbar-height: 62px;

  /* ---- Tokens propios d1 ---- */
  --gl-bg-base: #060A16;
  --gl-aurora:
    radial-gradient(1000px 680px at 6% -10%, rgba(17, 113, 255, 0.55), transparent 64%),
    radial-gradient(900px 640px at 98% 2%, rgba(112, 82, 255, 0.44), transparent 62%),
    radial-gradient(1000px 760px at 62% 118%, rgba(17, 113, 255, 0.30), transparent 64%),
    radial-gradient(640px 460px at 0% 96%, rgba(80, 62, 210, 0.28), transparent 66%),
    radial-gradient(620px 460px at 52% 40%, rgba(30, 120, 255, 0.16), transparent 70%),
    linear-gradient(135deg, #0B1536 0%, #060A16 52%, #0C0F2C 100%);

  /* Glass de contenedor (>= 74% opaco) */
  --glass-panel: rgba(18, 26, 54, 0.74);
  --glass-panel-strong: rgba(13, 18, 36, 0.88);
  --glass-border: rgba(170, 195, 255, 0.16);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glass-shadow: 0 10px 34px rgba(2, 5, 16, 0.42);
  --glass-blur: blur(18px) saturate(140%);
  --glass-blur-overlay: blur(6px);

  /* Filas y burbujas: mas solidas que el panel */
  --gl-row: rgba(24, 32, 62, 0.94);
  --gl-row-hover: rgba(33, 44, 84, 0.98);
  --gl-row-active: rgba(17, 113, 255, 0.26);
  --gl-row-active-border: rgba(110, 165, 255, 0.65);
  --gl-bubble-in: #1B2345;
  --gl-bubble-in-border: rgba(170, 195, 255, 0.14);
  --gl-bubble-bot: #12306C;
  --gl-bubble-bot-border: rgba(110, 165, 255, 0.40);
  --gl-bubble-agent: #2B3566;
  --gl-bubble-agent-border: rgba(190, 205, 255, 0.24);

  --gl-fill: #0B5FE3;
  --gl-blue-text: #7FB2FF;
  --gl-ring: #8DBBFF;
  --gl-manual-bg: #B45309;
  --gl-track: rgba(3, 6, 18, 0.55);
  --gl-input-bg: rgba(8, 12, 28, 0.70);
  --gl-scrim: rgba(3, 6, 16, 0.66);
  --gl-avatar-shade: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%), linear-gradient(rgba(4, 7, 20, 0.42), rgba(4, 7, 20, 0.42));
}

/* -------------------------------------------------------------------------
   2. TOKENS — claro (glass lavanda/azul palido; sidebar se mantiene oscuro)
   ------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --color-primary-light: rgba(17, 113, 255, 0.14);
  --color-primary-subtle: rgba(17, 113, 255, 0.08);

  --color-bg: #E9EEFA;
  --color-surface: #FFFFFF;
  --color-surface-2: #EDF1FB;
  --color-surface-3: #DCE3F5;
  --color-border: rgba(30, 50, 110, 0.14);
  --color-border-strong: rgba(30, 50, 110, 0.30);

  --color-text: #0B1022;
  --color-text-secondary: #424A66;
  --color-text-muted: #596283;

  --color-success: #15803D;
  --color-success-light: rgba(21, 128, 61, 0.12);
  --color-warning: #A3470A;
  --color-warning-light: rgba(163, 71, 10, 0.12);
  --color-danger: #AE1515;
  --color-danger-light: rgba(200, 30, 30, 0.10);

  --color-frio: #1D4ED8;
  --color-frio-light: rgba(29, 78, 216, 0.11);
  --color-tibio: #A3470A;
  --color-tibio-light: rgba(163, 71, 10, 0.12);
  --color-caliente: #AE1515;
  --color-caliente-light: rgba(200, 30, 30, 0.10);

  --shadow-sm: 0 1px 2px rgba(20, 35, 90, 0.10);
  --shadow-md: 0 6px 18px rgba(20, 35, 90, 0.14);
  --shadow-lg: 0 18px 50px rgba(20, 35, 90, 0.20);
  --shadow-primary: 0 6px 20px rgba(17, 113, 255, 0.32);

  --gl-bg-base: #E9EEFA;
  --gl-aurora:
    radial-gradient(900px 600px at 6% -10%, rgba(17, 113, 255, 0.22), transparent 62%),
    radial-gradient(800px 560px at 98% 0%, rgba(124, 99, 255, 0.18), transparent 60%),
    radial-gradient(900px 700px at 70% 115%, rgba(17, 113, 255, 0.14), transparent 62%);

  --glass-panel: rgba(255, 255, 255, 0.78);
  --glass-panel-strong: rgba(255, 255, 255, 0.90);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 10px 30px rgba(30, 50, 120, 0.14), 0 0 0 1px rgba(30, 50, 110, 0.08);
  --glass-blur: blur(16px) saturate(150%);

  --gl-row: rgba(255, 255, 255, 0.94);
  --gl-row-hover: #FFFFFF;
  --gl-row-active: rgba(17, 113, 255, 0.14);
  --gl-row-active-border: rgba(17, 113, 255, 0.70);
  --gl-bubble-in: #FFFFFF;
  --gl-bubble-in-border: rgba(30, 50, 110, 0.14);
  --gl-bubble-bot: #DDE9FF;
  --gl-bubble-bot-border: rgba(17, 113, 255, 0.38);
  --gl-bubble-agent: #E1E6F6;
  --gl-bubble-agent-border: rgba(30, 50, 110, 0.22);

  --gl-fill: #0B5FE3;
  --gl-blue-text: #0A55CC;
  --gl-ring: #0A55CC;
  --gl-manual-bg: #B45309;
  --gl-track: rgba(30, 50, 110, 0.12);
  --gl-input-bg: rgba(255, 255, 255, 0.92);
  --gl-scrim: rgba(12, 20, 50, 0.45);
  --gl-avatar-shade: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%), linear-gradient(rgba(4, 7, 20, 0.42), rgba(4, 7, 20, 0.42));
}

/* El sidebar sigue oscuro (vidrio azul-noche) en ambos temas: el logo es claro */
:root[data-theme="light"] .sidebar {
  --color-surface: #0F1528;
  --color-surface-2: #161D38;
  --color-surface-3: #212A4D;
  --color-border: rgba(170, 190, 255, 0.14);
  --color-border-strong: rgba(170, 190, 255, 0.30);
  --color-text: #F1F4FF;
  --color-text-secondary: #B2BAD6;
  --color-text-muted: #98A1C2;
  --color-danger: #FF6B6B;
  --color-danger-light: rgba(255, 107, 107, 0.16);
  --gl-blue-text: #7FB2FF;
  --gl-ring: #8DBBFF;
}

/* -------------------------------------------------------------------------
   3. FONDO — aurora fija detras de todo
   ------------------------------------------------------------------------- */
html {
  background-color: var(--gl-bg-base);
  background-image: var(--gl-aurora);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100%;
}
body {
  background-color: transparent;
  background-image: none;
  letter-spacing: 0.005em;
}
.main-area,
.chat-panel,
.lead-detail { background-color: transparent; }

h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Cifras alineadas */
.stat-value, .an-kpi-value, .an-bar-count, .conv-time, .lead-item-time, .msg-time,
.nav-pendientes-badge, .nav-item-badge, .conv-unread, .pipeline-col-count,
.lead-history-meta, .topbar-right, .chat-lead-phone, .lead-item-phone {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   4. FOCO VISIBLE (AA 3:1) — global
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gl-ring);
  outline-offset: 2px;
}
.sidebar :focus-visible { outline-color: #8DBBFF; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gl-ring);
  outline-offset: 1px;
}
.conv-item:focus-visible, .lead-item:focus-visible, .pipeline-card:focus-visible {
  outline-offset: -2px;
}

/* -------------------------------------------------------------------------
   5. GLASS — contenedores
   ------------------------------------------------------------------------- */
.sidebar {
  /* Zona de marca + navegación: mismo fondo oscuro SÓLIDO en claro y oscuro (no depende de --glass-*). */
  background-color: #0A1024;
  background-image: linear-gradient(180deg, rgba(17, 113, 255, 0.12), rgba(17, 113, 255, 0) 38%);
  border-right: 1px solid rgba(170, 195, 255, 0.14);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04), 8px 0 40px rgba(2, 5, 16, 0.35);
}
.sidebar-logo {
  border-bottom: 1px solid rgba(170, 195, 255, 0.12);
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.sidebar-logo img {
  filter: drop-shadow(0 0 16px rgba(17, 113, 255, 0.40));
}
.sidebar-footer { border-top: 1px solid rgba(170, 195, 255, 0.12); }

.topbar {
  background-color: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), 0 6px 24px rgba(2, 5, 16, 0.18);
}
.topbar-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
.topbar-right { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* Cards / paneles */
.card, .stat-card, .table-section, .modal, .config-card, .config-save-card,
.an-filter, .an-kpi, .an-chart-card, .add-lead-form, .prod-picker-box {
  background-color: var(--glass-panel);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
:root[data-theme="light"] .card, :root[data-theme="light"] .stat-card,
:root[data-theme="light"] .table-section, :root[data-theme="light"] .modal,
:root[data-theme="light"] .config-card, :root[data-theme="light"] .config-save-card,
:root[data-theme="light"] .an-filter, :root[data-theme="light"] .an-kpi,
:root[data-theme="light"] .an-chart-card, :root[data-theme="light"] .add-lead-form {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
}
.modal, .prod-picker-box {
  background-color: var(--glass-panel-strong);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
}
.modal-overlay, .prod-picker-overlay {
  background-color: var(--gl-scrim);
  -webkit-backdrop-filter: var(--glass-blur-overlay);
  backdrop-filter: var(--glass-blur-overlay);
}
.modal-header, .modal-footer, .prod-picker-head, .table-toolbar {
  border-color: var(--color-border);
}
.data-table th { background-color: transparent; }
.data-table tbody tr:hover { background-color: var(--color-primary-subtle); }

/* Paneles de Inbox / Leads: glass de columna */
.conv-panel, .leads-list-panel {
  background-color: var(--glass-panel);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 30%);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}
.conv-panel-header, .leads-list-header { border-bottom: 1px solid var(--color-border); }

.chat-header, .lead-detail-header {
  background-color: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}
/* T77: barra del lead bajo el header del chat (mismo vidrio que el header). */
.chat-lead-bar {
  background-color: var(--glass-panel);
  border-bottom: 1px solid var(--glass-border);
}
.chat-input-area {
  background-color: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* -------------------------------------------------------------------------
   6. SIDEBAR / NAV
   ------------------------------------------------------------------------- */
.nav-item {
  min-height: 38px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border: 1px solid transparent;
}
.nav-item:hover {
  background-color: rgba(120, 150, 255, 0.12);
  border-color: rgba(170, 195, 255, 0.14);
  color: var(--color-text);
}
.nav-item.active {
  background-color: rgba(17, 113, 255, 0.24);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  border-color: rgba(110, 165, 255, 0.50);
  color: #FFFFFF;
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 3px 0 0 var(--color-primary), 0 4px 16px rgba(17, 113, 255, 0.22);
}
.nav-item.active svg { stroke: #9CC4FF; }
.nav-section-label { letter-spacing: 0.12em; }
.nav-pendientes-badge, .nav-item-badge {
  background-color: var(--gl-fill);
  box-shadow: 0 0 0 2px rgba(9, 13, 28, 0.9);
  color: #fff;
}
.sidebar-user-avatar {
  background-color: rgba(17, 113, 255, 0.28);
  color: #CFE1FF;
  border: 1px solid rgba(110, 165, 255, 0.45);
}
.sidebar-user-role { color: var(--color-text-muted); }
.sidebar-logout:hover { color: #FF8F8F; }

/* -------------------------------------------------------------------------
   7. BOTONES / INPUTS / BADGES
   ------------------------------------------------------------------------- */
.btn { border-radius: var(--radius-md); font-weight: var(--font-weight-medium); }
.btn-primary {
  background-color: var(--gl-fill);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 14px rgba(17, 113, 255, 0.35);
}
.btn-primary:hover:not(:disabled) {
  background-color: #0D66EE;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 22px rgba(17, 113, 255, 0.5);
}
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-secondary {
  background-color: rgba(130, 160, 255, 0.10);
  border-color: var(--glass-border);
  box-shadow: var(--glass-highlight);
}
:root[data-theme="light"] .btn-secondary { background-color: rgba(255, 255, 255, 0.85); }
.btn-secondary:hover:not(:disabled) { background-color: rgba(130, 160, 255, 0.20); border-color: var(--color-border-strong); }
:root[data-theme="light"] .btn-secondary:hover:not(:disabled) { background-color: #fff; }
.btn-ghost:hover:not(:disabled) { background-color: rgba(130, 160, 255, 0.14); }
.btn-danger { border: 1px solid transparent; }
.btn-danger:hover:not(:disabled) { background-color: #DC2626; color: #fff; }
.btn:disabled, .btn-send:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; filter: saturate(0.6); }

.input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="search"], input[type="date"], input[type="number"], select, textarea {
  background-color: var(--gl-input-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px rgba(2, 5, 16, 0.25);
}
:root[data-theme="light"] .input, :root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="email"], :root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="tel"], :root[data-theme="light"] input[type="search"],
:root[data-theme="light"] input[type="date"], :root[data-theme="light"] input[type="number"],
:root[data-theme="light"] select, :root[data-theme="light"] textarea {
  box-shadow: inset 0 1px 2px rgba(20, 35, 90, 0.08);
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(17, 113, 255, 0.32);
}
.conv-search, .leads-search { background-color: var(--gl-input-bg) !important; }
.leads-filters select { background-color: var(--gl-input-bg) !important; }
.conv-filter-select {
  background: var(--gl-input-bg);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-sm);
}
::placeholder { color: var(--color-text-muted); opacity: 1; }

.badge { font-weight: var(--font-weight-semibold); border: 1px solid transparent; letter-spacing: 0.01em; }
.badge-primary { color: var(--gl-blue-text); border-color: rgba(110, 165, 255, 0.30); }
.badge-success { border-color: rgba(52, 210, 123, 0.30); }
.badge-warning { border-color: rgba(251, 176, 44, 0.32); }
.badge-danger  { border-color: rgba(255, 107, 107, 0.32); }
.badge-gray    { background: var(--color-surface-3); color: var(--color-text-secondary); border-color: var(--color-border); }
.badge-frio     { border-color: rgba(110, 168, 255, 0.36); }
.badge-tibio    { border-color: rgba(251, 176, 44, 0.38); }
.badge-caliente { border-color: rgba(255, 107, 107, 0.40); }
:root[data-theme="light"] .badge-frio { border-color: rgba(29, 78, 216, 0.30); }
:root[data-theme="light"] .badge-tibio { border-color: rgba(180, 83, 9, 0.32); }
:root[data-theme="light"] .badge-caliente { border-color: rgba(200, 30, 30, 0.32); }
:root[data-theme="light"] .badge-success { border-color: rgba(21, 128, 61, 0.30); }
:root[data-theme="light"] .badge-warning { border-color: rgba(180, 83, 9, 0.32); }
:root[data-theme="light"] .badge-danger  { border-color: rgba(200, 30, 30, 0.30); }

a { color: var(--gl-blue-text); }
a:hover { color: var(--color-text); }
.text-primary { color: var(--gl-blue-text); }
.theme-toggle {
  background-color: rgba(130, 160, 255, 0.12);
  border-color: var(--glass-border);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-highlight);
}
.theme-toggle:hover { color: var(--color-text); background-color: rgba(130, 160, 255, 0.22); }

/* Scrollbars discretos */
::-webkit-scrollbar-thumb { background: rgba(150, 175, 255, 0.28); }
::-webkit-scrollbar-thumb:hover { background: rgba(150, 175, 255, 0.5); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(30, 50, 110, 0.28); }

/* -------------------------------------------------------------------------
   8. INBOX — lista de conversaciones
   ------------------------------------------------------------------------- */
.conv-panel-title, .leads-list-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
.conv-list, .leads-list { padding: 6px 0 10px; }

.conv-item, .lead-item {
  margin: 3px 8px;
  border: 1px solid rgba(170, 195, 255, 0.09);
  border-left: 1px solid rgba(170, 195, 255, 0.09);
  border-radius: var(--radius-md);
  background-color: var(--gl-row);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
:root[data-theme="light"] .conv-item, :root[data-theme="light"] .lead-item {
  border-color: rgba(30, 50, 110, 0.10);
  box-shadow: 0 1px 2px rgba(20, 35, 90, 0.06);
}
.conv-item:hover, .lead-item:hover {
  background-color: var(--gl-row-hover);
  border-color: var(--color-border-strong);
}
.conv-item.active, .lead-item.active {
  background-color: var(--gl-row-active);
  background-image: linear-gradient(90deg, rgba(17, 113, 255, 0.18), rgba(17, 113, 255, 0) 70%);
  border: 1px solid var(--gl-row-active-border);
  box-shadow: inset 3px 0 0 var(--color-primary), 0 4px 18px rgba(17, 113, 255, 0.20);
}
.lead-item.active { padding-left: var(--space-4); }

.conv-name, .lead-item-name { font-weight: var(--font-weight-semibold); letter-spacing: -0.005em; }
.conv-time, .lead-item-time { color: var(--color-text-muted); font-size: 11px; }
.conv-preview, .lead-item-phone { color: var(--color-text-secondary); font-size: var(--font-size-xs); }

/* Avatares: sombreado para que la inicial blanca pase AA sobre colores inline */
.conv-avatar, .lead-avatar, .lead-detail-avatar {
  flex-shrink: 0;
  background-image: var(--gl-avatar-shade);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10), 0 4px 10px rgba(2, 5, 16, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] .conv-avatar, :root[data-theme="light"] .lead-avatar,
:root[data-theme="light"] .lead-detail-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 3px 8px rgba(20, 35, 90, 0.22); }

/* Estado IA / Manual del avatar */
.conv-avatar-status { width: 12px; height: 12px; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.conv-avatar-status.ia { background-color: #3B8BFF; }
.conv-avatar-status.manual { background-color: #FBB02C; }

/* Asignado / Sin asignar */
.conv-vendor {
  background-color: #0D5FD9;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  color: #fff;
  border: 1px solid rgba(150, 195, 255, 0.45);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
}
.conv-vendor.unassigned {
  background-color: var(--color-surface-3); /* gris neutro, nunca azul (contrato de test/inbox-vendedor-badge-visual) */
  background-image: none;
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border-strong);
  font-weight: var(--font-weight-medium);
}

/* No leido: punto con halo + nombre mas fuerte */
.conv-unread {
  background-color: var(--gl-fill);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(17, 113, 255, 0.28), 0 0 14px rgba(17, 113, 255, 0.6);
}
.conv-item:has(.conv-unread) .conv-name { font-weight: 700; }
.conv-item:has(.conv-unread) .conv-preview { color: var(--color-text); }
.conv-item:has(.conv-unread) .conv-time { color: var(--gl-blue-text); font-weight: var(--font-weight-semibold); }

.conv-list-state, .leads-empty-state, .chat-empty p, .lead-detail-empty p { color: var(--color-text-muted); }
.chat-empty svg, .lead-detail-empty svg { stroke: var(--color-border-strong); }

/* Boton de sonido (estilo inline) */
#btnSoundToggle {
  background: rgba(130, 160, 255, 0.10) !important;
  border-color: var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--gl-blue-text) !important;
}

/* -------------------------------------------------------------------------
   9. INBOX — chat
   ------------------------------------------------------------------------- */
.chat-lead-name { font-size: var(--font-size-md); letter-spacing: -0.005em; }
.chat-lead-phone { color: var(--color-text-secondary); }

.mode-toggle {
  background-color: var(--gl-track);
  border: 1px solid var(--color-border-strong);
  padding: 3px;
  box-shadow: inset 0 1px 2px rgba(2, 5, 16, 0.3);
}
.mode-btn { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); min-height: 28px; }
.mode-btn:hover { color: var(--color-text); }
.mode-btn.active-ia {
  background-color: var(--gl-fill);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  color: #fff;
  box-shadow: 0 2px 10px rgba(17, 113, 255, 0.5);
  font-weight: var(--font-weight-semibold);
}
.mode-btn.active-manual {
  background-color: var(--gl-manual-bg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  color: #fff;
  box-shadow: 0 2px 10px rgba(180, 83, 9, 0.5);
  font-weight: var(--font-weight-semibold);
}

.chat-messages { gap: var(--space-2); padding: var(--space-5) var(--space-6); }
.msg-date-sep span {
  color: var(--color-text-secondary);
  background-color: var(--gl-row);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px 12px;
  font-weight: var(--font-weight-medium);
}

.msg-bubble {
  border-radius: 18px;
  padding: 9px 13px;
  box-shadow: 0 2px 8px rgba(2, 5, 16, 0.28);
}
:root[data-theme="light"] .msg-bubble { box-shadow: 0 1px 4px rgba(20, 35, 90, 0.10); }
.msg-row.incoming .msg-bubble {
  background-color: var(--gl-bubble-in);
  border: 1px solid var(--gl-bubble-in-border);
  border-bottom-left-radius: 5px;
}
.msg-row.outgoing .msg-bubble { border-bottom-right-radius: 5px; }
.msg-row.outgoing.by-bot .msg-bubble {
  background-color: var(--gl-bubble-bot);
  border: 1px solid var(--gl-bubble-bot-border);
}
.msg-row.outgoing.by-agente .msg-bubble {
  background-color: var(--gl-bubble-agent);
  border: 1px solid var(--gl-bubble-agent-border);
}
.msg-text { line-height: 1.55; }
.msg-time { color: var(--color-text-muted); font-size: 10.5px; }
.msg-sender-tag { color: var(--gl-blue-text); font-weight: var(--font-weight-semibold); font-size: 10.5px; }
.msg-sender-tag.agent { color: var(--color-text-secondary); }
.msg-sender-tag.whatsapp { color: var(--color-success); }

.msg-doc, .msg-adjunto-pendiente, .msg-adjunto-error {
  background: rgba(3, 6, 18, 0.35);
  border-color: var(--color-border-strong);
}
:root[data-theme="light"] .msg-doc, :root[data-theme="light"] .msg-adjunto-pendiente,
:root[data-theme="light"] .msg-adjunto-error { background: rgba(255, 255, 255, 0.75); }

.ia-banner {
  background-color: var(--glass-panel-strong);
  background-image: linear-gradient(90deg, rgba(17, 113, 255, 0.20), rgba(17, 113, 255, 0.06));
  border-top: 1px solid rgba(110, 165, 255, 0.35);
  color: var(--gl-blue-text);
  font-weight: var(--font-weight-medium);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.ia-dot { background-color: #5BA0FF; box-shadow: 0 0 10px #3B8BFF; }

.chat-textarea { border-radius: 14px !important; background-color: var(--gl-input-bg) !important; }
.btn-send {
  border-radius: 14px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 14px rgba(17, 113, 255, 0.4);
}
.btn-attach {
  background: rgba(130, 160, 255, 0.10) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text-secondary) !important;
  border-radius: 14px !important;
}
:root[data-theme="light"] .btn-attach { background: rgba(255, 255, 255, 0.9) !important; }
.btn-attach:hover { color: var(--gl-blue-text) !important; border-color: var(--color-primary) !important; }
.chat-back-btn { color: var(--color-text); border: 1px solid var(--color-border); background: rgba(130, 160, 255, 0.10); }

/* -------------------------------------------------------------------------
   10. LEADS — ficha
   ------------------------------------------------------------------------- */
.lead-detail-name { font-size: var(--font-size-xl); letter-spacing: -0.015em; }
.lead-detail-phone { color: var(--color-text-secondary); }
.lead-section-title { color: var(--color-text-secondary); letter-spacing: 0.1em; }
.lead-field label, .lead-info-label { color: var(--color-text-secondary); }

.lead-detail-body > .lead-section,
.lead-detail-body > .lead-info-grid {
  background-color: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.lead-info-grid { gap: var(--space-2); }
.lead-info-item {
  background-color: var(--gl-row);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.lead-info-value { font-variant-numeric: tabular-nums; }
.lead-history { background-color: rgba(3, 6, 18, 0.30); border: 1px solid var(--color-border); }
:root[data-theme="light"] .lead-history { background-color: rgba(30, 50, 110, 0.06); }
.lead-history-bubble {
  background-color: var(--gl-bubble-in);
  border-color: var(--gl-bubble-in-border);
  color: var(--color-text);
  border-radius: 12px;
}
.lead-history-bubble.outgoing {
  background-color: var(--gl-bubble-bot);
  border-color: var(--gl-bubble-bot-border);
}
.lead-history-meta { color: var(--color-text-muted); }
.btn-ver-conv { color: var(--gl-blue-text); border-color: var(--color-border-strong); background: rgba(130, 160, 255, 0.08); min-height: 36px; }
.btn-ver-conv:hover { background: var(--color-primary-light); border-color: var(--color-primary); }

/* -------------------------------------------------------------------------
   11. DASHBOARD (analytics-cliente) y KPIs
   ------------------------------------------------------------------------- */
.an-filter { border-radius: var(--radius-lg); }
.an-filter-label { color: var(--color-text-secondary); }
.an-shortcut {
  min-height: 32px;
  background-color: rgba(130, 160, 255, 0.10);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  padding: 4px 14px;
}
:root[data-theme="light"] .an-shortcut { background-color: rgba(255, 255, 255, 0.85); }
.an-shortcut:hover { color: var(--color-text); border-color: var(--color-primary); }
.an-shortcut.active {
  background-color: var(--gl-fill);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  border-color: rgba(150, 195, 255, 0.6);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 3px 14px rgba(17, 113, 255, 0.4);
}
.an-kpi { border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.an-kpi::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(17, 113, 255, 0), rgba(17, 113, 255, 0.9), rgba(124, 99, 255, 0));
  opacity: 0.7;
}
.an-kpi-label { color: var(--color-text-secondary); letter-spacing: 0.1em; font-weight: var(--font-weight-semibold); }
.an-kpi-value { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.an-kpi-sub { color: var(--color-text-secondary); }
.an-chart-card { border-radius: var(--radius-lg); }
.an-chart-title { font-size: var(--font-size-md); letter-spacing: -0.005em; }
.an-bar-label { color: var(--color-text-secondary); }
.an-bar-count { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.an-bar-track { background-color: var(--gl-track); box-shadow: inset 0 1px 2px rgba(2, 5, 16, 0.4); height: 9px; border-radius: 6px; }
.an-bar-fill { border-radius: 6px; box-shadow: 0 0 12px -2px rgba(17, 113, 255, 0.55); }
.an-date-sep { color: var(--color-text-secondary); }
.an-empty { color: var(--color-text-muted); }

.stat-card { border-radius: var(--radius-lg); }
.stat-value { letter-spacing: -0.03em; }
.stat-label { color: var(--color-text-secondary); }
.stat-icon.blue { color: var(--gl-blue-text); }

/* -------------------------------------------------------------------------
   12. PIPELINE / CONFIG / otros
   ------------------------------------------------------------------------- */
.pipeline-cards { background-color: rgba(3, 6, 18, 0.28); border-radius: var(--radius-lg); }
:root[data-theme="light"] .pipeline-cards { background-color: rgba(30, 50, 110, 0.07); }
.pipeline-card {
  background-color: var(--gl-row);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-highlight), 0 3px 10px rgba(2, 5, 16, 0.25);
}
:root[data-theme="light"] .pipeline-card { box-shadow: 0 2px 8px rgba(20, 35, 90, 0.10); }
.pipeline-card:hover { border-color: var(--color-primary); }
.pipeline-col-count { background-color: var(--color-surface-3); color: var(--color-text); }
.prompt-hint, .tone-icon { background-color: var(--color-surface-2); }

.toggle-estado.activo, .toggle-estado.onboarding, .toggle-estado.suspendido { font-weight: var(--font-weight-semibold); }
.wa-dot.off { background-color: var(--color-text-muted); }

/* Toast flotante del Inbox (estilo inline) */
.toast, [class*="toast"] { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* -------------------------------------------------------------------------
   13. MOVIL (<= 768px) — objetivos tactiles >= 40px, sin overflow
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --topbar-height: 60px; --glass-blur: blur(10px) saturate(130%); }
  .mobile-nav-toggle {
    width: 42px; height: 42px; top: 9px; left: 10px;
    background-color: var(--glass-panel-strong);
    border-color: var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-highlight), var(--shadow-md);
  }
  .topbar { padding-left: 62px; padding-right: var(--space-3); }
  .topbar-right { font-size: var(--font-size-xs); }
  .mobile-nav-backdrop { background-color: var(--gl-scrim); }
  .sidebar { width: min(var(--sidebar-width), 84vw); }

  .nav-item { min-height: 44px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 40px; }
  .theme-toggle { width: 40px; height: 40px; }
  .conv-search, .leads-search { height: 42px; }
  .conv-filter-select { height: 40px; font-size: var(--font-size-sm); }
  .leads-filters select { height: 40px; }
  .conv-item, .lead-item { min-height: 64px; }
  #btnSoundToggle { width: 40px !important; height: 40px !important; }

  .chat-back-btn { width: 40px; height: 40px; }
  .mode-btn { min-height: 34px; padding: 5px 12px; }
  .btn-send, .btn-attach { width: 44px !important; height: 44px !important; }
  .chat-textarea { height: 44px; min-height: 44px; }
  .chat-input-area { padding: var(--space-3); gap: var(--space-2); }
  .chat-messages { padding: var(--space-4) var(--space-3); }
  .msg-bubble { max-width: 84%; }
  .an-shortcut { min-height: 40px; }

  .conv-panel, .leads-list-panel { border-right: none; }
  .an-kpi-grid { grid-template-columns: 1fr 1fr; }
  .an-charts { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   14. FALLBACK SÓLIDO — sin blur y con superficies casi opacas cuando:
     a) el usuario pide menos transparencia (prefers-reduced-transparency),
     b) el dispositivo declara pantalla lenta (update: slow),
     c) el navegador no soporta backdrop-filter,
     d) se fuerza a mano con <html data-glass="off"> (equipos donde el blur rinde mal).
   El sidebar ya es sólido siempre. Todo el glass usa var(--glass-blur), así que
   basta con poner el token en none y subir la opacidad de los paneles.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-panel: rgba(16, 23, 48, 0.96);
    --glass-panel-strong: rgba(13, 18, 38, 0.98);
    --gl-row: #182040;
    --gl-input-bg: #0A0F22;
    --glass-blur: none;
    --glass-blur-overlay: none; }
  :root[data-theme="light"] { --glass-panel: rgba(255, 255, 255, 0.97);
    --glass-panel-strong: #FFFFFF;
    --gl-row: #FFFFFF;
    --gl-input-bg: #FFFFFF;
    --glass-blur: none;
    --glass-blur-overlay: none; }
  .card, .stat-card, .table-section, .modal, .config-card, .config-save-card,
  .an-filter, .an-kpi, .an-chart-card, .add-lead-form, .conv-panel, .leads-list-panel,
  .topbar, .chat-header, .chat-input-area, .lead-detail-header { background-image: none; }
}
@media (update: slow) {
  :root { --glass-panel: rgba(16, 23, 48, 0.96);
    --glass-panel-strong: rgba(13, 18, 38, 0.98);
    --gl-row: #182040;
    --gl-input-bg: #0A0F22;
    --glass-blur: none;
    --glass-blur-overlay: none; }
  :root[data-theme="light"] { --glass-panel: rgba(255, 255, 255, 0.97);
    --glass-panel-strong: #FFFFFF;
    --gl-row: #FFFFFF;
    --gl-input-bg: #FFFFFF;
    --glass-blur: none;
    --glass-blur-overlay: none; }
  .card, .stat-card, .table-section, .modal, .config-card, .config-save-card,
  .an-filter, .an-kpi, .an-chart-card, .add-lead-form, .conv-panel, .leads-list-panel,
  .topbar, .chat-header, .chat-input-area, .lead-detail-header { background-image: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-panel: rgba(16, 23, 48, 0.96);
    --glass-panel-strong: rgba(13, 18, 38, 0.98);
    --gl-row: #182040;
    --gl-input-bg: #0A0F22;
    --glass-blur: none;
    --glass-blur-overlay: none; }
  :root[data-theme="light"] { --glass-panel: rgba(255, 255, 255, 0.97);
    --glass-panel-strong: #FFFFFF;
    --gl-row: #FFFFFF;
    --gl-input-bg: #FFFFFF;
    --glass-blur: none;
    --glass-blur-overlay: none; }
  .card, .stat-card, .table-section, .modal, .config-card, .config-save-card,
  .an-filter, .an-kpi, .an-chart-card, .add-lead-form, .conv-panel, .leads-list-panel,
  .topbar, .chat-header, .chat-input-area, .lead-detail-header { background-image: none; }
}
:root[data-glass="off"] { --glass-panel: rgba(16, 23, 48, 0.96);
    --glass-panel-strong: rgba(13, 18, 38, 0.98);
    --gl-row: #182040;
    --gl-input-bg: #0A0F22;
    --glass-blur: none;
    --glass-blur-overlay: none; }
:root[data-glass="off"][data-theme="light"] { --glass-panel: rgba(255, 255, 255, 0.97);
    --glass-panel-strong: #FFFFFF;
    --gl-row: #FFFFFF;
    --gl-input-bg: #FFFFFF;
    --glass-blur: none;
    --glass-blur-overlay: none; }
.card, .stat-card, .table-section, .modal, .config-card, .config-save-card,
  .an-filter, .an-kpi, .an-chart-card, .add-lead-form, .conv-panel, .leads-list-panel,
  .topbar, .chat-header, .chat-input-area, .lead-detail-header { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ia-dot { animation: none; }
}

/* -------------------------------------------------------------------------
   15. AJUSTES FINOS (estilos inline de las paginas)
   ------------------------------------------------------------------------- */
:root[data-theme="light"] .an-shortcut.active {
  background-color: var(--gl-fill);
  color: #fff;
  border-color: rgba(10, 85, 204, 0.8);
}
.an-bar-count { width: auto; min-width: 20px; white-space: nowrap; }
[style*=";color:#22C55E"] { color: var(--color-success) !important; }
[style*=";color:#EF4444"] { color: var(--color-danger) !important; }
[style*="--color-muted"] { color: var(--color-text-secondary) !important; }

/* Rellenos con texto blanco: azul de marca un punto mas profundo para AA (>= 4.5:1) */
.btn-primary, .mode-btn.active-ia, .an-shortcut.active, .nav-pendientes-badge,
.nav-item-badge, .conv-unread, .btn-send, :root[data-theme="light"] .an-shortcut.active {
  background-color: var(--gl-fill);
}
.btn-primary:hover:not(:disabled) { background-color: #1A74F5; }

/* Movil: contencion de desbordes (dashboard / leads no tenian layout movil) */
@media (max-width: 768px) {
  .page-content { padding: var(--space-4) var(--space-3); gap: var(--space-4); }
  .main-area, .page-content, .an-shell { min-width: 0; max-width: 100vw; }
  .topbar-right { min-width: 0; gap: var(--space-2); }
  .topbar-right > :not(.theme-toggle) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .an-filter { padding: var(--space-3); }
  .an-shortcuts { flex-wrap: wrap; }
  .an-date-range { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .an-date-range input { flex: 1 1 120px; min-width: 0; }
  .an-kpi-value { font-size: 2rem; }
  .an-kpi { padding: var(--space-4); }
  .an-bar-label { width: 84px !important; }
  .leads-shell { flex-direction: column; overflow: visible; }
  .leads-list-panel { width: 100%; height: 52vh; flex-shrink: 0; border-right: none; border-bottom: 1px solid var(--glass-border); }
  .lead-detail { overflow: visible; }
  .lead-detail-header { padding: var(--space-4); }
  .lead-detail-body { padding: var(--space-3); }
  .lead-field-row { flex-wrap: wrap; }
  .lead-field { min-width: 140px; }
  .lead-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .chat-header { padding: var(--space-2) var(--space-2); gap: 6px; }
  .chat-header-left { gap: 6px; flex-shrink: 0; overflow: visible; }
  .chat-header .conv-avatar { min-width: 36px; width: 36px !important; height: 36px !important; flex-shrink: 0; }
  .chat-header { flex-wrap: wrap; row-gap: 6px; }
  .chat-header-left { flex: 1 1 100%; overflow: hidden; }
  .chat-header-right { flex: 1 1 100%; justify-content: space-between; }
  .chat-lead-info { min-width: 0; }
  .chat-lead-name, .chat-lead-phone { max-width: 230px; }
  .chat-header-right { gap: 6px; min-width: 0; }
  #selectVendedorInbox { min-width: 0 !important; max-width: 190px; height: 40px !important; padding-left: 10px !important; padding-right: 26px !important; }
  .mode-btn { padding: 5px 9px; }
}

/* -------------------------------------------------------------------------
   16. COBERTURA COMPLETA (2026-09-30) — vistas y modales restantes
   Solo presentación. Toda superficie nueva usa --glass-panel / --glass-panel-strong /
   --gl-row / --gl-input-bg y var(--glass-blur*), así el fallback sólido las cubre.
   ------------------------------------------------------------------------- */

/* 16.1 Contención de layout (todas las resoluciones): un hijo flex nunca fuerza el ancho de la página */
.main-area, .page-content, .config-shell, .pipeline-shell, .an-shell { min-width: 0; }
.main-area { max-width: 100%; }
.page-content > * { min-width: 0; }

/* 16.2 Superficies glass adicionales (analytics superadmin, login, productos, modales de página) */
.kpi-card, .dist-card, .ratio-card, .top-card, .login-card, .prod-table-wrap, .modal-box,
.cita-row, .month-grid, .week-grid, .media-locked-card {
  background-color: var(--glass-panel);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
:root[data-theme="light"] .kpi-card, :root[data-theme="light"] .dist-card, :root[data-theme="light"] .ratio-card,
:root[data-theme="light"] .top-card, :root[data-theme="light"] .login-card, :root[data-theme="light"] .prod-table-wrap,
:root[data-theme="light"] .modal-box, :root[data-theme="light"] .cita-row {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
}
.modal-box { background-color: var(--glass-panel-strong); box-shadow: var(--glass-highlight), var(--shadow-lg); border-radius: var(--radius-xl); }
.kpi-card, .dist-card, .ratio-card, .top-card, .login-card { border-radius: var(--radius-lg); }
.login-card { border-radius: var(--radius-xl); }
.login-card .btn-login, .login-card .btn-primary { min-height: 44px; }
.kpi-label, .dist-plan-count, .kpi-sub { color: var(--color-text-secondary); }
.kpi-value.blue, .months-pill { color: var(--gl-blue-text); }
.months-pill { border: 1px solid rgba(110, 165, 255, 0.30); }
.bar-track { background-color: var(--gl-track); box-shadow: inset 0 1px 2px rgba(2, 5, 16, 0.35); }
.top-table th { color: var(--color-text-secondary); }
.top-table tbody tr:hover td, .prod-table tr:hover td { background-color: var(--color-primary-subtle); }
.prod-table th { color: var(--color-text-secondary); }
.prod-table-wrap { overflow: hidden; }
.prod-input { background-color: var(--gl-input-bg); border-color: var(--color-border-strong); border-radius: var(--radius-md); }
.prod-video-chip, .btn-mini { border-color: var(--color-border-strong); }
.prod-addphoto, .prod-addvideo { border-color: var(--color-border-strong); color: var(--color-text-secondary); }
.prod-addphoto:hover, .prod-addvideo:hover { border-color: var(--color-primary); color: var(--gl-blue-text); }
.ta-paste { background-color: var(--gl-input-bg); border-color: var(--color-border-strong); border-radius: var(--radius-md); }
.modal-x { color: var(--color-text-secondary); }
.modal-x:hover { color: var(--color-text); }
.prod-msg { border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* Modales: scrim consistente, cuerpo con scroll propio, nunca más alto que la pantalla */
.modal-overlay { background-color: var(--gl-scrim); -webkit-backdrop-filter: var(--glass-blur-overlay); backdrop-filter: var(--glass-blur-overlay); }
.modal, .modal-box, .prod-picker-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.modal { overflow-y: auto; }
.prod-picker-row:hover { background-color: var(--color-primary-subtle); }
.prod-picker-thumb { border-color: var(--color-border-strong); }
#citaLeadResults {
  background-color: var(--glass-panel-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}
#citaLeadResults .clr-item:hover { background-color: var(--color-primary-subtle); }
.form-error { border: 1px solid rgba(255, 107, 107, 0.30); }

/* 16.3 Calendario de citas */
.view-toggle { background-color: var(--gl-track); border-color: var(--color-border-strong); }
.view-toggle button.active, .month-daynum.today, .week-colnum.today {
  background-color: var(--gl-fill);
  color: #fff;
}
.view-toggle button.active { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); }
.cal-period { color: var(--color-text); }
.btn-icon { border-color: var(--color-border-strong); background-color: rgba(130, 160, 255, 0.08); border-radius: var(--radius-md); }
:root[data-theme="light"] .btn-icon { background-color: rgba(255, 255, 255, 0.85); }
.btn-icon:hover { background-color: rgba(130, 160, 255, 0.20); }
.month-grid, .week-grid { background-color: var(--color-border); background-image: none; gap: 1px; }
.month-cell, .week-col { background-color: var(--gl-row); }
.month-cell:hover, .week-col:hover { background-color: var(--gl-row-hover); box-shadow: inset 0 0 0 1px var(--gl-row-active-border); }
.week-col.today { background-color: var(--gl-row-active); }
.month-cell.other { background-color: var(--glass-panel-strong); }
.month-cell.other .month-daynum { color: var(--color-text-secondary); }
.month-cell.other .cal-chip { opacity: 1; background-color: var(--color-surface-2); }
.month-cell.other .cal-chip-nombre { color: var(--color-text-secondary); }
.cal-chip { background-color: var(--color-surface-3); }
:root[data-theme="light"] .cal-chip { background-color: var(--color-surface-2); border: 1px solid var(--color-border); border-left-width: 3px; }
.cal-chip:hover { background-color: var(--color-primary-light); }
.cal-chip.is-cancelada { opacity: 1; }
.cal-chip.is-cancelada .cal-chip-nombre, .cal-chip.is-cancelada .cal-chip-hora { color: var(--color-text-secondary); }
.cal-chip-hora, .cita-hora-block { color: var(--gl-blue-text); }
.month-more:hover { color: var(--gl-blue-text); }
.cita-estado { border: 1px solid transparent; }
.estado-pendiente { border-color: rgba(251, 176, 44, 0.32); }
.estado-confirmada { border-color: rgba(52, 210, 123, 0.30); }
.estado-cancelada { border-color: rgba(255, 107, 107, 0.32); }
:root[data-theme="light"] .estado-pendiente { border-color: rgba(163, 71, 10, 0.30); }
:root[data-theme="light"] .estado-confirmada { border-color: rgba(21, 128, 61, 0.30); }
:root[data-theme="light"] .estado-cancelada { border-color: rgba(174, 21, 21, 0.30); }
.citas-locked-icon { background-color: var(--color-primary-light); }

/* 16.4 Configuración IA */
.plantilla-btn { background-color: var(--gl-row); border-color: var(--color-border-strong); border-radius: var(--radius-md); }
.plantilla-btn:hover { background-color: var(--gl-row-hover); border-color: var(--color-primary); }
.plantilla-btn.selected { background-color: var(--gl-row-active); border-color: var(--gl-row-active-border); }
.plantilla-btn.selected svg { stroke: var(--gl-blue-text); }
.plantilla-btn.selected .plantilla-btn-name, .notif-cond.on { color: var(--gl-blue-text); }
.notif-cond { background-color: var(--gl-row); border-color: var(--color-border-strong); }
.notif-cond.on { background-color: var(--gl-row-active); border-color: var(--gl-row-active-border); }
.media-item, .media-locked, .media-thumb, .media-badge, .media-desc-input, .prompt-hint { background-color: var(--gl-row); border-color: var(--color-border); }
.media-desc-input { background-color: var(--gl-input-bg); color: var(--color-text); }
.media-upload-zone { border-color: var(--color-border-strong); background-color: rgba(130, 160, 255, 0.06); }
.media-upload-zone:hover { background-color: var(--color-primary-light); border-color: var(--color-primary); }
.media-progress { background-color: var(--gl-track); }
.day-btn { min-height: 34px; }
.day-btn.active, .tone-card.selected .tone-icon, .tone-option.selected .tone-icon {
  background-color: var(--gl-fill);
  color: #fff;
}
.tone-card, .tone-option { background-color: var(--gl-row); border-color: var(--color-border-strong); border-radius: var(--radius-md); }
.tone-card.selected, .tone-option.selected { background-color: var(--gl-row-active); border-color: var(--gl-row-active-border); }
.plan-bar-track { background-color: var(--gl-track); box-shadow: inset 0 1px 2px rgba(2, 5, 16, 0.35); }
.plan-bar-label, .plan-bar-hint, .plan-reset-label { color: var(--color-text-secondary); }

/* 16.5 Login: aurora visible, tarjeta glass, sin cambiar controles */
.brand-tagline { color: var(--color-text-secondary); font-weight: var(--font-weight-regular, 400); }
.login-card .input, .login-card input { background-color: var(--gl-input-bg); }

/* 16.6 Avatares de lista (superadmin): mismo sombreado AA que el resto */
.cliente-avatar {
  background-image: var(--gl-avatar-shade);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10), 0 4px 10px rgba(2, 5, 16, 0.30);
}
:root[data-theme="light"] .cliente-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 3px 8px rgba(20, 35, 90, 0.22); }

/* 16.7 Toasts / banners flotantes (inbox usa estilo inline) */
div[role="button"][style*="position:fixed"] {
  background-color: var(--glass-panel-strong) !important;
  color: var(--color-text) !important;
  border-color: var(--gl-row-active-border) !important;
  border-radius: var(--radius-md) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--shadow-lg) !important;
}

/* 16.8 Pipeline: tablero con scroll horizontal INTERNO (body nunca desborda) */
.pipeline-shell { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.pipeline-col-name:hover { background-color: rgba(130, 160, 255, 0.14); }
.btn-add-col { background-color: var(--gl-row); border-color: var(--color-border-strong); color: var(--color-text-secondary); border-radius: var(--radius-md); }
.btn-add-col:hover { border-color: var(--color-primary); color: var(--color-text); }

/* 16.9 Movil: desbordes (superadmin, analytics, config, productos, pipeline) */
@media (max-width: 768px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stats-row .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-card { padding: var(--space-3) var(--space-4); min-width: 0; }
  .stat-value { font-size: 1.5rem; }
  .page-header { flex-wrap: wrap; gap: var(--space-3); }
  .page-header .btn { min-height: 44px; }
  .table-section, .top-card, .prod-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-toolbar { flex-wrap: wrap; gap: var(--space-2); position: sticky; left: 0; }
  .table-toolbar-left { flex-wrap: wrap; width: 100%; }
  .table-search-wrapper { flex: 1 1 160px; min-width: 0; }
  .data-table { min-width: 760px; }
  .top-table { min-width: 500px; }
  .prod-table { min-width: 760px; }
  .analytics-grid { grid-template-columns: 1fr 1fr; }
  .analytics-grid-3, .analytics-grid-2 { grid-template-columns: 1fr; }
  .kpi-card, .dist-card, .ratio-card { padding: var(--space-4); min-width: 0; }
  .kpi-value { font-size: 26px; }
  .prod-toolbar, .prod-toolbar-left, .prod-actions { flex-wrap: wrap; gap: var(--space-2); }
  .prod-toolbar-left .prod-input { max-width: 100% !important; flex: 1 1 100%; }
  .prod-actions .btn { min-height: 40px; }
  .config-card, .config-save-card { min-width: 0; padding: var(--space-4); }
  .plan-top, .config-save-card { flex-wrap: wrap; gap: var(--space-2); }
  .plan-top-right { text-align: left; }
  .plantilla-grid { grid-template-columns: repeat(3, 1fr); }
  .tone-grid, .tone-options { grid-template-columns: 1fr; }
  .config-card .input[style*="max-width"], .config-card input[style*="max-width"] { max-width: 100% !important; }
  .config-card [style*="display:flex"], .config-card .form-row { flex-wrap: wrap; }
  .modal-overlay { padding: var(--space-3); align-items: flex-end; }
  .modal, .modal-box { max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) var(--radius-lg) var(--radius-lg); }
  .modal-header, .modal-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .modal-body { padding: var(--space-4); }
  .modal-footer .btn, .modal-box .btn { min-height: 44px; }
  .prod-picker-overlay { padding: var(--space-3); }
  .login-card { padding: var(--space-6); }
  .brand-logo { max-width: 100%; }
  /* Pipeline: columnas con snap dentro del tablero */
  .pipeline-shell { scroll-snap-type: x proximity; padding: var(--space-3); gap: var(--space-3); scroll-padding-left: var(--space-3); }
  .pipeline-col { scroll-snap-align: start; width: min(280px, 82vw); min-width: min(264px, 82vw); }
  .view-toggle button { min-height: 36px; }
  .btn-icon { width: 40px; height: 40px; }
  .cita-row { flex-wrap: wrap; }
  .config-save-card { flex-direction: column; align-items: stretch; }
  .config-save-actions { flex-shrink: 1; flex-wrap: wrap; width: 100%; justify-content: space-between; }
  .config-save-actions .btn { min-height: 44px; flex: 1 1 160px; }
}

/* 16.10 Colores inline de selects/estados (superadmin) y controles sueltos: AA en ambos modos */
select[style*="color:#22C55E"], [style*="color:#22C55E;"] { color: var(--color-success) !important; }
select[style*="color:#F59E0B"], [style*="color:#F59E0B;"] { color: var(--color-warning) !important; }
select[style*="color:#EF4444"], [style*="color:#EF4444;"] { color: var(--color-danger) !important; }
select[style*="color:#1171FF"], [style*="color:#1171FF;"] { color: var(--gl-blue-text) !important; }
select.estado-select, select.wa-select { font-weight: var(--font-weight-semibold); }
.col-move-left:not(:disabled), .col-move-right:not(:disabled), .col-del { color: var(--color-text-secondary) !important; min-width: 24px; min-height: 24px; }
.col-move-left:not(:disabled):hover, .col-move-right:not(:disabled):hover { color: var(--color-text) !important; }
.col-del:hover { color: var(--color-danger) !important; }
:root[data-theme="light"] .rank-badge.gold { color: #8A4B08; background: rgba(217, 119, 6, 0.16); }
:root[data-theme="light"] .rank-badge.silver { color: #475569; background: rgba(71, 85, 105, 0.14); }
:root[data-theme="light"] .rank-badge.bronze { color: #7C4A1D; background: rgba(124, 74, 29, 0.14); }
:root[data-theme="light"] .kpi-trend.up { color: #14532D; }
:root[data-theme="light"] .kpi-trend.down { color: #8F1111; }
:root[data-theme="light"] #prodMsg { color: var(--color-text) !important; border: 1px solid var(--color-border-strong); }
[style*="background:var(--color-primary)"] { background-color: var(--gl-fill) !important; }
:root[data-theme="light"] select[style*="color:#22C55E"] { color: #14632F !important; }

/* -------------------------------------------------------------------------
   17. AJUSTES POST-REVISIÓN INDEPENDIENTE (sin cambio de diseño)
   ------------------------------------------------------------------------- */

/* (a) Rendimiento. backdrop-filter solo donde pasa contenido por detrás (topbar sticky, overlays de
   modales, botón hamburguesa, dropdown de citas, toasts). En las superficies ESTÁTICAS (cards,
   paneles, tablas) solo cubría el degradado suave del fondo, donde desenfocar no cambia nada visible
   (diferencia media < 1,5/255 por canal medida contra el glass completo) pero costaba 9-12 capas de
   blur a la vez: en equipos sin GPU el scroll bajaba a ~15 fps (config 56 ms/frame → 17 ms). */
.card, .stat-card, .table-section, .config-card, .config-save-card,
.an-filter, .an-kpi, .an-chart-card, .add-lead-form,
.kpi-card, .dist-card, .ratio-card, .top-card, .prod-table-wrap, .media-locked-card,
.cita-row, .month-grid, .week-grid,
.conv-panel, .leads-list-panel, .chat-header, .chat-input-area, .ia-banner, .lead-detail-header,
.lead-detail-body > .lead-section, .lead-detail-body > .lead-info-grid,
.modal, .modal-box, .prod-picker-box {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* (b) Topbar móvil: el botón de tema no se aplasta y el título no salta a dos líneas */
@media (max-width: 768px) {
  .theme-toggle { flex-shrink: 0; }
  .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* (c) Analytics superadmin, "Top clientes": la tabla desliza en vez de recortarse en cualquier ancho */
.top-card { overflow-x: auto; }

/* (d) Pipeline en escritorio: tablero con alto acotado al viewport, así la barra horizontal siempre
   queda visible (con columnas largas, antes había que bajar hasta el final para alcanzarla). */
@media (min-width: 769px) {
  .pipeline-shell {
    max-height: calc(100vh - var(--topbar-height));
    max-height: calc(100dvh - var(--topbar-height));
  }
}