/* Reportes · hoja aparte, como glosario.css y ciclo.css.
   Depende solo de las variables de :root que define styles.css.

   Es la misma FORMA que el hub del glosario —migas, cabecera, retícula de
   tarjetas— pero con clases propias: una tarjeta de reporte lleva portada,
   ventana temporal y tipo de acceso, y colgarla de `.gl-card` ataría el día que
   alguien reestilice el glosario. */

.rp-main{padding-top:96px}

.rp-crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--greygreen);display:flex;gap:9px;align-items:center}
.rp-crumbs a{color:var(--muted);border-bottom:1px solid transparent}
.rp-crumbs a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.rp-crumbs span[aria-current]{color:var(--ink)}

.rp-head{max-width:820px;margin:26px 0 0}
.rp-head h1{font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-1.8px;font-weight:800}
.rp-kicker{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--greygreen);display:block;margin:0 0 12px}
.rp-def{max-width:820px;margin:34px 0 0;padding:26px 30px;background:var(--sage);
  border-left:3px solid var(--ink);border-radius:0 12px 12px 0}
.rp-def p{font-size:20px;line-height:1.55;color:var(--ink);margin:0}

/* ---------- retícula de reportes ----------
   Tarjetas más anchas que las del glosario (380 contra 300): acá cada una lleva
   portada y tres líneas de metadatos, y a 300px el título se parte en tres. */
/* Tope de 480px por tarjeta, no `1fr`. Con `1fr` la retícula reparte TODO el ancho
   entre las tarjetas que haya, y con una sola —que es como nace esta sección— salía
   una tarjeta de 380px flotando en 1.280px de blanco, con pinta de maqueta a medias.
   Acotada y alineada a la izquierda se ve igual de intencional con uno que con seis. */
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,480px));
  justify-content:start;gap:22px;margin:48px 0 0}

.rp-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);overflow:hidden;transition:border-color .18s,transform .18s,box-shadow .18s}
.rp-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 10px 26px rgba(34,35,31,.07)}

.rp-card-img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--sage-2)}
.rp-card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.rp-card .rp-edicion{font-family:var(--mono);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--greygreen);margin:0 0 9px}
.rp-card h2{font-size:22px;line-height:1.2;letter-spacing:-.5px;font-weight:800;color:var(--ink);margin:0}
.rp-card .rp-sub{font-size:15.5px;line-height:1.45;color:var(--ink);margin:4px 0 0;font-weight:500}
.rp-card p{font-size:15px;line-height:1.62;color:var(--muted);margin:12px 0 0}

/* La ventana temporal va con el mismo peso que el título a propósito: en un
   reporte de mercado, «qué periodo cubre» es tan decisivo como de qué trata. */
.rp-meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.rp-badge{font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:5px 11px;color:var(--muted);white-space:nowrap}
.rp-badge.rp-periodo{border-color:var(--ink);color:var(--ink)}
.rp-badge.rp-abierto{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}
.rp-badge.rp-proximo{background:var(--sage-2);border-color:var(--sage-2)}

.rp-card-more{font-family:var(--mono);font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ink);margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px}
/* `margin-top:auto` empuja el pie al fondo: sin esto, dos tarjetas contiguas con
   resúmenes de distinto largo dejan sus flechas a alturas distintas. */
.rp-card-body .rp-card-more{margin-top:auto}

/* Un reporte que aún no sale no es un enlace: no hay a dónde ir. Se ve como
   tarjeta pero no invita al clic. */
.rp-card.rp-no-disponible{opacity:.72}
.rp-card.rp-no-disponible:hover{border-color:var(--line);transform:none;box-shadow:none}

@media(max-width:760px){
  .rp-main{padding-top:82px}
  .rp-def{padding:22px;border-radius:0 10px 10px 0}
  .rp-def p{font-size:17.5px}
  .rp-grid{grid-template-columns:1fr;gap:18px;margin:34px 0 0}
  .rp-card-body{padding:20px 20px 22px}
  .rp-card h2{font-size:20px}
}