/* ============================================================
   base.css — Reset, variables de tema (claro/oscuro), tipografía
   Contrastes verificados WCAG AA sobre los fondos declarados.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-extrabold.woff2') format('woff2');
}

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

:root {
  /* Tema claro (por defecto) */
  --bg: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #eef1f5;
  --texto: #1a2332;
  --texto-2: #4a5568;
  --borde: #d4dae3;
  --primario: #1d4ed8;          /* azul, 6.3:1 sobre blanco */
  --primario-hover: #1e40af;
  --primario-texto: #ffffff;
  --primario-suave: #dbe5fb;
  --ok: #166534;                /* verde, 6.7:1 */
  --ok-suave: #dcfce7;
  --alerta: #854d0e;            /* ámbar oscuro, 6.6:1 */
  --alerta-suave: #fef9c3;
  --peligro: #b91c1c;           /* rojo, 5.9:1 */
  --peligro-suave: #fee2e2;
  --neutro-suave: #e2e8f0;
  --foco: #1d4ed8;
  --sombra: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
  --sombra-alta: 0 10px 25px rgba(16, 24, 40, .18);
  --radio: 8px;
  --radio-s: 5px;

  /* Tipografía: familia + escala modular (razón ~1.2) y trazos
     compartidos, para que ningún componente invente un tamaño suelto. */
  --fuente: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fs-2xs: .6875rem;   /* 11px — etiquetas de grupo, claúsula en nav */
  --fs-xs: .75rem;      /* 12px — badges, chips, cabecera de tabla, ayuda */
  --fs-sm: .8125rem;    /* 13px — controles: botones, inputs, pestañas */
  --fs-base: .9375rem;  /* 15px — cuerpo */
  --fs-md: 1rem;        /* 16px — h3, título de topbar, marca */
  --fs-lg: 1.125rem;    /* 18px — h2 */
  --fs-xl: 1.3125rem;   /* 21px — h1 */
  --lh-ajustado: 1.25;
  --lh-normal: 1.5;
  --trazo-mayus: .05em; /* letter-spacing compartido para texto en mayúsculas */
}

/* Tema oscuro por preferencia del sistema (cuando data-theme="auto") */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0f1520;
    --superficie: #1a2332;
    --superficie-2: #232e40;
    --texto: #e8edf4;
    --texto-2: #a8b3c4;
    --borde: #344256;
    --primario: #7ba3f7;         /* 7.2:1 sobre #1a2332 */
    --primario-hover: #9dbaf9;
    --primario-texto: #0f1520;
    --primario-suave: #24344f;
    --ok: #6ee7a0;
    --ok-suave: #123524;
    --alerta: #fbd24e;
    --alerta-suave: #3a2f10;
    --peligro: #f58e8e;
    --peligro-suave: #431a1a;
    --neutro-suave: #2c3a50;
    --foco: #7ba3f7;
    --sombra: 0 1px 3px rgba(0, 0, 0, .4);
    --sombra-alta: 0 10px 25px rgba(0, 0, 0, .5);
  }
}

/* Tema oscuro forzado por el usuario */
:root[data-theme="oscuro"] {
  --bg: #0f1520;
  --superficie: #1a2332;
  --superficie-2: #232e40;
  --texto: #e8edf4;
  --texto-2: #a8b3c4;
  --borde: #344256;
  --primario: #7ba3f7;
  --primario-hover: #9dbaf9;
  --primario-texto: #0f1520;
  --primario-suave: #24344f;
  --ok: #6ee7a0;
  --ok-suave: #123524;
  --alerta: #fbd24e;
  --alerta-suave: #3a2f10;
  --peligro: #f58e8e;
  --peligro-suave: #431a1a;
  --neutro-suave: #2c3a50;
  --foco: #7ba3f7;
  --sombra: 0 1px 3px rgba(0, 0, 0, .4);
  --sombra-alta: 0 10px 25px rgba(0, 0, 0, .5);
}

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--fs-base);
  font-optical-sizing: auto;
  line-height: var(--lh-normal);
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: var(--lh-ajustado); font-weight: 700; }
h1 { font-size: var(--fs-xl); letter-spacing: -.01em; }
h2 { font-size: var(--fs-lg); letter-spacing: -.005em; }
h3, h4 { font-size: var(--fs-md); font-weight: 600; }
p { margin: 0 0 .75em; }
small { color: var(--texto-2); }
a { color: var(--primario); }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}

/* El atributo hidden debe ganar siempre: sin esto, cualquier regla con
   `display` (p. ej. .campo { display:flex }) lo anula y el elemento
   sigue visible aunque el código lo haya ocultado. */
[hidden] { display: none !important; }

/* Accesibilidad */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salto-contenido {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--primario); color: var(--primario-texto);
  padding: .5rem 1rem; border-radius: 0 0 var(--radio-s) 0;
}
.salto-contenido:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}