/* ============================================================
   tema-oscuro.css — Modo noche.
   El claro es el tema por defecto. El oscuro se aplica ÚNICAMENTE si
   el usuario lo activa con el conmutador, que pone data-tema="oscuro"
   en <html>. La preferencia del sistema (prefers-color-scheme) no se
   consulta a propósito.
   Solo redefine tokens; los componentes no cambian.
   Depende de: base.css
   ============================================================ */

html[data-tema="oscuro"] {
  color-scheme: dark;

  --color-primario: #5aa9ef;
  --color-primario-fuerte: #8cc4f7;
  --color-primario-profundo: #080d14;
  --color-primario-suave: #4fc3e8;
  --color-primario-tenue: #16283c;
  --color-acento: #ffd24d;
  --color-acento-fuerte: #ffc107;

  --gris-50: #161c25;
  --gris-100: #1c2430;
  --gris-200: #2b3644;
  --gris-300: #3b4859;
  --gris-400: #5c6b7e;
  --gris-500: #97a5b6;
  --gris-700: #c2cddb;
  --gris-900: #e9eef5;

  --color-fondo: #0e1319;
  --color-superficie: #161d27;
  --color-superficie-alt: #1b2330;
  --color-texto: var(--gris-900);
  --color-texto-suave: var(--gris-500);
  --color-borde: #2b3644;
  --color-borde-fuerte: #3b4859;

  --color-exito: #4ade80;
  --color-error: #f87171;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-2: 0 4px 14px rgba(0, 0, 0, 0.55);
  --sombra-3: 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Ajustes puntuales que los tokens no cubren
   ============================================================ */

/* La barra de navegación y el pie usan azul sólido en claro; en
   oscuro se apoyan en el fondo profundo para no "brillar". */
html[data-tema="oscuro"] .nav-bg {
  background-color: rgba(14, 19, 25, 0.92);
  border-bottom-color: var(--color-borde);
}

/* El botón principal invierte el texto sobre el azul claro */
html[data-tema="oscuro"] .btn,
html[data-tema="oscuro"] .btn:hover:not(:disabled) { color: #08111c; }

html[data-tema="oscuro"] .btn--contorno { color: var(--color-primario); }
html[data-tema="oscuro"] .btn--contorno:hover:not(:disabled) { color: #08111c; }
html[data-tema="oscuro"] .btn:disabled { color: var(--gris-500); }

/* En modo noche los colores de marca se aclaran, así que el texto
   blanco sobre ellos se queda en 2.5:1 (el mínimo son 4.5:1). Todo
   lo que se apoye en un fondo de color lleva texto oscuro. */
html[data-tema="oscuro"] .formulario__leyenda,
html[data-tema="oscuro"] .paginacion__actual,
html[data-tema="oscuro"] .download-btn {
  color: #08111c;
}

/* Los logotipos son JPG con fondo blanco */
html[data-tema="oscuro"] .imagenLogo img,
html[data-tema="oscuro"] .marca__logo {
  background-color: #ffffff;
}

html[data-tema="oscuro"] .imagenLogo img {
  border-radius: var(--radio-sm);
  padding: var(--espacio-1);
  filter: grayscale(1) brightness(1.05);
}