/* Sistema visual de la intranet Radio Beethoven: fuente única de verdad.
   Valores del boceto aprobado (docs/bocetos/tipos-interfaz.html). Ningún otro
   archivo del shell declara colores en hex: los consume desde aquí.
   Ratios de contraste: WCAG 2.1, alfa compuesto sobre el fondo indicado. */

@font-face{font-family:"Inter";src:url("fonts/Inter-variable.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}

/* Base del sistema: los componentes se miden igual en el shell y en cualquier
   página que los use (la guía viva incluida). Sin esto, un campo con width:100%
   y padding desborda su columna. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}

:root{
  color-scheme:dark;

  /* Marca. El naranja es solo para acción primaria y selección; nunca decoración. */
  --brand:#F39000;            /* 7,79:1 sobre --surface */
  --brand-ink:#1a0f04;        /* texto sobre --brand: 7,90:1 */
  --brand-hover:#ffa526;      /* primario al pasar el puntero */
  --brand-soft:#f3900029;     /* velo de acción enfatizada (16 %) */

  /* Selección (fila, chip, ítem activo). */
  --sel:#2a1d17;
  --sel-line:#5a3a22;
  --sel-text:#ffd9a8;         /* 12,24:1 sobre --sel */

  /* Superficies: oscuro cálido, no negro puro. */
  --bg:#0e0b0c;
  --surface:#161213;
  --surface-2:#1c1718;
  --raised:#221b1d;
  --rail-bg:#0a0809;          /* riel lateral */
  --side-bg:#120e10;          /* panel derecho */
  --well:#0b0809;             /* interior de campos y bloques de lectura */
  --veil:#161213f2;           /* superficie flotante translúcida (overlays, cajón) */
  --top-bg:#0e0b0cf2;         /* barra superior translúcida */
  --glow:#241417;             /* halo cálido del fondo (esquina superior izquierda) */
  --hover:#ffffff08;          /* velo neutro al pasar el puntero */
  --fill:#ffffff14;           /* relleno neutro: contadores, pistas de progreso */
  --skel-a:#241d1f;           /* esqueleto de carga */
  --skel-b:#2c2426;

  /* Texto. */
  --text:#f6f1ee;             /* 17,48:1 sobre --bg */
  --text-2:#c9bfc1;           /* 10,92:1 sobre --bg */
  --text-3:#948a8d;           /* 5,86:1 sobre --bg · 5,05:1 sobre --raised */

  /* Líneas. */
  --line:#2a2224;             /* separador, no identifica controles */
  --line-strong:#3a2f31;
  --line-field:#756a6d;       /* borde de campo (WCAG 1.4.11 ≥ 3:1): 3,84:1 sobre --well, 3,57:1 sobre --surface, 3,25:1 sobre --raised; antes 1,26:1 */

  /* Estados: solo significado, nunca decoración. */
  --ok:#3fbf7f;               /* 7,94:1 sobre --surface */
  --warn:#e7a13a;             /* 8,46:1 sobre --surface */
  --danger:#e56464;           /* 5,61:1 sobre --surface */
  --info:#6aa7e8;             /* 7,35:1 sobre --surface */
  --ok-soft:#12312380;        /* fondo de etiqueta de estado */
  --ok-text:#8fe3b7;          /* 12,25:1 sobre --surface */
  --warn-soft:#3a2a1080;
  --warn-text:#f0c27a;        /* 11,24:1 sobre --surface */
  --danger-soft:#3a171780;
  --danger-text:#f3a3a3;      /* 9,36:1 sobre --surface */
  --info-soft:#16222e;
  --info-text:#cfe4fa;        /* 12,39:1 sobre --info-soft */
  --on-status:#1a0f04;        /* texto sobre relleno de estado: 5,69:1 sobre --danger */

  /* Foco: 2 px de marca, visible sobre cualquier superficie (7,08:1 sobre --raised). */
  --focus:var(--brand);
  --focus-ring:2px solid var(--focus);

  /* Sombras. */
  --shadow-md:0 12px 32px #00000099;
  --shadow-lg:0 24px 80px #000000b3;
  --shade:#00000080;          /* color de sombra con geometría propia (riel expandido) */

  /* Espaciado, base 4. --s0 solo para ajustes de 2 px dentro de controles. */
  --s0:2px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* Radios. */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  /* Tipografía: escala cerrada; ningún otro tamaño en el shell. */
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-26:26px;

  /* Alturas de control. */
  --h-control:32px;           /* botón, chip grande, pestaña */
  --h-field:40px;             /* campo de texto */
  --h-row:40px;               /* fila de tabla densa */

  /* Métricas del marco objetivo (lienzo 1920×1080). */
  --rail:64px; --rail-open:236px; --top:52px; --panel:360px;

  /* Movimiento: se anula entero con prefers-reduced-motion. */
  --dur-fast:.16s; --dur:.22s; --ease:cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0s;--dur:0s}
}