/* ===========================================================
   MorvehTV — estilo de plataforma de streaming
   Fondo oscuro, portada grande y carruseles horizontales.
   Pensado para verse bien en móvil, PC y TV con mando.
   =========================================================== */

:root {
  /* Paleta azul noche al estilo de Pelixplay */
  /* Minimalista oscuro: gris carbon y un unico acento morado */
  --fondo: #121214;
  --panel: #1a1a1e;
  --panel-claro: #232328;
  --texto: #f3f3f6;
  --texto-suave: #9b9ba6;
  --acento: #8b5cf6;
  --acento-claro: #a78bfa;
  --acento-oscuro: #6d3fd8;
  --oro: #f5c26b;
  --verde: #8b5cf6;
  --morado: #6d3fd8;
  --borde: rgba(255, 255, 255, .07);
  --error: #ff6b6b;
  --radio: .75rem;
  --radio-g: 1.1rem;
  --sombra: 0 16px 40px rgba(0, 0, 0, .45);
  /* Margen lateral; en televisores se amplia por el recorte de imagen */
  --margen-lateral: 1rem;
  /* Alto de la cabecera: la portada sube por debajo justo esta medida */
  --alto-cabecera: 3.4rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  /* Resplandor azul arriba, como en las pantallas de acceso de Pelixplay */
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(139, 92, 246, .26), transparent 70%),
    var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1 { font-size: 1.7rem; margin: .5rem 0 1rem; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 0 0 .7rem; letter-spacing: -.01em; }
code { background: var(--panel); padding: .1rem .3rem; border-radius: .3rem; }

.contenedor { padding: 1rem var(--margen-lateral); max-width: 1800px; margin: 0 auto; }

/* ---------- Cabecera ----------
   Una sola fila que nunca se parte: en pantallas estrechas el menu
   se desplaza en horizontal y los botones se quedan en su sitio. */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem var(--margen-lateral, 1rem);
  min-height: var(--alto-cabecera);
  /* Arriba del todo solo un velo degradado: se ve la portada por debajo.
     Al bajar se vuelve solida (clase «bajado» en <html>), porque con
     transparencia las caratulas se cuelan por detras y parece rota. */
  background: linear-gradient(to bottom, rgba(18, 18, 20,.85), rgba(18, 18, 20,.3) 70%, rgba(18, 18, 20,0));
  /* Sin borde arriba del todo: sobre la imagen se veria como una raya */
  border: 0;
  transition: background .3s ease, box-shadow .3s ease;
}
html.bajado .cabecera {
  background: rgba(18, 18, 20, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--borde), 0 8px 28px rgba(0, 0, 0, .55);
}


.menu {
  display: flex; gap: .15rem; flex: 1 1 auto;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  padding: .45rem .85rem; border-radius: 999px; white-space: nowrap;
  color: var(--texto-suave); font-size: .92rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.menu a:hover { color: var(--texto); background: rgba(139, 92, 246, .16); }

.acciones-cabecera { display: flex; align-items: center; gap: .4rem; flex: none; }

/* Buscador compacto: crece al enfocarlo */
.buscador {
  display: flex; align-items: center; gap: .35rem;
  padding: 0 .6rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--borde);
  transition: background .15s ease;
}
.buscador:focus-within { background: var(--panel-claro); }
.lupa { font-size: .85rem; opacity: .7; }
.buscador input {
  width: 7rem; border: none; background: transparent; padding: .5rem 0;
  transition: width .2s ease;
}
.buscador input:focus { outline: none; width: 11rem; }
.buscador:focus-within { outline: 3px solid var(--acento-claro); outline-offset: 2px; }

/* Cerrar sesion y salir: icono siempre, texto solo si cabe */
.icono-accion {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--borde);
  color: var(--texto); font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease;
}
.icono-accion svg { width: 1.1rem; height: 1.1rem; fill: currentColor; flex: none; }
.icono-accion:hover { background: var(--panel-claro); }

/* ---------- Controles ---------- */
input, select {
  font: inherit; color: var(--texto); background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .6rem .9rem; min-width: 0;
}
input::placeholder { color: var(--texto-suave); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .65rem 1.2rem; border-radius: 999px;
  background: var(--panel-claro); border: 1px solid var(--borde);
  color: var(--texto); font: inherit; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.boton:hover { background: #242d42; }
.boton.principal {
  background: linear-gradient(135deg, var(--acento), var(--acento-oscuro));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px rgba(59, 130, 246, .35);
}
.boton.principal:hover { background: linear-gradient(135deg, var(--acento-claro), var(--acento)); }
.boton:disabled { opacity: .45; cursor: default; }

/* Foco visible: imprescindible para el mando de la TV y el teclado */
.focusable:focus, .boton:focus, input:focus, select:focus, #video:focus {
  outline: 3px solid var(--acento-claro);
  outline-offset: 3px;
}
.menu a:focus { background: rgba(255, 255, 255, .12); color: var(--texto); }

/* ---------- Esqueleto de carga ----------
   Se parece a lo que va a aparecer, asi la espera no parece una averia. */
.esqueleto { animation: latir 1.4s ease-in-out infinite; }
.hueco-portada {
  margin: calc((var(--alto-cabecera) + 1rem) * -1) calc(var(--margen-lateral) * -1) 0;
  min-height: min(86vh, 44rem);
  background: linear-gradient(160deg, var(--panel-claro), var(--panel) 60%, var(--fondo));
}
.hueco-fila { margin: 2.2rem 0; }
.hueco-fila:first-of-type { margin-top: -5rem; position: relative; z-index: 2; }
.hueco-titulo {
  width: 12rem; height: 1.3rem; margin-bottom: 1rem;
  border-radius: .3rem; background: var(--panel-claro);
}
.hueco-carril { display: flex; gap: .55rem; overflow: hidden; }
.hueco-tarjeta {
  flex: 0 0 15.5rem; aspect-ratio: 16 / 9;
  border-radius: .4rem; background: var(--panel);
}
@keyframes latir { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* ---------- Portada grande ---------- */
.portada {
  position: relative;
  /* Sube por debajo de la cabecera: la imagen llega al borde de la pantalla */
  margin: calc((var(--alto-cabecera) + 1rem) * -1) calc(var(--margen-lateral) * -1) 0;
  min-height: min(86vh, 44rem);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.portada-fondo { position: absolute; inset: 0; }
.portada-fondo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
}
/* Dos velos: uno de abajo arriba para que se lea el texto, otro desde la
   izquierda. El de abajo termina en el color del fondo, asi la imagen se
   funde con la pagina y no se ve un corte recto sobre la primera fila. */
.portada-fondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 12% 35%, rgba(139, 92, 246, .28), transparent 70%),
    linear-gradient(to top,
      var(--fondo) 0%,
      rgba(18, 18, 20,.92) 18%,
      rgba(18, 18, 20,.45) 55%,
      rgba(18, 18, 20,.55) 100%),
    linear-gradient(to right,
      rgba(18, 18, 20,.95) 0%,
      rgba(18, 18, 20,.55) 45%,
      rgba(18, 18, 20,.1) 75%,
      transparent 100%);
}
.portada-texto {
  position: relative; z-index: 1;
  /* Hueco abajo para que la primera fila se monte encima sin tapar nada */
  padding: 3rem var(--margen-lateral) 8rem;
  max-width: 46rem;
}
.portada-etiqueta {
  margin: 0 0 .5rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento-claro);
}
.portada-texto h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  line-height: 1.03; margin: 0 0 .8rem;
  font-weight: 800; letter-spacing: -.03em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .75);
}
.portada-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem;
  margin-bottom: 1rem; font-size: .92rem; color: #c3cadb;
}
.portada-sinopsis {
  margin: 0 0 1.5rem; max-width: 48ch;
  color: #d9dee9; font-size: 1.02rem; line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.portada-acciones { display: flex; flex-wrap: wrap; gap: .7rem; }

.nota {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--oro); font-weight: 700;
}
.chip {
  padding: .15rem .6rem; border-radius: 999px;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, .06);
  font-size: .8rem; color: var(--texto);
}

/* ---------- Filas y carruseles ---------- */
.fila { margin: 2.2rem 0; }
/* La primera fila se monta sobre el final de la portada, como en Netflix */
.fila:first-of-type { margin-top: -5rem; position: relative; z-index: 2; }
.fila h2 {
  display: flex; align-items: baseline; gap: .6rem;
  margin: 0 0 .2rem; padding-left: .2rem;
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em;
}
/* Barrita azul delante del titulo de cada seccion, como en Pelixplay */
.fila h2::before {
  content: ""; flex: none; align-self: center;
  width: .28rem; height: 1.05rem; border-radius: 999px;
  background: linear-gradient(var(--acento-claro), var(--acento));
}
/* El enlace de «explorar todo» aparece al acercarse a la fila */
.ver-mas {
  font-size: .82rem; font-weight: 600; color: var(--acento-claro);
  padding: .15rem .4rem; border-radius: .4rem;
  opacity: 0; transform: translateX(-.4rem);
  transition: opacity .2s ease, transform .2s ease;
}
.fila:hover .ver-mas, .ver-mas:focus, .fila:focus-within .ver-mas {
  opacity: 1; transform: none;
}

/* Marco del carrusel: aloja las flechas de los lados */
.carril-marco { position: relative; }
.carril {
  display: flex; gap: .55rem;
  overflow-x: auto; overflow-y: hidden;
  /* Hueco arriba y abajo para que la tarjeta pueda crecer sin recortarse */
  padding: 1.1rem .2rem 1.4rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carril::-webkit-scrollbar { display: none; }
/* min-width: 0 es imprescindible: sin el, un titulo largo estira la tarjeta
   mucho mas alla de su ancho, porque los elementos flexibles no encogen
   por debajo de su contenido salvo que se les diga. */
.carril .tarjeta { flex: 0 0 15.5rem; min-width: 0; }

.flecha {
  position: absolute; top: 1.1rem; bottom: 1.4rem; z-index: 4;
  width: 2.8rem; border: 0; cursor: pointer;
  background: rgba(18, 18, 20,.75);
  color: var(--texto); font-size: 1.8rem; line-height: 1;
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.flecha.izquierda { left: 0; border-radius: 0 .4rem .4rem 0; }
.flecha.derecha { right: 0; border-radius: .4rem 0 0 .4rem; }
.carril-marco:hover .flecha { opacity: 1; }
.flecha:hover { background: rgba(18, 18, 20,.92); }
.carril-marco.sin-izquierda .flecha.izquierda,
.carril-marco.sin-derecha .flecha.derecha { display: none; }
/* Con mando o con el dedo las flechas no pintan nada */
html[data-tv] .flecha { display: none; }
@media (hover: none) { .flecha { display: none; } }

/* Top 10: el numero grande se mete por detras de la tarjeta */
.top10 .carril { gap: .2rem; }
.top10 .puesto { display: flex; align-items: center; flex: none; }
.top10 .numero {
  flex: none; margin-right: -1.6rem;
  font-size: 7.5rem; font-weight: 900; line-height: .8;
  color: var(--fondo);
  -webkit-text-stroke: 3px rgba(255, 255, 255, .35);
  letter-spacing: -.06em;
}
.top10 .tarjeta { flex: 0 0 13rem; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.4rem .8rem; }

/* ---------- Tarjetas ---------- */
.tarjeta { display: block; transition: transform .22s ease; }
.tarjeta:hover, .tarjeta:focus { transform: scale(1.14); z-index: 3; position: relative; }
.poster {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--panel); border-radius: var(--radio-g);
  border: 1px solid var(--borde);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
/* Si no hay imagen apaisada se usa la caratula, recortada por arriba:
   ahi es donde suelen estar las caras. */
.poster img.recortado { object-position: center 18%; }
.tarjeta:hover .poster, .tarjeta:focus .poster {
  border-color: rgba(167, 139, 250, .55);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .35), 0 18px 40px rgba(0, 0, 0, .75), 0 0 30px rgba(139, 92, 246, .25);
}

/* Titulo sobre la propia imagen, como las fichas de Netflix */
.tarjeta-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .55rem;
  display: flex; flex-direction: column; gap: .05rem;
  background: linear-gradient(to top, rgba(18, 18, 20,.92), rgba(18, 18, 20,.55) 55%, transparent);
}
.sin-poster {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: .8rem; text-align: center; font-weight: 600; font-size: .85rem;
  color: var(--texto-suave);
  background: linear-gradient(145deg, var(--panel-claro), var(--panel));
}

/* Distintivos sobre la carátula */
.etiqueta {
  position: absolute; top: .45rem; left: .45rem;
  background: var(--error); color: #2a0000;
  font-size: .68rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: .35rem;
}
.etiqueta.info { background: rgba(18, 18, 20,.85); color: var(--texto); border: 1px solid var(--borde); }
.insignia {
  position: absolute; top: .45rem; right: .45rem;
  display: inline-flex; align-items: center; gap: .18rem;
  background: rgba(18, 18, 20,.85); backdrop-filter: blur(4px);
  color: var(--oro); font-size: .7rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: .35rem;
  border: 1px solid var(--borde);
}
.tipo-pill {
  position: absolute; bottom: .45rem; left: .45rem;
  background: rgba(18, 18, 20,.8); backdrop-filter: blur(4px);
  color: var(--texto-suave); font-size: .65rem; font-weight: 600;
  padding: .1rem .45rem; border-radius: .3rem; text-transform: uppercase;
  letter-spacing: .04em;
}
.barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .7); }
.barra span { display: block; height: 100%; background: var(--acento); }

.tarjeta-titulo {
  font-size: .9rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.tarjeta-sub, .sub { color: var(--texto-suave); font-size: .76rem; }
.tarjeta-pie .tarjeta-sub { color: #c3cadb; }

/* ---------- Detalle ---------- */
.detalle { display: grid; grid-template-columns: minmax(10rem, 18rem) 1fr; gap: 2rem; align-items: start; }
.detalle-poster {
  aspect-ratio: 2 / 3; border-radius: 1.2rem; overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--panel); box-shadow: var(--sombra);
}
.detalle-poster img { width: 100%; height: 100%; object-fit: cover; }
.detalle-poster .sin-poster { height: 100%; }
.anio { color: var(--texto-suave); font-weight: 400; }
.meta { color: var(--oro); font-weight: 600; }
.sinopsis { max-width: 62ch; color: #d4d9e6; }
.archivo { color: var(--texto-suave); font-size: .82rem; word-break: break-all; }
.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* ---------- Reproductor ---------- */
.reproductor {
  position: relative;
  margin: -1rem -1rem 0;
  background: #000;
  overflow: hidden;
}
#video {
  width: 100%;
  max-height: 100vh;
  display: block;
  background: #000;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Capa con los controles, encima del video */
.capa {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 1; transition: opacity .25s ease;
  pointer-events: none;
}
.capa > * { pointer-events: auto; }
.capa.oculta { opacity: 0; }
.capa.oculta * { pointer-events: none; }
.reproductor:has(.capa.oculta) { cursor: none; }

.capa-sup {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.2rem 2.5rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent);
}
.capa-inf {
  padding: 3rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 25%, transparent);
}
.titulo-reproduccion {
  font-weight: 700; font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

/* Barra de progreso */
.barra-progreso {
  position: relative; height: 1.4rem; margin-bottom: .3rem;
  display: flex; align-items: center; cursor: pointer;
}
.barra-progreso .pista,
.barra-progreso .cargado,
.barra-progreso .visto {
  position: absolute; left: 0; height: .32rem; border-radius: 999px;
  transition: height .15s ease;
}
.barra-progreso .pista { width: 100%; background: rgba(255, 255, 255, .25); }
.barra-progreso .cargado { width: 0; background: rgba(255, 255, 255, .4); }
.barra-progreso .visto { width: 0; background: var(--acento); }
.barra-progreso .punto {
  position: absolute; right: -.45rem; top: 50%;
  width: .9rem; height: .9rem; border-radius: 50%;
  background: #fff; transform: translateY(-50%) scale(0);
  transition: transform .15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.barra-progreso:hover .pista,
.barra-progreso:hover .cargado,
.barra-progreso:hover .visto,
.barra-progreso:focus .pista,
.barra-progreso:focus .cargado,
.barra-progreso:focus .visto { height: .5rem; }
.barra-progreso:hover .punto,
.barra-progreso:focus .punto { transform: translateY(-50%) scale(1); }
.barra-progreso:focus { outline: 3px solid var(--acento-claro); outline-offset: .3rem; border-radius: 999px; }

/* Botonera: todo alineado a la izquierda */
.botonera {
  display: flex; align-items: center; gap: .4rem;
  flex-wrap: wrap;
}
.ctrl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; padding: 0;
  border: none; border-radius: 50%;
  background: transparent; color: #fff;
  cursor: pointer; font: inherit;
  transition: background .15s ease, transform .15s ease;
}
.ctrl svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.ctrl b { font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.ctrl:hover { background: rgba(255, 255, 255, .18); }
.ctrl:focus { background: rgba(255, 255, 255, .22); outline: 3px solid var(--acento-claro); outline-offset: 2px; }
.ctrl.grande { width: 3.4rem; height: 3.4rem; background: rgba(255, 255, 255, .14); }
.ctrl.grande svg { width: 1.9rem; height: 1.9rem; }
.ctrl.grande:hover, .ctrl.grande:focus { background: var(--acento); }
.ctrl.activo { background: var(--acento); }
.ctrl.redondo { background: rgba(0, 0, 0, .5); flex: none; }

/* Volumen: el deslizador aparece al enfocar o pasar por encima */
.grupo-volumen { display: flex; align-items: center; }
.deslizador {
  width: 0; opacity: 0; padding: 0; margin: 0;
  border: none; background: transparent;
  transition: width .2s ease, opacity .2s ease, margin .2s ease;
  accent-color: var(--acento);
  cursor: pointer;
}
.grupo-volumen:hover .deslizador,
.grupo-volumen:focus-within .deslizador { width: 6rem; opacity: 1; margin: 0 .5rem 0 .2rem; }
.deslizador:focus { outline: 3px solid var(--acento-claro); outline-offset: 3px; border-radius: 999px; }

.tiempo {
  margin-left: .6rem; font-size: .9rem;
  color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tiempo b { color: #fff; font-weight: 600; }

/* ---------- Formularios y paneles ---------- */
.login {
  max-width: 24rem; margin: 4rem auto;
  background: rgba(17, 26, 46, .82); border: 1px solid var(--borde);
  border-radius: var(--radio-g); padding: 1.8rem; box-shadow: var(--sombra);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* ---------- Pantalla de acceso (estilo Pelixplay) ---------- */
.acceso { max-width: 34rem; margin: 2.2rem auto 3rem; text-align: center; }
.marca-grande { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-bottom: 1.2rem; }
.logo { font-size: 1.5rem; line-height: 1; }
.marca-nombre {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(90deg, #fff, var(--acento-claro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.etiqueta-acceso {
  display: inline-block; margin: 0 0 .9rem; padding: .3rem .9rem;
  border-radius: 999px; background: rgba(139, 92, 246, .12);
  border: 1px solid rgba(139, 92, 246, .3); color: var(--acento-claro);
  font-size: .8rem; font-weight: 600;
}
.acceso h1 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 .6rem; }
.resalte { color: var(--acento-claro); }
.subtitulo-acceso { color: var(--texto-suave); font-size: .95rem; margin: 0 auto 1.6rem; max-width: 26rem; }
.acceso .login { text-align: left; max-width: 24rem; margin: 0 auto; }
.boton.verde { background: var(--verde); border-color: transparent; color: #fff; }
.boton.verde:hover { background: #1c8f4e; }
.boton.morado { background: var(--morado); border-color: transparent; color: #fff; }
.boton.morado:hover { background: #6539e6; }
.boton.oro { background: linear-gradient(135deg, #ffd76a, var(--oro)); border-color: transparent; color: #1a1200; }

/* ---------- Plataformas ---------- */
.plataformas { margin: 2.4rem auto 0; text-align: center; }
.plataformas h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.tarjetas-plataforma {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.plataforma {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.3rem 1.1rem; border-radius: var(--radio-g);
  background: linear-gradient(180deg, var(--panel-claro), var(--panel));
  border: 1px solid var(--borde); box-shadow: var(--sombra);
}
.plataforma-icono { width: 2.4rem; height: 2.4rem; color: var(--acento-claro); }
.plataforma h3 { margin: .2rem 0 0; font-size: 1.05rem; }
.plataforma p { margin: 0 0 .3rem; color: var(--texto-suave); font-size: .86rem; line-height: 1.4; }
.plataforma .boton { margin-top: auto; width: 100%; }
.etiqueta-actual {
  margin-top: auto; padding: .45rem .8rem; border-radius: 999px;
  background: rgba(139, 92, 246, .14); color: var(--acento-claro);
  font-size: .85rem; font-weight: 600;
}
.plataformas-version { color: var(--texto-suave); font-size: .82rem; margin: 1rem 0 0; min-height: 1em; }

/* Marca en la cabecera: el texto se oculta en pantallas estrechas y en TV pequeñas */
.marca {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: .3rem .5rem; border-radius: .5rem; font-weight: 800; letter-spacing: -.01em;
}
.marca .logo { font-size: 1.25rem; }
.marca .logo svg { width: 1.9rem; height: 1.9rem; }
.marca-texto {
  background: linear-gradient(90deg, #fff, var(--acento-claro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 1099px) { .marca-texto { display: none; } }
html[data-tv] .marca-texto { display: none; }
/* Los televisores (sobre todo los antiguos) pintan mal el desenfoque y el
   texto con degradado: se quitan, y el fondo pasa a ser solido. */
html[data-tv] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-tv] .marca .logo, html[data-tv] .logo { background: none; }
.logo svg { width: 1.5rem; height: 1.5rem; display: block; }
.marca-grande .logo svg { width: 3.2rem; height: 3.2rem; }
html[data-tv] .cabecera { background: var(--fondo); }
html[data-tv] .resalte, html[data-tv] .marca-nombre { background: none; -webkit-text-fill-color: #fff; color: #fff; }
@media (min-width: 1500px) { html[data-tv] .marca-texto { display: inline; } }
.formulario { display: grid; gap: .9rem; }
.formulario label { display: grid; gap: .35rem; font-size: .88rem; color: var(--texto-suave); }
.panel {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio-g); padding: 1.2rem 1.4rem; margin-bottom: 1rem;
}
.lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista li { padding: .55rem 0; border-bottom: 1px solid var(--borde); }
.error { color: var(--error); }
.aviso, .cargando { color: var(--texto-suave); }
.vacio { text-align: center; padding: 4rem 1rem; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1.2rem; }
.pestana {
  padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto-suave); font-weight: 500;
}
.pestana.activa {
  background: linear-gradient(135deg, var(--acento), var(--acento-oscuro));
  border-color: transparent; color: #fff; font-weight: 600;
}

/* ---------- Series ---------- */
.temporada { margin: 1.8rem 0; }
.episodios { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.episodio {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .9rem; align-items: center;
  padding: .8rem 1rem; border-radius: var(--radio);
  background: var(--panel); border: 1px solid var(--borde);
  transition: background .15s ease;
}
.episodio:hover, .episodio:focus { background: var(--panel-claro); }
.ep-num { color: var(--acento-claro); font-weight: 800; }
.ep-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-estado { color: var(--texto-suave); font-size: .84rem; white-space: nowrap; }

/* ---------- Entrar y crear cuenta ---------- */
.alterna { margin-top: 1.3rem; text-align: center; color: var(--texto-suave); font-size: .9rem; }
.alterna a {
  color: var(--acento-claro); font-weight: 600;
  padding: .35rem .5rem; border-radius: .4rem; display: inline-block;
}
.alterna a:focus-visible, .alterna a:focus { outline: none; background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  :root { --margen-lateral: .9rem; }

  /* Sin logotipo cabe todo en una fila: el menú se desliza y los botones
     se quedan fijos a la derecha. */
  .cabecera {
    flex-wrap: nowrap;
    padding: .5rem var(--margen-lateral);
    gap: .4rem;
    min-height: 0;
  }
  .acciones-cabecera { flex: none; margin-left: auto; }
  .menu { min-width: 0; gap: .1rem; }
  .menu a { font-size: .88rem; padding: .4rem .55rem; }

  /* El buscador estorba arriba: se queda como icono que lleva a buscar */
  .buscador input { width: 4.5rem; font-size: .9rem; }
  .buscador input:focus { width: 8rem; }
  .icono-accion { padding: .5rem; }
  .texto-accion { display: none; }

  .portada { min-height: min(78vh, 30rem); }
  .portada-texto { padding: 2rem var(--margen-lateral) 5.5rem; }
  .portada-fondo img { object-position: center 18%; }
  .portada-fondo::after {
    background: linear-gradient(to top,
      var(--fondo) 2%, rgba(18, 18, 20,.9) 22%, rgba(18, 18, 20,.45) 65%, rgba(18, 18, 20,.4) 100%);
  }
  .portada-etiqueta { font-size: .7rem; }
  .portada-sinopsis { -webkit-line-clamp: 2; font-size: .95rem; margin-bottom: 1.1rem; }
  .portada-acciones .boton { flex: 1 1 8rem; justify-content: center; }

  .episodio { grid-template-columns: 2.6rem 1fr; }
  .ep-estado { grid-column: 2; }
  .detalle { grid-template-columns: 1fr; gap: 1.2rem; }
  .detalle-poster { max-width: 11rem; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem .6rem; }
  .carril .tarjeta { flex-basis: 11.5rem; }
  .login { margin: 2rem auto; padding: 1.5rem; }
  .fila { margin: 1.6rem 0; }
  .fila:first-of-type { margin-top: -3.5rem; }
  .fila h2 { font-size: 1.05rem; }
  /* Con el dedo no hay «hover»: el enlace de explorar todo se ve siempre */
  .ver-mas { opacity: 1; transform: none; }
  .top10 .numero { font-size: 5rem; margin-right: -1.1rem; -webkit-text-stroke-width: 2px; }
  .top10 .tarjeta { flex-basis: 9.5rem; }
}

/* ---------- Televisor ----------
   Se activa con data-tv, que pone la app cuando corre en Google TV,
   Android TV o Fire TV. Es más fiable que adivinarlo por la pantalla. */
html[data-tv] {
  font-size: 20px;
  /* Zona segura: los televisores recortan entre un 3% y un 5% de cada borde */
  --margen-lateral: 4.5rem;
}
html[data-tv] body {
  padding-top: 0;
  /* En un televisor no hay raton: el cursor solo estorba si asoma */
  cursor: none;
}
html[data-tv] a, html[data-tv] button { cursor: none; }

html[data-tv] {
  /* La cabecera es mas alta en TV: la portada sube justo esta medida */
  --alto-cabecera: 4.6rem;
}
html[data-tv] .cabecera {
  gap: 1.2rem;
  padding: .9rem var(--margen-lateral);
  /* Se queda arriba siempre. Arriba del todo deja ver la portada; en cuanto
     se baja se vuelve opaca y sin desenfoque, porque con transparencia las
     caratulas se cuelan por debajo y parece que esta cortada. */
  position: sticky; top: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 20,.9), rgba(18, 18, 20,.4) 65%, transparent);
  backdrop-filter: none;
  box-shadow: none;
}
html[data-tv].bajado .cabecera {
  background: var(--fondo);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
html[data-tv] .menu a { padding: .55rem 1.1rem; font-size: 1rem; }

/* Con mando no se escribe cómodamente: el buscador se queda en su lupa
   hasta que se enfoca, y así el menú de categorías cabe entero. */
html[data-tv] .buscador input { width: 0; padding: .5rem 0; }
html[data-tv] .buscador:focus-within input,
html[data-tv] .buscador input:focus { width: 11rem; padding: .5rem .2rem; }
html[data-tv] .buscador { padding: 0 .75rem; }
html[data-tv] .lupa { font-size: 1.05rem; opacity: .9; }

html[data-tv] .icono-accion { padding: .55rem .9rem; }

/* El foco tiene que cantar desde el sofá */
html[data-tv] .focusable:focus,
html[data-tv] .boton:focus,
html[data-tv] .icono-accion:focus,
html[data-tv] input:focus {
  outline: 4px solid var(--acento-claro);
  outline-offset: 3px;
}
html[data-tv] .menu a:focus,


/* Portada más baja: así se intuye que hay filas debajo */
/* Casi toda la pantalla: con menos, el bloque de texto se sube tanto que se
   mete por debajo de la cabecera en los televisores de 720p. */
html[data-tv] .portada { min-height: 88vh; }
html[data-tv] .portada-texto { padding: 2.4rem var(--margen-lateral) 5rem; max-width: 52rem; }
html[data-tv] .portada-texto h1 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); }
html[data-tv] .portada-sinopsis { font-size: 1.15rem; -webkit-line-clamp: 2; }
html[data-tv] .portada-meta { font-size: 1.05rem; }

html[data-tv] .carril .tarjeta { flex-basis: 17rem; }
html[data-tv] .rejilla { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
html[data-tv] .tarjeta:focus { transform: scale(1.12); }
html[data-tv] .fila h2 { font-size: 1.35rem; }
/* Con mando no hay «hover»: el enlace de explorar todo se ve siempre */
html[data-tv] .ver-mas { opacity: 1; transform: none; }
html[data-tv] .top10 .tarjeta { flex-basis: 15rem; }
html[data-tv] .top10 .numero { font-size: 8.5rem; }
/* Desde el sofa el titulo tiene que leerse sin esfuerzo */
html[data-tv] .tarjeta-titulo { font-size: 1rem; }
html[data-tv] .tarjeta-pie { padding: 1.8rem .8rem .7rem; }
/* Hueco de sobra para que la tarjeta crezca al enfocarse sin recortarse */
html[data-tv] .carril { padding: 1.6rem .2rem 2rem; gap: .7rem; }
/* La fila enfocada nunca queda pegada al borde de abajo */
html[data-tv] .fila { scroll-margin-bottom: 3rem; }

/* Controles del reproductor, más grandes */
html[data-tv] .ctrl { width: 3.4rem; height: 3.4rem; }
html[data-tv] .ctrl svg { width: 1.9rem; height: 1.9rem; }
html[data-tv] .ctrl.grande { width: 4.2rem; height: 4.2rem; }
html[data-tv] .ctrl.grande svg { width: 2.4rem; height: 2.4rem; }
html[data-tv] .botonera { gap: .7rem; }
html[data-tv] .tiempo { font-size: 1.05rem; }
/* Con mando no existe «pasar por encima»: el volumen se ve siempre */
html[data-tv] .deslizador { width: 7rem; opacity: 1; margin: 0 .6rem 0 .2rem; }
html[data-tv] .barra-progreso { height: 2rem; }
html[data-tv] .barra-progreso .pista,
html[data-tv] .barra-progreso .cargado,
html[data-tv] .barra-progreso .visto { height: .45rem; }
html[data-tv] .barra-progreso .punto { transform: translateY(-50%) scale(1); width: 1.1rem; height: 1.1rem; }
html[data-tv] .capa-sup { padding: 1.5rem var(--margen-lateral) 3rem; }
html[data-tv] .capa-inf { padding: 3rem var(--margen-lateral) 1.5rem; }
/* Los controles tardan más en esconderse: con mando cuesta reaccionar */
html[data-tv] .capa { transition: opacity .35s ease; }

/* Al moverse con el mando, el navegador desplaza la pagina para enseñar lo
   enfocado. Sin este margen acabaria justo debajo de la cabecera fija. */
html[data-tv] .focusable,
html[data-tv] .tarjeta,
html[data-tv] .episodio { scroll-margin-top: 6.5rem; scroll-margin-bottom: 2rem; }

/* La primera fila necesita aire para no pegarse a la cabecera */
html[data-tv] .fila:first-child { margin-top: 1.2rem; }

/* El ultimo boton de la cabecera no debe rozar el borde de la pantalla */
html[data-tv] .acciones-cabecera { padding-right: .2rem; }

/* Muchos televisores Full HD declaran una pantalla de 1280 o menos.
   Ahi el nombre sobra: con el icono se reconoce igual y el menu entra entero. */
@media (max-width: 1500px) {
  html[data-tv] .menu a { padding: .55rem .85rem; }
  html[data-tv] { --margen-lateral: 3.2rem; }
}

/* Monitores grandes sin ser televisor */
@media (min-width: 1500px) {
  html:not([data-tv]) { font-size: 18px; }
  html:not([data-tv]) .carril .tarjeta { flex-basis: 17rem; }
}

/* ---------- Reproductor a pantalla completa ----------
   El reproductor es el elemento que entra a pantalla completa:
   el video llena el hueco y los controles flotan encima. */
.reproductor:fullscreen,
.reproductor:-webkit-full-screen {
  width: 100vw; height: 100vh;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.reproductor:fullscreen #video,
.reproductor:-webkit-full-screen #video {
  width: 100%; height: 100%;
  max-height: none; aspect-ratio: auto;
}
:fullscreen .cabecera,
:-webkit-full-screen .cabecera { display: none; }

/* ---------- Modo cine ----------
   El reproductor llena la ventana sin pedir pantalla completa al sistema.
   Dentro de la app es lo que se usa: la pantalla completa nativa se comia
   la primera pulsacion del boton Atras. */
.reproductor.cine {
  position: fixed; inset: 0; z-index: 60;
  margin: 0; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.reproductor.cine #video {
  width: 100%; height: 100%;
  max-height: none; aspect-ratio: auto;
}
/* Sin desplazamiento de fondo mientras se ve la pelicula */
body:has(.reproductor.cine) { overflow: hidden; }

/* Televisores: el menu tiene que caber entero. Se quita el icono de la marca
   por debajo de 1500 px y las opciones se reducen un poco. */
@media (max-width: 1499px) { html[data-tv] .marca { display: none; } }
html[data-tv] .menu a { font-size: .85rem; padding: .4rem .6rem; }