/* ============================================================
   MeteoRanking — páginas estáticas (legal, cómo funciona, contacto).
   Complementa a estilos.css: SOLO prosa editorial y navegación
   entre páginas. Sin JS: el tema claro/oscuro sale del propio
   color-scheme + light-dark() de los tokens (prefers-color-scheme
   como base; si algún día se estampa data-theme, también manda).
   ============================================================ */

/* nav de páginas en la cabecera: visible en móvil (sin hamburguesa/JS) */
.nav-paginas {
  display: flex; flex-wrap: wrap; gap: 2px var(--e-1);
  margin-left: auto; justify-content: flex-end;
}
.nav-paginas a {
  text-decoration: none; color: var(--tinta-suave);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  padding: 6px 10px; border-radius: var(--radio-s);
}
.nav-paginas a:hover { color: var(--tinta); background: var(--superficie-alta); }
.nav-paginas a[aria-current="page"] {
  color: var(--tinta);
  box-shadow: inset 0 -2px 0 var(--tinta);
  border-radius: var(--radio-s) var(--radio-s) 0 0;
}
@media (max-width: 700px) {
  .nav-paginas a { font-size: var(--t-xs); padding: 4px 7px; }
}

/* ---------- cuerpo de la página ---------- */
.pagina { max-width: var(--ancho-contenido); }
.pagina-kicker {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-tenue); margin: 0 0 var(--e-2);
}
.pagina h1 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem); margin: 0 0 var(--e-3); }
.pagina-fecha { color: var(--tinta-tenue); margin: 0 0 var(--e-5); }

.prosa { max-width: 72ch; }
.prosa h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  margin: var(--e-7) 0 var(--e-3);
}
.prosa h2:first-of-type { margin-top: var(--e-5); }
.prosa p, .prosa li { color: var(--tinta-2); }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: var(--e-3) 0; }
.prosa li { margin-bottom: var(--e-2); }
.prosa li::marker { color: var(--tinta-tenue); }
.prosa strong { color: var(--tinta); }

/* ficha de identificación (aviso legal, responsable RGPD) */
.ficha {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--e-2) var(--e-5);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-m); padding: var(--e-4) var(--e-5);
  margin: var(--e-4) 0;
}
.ficha dt {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinta-tenue);
  align-self: baseline; padding-top: 2px;
}
.ficha dd { margin: 0; align-self: baseline; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .ficha { grid-template-columns: 1fr; gap: 2px; }
  .ficha dd { margin-bottom: var(--e-3); }
}

/* marcador PENDIENTE bien visible: Álvaro lo sustituye por el dato real */
.pendiente {
  font-family: var(--f-mono); font-size: 0.85em; font-weight: 500;
  color: inherit;
  background: color-mix(in oklab, var(--ambar) 26%, transparent);
  border: 1px dashed var(--ambar-tinta); border-radius: 6px;
  padding: 1px 7px; white-space: nowrap;
}

/* llamada destacada (limitación de responsabilidad, avisos) */
.destacado {
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid var(--ambar);
  border-radius: var(--radio-s);
  padding: var(--e-4) var(--e-5); margin: var(--e-4) 0;
}
.destacado p { margin: 0 0 var(--e-2); }
.destacado p:last-child { margin-bottom: 0; }

/* ---------- sección /articulos/ (añadido 21-jul-2026) ---------- */

/* entradilla del artículo: primer párrafo, algo mayor y en tinta plena */
.entradilla { font-size: 1.09rem; color: var(--tinta); }

/* tarjetas de la portada /articulos/ (título, entradilla, fecha, lectura) */
.lista-articulos {
  list-style: none; padding: 0; max-width: 72ch;
  margin: var(--e-5) 0 0; display: grid; gap: var(--e-4);
}
.tarjeta-articulo {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-m); padding: var(--e-5);
}
.tarjeta-articulo h2 { margin: 0 0 var(--e-2); font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); }
.tarjeta-articulo h2 a { text-decoration: none; color: var(--tinta); }
.tarjeta-articulo h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tarjeta-articulo p { margin: 0; color: var(--tinta-2); }
.articulo-meta {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinta-tenue);
  margin: 0 0 var(--e-2);
}

/* caja «Sigue el tiempo de tu ciudad, verificado» al pie de cada artículo */
.caja-cta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid var(--ambar); border-radius: var(--radio-s);
  padding: var(--e-4) var(--e-5); margin: var(--e-6) 0 0;
}
.caja-cta p { margin: 0 0 var(--e-2); }
.caja-cta p:last-child { margin-bottom: 0; }

/* tabla sencilla (almacenamiento local en cookies) */
.tabla-simple {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm); margin: var(--e-4) 0;
}
.tabla-simple th, .tabla-simple td {
  text-align: left; padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--borde-suave);
  vertical-align: top;
}
.tabla-simple th {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-tenue); font-weight: 500;
}