/* =========================================================
   modo-nocturno.css — Modo nocturno compartido (páginas internas EPJA)
   Se carga DESPUÉS de rediseno-paginas.css y ANTES del CSS de cada página.
   Funciona invirtiendo los colores base (--ep-blanco, --ep-gris, --ep-negro)
   cuando <body> tiene la clase .modo-nocturno. La paleta de acentos
   (amarillo, rojo, verde, celeste) no cambia.
   La clase y la clave de localStorage son las mismas que usa index.html,
   así que la preferencia se comparte entre todas las páginas.
   ========================================================= */

/* ---------- Colores base invertidos ---------- */
body.modo-nocturno {
  --ep-blanco: #1b2026;
  --ep-gris: #2a3038;
  --ep-negro: #edf1f5;
  background: #171b20;
  color: #edf1f5;
}

/* Sobre fondos de acento (amarillo, etc.) el texto sigue siendo oscuro */
body.modo-nocturno .ep-hero__ico { color: #2e2d2c; }
body.modo-nocturno .ep-resalte { background: #facd05; color: #2e2d2c; }
body.modo-nocturno .ep-hero { background: #20262d; }

/* ---------- Pie de página ---------- */
body.modo-nocturno .footer {
  --ep-blanco: #ffffff;
  --ep-negro: #2e2d2c;
  background: #20262d;
  border-top: 1px solid #414a55;
}

/* ---------- Botón del modo nocturno (navbar) ---------- */
.navbar .modo-nocturno-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border: 1px solid #d7dce2; border-radius: 12px;
  background: #fff; color: #2e2d2c; font: 600 15px/1.2 "Barlow", Arial, sans-serif;
  white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.navbar .modo-nocturno-btn:hover,
.navbar .modo-nocturno-btn:focus-visible {
  background: #e6eef8; color: #1f5d9b; outline: 2px solid #769fd3; outline-offset: 2px;
}
.navbar .nav-acciones-movil { display: none; }

/* ---------- Navbar ---------- */
body.modo-nocturno .navbar { background: #171b20; box-shadow: 0 2px 12px #0005; }
body.modo-nocturno .navbar .portada-titulo .bold,
body.modo-nocturno .navbar .portada-titulo .regular { color: #f2f4f7; }
body.modo-nocturno .navbar .nav-links > li > a { color: #d5dbe3; }
body.modo-nocturno .navbar .nav-links > li > a:hover,
body.modo-nocturno .navbar .nav-links > li > a:focus-visible,
body.modo-nocturno .navbar .nav-links > li > a[aria-current="page"] { background: #293b50; color: #a9d0ff; }
body.modo-nocturno .navbar .nav-links .dropdown { background: #20262d; border-color: #414b57; }
body.modo-nocturno .navbar .nav-links .dropdown a { color: #e7ebf0; }
body.modo-nocturno .navbar .nav-links .dropdown a:hover,
body.modo-nocturno .navbar .nav-links .dropdown a:focus-visible { background: #293b50; color: #a9d0ff; }
body.modo-nocturno .navbar .modo-nocturno-btn { background: #303944; color: #f4f6f8; border-color: #586575; }
body.modo-nocturno .navbar .modo-nocturno-btn:hover { background: #3c4856; color: #fff; }
body.modo-nocturno .navbar .nav-links > li > a.sistema-epja-btn { background: #facd05; border-color: #facd05; color: #2e2d2c; }
body.modo-nocturno .navbar .nav-links > li > a.sistema-epja-btn:hover,
body.modo-nocturno .navbar .nav-links > li > a.sistema-epja-btn:focus-visible { background: #faae05; border-color: #faae05; color: #2e2d2c; }
body.modo-nocturno .navbar .menu-toggle { background: #303944; }
body.modo-nocturno .navbar .menu-toggle .bar { background: #f2f4f7; }

/* ---------- Navbar en móvil ---------- */
@media (max-width: 768px) {
  .navbar .modo-nocturno-item { display: none; }
  .navbar .nav-acciones-movil { display: flex; align-items: center; gap: 8px; }
  .navbar .modo-nocturno-movil { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .navbar .modo-nocturno-movil span { display: none; }

  body.modo-nocturno .navbar .nav-links { background: #171b20; box-shadow: 0 15px 35px #0008; }
  body.modo-nocturno .navbar .nav-links > li > a { background: #20262d; border-color: #414b57; }
  body.modo-nocturno .navbar .nav-links .dropdown { background: #171b20; border-color: #414b57; }
  body.modo-nocturno .navbar .nav-links .dropdown a { background: #2a3038; color: #e7ebf0; }
}