/* Sección /reconstruir/ (F5.3). Se carga después de styles.css y solo agrega lo propio
   de los artículos: el listado con su filtro, la etiqueta de tipo y los bloques finales. */

.reconstruir { padding: 8px 0 48px; }
.listado { max-width: 72ch; }
.tarjeta-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 6px; color: var(--texto-tenue); font-size: .82rem;
}
.etiqueta {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-family: var(--titulo); font-weight: 600; font-size: .72rem; letter-spacing: .02em;
}
.etiqueta-guia { background: var(--amarillo-suave); color: var(--azul-profundo); }
.etiqueta-noticia { background: #EEF3FB; color: var(--azul-confianza); }

/* Filtro sin JavaScript: los radios van ocultos y hermanos de la lista. */
.filtro-radio { position: absolute; opacity: 0; pointer-events: none; }
.filtro { display: flex; gap: 8px; margin: 0 0 18px; }
.filtro label {
  padding: 8px 16px; border: 1px solid var(--borde); border-radius: 999px; background: #fff;
  font-family: var(--titulo); font-weight: 600; font-size: .9rem; cursor: pointer;
}
#f-todo:checked ~ .filtro label[for="f-todo"],
#f-guia:checked ~ .filtro label[for="f-guia"],
#f-noticia:checked ~ .filtro label[for="f-noticia"] {
  background: var(--azul-profundo); border-color: var(--azul-profundo); color: #fff;
}
.filtro-radio:focus-visible ~ .filtro { outline: 3px solid var(--amarillo); outline-offset: 4px; border-radius: 999px; }
#f-guia:checked ~ .listado [data-tipo="noticia"],
#f-noticia:checked ~ .listado [data-tipo="guia"] { display: none; }

.vacio { max-width: 72ch; }

.fuentes-oficiales, .relacionadas { margin-top: 2em; }
.fuentes-oficiales ul { margin-bottom: 0; }
.relacionadas .tarjetas { margin-top: .6em; }