/* ===================================================================
   WISHLIST — "Lista de deseados" global (wishlist.html)

   NO introduce ningún lenguaje visual nuevo: reutiliza los mismos
   tokens de tema que el resto de KEEPB (--panel-grad, --panel-borde-ext,
   --panel-relieve, --acento, --borde, --texto...) y el chrome neutro
   gris de Home (body.fondo-home, en css/home.css). Lo ÚNICO propio de
   esta pantalla es la identidad de color por categoría en las pestañas
   y en la etiqueta de tipo de cada resultado — con EXACTAMENTE los
   mismos hex que ya usa cada categoría en css/style.css / css/home.css
   (Movies azul, Series verde, K-Dramas morado, Games rojo, Books
   naranja). No se inventa ninguna paleta.
   =================================================================== */

/* Color de identidad por categoría — mismos pares que .home-tarjeta-*
   en css/home.css. Se aplica a la pestaña y a la etiqueta de tipo. */
.wl-cat-movie  { --color-cat: #1d4ed8; --color-cat-suave: #60a5fa; }
.wl-cat-serie  { --color-cat: #16a34a; --color-cat-suave: #4ade80; }
.wl-cat-kdrama { --color-cat: #ab00c0; --color-cat-suave: #d500ff; }
.wl-cat-juego  { --color-cat: #cc0000; --color-cat-suave: #ff3333; }
.wl-cat-libro  { --color-cat: #c8763f; --color-cat-suave: #e8a366; }

/* ===== Buscador universal de Wishlist ===== */
.wishlist-buscador-barra {
  display: flex;
  justify-content: center;
  padding: 0.4rem 1.5rem 0;
}

.wishlist-buscador-envoltura {
  position: relative;
  width: min(620px, 100%);
  display: flex;
  align-items: center;
}

.wishlist-buscador-icono {
  position: absolute;
  left: 0.9rem;
  width: 17px;
  height: 17px;
  color: var(--texto-tenue);
  pointer-events: none;
}

.wishlist-buscador-input.topbar-buscar {
  width: 100%;
  max-width: none;
  padding: 0.75rem 2.4rem 0.75rem 2.6rem;
  font-size: 0.95rem;
}

.wishlist-buscador-limpiar {
  position: absolute;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-tenue);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.wishlist-buscador-limpiar:hover {
  color: var(--texto);
  background: rgba(var(--acento-suave-rgb), 0.12);
}

/* ===================================================================
   Pestañas de categoría — franja horizontal que ocupa el ancho de
   contenido de la página (mismo margen lateral que topbar/título/
   listas), montada como UN marco redondeado con el relieve metálico de
   KEEPB (--panel-grad + --panel-relieve-suave + esquinas redondeadas).
   Dentro, cada categoría es una sección proporcional (flex:1).

   La categoría activa se "enmarca" y se enciende con SU color
   característico de KEEPB (Movies azul / Series verde / K-Dramas morado
   / Games rojo / Books café): lavado translúcido + borde redondeado del
   color + doble glow (halo alrededor + derrame suave hacia el contenido
   de abajo) — el mismo brillo de acento que usa el resto de la app,
   pero teñido por categoría. Las inactivas se funden con el marco.

   Solo cambia el aspecto: ni el DOM ni la lógica (js/wishlist.js) se
   tocan — sigue habiendo un <button> por categoría con su clase
   .wl-cat-* (que aporta --color-cat / --color-cat-suave).
   =================================================================== */
.wishlist-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0.9rem 1.5rem 0;
  padding: 0.4rem;
  position: relative;
  border-radius: 16px;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  box-shadow: var(--panel-relieve-suave);
  overflow: visible;
}

.wishlist-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--texto-tenue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  z-index: 0;
  transition:
    color 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    text-shadow 0.28s ease;
}

.wishlist-tab > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wishlist-tab:hover:not(.activo) {
  color: var(--texto);
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(var(--borde-rgb), 0.5);
}

.wishlist-tab.activo {
  z-index: 1;
  color: #fff;
  background-color: color-mix(in srgb, var(--color-cat) 16%, transparent);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--color-cat) 6%, transparent),
    color-mix(in srgb, var(--color-cat) 22%, transparent));
  border-color: color-mix(in srgb, var(--color-cat-suave) 60%, transparent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--color-cat) 65%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-cat-suave) 32%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--color-cat) 28%, transparent),
    0 0 20px color-mix(in srgb, var(--color-cat) 45%, transparent),
    0 14px 32px -8px color-mix(in srgb, var(--color-cat) 52%, transparent);
}

.wishlist-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--texto-tenue);
  background: rgba(var(--bg-rgb), 0.5);
  border: 1px solid rgba(var(--borde-rgb), 0.7);
  transition: color 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.wishlist-tab.activo .wishlist-tab-count {
  color: #fff;
  background-color: color-mix(in srgb, var(--color-cat) 42%, transparent);
  border-color: color-mix(in srgb, var(--color-cat-suave) 60%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-cat) 45%, transparent);
}

/* Modo Claro: el texto blanco + el glow intenso no se leen sobre fondo
   claro. Se conserva el MISMO lenguaje (marco redondeado del color +
   halo + derrame), con la etiqueta en tinta normal y el brillo más
   contenido. Dark Mode intacto. */
html[data-modo="claro"] .wishlist-tab.activo {
  color: var(--texto);
  text-shadow: none;
  background-color: color-mix(in srgb, var(--color-cat) 13%, transparent);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--color-cat) 6%, transparent),
    color-mix(in srgb, var(--color-cat) 18%, transparent));
  border-color: color-mix(in srgb, var(--color-cat) 55%, transparent);
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--color-cat) 16%, transparent),
    0 0 16px color-mix(in srgb, var(--color-cat) 30%, transparent),
    0 12px 26px -10px color-mix(in srgb, var(--color-cat) 34%, transparent);
}

html[data-modo="claro"] .wishlist-tab.activo .wishlist-tab-count {
  color: #fff;
  background-color: color-mix(in srgb, var(--color-cat) 68%, transparent);
  border-color: color-mix(in srgb, var(--color-cat) 85%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-cat) 30%, transparent);
}

/* ===================================================================
   BOTÓN FLOTANTE de selección aleatoria — pieza fija, circular, con piel
   glass oscura de KEEPB. Vive en wishlist.html (#wishlist-fab-dado), NO
   dentro de ninguna pestaña: al cambiar de categoría solo transiciona su
   ACENTO (borde / glow / icono / tinte de fondo mínimo) vía la clase
   wl-cat-* que le pone js/wishlist.js — nunca cambia de posición.
   Base siempre oscura; el color de la categoría es solo luz de acento.
   =================================================================== */
.wishlist-fab {
  position: fixed;
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  isolation: isolate;
  color: var(--color-cat-suave);
  border: 1px solid color-mix(in srgb, var(--color-cat-suave) 36%, var(--panel-borde-ext));
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--color-cat) 13%, transparent), transparent 70%),
    var(--panel-grad-clara);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    var(--panel-relieve-suave),
    0 12px 28px -8px rgba(0, 0, 0, 0.6);
  transition:
    box-shadow 0.2s ease,
    transform 0.16s cubic-bezier(0.34, 0.1, 0.2, 1),
    opacity 0.2s ease;
}

/* Cambio de categoría: el acento (icono/borde/glow, todo vía var()) se
   actualiza al instante en el swap de clase — un `transition` sobre esos
   var() no interpola en Chromium. Para que se sienta SUAVE y sin saltos,
   se enmascara ese cambio con un breve barrido de saturación/brillo: el
   ojo lo lee como una fundición de un acento a otro, sin que el botón se
   mueva ni cambie de tamaño. */
.wishlist-fab.cambiando-color {
  animation: wishlist-fab-morph 0.4s ease;
}

@keyframes wishlist-fab-morph {
  0%   { filter: saturate(0.35) brightness(0.8); }
  100% { filter: saturate(1)    brightness(1); }
}

/* Glow ambiental del color de la categoría — capa propia detrás del
   botón (sin transición: sigue el valor ANIMADO de --color-cat). */
.wishlist-fab::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-cat) 42%, transparent), transparent 66%);
  filter: blur(8px);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.wishlist-fab-icono {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wishlist-fab-icono svg {
  width: 1.7rem;
  height: 1.7rem;
  display: block;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-cat) 45%, transparent));
}

.wishlist-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    var(--panel-relieve-suave),
    0 16px 34px -8px rgba(0, 0, 0, 0.68);
}

.wishlist-fab:hover::before {
  opacity: 0.85;
  transform: scale(1.12);
}

.wishlist-fab:active {
  transform: scale(0.9);
}

.wishlist-fab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-cat-suave) 70%, transparent);
  outline-offset: 3px;
}

.wishlist-fab:disabled {
  cursor: default;
  opacity: 0.4;
  transform: none;
}

.wishlist-fab:disabled::before { opacity: 0.25; }

/* Giro breve del icono al lanzar. */
@keyframes wishlist-fab-gira {
  0%   { transform: rotate(0deg) scale(1); }
  55%  { transform: rotate(200deg) scale(1.14); }
  100% { transform: rotate(360deg) scale(1); }
}

.wishlist-fab.girando .wishlist-fab-icono {
  animation: wishlist-fab-gira 0.55s cubic-bezier(0.34, 0.1, 0.2, 1);
}

/* Anillo de luz momentáneo con el color de la categoría (destello). */
.wishlist-fab::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-cat-suave) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

.wishlist-fab.girando::after {
  animation: wishlist-fab-anillo 0.55s ease;
}

@keyframes wishlist-fab-anillo {
  0%   { opacity: 0.75; transform: scale(0.86); }
  100% { opacity: 0;    transform: scale(1.4); }
}

html[data-modo="claro"] .wishlist-fab {
  color: var(--color-cat);
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-fab,
  .wishlist-fab:hover,
  .wishlist-fab:active { transform: none; }
  .wishlist-fab.girando .wishlist-fab-icono,
  .wishlist-fab.girando::after,
  .wishlist-fab.cambiando-color { animation: none; }
}

/* ===== Zona de contenido (pestaña activa o resultados de búsqueda) ===== */
.wishlist-contenido {
  padding: 1.4rem 1.5rem 5.5rem;
  min-height: 40vh;
  transition: opacity 0.16s ease;
}

.wishlist-contenido.wishlist-contenido-saliendo {
  opacity: 0;
}

/* ===================================================================
   Resultado aleatorio — vista TEMPORAL: la portada es la protagonista,
   centrada, con glow ambiental del color de la categoría activa
   (nunca un fondo sólido). Debajo solo el título (+ año si lo hay).
   =================================================================== */
.wishlist-aleatorio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  padding: 1.6rem 1rem 2.4rem;
  text-align: center;
  animation: wishlist-aleatorio-entra 0.32s ease both;
}

@keyframes wishlist-aleatorio-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Glow ambiental detrás del poster — elíptico, muy difuso, integrado
   con el fondo oscuro. Aparece progresivamente. */
.wishlist-aleatorio::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(560px, 92vw);
  height: min(460px, 78vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--color-cat) 26%, transparent),
    transparent 70%);
  filter: blur(6px);
  animation: wishlist-glow-entra 0.6s ease both;
}

@keyframes wishlist-glow-entra {
  from { opacity: 0; }
  to   { opacity: 0.9; }
}

.wishlist-aleatorio-poster {
  position: relative;
  z-index: 1;
  width: min(300px, 62vw);
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--superficie-clara);
  border: 1px solid color-mix(in srgb, var(--color-cat-suave) 42%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 24px 60px -14px rgba(0, 0, 0, 0.7),
    0 0 50px -6px color-mix(in srgb, var(--color-cat) 45%, transparent);
  animation: wishlist-poster-entra 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes wishlist-poster-entra {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.wishlist-aleatorio-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wishlist-aleatorio-sinposter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-tenue);
  opacity: 0.5;
}

.wishlist-aleatorio-titulo {
  position: relative;
  z-index: 1;
  max-width: 90%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--texto);
  text-shadow: 0 0 22px color-mix(in srgb, var(--color-cat) 40%, transparent);
}

.wishlist-aleatorio-meta {
  position: relative;
  z-index: 1;
  margin-top: -0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--texto-tenue);
}

.wishlist-aleatorio-cerrar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-tenue);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.wishlist-aleatorio-cerrar:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-aleatorio,
  .wishlist-aleatorio::before,
  .wishlist-aleatorio-poster { animation: none; }
  .wishlist-contenido { transition: none; }
}

.wishlist-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.9rem;
}

.wishlist-seccion-rotulo {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Fila de resultado / de elemento guardado — mismo relieve de panel que
   .poster-tarjeta / .tmdb-resultado-item del resto de la app. */
.wishlist-fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  box-shadow: var(--panel-relieve-suave);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wishlist-fila:hover {
  border-color: var(--acento-suave);
  box-shadow: var(--panel-relieve-suave), 0 0 12px var(--acento-glow);
}

/* ===================================================================
   Elemento que YA pertenece a la Wishlist — se ILUMINA con el color
   característico de su categoría: filo lateral + borde teñido + halo
   ambiental + un lavado de fondo mínimo desde la izquierda. En la vista
   de pestaña todas las filas lo llevan (misma categoría → misma luz);
   en resultados de búsqueda solo las ya guardadas, para distinguirlas
   de un vistazo de las que aún no están. Elegante, nunca saturado.
   =================================================================== */
.wishlist-fila.en-wishlist {
  border-color: color-mix(in srgb, var(--color-cat-suave) 50%, var(--panel-borde-ext));
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--color-cat) 13%, transparent), transparent 26%),
    var(--panel-grad);
  box-shadow:
    inset 3px 0 0 var(--color-cat-suave),
    inset 0 0 0 1px color-mix(in srgb, var(--color-cat-suave) 16%, transparent),
    var(--panel-relieve-suave),
    0 0 16px -2px color-mix(in srgb, var(--color-cat) 34%, transparent);
}

.wishlist-fila.en-wishlist:hover {
  border-color: var(--color-cat-suave);
  box-shadow:
    inset 3px 0 0 var(--color-cat-suave),
    inset 0 0 0 1px color-mix(in srgb, var(--color-cat-suave) 26%, transparent),
    var(--panel-relieve-suave),
    0 0 24px -2px color-mix(in srgb, var(--color-cat) 46%, transparent);
}

.wishlist-fila-miniatura {
  width: 46px;
  height: 69px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--superficie-clara);
  box-shadow: inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.3);
}

.wishlist-fila-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wishlist-fila-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wishlist-fila-titulo {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wishlist-fila-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  font-size: 0.74rem;
  color: var(--texto-tenue);
}

/* Etiqueta de tipo — mismo molde que .badge-rating, pero el borde/glow
   toma el color de la categoría a la que pertenece el resultado. */
.wishlist-fila-tipo {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--texto);
  background: var(--panel-grad);
  border: 1px solid var(--color-cat-suave);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-cat-suave) 25%, transparent),
    0 0 8px color-mix(in srgb, var(--color-cat) 35%, transparent);
}

/* Botón de marcador — SOLO icono, sin texto (pedido explícito). */
.wishlist-bookmark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--panel-grad-clara);
  color: var(--texto-tenue);
  cursor: pointer;
  box-shadow: var(--panel-relieve-suave);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.wishlist-bookmark svg {
  width: 18px;
  height: 18px;
}

.wishlist-bookmark:hover {
  color: var(--texto);
  border-color: var(--acento-suave);
  box-shadow: var(--panel-relieve-suave), 0 0 10px var(--acento-glow);
}

.wishlist-bookmark:active { transform: scale(0.9); }

/* Marcador ya activo — usa el color de la categoría (la fila aporta
   --color-cat*), no el acento neutro, para que combine con la luz de
   .en-wishlist. */
.wishlist-bookmark.activo {
  color: var(--color-cat-suave);
  border-color: color-mix(in srgb, var(--color-cat-suave) 62%, transparent);
  box-shadow: var(--panel-relieve-suave), 0 0 12px -1px color-mix(in srgb, var(--color-cat) 45%, transparent);
}

.wishlist-bookmark.activo:hover {
  color: var(--color-cat-suave);
  border-color: var(--color-cat-suave);
  box-shadow: var(--panel-relieve-suave), 0 0 15px -1px color-mix(in srgb, var(--color-cat) 55%, transparent);
}

/* Confirmación visual breve al añadir (pequeño "pop" del icono). */
@keyframes wishlist-bookmark-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.wishlist-bookmark.recien-anadido svg { animation: wishlist-bookmark-pop 0.32s ease; }

/* ===== Estados (carga / vacío / error) ===== */
.wishlist-mensaje {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 0.9rem;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.5;
}

.wishlist-mensaje-icono {
  display: block;
  margin: 0 auto 0.8rem;
  width: 34px;
  height: 34px;
  opacity: 0.5;
}

/* ===================================================================
   Toast de confirmación — discreto, abajo y al centro, con la misma
   piel de panel del resto de la app. No bloquea nada; se va solo.
   =================================================================== */
.wishlist-toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%) translateY(1.5rem);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 0.9rem 0.7rem 1rem;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 999px;
  box-shadow: var(--panel-relieve);
  color: var(--texto);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wishlist-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.wishlist-toast-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--acento-suave);
}

.wishlist-toast-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wishlist-toast-ver {
  flex-shrink: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--acento-suave);
  border-radius: 999px;
  background: transparent;
  color: var(--acento-suave);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.wishlist-toast-ver:hover { background: rgba(var(--acento-suave-rgb), 0.14); }

/* ===== Responsive ===== */
@media (max-width: 560px) {
  .wishlist-contenido { padding: 1.1rem 1rem 5.5rem; }
  .wishlist-buscador-barra { padding: 0.4rem 1rem 0; }
  .wishlist-lista { grid-template-columns: 1fr; }

  /* El marco se ciñe al gutter del contenido; la tipografía baja para
     que "K-Dramas" quepa en las 5 secciones flex:1. */
  .wishlist-tabs {
    margin: 0.9rem 1rem 0;
    padding: 0.3rem;
    gap: 0.3rem;
    border-radius: 14px;
  }
  .wishlist-tab {
    font-size: 0.6rem;
    letter-spacing: 0.3px;
    padding: 0.8rem 0.25rem;
    gap: 0.25rem;
    border-radius: 9px;
  }
  .wishlist-tab-count {
    min-width: 1rem;
    height: 1rem;
    font-size: 0.55rem;
    padding: 0 0.22rem;
  }

  .wishlist-fab {
    right: calc(1.1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    width: 3.1rem;
    height: 3.1rem;
  }
  .wishlist-fab-icono svg { width: 1.5rem; height: 1.5rem; }

  .wishlist-aleatorio-poster { width: min(240px, 66vw); }
}