/* ============================================================
   DrivingPR — tema oscuro automático del sitio público.

   Sigue el modo del dispositivo (prefers-color-scheme). Solo lo carga
   includes/header.php, así que dashboard/ y repaso/ (que tiene su propio
   tema, html.rp-dark) no se enteran. Todo va dentro del @media: en modo
   claro ninguna regla aplica y el sitio queda exactamente como estaba.

   Tailwind va por CDN sin build y hay ~110 clases de color en ~24
   archivos, así que en vez de variantes dark: se remapean las clases más
   usadas hacia una paleta (la misma del área de estudiante). El <style> del
   CDN se inyecta después de este archivo: por eso los selectores llevan
   `html ` delante (mayor especificidad que una clase sola).

   footer.php y los héroes ya son navy: los remapeos de texto se acotan a
   `main` y `header`, y text-slate-300/200 y text-white no se tocan.
   ============================================================ */

@media (prefers-color-scheme: dark) {

  html {
    --pub-bg:#0B1220; --pub-card:#131C2E; --pub-raised:#1B2537;
    --pub-border:#2A3648; --pub-border-soft:#1F2A3C;
    --pub-text:#E8EDF5; --pub-text-2:#C3CEDD; --pub-text-3:#A8B5C7; --pub-text-4:#8494A8;
    /* #0051B3 sobre oscuro da ~2.5:1 (ilegible); #5B9CFF llega a ~7:1. */
    --pub-brand:#5B9CFF;
    --pub-ok-bg:#0E2A1B; --pub-ok-border:#1E5637; --pub-ok-text:#6EE7A0;
    --pub-warn-bg:#2B2109; --pub-warn-border:#5C4715; --pub-warn-text:#FBBF5A;
    --pub-bad-bg:#2C1416; --pub-bad-border:#5E2427; --pub-bad-text:#FCA5A5;
    color-scheme: dark;
  }

  /* body lleva la clase text-navy (0,1,0), que le gana a `html body`: sin
     el selector con la clase, todo el texto que hereda del body queda navy. */
  html body, html body.text-navy { background-color: var(--pub-bg); color: var(--pub-text); }

  /* ── Superficies ─────────────────────────────────────────── */
  html .bg-white     { background-color: var(--pub-card); }
  html .bg-surface   { background-color: var(--pub-bg); }
  html .bg-slate-50  { background-color: var(--pub-raised); }
  html .bg-slate-100 { background-color: var(--pub-raised); }
  html .bg-slate-200 { background-color: var(--pub-border); }
  html .hover\:bg-slate-50:hover  { background-color: var(--pub-raised); }
  html .hover\:bg-slate-100:hover { background-color: var(--pub-raised); }
  html .hover\:bg-blue-50:hover   { background-color: var(--pub-raised); }
  html .bg-blue-50   { background-color: var(--pub-raised); }
  html .bg-brand\/5  { background-color: rgba(91,156,255,.08); }
  html .bg-brand\/10 { background-color: rgba(91,156,255,.14); }

  /* ── Bordes ──────────────────────────────────────────────── */
  html .border-slate-200,
  html .border-slate-300 { border-color: var(--pub-border); }
  html .border-slate-100 { border-color: var(--pub-border-soft); }
  html .border-blue-200  { border-color: var(--pub-border); }
  html .divide-slate-100 > * { border-color: var(--pub-border-soft); }

  /* ── Texto (solo main y header: footer y héroes ya son navy) ── */
  html :is(main,header) .text-navy      { color: var(--pub-text); }
  html :is(main,header) .text-slate-800,
  html :is(main,header) .text-slate-700,
  html :is(main,header) .text-slate-600 { color: var(--pub-text-2); }
  html :is(main,header) .text-slate-500 { color: var(--pub-text-3); }
  html :is(main,header) .text-slate-400 { color: var(--pub-text-4); }
  html :is(main,header) .text-brand,
  html :is(main,header) .hover\:text-brand:hover { color: var(--pub-brand); }
  html :is(main,header) .text-blue-700,
  html :is(main,header) .text-blue-900  { color: var(--pub-brand); }
  html :is(main,header) .hover\:text-brand-dark:hover { color: #8DBBFF; }
  /* El texto blanco de botones sólidos (bg-brand, bg-accent) no se toca. */

  /* ── Estados ─────────────────────────────────────────────── */
  html .bg-green-50, html .bg-green-100 { background-color: var(--pub-ok-bg); }
  html .border-green-200 { border-color: var(--pub-ok-border); }
  html :is(.text-green-600,.text-green-700,.text-green-800,.text-green-900) { color: var(--pub-ok-text); }
  html .bg-amber-50, html .bg-amber-100 { background-color: var(--pub-warn-bg); }
  html :is(.border-amber-200,.border-amber-300) { border-color: var(--pub-warn-border); }
  html :is(.text-amber-600,.text-amber-700,.text-amber-800,.text-amber-900) { color: var(--pub-warn-text); }
  html .bg-red-50 { background-color: var(--pub-bad-bg); }
  html :is(.border-red-200,.border-red-300,.border-red-400) { border-color: var(--pub-bad-border); }
  html :is(.text-red-500,.text-red-600,.text-red-700,.text-red-800,.text-red-900) { color: var(--pub-bad-text); }

  /* ── Formularios ─────────────────────────────────────────── */
  html :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) {
    background-color: var(--pub-raised);
    border-color: var(--pub-border);
    color: var(--pub-text);
  }
  html ::placeholder { color: var(--pub-text-4); opacity: 1; }
  /* custom.css pone el foco en #0051B3 !important: ilegible sobre oscuro. */
  html :is(input,select,textarea):focus {
    border-color: var(--pub-brand) !important;
    box-shadow: 0 0 0 3px rgba(91,156,255,.22) !important;
  }
  html input[type=file] { color: var(--pub-text-2); }

  /* ── Sombras y detalles de custom.css ────────────────────── */
  html :is(.shadow-card,.shadow-card-hover) {
    box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
  html .btn-lift:hover,
  html .card-lift:hover { box-shadow: 0 10px 28px -10px rgba(0,0,0,.65); }
  /* Sin esto el header se vuelve blanco al hacer scroll. */
  html body > header.is-scrolled { background-color: rgba(19,28,46,.9); }
  html .nav-link::after { background: var(--pub-brand); }
  html ::-webkit-scrollbar-thumb { background: #3B4A63; }

  /* ── Casos puntuales ─────────────────────────────────────── */
  /* Botón blanco sobre navy con ícono navy transparente (Portal de
     Estudiantes): se mantiene claro, si no el ícono desaparece. */
  html .pub-keep-light { background-color: #fff; }
  html .pub-keep-light .text-navy { color: #0F172A; }
  html .pub-keep-light .text-slate-500 { color: #64748B; }
  html .pub-keep-light .text-brand { color: #0051B3; }
  html .pub-keep-light:hover { background-color: #EFF6FF; }

  /* El mapa embebido no se puede tematizar: se invierte para que no sea
     un rectángulo blanco brillante en medio de la página. */
  html iframe[src*="maps.google.com"] { filter: invert(.92) hue-rotate(180deg) brightness(.95); }
}