/* Paleta CRM WhatsApp — Grupo Integra ERP.
   DOMINANTES (medidos en el sitio de referencia): violeta #3D22CF, degradado #653CF8 → #3D22CF, índigo profundo #180A65 y fondos pastel (menta #EDFBF9, crema #FAF8DF, rosa #FFF2F2).
   CORPORATIVOS (logo): azul #0450FA, azul marino #041C4C y turquesa #04ACAC como acentos (gráficos, estados, indicadores). */

:root, [data-theme="light"] {
  --font: Poppins, "Segoe UI", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --bg: #F6F5FC; --surface: #FFFFFF; --surface-2: #FAF9FE; --surface-3: #F0EEFB;
  --border: #E5E2F3; --border-strong: #D0CBE8;
  --text: #1A1733; --text-2: #3E3A66; --text-3: #5E5A7E; --link: #3D22CF;

  --brand: #3D22CF; --brand-600: #3D22CF; --brand-700: #2F18A8; --on-brand: #FFFFFF; --brand-soft: #EEEBFC;
  --teal: #04ACAC;

  --side-bg: #180A65; --side-bg-2: #2A1796; --side-text: #D9D3F7; --side-text-2: #A094DA; --side-active: rgba(101,60,248,.42);

  --blue-fg: #0340C8; --blue-bg: #E8EFFF;
  --violet-fg: #3D22CF; --violet-bg: #EEEBFC;
  --green-fg: #057A7A; --green-bg: #EDFBF9;
  --amber-fg: #8A5A00; --amber-bg: #FAF8DF;
  --red-fg: #C22530; --red-bg: #FFF2F2;

  --chat-bg: #E9EEF7; --bub-in: #FFFFFF; --bub-agent: #D5F3F1; --bub-ai: #E4E0FB; --bub-ai-edge: #C2B9F2;
  --tick-read: #04ACAC; --focus: #653CF8;
}
@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: #A892FF;
    --brand: #7A5CFF; --brand-600: #7A5CFF; --brand-700: #A892FF; --on-brand: #FFFFFF; --brand-soft: #261D5C;
    --side-bg: #0E0733; --side-bg-2: #1B1260; --side-text: #D9D3F7; --side-text-2: #9A8FD0; --side-active: rgba(122,92,255,.34);
    --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: #A892FF;
  }
}
[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: #A892FF;
  --brand: #7A5CFF; --brand-600: #7A5CFF; --brand-700: #A892FF; --on-brand: #FFFFFF; --brand-soft: #261D5C;
  --side-bg: #0E0733; --side-bg-2: #1B1260; --side-text: #D9D3F7; --side-text-2: #9A8FD0; --side-active: rgba(122,92,255,.34);
  --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: #A892FF;
}

.btn-primary:hover { background: var(--brand-700); }
[data-theme="dark"] .btn-primary:hover { background: #9078FF; }
.avatar-c1 { --_c: #3D22CF; } .avatar-c2 { --_c: #0450FA; } .avatar-c6 { --_c: #04ACAC; } .avatar-ai { --_c: #653CF8; }
.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: colores personalizables desde Configuración → Marca (--login-from, --login-to, --login-glow-a y el acento --teal) */
.login { background: radial-gradient(700px 400px at 100% 0%, color-mix(in srgb, var(--login-glow-a, #653CF8) 55%, transparent), transparent 60%), radial-gradient(600px 360px at 0% 110%, color-mix(in srgb, var(--teal) 35%, transparent), transparent 60%), linear-gradient(135deg, var(--login-from, #180A65) 0%, var(--login-to, #3D22CF) 100%); }
.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: #180A65; }
[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; } }

.brand-plate { display: inline-flex; align-items: center; background: #fff; border-radius: 9px; padding: 5px 9px; max-width: 100%; }
.brand-plate img { display: block; max-height: 32px; max-width: 160px; object-fit: contain; }
.login-brand .login-logo-img { max-height: 72px; max-width: 260px; width: auto; height: auto !important; object-fit: contain; }
.logo-preview { display: grid; place-items: center; min-height: 96px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--r); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; }
.logo-preview img { max-width: 260px; max-height: 80px; object-fit: contain; }

.table td .num, .table th { white-space: nowrap; }
.table td.ta-r { white-space: nowrap; }

/* Kits de cámaras */
.kit-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.kit-card.is-off { opacity: .55; }
.kit-img { background: #f4f6fa; height: 170px; display: flex; align-items: center; justify-content: center; }
.kit-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kit-body { padding: var(--s-3); display: flex; flex-direction: column; gap: 4px; }
.kit-name { margin: 6px 0 0; font-size: 14px; line-height: 1.3; }

/* Ventanas altas: el cuerpo se desplaza y los botones quedan siempre visibles */
.modal-backdrop { overflow: hidden; }
.modal { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); min-height: 0; }
.modal-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.modal-head, .modal-foot { flex: 0 0 auto; }
@media (max-width: 720px) { .modal { max-height: 92vh; max-height: 92dvh; } }

/* Quien atiende: nombre en negrita, bien visible sobre cada mensaje */
.msg-sender { font-size: var(--fs-sm); font-weight: 800; }

/* Móvil: la regla del contenedor `.app` dentro de @container app no puede aplicarse al propio contenedor; sin esto el menú
   horizontal quedaba en una columna de 232 px y el contenido casi sin ancho. */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
}
.avatar-btn { border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; display: inline-flex; }
.avatar-btn:hover .avatar, .avatar-btn:focus-visible .avatar { box-shadow: 0 0 0 2px var(--teal); }