/* ============================================================
   Aimotive Console — Capa de mejoras
   Tema oscuro + responsive total + pulido de UI.
   Se carga DESPUÉS de styles.css para poder sobreescribir.
   Todo usa variables, así que sirve igual en claro y oscuro.
   ============================================================ */

/* ===================== MOTION & POLISH ===================== */

/* Transición suave al cambiar de tema */
body, .sidebar, .topbar, .card, .stat, .input, .input-search, .tag, .btn, .nav-item {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Ambiente sutil en el fondo (da profundidad sin ruido) */
body {
  background:
    radial-gradient(900px 480px at 108% -6%, rgba(27, 43, 184, .06), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(900px 480px at 108% -6%, rgba(85, 102, 214, .10), transparent 70%),
    var(--bg);
}

/* Entrada de página un poco más viva (sustituye el fade plano) */
.fade-in { animation: aimPageIn .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes aimPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Tarjetas: profundidad y respuesta al hover */
.card { transition: box-shadow .22s ease, border-color .22s ease; }
.card:hover { box-shadow: var(--shadow-md); }

/* Stats: micro-lift */
.stat { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-ico { box-shadow: inset 0 0 0 1px var(--purple-100); }

/* Navegación: barra de acento en el activo + hover más limpio */
.nav-item { position: relative; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--purple-500); }

/* Botones: elevación del primario y foco accesible */
.btn { transition: transform .1s ease, box-shadow .16s ease, background .14s ease, border-color .14s ease, filter .14s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(27, 43, 184, .30); }
.btn-primary:active { transform: translateY(0); }
.btn:focus-visible,
.input:focus-visible,
.nav-item:focus-visible,
.user-chip:focus-visible { outline: 2px solid var(--purple-400); outline-offset: 2px; }

/* Tabla: transición de hover */
.tbl tbody tr { transition: background .14s ease; }

/* Topbar: un punto más de presencia */
.topbar { box-shadow: 0 1px 0 var(--line); }

/* ===================== TEMA OSCURO ===================== */
:root[data-theme="dark"] {
  --ink:       #e8eaf4;
  --ink-2:     #c4c8dc;
  --muted:     #9196ad;
  --muted-2:   #71768d;
  --line:      #272c41;
  --line-2:    #333954;
  --surface:   #161a2b;
  --bg:        #0e1120;
  --bg-2:      #1e2335;

  --purple-50:  #1b2140;
  --purple-100: #242c54;
  --purple-200: #2e3868;

  --green-bg: #0f2619;
  --amber-bg: #2a1f0b;
  --red-bg:   #2a1414;
  --blue-bg:  #15223f;
}

/* Parches puntuales en oscuro (color fijo o contraste bajo) */
:root[data-theme="dark"] .topbar { background: rgba(22, 26, 43, .85); }
:root[data-theme="dark"] .toast { background: #05070f; }
:root[data-theme="dark"] .nav-item.active,
:root[data-theme="dark"] .nav-item.active svg { color: var(--purple-300); }
:root[data-theme="dark"] .b-purple,
:root[data-theme="dark"] .brand-console,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .link,
:root[data-theme="dark"] .stat-ico,
:root[data-theme="dark"] .consultas-cell .count,
:root[data-theme="dark"] .consultas-cell .see { color: var(--purple-300); }
:root[data-theme="dark"] .stat-ico { box-shadow: inset 0 0 0 1px var(--purple-200); }
/* Burbujas de WhatsApp: se quedan claras a propósito (emulan la app real) */

/* ===================== MENÚ MÓVIL (drawer) ===================== */
.aim-hamb { display: none; }
.aim-overlay { display: none; }

@media (max-width: 920px) {
  .aim-hamb { display: inline-flex; }
  .aim-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45); z-index: 55;
    animation: aimFade .2s ease both;
  }
  @keyframes aimFade { from { opacity: 0; } to { opacity: 1; } }

  .sidebar {
    position: fixed; z-index: 60; top: 0; left: 0; height: 100%;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.aim-open { transform: none; }

  /* Las rejillas de dos columnas (inline) pasan a una sola */
  .page .grid { grid-template-columns: 1fr !important; }
  .page .g-2, .page .g-3, .page .g-4 { grid-template-columns: repeat(2, 1fr) !important; }

  .page { padding: 20px 16px 56px; }
  .topbar { padding: 0 16px; gap: 10px; }

  /* Toques más cómodos en el menú */
  .nav-item { padding: 11px 12px; }
}

@media (max-width: 560px) {
  .page .g-2, .page .g-3, .page .g-4 { grid-template-columns: 1fr !important; }
  .topbar .input-search { display: none; }   /* buscador del topbar oculto en móvil */
  .topbar .cell-mut { display: none; }        /* título textual del topbar oculto */
  .page-title { font-size: 21px; }
  .page-head { margin-bottom: 18px; }
  .stat-value { font-size: 26px; }
  .card-pad { padding: 16px 16px; }
  .toast-host { left: 16px; right: 16px; bottom: 16px; }
  .toast { max-width: none; }
}

/* ===================== TABLAS RESPONSIVE ===================== */
/* Una tabla ancha se desplaza dentro de su tarjeta en vez de desbordar. */
@media (max-width: 760px) {
  .card:has(> table.tbl) { overflow-x: auto; }
  table.tbl { min-width: 560px; }
}

/* ===================== LOGIN RESPONSIVE ===================== */
@media (max-width: 860px) {
  .aim-login-brand { display: none !important; }
  .aim-login-form {
    flex: 1 1 auto !important;
    padding: 40px 24px !important;
    max-width: none !important;
  }
}
@media (max-width: 560px) {
  .aim-login-form { padding: 28px 20px !important; }
}

/* ===================== LOGO SEGÚN TEMA ===================== */
/* En claro se ve el logo normal; en oscuro, la versión blanca. */
.brand-wordmark.logo-light,
.brand-wordmark.logo-dark { display: block; }
.brand-wordmark.logo-dark { display: none; }
:root[data-theme="dark"] .brand-wordmark.logo-light { display: none; }
:root[data-theme="dark"] .brand-wordmark.logo-dark { display: block; }