/* Propuesta del CPI (7-oct-2026) — hoja «catalogo». Usa los tokens de cpi.css (:root).
   R08 catálogo y ficha de publicación · R15 resultados de búsqueda · R16
   relacionados · R07 en listados. Cada bloque vive bajo su propio prefijo
   (.catalogo, .catalogo-destacado, .ficha-pub, .resultados) y no toca clases
   compartidas. El rótulo de tipo (.rotulo) lo define cpi-portada.css. */

/* ---------- Contenedor: el mismo ancho que la cabecera de página ---------- */
.catalogo,
.catalogo-destacado {
  width: min(var(--maxw), calc(100% - 40px));
  margin-inline: auto;
}
.ficha-pub .catalogo { width: 100%; }

/* ---------- Acceso destacado a Reportes ----------------------------------- */
.catalogo-destacado {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  margin-block: clamp(28px, 4vw, 48px);
  padding: 0;
}
.catalogo-destacado__portada {
  display: block; max-width: 120px;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--bg-alt);
}
.catalogo-destacado__portada img { display: block; width: 100%; height: auto; }
.catalogo-destacado__serie {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cpi-teal);
}
.catalogo-destacado__titulo {
  margin: 0 0 var(--s-2);
  font-family: var(--font-titulo); font-size: var(--t-xl); line-height: 1.15;
}
.catalogo-destacado__titulo a { color: var(--cpi-navy); text-decoration: none; }
.catalogo-destacado__titulo a:hover { color: var(--link); }
.catalogo-destacado__acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0 0; }
@media (min-width: 640px) {
  .catalogo-destacado {
    grid-template-columns: 180px minmax(0, 1fr);
    padding: var(--s-6);
    background: var(--bg-alt);
    border-radius: var(--radius-lg);
  }
}

/* ---------- Tipos (chips) y filtros --------------------------------------- */
.catalogo__tipos,
.resultados__secciones {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: 0 0 var(--s-5);
}
.catalogo__chip {
  display: inline-flex; align-items: center; gap: .3em;
  min-height: 2.25rem; padding: .35rem .8rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
.catalogo__chip:hover { border-color: var(--cpi-azul); color: var(--link); }
.catalogo__chip.is-on { background: var(--cpi-navy); border-color: var(--cpi-navy); color: var(--n-0); }
.catalogo__chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.catalogo__n { font-weight: 400; opacity: .8; }

.catalogo__filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-3) var(--s-4);
  align-items: end;
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-inset);
}
.catalogo__campo { display: grid; gap: var(--s-1); min-width: 0; }
.catalogo__campo label { font-size: var(--t-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.catalogo__campo select {
  width: 100%; min-height: 2.5rem; padding: .45rem .6rem;
  font: inherit; font-size: var(--t-sm); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.catalogo__campo select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.catalogo__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.catalogo__limpiar { font-size: var(--t-sm); color: var(--link); }

.catalogo__cuenta { margin: 0 0 var(--s-5); font-size: var(--t-sm); color: var(--text-muted); }
.catalogo__cuenta strong { color: var(--text); }
.catalogo__vacio { padding: var(--s-7) 0; color: var(--text-muted); text-align: center; }

/* ---------- Rejilla de fichas --------------------------------------------- */
.catalogo__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
@media (min-width: 640px)  { .catalogo__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1000px) { .catalogo__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .catalogo__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.catalogo__ficha {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.catalogo__portada {
  display: block; align-self: start;
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  background: var(--bg-alt);
}
.catalogo__portada img { display: block; width: 100%; height: 100%; object-fit: cover; }
.catalogo__texto { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.catalogo__titulo {
  margin: 0;
  font-family: var(--font-texto); font-size: var(--t-base); font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.catalogo__titulo a { color: var(--text); text-decoration: none; }
.catalogo__titulo a:hover { color: var(--link); }
.catalogo__meta { margin: 0; font-size: var(--t-xs); color: var(--text-muted); }
.catalogo__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: auto 0 0; padding-top: var(--s-1); }
.catalogo__accion {
  font-size: var(--t-sm); font-weight: 700; color: var(--link); text-decoration: none;
}
.catalogo__accion::after { content: " →"; }
.catalogo__accion:hover { text-decoration: underline; }
.catalogo__formato { font-size: var(--t-xs); color: var(--text-muted); }

@media (min-width: 640px) {
  .catalogo__ficha { grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; }
  .catalogo__portada { border-radius: 0; }
  .catalogo__texto { padding: var(--s-3) var(--s-4) var(--s-4); }
  .catalogo__rejilla--fila .catalogo__ficha { grid-template-columns: 96px minmax(0, 1fr); padding: var(--s-3); }
  .catalogo__rejilla--fila .catalogo__portada { border-radius: calc(var(--radius) - 2px); }
  .catalogo__rejilla--fila .catalogo__texto { padding: 0; }
}

/* ---------- Ficha de publicación ------------------------------------------ */
.ficha-pub { padding-bottom: var(--s-9); }
.ficha-pub__volver { margin: 0 0 var(--s-5); font-size: var(--t-sm); }
.ficha-pub__volver a { color: var(--link); }
.ficha-pub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
.ficha-pub__portada { max-width: 260px; }
.ficha-pub__portada img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.ficha-pub__titulo {
  margin: var(--s-3) 0 var(--s-5);
  font-family: var(--font-titulo); font-size: var(--t-2xl); line-height: 1.15;
  overflow-wrap: anywhere;
}
.ficha-pub__datos {
  display: grid; gap: var(--s-3);
  margin: 0 0 var(--s-5); padding: var(--s-4) 0;
  border-block: 1px solid var(--border);
}
.ficha-pub__datos > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ficha-pub__datos dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ficha-pub__datos dd { margin: 0; color: var(--text); }
.ficha-pub__datos dd a { color: var(--link); }
.ficha-pub__resumen { font-size: var(--t-md); line-height: 1.55; margin: 0 0 var(--s-5); }
.ficha-pub__cuerpo { margin: 0 0 var(--s-5); }
.ficha-pub__acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-3); }
.ficha-pub__peso { font-weight: 400; }
.ficha-pub__nota,
.ficha-pub__carga { font-size: var(--t-sm); color: var(--text-muted); margin: 0 0 var(--s-2); }
.ficha-pub__mas { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--border); }
@media (min-width: 640px) {
  .ficha-pub__datos > div { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-4); }
}
@media (min-width: 900px) {
  .ficha-pub__grid { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .ficha-pub__portada { max-width: none; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* ---------- Ficha de artículo: lo que antes iba en línea ------------------ */
.art-head__rotulo { margin: 0; }
.art-descarga { margin-top: var(--s-6); }
.autor-box__logo { width: 56px; height: auto; object-fit: contain; background: var(--n-0); padding: 6px 4px; border-radius: var(--radius); }
.autor-box--fuente h3 { margin-bottom: var(--s-1); }
.art-rel__t { font-size: var(--t-sm); }
.art-rel .card__meta { font-size: var(--t-xs); margin: var(--s-1) 0 0; }
.art-rel__serie { margin: 0 0 var(--s-1); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cpi-teal); }
.destacado-box__d { font-size: var(--t-sm); margin-bottom: var(--s-4); }

/* ---------- Listados (archive.php): fuente · fecha ------------------------ */
.cpiux-archive-meta { margin: 0; font-size: .74rem; color: var(--text-muted); }
@media (max-width: 575px) {
  .cpiux-archive-meta { font-size: .68rem; order: -1; }
  .cpiux-archive-copy .rotulo { display: none; }
  .catalogo, .catalogo-destacado { width: calc(100% - 28px); }
}

/* ---------- Resultados de búsqueda ---------------------------------------- */
.resultados__tipo { margin: 0 0 .15rem; }
.resultados__item .titular__f { font-size: var(--t-xs); color: var(--text-muted); }