@import url("fonts.css");

/* animeTV · CONTINUIDAD
   Rejilla suiza con capa de instrumento. De la tradicion tipografica
   internacional: rejilla estricta, titulo de seccion en su propia columna,
   todo plano, esquinas vivas, una sola familia (Archivo, con ancho variable) y
   la cifra del episodio como imagen. De un monitor de continuidad: franja de
   estado con reloj, luz de tally para lo que esta en curso, la serie como
   escaleta y la ruta de la senal en el reproductor.
   Un solo acento, un violeta plano: es a la vez el tally y "aqui estas". */

/* ===== tokens ============================================================ */
:root {
  /* superficies */
  --bg: #0D0D0C;
  --hundido: #121211;
  --panel: #161615;
  --panel-2: #1D1D1B;
  --line: #2A2A28;
  --line-2: #3B3B38;
  --regla: #F2F2EE;          /* la regla suiza: 1px en el color del texto */

  /* texto (--faint >= 4.9:1 incluso sobre --panel-2) */
  --text: #F2F2EE;
  --dim: #A8A8A0;
  --faint: #8C8C85;
  --campo: #6A6A63;          /* borde de campo: 3.4:1 sobre --hundido */

  /* senales */
  --acento: #9470FF;         /* 5.6:1 sobre --bg: vale tambien como texto */
  --acento-fondo: rgba(148,112,255,.12);
  --peligro: #FF6B5A;

  --ui: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --marca: "Space Grotesk", var(--ui);
  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-20: 1.25rem;
  --t-26: 1.625rem;
  --t-34: 2.125rem;

  --r: 2px;
  /* Elevacion solo para lo que flota (menus, dialogos): desplazamiento y
     desenfoque reales, en negro. Nada de halos de color. */
  --sombra: 0 22px 44px -24px #000, 0 4px 12px -6px rgba(0,0,0,.7);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-salida: cubic-bezier(.4,0,.9,.3);
  --fast: .15s var(--ease);
  --med: .22s var(--ease);
  --lat: clamp(16px, 3.2vw, 40px);
  --g: clamp(16px, 1.8vw, 24px);
}

/* ===== reset y superficies del navegador ================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-15)/1.5 var(--ui);
  font-stretch: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--acento);
}
img, video { display: block; max-width: 100%; }
/* El atributo hidden lo pinta la hoja del navegador con display:none, y
   cualquier display declarado aqui lo anula sin avisar. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: var(--t-34); line-height: 1; }
h2 { font-size: var(--t-15); }
/* Iconos con remates rectos: el mismo filo que las esquinas. */
svg { stroke-linecap: square; stroke-linejoin: miter; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
::selection { background: var(--acento); color: var(--bg); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--bg); }
.num { font-variant-numeric: tabular-nums; }
/* Cifra condensada: numeros de episodio y tiempos grandes. */
.cifra { font-weight: 700; font-stretch: 62%; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: .8; }
.tally { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); flex: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
kbd {
  font: 600 var(--t-11)/1 var(--ui); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  display: inline-block; min-width: 20px; text-align: center;
  padding: 3px 5px; border-radius: var(--r);
  border: 1px solid var(--line-2); color: var(--dim);
}

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 16px; background: var(--text); color: var(--bg); font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--med);
}
.skip:focus-visible { transform: none; }

/* ===== estructura ======================================================= */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; padding: 0 var(--lat) 96px; }
.wrap { max-width: 1440px; margin: 0 auto; width: 100%; }
/* Al navegar, el foco salta aqui para que el teclado y los lectores de pantalla
   continuen en el contenido; el contenedor no es un control, asi que no lleva
   anillo. */
#view:focus, #view:focus-visible { outline: none; }

/* ===== franja de estado ================================================= */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: stretch; height: 52px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--med);
}
.topbar.desplazada { box-shadow: 0 10px 24px -18px #000; }
.topbar > * { display: flex; align-items: center; }
.topbar > .spacer { flex: 1; }
/* Separadores verticales entre los modulos de la derecha, como en un panel. */
.searchbtn, .topbar .reloj, .topbar .pmenu { border-left: 1px solid var(--line); }

/* El nombre tiene dos mitades y el logotipo las respeta: "anime" en calma,
   "TV" encendido, con la barra de canal que crece al apuntar. */
.brand {
  font-family: var(--marca); font-size: var(--t-20); letter-spacing: -.02em;
  display: flex; align-items: center; flex: none; padding: 0 20px 0 var(--lat);
}
/* La estrella en orbita (tools/estrella.js) va delante, a la altura de la
   caja de mayusculas. Su caja 24 deja 2,6 de aire a la izquierda y 4,8 a la
   derecha: los margenes lo compensan para que el trazo alinee con el texto. */
.brand .wm-icono { width: 1.2em; height: 1.2em; margin: 0 .12em 0 -.13em; flex: none; }
.brand .wm-a { font-weight: 500; color: var(--dim); transition: color var(--fast); }
.brand .wm-b { font-weight: 700; color: var(--text); position: relative; }
.brand:hover .wm-a { color: var(--text); }
.brand .wm-b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--acento);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med);
}
.brand:hover .wm-b::after, .brand:focus-visible .wm-b::after { transform: scaleX(1); }

.crumbs { gap: 8px; min-width: 0; font-size: var(--t-13); color: var(--faint); padding-left: 4px; }
.crumbs a, .crumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--line-2); flex: none; display: inline-flex; }
.crumbs .here { color: var(--text); }

.searchbtn {
  gap: 10px; padding: 0 20px; color: var(--dim); font-size: var(--t-13);
  transition: background var(--fast), color var(--fast);
}
.searchbtn:hover { background: var(--panel); color: var(--text); }
.topbar .reloj { padding: 0 20px; font-size: var(--t-15); font-weight: 600; font-stretch: 85%; }
.topbar .reloj:empty { display: none; }

.usertrigger {
  height: 100%; display: flex; align-items: center; gap: 10px;
  padding: 0 var(--lat) 0 20px; color: var(--dim);
  transition: color var(--fast), background var(--fast);
}
.usertrigger:hover, .usertrigger[aria-expanded="true"] { color: var(--text); background: var(--panel); }
.usertrigger[aria-busy="true"] svg { animation: spin 1s linear infinite; }
.avatar {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--text);
  font-size: var(--t-12); font-weight: 700;
}
.usertrigger:hover .avatar, .usertrigger[aria-expanded="true"] .avatar { border-color: var(--text); }
.menu-tit { font-size: var(--t-13); font-weight: 600; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; min-width: 36px; padding: 0 10px; border-radius: var(--r);
  color: var(--dim); border: 1px solid transparent;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.iconbtn:hover { color: var(--text); border-color: var(--line-2); }
.iconbtn[aria-busy="true"] { color: var(--acento); pointer-events: none; }
.iconbtn[aria-busy="true"] svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== menus ============================================================ */
/* Panel plano: una hoja que cae de su boton. La opcion bajo el puntero gana
   el filete de acento a la izquierda; la elegida lleva la marca en acento. */
.pmenu { position: relative; }
.menu {
  position: absolute; z-index: 60; min-width: 272px;
  background: var(--panel); border: 1px solid var(--line-2);
  padding: 6px 0; box-shadow: var(--sombra);
  animation: menuEntra .16s var(--ease);
}
@keyframes menuEntra { from { opacity: 0; transform: translateY(-4px); } }
.topbar .menu { top: calc(100% + 1px) !important; right: var(--lat) !important; }
.menu .head {
  display: block; padding: 12px 16px 6px;
  font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.menu .who { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .who b { display: block; font-size: var(--t-15); font-weight: 600; }
.menu .who span { font-size: var(--t-12); color: var(--faint); }
.menu button, .menu a {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 16px; font-size: var(--t-15); text-align: left; color: var(--dim);
  transition: background var(--fast), color var(--fast);
}
.menu button svg, .menu a svg { flex: none; color: var(--faint); width: 17px; height: 17px; }
.menu .tick { width: 15px !important; height: 15px !important; }
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible {
  background: var(--panel-2); color: var(--text); box-shadow: inset 2px 0 0 var(--acento); outline: none;
}
.menu button:hover svg, .menu a:hover svg { color: var(--text); }
.menu button[aria-checked="true"] { color: var(--text); }
.menu .tick { margin-left: auto; opacity: 0; flex: none; color: var(--acento) !important; }
.menu button[aria-checked="true"] .tick { opacity: 1; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

.menu-kbd { margin-left: auto; }
/* Ajustes del reproductor: la velocidad es una fila de valores, no cinco filas. */
.menu-ajustes { width: 304px; }
.menu-fila { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 16px 6px; border: 1px solid var(--line-2); }
.menu .menu-fila button {
  justify-content: center; padding: 0; height: 34px; font-size: var(--t-13); font-weight: 600; font-stretch: 85%;
  font-variant-numeric: tabular-nums; box-shadow: none;
}
.menu .menu-fila button + button { border-left: 1px solid var(--line-2); }
.menu .menu-fila button[aria-checked="true"] { background: var(--acento); color: var(--bg); }
.menu .menu-fila button:focus-visible { outline: 2px solid var(--text); outline-offset: -3px; }
.menu-dos { display: grid; gap: 1px; min-width: 0; }
.menu-nota { font-size: var(--t-12); color: var(--faint); line-height: 1.35; }
.menu-pie { margin: 0; padding: 8px 16px 6px; font-size: var(--t-11); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ===== dialogos: paleta, ayuda, confirmacion ============================ */
.overlay {
  grid-template-columns: minmax(0, 1fr);
  position: fixed; inset: 0; z-index: 80;
  background: rgba(13,13,12,.8);
  display: grid; place-items: start center;
  padding: clamp(48px, 12vh, 140px) 16px 16px;
  animation: fade var(--med);
}
@keyframes fade { from { opacity: 0; } }
.palette {
  width: 100%; max-width: 640px; min-width: 0; justify-self: center;
  background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: var(--sombra);
  animation: liftin var(--med);
}
@keyframes liftin { from { opacity: 0; transform: translateY(-8px); } }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--regla); }
.palette-input svg { color: var(--faint); flex: none; }
.palette-input input { flex: 1; border: 0; background: none; font-size: var(--t-20); font-weight: 500; outline: none; min-width: 0; }
.palette-input input::placeholder { color: var(--faint); }
.palette-body { max-height: min(56vh, 480px); overflow-y: auto; padding: 6px 0; }
.palette-group {
  font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  padding: 14px 18px 6px; margin: 0;
}
.pitem {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 8px 18px; text-align: left;
  transition: background var(--fast);
}
.pitem[data-active="true"] { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--acento); }
.pitem[data-active="true"] .pitem-title { color: var(--text); }
.pitem-art { display: block; width: 40px; height: 60px; flex: none; overflow: hidden; background: var(--hundido); }
.pitem-art.wide { width: 80px; height: 45px; }
.pitem-art img { width: 100%; height: 100%; object-fit: cover; }
.pitem-text { min-width: 0; flex: 1; }
.pitem-title { display: block; font-size: var(--t-15); font-weight: 500; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem-sub { display: block; font-size: var(--t-12); color: var(--faint); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pitem .go { margin-left: auto; color: var(--faint); opacity: 0; flex: none; }
.pitem[data-active="true"] .go { opacity: 1; color: var(--acento); }
.palette-empty { padding: 34px 20px; text-align: center; color: var(--faint); font-size: var(--t-13); }
.palette-empty b { color: var(--text); font-weight: 600; }
.palette-foot {
  display: flex; gap: 18px; align-items: center;
  padding: 10px 18px; border-top: 1px solid var(--line);
  font-size: var(--t-12); color: var(--faint);
}
.palette-foot kbd { margin-right: 4px; }

/* Ayuda: grupos por "donde estoy", tecla a la derecha como en una chuleta. */
.ayuda-titulo { flex: 1; font-size: var(--t-17); font-weight: 700; }
.palette.ayuda { max-width: 900px; }
.ayuda .palette-body { padding: 0 0 12px; max-height: min(74vh, 640px); overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: 1fr; column-gap: 8px; align-content: start; }
@media (min-width: 760px) {
  /* Dos columnas sin huecos: general y gestos a la izquierda, el reproductor a la derecha. */
  .ayuda .palette-body { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "a b" "c b"; }
  .ayuda-grupo.zona-2 { align-self: start; }
  .ayuda-grupo.zona-0 { grid-area: a; } .ayuda-grupo.zona-1 { grid-area: b; } .ayuda-grupo.zona-2 { grid-area: c; }
}
.ayuda .palette-body:focus-visible { outline-offset: -3px; }
.ayuda-grupo dl { margin: 0; padding: 0 18px; }
.ayuda-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.ayuda-grupo .ayuda-fila:first-child { border-top: 1px solid var(--regla); }
.ayuda-fila dt { font-size: var(--t-13); color: var(--dim); }
.ayuda-fila dd { margin: 0; display: flex; align-items: center; gap: 4px; flex: none; }
.ayuda-o { font-size: var(--t-11); color: var(--faint); margin: 0 4px; }

/* Confirmacion: misma superficie, centrada, alineada a la izquierda. */
.overlay.confirmar { place-items: center; padding-top: 16px; }
.dialogo { max-width: 460px; padding: 22px 24px 20px; }
.dialogo h2 { font-size: var(--t-20); font-weight: 700; line-height: 1.25; text-wrap: balance; padding-bottom: 12px; border-bottom: 1px solid var(--regla); }
.dialogo p { margin: 12px 0 0; color: var(--dim); font-size: var(--t-15); text-wrap: pretty; }
.dialogo .actions { justify-content: flex-end; margin-top: 24px; }

/* ===== secciones: titulo en su columna, contenido en las otras nueve ===== */
.section { padding: 48px 0; border-bottom: 1px solid var(--line); }
/* Solo las secciones con titulo lateral usan la rejilla 3 + 9; las paginas de
   una sola pieza (subir, papelera) van a lo ancho. */
.section:has(> .section-head) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--g); }
.section:not(:has(> .section-head)) { border-bottom: 0; padding-top: 0; }
.section-head { display: flex; flex-direction: column; gap: 4px; align-self: start; position: sticky; top: 76px; }
.section-head h2 { font-size: var(--t-15); font-weight: 700; letter-spacing: -.01em; }
.section-head .count { font-size: var(--t-12); color: var(--faint); font-variant-numeric: tabular-nums; }
.section-body { min-width: 0; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
/* Orden: texto con subrayado de acento, no una pastilla. */
.seg { display: inline-flex; gap: 22px; }
.seg button {
  padding: 6px 0; font-size: var(--t-13); font-weight: 600; color: var(--faint);
  transition: color var(--fast), box-shadow var(--fast);
}
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { color: var(--text); box-shadow: 0 2px 0 var(--acento); }
/* "En curso" filtra, no ordena: va apartado tras una linea. */
.seg button[data-sort="curso"] { position: relative; margin-left: 12px; }
.seg button[data-sort="curso"]::before { content: ""; position: absolute; left: -17px; top: 7px; bottom: 7px; width: 1px; background: var(--line-2); }

/* ===== rejilla de series con indice ===================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 13vw, 180px), 1fr));
  gap: 40px var(--g);
}
.poster { display: block; }
.poster-idx {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding-top: 7px; margin-bottom: 10px; border-top: 1px solid var(--regla);
  font-size: var(--t-11); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  transition: border-color var(--fast);
}
.poster-idx b { color: var(--text); font-weight: 700; transition: color var(--fast); }
.poster-idx span { display: inline-flex; align-items: center; gap: 4px; }
.poster-idx svg { width: 12px; height: 12px; }
.poster.vista .poster-idx span { color: var(--dim); }
.poster-art {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  display: grid; grid-template: 1fr / 1fr;
  background: var(--panel);
}
.poster-art > * { grid-area: 1 / 1; }
.poster-art img { width: 100%; height: 100%; object-fit: cover; }
/* Respaldo cuando no hay portada: el titulo ES la portada, no un hueco. */
.poster-fallback {
  display: grid; align-items: end; padding: 14px;
  font-size: var(--t-20); font-weight: 700; font-stretch: 75%; line-height: 1.05; letter-spacing: -.02em;
  color: var(--dim); background: var(--hundido); border: 1px solid var(--line);
}
.poster-bar { align-self: end; height: 3px; background: rgba(13,13,12,.72); }
.poster-bar i { display: block; height: 100%; background: var(--acento); }
.poster-meta { display: block; padding-top: 12px; }
.poster-title { display: -webkit-box; font-size: var(--t-15); font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--fast); }
.poster-sub { display: block; font-size: var(--t-12); color: var(--faint); margin-top: 2px; font-variant-numeric: tabular-nums; }
.poster:hover .poster-idx, .poster:focus-visible .poster-idx { border-color: var(--acento); }
.poster:hover .poster-idx b, .poster:focus-visible .poster-idx b,
.poster:hover .poster-title, .poster:focus-visible .poster-title { color: var(--acento); }
.poster:focus-visible { outline-offset: 6px; }

/* ===== continuar viendo: tarjetas en filas ============================== */
.rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--g); }
.tile-wrap { position: relative; }
.tile {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); background: var(--hundido);
  transition: border-color var(--fast);
}
.tile:hover, .tile:focus-visible { border-color: var(--text); }
.tile-art { display: block; position: relative; aspect-ratio: 16/9; background: var(--panel); overflow: hidden; }
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.tile-tc {
  position: absolute; left: 10px; top: 10px;
  display: flex; align-items: center; gap: 7px; padding: 4px 8px;
  background: rgba(13,13,12,.85); font-size: var(--t-11); font-weight: 600; letter-spacing: .06em;
}
.tile-art .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(13,13,12,.72); }
.tile-art .bar i { display: block; height: 100%; background: var(--acento); }
.tile-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: end; padding: 16px 16px 14px; }
.tile-num { font-size: 64px; }
.tile-num small { font-size: .34em; font-stretch: 100%; letter-spacing: 0; font-weight: 500; color: var(--faint); margin-right: .1em; }
.tile-text { min-width: 0; }
.tile-series { display: block; font-size: var(--t-12); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--t-17); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin-top: 2px; overflow: hidden; transition: color var(--fast); }
.tile-left { display: flex; gap: 12px; margin-top: 6px; font-size: var(--t-12); color: var(--faint); }
.tile-title.generico { color: var(--dim); font-weight: 500; }
.tile:hover .tile-title, .tile:focus-visible .tile-title { color: var(--acento); }
.tile-dismiss {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(13,13,12,.85); border: 1px solid var(--line-2); color: var(--dim);
  opacity: .7; transition: opacity var(--fast), color var(--fast), border-color var(--fast);
}
.tile-wrap:hover .tile-dismiss, .tile-dismiss:focus-visible { opacity: 1; }
.tile-dismiss:hover { color: var(--text); border-color: var(--text); }

/* ===== ficha de serie =================================================== */
.hero {
  position: relative; margin: 0 calc(var(--lat) * -1); padding: 0 var(--lat);
  border-bottom: 1px solid var(--line); isolation: isolate;
}
/* Sin banner propio no hay fondo: la ficha es plana. Con banner propio, la
   imagen entra entera y el velo es el minimo para leer el titulo encima. */
.hero-bg { display: none; }
.hero-bg.propio { display: block; position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero-bg.propio img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.62); }
.hero-bg.propio::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,13,12,.25) 0%, rgba(13,13,12,.6) 60%, rgba(13,13,12,.96) 100%),
    linear-gradient(to right, rgba(13,13,12,.9) 0%, rgba(13,13,12,.4) 55%, rgba(13,13,12,.1) 100%);
}
.hero-inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--g);
  align-items: end; padding: 48px 0;
}
.hero-poster {
  width: 100%; max-width: 240px; aspect-ratio: 2/3;
  display: grid; grid-template: 1fr / 1fr; overflow: hidden; background: var(--panel);
}
.hero-poster > * { grid-area: 1 / 1; }
.hero-poster img { width: 100%; height: 100%; object-fit: cover; }
.hero-text { min-width: 0; }
.hero-text h1.largo { font-size: clamp(2.25rem, 3.6vw, 3.25rem); max-width: 24ch; }
.hero-text h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.5rem); line-height: .92; font-weight: 700; font-stretch: 75%;
  letter-spacing: -.03em; text-wrap: balance; max-width: 18ch;
}
/* Fila de datos con reglas: la ficha tecnica de la serie. */
.hero-meta { display: flex; flex-wrap: wrap; margin: 22px 0 0; border-top: 1px solid var(--regla); }
.hero-meta > div { padding: 10px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column-reverse; }
.hero-meta > div:last-child { border-right: 0; }
.hero-meta dd { margin: 0; font-size: var(--t-20); font-weight: 700; font-stretch: 85%; display: flex; align-items: center; gap: 6px; }
.hero-meta dt { margin-top: 2px; font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.hero-meta .vivo dd { color: var(--acento); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: none;
  font-weight: 600; font-size: var(--t-15); white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.btn:hover { border-color: var(--text); }
.btn:active { transform: translateY(1px); }
/* Principal: blanco roto con texto negro. El acento se reserva para estados. */
.btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn.primary:hover { background: #fff; border-color: #fff; }
.btn.ghost { background: none; }
.btn-extra { padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(13,13,12,.3); font-stretch: 85%; font-weight: 600; white-space: nowrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] svg { animation: spin 1s linear infinite; }
/* El de buscar no: una lupa girando parece un fallo de la pagina, no un
   progreso. El atributo se sigue poniendo (hace falta para el bloqueo del doble
   clic, ver app.js), lo que no gira es el icono. El aviso de que esta trabajando
   lo da el boton atenuado. */
#dl-buscar[aria-busy="true"] svg { animation: none; }
#dl-buscar[aria-busy="true"] { opacity: .55; cursor: progress; }
.btn.danger-btn { border-color: color-mix(in srgb, var(--peligro) 55%, transparent); color: var(--peligro); }
.btn.danger-btn:hover { border-color: var(--peligro); background: rgba(255,107,90,.08); }
.btn.danger-btn:focus-visible { outline-color: var(--peligro); }

/* ===== pestanas de temporada ============================================ */
.tabs { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 22px; }
.tab {
  padding: 6px 0; font-size: var(--t-13); font-weight: 600; color: var(--faint);
  transition: color var(--fast), box-shadow var(--fast);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); box-shadow: 0 2px 0 var(--acento); }

/* ===== escaleta de episodios ============================================ */
.escaleta { border-bottom: 0; }
.ephead, .eprow {
  display: grid; grid-template-columns: 72px 128px minmax(0, 1fr) 170px 36px;
  column-gap: 20px; align-items: center;
}
.ephead {
  padding-bottom: 8px; border-bottom: 1px solid var(--regla);
  font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.eprow:has(.ep-tools), .escaleta:has(.ep-tools) .ephead { grid-template-columns: 72px 128px minmax(0, 1fr) 112px 170px 36px; }
.eplist { list-style: none; margin: 0; padding: 0; }
.eplist li { position: relative; border-top: 1px solid var(--line); }
.eplist li:first-child { border-top: 0; }
.eprow { padding: 12px 0; transition: background var(--fast); }
.eprow:hover { background: var(--hundido); }
.epnum { font-size: 44px; color: var(--faint); transition: color var(--fast); }
li.visto .epnum { color: var(--campo); }
li.visto .epthumb img { opacity: .55; }
li.visto .eprow:hover .epthumb img { opacity: 1; }
li.actual .epnum { color: var(--acento); }
.epthumb { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--panel); }
.epthumb img { width: 100%; height: 100%; object-fit: cover; }
.epthumb .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13,13,12,.5); opacity: 0; transition: opacity var(--fast); }
.eprow:hover .epthumb .play { opacity: 1; }
.epthumb .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(13,13,12,.72); }
.epthumb .bar i { display: block; height: 100%; background: var(--acento); }
.epinfo { min-width: 0; }
.eptitle { display: block; font-size: var(--t-17); font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--fast); }
.eprow:hover .eptitle { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.eptitle.generico { color: var(--dim); font-weight: 500; }
.epsub-en-titulo { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: var(--t-15); }
.epsub-en-titulo .chip { font-size: var(--t-11); }
.pap-tipo { color: var(--dim); }
.ayuda-fila .gesto { font-size: var(--t-12); font-weight: 600; color: var(--dim); text-align: right; }
.epsub { font-size: var(--t-12); color: var(--faint); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.epstate {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.epstate svg { width: 14px; height: 14px; }
.epstate.vivo { color: var(--acento); }
.epstate.visto { color: var(--dim); }
.epwatch {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--campo); color: var(--faint);
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.epwatch svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--fast); }
.epwatch:hover svg, .epwatch:focus-visible svg, .epwatch[aria-pressed="true"] svg { opacity: 1; }
.epwatch:not([aria-pressed="true"]):hover svg { opacity: .5; }
.epwatch:hover { border-color: var(--text); color: var(--text); }
/* Lo visto es pasado: marca clara, pero sin relleno blanco que grite mas que
   el episodio en curso. */
.epwatch[aria-pressed="true"] { background: var(--panel-2); border-color: var(--dim); color: var(--text); }
.chip {
  display: inline-flex; align-items: center; padding: 1px 6px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-size: var(--t-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
}

/* ===== estados ========================================================== */
.empty { max-width: 62ch; margin: 12vh 0; }
.empty h1, .empty h2 {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; font-stretch: 75%; line-height: 1;
  letter-spacing: -.03em; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--regla); text-wrap: balance;
}
.empty p { color: var(--dim); margin: 0 0 10px; max-width: 54ch; }
.empty code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-13);
  background: var(--panel); border: 1px solid var(--line); padding: 1px 6px; color: var(--text);
}
.empty pre {
  background: var(--hundido); border: 1px solid var(--line); padding: 16px 18px; overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-12); line-height: 1.75;
  color: var(--dim); margin-top: 24px;
}
.grid .empty { grid-column: 1 / -1; margin: 4vh 0 !important; }
.skeleton {
  background: linear-gradient(100deg, var(--hundido) 30%, var(--panel-2) 50%, var(--hundido) 70%);
  background-size: 300% 100%; animation: sweep 1.4s linear infinite;
}
@keyframes sweep { to { background-position: -300% 0; } }
.detalle-tecnico { margin-top: 26px; font-size: var(--t-12); color: var(--faint); }
.detalle-tecnico summary { cursor: pointer; display: inline-block; padding: 4px 0; }
.detalle-tecnico summary:hover { color: var(--dim); }
.detalle-tecnico code { display: block; margin-top: 10px; white-space: pre-wrap; word-break: break-word; }

/* ===== avisos =========================================================== */
/* A lo ancho, con margen: centrado con left:50% el aviso solo disponia de
   media pantalla y en el movil se partia en tres lineas. */
.toasts { position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 90; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: var(--sombra); font-size: var(--t-13); text-wrap: pretty;
  animation: toastin .26s var(--ease); pointer-events: auto;
}
.toast.bad { border-color: color-mix(in srgb, var(--peligro) 60%, transparent); color: var(--peligro); }
/* Confirmado: la luz de tally delante del texto, no una franja de color. */
.toast.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); flex: none; }
.toast:has(.toast-accion) { padding-right: 8px; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }
.toast-accion {
  flex: none; white-space: nowrap; margin-left: 4px; padding: 5px 10px;
  border: 1px solid var(--line-2); color: var(--text);
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 600;
  transition: border-color var(--fast);
}
.toast-accion:hover { border-color: var(--text); }
.toast-accion kbd { padding: 1px 4px; min-width: 0; font-size: 10px; color: var(--faint); }
/* Viendo un episodio los avisos suben bajo el titulo: abajo tapaban los
   controles. */
body.watching .toasts { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 84px); }
body:has(.player .menu, .pdrawer) .toasts { opacity: 0; pointer-events: none; }

/* ===== login ============================================================ */
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.login-card { width: 100%; max-width: 380px; }
.login-card .brand { padding: 0; font-size: var(--t-26); }
.login-card .tagline { color: var(--faint); font-size: var(--t-13); margin: 8px 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--regla); }
.field { margin-bottom: 16px; }
.field label, .field > span {
  display: block; margin-bottom: 7px;
  font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.field input {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--hundido); border: 1px solid var(--campo); border-radius: var(--r);
  transition: border-color var(--fast);
}
.field input:focus-visible { outline: none; border-color: var(--text); box-shadow: inset 0 -2px 0 var(--acento); }
.field input[aria-invalid="true"], .field input[aria-invalid="true"]:focus-visible { border-color: var(--peligro); box-shadow: inset 0 -2px 0 var(--peligro); }
.login-card .btn { width: 100%; height: 46px; margin-top: 8px; }
.login-error {
  margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--peligro) 60%, transparent);
  color: var(--peligro); font-size: var(--t-13);
}
.login-foot { margin-top: 28px; font-size: var(--t-12); color: var(--faint); }

/* ===== reproductor ====================================================== */
body.watching { overflow: hidden; }
.player { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; align-items: center; justify-content: center; }
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player.idle { cursor: none; }
.player.idle .pbar, .player.idle .ptop { opacity: 0; pointer-events: none; }

/* Las barras se pegan al fotograma, no a la ventana (con letterbox grande los
   controles quedaban lejisimos de la imagen). Velos en degradado de siete
   paradas: sobre un fotograma claro una rampa de dos paradas bandea. */
.ptop {
  position: absolute; top: var(--letterbox, 0px); left: 0; right: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 14px var(--lat) 46px;
  background: linear-gradient(to bottom,
    rgba(13,13,12,.96) 0%, rgba(13,13,12,.9) 16%, rgba(13,13,12,.76) 34%,
    rgba(13,13,12,.54) 54%, rgba(13,13,12,.28) 74%, rgba(13,13,12,.08) 90%, transparent 100%);
  transition: top .2s var(--ease), opacity .3s var(--ease);
}
.ptop .titles { min-width: 0; }
.ptop .t1 { font-size: var(--t-17); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptop .t2 { font-size: var(--t-13); color: var(--dim); margin-top: 1px; }
.ptop .t2 a:hover { color: var(--text); }
.ptop .spacer { flex: 1; }
/* Ruta de la senal: codec -> modo de envio -> resolucion. */
.pruta, .pruta-v { display: flex; align-items: center; gap: 6px; flex: none; }
.pruta b { font-size: var(--t-11); font-weight: 600; letter-spacing: .1em; border: 1px solid var(--line-2); padding: 3px 7px; }
.pruta i { font-style: normal; font-size: var(--t-11); color: var(--faint); }
.preloj { font-size: var(--t-17); font-weight: 600; font-stretch: 85%; padding-left: 16px; border-left: 1px solid var(--line-2); flex: none; }

.pbar {
  position: absolute; left: 0; right: 0; bottom: var(--letterbox, 0px);
  padding: 56px var(--lat) 14px;
  background: linear-gradient(to top,
    rgba(13,13,12,.96) 0%, rgba(13,13,12,.9) 16%, rgba(13,13,12,.76) 34%,
    rgba(13,13,12,.54) 52%, rgba(13,13,12,.3) 70%, rgba(13,13,12,.1) 86%, transparent 100%);
  transition: bottom .2s var(--ease), opacity .3s var(--ease);
}
/* Barra de progreso continua con cabezal de linea, como en un editor. No
   engorda al apuntar (animar su altura provoca reflow): se aclara el carril y
   crece el cabezal. */
.scrub { position: relative; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.scrub .track { position: relative; width: 100%; height: 4px; background: rgba(242,242,238,.16); transition: background var(--fast); }
.scrub:hover .track, .scrub:focus-visible .track, .scrub.dragging .track { background: rgba(242,242,238,.24); }
.scrub .buf { position: absolute; inset: 0 auto 0 0; height: 100%; background: rgba(242,242,238,.28); }
.scrub .fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--acento); }
.scrub .knob {
  position: absolute; top: 50%; width: 2px; height: 22px; background: var(--text);
  transform: translate(-1px, -50%) scaleY(.72);
  transition: transform var(--fast);
}
.scrub:hover .knob, .scrub.dragging .knob, .scrub:focus-visible .knob { transform: translate(-1px, -50%); }
.scrub:focus-visible { outline-offset: 4px; }
.scrub .hover-time {
  position: absolute; bottom: 26px; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 2px 7px;
  font-size: var(--t-12); font-weight: 600; font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
}
.pcontrols { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.pcontrols .time { display: flex; align-items: baseline; gap: 6px; margin: 0 16px 0 10px; white-space: nowrap; color: var(--faint); font-size: var(--t-15); font-weight: 600; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.pcontrols .time .ahora { color: var(--text); font-size: 2.25rem; line-height: 1; font-weight: 700; font-stretch: 62%; letter-spacing: -.03em; }
.pcontrols .time .sep { opacity: .7; }
.pcontrols .spacer { flex: 1; }
.pbtn {
  width: 42px; height: 42px; border-radius: var(--r);
  display: grid; place-items: center; color: var(--text);
  transition: background var(--fast), color var(--fast);
}
.pbtn:hover { background: rgba(242,242,238,.1); }
.pbtn:active { transform: scale(.95); }
.pbtn:disabled { opacity: .3; cursor: not-allowed; }
.pbtn[aria-expanded="true"], .pbtn[aria-pressed="true"] { background: rgba(242,242,238,.16); }
.pbtn.big { width: 46px; height: 46px; }
.volwrap { display: flex; align-items: center; gap: 6px; }
/* Deslizador propio: uno nativo entre controles dibujados cantaba. */
.volwrap input[type="range"] { -webkit-appearance: none; appearance: none; width: 84px; height: 16px; background: none; cursor: pointer; }
.volwrap input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--text) calc(var(--v, 100) * 1%), rgba(242,242,238,.22) 0); }
.volwrap input[type="range"]::-moz-range-track { height: 3px; background: linear-gradient(90deg, var(--text) calc(var(--v, 100) * 1%), rgba(242,242,238,.22) 0); }
.volwrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 3px; height: 14px; margin-top: -5.5px; background: var(--text); }
.volwrap input[type="range"]::-moz-range-thumb { width: 3px; height: 14px; border: 0; border-radius: 0; background: var(--text); }
.volwrap input[type="range"]:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
/* En pausa (y con el autoplay bloqueado) la barra se compacta: los
   subtitulos incrustados viven justo encima del borde inferior, y es cuando
   la persona se para a leerlos. */
.player.pausado .pbar { padding-top: 22px; background: linear-gradient(to top, rgba(13,13,12,.94) 0%, rgba(13,13,12,.8) 45%, rgba(13,13,12,.3) 80%, transparent 100%); }
.player.pausado .pcontrols .time .ahora { font-size: 1.5rem; }
/* Barras en una linea, dentro de la franja negra (ver mideLetterbox). */
.player.una-linea .pbar {
  height: var(--franja); padding: 0 var(--lat); background: none;
  display: flex; align-items: center; gap: 6px;
}
.player.una-linea .pcontrols { display: contents; }
.player.una-linea .pcontrols > * { order: 3; }
.player.una-linea #pplay, .player.una-linea #pprev, .player.una-linea #pnextb,
.player.una-linea #pback10, .player.una-linea #pfwd10, .player.una-linea #pskip { order: 1; }
.player.una-linea .scrub { order: 2; flex: 1; min-width: 120px; margin: 0 10px; }
.player.una-linea .pcontrols .spacer { display: none; }
.player.una-linea .pcontrols .time { margin: 0 8px; }
.player.una-linea .pcontrols .time .ahora { font-size: 1.25rem; }
.player.una-linea .pbtn { width: 38px; height: 38px; }
.player.una-linea .pbtn.big { width: 40px; height: 40px; }
.player.una-linea .pbtn.saltar { height: 32px; }
.player.una-linea .ptop { height: var(--franja); padding: 0 var(--lat); background: none; gap: 12px; }
.player.una-linea .ptop .t1 { font-size: var(--t-15); line-height: 1.2; }
.player.una-linea .ptop .t2 { font-size: var(--t-12); margin: 0; }
.player.una-linea .ptop .pbtn { width: 34px; height: 34px; }
.player.una-linea .pnext { bottom: calc(var(--franja) + 16px); }
.player.una-linea .pmenu .menu { bottom: calc(var(--franja) - 2px); }
/* Movil en horizontal: la linea fina va sobre la imagen, con un velo corto. */
.player.una-linea-sobre .pbar { background: linear-gradient(to top, rgba(13,13,12,.88), rgba(13,13,12,.55) 70%, transparent); }
.player.una-linea-sobre .ptop { background: linear-gradient(to bottom, rgba(13,13,12,.88), rgba(13,13,12,.55) 70%, transparent); }
/* Los avisos se van con los controles: nada se queda sobre la imagen. */
.player.idle ~ .toasts .toast { opacity: 0; transition: opacity .3s var(--ease); }
/* Con el cajon abierto, la barra termina donde empieza el cajon. */
.player:has(.pdrawer) .ppausa { right: min(380px, 90vw); }
.player:has(.pdrawer) .pbar, .player:has(.pdrawer) .ptop { right: min(380px, 90vw); }
/* Acotado al reproductor: sin el .player alcanzaba al menu de la cuenta. */
.player .pmenu .menu { bottom: 54px; right: 0; top: auto !important; max-height: calc(100dvh - var(--letterbox, 0px) - 80px); overflow-y: auto; }

/* Saltar la intro: rectangulo con su cantidad. */
.pbtn.saltar {
  display: flex; align-items: center; gap: 8px;
  width: auto; height: 36px; padding: 0 12px 0 10px; margin-left: 4px;
  border: 1px solid var(--line-2); background: rgba(13,13,12,.6);
  font-size: var(--t-13); font-weight: 600;
  animation: saltarEntra .3s var(--ease);
}
.pbtn.saltar:hover { border-color: var(--text); background: rgba(13,13,12,.8); }
.pbtn.saltar .saltar-cuanto { color: var(--faint); font-weight: 500; }
@keyframes saltarEntra { from { opacity: 0; transform: translateX(-8px); } }

/* Cajon de episodios: una escaleta pequena a la derecha. */
.pdrawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 90vw); z-index: 5;
  background: var(--bg); border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  animation: slidein var(--med);
}
@keyframes slidein { from { transform: translateX(100%); } }
.pdrawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--regla); }
.pdrawer-head .t { font-size: var(--t-13); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdrawer-list { overflow-y: auto; }
.pdrawer-item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%;
  padding: 10px 18px; text-align: left; border-bottom: 1px solid var(--line);
  transition: background var(--fast);
}
.pdrawer-item:hover { background: var(--panel); }
.pdrawer-item[aria-current="true"] { background: var(--acento-fondo); box-shadow: inset 2px 0 0 var(--acento); }
.pdrawer-item .th { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--panel); }
.pdrawer-item .th img { width: 100%; height: 100%; object-fit: cover; }
.pdrawer-item .th .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(13,13,12,.72); }
.pdrawer-item .th .bar i { display: block; height: 100%; background: var(--acento); }
.pdrawer-item .tx { display: grid; min-width: 0; }
.pdrawer-item .ti { display: block; font-size: var(--t-13); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdrawer-item .su { display: block; font-size: var(--t-11); color: var(--faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pdrawer-item[aria-current="true"] .su { color: var(--acento); }
.pdrawer-esqueleto { height: 64px; margin: 10px 18px; }

.pcenter { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pcenter .ring {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(242,242,238,.18); border-top-color: var(--acento);
  animation: spin .8s linear infinite;
}

.pnext {
  position: absolute; right: var(--lat); bottom: calc(var(--letterbox, 0px) + 124px);
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--line-2);
  padding: 12px 12px 12px 16px; max-width: 360px; box-shadow: var(--sombra);
  animation: menuEntra .3s var(--ease);
}
.pnext-tx { min-width: 0; }
.pnext .lab::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); margin-right: 8px; vertical-align: 1px; }
.pnext .lab { font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pnext .ti { font-size: var(--t-15); font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnext .pnext-ver { height: 36px; padding: 0 14px; font-size: var(--t-13); }

video::cue { font-family: var(--ui); font-size: .92em; background: rgba(13,13,12,.82); line-height: 1.4; }

/* El disco de pausa es un bloque cuadrado, y tambien se pulsa: es lo primero
   que se ve cuando el navegador no deja arrancar solo. */
.ppausa { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; animation: pausaEntra .24s var(--ease); }
.ppausa button {
  width: 84px; height: 84px; display: grid; place-items: center; pointer-events: auto;
  background: rgba(13,13,12,.82); border: 1px solid var(--line-2); color: var(--text);
  transition: border-color var(--fast);
}
.ppausa button:hover { border-color: var(--text); }
.ppausa button:active { transform: scale(.97); }
.ppausa svg { width: 30px; height: 30px; margin-left: 3px; }
.ppausa { grid-template-rows: auto; align-content: center; justify-items: center; gap: 14px; }
.ppausa-nota { margin: 0; padding: 6px 12px; background: rgba(13,13,12,.85); font-size: var(--t-13); color: var(--dim); }
@keyframes pausaEntra { from { opacity: 0; transform: scale(.94); } }

.pgesto { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.pgesto span {
  padding: 10px 20px; background: rgba(13,13,12,.85); border: 1px solid var(--line-2);
  font-size: var(--t-26); font-weight: 700; font-stretch: 75%; font-variant-numeric: tabular-nums;
  animation: gestoEntra .45s var(--ease);
}
@keyframes gestoEntra { from { opacity: 0; transform: scale(.94); } }

/* Final del episodio: panel sobre el ultimo fotograma, alineado a la izquierda
   como el resto; cuenta atras con la misma linea que mide el progreso. */
.pfin {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center start; padding: 24px calc(var(--lat) + 6vw);
  background: rgba(13,13,12,.86);
  animation: fade .3s var(--ease);
}
.pfin-caja { width: min(520px, 100%); }
.pfin:focus { outline: none; }
/* La cuenta atras es el estado que importa: va en cifra grande. */
.pfin-cuenta { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.pfin-cuenta .cifra { font-size: clamp(4rem, 9vw, 6rem); line-height: .85; color: var(--acento); }
.pfin-seg { font-size: var(--t-13); color: var(--faint); }
.unidad { text-transform: none; }
.pfin-lab { margin: 0; font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.pfin-ti {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--regla);
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; font-stretch: 75%; line-height: 1; letter-spacing: -.03em; text-wrap: balance;
}
.pfin-ti.cifra { font-size: clamp(4rem, 9vw, 6rem); line-height: .85; }
.pnext .ti-serie { color: var(--faint); font-weight: 500; }
.pfin-txt { margin: 12px 0 0; color: var(--dim); text-wrap: pretty; }
.pfin .actions { margin-top: 24px; }
.pfin-reloj { height: 3px; margin-top: 18px; background: rgba(242,242,238,.16); overflow: hidden; }
.pfin-reloj i { display: block; height: 100%; width: 100%; background: var(--acento); transform: scaleX(1); transform-origin: left; }
.pfin-reloj i.corre { transform: scaleX(0); transition: transform 8s linear; }
.pfin.cierre .pfin-lab { color: var(--acento); }
/* Con el cartel final delante, ni bloque de pausa ni indicador de carga. */
.player:has(.pfin) .ppausa, .player:has(.pfin) .pcenter { display: none; }

/* ===== entrada del reproductor ========================================== */
/* El momento autoral del producto: se apagan las luces y se abre la imagen.
   Ocurre una vez por episodio y dura menos de lo que tarda el primer
   fotograma, asi que no hace esperar a nadie. */
.player.entrando { animation: telon .38s var(--ease) both; }
@keyframes telon { from { opacity: 0; } }
.player.entrando video { animation: telonImagen .58s var(--ease) both; }
@keyframes telonImagen { from { transform: scale(1.03); filter: brightness(.28) saturate(.55); } }
.player.entrando .ptop { animation: telonArriba .5s var(--ease) .06s both; }
.player.entrando .pbar { animation: telonAbajo .5s var(--ease) .06s both; }
@keyframes telonArriba { from { opacity: 0; transform: translateY(-12px); } }
@keyframes telonAbajo { from { opacity: 0; transform: translateY(14px); } }

/* ===== continuidad entre vistas ========================================= */
::view-transition-group(portada) { animation-duration: .42s; animation-timing-function: var(--ease); }
::view-transition-old(portada), ::view-transition-new(portada) { height: 100%; width: 100%; object-fit: cover; animation: none; }
::view-transition-old(root) { animation: vistaSale .16s var(--ease-salida) both; }
::view-transition-new(root) { animation: vistaEntra .26s var(--ease) both; }
@keyframes vistaSale { to { opacity: 0; } }
@keyframes vistaEntra { from { opacity: 0; } }

/* ===== panel de subida ================================================== */
.up-title { margin-top: 48px; font-size: clamp(2.25rem, 4.4vw, 3.5rem); font-weight: 700; font-stretch: 75%; letter-spacing: -.03em; line-height: 1; padding-bottom: 14px; border-bottom: 1px solid var(--regla); }
.up-lead { color: var(--dim); max-width: 62ch; margin: 16px 0 28px; }
.dropzone {
  display: grid; justify-items: start; gap: 6px;
  padding: 36px 32px;
  border: 1px dashed var(--line-2); background: var(--hundido);
  color: var(--dim); cursor: pointer;
  transition: border-color var(--med), background var(--med);
}
.dropzone:hover { border-color: var(--dim); }
.dropzone.activa { border-color: var(--acento); border-style: solid; background: var(--acento-fondo); }
.dropzone.leyendo { opacity: .6; pointer-events: none; }
.dropzone.compacta { padding: 14px 20px; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
.dropzone.compacta .dz-icon { margin: 0; }
.dropzone.compacta .dz-main { font-size: var(--t-15); }
.dropzone.compacta .dz-sub { margin: 0; grid-column: 1 / -1; }
.dropzone.compacta .dz-boton { height: 36px; }
.dz-icon { color: var(--faint); margin-bottom: 4px; }
.dz-main { font-size: var(--t-20); font-weight: 600; color: var(--text); }
.dz-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.dz-boton { height: 42px; }
.linkish { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
button.linkish { padding: 4px 0; font-size: var(--t-13); font-weight: 500; }
button.linkish:hover { text-decoration-color: var(--acento); }
.dz-nota { font-size: var(--t-12); color: var(--faint); max-width: 48ch; flex-basis: 100%; }
.up-space { font-size: var(--t-12); color: var(--faint); margin: 10px 0 0; }

.up-form { margin-top: 32px; max-width: 480px; }
.up-nombre span { display: block; margin-bottom: 7px; font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.up-nombre input {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--hundido); border: 1px solid var(--campo); border-radius: var(--r);
  font-size: var(--t-17); font-weight: 500;
  transition: border-color var(--fast);
}
.up-nombre input:focus-visible { outline: none; border-color: var(--text); box-shadow: inset 0 -2px 0 var(--acento); }
.up-hint { font-size: var(--t-12); color: var(--faint); margin: 8px 0 0; }
.up-hint.mal { color: var(--peligro); }
.up-nombre input[aria-invalid="true"] { border-color: var(--peligro); }
.up-resumen { margin: 32px 0 6px; display: flex; flex-direction: row; align-items: baseline; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--regla); }
.up-hint-lista { margin: 8px 0 10px; }
/* Con listas largas, Subir sigue a mano: la barra de acciones se pega abajo. */
.up-acciones { position: sticky; bottom: 0; z-index: 3; margin-top: 22px; padding: 12px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }

.up-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.up-item {
  display: grid; grid-template-columns: 40px 1fr auto auto 100px; align-items: center;
  gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); position: relative;
}
.up-num { color: var(--faint); font-weight: 700; font-stretch: 75%; font-size: var(--t-20); font-variant-numeric: tabular-nums; }
.up-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-13); }
.up-size { font-size: var(--t-12); color: var(--faint); font-variant-numeric: tabular-nums; }
.up-state { font-size: var(--t-11); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: right; }
.up-state[data-estado="subiendo"] { color: var(--acento); }
.up-state[data-estado="hecho"] { color: var(--text); }
.up-state[data-estado="saltado"] { color: var(--dim); }
.up-state[data-estado="error"] { color: var(--peligro); }
.up-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.up-bar i { display: block; height: 100%; width: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.up-ren { color: var(--faint); font-size: var(--t-11); }
.up-pre { color: var(--faint); }
// Por que fallo un episodio. Va debajo de su fila, ocupando todo el ancho,
// porque el motivo (servidor, error de yt-dlp) es largo y no cabe en la
// columna de estado.
.up-error {
  grid-column: 1 / -1; font-size: var(--t-12); color: var(--peligro);
  overflow-wrap: anywhere; padding-left: 54px;
}
.up-list.bloqueada .up-tools { display: none; }
.up-global { margin-top: 20px; }
.up-global-bar { height: 4px; background: rgba(242,242,238,.14); overflow: hidden; }
.up-global-bar i { display: block; height: 100%; width: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.up-global-txt { font-size: var(--t-12); color: var(--dim); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.up-aviso {
  margin-top: 22px; padding: 12px 16px;
  border: 1px solid var(--line-2); background: var(--hundido);
  color: var(--dim); font-size: var(--t-13);
}
.up-aviso.ok { border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.up-aviso.ok b { color: var(--text); }
.up-aviso.bad { border-color: color-mix(in srgb, var(--peligro) 60%, transparent); color: var(--peligro); }

/* ===== herramientas de ficheros ========================================= */
.mini {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  color: var(--faint); border: 1px solid transparent; border-radius: var(--r);
  transition: color var(--fast), border-color var(--fast);
}
.mini:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); }
.mini:active:not(:disabled) { transform: scale(.94); }
.mini:disabled { opacity: .28; cursor: not-allowed; }
.mini.danger:hover:not(:disabled) { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 55%, transparent); }
.ep-tools, .up-tools { display: flex; gap: 2px; align-items: center; }

/* Boton pequeño CON TEXTO, para las filas donde hace falta decir que hace (las
   descargas interrumpidas: reanudar, quitar, descartar). .mini no vale aqui:
   es de 32x32 fijos y solo para iconos, asi que al meterle "Reanudar" el texto
   se quedaba apretado en 32px. Este se mide por su contenido. */
.up-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 32px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: var(--r); background: none;
  font-family: var(--ui); font-weight: 600; font-size: var(--t-13); color: var(--dim);
  transition: color var(--fast), border-color var(--fast);
}
.up-btn:hover { color: var(--text); border-color: var(--text); }
.up-btn:active { transform: scale(.97); }
.up-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.up-btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.up-btn.primary:hover { background: #fff; border-color: #fff; }
.up-btn.danger:hover {
  color: var(--peligro);
  border-color: color-mix(in srgb, var(--peligro) 55%, transparent);
}
/* Los iconos vienen a 19px por defecto, y en un boton de 32 se ven enormes. */
.up-btn svg { width: 15px; height: 15px; }
.up-edit {
  width: 100%; max-width: 480px; height: 32px; padding: 0 10px;
  background: var(--hundido); border: 1px solid var(--text); border-radius: var(--r);
  font-size: var(--t-13); font-family: var(--ui);
}
.up-edit:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--acento); }
.mini.asa { cursor: grab; touch-action: none; }
.mini.asa:active { cursor: grabbing; }
li.arrastrando { background: var(--panel-2); box-shadow: var(--sombra), inset 2px 0 0 var(--acento); position: relative; z-index: 2; }
li.arrastrando .eprow { background: transparent; }
.eplist, .up-list { touch-action: pan-y; }

/* ===== modo Editar ====================================================== */
.edit-bar {
  display: grid; gap: 14px; margin: 0; padding: 20px 22px;
  border: 1px solid var(--line-2); background: var(--hundido);
}
.edit-serie { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.edit-serie .field { margin: 0; flex: 1; min-width: 240px; }
.edit-serie input {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--bg); border: 1px solid var(--campo); border-radius: var(--r);
}
.edit-serie input:focus-visible { outline: none; border-color: var(--text); box-shadow: inset 0 -2px 0 var(--acento); }
.edit-nota { font-size: var(--t-12); color: var(--faint); margin: 0; max-width: 70ch; }
.edit-grupo { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.edit-seccion { border-bottom: 0; padding-bottom: 0; }
.edit-etiqueta { margin: 0; font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.edit-lote { display: flex; gap: 10px; flex-wrap: wrap; }
.edit-lote .btn, .edit-peligro .btn { height: 38px; padding: 0 14px; font-size: var(--t-13); }
.edit-peligro { justify-items: start; }

/* editor de portada y banner */
.art-fold summary { cursor: pointer; list-style: none; padding: 4px 0; display: flex; align-items: center; gap: 10px; }
.art-fold summary::-webkit-details-marker { display: none; }
.art-fold summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(-45deg); transition: transform var(--fast);
}
.art-fold[open] summary::before { transform: rotate(45deg); }
.art-sum { font-size: var(--t-13); font-weight: 500; color: var(--dim); }
.art-fold summary:hover .art-sum { color: var(--text); }
.art-grid { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 22px; margin-top: 14px; max-width: 700px; align-items: start; }
.art-slot { display: grid; gap: 10px; }
.art-slot h4 { margin: 0; font-size: var(--t-11); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.art-drop {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border: 1px dashed var(--line-2); background: var(--bg); cursor: pointer; color: var(--faint);
  transition: border-color var(--fast);
}
.art-drop.portada { aspect-ratio: 2/3; }
.art-drop.banner { aspect-ratio: 16/9; }
.art-drop:hover, .art-drop.activa { border-color: var(--text); }
.art-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-drop .art-hint {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px;
  padding: 10px 12px; text-align: center; font-size: var(--t-12);
  background: rgba(13,13,12,.82); transition: opacity var(--fast);
}
.art-drop:has(img) .art-hint { opacity: 0; }
.art-drop:has(img):hover .art-hint, .art-drop:has(img):focus-visible .art-hint, .art-drop.activa .art-hint { opacity: 1; }
.art-drop.leyendo { opacity: .6; pointer-events: none; }
.art-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.art-acciones .btn { height: 36px; padding: 0 14px; font-size: var(--t-13); }
.art-nota { font-size: var(--t-12); color: var(--faint); margin: 0; }
.art-drop.encuadrable { cursor: grab; touch-action: none; }
.art-drop.encuadrable.moviendo { cursor: grabbing; }
.art-drop.encuadrable img { transform-origin: center; }
.enc-zoom { display: flex; align-items: center; gap: 10px; font-size: var(--t-12); color: var(--faint); }
.enc-zoom input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 16px; background: none; cursor: pointer; }
.enc-zoom input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--line-2); }
.enc-zoom input[type="range"]::-moz-range-track { height: 3px; background: var(--line-2); }
.enc-zoom input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 14px; margin-top: -5.5px; background: var(--text); }
.enc-zoom input[type="range"]::-moz-range-thumb { width: 3px; height: 14px; border: 0; border-radius: 0; background: var(--text); }
.art-acciones .btn.pendiente { border-color: var(--acento); }
.renombra { display: flex; align-items: center; gap: 4px; }

/* ===== papelera ========================================================= */
.pap-vaciar { margin-top: 24px; justify-content: flex-end; }
.pap-vaciar .btn { height: 38px; padding: 0 14px; font-size: var(--t-13); }
.pap-lista { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--regla); }
.pap-item { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pap-info { flex: 1; min-width: 200px; }
.pap-nombre { display: block; font-size: var(--t-15); font-weight: 600; }
.pap-meta { display: block; font-size: var(--t-12); color: var(--faint); margin-top: 3px; }
.pap-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pap-acciones .btn { height: 38px; padding: 0 14px; font-size: var(--t-13); }
.pap-acciones .danger-btn { border-color: var(--line-2); color: var(--dim); }
.pap-acciones .danger-btn:hover, .pap-acciones .danger-btn:focus-visible { border-color: var(--peligro); color: var(--peligro); }

/* ===== responsive ======================================================= */
@media (max-width: 1000px) {
  .searchbtn kbd { display: none; }
  .section-head { position: static; }
  .section:has(> .section-head) { grid-template-columns: 1fr; row-gap: 20px; padding: 36px 0; }
  .section-head { flex-direction: row; align-items: baseline; gap: 12px; }
  .hero-inner { grid-template-columns: 180px minmax(0, 1fr); padding: 32px 0; }
  .ephead, .eprow { grid-template-columns: 56px 112px minmax(0, 1fr) 140px 36px; column-gap: 16px; }
  .eprow:has(.ep-tools), .escaleta:has(.ep-tools) .ephead { grid-template-columns: 56px 112px minmax(0, 1fr) auto 36px; }
  .eprow:has(.ep-tools) .epstate, .escaleta:has(.ep-tools) .ephead span:nth-child(5) { display: none; }
  .epnum { font-size: 36px; }
  .pruta { display: none; }
}
@media (max-width: 620px) {
  .topbar { height: 48px; }
  .crumbs, .topbar .reloj { display: none; }
  .brand { padding: 0 16px 0 var(--lat); }
  .searchbtn { padding: 0 16px; }
  .searchbtn span { display: none; }
  .usertrigger { padding: 0 var(--lat) 0 14px; }
  .hero-inner { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 24px 0; }
  .hero-text { display: contents; }
  .hero-poster { grid-row: 1 / 3; align-self: start; }
  .hero-text > h1, .hero-text > .hero-meta { grid-column: 2; }
  .hero-text h1 { font-size: 2.25rem; }
  .hero-meta { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 28px; }
  .hero-meta > div { padding-right: 0; margin-right: 0; border-right: 0; }
  .hero-meta dd { font-size: var(--t-17); }
  .hero-actions { grid-column: 1 / -1; gap: 10px; margin-top: 20px; }
  .hero-actions #mainplay { flex: 1 1 100%; }
  .hero-actions #editar { height: 40px; padding: 0 16px; font-size: var(--t-13); }
  .ephead { display: none; }
  .up-pre { display: none; }
  .eprow, .eprow:has(.ep-tools) {
    grid-template-columns: 40px 96px minmax(0, 1fr) auto;
    grid-template-areas: "num thumb info watch" "num thumb state watch";
    column-gap: 12px; row-gap: 2px; padding: 10px 0;
  }
  .epnum { grid-area: num; font-size: 28px; }
  .epthumb { grid-area: thumb; }
  .epinfo { grid-area: info; align-self: end; }
  .epstate { grid-area: state; align-self: start; }
  .epwatch { grid-area: watch; }
  .eprow:has(.ep-tools) { grid-template-areas: "num thumb info watch" "num thumb state watch" "tools tools tools tools"; }
  .eprow .ep-tools { grid-area: tools; justify-content: flex-end; padding-top: 6px; }
  .eprow:has(.ep-tools) .epstate { display: flex; }
  .eptitle { font-size: var(--t-15); }
  .epsub .chip { display: none; }
  .rail { grid-template-columns: 1fr; gap: 10px; }
  .tile { flex-direction: row; }
  .tile-art { width: 42%; flex: none; aspect-ratio: 16/9; align-self: center; }
  .tile-meta { flex: 1; min-width: 0; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; align-content: center; }
  .tile-num { font-size: 40px; }
  .tile-num small { display: none; }
  .tile-left { white-space: nowrap; }
  /* La X va sobre la esquina de la miniatura: el texto necesita todo su ancho. */
  .tile-dismiss { right: auto; left: calc(42% - 50px); top: 6px; }
  .tile-title { font-size: var(--t-15); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .pbar { padding: 64px 14px 14px; }
  .ptop { padding: 12px 14px 40px; }
  .preloj { font-size: var(--t-15); padding-left: 12px; }
  .pcontrols { gap: 0; }
  .pcontrols .time { position: absolute; top: 30px; right: 14px; margin: 0; }
  .pcontrols .time .ahora { font-size: 1.5rem; }
  .volwrap { display: none; }
  .pnext { right: 12px; left: 12px; bottom: calc(var(--letterbox, 0px) + 116px); max-width: none; }
  .overlay { padding: 12px; }
  .palette-foot { display: none; }
  .art-grid { grid-template-columns: 1fr; }
  .up-item { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 2px; }
  .up-item .up-size { grid-column: 2; grid-row: 2; }
  .up-item .up-state { grid-column: 3; grid-row: 2; text-align: right; }
  .up-item .up-tools { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .dropzone { padding: 28px 20px; }
  .ppausa button { width: 72px; height: 72px; }
  .ppausa svg { width: 26px; height: 26px; }
}

@media (max-height: 520px) {
  .player .menu-ajustes #mayuda, .player .menu-ajustes a[download], .player .menu-ajustes .menu-pie, .player .menu-ajustes hr:last-of-type { display: none; }
  .player .menu .menu-nota { display: none; }
  body.watching .toasts { top: 64px; left: auto; right: 16px; justify-items: end; max-width: 60vw; }
  .ptop { padding-top: 8px; padding-bottom: 24px; }
  .pbar { padding-top: 30px; padding-bottom: 8px; }
  .pcontrols .time .ahora { font-size: 1.5rem; }
}

/* ===== ergonomia tactil ================================================= */
/* Con el dedo hacen falta 44px: 30px en las herramientas de edicion eran una
   invitacion a borrar el episodio equivocado. */
@media (pointer: coarse) {
  .mini { width: 44px; height: 44px; }
  .ep-tools { gap: 4px; }
  .ep-tools .mini.danger, .up-tools .mini.danger { margin-left: 12px; }
  .epwatch { width: 44px; height: 44px; }
  .tile-dismiss { opacity: 1; width: 44px; height: 44px; }
  .seg button, .tab { padding: 12px 0; }
  .btn { height: 46px; }
  .art-acciones .btn, .edit-lote .btn, .edit-peligro .btn, .pap-acciones .btn, .pap-vaciar .btn, .hero-actions #editar { height: 44px; }
  .art-fold summary { min-height: 44px; }
  .renombra .mini { width: 44px; height: 44px; }
  .pbtn { width: 46px; height: 46px; }
  .pbtn.big { width: 52px; height: 52px; }
  .scrub { height: 34px; }
  /* El doble toque a los lados ya salta 10 s: estos botones solo estorbaban. */
  #pback10, #pfwd10 { display: none; }
  .volwrap { display: none; }
  .menu button, .menu a { min-height: 44px; }
  .toast-accion kbd, .menu-kbd { display: none; }
  /* La linea fina tambien respeta los 44 px del dedo (cabe en la franja de 52). */
  .player.una-linea .pbtn, .player.una-linea .pbtn.big, .player.una-linea .ptop .pbtn { width: 44px; height: 44px; }
}

/* Menos movimiento no es ningun movimiento: se quita el desplazamiento por el
   espacio, pero el color y la opacidad siguen confirmando lo que haces. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .mini:active, .pbtn:active, .ppausa button:active { transform: none; }
  .brand .wm-b::after { transition: none; }
  .pfin-reloj i.corre { transition-duration: 8s !important; }
  .pcenter .ring, .iconbtn[aria-busy="true"] svg, .btn[aria-busy="true"] svg, .usertrigger[aria-busy="true"] svg { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}