/* Paleta Grupo Integra ERP sobre el sistema de diseño (styles.css).
   blue #2563EB · blue-d #1F5FE0 · navy #152238 · navy2 #3D5075 · teal #17B6B0 · gray #f4f6fa · band #eaf0fe · line #e2e7f0 · txt #2b3550 · sub #5a6785 */

:root, [data-theme="light"] {
  --font: Poppins, "Segoe UI", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --bg: #F4F6FA; --surface: #FFFFFF; --surface-2: #F8FAFD; --surface-3: #EAF0FE;
  --border: #E2E7F0; --border-strong: #CBD4E3;
  --text: #2B3550; --text-2: #3D5075; --text-3: #5A6785; --link: #1F5FE0;

  --brand: #2563EB; --brand-600: #2563EB; --brand-700: #1F5FE0; --on-brand: #FFFFFF; --brand-soft: #EAF0FE;
  --teal: #17B6B0;

  --side-bg: #152238; --side-bg-2: #1D2F4E; --side-text: #C5D0E4; --side-text-2: #8A9BB8; --side-active: rgba(23,182,176,.20);

  --blue-fg: #1F5FE0; --blue-bg: #EAF0FE;
  --violet-fg: #5B3FC4; --violet-bg: #EEE9FC;
  --green-fg: #0B7F7A; --green-bg: #DDF5F3;

  --chat-bg: #E9EEF7; --bub-in: #FFFFFF; --bub-agent: #D5F3F1; --bub-ai: #DFE9FD; --bub-ai-edge: #B7CBF6;
  --tick-read: #17B6B0; --focus: #2563EB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), [data-theme="auto"] {
    --bg: #0C1424; --surface: #131E33; --surface-2: #172540; --surface-3: #1D2E4E;
    --border: #243350; --border-strong: #33456B;
    --text: #E8EEF9; --text-2: #B3C0D9; --text-3: #8797B5; --link: #7FA8FF;
    --brand: #3B7BFF; --brand-600: #3B7BFF; --brand-700: #7FA8FF; --on-brand: #FFFFFF; --brand-soft: #172B55;
    --side-bg: #0A101D; --side-bg-2: #131E33; --side-text: #C5D0E4; --side-text-2: #8A9BB8;
    --blue-fg: #8DB4FF; --blue-bg: #172B55; --green-fg: #5EE0DA; --green-bg: #0F3A3A;
    --chat-bg: #0A121F; --bub-in: #1B2A44; --bub-agent: #0F4A4A; --bub-ai: #1B3160; --bub-ai-edge: #2E4C8C;
    --bub-sys: #16233B; --tick-read: #4FE0DA; --focus: #7FA8FF;
  }
}
[data-theme="dark"] {
  --bg: #0C1424; --surface: #131E33; --surface-2: #172540; --surface-3: #1D2E4E;
  --border: #243350; --border-strong: #33456B;
  --text: #E8EEF9; --text-2: #B3C0D9; --text-3: #8797B5; --link: #7FA8FF;
  --brand: #3B7BFF; --brand-600: #3B7BFF; --brand-700: #7FA8FF; --on-brand: #FFFFFF; --brand-soft: #172B55;
  --side-bg: #0A101D; --side-bg-2: #131E33; --side-text: #C5D0E4; --side-text-2: #8A9BB8;
  --blue-fg: #8DB4FF; --blue-bg: #172B55; --green-fg: #5EE0DA; --green-bg: #0F3A3A;
  --chat-bg: #0A121F; --bub-in: #1B2A44; --bub-agent: #0F4A4A; --bub-ai: #1B3160; --bub-ai-edge: #2E4C8C;
  --bub-sys: #16233B; --tick-read: #4FE0DA; --focus: #7FA8FF;
}

.btn-primary:hover { background: #1F5FE0; }
[data-theme="dark"] .btn-primary:hover { background: #5A92FF; }
.avatar-c1 { --_c: #2563EB; } .avatar-c6 { --_c: #17B6B0; } .avatar-ai { --_c: #2563EB; }
.status-dot.on { background: var(--teal); }
.side-item[aria-current="page"]::before { background: var(--teal); }
.side-logo-mark { background: transparent; width: 34px; height: 34px; }
.side-logo-mark img { width: 34px; height: 34px; display: block; }
.bar-out { background: var(--teal); }
.login { background: linear-gradient(135deg, #152238 0%, #1F3A6E 55%, #17B6B0 140%); }
.login-card { box-shadow: var(--shadow-3); }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand img { width: 52px; height: 52px; }
.login-brand b { display: block; font-size: 18px; letter-spacing: .01em; }
.login-brand small { color: var(--text-3); letter-spacing: .28em; font-size: 10px; font-weight: 600; }
.brand-erp { color: var(--teal); }

/* La app se monta directamente en #app: modales y toasts sobre toda la ventana */
#app { height: 100%; }
.modal-backdrop { position: fixed; }
.toasts { position: fixed; }
.app { height: 100vh; }
.pill-wa { --_fg: var(--text-2); --_bg: var(--surface-3); }

.hidden { display: none !important; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-3); }

h1, h2, h3, .page-title, .modal-title, .card-title, .chat-name { color: var(--navy, #152238); }
:root { --navy: #152238; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #E8EEF9; } }