/* Relleno Anime
   Dirección: catálogo de consulta. Referencia principal: AnimeFillerList, su
   estructura hecha en condiciones. De Caniuse viene el principio de que los
   datos mandan y las cifras van antes que el texto.

   Reglas que no se tocan:
   - El color de estado significa el tipo de episodio. Nunca decora.
   - La raya izquierda de las filas comunica ese tipo. Fuera de ahí, no hay rayas.
   - Lienzo claro, números tabulares, nada de serif de revista. */

:root{
  /* Direccion "Papel": el lienzo tira a crema y el panel es mas calido que el
     blanco puro, que es lo que le da el aire de pagina impresa. Los colores de
     canon, mixto y relleno no se tocan: estan medidos y pasan AA. */
  --lienzo:#fbf9f5;
  --panel:#f4f1ea;
  --tinta:#1d1c1a;
  --tinta-2:#6b665e;
  --regla:#e3ded3;
  --regla-fuerte:#cfc9bc;

  --acento:#ae3a0b;
  --acento-vivo:#8d2f08;
  --acento-tenue:#fdf0e9;
  --sobre-acento:#ffffff;

  --canon:#276a41;
  --canon-fondo:#e9f3ec;
  --mixto:#7d560d;
  --mixto-fondo:#faf1dd;
  --relleno:#ab3325;
  --relleno-fondo:#fbeae7;
  --relleno-fila:#fdf6f5;

  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --texto:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --salida:cubic-bezier(.22,1,.36,1);
  --suave:cubic-bezier(.4,0,.2,1);
  --ancho:1120px;
  --alto-cabecera:60px;   /* la cabecera del sitio mide 59: la tabla se pega justo debajo */
}

/* El oscuro ya no va por preferencia del sistema: Papel es lo que ve
   todo el mundo al entrar. Quien quiera oscuro lo pide con el boton de
   la cabecera, y se recuerda. */
:root[data-tema="oscuro"]{
    --lienzo:#14151a;
    --panel:#1b1d23;
    --tinta:#ecebe7;
    --tinta-2:#9a958c;
    --regla:#2b2e36;
    --regla-fuerte:#3a3e48;

    --acento:#f2704a;
    --acento-vivo:#ff8a68;
    --acento-tenue:#33201a;
    --sobre-acento:#14151a;

    --canon:#5dbd85;
    --canon-fondo:#16301f;
    --mixto:#d9a851;
    --mixto-fondo:#332912;
    --relleno:#f0776a;
    --relleno-fondo:#37201d;
    --relleno-fila:#1f1a1a;
}


*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--lienzo);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:15.5px;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}

.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 22px}

a{color:var(--acento);text-underline-offset:.16em}
a:hover{color:var(--acento-vivo)}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:3px}

.salta{position:absolute;left:-9999px;top:0;background:var(--tinta);color:var(--lienzo);padding:.7rem 1.1rem;z-index:50;font-weight:600}
.salta:focus{left:.5rem;top:.5rem}

/* ------------------------------------------------------ cabecera y pie */

.cabecera{background:var(--panel);border-bottom:1px solid var(--regla);position:sticky;top:0;z-index:20}
.cabecera .envoltorio{display:flex;align-items:center;gap:26px;height:58px}
/* La marca lleva el mapa de una serie en miniatura: verde lo que cuenta,
   ambar lo mixto, rojo el relleno. Es la misma figura que la pagina pinta
   en cada serie, asi que el logotipo dice lo que hace el sitio en vez de
   ser un adorno. Las proporciones son las de una serie cualquiera. */
.marca{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--tinta);line-height:1}
.marca-mapa{display:flex;flex-direction:column;gap:2px;width:22px;flex:none}
.marca-mapa i{display:block;border-radius:2px}
/* Los colores hay que darlos aqui: .t-canon y compania estan acotados a
   la tira y a la tabla, sueltos no pintan nada. */
.marca-mapa .t-canon{height:8px;background:var(--canon)}
.marca-mapa .t-mixto{height:3px;background:var(--mixto)}
.marca-mapa .t-relleno{height:4px;background:var(--relleno)}
.marca-texto{font-family:var(--display);font-weight:800;font-size:19px;
  letter-spacing:-.035em}
/* El espacio es de verdad, no un margen: con "RellenoAnime" pegado, un
   lector de pantalla lo lee como una sola palabra inventada. */
.marca em{font-style:normal;color:var(--acento);font-weight:600;
  letter-spacing:-.02em}
.marca:hover .marca-texto{color:var(--acento-vivo)}
.marca:hover em{color:var(--tinta)}
.marca-texto,.marca em{transition:color .2s var(--suave)}
@media(max-width:400px){.marca-texto{font-size:17px}.marca-mapa{width:16px}}
.cabecera nav{display:flex;gap:20px;font-size:14px;font-weight:500}
.cabecera nav a{color:var(--tinta-2);text-decoration:none;transition:color .2s var(--suave)}
.cabecera nav a:hover{color:var(--tinta)}

.pie{border-top:1px solid var(--regla);background:var(--panel);margin-top:60px;padding:28px 0 44px;font-size:14px;color:var(--tinta-2)}
.pie p{margin:0 0 .6rem}
.pie nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.pie a{color:var(--tinta-2)}

/* ---------------------------------------------------------- tipografía */

h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.1}
h1{font-size:clamp(28px,5vw,38px);font-weight:800;margin:0 0 10px;text-wrap:balance}
h2{font-size:clamp(20px,3vw,24px);font-weight:800;margin:0 0 12px}
h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
p{margin:0 0 1rem}

.migas{font-size:12.5px;color:var(--tinta-2);padding:20px 0 0;margin:0 0 10px}
.migas a{color:var(--tinta-2);text-decoration:none}
.migas a:hover{color:var(--acento)}

.entradilla{color:var(--tinta-2);font-size:15.5px;max-width:58ch;margin:0 0 14px;text-wrap:pretty}
/* La cifra de series, resaltada: es el dato que dice el tamano del sitio. */
.entradilla b{color:var(--tinta);font-weight:600}
.sello-fecha{display:inline-block;font-size:12.5px;font-weight:600;color:var(--acento);background:var(--acento-tenue);padding:4px 10px;border-radius:5px}

/* -------------------------------------------------------------- cabeza */

.cabeza{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;margin:8px 0 30px;align-items:start}
/* La placa: la portada de la serie dibujada con sus propios datos.
   La tira de densidad puesta en vertical, sobre el tono dominante de la
   carátula real. Ni una imagen de terceros. */
.placa{
  aspect-ratio:2/3;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--regla);
  position:relative;
}
.placa::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--tono,#7a7a7a);
  opacity:.1;
  pointer-events:none;
}
.placa-tira{flex:1;display:flex;flex-direction:column;padding:7px 7px 0;gap:1px}
.placa-tira i{display:block;border-radius:1px}
.placa-tira .t-canon{background:var(--canon)}
.placa-tira .t-mixto{background:var(--mixto)}
.placa-tira .t-relleno{background:var(--relleno)}
.placa-pie{
  padding:7px 9px 9px;
  position:relative;
  text-align:center;
  line-height:1.05;
}
.placa-pie b{
  display:block;
  font-family:var(--display);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--relleno);
}
.placa-pie span{
  display:block;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--tinta-2);
  font-weight:600;
}

/* La caratula enlazada se monta encima de la placa. Si no carga, se quita
   sola y queda la placa debajo, asi que el hueco nunca sale roto. */
.portada-caja{position:relative;aspect-ratio:2/3}
.portada-caja .placa{position:absolute;inset:0}
.portada-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--regla);
  background:var(--panel);
}

.ficha-estudio{display:inline-block;margin-left:10px;font-size:12.5px;color:var(--tinta-2)}
@media(max-width:620px){.cabeza{grid-template-columns:92px minmax(0,1fr);gap:16px}}

.cifras{display:flex;gap:28px;flex-wrap:wrap;list-style:none;padding:0;margin:16px 0 0}
.cifras li{margin:0}
.cifras b{display:block;font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.cifras b.rojo{color:var(--relleno)}
/* El cero de las series sin relleno: verde, porque aqui es buena noticia. */
.cifras b.verde{color:var(--canon)}
.cifras span{font-size:11.5px;color:var(--tinta-2);font-weight:500}

/* --------------------------------------------------------------- reja */

.reja{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:38px;align-items:start}
@media(max-width:900px){.reja{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------- la tira: la serie de un vistazo */

.tira-tit{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-2);font-weight:600;margin:0 0 7px}
.tira{display:flex;height:30px;border-radius:5px;overflow:hidden;margin:0 0 5px;background:var(--regla)}
.tira i{display:block}
.tira .t-canon{background:var(--canon)}
.tira .t-mixto{background:var(--mixto)}
.tira .t-relleno{background:var(--relleno)}
.escala{display:flex;justify-content:space-between;font-size:11px;color:var(--tinta-2);font-variant-numeric:tabular-nums;margin:0 0 26px}

/* -------------------------------------------------------- lista rápida */

.rapida{background:var(--panel);border:1px solid var(--regla);border-radius:9px;padding:15px 18px;margin:0 0 28px}
.rapida h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-2);font-weight:600;margin:0 0 9px;font-family:var(--texto)}
.rapida p{margin:0;font-size:14px;font-variant-numeric:tabular-nums;line-height:1.95}

/* ------------------------------------------------------------- filtros */

.filtros{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 14px}
.filtros button{appearance:none;border:1px solid var(--regla-fuerte);background:var(--panel);border-radius:7px;padding:7px 14px;font:500 13px var(--texto);color:var(--tinta-2);cursor:pointer;transition:background .2s var(--suave),color .2s var(--suave),border-color .2s var(--suave)}
.filtros button:hover{color:var(--tinta)}
.filtros button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--lienzo)}
@media(pointer:coarse){.filtros button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ----------------------------------------------- la tabla de episodios */

.tabla-envoltura{overflow-x:auto}
@supports (overflow-x:clip){
  /* Con "clip" no hay contenedor de scroll, asi que la cabecera pegajosa
     de la tabla funciona. Con "auto" no: el navegador convierte tambien
     overflow-y en auto y sticky deja de tener efecto. */
  .tabla-envoltura{overflow-x:clip;overflow-y:visible}
}
table.episodios{width:100%;border-collapse:collapse;font-size:14.5px}
table.episodios thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-2);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--regla-fuerte);white-space:nowrap}
table.episodios td{padding:9px 10px;border-bottom:1px solid var(--regla);vertical-align:top}
table.episodios tbody tr{border-left:3px solid transparent}
table.episodios tbody tr.t-canon{border-left-color:var(--canon)}
table.episodios tbody tr.t-mixto{border-left-color:var(--mixto)}
table.episodios tbody tr.t-relleno{border-left-color:var(--relleno);background:var(--relleno-fila)}
table.episodios tbody tr.oculta{display:none}

.col-n{font-variant-numeric:tabular-nums;color:var(--tinta-2);width:52px;font-size:13.5px;white-space:nowrap}
.col-tit{font-weight:500}
.col-tit i{font-style:normal;color:var(--tinta-2);font-weight:400}
.col-tit small{display:block;font-size:12px;color:var(--tinta-2);font-weight:400;margin-top:2px}
.col-fecha{color:var(--tinta-2);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}

.chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap}
.chip.t-canon{background:var(--canon-fondo);color:var(--canon)}
.chip.t-mixto{background:var(--mixto-fondo);color:var(--mixto)}
.chip.t-relleno{background:var(--relleno-fondo);color:var(--relleno)}

.aviso-tabla{font-size:13px;color:var(--tinta-2);margin:12px 0 0}

/* En movil la fecha sobra: con numero, titulo y tipo la tabla cabe sin scroll
   lateral. Sigue en el HTML, solo se oculta, asi que Google la ve igual. */
@media(max-width:620px){
  table.episodios{font-size:14px}
  table.episodios td{padding:8px 7px}
  table.episodios .col-fecha,
  table.episodios thead th:nth-child(4){display:none}
  .col-n{width:38px}
}

/* ---------------------------------------------------------- los tramos */

.tramo{border-top:1px solid var(--regla);padding-top:16px;margin:0 0 20px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px}
@media(max-width:620px){.tramo{grid-template-columns:minmax(0,1fr);gap:6px}}
.tramo-rango{font-size:13px;color:var(--tinta-2);font-variant-numeric:tabular-nums;line-height:1.5}
.sello{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;padding:2px 7px;border-radius:4px;margin-top:6px}
.v-saltar .sello{background:var(--relleno-fondo);color:var(--relleno)}
.v-ver .sello,.v-merece-la-pena .sello{background:var(--canon-fondo);color:var(--canon)}

/* -------------------------------------------------- orden de visionado */

.orden{list-style:none;padding:0;margin:0 0 18px;counter-reset:paso}
.orden li{counter-increment:paso;position:relative;padding:0 0 22px 46px;border-left:1px solid var(--regla);margin-left:14px}
.orden li:last-child{border-left-color:transparent;padding-bottom:0}
.orden li::before{content:counter(paso);position:absolute;left:-14px;top:0;width:28px;height:28px;border-radius:50%;background:var(--tinta);color:var(--lienzo);display:grid;place-items:center;font-size:13px;font-weight:700;font-family:var(--display)}
.orden .titulo-paso{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.02em;display:block;line-height:1.25}
.orden .formato{font-size:12.5px;color:var(--tinta-2)}
.orden p{margin:.4rem 0 0}
.para-quien{color:var(--tinta-2);margin:-.3rem 0 1.2rem;max-width:56ch}
.recomendado{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;background:var(--acento);color:var(--sobre-acento);padding:3px 8px;border-radius:4px;margin-left:10px;vertical-align:.28em}

.opcional{border-left:2px solid var(--regla);padding-left:16px;margin:0 0 18px}

/* ------------------------------------------------------------ tarjetas */

/* ------------------------------------------------------------ buscador */

.buscador{margin:0 0 14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.buscador input{
  flex:1 1 260px;
  min-width:0;
  max-width:340px;
  font:400 15px var(--texto);
  color:var(--tinta);
  background:var(--panel);
  border:1px solid var(--regla-fuerte);
  border-radius:8px;
  padding:9px 13px;
}
.buscador input::placeholder{color:var(--tinta-2)}
.buscador input:focus-visible{border-color:var(--acento)}
.buscador-cuenta{margin:0;font-size:12.5px;color:var(--tinta-2)}
@media(pointer:coarse){.buscador input{min-height:44px}}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Rejilla de pósters: manda la carátula, como en un catálogo. */
.tarjetas{
  list-style:none;padding:0;margin:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
}
.tarjeta{
  display:flex;flex-direction:column;height:100%;
  background:var(--panel);border:1px solid var(--regla);border-radius:10px;
  overflow:hidden;text-decoration:none;color:var(--tinta);
  transition:border-color .2s var(--suave),transform .25s var(--salida),box-shadow .25s var(--suave);
}
.tarjeta:hover{
  border-color:var(--regla-fuerte);
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.09);
}

/* La carátula enlazada sobre el tono de la serie, que es lo que queda
   a la vista si la imagen no carga. */
.tarjeta-foto{
  display:block;width:100%;aspect-ratio:2/3;position:relative;
  background:var(--tono,#7a7a7a);overflow:hidden;
}
.tarjeta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* El porcentaje de relleno, encima de la carátula: es lo que se busca
   al recorrer la rejilla con la vista. */
.tarjeta-pct{
  position:absolute;top:7px;right:7px;
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:rgba(12,10,8,.82);color:#fff;
  padding:2px 7px;border-radius:5px;
  backdrop-filter:blur(3px);
}

.tarjeta-texto{display:flex;flex-direction:column;padding:11px 13px 13px;flex:1;min-width:0}
.tarjeta strong{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.025em;display:block;line-height:1.18}
.tarjeta-anios{font-size:11.5px;color:var(--tinta-2);margin-top:2px}
.tarjeta .dato{font-size:12px;color:var(--tinta-2);margin-top:4px}

/* En móvil, dos columnas. Esta regla va aquí y no arriba con las demás de
   móvil: como tiene la misma especificidad que la base de .tarjetas, si va
   antes pierde la cascada y el póster ocupa la pantalla entera. */
@media(max-width:620px){
  .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tarjeta strong{font-size:14.5px}
  .tarjeta-texto{padding:9px 10px 11px}
  .tarjeta .dato{font-size:11.5px}
  .tarjeta-anios{font-size:11px}
}
.tira-mini{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:auto;background:var(--regla)}
.tira-mini span{display:block}
.tira-mini .t-canon{background:var(--canon)}
.tira-mini .t-mixto{background:var(--mixto)}
.tira-mini .t-relleno{background:var(--relleno)}

/* ------------------------------------------------------------- lateral */

.lateral h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-2);font-weight:600;margin:0 0 10px;font-family:var(--texto)}
.lista-lateral{list-style:none;padding:0;margin:0 0 28px;border:1px solid var(--regla);border-radius:9px;overflow:hidden;background:var(--panel)}
.lista-lateral a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 14px;border-bottom:1px solid var(--regla);text-decoration:none;color:var(--tinta);font-size:14.5px;font-weight:500}
.lista-lateral li:last-child a{border-bottom:0}
.lista-lateral a:hover{background:var(--lienzo)}
.lista-lateral span{font-size:12px;color:var(--tinta-2);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------------------------- fuentes */

.fuentes{font-size:14px;color:var(--tinta-2);border-top:1px solid var(--regla);padding-top:18px;margin-top:40px}
.fuentes h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-family:var(--texto);color:var(--tinta-2)}
.fuentes ul{padding-left:1.1rem;margin:.5rem 0 .8rem}

.legal p{max-width:66ch}
.legal h2{font-size:18px;margin-top:28px}

.anuncio{margin:28px 0}
.anuncio:empty{display:none}

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

.lema{font-family:var(--display);font-size:clamp(30px,6.5vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.04;margin:30px 0 14px;max-width:18ch;text-wrap:balance}

/* ------------------------------------------------- movimiento reducido */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .tarjeta:hover{transform:none}
}

/* ------------------------------------------- por donde vas y copiar

   Lo que de verdad pregunta quien llega: no "dame la lista" sino "voy por el
   98, que me salto". El bloque responde eso, y recuerda el numero para la
   proxima visita. Todo en el navegador: sin cuentas y sin servidor. */

.rapida .acciones{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.btn-mini{appearance:none;border:1px solid var(--regla-fuerte);background:var(--lienzo);
  border-radius:7px;padding:7px 13px;font:600 12.5px var(--texto);color:var(--tinta);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background .2s var(--suave),border-color .2s var(--suave)}
.btn-mini:hover{border-color:var(--acento);color:var(--acento)}
.btn-mini.hecho{background:var(--canon-fondo);border-color:var(--canon);color:var(--canon)}
@media(pointer:coarse){.btn-mini{min-height:44px}}

.donde{background:var(--panel);border:1px solid var(--regla);border-left:3px solid var(--acento);
  border-radius:9px;padding:16px 18px;margin:0 0 28px}
.donde h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-2);
  font-weight:600;margin:0 0 10px;font-family:var(--texto)}
.donde .linea{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.donde input{font:600 16px var(--texto);width:104px;padding:9px 12px;border-radius:7px;
  border:1px solid var(--regla-fuerte);background:var(--lienzo);color:var(--tinta);
  font-variant-numeric:tabular-nums}
.donde input:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
@media(pointer:coarse){.donde input{min-height:44px}}
.donde .respuesta{margin:12px 0 0;padding:11px 14px;border-radius:7px;background:var(--lienzo);
  border:1px solid var(--regla);font-size:14.5px;line-height:1.65}
.donde .respuesta b{color:var(--acento)}
/* El aviso de guardado era de 12,5px en gris: al recargar parecia que no
   se hubiera guardado nada. Ahora se ve. */
.donde .memoria{margin:12px 0 0;font-size:13.5px;color:var(--tinta-2);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.marca-guardado{background:var(--canon-fondo);color:var(--canon);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;white-space:nowrap}
.donde .memoria button{appearance:none;background:none;border:0;padding:0;font:inherit;
  color:var(--acento);cursor:pointer;text-decoration:underline}

/* La tabla es larguisima: sin cabecera fija pierdes las columnas al primer
   scroll. Va por debajo de la cabecera del sitio, que tambien es fija. */
table.episodios thead th{position:sticky;top:var(--alto-cabecera,60px);z-index:3;
  background:var(--lienzo);padding-top:9px}

/* Al saltar a un episodio se senala un momento, o no sabes donde has caido. */
table.episodios tbody tr.senalada{animation:destello 2.4s var(--salida)}
@keyframes destello{0%,35%{background:var(--acento-tenue)}100%{background:transparent}}
table.episodios tbody tr.t-relleno.senalada{animation-name:destello-relleno}
@keyframes destello-relleno{0%,35%{background:var(--acento-tenue)}100%{background:var(--relleno-fila)}}

/* El resumen en una frase, lo primero que se lee. */
.frase{font-size:17px;line-height:1.6;margin:0 0 24px;color:var(--tinta)}
.frase b{color:var(--acento);font-weight:600}

/* En movil la herramienta se queda arriba y a las diez pantallas de tabla ya
   no existe. Este boton la devuelve desde donde estes. */
.volver-donde{position:fixed;right:14px;bottom:14px;z-index:30;display:none;
  border:1px solid var(--regla-fuerte);background:var(--panel);color:var(--tinta);
  border-radius:24px;padding:11px 16px;font:600 13px var(--texto);cursor:pointer;
  box-shadow:0 6px 22px rgba(40,30,20,.18);min-height:44px;align-items:center}
.volver-donde.visible{display:inline-flex}
@media(min-width:900px){.volver-donde{display:none!important}}
@media(prefers-reduced-motion:reduce){
  table.episodios tbody tr.senalada{animation:none;outline:2px solid var(--acento)}
}

/* ------------------------------------------------------- botón de tema
   Papel es lo que ve todo el mundo al entrar. Quien prefiera oscuro lo pide
   aquí y se le recuerda. Va oculto hasta que el guion lo enciende: sin
   JavaScript no haría nada y un botón muerto es peor que ninguno. */

.tema{appearance:none;border:1px solid var(--regla-fuerte);background:var(--panel);
  color:var(--tinta-2);border-radius:20px;padding:6px 12px;font:600 12px var(--texto);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  transition:color .2s var(--suave),border-color .2s var(--suave)}
.tema:hover{color:var(--tinta);border-color:var(--acento)}
.tema[hidden]{display:none}
@media(pointer:coarse){.tema{min-height:44px;padding:6px 14px}}
@media(max-width:520px){.tema span{display:none}.tema{padding:6px 10px;margin-left:6px}}