/* ==========================================================
   TEMA AZUL OSCURO CON TEXTO BLANCO
   Para quitarlo y volver al tema claro, borra el enlace a este archivo en templates/header.html
   ========================================================== */
:root {
  color-scheme: dark;
  --bg: #14213d;            /* fondo: azul oscuro */
  --surface: #1c2d52;       /* tarjetas, submenú, botones */
  --surface-2: #2a3f6b;     /* etiquetas de categoría */
  --text: #f5f7fb;          /* texto: blanco suave, muy legible */
  --muted: #b4c0d8;         /* fechas, pie, textos secundarios */
  --accent: #ffb454;        /* enlaces y detalles: ámbar */
  --on-accent: #14213d;     /* texto sobre botones de color ámbar */
  --line: #2f4573;          /* líneas divisorias */
}

/* Menú y submenú */
.menu > li > a { color: var(--text); }
.menu > li > a:hover { color: var(--accent); }
.sub { background: var(--surface); border-color: var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.sub a:hover { background: var(--bg); }
.menu-toggle { background: var(--surface); border-color: var(--line); }

/* Etiquetas de categoría */
.post-cats .cat { background: var(--surface-2); color: var(--text); }
.post-cats .cat:hover { background: var(--accent); color: var(--on-accent); }
.cat-nav li.active a, .cat-nav a:hover { color: var(--on-accent); }

/* Paginación y botones */
.pagination .current, .pagination .btn-more, .pagination .btn-more:hover { color: var(--on-accent); }

/* Texto de las entradas */
.post-content pre { background: #0e1830; color: var(--text); }
.post-content a { text-decoration: underline; text-underline-offset: 3px; }
.post-content th, .post-content td { border: 1px solid var(--line); padding: 6px 10px; }
.post-thumb img, .post-featured img { background: var(--surface); }

/* Menú sándwich sobre la imagen a pantalla completa (tablet angosta) */
body:has(.post-full .post-featured) .menu-toggle { background: rgba(20, 33, 61, .88); border-color: rgba(255, 255, 255, .35); }

/* En el menú sándwich el submenú va integrado, sin caja ni sombra */
@media (max-width: 768px) {
  .sub { background: transparent; box-shadow: none; }
}