/* Descubrir (ui/js/descubrir.mjs): los tipos arriba, cada ranking en una fila que se
   desliza de lado (carrusel.css) con carátulas grandes y su puesto, y «Por género» con
   chips y su rejilla. Con los tokens de estilo.css. Va dentro de Buscar (buscar.css), que
   también pinta sus resultados con estas piezas. */

/* ---------------------------------------------------------------- la cabecera */
.descubrir-cab { display: grid; gap: var(--esp-4); margin: var(--esp-2) 0 var(--esp-5); }
.descubrir-cab h1 { font-size: var(--tam-2xl); letter-spacing: -0.035em; line-height: 1.1; }
@media (min-width: 900px) { .descubrir-cab h1 { font-size: var(--tam-3xl); } }
.descubrir-tipos { scrollbar-width: none; }
.descubrir-tipos::-webkit-scrollbar { display: none; }
.descubrir-tipos .segmento { flex: none; }

/* ---------------------------------------------------------------- las filas */
.descubrir-cuerpo { display: grid; gap: var(--esp-8); padding-bottom: var(--esp-8); }
.descubrir-fila { min-width: 0; }
.descubrir-fila-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.descubrir-fila-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--esp-2); min-width: 0; }
.descubrir-fila-titulo h2 { font-size: var(--tam-xl); letter-spacing: -0.02em; line-height: 1.2; }
.descubrir-fuente { font-size: var(--tam-xs); color: var(--texto-3); letter-spacing: 0.02em; }
.descubrir-enlace { flex: none; font-size: var(--tam-s); }

.descubrir-tira {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(142px, 42%); gap: var(--esp-3);
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--lado) * -1); padding: 2px var(--lado) var(--esp-1); scroll-padding: 0 var(--lado);
}
.descubrir-tira::-webkit-scrollbar { display: none; }
@media (min-width: 560px) { .descubrir-tira { grid-auto-columns: 164px; } }
@media (min-width: 900px) { .descubrir-tira { grid-auto-columns: 184px; gap: var(--esp-4); } }

/* ---------------------------------------------------------------- una obra */
.descubrir-obra { display: flex; flex-direction: column; min-width: 0; }
.descubrir-portada {
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border-radius: var(--radio-tarjeta); overflow: hidden;
  background: var(--superficie); transition: transform var(--medio) var(--muelle);
}
@media (hover: hover) { .descubrir-portada:hover { transform: translateY(-2px); } }
.descubrir-portada:active { transform: scale(0.98); }
.descubrir-portada:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.descubrir-puesto {
  position: absolute; left: 8px; top: 8px; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 14px; background: rgb(0 0 0 / 0.66); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.descubrir-titulo {
  margin: var(--esp-2) 0 0; font-family: var(--fuente); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
/* La nota y el año en una línea; el texto ocupa lo que sobra y el botón queda abajo, alineado con los de su fila. */
.descubrir-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--esp-2); flex: 1 0 auto; margin: 4px 0 var(--esp-3); }
.descubrir-meta .puntuacion-tarjeta { margin: 0; }
.descubrir-anio { font-size: var(--tam-s); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.descubrir-obra > .boton, .descubrir-obra > .pastilla { align-self: stretch; justify-content: center; }
.descubrir-obra > .pastilla { height: 32px; }

/* Mientras llega. */
.descubrir-esq { aspect-ratio: 2 / 3; border-radius: var(--radio-tarjeta); }
.descubrir-esq-titulo { width: 180px; height: 22px; margin-bottom: var(--esp-3); }

/* ---------------------------------------------------------------- por género */
.descubrir-chips { display: flex; gap: var(--esp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--lado) * -1); padding: 2px var(--lado) var(--esp-1); }
.descubrir-chips::-webkit-scrollbar { display: none; }
.descubrir-chips .chip { flex: none; }
.descubrir-generos .carrusel { --carrusel-altura: 50%; }
.descubrir-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5) var(--esp-3); margin-top: var(--esp-4); }
@media (min-width: 560px) { .descubrir-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .descubrir-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-4); } }
.descubrir-rejilla .vacio-filtro { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- «Ver más»: el ranking largo */
.descubrir-ver-mas[hidden] { display: none; }
.descubrir-volver {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 8px; margin-left: -8px;
  border-radius: 17px; color: var(--texto-2); font-size: var(--tam-s); text-decoration: none;
}
@media (hover: hover) { .descubrir-volver:hover { background: var(--estado-pulsado); color: var(--texto); } }
.descubrir-volver:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.descubrir-volver .icono { width: 16px; height: 16px; }
.descubrir-cab:has(.descubrir-volver) { gap: var(--esp-1); }
.descubrir-sub { color: var(--texto-2); font-size: var(--tam-s); }
.descubrir-larga { margin-top: 0; }
.descubrir-cargar-mas { justify-self: center; min-width: 180px; }