/* wlst · las listas (ui/js/listas.mjs, lista.mjs y listas-destacadas.mjs).
 *
 * Todo sale de las variables del tema:
 * capas --fondo < --superficie < --elevada, el acento único, los espacios
 * --esp-*, los radios y los tamaños --tam-*. Lo visual son las portadas: un
 * mosaico de carátulas como en Spotify, la imagen subida o un color liso.
 * Primero el móvil; desde 900 px, el escritorio. */

:root {
  --l-superficie: var(--superficie);
  --l-elevada: var(--elevada);
  --l-hover: var(--estado-hover);
  --l-borde: var(--borde);
  --l-radio-tarjeta: var(--radio-tarjeta);
  --l-radio-caratula: var(--radio);
  --l-radio-pastilla: var(--radio-pastilla);
}

/* ---------------------------------------------------------------- la portada */

.portada-lista {
  position: relative; display: grid; aspect-ratio: 1; width: 100%; overflow: hidden;
  border-radius: var(--l-radio-caratula); isolation: isolate;
}
.portada-lista:not(.lisa) { background: var(--l-superficie); }
.portada-lista img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; }
.portada-lista .portada-hueco { display: block; width: 100%; height: 100%; }
/* Como Spotify: 2×2 con cuatro; con tres, una grande y dos pequeñas; con dos, mitad y mitad; con una, entera. */
.portada-lista.mosaico.n4 { grid-template: 1fr 1fr / 1fr 1fr; }
.portada-lista.mosaico.n3 { grid-template: 1fr 1fr / 1fr 1fr; }
.portada-lista.mosaico.n3 > :first-child { grid-row: 1 / span 2; }
.portada-lista.mosaico.n2 { grid-template: 1fr / 1fr 1fr; }
.portada-lista.mosaico.n1 img { object-position: center 22%; }
/* Las carátulas son verticales: en una casilla cuadrada se ve la parte de arriba, donde suele estar el título. */
.portada-lista.mosaico.n4 img, .portada-lista.mosaico.n3 > :not(:first-child) { object-position: center 30%; }
/* La subida, con su recorte. */
.portada-lista.subida .recortada { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Sin carátulas: el color liso de la lista (.relleno-color) y su inicial. */
.portada-lista.lisa { place-items: center; }
.portada-lista-inicial {
  font-family: var(--fuente-titulos); font-weight: 600; font-size: clamp(40px, 34cqi, 96px); line-height: 1; letter-spacing: -0.05em;
  color: var(--texto); user-select: none;
}
.portada-lista { container-type: inline-size; }
.portada-lista.mini { width: 26px; height: 26px; flex: none; border-radius: 5px; }
.portada-lista.mini .portada-lista-inicial { font-size: 13px; letter-spacing: 0; }
/* «Likes»: su corazón, en una pastilla sobre el mosaico o en grande sobre el color liso. */
.portada-lista-corazon {
  position: absolute; right: 7%; bottom: 7%; z-index: 1; display: grid; place-items: center; width: max(20px, 22%); aspect-ratio: 1;
  border-radius: 50%; background: var(--corazon); color: #fff;
}
.portada-lista-corazon .icono { width: 58%; height: 58%; }
.portada-lista-inicial .icono { display: block; width: 0.9em; height: 0.9em; }
/* La de color: liso o degradado en diagonal (--portada-1 y -2, con setProperty), y la
   inicial o el icono en el color que más contraste (--portada-texto). */
.portada-lista.color { place-items: center; background: linear-gradient(135deg, var(--portada-1), var(--portada-2)); }
.portada-lista.color .portada-lista-inicial { color: var(--portada-texto); }
.portada-lista.color .portada-lista-inicial .icono { width: 0.8em; height: 0.8em; }
/* La automática en blanco y negro, o teñida con el acento del tema (el color de encima
   tiñe las carátulas ya grises sin tapar su dibujo). */
.portada-lista.filtro-gris img, .portada-lista.filtro-tinte img { filter: grayscale(1) contrast(1.05); }
.portada-lista.filtro-tinte::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--acento); mix-blend-mode: color;
}
.portada-lista.hueco { place-items: center; background: transparent; box-shadow: inset 0 0 0 1.5px var(--l-borde); color: var(--texto-3); }
.portada-lista.hueco .icono { width: 34%; height: 34%; }

/* ---------------------------------------------------------------- la pestaña: tus listas */

.listas-vista { padding-bottom: var(--esp-10); }
.listas-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); margin: var(--esp-2) 0 var(--esp-6); }
.listas-titulo { margin: 0; font-size: var(--tam-3xl); letter-spacing: -0.04em; line-height: 1.05; }
.listas-cabeza-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* Las pestañas por tipo (lista.mjs, pestanasTipo): en la biblioteca y en cada lista, con su cuenta. */
.pestanas-tipo .chip { display: inline-flex; align-items: center; gap: 6px; flex: none; border-radius: var(--l-radio-pastilla); }
.pestanas-tipo .chip small { color: var(--texto-3); font-size: var(--tam-xs); font-variant-numeric: tabular-nums; }
.pestanas-tipo .chip.activo small { color: inherit; }
.pestanas-tipo .chip.sin-nada:not(.activo) { color: var(--texto-3); }
.listas-tipos .pestanas-tipo { margin-top: 0; margin-bottom: var(--esp-4); }

/* La base: Watchlist, Viendo y Visto, en fila (en el móvil, la portada encima del nombre). */
.listas-base { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); margin-bottom: var(--esp-8); }
@media (min-width: 900px) { .listas-base { gap: var(--esp-3); } }
@media (max-width: 559px) {
  .lista-base { flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
  .portada-lista.base { width: 100%; }
}
.lista-base {
  display: flex; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-2); border-radius: var(--l-radio-tarjeta);
  background: var(--l-superficie); color: inherit; text-decoration: none; transition: background 180ms ease;
  animation: entra 520ms var(--muelle) both; animation-delay: calc(var(--i, 0) * 30ms);
}
.listas-base.quieta .lista-base { animation: none; }
.lista-base:hover { background: var(--l-hover); }
.lista-base:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.lista-base:active { transform: scale(0.985); }
.portada-lista.base { width: 52px; flex: none; border-radius: 8px; }
.portada-lista.base .portada-lista-inicial { font-size: 22px; letter-spacing: 0; }
.lista-base-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-base-nombre { font-size: var(--tam-m); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .portada-lista.base { width: 64px; } }

/* Nuevos episodios: debajo de la base, solo si ha salido algo; una fila por título. */
.listas-nuevos { margin-bottom: var(--esp-8); }
.nuevos-lista { display: grid; gap: var(--esp-2); }
@media (min-width: 900px) { .nuevos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); } }
.nuevo-episodio { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-2); border-radius: var(--l-radio-tarjeta); background: var(--l-superficie); }
.nuevo-episodio-abrir { display: flex; align-items: center; gap: var(--esp-3); flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nuevo-episodio-abrir:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.nuevo-episodio-cartel { display: block; width: 44px; flex: none; aspect-ratio: 2 / 3; border-radius: var(--radio); overflow: hidden; }
.nuevo-episodio-cartel .cartel-titulo { font-size: 8px; }
.nuevo-episodio-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nuevo-episodio-titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nuevo-episodio-que { color: var(--acento); font-size: var(--tam-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nuevo-episodio-texto .sub { font-size: var(--tam-xs); }
.nuevo-episodio-botones { display: flex; gap: var(--esp-2); flex: none; }

.listas-seccion-titulo { margin: 0 0 var(--esp-3); font-size: var(--tam-xl); letter-spacing: -0.02em; }

.listas-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); margin: 0 calc(-1 * var(--esp-2)); }
@media (min-width: 560px) { .listas-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .listas-titulo { font-size: var(--tam-4xl); }
  .listas-rejilla { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--esp-3); }
}

.lista-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; padding: var(--esp-2);
  border-radius: var(--l-radio-tarjeta); cursor: pointer; color: inherit; text-align: left; text-decoration: none; outline: none;
  transition: background 180ms ease; animation: entra 520ms var(--muelle) both; animation-delay: calc(var(--i, 0) * 30ms);
}
.listas-rejilla.quieta .lista-tarjeta { animation: none; }
.lista-tarjeta:hover, .lista-tarjeta:focus-visible { background: var(--l-hover); }
.lista-tarjeta:focus-visible { box-shadow: 0 0 0 2px var(--acento); }
.lista-tarjeta:active { transform: scale(0.985); }
.lista-tarjeta-pie { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px 2px; }
.lista-tarjeta-nombre { font-size: var(--tam-m); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-tarjeta-meta { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--texto-3); font-size: var(--tam-s); font-variant-numeric: tabular-nums; }
.lista-tarjeta-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-tarjeta-meta .icono { width: 14px; height: 14px; flex: none; }
.lista-tarjeta-meta .lista-tarjeta-corazon { color: var(--corazon); }
.lista-tarjeta.nueva { background: none; border: 0; font: inherit; }
.lista-tarjeta.nueva:hover .portada-lista.hueco { color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--texto-3); }

/* Las listas que sigues: debajo de las tuyas, con su dueño en pequeño. */
.listas-seguidas { margin-top: var(--esp-8); }
.lista-tarjeta-meta .avatar.mini { width: 18px; height: 18px; flex: none; }
.lista-tarjeta-meta .avatar.mini .inicial { font-size: 9px; }
/* En el dock, un respiro entre la base (las cuatro primeras, tras el título) y lo demás. */
.dock-listas > .dock-lista:nth-child(5) { margin-bottom: var(--esp-2); }
/* En el dock, la que sigues es un botón (abre su hoja) y «Ver todas», un enlace sin portada. */
button.dock-lista { background: none; border: 0; font: inherit; text-align: start; cursor: pointer; }
.dock-listas-todas { color: var(--texto-3); font-size: var(--tam-s); }
/* En la hoja de una lista ajena, «de» va sin negrita. */
.lista-quien-de { font-weight: 400; color: var(--texto-3); }

/* ---------------------------------------------------------------- el mosaico del perfil */

/* Las mismas columnas en el móvil y en el ordenador (--columnas, 3 o 4, con setProperty):
   así unas portadas hechas con los trozos de una imagen encajan en los dos. */
.listas-mosaico { display: grid; grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr)); gap: var(--esp-4) var(--esp-2); width: 100%; }
/* Las portadas animadas, sin pintar hasta que van a la vez (listas-destacadas.mjs, ui/js/gif-sincro.mjs). */
.listas-mosaico.animadas-esperando .portada-lista-img img { visibility: hidden; }
.lista-mosaico-pieza {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; border-radius: var(--l-radio-caratula);
  color: inherit; text-decoration: none; text-align: left;
}
.lista-mosaico-pieza:hover .portada-lista { filter: brightness(1.08); }
.lista-mosaico-pieza:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.lista-mosaico-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tam-s); font-weight: 600; }

/* Ordenar (la misma rejilla): la elegida o el sitio al arrastrar, con el acento; las que no ven los demás, con su candado. */
.orden-ajustes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-3); }
.orden-aviso { margin: 0 0 var(--esp-3); padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-campo); background: var(--l-superficie); color: var(--texto-2); font-size: var(--tam-s); }
.orden-aviso[hidden] { display: none; }
/* En la hoja, más pequeña y centrada: que se vea entera al ordenar. */
.orden-rejilla { max-width: calc(var(--columnas, 3) * 140px); margin: 0 auto var(--esp-4); }
.orden-pieza { position: relative; cursor: grab; touch-action: manipulation; }
.orden-pieza.arrastrando { opacity: 0.4; }
.orden-pieza.elegida .portada-lista, .orden-pieza.destino .portada-lista { outline: 3px solid var(--acento); outline-offset: -3px; }
.orden-pieza.oculta .portada-lista { opacity: 0.55; }
.orden-oculta { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fondo); color: var(--texto); }
.orden-oculta .icono { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- una lista por dentro */

.lista-cargando { min-height: 50vh; }
.lista-volver {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; margin-left: -8px;
  border-radius: var(--l-radio-pastilla); color: var(--texto-2); font-size: var(--tam-s); text-decoration: none;
}
.lista-volver:hover { background: var(--l-hover); color: var(--texto); }
.lista-volver .icono { width: 16px; height: 16px; }

.lista-cabecera-visual { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); padding: var(--esp-1) 0 var(--esp-6); }
.portada-lista.cabecera { width: min(62vw, 240px); justify-self: center; border-radius: var(--l-radio-tarjeta); }
.portada-lista.cabecera[role='button'] { cursor: pointer; }
.portada-lista.cabecera[role='button']:hover { filter: brightness(1.06); }
.portada-lista.cabecera[role='button']:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.lista-cabecera-texto { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
/* Quién la ve, a la vista en la cabecera. */
.lista-quien-ve { margin-top: var(--esp-1); }
.lista-quien-ve .segmento { display: inline-flex; align-items: center; gap: 6px; }
.lista-quien-ve .icono { width: 15px; height: 15px; flex: none; }
.lista-nombre { margin: 0; font-size: clamp(30px, 9vw, 40px); letter-spacing: -0.045em; line-height: 1.02; overflow-wrap: anywhere; }
.lista-descripcion { margin: 0; max-width: 62ch; color: var(--texto-2); font-size: var(--tam-m); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.lista-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--texto-3); font-size: var(--tam-s); font-variant-numeric: tabular-nums; }
.lista-quien { display: inline-flex; align-items: center; gap: 6px; color: var(--texto); font-weight: 600; min-width: 0; }
.lista-quien .avatar { width: 22px; height: 22px; }
.lista-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-top: var(--esp-2); }

@media (min-width: 900px) {
  .lista-cabecera-visual { grid-template-columns: 232px minmax(0, 1fr); gap: var(--esp-4) var(--esp-8); align-items: end; padding-bottom: var(--esp-8); }
  .portada-lista.cabecera { width: 232px; justify-self: start; }
  .lista-nombre { font-size: clamp(44px, 5vw, 64px); letter-spacing: -0.055em; }
}

/* La barra: tipos (con su cuenta), género y orden. Se queda arriba al bajar. */
.lista-barra {
  position: sticky; top: 0; z-index: 4; display: flex; flex-direction: column; gap: var(--esp-2);
  margin: 0 calc(-1 * var(--lado)) var(--esp-4); padding: var(--esp-1) var(--lado) var(--esp-2);
  background: var(--fondo); background-image: var(--fondo-img); background-attachment: fixed;
}
.lista-barra .pestanas-tipo { margin: 0 calc(-1 * var(--lado)); scrollbar-width: none; }
.lista-barra .pestanas-tipo::-webkit-scrollbar { display: none; }
.lista-barra-extra { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
@media (min-width: 900px) {
  .lista-barra { top: 68px; flex-direction: row; align-items: center; justify-content: space-between; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .lista-barra .pestanas-tipo { flex: 0 1 auto; min-width: 0; margin: 0; padding: 0 0 2px; }
  .lista-barra-extra { flex: none; }
}

.lista-vacia .fila-botones { justify-content: center; }

/* ---------------------------------------------------------------- crear y editar */

.editor-lista-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
.editor-lista-portada { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); }
.editor-lista-vista { width: min(56vw, 220px); }
.portada-lista.editor { border-radius: var(--l-radio-tarjeta); }
.editor-lista-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); max-width: 300px; }
.editor-lista-ayuda { flex-basis: 100%; margin: 0; text-align: center; color: var(--texto-3); font-size: var(--tam-xs); }
/* Elegir la portada: el tipo y, debajo, lo de ese tipo (filtro, imagen o colores). */
.portada-tipos, .portada-ajustes { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); width: 100%; max-width: 320px; }
.portada-opciones { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; padding: 3px; border-radius: var(--l-radio-pastilla); background: var(--l-superficie); }
.portada-opcion, .portada-extremo {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--l-radio-pastilla); white-space: nowrap;
  color: var(--texto-2); font-size: var(--tam-s); font-weight: 600; transition: background 160ms, color 160ms;
}
.portada-opcion:hover, .portada-extremo:hover { color: var(--texto); }
.portada-opcion.activa, .portada-extremo.activa { background: var(--l-elevada); color: var(--texto); box-shadow: inset 0 0 0 1px var(--l-borde); }
.portada-opcion:focus-visible, .portada-extremo:focus-visible, .portada-muestra:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.portada-extremos { display: flex; gap: var(--esp-2); }
.portada-muestra-punto { width: 16px; height: 16px; border-radius: 50%; background: var(--muestra); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 0.35); }
.portada-muestras { display: grid; grid-template-columns: repeat(auto-fill, 32px); justify-content: center; gap: 8px; width: 100%; }
.portada-muestra, .portada-muestras .portada-libre {
  width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--muestra);
  box-shadow: inset 0 0 0 1px rgb(127 127 127 / 0.35); transition: transform 160ms;
}
.portada-muestra:hover { transform: scale(1.08); }
.portada-muestra.activa { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--texto); }
.portada-muestras .portada-libre { background: conic-gradient(#ff5a5a, #ffd75a, #5aff8c, #5ad7ff, #8c5aff, #ff5ad7, #ff5a5a); padding: 3px; }
.editor-lista-datos { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.editor-lista-datos .campo { display: flex; flex-direction: column; gap: 6px; position: relative; }
.editor-lista-datos .campo-etiqueta { color: var(--texto-2); font-size: var(--tam-s); font-weight: 600; }
.campo-contador { position: absolute; right: 10px; bottom: 8px; color: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.editor-lista-vis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.opcion-vis {
  display: flex; align-items: center; gap: var(--esp-3); padding: 10px 12px; border-radius: var(--radio-campo);
  background: var(--l-superficie); color: var(--texto-2); text-align: left; box-shadow: inset 0 0 0 1px transparent; transition: background 160ms, box-shadow 160ms;
}
.opcion-vis:hover { background: var(--l-elevada); color: var(--texto); }
.opcion-vis .icono { width: 20px; height: 20px; flex: none; }
.opcion-vis-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opcion-vis-texto b { color: var(--texto); font-size: var(--tam-m); font-weight: 600; }
.opcion-vis-texto small { color: var(--texto-3); font-size: var(--tam-xs); }
.opcion-vis.activa { box-shadow: inset 0 0 0 1.5px var(--acento); background: var(--seleccion); color: var(--acento); }
.editor-lista-pie { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-6); padding-top: var(--esp-4); box-shadow: 0 -1px 0 var(--l-borde); }
.editor-lista-pie .hueco { flex: 1 1 auto; }
@media (min-width: 700px) {
  .editor-lista-rejilla { grid-template-columns: 272px minmax(0, 1fr); align-items: start; }
  .editor-lista-vista { width: 220px; }
  .editor-lista-vis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opcion-vis { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
}

/* ---------------------------------------------------------------- elegir títulos */

.elegir-titulos .buscador { margin-bottom: var(--esp-3); }
.elegir-filas { display: flex; flex-direction: column; gap: 2px; max-height: min(58vh, 560px); overflow-y: auto; margin: 0 calc(-1 * var(--esp-2)); padding: 0 var(--esp-2); }
.elegir-fila {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 26px; align-items: center; gap: var(--esp-3);
  padding: 6px 8px; border-radius: var(--radio-campo); text-align: left; color: inherit; transition: background 150ms;
}
.elegir-fila:hover { background: var(--l-hover); }
.elegir-cartel { width: 40px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; }
.elegir-cartel .cartel-titulo { font-size: 8px; }
.elegir-cartel .cartel.sin-imagen { padding: 3px; }
.elegir-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.elegir-texto b { font-weight: 600; font-size: var(--tam-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elegir-texto small { color: var(--texto-3); font-size: var(--tam-xs); }
.elegir-marca { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--texto-3); color: transparent; transition: background 150ms, box-shadow 150ms; }
.elegir-marca .icono { width: 14px; height: 14px; }
.elegir-fila.elegida .elegir-marca { background: var(--acento); box-shadow: none; color: var(--sobre-acento); }
.elegir-cuenta { color: var(--texto-3); font-size: var(--tam-s); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- «Añadir a lista» (ficha, Añadir y Para ti) */

.anadir-a-lista-obra { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); color: var(--texto-2); overflow-wrap: anywhere; }
.anadir-a-lista-filas { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(-1 * var(--esp-2)); }
.anadir-a-lista-seccion { margin: var(--esp-5) 0 var(--esp-2); color: var(--texto-2); font-size: var(--tam-s); font-weight: 600; }
.anadir-a-lista-fila {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 26px; align-items: center; gap: var(--esp-3);
  padding: 6px var(--esp-2); border-radius: var(--radio-campo); text-align: left; color: inherit; transition: background 150ms;
}
.anadir-a-lista-fila:hover { background: var(--l-hover); }
.anadir-a-lista-fila:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.anadir-a-lista-fila .portada-lista.mini { width: 40px; height: 40px; border-radius: 6px; }
.anadir-a-lista-fila .portada-lista.mini .portada-lista-inicial { font-size: 17px; }
.anadir-a-lista-fila .portada-lista.hueco .icono { width: 18px; height: 18px; }
.anadir-a-lista-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.anadir-a-lista-texto b { font-size: var(--tam-m); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anadir-a-lista-texto small { color: var(--texto-3); font-size: var(--tam-xs); font-variant-numeric: tabular-nums; }
/* La marca: redonda y con punto en la base (una sola), con su check en las tuyas (las que quieras). */
.anadir-a-lista-marca { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--texto-3); color: transparent; transition: background 150ms, box-shadow 150ms; }
.anadir-a-lista-marca.radio { border-radius: 50%; }
.anadir-a-lista-marca .icono { width: 14px; height: 14px; }
.anadir-a-lista-fila.marcada .anadir-a-lista-marca { background: var(--acento); box-shadow: none; color: var(--sobre-acento); }
.anadir-a-lista-fila.marcada b { color: var(--acento); }
.anadir-a-lista .nota-control { margin: var(--esp-3) 0 0; }

/* ---------------------------------------------------------------- dónde está (ficha) y con la IA */

.ficha-listas-sitios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--esp-3); }
.ficha-listas-sitios:empty { display: none; }
.ficha-listas-sitios .chip-lista { text-decoration: none; color: inherit; }

.selector-listas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-lista { display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 100%; padding: 0 var(--esp-3) 0 5px; }
.chip-lista > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-lista .icono { width: 15px; height: 15px; flex: none; }
.chip-lista .portada-lista.mini { border-radius: 50%; }
.chip-lista.nueva { padding-left: 10px; }
/* El corazón de la ficha: «me gusta», aparte de las listas. */
.boton-corazon.activo, .boton-corazon.activo:hover { color: var(--corazon); }
.anadir-listas { display: flex; flex-direction: column; gap: 6px; }
.anadir-listas-etiqueta { color: var(--texto-3); font-size: var(--tam-xs); font-weight: 600; }

/* ---------------------------------------------------------------- listas destacadas (perfil) y la de otro */

.listas-destacadas { display: flex; flex-direction: column; gap: var(--esp-3); }
.listas-destacadas-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
.listas-destacadas-cabeza h3 { margin: 0; }
.listas-destacadas-todas { color: var(--texto-2); font-size: var(--tam-s); text-decoration: none; }
.listas-destacadas-todas:hover { color: var(--texto); text-decoration: underline; }
.listas-destacadas-acciones { display: flex; justify-content: flex-end; }

.lista-ajena-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); margin-bottom: var(--esp-6); }
.lista-ajena-cabeza .portada-lista.cabecera { width: min(48vw, 180px); justify-self: start; }
.lista-ajena-cabeza .lista-nombre { font-size: clamp(26px, 7vw, 36px); padding-right: 48px; }
@media (min-width: 700px) { .lista-ajena-cabeza { grid-template-columns: 180px minmax(0, 1fr); align-items: end; } .lista-ajena-cabeza .portada-lista.cabecera { width: 180px; } }

@media (prefers-reduced-motion: reduce) { .lista-tarjeta, .lista-base { animation: none; transition: none; } }