/* ==========================================================================
   Oráculo — theme.css
   Variables de diseño, reset y utilidades base.
   ========================================================================== */

:root {
  /* --- Superficies --- */
  --bg:            #0B0E14;
  --bg-deep:       #070910;
  --surface:       #141A24;
  --surface-2:     #1B2331;
  --surface-3:     #232D3E;
  --surface-glass: rgba(20, 26, 36, 0.72);

  /* --- Bordes --- */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* --- Texto --- */
  --text:          #E6EDF3;
  --text-2:        #9BA9BC;
  --text-3:        #63718A;

  /* --- Acentos --- */
  --gold:          #F5C451;
  --gold-soft:     rgba(245, 196, 81, 0.14);
  --cyan:          #38D6C4;
  --cyan-soft:     rgba(56, 214, 196, 0.14);
  --violet:        #A78BFA;
  --violet-soft:   rgba(167, 139, 250, 0.14);

  /* --- Semánticos --- */
  --ok:            #3DDC97;
  --ok-soft:       rgba(61, 220, 151, 0.14);
  --warn:          #FFB454;
  --warn-soft:     rgba(255, 180, 84, 0.14);
  --danger:        #FF6B6B;
  --danger-soft:   rgba(255, 107, 107, 0.14);
  --info:          #5AA9FF;
  --info-soft:     rgba(90, 169, 255, 0.14);

  /* --- Paleta de seriales (10 tonos distinguibles) --- */
  --s0: #F5C451;
  --s1: #38D6C4;
  --s2: #A78BFA;
  --s3: #FF8FA3;
  --s4: #5AA9FF;
  --s5: #3DDC97;
  --s6: #FFB454;
  --s7: #E879F9;
  --s8: #7DD3FC;
  --s9: #FB923C;

  /* --- Escala de accesibilidad ---
     Multiplica el tamaño del texto, las gráficas y el ancho del menú. El
     atributo lo pone el botón de accesibilidad del topbar (a11y.js) y se
     restaura antes del primer pintado desde el layout, para que no haya
     salto al cargar. Casi todo el CSS está en rem, así que basta con mover
     la raíz para que la interfaz entera acompañe. */
  --escala: 1;

  /* --- Métrica --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --gap:       18px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow:    0 12px 32px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.52);

  --sidebar-w:  calc(248px * var(--escala));
  --sidebar-mini: 76px;
  --topbar-h:   calc(68px * var(--escala));

  --fast:   140ms cubic-bezier(0.4, 0, 0.2, 1);
  --normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --font: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", monospace;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

/* La raíz es lo que da valor al rem, así que aquí es donde se aplica la
   escala de accesibilidad y desde donde se propaga a toda la interfaz. */
html { font-size: calc(16px * var(--escala)); }

:root[data-escala="grande"] { --escala: 1.15; }
:root[data-escala="enorme"] { --escala: 1.32; }

/* --- Contraste alto ---
   Se reescriben las variables de texto y borde en lugar de repintar cada
   componente: toda la interfaz bebe de ellas, así que basta con esto. */
:root[data-contraste="alto"] {
  --bg:            #05070C;
  --surface:       #101722;
  --surface-glass: rgba(16, 23, 34, 0.94);
  --surface-2:     #18212F;
  --surface-3:     #263449;

  --border:        rgba(255, 255, 255, 0.22);
  --border-strong: rgba(255, 255, 255, 0.42);

  --text:          #FFFFFF;
  --text-2:        #D6E0EC;
  --text-3:        #A9B7C9;
}
:root[data-contraste="alto"] .card { backdrop-filter: none; }

/* --- Movimiento reducido ---
   Vale tanto para lo que llega por CSS como para las animaciones de entrada
   de las tarjetas; las de Chart.js se apagan desde charts.js. */
:root[data-movimiento="reducido"] *,
:root[data-movimiento="reducido"] *::before,
:root[data-movimiento="reducido"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* --- Texto más espaciado --- */
:root[data-espaciado="amplio"] body {
  line-height: 1.85;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
}
:root[data-espaciado="amplio"] td,
:root[data-espaciado="amplio"] th { padding-block: 0.9em; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.875rem;   /* 14px a escala normal */
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(1200px 620px at 78% -12%, rgba(245, 196, 81, 0.09), transparent 60%),
    radial-gradient(900px 520px at 6% 4%, rgba(56, 214, 196, 0.07), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 0.95rem; }
p  { margin: 0 0 0.75em; }
a  { color: var(--cyan); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--gold); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--gold-soft); color: var(--text); }

/* Cifras siempre tabulares — el dashboard vive de comparar números en columna */
.num, table td, table th, .kpi__value, .metric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Scrollbar --- */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #33415A; background-clip: content-box; }

/* --- Foco accesible --- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.row      { display: flex; align-items: center; gap: 10px; }
.row--between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row--wrap    { flex-wrap: wrap; }
.col      { display: flex; flex-direction: column; gap: 8px; }
.grow     { flex: 1 1 auto; min-width: 0; }
.center   { display: flex; align-items: center; justify-content: center; }

.muted    { color: var(--text-2); }
.dim      { color: var(--text-3); }
.tiny     { font-size: 0.72rem; }
.small    { font-size: 0.8rem; }
.bold     { font-weight: 650; }
.upper    { text-transform: uppercase; letter-spacing: 0.09em; }
.mono     { font-family: var(--mono); }
.nowrap   { white-space: nowrap; }
.right    { text-align: right; }
.center-t { text-align: center; }

.text-gold   { color: var(--gold); }
.text-cyan   { color: var(--cyan); }
.text-ok     { color: var(--ok); }
.text-warn   { color: var(--warn); }
.text-danger { color: var(--danger); }

.mt-0 { margin-top: 0; }  .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 8px; } .mb-1 { margin-bottom: 8px; }
.mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; }
.mt-3 { margin-top: 24px; } .mb-3 { margin-bottom: 24px; }

.hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.divider { height: 1px; background: var(--border); border: 0; margin: 16px 0; }

/* Etiqueta de sección */
.eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  font-weight: 600;
}

/* ==========================================================================
   Animaciones
   ========================================================================== */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  0%   { opacity: 0; transform: scale(0.96) translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0.42); }
  70%  { box-shadow: 0 0 0 14px rgba(245, 196, 81, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0); }
}
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

.anim-in { animation: fade-up 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }

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