/* ============================================================================
   PATA AMARILLA — informes.css
   ============================================================================
   Estilos de la sección "Informes" (biblioteca de PDFs, CPT pa_informe).

   HERO: usa .pa-page-hero de style.css (componente compartido, no se repite
   acá — ver ese archivo para el fondo oscuro con patrón de puntos).

   Tokens de fuente: ver assets/css/README.md antes de tocar cualquier
   font-size de este archivo — la tabla de ahí dice qué --pa-font-* usar
   según el rol del texto (título de tarjeta, metadata, botón, etc.).

   ÍNDICE
     1. Listado (/informes/) — grid + tarjeta horizontal
        1.1 Contenedor y grid
        1.2 Tarjeta — portada
        1.3 Tarjeta — ficha (metadata, título, descripción)
        1.4 Tarjeta — acciones (Descargar / Compartir)
     2. Botones compartidos (tarjeta + vista individual)
     3. Vista individual (/informe/{slug}/)
        3.1 Migas de pan
        3.2 Encabezado (título, descripción, acciones)
        3.3 Visor de PDF
        3.4 Comentarios
     4. Compartir — toast de "enlace copiado"
     5. Responsive
   ============================================================================ */

/* ── 1.1 Contenedor y grid ────────────────────────────────────────────────
   2 columnas fijas en desktop (no 3): cada tarjeta tiene más aire para su
   propio contenido. 1 columna en móvil (media query, sección 5).
   ─────────────────────────────────────────────────────────────────────── */
.pa-informes-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.pa-informes-grid {
  display: grid;
  /* minmax(0, 1fr) y no "1fr" a secas: un track "1fr" trae un mínimo
     implícito "auto" = el min-content de su contenido. Con un nombre de
     institución largo en una sola línea (white-space:nowrap) ese mínimo es
     enorme y el grid se ensancha más que su contenedor en vez de dejar que
     el ellipsis del texto haga su trabajo. minmax(0, 1fr) deja que el track
     encoja hasta 0; el contenido interno decide cuándo truncar. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.pa-informes-empty {
  text-align: center;
  padding: 80px 24px;
  color: #9ca3af;
  font-size: var(--pa-font-body);
}
.pa-informes-empty-sub { margin-top: 6px; font-size: var(--pa-font-body-sm); }

/* Tarjeta horizontal tipo "fila de documento" (portada chica a la izquierda,
   ficha a la derecha) en vez de una portada grande vertical: así el título
   aparece una sola vez (no repetido como texto de portada y de nuevo como
   título de ficha) y el grid entra en 2 columnas sin que cada tarjeta ocupe
   media pantalla. */
.pa-informe-card {
  min-width: 0; /* el ítem de grid tampoco debe negarse a encoger */
  background: var(--pa-blanco);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.pa-informe-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.09);
  transform: translateY(-3px);
  border-color: #d1d1d6;
}
/* Portada + ficha van en fila (flex) dentro del mismo <a>; las acciones
   quedan afuera como hermano, alineadas bajo la ficha con margin-left (=
   ancho de portada + gap), para no anidar botones dentro de un enlace. */
.pa-informe-card-link {
  display: flex;
  flex-direction: row;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

/* ── 1.2 Tarjeta — portada ────────────────────────────────────────────────
   Proporción de hoja (3:4), chica — ya no compite con el título. Sin
   imagen destacada, un ícono de documento (nunca texto: el título ya vive
   en la ficha). La miniatura real puede venir de la primera página del PDF
   — ver "Miniaturas del PDF" en el metabox de wp-admin (inc/cpt-informes.php).
   ─────────────────────────────────────────────────────────────────────── */
.pa-informe-card-cover {
  width: 96px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--pa-gris-claro);
  border-radius: 8px;
  align-self: flex-start;
}
.pa-informe-card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pa-informe-card-cover-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #1c1a00 0%, #2a2200 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pa-informe-card-cover-fallback svg { width: 30px; height: 30px; opacity: .85; }

/* ── 1.3 Tarjeta — ficha ──────────────────────────────────────────────────
   Fecha + institución en texto plano, no en pastilla: ese tratamiento
   negro/ámbar es del lenguaje de NAVEGACIÓN del sitio ("← Columnas", "←
   Todos los informes" — ver sección 3.1), no de metadata de ficha; puesto
   sobre un PDF institucional serio se leía como badge de blog. Título y
   descripción se recortan a 2 líneas CON el alto reservado (min-height)
   para esas 2 líneas, así una ficha con texto corto no achica la tarjeta —
   todas miden lo mismo y el pie de acciones cae siempre en la misma fila,
   nunca "sube" por falta de contenido.
   ─────────────────────────────────────────────────────────────────────── */
.pa-informe-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pa-informe-card-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: var(--pa-font-label);
}
.pa-informe-card-date {
  color: #9ca3af;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.pa-informe-card-meta-sep { color: #d1d5db; flex-shrink: 0; }
/* La fecha nunca se trunca; la institución se lleva el espacio restante y
   es la que trunca con "…" si el nombre no entra en una línea. */
.pa-informe-card-inst {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pa-gris-oscuro);
}

.pa-informe-card-title {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-card-title);
  font-weight: 900;
  color: var(--pa-negro);
  line-height: 1.3;
  min-height: 2.6em; /* 2 líneas */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pa-informe-card-excerpt {
  font-size: var(--pa-font-meta);
  line-height: 1.5;
  color: #6b7280;
  min-height: 3em; /* 2 líneas */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 1.4 Tarjeta — acciones ───────────────────────────────────────────────
   Descargar y Compartir van SIEMPRE juntos, como un solo grupo pegado a la
   esquina inferior derecha; el tamaño del PDF queda a la izquierda.
   ─────────────────────────────────────────────────────────────────────── */
.pa-informe-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-left: 112px; /* 96px de portada + 16px de gap: alineado bajo la ficha */
  padding-top: 12px;
}
.pa-informe-card-filesize {
  font-size: var(--pa-font-label);
  font-weight: 700;
  color: #9ca3af;
  white-space: nowrap;
}
.pa-informe-card-actions-buttons {
  display: flex;
  align-items: stretch; /* Compartir (sin padding vertical) estira a la altura de Descargar */
  gap: 8px;
  flex-shrink: 0;
}

/* ── 2. BOTONES COMPARTIDOS (tarjeta + vista individual) ────────────────
   Transparentes con borde, se rellenan de ámbar al hover — la paleta
   "outline" que ya usa el resto del sitio (.pa-cat-pill y similares), más
   sobria que un botón negro relleno para un documento institucional serio.
   ─────────────────────────────────────────────────────────────────────── */
.pa-informe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: inherit; /* un <button> no hereda fuente por defecto — ver README */
  font-size: var(--pa-font-meta);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid #d1d1d6;
  background: #fff;
  color: var(--pa-negro);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.pa-informe-btn:hover { background: var(--pa-amarillo); border-color: var(--pa-amarillo); transform: translateY(-1px); }
.pa-informe-btn-icon { width: 40px; padding: 0; flex-shrink: 0; }
.pa-informe-btn svg { display: block; flex-shrink: 0; width: 15px; height: 15px; }

/* ── 3.1 Vista individual — migas de pan ─────────────────────────────────
   Mismo lenguaje de pastilla negro/ámbar que usa un post individual (ver
   body.single-post .pa-breadcrumb en single-post.css), reescalado acá
   porque corre bajo body.single-pa_informe. Siempre en una sola fila: la
   pastilla de "volver" y la institución son inline-flex, nunca se fuerzan
   a su propio ancho completo.
   ─────────────────────────────────────────────────────────────────────── */
.pa-informe-single-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.pa-informe-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.pa-informe-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--pa-font-micro);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pa-amarillo);
  background: var(--pa-negro);
  padding: 8px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease, gap .2s ease;
}
.pa-informe-back svg { display: block; flex-shrink: 0; width: 12px; height: 12px; transition: transform .2s ease; }
/* color explícito en :hover: el "a:hover" global del tema (especificidad
   0-1-1) le gana a ".pa-informe-back" sin :hover (0-1-0) y pintaba el
   texto negro sobre el fondo oscuro del hover — casi invisible. Con color
   acá, ".pa-informe-back:hover" (0-2-0) gana sin depender de trucos de
   prefijo de selector. */
.pa-informe-back:hover,
.pa-informe-back:focus,
.pa-informe-back:active,
.pa-informe-back:visited { background: var(--pa-gris-oscuro); color: var(--pa-amarillo); opacity: 1; gap: 9px; text-decoration: none; }
.pa-informe-back:visited { background: var(--pa-negro); gap: 6px; }
.pa-informe-back:hover svg,
.pa-informe-back:focus svg,
.pa-informe-back:active svg { transform: translateX(-2px); }
.pa-informe-breadcrumb-sep { color: #d1d5db; font-size: var(--pa-font-meta); line-height: 1; }
.pa-informe-breadcrumb-inst {
  font-size: var(--pa-font-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pa-gris-medio);
}

/* ── 3.2 Vista individual — encabezado ───────────────────────────────── */
.pa-informe-single-title {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-subsection);
  font-weight: 900;
  color: var(--pa-negro);
  line-height: 1.2;
  margin: 0 0 12px;
}
.pa-informe-single-excerpt {
  font-size: var(--pa-font-body-sm);
  line-height: 1.6;
  color: #6b7280;
  margin: 0 0 24px;
  max-width: 760px;
}
.pa-informe-single-actions {
  display: flex;
  align-items: stretch; /* Compartir (sin padding vertical) estira a la altura de Descargar */
  gap: 10px;
  margin-bottom: 24px;
}

/* ── 3.3 Vista individual — visor de PDF ─────────────────────────────── */
.pa-informe-viewer {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: var(--pa-gris-claro);
}
.pa-informe-viewer-frame {
  width: 100%;
  height: calc(100vh - 260px);
  min-height: 480px;
  border: 0;
  display: block;
}
.pa-informe-viewer-fallback {
  text-align: center;
  font-size: var(--pa-font-label);
  color: #9ca3af;
  padding: 10px;
  margin: 0;
  border-top: 1px solid #e5e7eb;
}
.pa-informe-viewer-fallback a { color: var(--pa-negro); font-weight: 700; }
.pa-informe-viewer-empty {
  text-align: center;
  padding: 80px 24px;
  color: #9ca3af;
  border-radius: 16px;
  border: 1px dashed #d1d1d6;
}

/* ── 3.4 Vista individual — comentarios ──────────────────────────────────
   Mismo ancho que la barra superior y el visor: antes quedaba forzada a
   720px y el salto de ancho contra el visor de 1160px se veía roto. El
   propio .pa-comment-form ya es max-width:100%, así que simplemente hereda
   el ancho de .pa-informe-single-wrap.
   ─────────────────────────────────────────────────────────────────────── */
.pa-informe-single-comments {
  margin: 56px 0 0;
  padding-top: 40px;
  border-top: 1px solid #e5e7eb;
}

/* ── 4. COMPARTIR — toast de "enlace copiado" ────────────────────────── */
.pa-informe-share-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--pa-negro);
  color: var(--pa-blanco);
  font-size: var(--pa-font-label);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}
.pa-informe-share-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================================
   5. RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
  .pa-informes-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pa-informe-single-wrap { padding: 24px 16px 48px; }
  .pa-informe-viewer-frame { height: calc(100vh - 320px); min-height: 420px; }
}
@media (max-width: 580px) {
  .pa-informe-viewer-frame { height: 72vh; }
}
/* Pantallas muy angostas: portada un poco más chica para dejarle más aire
   al texto (institución/título/descripción) en la columna derecha. */
@media (max-width: 420px) {
  .pa-informe-card-cover { width: 76px; }
  .pa-informe-card-actions { margin-left: 92px; }
}