/* ═══════════════════════════════════════════
   BROWSE — page styles (Nuevo_theme_acetoon/browse.html).
   Solo lo propio de esta página: el resto (tokens, reset,
   topnav, .card, .skel, .btn-primary, footer, bnav) vive
   en home.css, que el layout carga antes que este archivo.
   Únicamente colores var(--token).
   ═══════════════════════════════════════════ */
:root {
  --scrim: rgba(var(--veil), .96);
  /* same veil theme uses on sticky bars */
  --filter-h: 46px;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

main {
  margin-top: var(--nav-h);
}

/* ── Page header ── */
.bl-head {
  padding: 26px 18px 14px;
}

.bl-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.bl-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px;
  line-height: .95;
  letter-spacing: 2px;
  font-weight: 400;
}

.bl-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--grey);
  letter-spacing: .3px;
  will-change: transform;
}

.bl-count strong {
  color: var(--green);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  display: inline-block;
  min-width: 2ch;
}

/* signature: counter pops when the result set changes (transform only) */
@media (prefers-reduced-motion: no-preference) {
  .bl-count.pop strong {
    animation: countpop .34s cubic-bezier(.34, 1.56, .64, 1);
  }

  @keyframes countpop {
    0% { transform: scale(1) }
    45% { transform: scale(1.28) }
    100% { transform: scale(1) }
  }
}

/* ── Big search ── */
.bl-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0 15px;
  height: 50px;
  transition: border-color .2s, box-shadow .2s;
}

.bl-search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-lo);
}

.bl-search svg {
  width: 18px;
  height: 18px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  flex-shrink: 0;
  transition: stroke .2s;
}

.bl-search:focus-within svg {
  stroke: var(--green);
}

.bl-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  min-width: 0;
}

.bl-search input::placeholder {
  color: var(--muted);
}

/* botón de envío del formulario (la búsqueda es server-side) */
.bl-search-go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--grey);
  transition: color .2s, background .2s;
}

.bl-search-go svg {
  stroke: currentColor;
}

.bl-search-go:hover {
  color: var(--green);
  background: var(--bg3);
}

/* ── Sticky filter bar (this IS the genre-tabs strip of this page) ── */
.fbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 200;
  background: var(--scrim);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 8px 0 10px;
}

.frow {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 18px;
  scrollbar-width: none;
}

.frow::-webkit-scrollbar {
  display: none;
}

.flabel {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 46px;
}

/* chip = .gtab voice, pill body, neon glow when active (signature) */
.fchip {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--grey);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 8px 14px;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}

.fchip::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  box-shadow: 0 0 14px var(--green-md), inset 0 0 6px var(--green-lo);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

.fchip:hover {
  color: var(--white);
  border-color: var(--muted);
}

.fchip[aria-current="true"],
.fchip[aria-pressed="true"] {
  color: var(--green);
  border-color: var(--green);
  background: var(--green-lo);
}

/* chips de género activos: brillan con SU color, no con el verde de marca */
.fchip.gc[aria-current="true"],
.fchip.gc[aria-pressed="true"] {
  color: hsl(var(--gh), 75%, 66%);
  border-color: hsl(var(--gh), 75%, 55%);
  background: hsla(var(--gh), 75%, 50%, .16);
}

.fchip.gc[aria-current="true"]::after,
.fchip.gc[aria-pressed="true"]::after {
  box-shadow: 0 0 14px hsla(var(--gh), 75%, 55%, .4), inset 0 0 6px hsla(var(--gh), 75%, 50%, .18);
}

html[data-theme="light"] .fchip.gc[aria-current="true"],
html[data-theme="light"] .fchip.gc[aria-pressed="true"] {
  color: hsl(var(--gh), 65%, 28%);
  border-color: hsl(var(--gh), 55%, 42%);
  background: hsla(var(--gh), 65%, 45%, .14);
}

.fchip[aria-current="true"]::after,
.fchip[aria-pressed="true"]::after {
  opacity: 1;
}

@media (pointer: coarse) {
  .fchip {
    min-height: 44px;
  }
}

/* segmented group separator */
.fsep {
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 4px;
}

/* ── Custom sort select ── */
.fsort {
  position: relative;
  flex-shrink: 0;
}

.fsort-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  white-space: nowrap;
  transition: border-color .2s;
}

.fsort-btn:hover {
  border-color: var(--muted);
}

.fsort-btn .fsort-k {
  color: var(--muted);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.fsort-btn svg {
  width: 12px;
  height: 12px;
  stroke: var(--green);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.fsort.open .fsort-btn svg {
  transform: rotate(180deg);
}

@media (pointer: coarse) {
  .fsort-btn {
    min-height: 44px;
  }
}

.fsort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 5px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 250;
}

.fsort.open .fsort-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.fsort-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--grey);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 9px 11px;
  transition: background .15s, color .15s;
}

.fsort-opt:hover {
  background: var(--bg4);
  color: var(--white);
}

.fsort-opt[aria-selected="true"] {
  color: var(--green);
}

.fsort-opt svg {
  width: 12px;
  height: 12px;
  stroke: var(--green);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.fsort-opt[aria-selected="true"] svg {
  opacity: 1;
}

/* ── Clear all ── */
.fclear {
  display: none;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: none;
  border: 1px dashed var(--muted);
  border-radius: 20px;
  color: var(--grey);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 13px;
  transition: color .2s, border-color .2s;
}

.fclear.show {
  display: inline-flex;
}

.fclear:hover {
  color: var(--white);
  border-color: var(--grey);
}

.fclear svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

@media (pointer: coarse) {
  .fclear {
    min-height: 44px;
  }
}

/* ── Grid ── */
.bl-grid {
  display: grid;
  /* minmax(0,1fr): sin el 0 una imagen con ancho intrínseco grande
     agranda su columna y rompe el grid (1fr = minmax(auto,1fr)) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
  padding: 20px 18px 8px;
}

.bl-grid .card {
  display: block;
  width: 100%;
  min-width: 0;
}

.card-img img {
  background: var(--bg3);
}

/* focus ring on whole-card link */
a.card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* ── Empty state ── */
.bl-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 24px 70px;
}

.bl-empty.show {
  display: flex;
}

.bl-empty-ico {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.bl-empty-ico svg {
  width: 34px;
  height: 34px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bl-empty-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

.bl-empty-p {
  font-size: 12px;
  color: var(--grey);
  line-height: 1.7;
  max-width: 300px;
  margin-bottom: 20px;
}

.bl-empty .btn-primary {
  min-height: 44px;
}

/* ── Responsive ── */
@media (min-width:640px) {
  .bl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 12px;
  }
}

@media (min-width:900px) {
  .bl-head {
    padding: 34px 48px 16px;
  }

  .bl-h1 {
    font-size: 64px;
  }

  .bl-search {
    max-width: 560px;
  }

  .frow {
    padding: 4px 48px;
  }

  .bl-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 24px 48px 8px;
    gap: 22px 14px;
  }

  .bl-pager {
    padding: 30px 48px 8px;
  }
}

@media (min-width:1280px) {
  .bl-head {
    padding: 38px 56px 16px;
  }

  .frow {
    padding: 4px 56px;
  }

  .bl-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 26px 56px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .fsort-menu,
  .fchip::after,
  .card-img img {
    transition: none;
  }
}