/* Plan72h — estilos de las páginas de guía */
   Se carga DESPUÉS de /estilos.css y reutiliza sus variables (colores, espacios, radios).
   Sin estilos en línea: la CSP solo permite archivos propios. */

/* ---------- Estructura del artículo ---------- */
.articulo { padding: var(--e6) 0 var(--e7); }
.articulo .contenedor { max-width: 820px; }
.articulo--ancho .contenedor { max-width: 1080px; }

.migas { font-size: .95rem; color: var(--suave); margin: 0 0 var(--e4); }
.articulo .migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.articulo .migas li { margin: 0; }
.migas li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--linea-fuerte); }
.migas a { color: var(--suave); }

.articulo h1 {
  font-size: clamp(2rem, 6.5vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 var(--e4);
}
.entradilla { font-size: 1.2rem; color: var(--suave); margin: 0 0 var(--e4); max-width: 46em; }
.actualizado {
  display: flex; align-items: flex-start; gap: var(--e2);
  font-size: .95rem; color: var(--suave); margin: 0 0 var(--e5);
}
.actualizado .icono { color: var(--verde); margin-top: .2em; }

.articulo h2 {
  font-size: clamp(1.5rem, 4.4vw, 1.95rem); margin: var(--e7) 0 var(--e4);
  scroll-margin-top: 16px;
}
.articulo h3 { font-size: 1.2rem; margin: var(--e5) 0 var(--e2); }
.articulo p, .articulo li { max-width: 46em; }
.articulo ul, .articulo ol { padding-left: 1.3em; }
.articulo li { margin: 0 0 var(--e2); }
.articulo li::marker { color: var(--acento-texto); }

/* Referencia a la fuente al final de una frase: [BBK] */
.ref {
  display: inline-block; font-size: .8rem; font-weight: 700; line-height: 1.3;
  padding: 1px 7px; margin-left: 2px; border-radius: 999px;
  background: var(--fondo-suave); color: var(--suave); text-decoration: none;
  vertical-align: .1em; white-space: nowrap;
}
.ref:hover { background: var(--acento-suave); color: var(--acento-texto); }

/* ---------- Índice ---------- */
.indice {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l);
  padding: var(--e4) var(--e5); margin: 0 0 var(--e5);
}
.indice p { margin: 0 0 var(--e2); font-weight: 800; }
.indice ol { margin: 0; padding-left: 1.3em; }
.indice li { margin: 0; }
.indice a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }

/* ---------- Cajas ---------- */
.caja {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e4) var(--e5); margin: var(--e5) 0; border-radius: var(--r-l);
  background: var(--fondo-suave); border: 1px solid var(--linea);
}
.caja > .icono { width: 1.6em; height: 1.6em; margin-top: 2px; color: var(--acento-texto); }
.caja p { margin: 0 0 var(--e2); }
.caja p:last-child { margin-bottom: 0; }
.caja--peligro { background: var(--acento-suave); border-color: transparent; }
.caja--peligro > .icono { color: var(--acento-texto); }
.caja--112 { background: var(--verde-suave); border-color: transparent; }
.caja--112 > .icono { color: var(--verde); }
.caja--agua { background: var(--agua-suave); border-color: transparent; }
.caja--agua > .icono { color: var(--agua); }

/* ---------- Bloques "Antes / Durante / Después" ---------- */
.fase {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra); padding: var(--e5); margin: 0 0 var(--e4);
}
.fase h3 { display: flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e3); font-size: 1.3rem; }
.fase h3 .icono-fondo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--acento-suave); color: var(--acento-texto);
}
.fase ul { margin: 0; }
@media (max-width: 480px) { .fase { padding: var(--e4); } }

/* ---------- Niveles de aviso de AEMET ---------- */
.niveles { list-style: none; padding: 0 !important; display: grid; gap: var(--e3); margin: var(--e4) 0; }
@media (min-width: 760px) { .niveles { grid-template-columns: repeat(3, 1fr); } }
.niveles li {
  max-width: none; margin: 0; padding: var(--e4); border-radius: var(--r-l);
  background: var(--tarjeta); border: 1px solid var(--linea); border-top-width: 8px;
}
.niveles strong { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.niveles .lema { display: block; font-weight: 800; letter-spacing: .03em; margin-bottom: var(--e2); }
.nivel--amarillo { border-top-color: #e3b505 !important; }
.nivel--naranja { border-top-color: #e57a12 !important; }
.nivel--rojo { border-top-color: #c62828 !important; }

/* ---------- Productos (enlaces a Amazon) ---------- */
.productos { list-style: none; padding: 0 !important; display: grid; gap: var(--e3); margin: var(--e4) 0; }
@media (min-width: 640px) { .productos { grid-template-columns: 1fr 1fr; } }
.productos li {
  max-width: none; margin: 0; display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4); border-radius: var(--r-l);
  background: var(--tarjeta); border: 1px solid var(--linea);
}
.productos li p { margin: 0; color: var(--suave); }
.productos li strong { color: var(--texto); font-size: 1.05rem; }
.productos .boton-amazon { margin-top: auto; width: 100%; white-space: normal; }
.nota-afiliado { font-size: .9rem; color: var(--suave); }

/* ---------- Llamada a la calculadora ---------- */
.cta {
  display: grid; gap: var(--e4); align-items: center;
  margin: var(--e6) 0; padding: var(--e5); border-radius: var(--r-l);
  background: var(--tarjeta); border: 2px solid var(--acento); box-shadow: var(--sombra-alta);
}
.cta h2 { margin: 0 0 var(--e2) !important; font-size: 1.45rem !important; }
.cta p { margin: 0; color: var(--suave); }
@media (min-width: 760px) { .cta { grid-template-columns: 1fr auto; padding: var(--e5) var(--e6); } }

/* ---------- Datos clave (citables) ---------- */
.claves { list-style: none; padding: 0 !important; display: grid; gap: var(--e3); margin: var(--e4) 0; }
@media (min-width: 760px) { .claves { grid-template-columns: 1fr 1fr; } }
.claves li {
  max-width: none; margin: 0; padding: var(--e4); border-radius: var(--r-l);
  background: var(--tarjeta); border: 1px solid var(--linea);
}
.claves .clave__cifra { display: block; font-size: 1.6rem; font-weight: 800; color: var(--acento-texto); line-height: 1.2; }

/* ---------- Tabla comparativa ---------- */
.tabla-envoltorio {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linea); border-radius: var(--r-l);
  background: var(--tarjeta); box-shadow: var(--sombra); margin: var(--e4) 0;
}
.tabla-envoltorio:focus-visible { outline-offset: 2px; }
.comparativa { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; font-size: .95rem; }
/* El título de la tabla se lee fuera (texto visible encima); el caption queda para lectores de pantalla */
.comparativa caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tabla-titulo { font-weight: 700; color: var(--suave); margin: 0 0 var(--e2); }
.comparativa th, .comparativa td {
  padding: var(--e3); vertical-align: top; text-align: left;
  border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea);
}
.comparativa thead th {
  background: var(--fondo-suave); font-size: .95rem; line-height: 1.3;
  position: sticky; top: 0; z-index: 1;
}
.comparativa thead th a { font-weight: 800; }
.comparativa thead th span { display: block; font-weight: 500; color: var(--suave); font-size: .85rem; }
.comparativa tbody th {
  position: sticky; left: 0; z-index: 2;
  background: var(--tarjeta); font-weight: 800; min-width: 150px; max-width: 170px;
  box-shadow: 1px 0 0 var(--linea);
}
.comparativa thead th:first-child { left: 0; z-index: 3; position: sticky; }
.comparativa tbody tr:last-child th, .comparativa tbody tr:last-child td { border-bottom: 0; }
.comparativa th:last-child, .comparativa td:last-child { border-right: 0; }
.comparativa .dato { display: block; font-weight: 800; color: var(--texto); }
.comparativa .cita { display: block; color: var(--suave); font-size: .88rem; margin-top: 4px; }
.comparativa .vacio { color: var(--linea-fuerte); font-weight: 700; }
.desliza { display: none; font-size: .9rem; color: var(--suave); margin: 0; }
@media (max-width: 1020px) { .desliza { display: block; } }

/* ---------- Lista de fuentes del artículo ---------- */
.fuentes-articulo { padding-left: 1.3em; }
.fuentes-articulo li { margin-bottom: var(--e3); }
.fuentes-articulo a { font-weight: 600; word-break: break-word; }
.fuentes-articulo span { display: block; color: var(--suave); font-size: .92rem; }

/* ---------- Impresión ---------- */
@media print {
  .barra-superior, .pie, .cta, .productos, .indice, .nota-afiliado { display: none !important; }
  .articulo { padding: 0; }
  .fase, .caja, .tabla-envoltorio { box-shadow: none; break-inside: avoid; }
  .tabla-envoltorio { overflow: visible; }
  .comparativa { min-width: 0; font-size: 9pt; }
  .comparativa tbody th, .comparativa thead th { position: static; }
}