/* ==========================================================================
   Página de Ediciones (SCOPED a #ediciones)
   ========================================================================== */

/* ---------- Botones base (para esta página y el modal inyectado) ---------- */

/* -------------------- Encabezado -------------------- */
#ediciones .head-edicion{ padding: clamp(36px, 6vw, 64px) 0 12px; }
#ediciones .head-edicion h1{ margin:0 0 6px; }
#ediciones .muted{ color: var(--muted); }

/* -------------------- Controles -------------------- */
#ediciones .controles{
  display:grid; grid-template-columns: 1fr 240px; gap:12px; padding:18px 0;
}

/* Evitar que <select> grande empuje layout en Android */
#ediciones .ctrl{ display:grid; gap:6px; position: relative; }
#ediciones .ctrl input,
#ediciones .ctrl select{
  background:#fff;
  border:1px solid var(--stroke);
  color:var(--ink);
  border-radius:12px;
  padding:12px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile: apilar buscador y ordenar */
@media (max-width: 640px){
  #ediciones .controles{ grid-template-columns: 1fr; }
}

/* Focus accesibles */
#ediciones .ctrl input:focus-visible,
#ediciones .ctrl select:focus-visible{
  outline:2px solid var(--blue-soft); outline-offset:2px;
}

/* -------------------- Sugerencias (autocompletar) -------------------- */
#ediciones .suggestions{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--stroke); border-radius:10px;
  box-shadow: var(--shadow); list-style:none; margin:0; padding:6px 0;
  max-height:280px; overflow:auto; z-index:30; display:none;
}
#ediciones .suggestions.show{ display:block; }
#ediciones .suggestions li{ padding:8px 12px; cursor:pointer; }
#ediciones .suggestions li[aria-selected="true"],
#ediciones .suggestions li:hover{ background:var(--sand); }
#ediciones .suggestions li:focus-visible{
  outline:2px solid var(--blue-soft); outline-offset:-2px;
}

/* -------------------- Meta bar: contador + chips -------------------- */
#ediciones .meta-bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:8px 0 10px;
}
#ediciones #resultado-count{ color:var(--muted); }

/* Chips de año */
#ediciones .chips{ display:flex; gap:8px; flex-wrap:wrap; }
#ediciones .chips .chip{
  border:1px solid var(--stroke); background:#fff; color:var(--ink);
  padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:600;
}
#ediciones .chips .chip.active,
#ediciones .chips .chip[aria-pressed="true"]{
  background:var(--green-leaf); color:#fff; border-color:var(--green-leaf);
}
#ediciones .chips .chip:focus-visible{ outline:2px solid var(--blue-soft); outline-offset:2px; }

/* -------------------- Grid de tarjetas -------------------- */
#ediciones .grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:18px; padding:18px 0 48px;
  align-items:stretch; width:100%;
}
@media (max-width:900px){
  #ediciones .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* -------------------- Tarjeta de edición -------------------- */
#ediciones .card-edicion{
  background:#fff; border:1px solid var(--stroke); border-radius:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:box-shadow .15s, transform .12s;
  cursor: pointer;
}
#ediciones .card-edicion:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Imagen */
#ediciones .card-edicion .media{
  display:block; width:100%; height:140px;
  object-fit:contain; background:#f7f7f7;
}

/* Cuerpo */
#ediciones .card-edicion .body{
  padding:14px; display:flex; flex-direction:column; gap:6px; flex:1;
}
#ediciones .card-edicion h3{
  margin:0 0 4px; font-size:1.05rem; font-weight:700; color:var(--ink); line-height:1.18;
}
#ediciones .card-edicion .fecha{ color: var(--muted); font-size:.9rem; }
#ediciones .card-edicion .desc{
  color: var(--muted); line-height:1.3; min-height:32px; max-height:2.6em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* CTA (opcional, oculto por defecto) */
#ediciones .card-edicion .btn-ver{
  display:none;
  margin-top:auto; align-self:flex-end;
  background: var(--green-leaf); color:#fff; border:none; border-radius:999px;
  padding:.5em 1.1em; font-weight:700; font-size:.97em; cursor:pointer;
  box-shadow:0 2px 8px rgba(79,164,108,.25);
}
#ediciones .card-edicion .btn-ver:hover{ background: var(--mustard); color:#111; }

#ediciones.show-cta .card-edicion .btn-ver{
  display:inline-flex; align-items:center; font-size:.92em; padding:.45em .9em;
}

/* -------------------- Estado vacío -------------------- */
#ediciones .empty{
  background:#fff; border:1px solid var(--stroke);
  border-radius:12px; padding:26px; text-align:center; color:var(--muted);
  grid-column: 1 / -1;
}
#ediciones .empty h3{ margin: 0 0 6px; color:var(--ink); }
#ediciones .empty .actions{
  margin-top:12px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
#ediciones .empty .btn{ padding:.55rem .9rem; }

/* -------------------- Modal de ediciones -------------------- */
#ediciones dialog.modal{ border:none; padding:0; background:transparent; }
#ediciones dialog.modal::backdrop{ background: rgba(0,0,0,.6); }
#ediciones .modal-card{
  width:min(900px,96%); margin:auto; border:none; border-radius:16px;
  background:#fff; color:var(--ink); overflow:hidden; position:relative;
}
#ediciones .modal-close{
  position:absolute; right:10px; top:10px; background:transparent;
  border:none; font-size:18px; cursor:pointer;
}
#ediciones .modal-body{ display:grid; grid-template-columns:.9fr 1.1fr; }
#ediciones .modal-media{ background:#f7f7f7; display:grid; place-items:center; }
#ediciones .modal-media img{ width:100%; height:100%; object-fit:cover; }
#ediciones .modal-content{ padding:18px; }
#ediciones .contactos{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

@media (max-width:720px){
  #ediciones .modal-body{ grid-template-columns:1fr; }
}

/* -------------------- Skeletons -------------------- */
#ediciones .skeleton{
  height: 250px; border-radius:16px; border:1px solid var(--stroke);
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: ed-shimmer 1.2s infinite linear;
}
@keyframes ed-shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* Utilidad a11y */
#ediciones .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Airbag global por si algún navegador aún crea desbordes raros */
html, body{ overflow-x: hidden; }

/* Botón Mostrar más deshabilitado */
#ediciones #btn-ver-mas[disabled]{ opacity:.55; cursor:not-allowed; }