/* Tu Destino — página de colección de un contenedor ("Ver todos"), con
   sidebar de filtros a la izquierda en escritorio y panel deslizable en
   móvil. */

.collection-main { padding-top: 32px; padding-bottom: 70px; }

.collection-header { margin-bottom: 28px; max-width: 720px; }
.collection-breadcrumb { font-size: .82rem; color: var(--texto-suave); margin-bottom: 10px; }
.collection-breadcrumb a { color: var(--texto-suave); text-decoration: none; }
.collection-breadcrumb a:hover { color: var(--magenta); }
.collection-header h1 {
  margin: 0 0 6px; font-family: var(--font-serif); font-weight: 700; color: var(--navy); font-size: 2rem;
}
.collection-header p { margin: 0; color: var(--texto-suave); }

.collection-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

.filters-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--navy);
  cursor: pointer;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(11,29,51,.08);
}
.filters-count-badge {
  background: var(--magenta); color: #fff; font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}
.filters-count-badge.hidden { display: none; }

/* Panel de filtros: mismo lenguaje "liquid glass" oscuro del header/footer
   (franja navy con brillos degradados magenta/naranja) en vez del vidrio
   claro que usan otros paneles del sitio — acá funciona mejor porque el
   panel vive solo, sin una franja navy detrás que le dé contraste. */
.collection-filters {
  background:
    radial-gradient(320px 200px at 10% 0%, rgba(252,20,115,.32), transparent 60%),
    radial-gradient(300px 220px at 100% 100%, rgba(255,93,0,.26), transparent 65%),
    var(--navy);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  padding: 22px 20px;
  position: sticky;
  top: 16px;
  z-index: 5;
  color: rgba(255,255,255,.85);
  box-shadow: 0 16px 38px rgba(11,29,51,.24), inset 0 1px 0 rgba(255,255,255,.12);
}
.collection-filters-head { display: none; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.collection-filters-head h2 { margin: 0; font-family: var(--font-serif); color: #fff; font-size: 1.2rem; }
.filters-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: none; box-shadow: 0 4px 10px rgba(11,29,51,.14);
  font-size: 1.2rem; cursor: pointer; color: #999; line-height: 1;
}
.filters-close-btn:hover { color: var(--magenta); }

/* Cuadro de búsqueda dentro del panel — antes buscar.html no tenía forma
   de reescribir el destino salvo volviendo al header; ahora reutiliza el
   mismo patrón visual del buscador del header (píldora de vidrio + botón
   circular en degradé). */
.filter-search-form {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
}
.filter-search-form input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: #fff; font-size: .88rem; font-family: inherit;
}
.filter-search-form input::placeholder { color: rgba(255,255,255,.45); }
.filter-search-form button {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: linear-gradient(135deg, var(--magenta), var(--naranja)); color: #fff;
}

.filter-group { margin-bottom: 22px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group h3 {
  margin: 0 0 12px; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: rgba(255,255,255,.6);
}
.filter-check {
  display: flex; align-items: center; gap: 8px; font-size: .88rem; color: rgba(255,255,255,.88);
  margin-bottom: 10px; cursor: pointer;
}
.filter-check input { cursor: pointer; accent-color: var(--magenta); width: 17px; height: 17px; flex-shrink: 0; }
.filter-check small { color: rgba(255,255,255,.5); }
.filter-empty { font-size: .82rem; color: rgba(255,255,255,.5); margin: 0; }

/* Grupos colapsables (continente para País, país para Ciudad/destino) —
   antes las listas de País y Ciudad/destino eran un solo listado plano
   larguísimo. Cada <details> arranca cerrado salvo que tenga un checkbox
   ya marcado adentro. */
.filter-group-collapse { border-bottom: 1px solid rgba(255,255,255,.14); }
.filter-group-collapse:last-child { border-bottom: none; }
.filter-group-collapse summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 0; cursor: pointer; font-size: .86rem; font-weight: 600; color: rgba(255,255,255,.92);
  list-style: none;
}
.filter-group-collapse summary::-webkit-details-marker { display: none; }
.filter-group-collapse summary::before {
  content: '›'; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.12); color: #ff6fa8; font-size: 1rem; line-height: 1;
  transition: transform .15s ease, background .15s ease;
}
.filter-group-collapse[open] summary::before { transform: rotate(90deg); background: rgba(255,255,255,.22); }
.filter-group-collapse summary small { color: rgba(255,255,255,.5); font-weight: 500; margin-left: auto; }
.filter-group-collapse-body { padding: 4px 0 12px 18px; }
.filter-group-collapse-body .filter-check:last-child { margin-bottom: 0; }

.filter-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-price-row label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: rgba(255,255,255,.55); }
.filter-price-row input {
  padding: 9px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; font-size: .88rem; font-family: inherit;
  background: rgba(255,255,255,.1); color: #fff; color-scheme: dark;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.filter-price-row input::placeholder { color: rgba(255,255,255,.4); }
.filter-price-row input:focus {
  outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(252,20,115,.28);
}
.filter-hint { font-size: .74rem; color: rgba(255,255,255,.5); margin: 8px 0 0; }

.filters-reset-btn {
  width: 100%; margin-top: 22px; padding: 11px; border-radius: 999px; border: 1.5px solid var(--magenta);
  background: rgba(255,255,255,.06); color: #ff6fa8; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.filters-reset-btn:hover { background: var(--magenta); color: #fff; }

.collection-filters-backdrop { display: none; }

.collection-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.collection-count { font-size: .88rem; color: var(--texto-suave); }
.collection-sort { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--texto-suave); }
.collection-sort select {
  padding: 7px 9px; border: 1px solid var(--borde); border-radius: 8px; font-size: .85rem; font-family: inherit;
  background: rgba(255,255,255,.8); cursor: pointer; transition: border-color .15s ease;
}
.collection-sort select:hover, .collection-sort select:focus { border-color: var(--magenta); outline: none; }

.collection-toolbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Toggle grilla/lista — misma tarjeta, solo cambia el layout vía la clase
   .view-list en .package-grid (ver style.css). */
.view-toggle {
  display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 9px; overflow: hidden;
  background: #fff;
}
.view-toggle button {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; background: transparent; color: var(--texto-suave);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.view-toggle button svg { width: 16px; height: 16px; }
.view-toggle button:hover { color: var(--navy); }
.view-toggle button.active {
  background: linear-gradient(90deg, var(--magenta) 0%, var(--naranja) 100%); color: #fff;
}
.view-toggle button + button { border-left: 1px solid var(--borde); }

/* Paginación numerada de resultados (buscar.js / coleccion.js la inyectan
   después de la grilla) — antes la grilla mostraba todos los resultados
   de una sola vez, sin límite. */
.collection-pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 32px 0 8px; flex-wrap: wrap;
}
.collection-pagination button {
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--borde); border-radius: 8px;
  background: #fff; color: var(--texto); font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.collection-pagination button:hover:not(:disabled) { border-color: var(--magenta); color: var(--magenta); }
.collection-pagination button.active {
  background: linear-gradient(90deg, var(--magenta) 0%, var(--naranja) 100%);
  border-color: transparent; color: #fff;
}
.collection-pagination button:disabled { opacity: .4; cursor: default; }
.collection-pagination-ellipsis { color: var(--texto-suave); padding: 0 2px; }

@media (max-width: 900px) {
  .collection-layout { grid-template-columns: 1fr; }
  .filters-toggle-btn { display: inline-flex; }

  .collection-filters {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw);
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 200;
    /* El fondo navy con degradé ya es opaco de por sí (no es vidrio
       translúcido sobre la página), así que no hace falta subir opacidad
       para que se lea bien en el drawer a pantalla completa — solo suma
       una sombra lateral para que se sienta flotando, no un corte plano. */
    box-shadow: -14px 0 44px rgba(11,29,51,.4);
  }
  .collection-filters.open { transform: translateX(0); }
  .collection-filters-head { display: flex; }

  .collection-filters-backdrop {
    display: block;
    position: fixed; inset: 0; background: rgba(11,29,51,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
    z-index: 190;
  }
  .collection-filters-backdrop.open { opacity: 1; pointer-events: auto; }
}