/* Criterio Compliance: estilos de las páginas de artículo.
   Se carga después de estilos.css y reutiliza sus variables. */

/* Barra de progreso de lectura */
.lectura { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; pointer-events: none; }
.lectura span { display: block; height: 100%; background: var(--lacre); transform: scaleX(0); transform-origin: 0 50%; }

/* Cabecera del artículo */
.nota__cabecera { padding-top: 48px; padding-bottom: 8px; }
@media (min-width: 980px) { .nota__cabecera { padding-top: 72px; padding-bottom: 8px; } }
.migas { display: flex; flex-wrap: wrap; gap: 8px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 24px; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--lacre); }
.migas span:last-child { color: var(--lacre); }
.nota__cabecera h1 { font: 500 clamp(32px, 4.6vw, 54px)/1.12 var(--serif); letter-spacing: -0.02em; max-width: 22ch; }
.nota__bajada { margin-top: 20px; font: 400 clamp(18px, 1.7vw, 21px)/1.6 var(--serif); color: var(--texto-suave); max-width: 60ch; }
.nota__datos { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--regla); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }
.nota__datos p { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: var(--texto-suave); }
.nota__datos time { color: var(--texto); font-weight: 600; }
.nota__datos .numerales { margin: 0; }

/* Rejilla: índice + texto */
.nota__rejilla { display: grid; gap: 32px; padding-top: 40px; padding-bottom: 72px; }
@media (min-width: 980px) {
  .nota__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 64px; padding-top: 56px; padding-bottom: 96px; }
}
.nota__rejilla > * { min-width: 0; }

/* Índice */
.indice { border-top: 3px double var(--regla); padding-top: 14px; align-self: start; }
@media (min-width: 980px) { .indice { position: sticky; top: 72px; max-height: calc(100vh - 96px); overflow: auto; } }
.indice__titulo { font: 600 12px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 10px; }
.indice ol { list-style: none; margin: 0; padding: 0; counter-reset: ind; }
.indice li { counter-increment: ind; border-bottom: 1px solid var(--linea); }
.indice a { display: grid; grid-template-columns: 28px 1fr; padding: 9px 0; font-size: 14px; line-height: 1.4; text-decoration: none; color: var(--texto-suave); }
.indice a::before { content: counter(ind, decimal-leading-zero); font: 500 12px/1.6 var(--mono); color: var(--texto-tenue); }
.indice a:hover, .indice a[aria-current="true"] { color: var(--texto); }
.indice a[aria-current="true"]::before { color: var(--lacre); }
@media (max-width: 979px) {
  .indice { padding: 14px 16px 6px; background: var(--papel-2); border-top-width: 0; border-left: 3px solid var(--lacre); }
}

/* Texto del artículo */
.prosa { max-width: 720px; font: 400 19px/1.75 var(--serif); }
@media (max-width: 600px) { .prosa { font-size: 18px; } }
.prosa > p, .prosa > ul, .prosa > ol { margin: 0 0 1.15em; }
.prosa > p:first-child { font-size: 1.12em; line-height: 1.65; }
.prosa h2 { font: 600 clamp(25px, 2.6vw, 31px)/1.2 var(--serif); letter-spacing: -0.015em; margin: 2.2em 0 0.7em; padding-top: 0.9em; border-top: 1px solid var(--linea); scroll-margin-top: 72px; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font: 600 21px/1.3 var(--serif); margin: 1.6em 0 0.5em; }
.prosa strong { font-weight: 600; }
.prosa a { text-decoration-color: var(--lacre); text-underline-offset: 4px; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li { margin-bottom: 0.55em; padding-left: 0.2em; }
.prosa li::marker { color: var(--lacre); font-family: var(--mono); font-size: 0.85em; }
.prosa ol > li::marker { font-weight: 500; }

/* Tablas */
.tabla { margin: 1.6em 0 1.8em; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--regla); border-bottom: 1px solid var(--regla); }
.tabla table { width: 100%; border-collapse: collapse; font: 400 15px/1.5 var(--sans); min-width: 520px; }
.tabla caption { caption-side: top; text-align: left; padding: 12px 0 10px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); }
.tabla th { text-align: left; font-weight: 600; font-size: 13px; color: var(--texto-suave); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--regla); vertical-align: bottom; }
.tabla td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla td:last-child { font-family: var(--mono); font-size: 13px; color: var(--lacre); white-space: nowrap; }
.tabla td:first-child { font-weight: 600; color: var(--texto); }

/* Advertencias */
.prosa .aviso { position: relative; margin: 1.6em 0; padding: 18px 20px 18px 22px; background: var(--papel-2); border-left: 3px solid var(--lacre); font-size: 0.92em; line-height: 1.7; }
.prosa .aviso strong { display: block; font: 600 12px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lacre); margin-bottom: 6px; }

/* Preguntas frecuentes */
.faq { border-top: 2px solid var(--regla); margin: 0.8em 0 1.6em; }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: baseline; padding: 16px 0; font: 600 18px/1.4 var(--serif); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font: 400 22px/1 var(--sans); color: var(--lacre); text-align: right; }
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--lacre); }
.faq__item p { padding: 0 40px 18px 0; font-size: 0.95em; color: var(--texto-suave); }

/* Siguiente paso */
.siguiente { margin: 2.4em 0 0; padding: 4px 28px 28px; border: 1px solid var(--regla); outline: 1px solid var(--regla); outline-offset: 4px; }
.siguiente h2 { border-top: 0; margin-top: 0.8em; padding-top: 0; }
.siguiente p { margin: 0; }

/* Fuentes y fecha */
.fuentes-nota { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--linea); font: 400 13px/1.6 var(--sans); color: var(--texto-tenue); }
.fuentes-nota p + p { margin-top: 6px; }
.fuentes-nota small { font-size: inherit; }

/* Artículo relacionado */
.relacionada { padding-bottom: 72px; }
@media (min-width: 980px) { .relacionada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 64px; } .relacionada > * { grid-column: 2; } }
.relacionada__etiqueta { font: 600 12px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); padding-bottom: 12px; border-bottom: 3px double var(--regla); }
.relacionada__tarjeta { display: grid; gap: 8px; max-width: 720px; padding: 24px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--texto); }
.relacionada__tarjeta .tema { font-size: 13px; }
.relacionada__titulo { font: 600 clamp(22px, 2.4vw, 27px)/1.25 var(--serif); letter-spacing: -0.015em; }
.relacionada__tarjeta:hover .relacionada__titulo { color: var(--lacre); }
.relacionada__resumen { font: 400 16px/1.6 var(--serif); color: var(--texto-suave); }
.relacionada__tarjeta .enlace-flecha { margin-top: 6px; justify-self: start; }
.relacionada__volver { margin-top: 20px; font-size: 15px; }
.relacionada__volver a { text-decoration-color: var(--lacre); text-underline-offset: 4px; }

@media print {
  .lectura, .indice, .relacionada { display: none !important; }
  .nota__rejilla { display: block; }
  .faq__item p { display: block; }
}

/* Ajustes de la cabecera y tablas en celular */
.nota__datos .numerales { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; border: 0; padding: 0; grid-column: auto; align-self: auto; }
.nota__datos .numerales li { margin: 0; }
@media (max-width: 640px) {
  .tabla { border-bottom: 0; }
  .tabla table { min-width: 0; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--linea); }
  .tabla td { display: grid; grid-template-columns: 38% 1fr; gap: 12px; padding: 4px 0; border: 0; white-space: normal; }
  .tabla td::before { content: attr(data-etiqueta); font: 600 11px/1.6 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-tenue); }
  .tabla td:first-child { display: block; font-size: 16px; padding-bottom: 8px; }
  .tabla td:first-child::before { display: none; }
}

/* Bloque de descargas (herramientas en Excel) */
.prosa .descargas { margin: 1.6em 0 1.8em; padding: 20px 22px 18px; border-top: 2px solid var(--regla); border-bottom: 1px solid var(--regla); background: var(--campo); font-family: var(--sans); }
.descargas__titulo { font: 600 12px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lacre); margin-bottom: 10px !important; }
.prosa .descargas__archivo { display: grid; gap: 2px; padding: 12px 0 12px 34px; border-top: 1px solid var(--linea); text-decoration: none; color: var(--texto); position: relative; }
.descargas__archivo::before { content: "↓"; position: absolute; left: 4px; top: 11px; font: 500 18px/1 var(--mono); color: var(--lacre); }
.descargas__nombre { font: 600 18px/1.35 var(--serif); }
.descargas__archivo:hover .descargas__nombre { color: var(--lacre); text-decoration: underline; text-underline-offset: 4px; }
.descargas__detalle { font-size: 14px; color: var(--texto-suave); }
.descargas__nota { margin-top: 8px !important; padding-top: 10px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--texto-tenue); }

/* ===== Adaptación a celular (2026-10-12) ===== */
.prosa, .prosa * { overflow-wrap: break-word; }
.prosa img, .prosa iframe, .prosa video { max-width: 100%; height: auto; }
.tabla { max-width: 100%; }
@media (max-width: 599px) {
  .nota__cabecera { padding-top: 32px; }
  .nota__cabecera h1 { font-size: clamp(28px, 8.6vw, 36px); hyphens: auto; -webkit-hyphens: auto; }
  .nota__bajada { font-size: 17px; }
  .nota__rejilla { padding-top: 28px; padding-bottom: 56px; gap: 24px; }
  .prosa { font-size: 17.5px; line-height: 1.7; }
  .prosa h2 { font-size: clamp(23px, 6.6vw, 27px); hyphens: auto; -webkit-hyphens: auto; }
  .prosa h3 { font-size: 19px; }
  .prosa ul, .prosa ol { padding-left: 1.1em; }
  .prosa .aviso { padding: 14px 14px 14px 16px; margin-left: 0; margin-right: 0; }
  .prosa .descargas { padding: 16px 14px 14px; }
  .faq__item summary { font-size: 17px; gap: 10px; padding: 14px 0; }
  .faq__item p { padding-right: 0; }
  .siguiente { padding: 2px 16px 20px; margin-left: 5px; margin-right: 5px; }
  .indice a { padding: 11px 0; }
  .tabla td { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .relacionada { padding-bottom: 56px; }
}