/* Temporada (ui/js/temporada.mjs) y las recomendaciones (ui/js/recomendaciones.mjs):
   la rejilla de la temporada, el calendario, la fila de «Similares a…» y la hoja
   de una obra que aún no está en tu lista. Con los tokens de estilo.css. */

/* En la navegación, Temporada es parte de Descubrir (descubrir.css). «Sin anime ni manga»
   (ui/js/estado.mjs): a quien entra por su dirección, el aviso. */
.temporada-sin-anime .boton { margin-top: var(--esp-3); }

/* ---------------------------------------------------------------- la cabecera */
.temporada-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); margin: var(--esp-2) 0 var(--esp-2); }
.temporada-titulo h1 { font-size: var(--tam-2xl); letter-spacing: -0.035em; line-height: 1.1; }
.temporada-selector { display: flex; align-items: center; gap: var(--esp-2); }
.temporada-nombre { font-size: var(--tam-xl); letter-spacing: -0.02em; min-width: 9ch; text-align: center; }
.temporada-selector .boton-icono:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 900px) {
  .temporada-cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .temporada-titulo { grid-column: 1 / -1; }
  .temporada-titulo h1 { font-size: var(--tam-3xl); }
  .temporada-modos { justify-self: end; }
}

/* Los filtros: «En mi lista», los géneros y el orden. */
.temporada-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: var(--esp-3) 0; }
.temporada-en-lista { display: inline-flex; align-items: center; gap: 6px; }
.temporada-en-lista small { font-size: var(--tam-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.temporada-en-lista.activo small { color: var(--acento); }
.temporada-orden { margin-left: auto; flex: none; }
.temporada-orden[hidden] { display: none; }

/* ---------------------------------------------------------------- la rejilla */
.temporada-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-3); margin-top: var(--esp-3); }
@media (min-width: 560px) { .temporada-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .temporada-rejilla { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--esp-8) var(--esp-5); } }

.temporada-obra { display: flex; flex-direction: column; min-width: 0; }
.temporada-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) { .temporada-portada:hover { transform: translateY(-2px); } }
.temporada-portada:active { transform: scale(0.98); }
.temporada-portada:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.temporada-portada .temporada-tuya { top: auto; bottom: 6px; }
.temporada-obra.tuya .temporada-portada { outline: 2px solid var(--acento); outline-offset: 2px; }
.temporada-nombre-obra {
  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;
}
.temporada-datos { margin-top: 2px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
/* El sitio de una nota que aún puede llegar (con la carátula): ocupa lo mismo, sin verse. */
.temporada-nota-hueco { visibility: hidden; }
.temporada-generos { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El texto ocupa lo que sobra: el botón queda abajo, alineado con los de su fila, y siempre con el mismo aire encima. */
.temporada-texto { flex: 1 0 auto; min-width: 0; padding-bottom: var(--esp-3); }
.temporada-cuando { margin: var(--esp-1) 0 0; font-size: var(--tam-s); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.temporada-hora { white-space: nowrap; }
.temporada-estreno { margin-top: 2px; font-variant-numeric: tabular-nums; }
.temporada-obra > .boton, .temporada-obra > .pastilla { align-self: stretch; }

/* «Podría interesarte», arriba de la rejilla. */
.temporada-interesar { margin: var(--esp-5) 0 var(--esp-6); }

/* ---------------------------------------------------------------- una fila que se desliza de lado */
.similares-fila {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(136px, 40%); gap: var(--esp-3);
  overflow-x: auto;
  margin: 0 calc(var(--lado) * -1); padding: 2px var(--lado) var(--esp-1); scroll-padding: 0 var(--lado);
}
@media (min-width: 560px) { .similares-fila { grid-auto-columns: 152px; } }
@media (min-width: 900px) { .similares-fila { grid-auto-columns: 168px; gap: var(--esp-4); } }
.ficha .similares-fila { margin: 0; padding-left: 0; padding-right: 0; scroll-padding: 0; }

/* Una carátula de la fuente mientras llega (recomendaciones.mjs, cartelObra). */
.cartel .cartel-remota { position: absolute; inset: 0; opacity: 0; }

/* La cabecera de un bloque de recomendaciones: el título y, a la derecha, un enlace. */
.recomendaciones-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }

/* ---------------------------------------------------------------- la hoja de una obra */
.obra-razones { margin-top: var(--esp-4); }

/* ---------------------------------------------------------------- el calendario */
.calendario { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); margin-top: var(--esp-4); }
@media (min-width: 900px) { .calendario { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--esp-2); align-items: start; } }
.calendario-dia { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calendario-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-2); margin-bottom: var(--esp-2); font-size: var(--tam-l); letter-spacing: -0.015em; }
.calendario-dia.hoy .calendario-cabeza { color: var(--acento); }
.calendario-nada { padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.calendario-obra {
  display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center; width: 100%; padding: var(--esp-2) var(--esp-3);
  background: var(--superficie); text-align: left; color: var(--texto); transition: background var(--rapido);
}
.calendario-obra:hover { background: color-mix(in srgb, var(--superficie) 80%, var(--elevada)); }
.calendario-cabeza + .calendario-obra { border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; }
.calendario-obra:last-child { border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta); }
.calendario-cabeza + .calendario-obra:last-child { border-radius: var(--radio-tarjeta); }
.calendario-hora { font-size: var(--tam-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.calendario-cartel { display: block; width: 40px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; }
.calendario-cartel .cartel-titulo { display: none; }
.calendario-texto { display: flex; flex-direction: column; min-width: 0; }
.calendario-titulo { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.calendario-pie { margin-top: var(--esp-6); }
/* En la columna estrecha del escritorio, la hora encima y la carátula a un lado. */
@media (min-width: 900px) {
  .calendario-cabeza { flex-direction: column; gap: 0; font-size: var(--tam-m); }
  .calendario-obra { grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px var(--esp-2); padding: var(--esp-2); }
  .calendario-hora { grid-column: 1 / -1; }
  .calendario-cartel { width: 32px; }
  .calendario-titulo { font-size: var(--tam-s); }
  .calendario-obra .pastilla { grid-column: 1 / -1; justify-self: start; }
}