/* ============================================
   MANUALVERDE — article.css
   Plantilla universal de artículo (SPEC-001)
   ============================================ */

/* ---------- HERO DEL ARTÍCULO ---------- */

.art-hero {
  background: var(--color-fondo-alt);
  border-bottom: 1px solid var(--color-borde);
  padding-block: var(--esp-xl);
}

.art-hero__inner {
  max-width: var(--ancho-lectura);
  margin-inline: auto;
}

.art-hero__migas {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  margin-bottom: var(--esp-m);
}
.art-hero__migas a {
  color: var(--color-primario);
  font-weight: 600;
}
.art-hero__migas a:hover {
  text-decoration: underline;
}

.art-hero__titulo {
  font-size: clamp(1.8rem, 4.5vw, var(--texto-2xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-block: var(--esp-s) var(--esp-m);
}

.art-hero__resumen {
  font-size: var(--texto-md);
  color: var(--color-texto-suave);
  max-width: 60ch;
  margin-bottom: var(--esp-l);
}

.art-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-s) var(--esp-l);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.art-hero__meta strong {
  color: var(--color-texto);
  font-weight: 700;
}

/* ---------- CUERPO ---------- */

.articulo {
  padding-block: var(--esp-xl) var(--esp-xxl);
}

.articulo__inner {
  max-width: var(--ancho-lectura);
  margin-inline: auto;
}

/* Respuesta rápida */
.respuesta-rapida {
  background: var(--color-primario-suave);
  border-left: 4px solid var(--color-primario);
  border-radius: var(--radio-m);
  padding: var(--esp-l);
  margin-bottom: var(--esp-xl);
}
.respuesta-rapida__titulo {
  font-size: var(--texto-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primario);
  margin-bottom: var(--esp-s);
}
.respuesta-rapida p {
  margin: 0;
  color: var(--color-primario-oscuro);
  font-weight: 500;
}

/* Índice / Tabla de contenidos */
.toc {
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  padding: var(--esp-s) var(--esp-l);
  margin-bottom: var(--esp-xl);
}
.toc summary {
  font-weight: 800;
  cursor: pointer;
  padding-block: var(--esp-s);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toc summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--color-primario);
}
.toc[open] summary::after {
  content: "−";
}
.toc ol {
  padding: 0 0 var(--esp-m) 1.2rem;
  display: grid;
  gap: var(--esp-s);
  font-size: var(--texto-sm);
}
.toc a {
  color: var(--color-texto);
  font-weight: 600;
}
.toc a:hover {
  color: var(--color-primario);
  text-decoration: underline;
}

/* Prosa del artículo (complementa .prosa de page.css) */
.prosa h2 {
  scroll-margin-top: calc(var(--alto-header) + var(--esp-m));
}

/* Tabla */
.tabla-scroll {
  overflow-x: auto;
  margin-block: var(--esp-l);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
  min-width: 560px;
}
.tabla th {
  background: var(--color-primario-oscuro);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 0.8rem 1rem;
}
.tabla td {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--color-borde);
  vertical-align: top;
}
.tabla tbody tr:nth-child(even) {
  background: var(--color-fondo-alt);
}
.tabla td:first-child {
  font-weight: 700;
}

/* Cajas informativas */
.caja {
  border-radius: var(--radio-m);
  padding: var(--esp-l);
  margin-block: var(--esp-l);
  display: grid;
  gap: var(--esp-s);
}
.caja__titulo {
  font-size: var(--texto-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.caja p {
  margin: 0;
}
.caja--consejo {
  background: var(--color-primario-suave);
}
.caja--consejo .caja__titulo {
  color: var(--color-primario);
}
.caja--aviso {
  background: #fdf3e7;
}
.caja--aviso .caja__titulo {
  color: var(--color-advertencia);
}

/* Checklist */
.checklist {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  padding: var(--esp-l);
  margin-block: var(--esp-l);
  box-shadow: var(--sombra-suave);
}
.checklist__titulo {
  font-weight: 800;
  margin-bottom: var(--esp-m);
}
.checklist ul {
  list-style: none;
  display: grid;
  gap: var(--esp-s);
  padding: 0;
  margin: 0;
}
.checklist li {
  display: flex;
  gap: var(--esp-s);
  align-items: flex-start;
  font-size: var(--texto-sm);
}
.checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--color-primario);
  border-radius: 5px;
}

/* FAQ */
.faq {
  display: grid;
  gap: var(--esp-s);
  margin-block: var(--esp-l);
}
.faq details {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  padding: var(--esp-s) var(--esp-l);
}
.faq summary {
  font-weight: 700;
  cursor: pointer;
  padding-block: var(--esp-s);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-m);
}
.faq summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--color-primario);
  flex-shrink: 0;
}
.faq details[open] summary::after {
  content: "−";
}
.faq details p {
  padding-bottom: var(--esp-m);
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* Pie editorial */
.pie-editorial {
  border-top: 1px solid var(--color-borde);
  margin-top: var(--esp-xl);
  padding-top: var(--esp-l);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  display: grid;
  gap: var(--esp-xs);
}

/* Bloque de continuidad (relacionados) */
.relacionados {
  background: var(--color-fondo-alt);
  border-top: 1px solid var(--color-borde);
  padding-block: var(--esp-xl);
}
.relacionados__titulo {
  font-size: var(--texto-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--esp-l);
}

/* Imagen principal del artículo */
.art-imagen {
  margin-bottom: var(--esp-xl);
}
.art-imagen img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-media);
}
.art-imagen figcaption {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  margin-top: var(--esp-s);
}