/* ────────────────────────────────────────────────────────────────
   Propuesta 5 · Sección de BOLETINES (hemeroteca) — común a las dos fichas.
   Mismo sistema visual que ficha.css (tokens, mono para kickers, rojo de
   acento, tarjetas sobre carta). Se inyecta desde boletines-ficha.js después
   de que ficha.js haya montado la página, justo antes del cierre.

   Idea de diseño: un muro de portadas reales — la prueba, número a número, de
   que ONG Pasos lleva años comunicando cada mes. Se navega por año sin recargar;
   al pulsar una portada, un visor a pantalla embebe el PDF entero.
   ──────────────────────────────────────────────────────────────── */

/* La sección hereda .bloq de ficha.css (borde superior, ritmo vertical, fondo hielo). */
#boletines .bol-lead{max-width:66ch;margin-bottom:clamp(1.8rem,4vh,2.6rem)}
#boletines .bol-lead p{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.5;color:var(--tinta)}
#boletines .bol-lead p + p{margin-top:.9rem;font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.6;color:var(--gris);max-width:60ch}

/* ── Barra: navegación por año + resumen del año elegido ── */
.bol-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 1.6rem;flex-wrap:wrap;
  border-bottom:1px solid var(--linea);padding-bottom:1rem;margin-bottom:clamp(1.5rem,3.5vh,2.3rem)}
/* En móvil los años pueden no caber: se deslizan dentro de su carril, nunca empujan la página. */
.bol-years{display:flex;gap:.5rem;flex-wrap:wrap;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.bol-years::-webkit-scrollbar{display:none}
.bol-years button{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);
  background:none;border:1px solid var(--linea);border-radius:999px;padding:8px 15px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;transition:background .25s,border-color .25s,color .25s}
.bol-years button b{font-variant-numeric:tabular-nums;color:var(--punto);font-weight:500;transition:color .25s}
.bol-years button:hover{color:var(--tinta);border-color:var(--tinta)}
.bol-years button.on{background:var(--tinta);border-color:var(--tinta);color:var(--carta)}
.bol-years button.on b{color:var(--rojo)}
.bol-years button:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

.bol-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
  white-space:nowrap;display:flex;align-items:baseline;gap:.55rem}
.bol-count b{color:var(--tinta);font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.bol-count .rojo{color:var(--rojo)}

/* ── Muro de portadas ── */
.bol-panels{position:relative}
.bol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(.7rem,1.4vw,1.1rem)}
.bol-grid[hidden]{display:none}   /* así las imágenes lazy de los años ocultos no se descargan */
@media(max-width:520px){.bol-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}

/* Cada portada es un botón (abre el visor), no un enlace: el PDF se ve dentro de la página. */
.bol-cover{display:block;position:relative;padding:0;margin:0;border:1px solid var(--linea);background:var(--carta);
  cursor:pointer;overflow:hidden;text-align:left;font:inherit;color:inherit;
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .45s}
.bol-cover img{width:100%;height:auto;display:block;background:var(--hielo);
  filter:saturate(.96);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.bol-cover:hover{border-color:var(--tinta);transform:translateY(-4px);box-shadow:0 14px 32px -14px rgba(13,20,24,.4)}
.bol-cover:hover img{transform:scale(1.035)}
.bol-cover:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

/* Pie del mes, siempre legible sobre la portada */
.bol-cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .6rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  background:linear-gradient(0deg,rgba(13,20,24,.9),rgba(13,20,24,.35) 55%,transparent);
  color:var(--carta);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.bol-cap b{font-weight:600;letter-spacing:.06em}
.bol-cap span{color:#AEBEC1}

/* Pista de "esto se abre" que aparece al enfocar/pasar por encima */
.bol-open{position:absolute;top:.6rem;right:.6rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta);background:var(--carta);border:1px solid var(--tinta);border-radius:999px;
  padding:5px 10px;display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateY(-5px);
  transition:opacity .3s,transform .3s;pointer-events:none}
.bol-open svg{width:11px;height:11px;stroke:currentColor;stroke-width:2;fill:none;flex:none}
.bol-cover:hover .bol-open,.bol-cover:focus-visible .bol-open{opacity:1;transform:none}

/* Aviso honesto si por lo que sea no hay boletines que pintar (no debería pasar) */
.bol-vacio{color:var(--gris);font-style:italic}

/* ════════════ VISOR (lightbox a pantalla) ════════════ */
.bol-lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  background:rgba(6,10,12,.94);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
@supports((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .bol-lb{background:rgba(6,10,12,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
.bol-lb.on{opacity:1;visibility:visible}
html.bol-lock,html.bol-lock body{overflow:hidden}
/* Con el visor abierto, la cabecera fija del sitio (z-index menor) no debe asomar por encima. */
html.bol-lock #cab{visibility:hidden}

/* Barra superior del visor: mes/año + navegación + abrir en Drive + cerrar */
.bol-lb-bar{display:flex;align-items:center;gap:.6rem .9rem;flex-wrap:wrap;color:var(--hielo);
  padding:clamp(.8rem,2vw,1.15rem) clamp(1rem,3vw,2rem)}
.bol-lb-t{display:flex;align-items:baseline;gap:.7rem;margin-right:auto;min-width:0}
.bol-lb-t b{font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:-.025em;color:#fff}
.bol-lb-t span{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA0A4;white-space:nowrap}

.bol-lb-bar button,.bol-lb-bar a{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hielo);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:background .25s,border-color .25s,color .25s,opacity .25s}
.bol-lb-bar button:hover,.bol-lb-bar a:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.bol-lb-bar button:disabled{opacity:.28;cursor:default;pointer-events:none}
.bol-lb-bar a svg,.bol-lb-nav svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;flex:none}
.bol-lb-nav{display:flex;gap:.4rem}
.bol-lb-nav button{padding:9px 12px}
.bol-lb-close{font-size:.62rem !important}
.bol-lb-close b{font-size:1rem;line-height:1;margin-left:-1px}

/* Escenario del PDF */
.bol-lb-stage{flex:1;min-height:0;display:flex;padding:0 clamp(.7rem,3vw,2rem) clamp(.9rem,3vw,2rem)}
.bol-lb-frame{flex:1;min-height:0;width:100%;border:0;background:var(--hielo);border-radius:3px;
  box-shadow:0 24px 70px -24px rgba(0,0,0,.7)}
.bol-lb-cargando{margin:auto;color:#8FA0A4;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}

@media(max-width:600px){
  .bol-lb-t{order:-1;flex-basis:100%;margin-right:0}
  .bol-lb-bar{gap:.5rem}
  .bol-lb-bar button,.bol-lb-bar a{padding:8px 11px}
}

@media(prefers-reduced-motion:reduce){
  .bol-cover,.bol-cover img{transition:none !important;transform:none !important}
  .bol-lb{transition:opacity .001s,visibility .001s}
}

/* En captura headless (?shot=1) el reloj de transiciones no avanza: el visor se
   dejaría fotografiado a opacidad 0. Se le quita la transición para que salga ya. */
html.modo-captura .bol-lb{transition:none}