/* ============================================================================
   INEQ Design System — capa institucional "de-AI" (2026-06-20)
   ----------------------------------------------------------------------------
   Objetivo: que INEQ OP se vea institucional, médico, limpio y sobrio — menos
   "template IA" (glow/neón/glassmorphism/degradados artificiales). Cargada
   DESPUÉS de styles.css → recalibra tokens (cascada global) sin reescribir reglas.
   Fuente: Manual de Marca INEQ Médica + demo ineq_op_visual_institucional_demo.html.
   100% frontend visual. No toca lógica, datos, rules, Functions ni firebaseConfig.
   Reversible: quitar el <link> de este archivo restaura el look anterior.
   Paleta oficial: #12A9E3 #51C4F0 #054B86 #0787F0 #262FE0 #00AF50 #92D14F.
   ============================================================================ */

/* ---------- 1. Recalibración de tokens (afecta todo lo que usa var()) -------- */
:root {
  /* Sombras NEUTRAS y suaves (no tintadas de cyan/azul = menos "neón").
     Base navy translúcido como el demo (rgba(5,75,134,.x)). */
  --ineq-shadow-card: 0 6px 18px rgba(5, 75, 134, 0.10);
  --ineq-shadow-soft: 0 3px 10px rgba(5, 75, 134, 0.07);
  /* Glow → eliminado / convertido en sombra sobria. */
  --ineq-glow-cyan: 0 0 0 rgba(0, 0, 0, 0);
  --ineq-glow-blue: 0 6px 16px rgba(5, 75, 134, 0.10);

  /* Gradientes institucionales y planos. El primario conserva un degradé
     sutil de 2 paradas (on-brand, como el demo); el resto casi-sólidos. */
  --ineq-gradient-primary: linear-gradient(135deg, #12A9E3 0%, #0787F0 100%);
  --ineq-gradient-primary-hover: linear-gradient(135deg, #0F9BD1 0%, #0A78D6 100%);
  --ineq-gradient-card: linear-gradient(180deg, rgba(18, 169, 227, 0.03), rgba(18, 169, 227, 0.012));
  --ineq-gradient-sidebar: linear-gradient(180deg, #082033 0%, #06335a 100%);

  /* Glass: blur muy reducido → superficie casi opaca, no "vidrio futurista". */
  --glass-blur: blur(6px) saturate(105%);
  --glass-blur-strong: blur(8px) saturate(110%);

  /* Bordes un punto más sólidos para jerarquía médica clara. */
  --ineq-border-soft: rgba(18, 169, 227, 0.16);
  --ineq-border-medium: rgba(18, 169, 227, 0.26);
}

/* ---------- 2. Tema CLARO institucional (target = demo de Sergio) ------------ */
[data-theme="light"] {
  --c-bg: #F6FBFE;
  --c-surface: #FFFFFF;
  --c-surface-2: #F1F7FC;
  --c-border: #D8EAF4;
  --c-text: #102A43;
  --c-text-soft: #3B5168;
  --c-text-muted: #66788A;

  /* Encabezados/acentos: azul institucional + celeste médico del manual. */
  --c-accent: #0787F0;
  --c-link: #0787F0;

  --t-app-bg: #F6FBFE;
  --t-border: #D8EAF4;
  --t-border-medium: #C3DEED;
  --t-table-row-hover: rgba(18, 169, 227, 0.05);

  /* Sombras claras suaves (navy translúcido, sin tinte neón). */
  --shadow-1: 0 1px 2px rgba(5, 75, 134, 0.06), 0 1px 3px rgba(5, 75, 134, 0.04);
  --shadow-2: 0 8px 22px rgba(5, 75, 134, 0.08);
  --ineq-shadow-card: 0 6px 18px rgba(5, 75, 134, 0.08);
  --ineq-shadow-soft: 0 3px 10px rgba(5, 75, 134, 0.06);
  --ineq-glow-blue: 0 6px 16px rgba(5, 75, 134, 0.08);
}

/* ---------- 2.b Tokens de contraste módulo Tickets (cierre modular 2026-06-20) ---
   Reemplazan colores hardcodeados de ticketDetail.js que rompían en modo claro:
   fondos `rgba(255,255,255,.0x)` (invisibles sobre panel blanco) y textos pastel
   (#fca5a5/#fcd34d/#7dd3fc, bajo contraste sobre blanco). El default (:root) IGUALA
   los valores oscuros previos → el modo OSCURO queda pixel-idéntico; solo cambia claro. */
:root {
  --tk-surf-faint: rgba(255, 255, 255, .02);
  --tk-surf-faint-2: rgba(255, 255, 255, .04);
  --tk-surf-faint-strong: rgba(255, 255, 255, .18);
  --tk-danger-text: #fca5a5;
  --tk-warning-text: #fcd34d;
  --tk-info-text: #7dd3fc;
}
[data-theme="light"] {
  --tk-surf-faint: rgba(5, 75, 134, .04);
  --tk-surf-faint-2: rgba(5, 75, 134, .07);
  --tk-surf-faint-strong: rgba(5, 75, 134, .16);
  --tk-danger-text: #b91c1c;   /* rojo accesible sobre blanco */
  --tk-warning-text: #b45309;  /* ámbar/marrón accesible sobre blanco */
  --tk-info-text: #0369a1;     /* azul accesible sobre blanco */
}

/* ---------- 3. Componentes: sobriedad (quitar glow/neón puntual) ------------- */

/* Botón primario: degradé sutil, sombra navy sobria (no neón azul fuerte). */
.btn--primary {
  box-shadow: var(--ineq-shadow-soft);
}
.btn--primary:hover {
  box-shadow: 0 8px 18px rgba(5, 75, 134, 0.16);
  filter: brightness(1.02);
}

/* Sidebar: degradé navy plano + borde sutil; sin glow en el borde. */
.sidebar {
  box-shadow: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Botón circular de colapso: institucional, sin halo brillante. */
.app .sidebar__collapse,
.sidebar__collapse,
[class*="collapse"][class*="btn"],
.sidebar-toggle {
  box-shadow: var(--ineq-shadow-soft) !important;
}

/* FAB / botones flotantes: sombra sobria en vez de glow de color. */
.fab, .qa-fab, [class*="fab"], .floating-action, .float-btn {
  box-shadow: 0 6px 16px rgba(5, 75, 134, 0.18) !important;
}

/* Cards / paneles: fondo limpio, borde suave, sombra neutra (no glass intenso). */
.card, .panel {
  box-shadow: var(--ineq-shadow-card);
}
.card:hover {
  box-shadow: var(--ineq-shadow-card);
}

/* Modal backdrop: oscurecer sin blur fuerte (menos "glass"). */
.modal::backdrop {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Hero/KPI de inventario: degradé muy plano (evita el look SaaS multicolor). */
.inv-hero {
  background:
    linear-gradient(135deg, rgba(18, 169, 227, 0.06), rgba(7, 135, 240, 0.025) 60%, transparent);
  box-shadow: var(--ineq-shadow-soft);
}

/* Chips/badges: mantener semántica de color, bajar saturación de fondo. */
.pill, .chip { letter-spacing: 0.01em; }

/* Tablas: encabezado con celeste institucional suave (legible, no neón). */
[data-theme="light"] .dt thead th,
[data-theme="light"] table thead th {
  background: #EAF6FD;
  color: #054B86;
}

/* ---------- 4. Tipografía: jerarquía sobria, Metrisch institucional --------- */
/* Metrisch (oficial INEQ) sigue siendo primaria; Montserrat/Raleway como
   nombres de fallback (si el SO los tiene) — sin @import remoto para NO afectar
   rendimiento. Títulos un poco más firmes para sensación corporativa. */
:root {
  --font-sans: "Metrisch", "Montserrat", "Raleway", Inter, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, .inv-hero__title, .page-header h1 { letter-spacing: -0.01em; }

/* ---------- 5. Accesibilidad: respeta reduce-motion (heredado) -------------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}