/* ===========================
   COLECCIONES (entradas)
   Legible · Funcional · Responsive
   =========================== */

/* ---------- Variables base (puedes sobreescribir en :root) ---------- */
.entries {
  --c-fondo: #ffffff;
  --c-fondo-alt: #fafafa;
  --c-texto: #121212;
  --c-texto-sec: #444;
  --c-borde: #e6e6e6;
  --c-borde-soft: #f0f0f0;
  --c-primario: #155e40;               /* verde cooperativa */
  --c-primario-contraste: #ffffff;
  --c-focus: #0a8754;                   /* foco accesible */
  --radio: 14px;
  --sombra: 0 8px 22px rgba(0,0,0,.06);
  --gap: clamp(12px, 2vw, 20px);
  --max-anchura: 1100px;
  --lead: 1.65;
  --fz-base: clamp(15px, 1.8vw, 17px);
  --fz-titulo: clamp(22px, 3.2vw, 32px);
  --fz-h2: clamp(18px, 2.4vw, 22px);
  --fz-meta: clamp(12px, 1.6vw, 13.5px);
  --pill-bg: #eef7f1;
  --pill-bd: #d6e9dd;

  /* límites visuales en listado */
  --entry-max-w: 100%;
  --entry-max-h: 520px;
}

/* ---------- Tipografía y contenedor ---------- */
.page.entries {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--c-texto);
  background: var(--c-fondo);
  padding: clamp(12px, 3vw, 24px);
}

.entries .contenido,
.page.entries {
  max-width: var(--max-anchura);
  margin-inline: auto;
}

.entries__title {
  font-weight: 700;
  font-size: var(--fz-titulo);
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
  letter-spacing: .2px;
}

/* ---------- Controles (buscador) ---------- */
.entries__controls form{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  margin: 0 0 1rem 0;
}

.entries__controls input[type="search"]{
  flex:1 1 260px; min-width:220px;
  padding:.65rem .75rem; border:1px solid var(--c-borde);
  border-radius: 10px; background:#fff;
  line-height:1.2; font-size: var(--fz-base);
}

.btn{
  appearance: none; border:1px solid transparent; cursor:pointer;
  padding:.6rem .9rem; border-radius:10px; font-weight:600;
  font-size: clamp(14px,1.7vw,15px); line-height:1.1;
}

.btn--primary{
  background: var(--c-primario); color: var(--c-primario-contraste);
  border-color: var(--c-primario);
}
.btn--ghost{
  background: #fff; color: var(--c-texto);
  border-color: var(--c-borde);
}
.btn:focus-visible{
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* ---------- Grid de entradas ---------- */
.entries__list{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
  content-visibility: auto;
  font-variation-settings: 1px 800px;
}

/* 1 columna móvil, 2 columnas tablet, 3 columnas escritorio grande */
@media (max-width: 699px){
  .entries__list > * { grid-column: 1 / -1; }
}
@media (min-width: 700px) and (max-width: 1099px){
  .entries__list > * { grid-column: span 6; }
}
@media (min-width: 1100px){
  .entries__list > * { grid-column: span 4; }
}

/* ---------- Tarjeta de entrada (LISTADO) ---------- */
.entry{
  background: #fff;
  border: 1px solid var(--c-borde-soft);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.entry__media{
  position: relative;
  background: var(--c-fondo-alt);
}

.entry__img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: linear-gradient(180deg,#fff 0%,#fafafa 100%);
}

.entry__body{
  padding: clamp(12px, 2.2vw, 16px);
  display: grid;
  gap: .5rem;
}

.entry__title{
  font-weight: 700; font-size: var(--fz-h2); line-height:1.25;
  margin: 0;
}

.entry__meta{
  font-size: var(--fz-meta); color: var(--c-texto-sec);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}

.entry__summary{
  font-size: var(--fz-base); line-height: var(--lead);
  color: var(--c-texto);
}

/* ---------- Píldoras (documentos, etiquetas, tipo) ---------- */
.pills{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem; }
.pill{
  font-size: var(--fz-meta);
  border: 1px solid var(--pill-bd);
  background: var(--pill-bg);
  color: #234;
  padding: .25rem .5rem;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap:.4rem;
  max-width: 100%;
}
.pill--doc::before{ content: "📄"; }
.pill--img::before{ content: "🖼️"; }
.pill--txt::before{ content: "📝"; }

/* ---------- Llamadas a la acción ---------- */
.entry__actions{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.3rem;
}
.entry__actions .btn{ padding:.55rem .8rem; }

/* ---------- Estado vacío ---------- */
.entries__empty{
  text-align: center;
  border: 1px dashed var(--c-borde);
  border-radius: var(--radio);
  padding: clamp(16px, 3vw, 28px);
  color: var(--c-texto-sec);
  background: var(--c-fondo-alt);
}

/* ---------- “Cargar más” + contador ---------- */
.entries__more{
  display:flex; justify-content:center; align-items:center; gap:.5rem;
  margin-top: 1rem;
}
#entries-count{ margin-right:.75rem; font-size:.9rem; color:#444; }

/* ---------- Accesibilidad ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

[aria-busy="true"]{
  opacity: .7;
  pointer-events: none;
}

/* Foco navegable en tarjetas: si haces la tarjeta <a> o role=link */


/* ---------- Modificadores por tipo (opcionales) ---------- */
.entry--document .entry__media{ display:none; }
.entry--image .entry__summary{ margin-top:.25rem; }

/* ==========================================================
   CLAMP EN LISTADO (para que siempre quepa el botón "Ver detalle")
   No afecta al modo detalle.
   ========================================================== */
.entry--clamped{
  max-width: var(--entry-max-w);
  max-height: var(--entry-max-h);
  position: relative;
  overflow: hidden;
}

/* Recorte de texto en listado */
.entry--clamped .entry__summary,
.entry--clamped .entry__content{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* Límites concretos (ajusta si quieres) */
.entry--clamped .entry__summary{
  -webkit-line-clamp: 3;   /* ~3 líneas del resumen */
  line-clamp: 3;           /* estándar para compatibilidad */
  max-height: 4.8em;       /* fallback aproximado */
}
.entry--clamped .entry__content{
  -webkit-line-clamp: 6;   /* ~6 líneas del cuerpo */
  line-clamp: 6;           /* estándar para compatibilidad */
  max-height: 10.8em;
  margin-bottom: .25rem;
}

.entry--clamped .entry__actions{
  position: relative;
  z-index: 1; /* garantiza visibilidad del botón */
  margin-top: .35rem;
}

/* ==========================================================
   MODO DETALLE ANCHO (sin tarjeta)
   - sin borde/sombra, tipografía un poco mayor
   - layout de 2 columnas en escritorio
   ========================================================== */
.entry--detail{
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  grid-column: 1 / -1; /* ocupa todo el ancho del grid padre */
  display: grid;
  gap: clamp(16px, 3vw, 28px);
}

/* Single column en móvil; 2 columnas a partir de 900px */
@media (min-width: 900px){
  .entry--detail{
    grid-template-columns: 1.1fr 1.2fr; /* media | texto */
    align-items: start;
  }
}

.entry--detail .entry__media{
  background: transparent;
}
.entry--detail .entry__img{
  aspect-ratio: auto;      /* sin forzar proporción */
  object-fit: contain;
  background: none;
  border-radius: var(--radio);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.entry--detail .entry__body{
  padding: 0;              /* sin padding de tarjeta */
  gap: .7rem;
}

.entry--detail .entry__title{
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.15;
}

.entry--detail .entry__meta{
  font-size: calc(var(--fz-meta) * 1.05);
}

.entry--detail .entry__summary{
  font-size: calc(var(--fz-base) * 1.02);
}

.entry--detail .entry__content{
  /* sin clamps en detalle */
  display: block;
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}

.entry--detail .entry__actions .btn{
  padding: .7rem 1rem;
}

/* Si tu botón "← Volver" lo estilizas como .btn, hereda estilos existentes */
/* Puedes añadir (opcional): */
.entry-back{
  margin-bottom: .75rem;
}

/* ---------- Ajustes finos responsive ---------- */
@media (max-width: 700px){
  .entry__body{ padding: .9rem; }
  .entry__title{ letter-spacing: .1px; }
}

/* ---------- Respeta usuarios con reducción de movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  .animar{ animation: none !important; opacity:1 !important; transform:none !important; }
}

/* === Fix móvil: que el botón "Ver detalle" nunca se corte === */
@media (max-width: 700px){
  /* No limites la altura total de la tarjeta en móvil */
  .entry--clamped{
    max-height: none;
    overflow: visible;
  }

  /* El recorte lo hace el clamp de texto, no la tarjeta entera */
  .entry--clamped .entry__summary{
    -webkit-line-clamp: 3;      /* ~3 líneas */
    line-clamp: 3;              /* estándar para compatibilidad */
    max-height: 4.8em;
  }
  .entry--clamped .entry__content{
    -webkit-line-clamp: 5;      /* un pelín menos que en desktop */
    line-clamp: 5;              /* estándar para compatibilidad */
    max-height: 9.0em;
  }

  /* Asegura que el bloque de acciones tenga su espacio */
  .entry--clamped .entry__actions{
    margin-top: .5rem;
    position: relative; /* se mantiene por encima del texto clamped */
    z-index: 1;
  }
}

/* Puedes dar un poco más de aire en tablets pequeñas si hace falta */
@media (min-width: 700px) and (max-width: 900px){
  .entries { --entry-max-h: 560px; } /* sube un poco el límite */
}

/* === FIX DESKTOP: que el botón "Ver detalle" no se corte === */
/* Quitamos el tope global en desktop y limitamos solo imagen+texto  */
@media (min-width: 700px){
  /* La tarjeta ya no tiene límite total de alto en listado */
  .entry--clamped{
    max-height: none;
    overflow: visible;
  }

  /* El cuerpo usa grid: 
     título (auto) / meta (auto) / summary (auto) / content (1fr recortable) / acciones (auto) */
  .entry--clamped .entry__body{
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: .55rem;
    min-height: 0; /* permite que 1fr calcule bien */
  }

  /* La imagen no puede crecer indefinidamente */
  .entry--clamped .entry__img{
    aspect-ratio: 16 / 9;
    object-fit: contain;
    max-height: 240px; /* ajusta si quieres más/menos alto */
  }

  /* Clamps de texto en desktop (solo sobre el texto, no la tarjeta) */
  .entry--clamped .entry__summary,
  .entry--clamped .entry__content{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }

  /* Un poco más estrictos en desktop para mantener tarjetas compactas */
  .entry--clamped .entry__summary{
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 3.4em;
  }
  .entry--clamped .entry__content{
    -webkit-line-clamp: 5;
    line-clamp: 5;
    /* 1fr ya empuja el contenido a ocupar el espacio disponible;
       el clamp asegura que no invada la fila de acciones */
  }

  /* Asegura que acciones SIEMPRE quede visible (última fila) */
  .entry--clamped .entry__actions{
    margin-top: .35rem;
    align-self: end;
    position: relative;
    z-index: 1;
  }
}

/* Si te gusta un poco más de aire en desktop XXL */
@media (min-width: 1200px){
  .entry--clamped .entry__img{ max-height: 260px; }
  .entry--clamped .entry__content{
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
}