/* ==========================================================================
   ANITECA — hoja de estilos
   Tema oscuro por defecto, tema claro con [data-tema="claro"], sin dependencias.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  --fondo:        #0e1016;
  --fondo-2:      #141824;
  --superficie:   #171b26;
  --superficie-2: #1e2330;
  --superficie-3: #262c3b;
  --borde:        #2a3141;
  --borde-suave:  #212736;
  --texto:        #e9ecf3;
  --texto-2:      #b9c1d0;
  --texto-3:      #8d98ab;   /* legible a 4,5:1 incluso sobre --superficie-3 */
  --acento:       #8b6cff;
  --acento-2:     #2dd4a7;
  --acento-3:     #ffb020;
  --peligro:      #ff5c7a;
  --estrella:     #ffc94d;
  /* Verde de jkanime y naranja de animeflv. Estaban escritos a mano y en el
     tema claro quedaban casi blancos sobre blanco; ahora cada tema tiene los
     suyos y los dos se leen. */
  --enlace-jk:        #6ee7b7;
  --enlace-jk-fuerte: #a7f3d0;
  --enlace-jk-tinte:  rgba(52, 211, 153, .14);
  --enlace-jk-tinte2: rgba(52, 211, 153, .24);
  --enlace-jk-borde:  rgba(52, 211, 153, .42);
  --enlace-jk-borde2: rgba(52, 211, 153, .7);
  --enlace-af:        #fdba74;
  --enlace-af-fuerte: #fed7aa;
  --enlace-af-tinte:  rgba(251, 146, 60, .14);
  --enlace-af-borde:  rgba(251, 146, 60, .42);
  --chip-play:        #fca5a5;
  --sombra:       0 10px 30px rgba(0, 0, 0, .35);
  --sombra-suave: 0 2px 10px rgba(0, 0, 0, .22);
  --radio:        14px;
  --radio-s:      9px;
  --radio-xs:     6px;
  --ancho:        1240px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

[data-tema="claro"] {
  --fondo:        #f6f7fb;
  --fondo-2:      #eef0f7;
  --superficie:   #ffffff;
  --superficie-2: #f4f6fb;
  --superficie-3: #e9ecf5;
  --borde:        #d9dee9;
  --borde-suave:  #e6eaf2;
  --texto:        #14161d;
  --texto-2:      #414a5c;
  --texto-3:      #636b7d;   /* oscurecido un punto para pasar 4,5:1 sobre el fondo claro */
  --acento:       #5b2fd6;
  --acento-2:     #0a7d5d;   /* verde más hondo: el anterior no llegaba a 4,5:1 en claro */
  --acento-3:     #a86800;
  --peligro:      #c9243f;
  --estrella:     #b57e00;
  /* Los verdes y naranjas de los enlaces externos, en su versión oscura para
     que se lean sobre blanco (los del tema oscuro aquí serían invisibles). */
  --enlace-jk:        #047857;
  --enlace-jk-fuerte: #065f46;
  --enlace-jk-tinte:  rgba(5, 150, 105, .12);
  --enlace-jk-tinte2: rgba(5, 150, 105, .18);
  --enlace-jk-borde:  rgba(5, 150, 105, .38);
  --enlace-jk-borde2: rgba(5, 150, 105, .6);
  --enlace-af:        #b45309;
  --enlace-af-fuerte: #92400e;
  --enlace-af-tinte:  rgba(217, 119, 6, .10);
  --enlace-af-borde:  rgba(217, 119, 6, .38);
  --chip-play:        #b91c1c;
  --sombra:       0 10px 30px rgba(24, 30, 50, .12);
  --sombra-suave: 0 2px 10px rgba(24, 30, 50, .08);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acento) 55%, var(--superficie-3)) var(--fondo-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fondo-2); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acento) 55%, var(--superficie-3));
  border-radius: 6px; border: 2px solid var(--fondo-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--acento); }

html {
  scroll-behavior: smooth;
  /* Safari de iPhone infía el texto por su cuenta cuando cree que la página no
   * está pensada para el móvil, y el resultado es que se ve «más grande de lo
   * que debería» y no cabe en la pantalla. Con esto se le dice que no lo toque:
   * el tamaño lo pone esta hoja. Chromium no lo necesita, Safari sí. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Red de seguridad contra el scroll de lado: `clip` corta lo que se salga sin
   * crear un contenedor de scroll (con `hidden` se rompería el
   * `position: sticky` de la cabecera, que es justo lo que no queremos). */
  overflow-x: clip;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--acento) 10%, transparent), transparent 60%),
    var(--fondo);
  color: var(--texto);
  font: 15px/1.65 var(--fuente);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.01em;
  /* Móvil: que el deslizar el dedo no dispare gestos de «atrás» de Safari ni
   * el estirado de Chrome; la navegación ya tiene sus botones. */
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: rgba(139, 108, 255, .12);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--acento); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .45em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h3 { font-size: clamp(1rem, 1.8vw, 1.2rem); }
p { margin: 0 0 .9em; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acento); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radio-s) 0;
  /* El enlace de «saltar al contenido» sale al pulsar Tab, y en el móvil eso
     pasa a pantalla completa, debajo de la barra de estado. */
  padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
}
.saltar:focus { left: 0; }

/* ------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde-suave);
  /* Al bajar, la cabecera se aparta entera y vuelve al subir (lo decide
   * app.js). En un móvil la barra ocupa tres filas —marca, menú, buscador— y
   * eso es mucho sitio quieto robado a la lista. 101% para que se lleve
   * también el borde de abajo. */
  transition: transform .22s ease;
}
.cabecera--apartada { transform: translateY(-101%); }
/* En un iPhone con muesca, la barra de estado (la hora, la batería) se dibuja
 * ENCIMA de la página cuando la app va a pantalla completa. Sin este margen, el
 * buscador empezaba debajo del reloj y la parte de arriba quedaba tapada. Los
 * lados también: en horizontal, la muesca come del borde izquierdo.
 * En un móvil sin muesca `env()` vale 0 y todo queda igual que antes. */
.cabecera__barra {
  max-width: var(--ancho); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.1rem;
  padding-top: calc(.7rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1.1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.1rem + env(safe-area-inset-right, 0px));
}

.marca { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; min-height: 44px; }
.marca__simbolo {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--acento), #4c2fbf);
  color: #fff;                    /* el anillo y el ▶ del símbolo son currentColor */
  box-shadow: 0 4px 14px rgba(139, 108, 255, .35);
}
.marca__simbolo svg { display: block; }
.marca__texto { display: flex; flex-direction: column; font-weight: 800; letter-spacing: .07em; font-size: .95rem; text-transform: uppercase; }
.marca__texto small { font-weight: 500; font-size: .66rem; letter-spacing: .02em; color: var(--texto-3); }

.buscador { position: relative; flex: 1 1 320px; max-width: 520px; }
.buscador__icono {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); font-size: 1.1rem; pointer-events: none;
}
.buscador input {
  width: 100%; padding: .62rem 2.4rem .62rem 2.3rem;
  background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 999px;
  font: inherit; font-size: .92rem;
}
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador input:focus { border-color: var(--acento); background: var(--superficie); }
.buscador__limpiar {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--texto-3); cursor: pointer; font-size: .95rem; padding: .25rem .45rem;
}
.sugerencias {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 50;
  margin: 0; padding: .35rem; list-style: none;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-s); box-shadow: var(--sombra);
  max-height: 60vh; overflow: auto;
}
.sugerencias li { padding: 0; }
.sugerencias button {
  display: flex; gap: .7rem; align-items: baseline; width: 100%;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  padding: .5rem .6rem; border-radius: var(--radio-xs); cursor: pointer;
}
.sugerencias button:hover, .sugerencias button[aria-selected="true"] { background: var(--superficie-2); }
.sugerencias b { font-weight: 700; }
.sugerencias .sug__meta { margin-left: auto; color: var(--texto-3); font-size: .78rem; white-space: nowrap; }

.nav { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.nav a {
  padding: .45rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 500;
  color: var(--texto-2);
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { background: var(--superficie-2); color: var(--texto); }
.nav a[aria-current="page"] { background: var(--superficie-3); color: var(--texto); }

.boton-icono {
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-2);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1rem;
  display: grid; place-items: center;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.boton-icono:hover { color: var(--texto); border-color: var(--acento); background: var(--superficie-3); }
.boton-icono:active { transform: scale(.94); }

/* ---------------------------------------------------------------- main */
main {
  max-width: var(--ancho); margin: 0 auto;
  padding: 1.8rem 1.2rem 4.2rem;
  /* Mismo motivo que en la cabecera: que la muesca no se coma el texto en
     horizontal, y que al final de la lista no se quede nada bajo la barra de
     gestos del móvil. */
  padding-left: calc(1.2rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.2rem + env(safe-area-inset-right, 0px));
  padding-bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
}
main:focus { outline: none; }

.seccion { margin: 0 0 2.8rem; }
.seccion__cabecera { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.seccion__cabecera h2 { font-size: 1.2rem; margin: 0; font-weight: 700; letter-spacing: -.015em; }
.seccion__cabecera h2::before {
  content: ""; display: inline-block; width: 3px; height: 18px; margin-right: .6rem;
  border-radius: 2px; background: linear-gradient(180deg, var(--acento), var(--acento-2));
  box-shadow: 0 0 8px color-mix(in srgb, var(--acento) 50%, transparent);
}
.seccion__nota { color: var(--texto-3); font-size: .84rem; }
/* La cabecera de una sección lleva su enlace «ver todas» en una esquina. Medía
   22 px de alto, por debajo del mínimo que se puede puntear sin fallar, así que
   lleva relleno; el margen negativo a la derecha devuelve el texto a su sitio
   exacto, de modo que el enlace se ve igual y se toca mucho mejor. */
.seccion__mas {
  margin-left: auto; margin-right: -.3rem; padding: .35rem .3rem;
  font-size: .84rem; font-weight: 600; color: var(--acento);
  border-radius: var(--radio-xs); transition: background-color .15s ease;
}
.seccion__mas:hover { background: color-mix(in srgb, var(--acento) 14%, transparent); }

/* ----------------------------------------------------------------- hero */
.hero {
  background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 8%, var(--superficie)), var(--superficie));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem 1.6rem;
  margin-bottom: 2.2rem;
  box-shadow: var(--sombra-suave);
}
.hero h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .4rem; letter-spacing: -.025em; font-weight: 800; }
.hero h1 span { background: linear-gradient(120deg, var(--acento), var(--acento-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lema { color: var(--texto-2); max-width: 65ch; font-size: .98rem; line-height: 1.55; }
.hero__kpis { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; list-style: none; padding: 0; }
.hero__kpis li {
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  padding: .32rem .75rem; font-size: .78rem; color: var(--texto-2);
  transition: border-color .15s ease, background-color .15s ease;
}
.hero__kpis li:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); }
.hero__kpis b { color: var(--texto); font-weight: 700; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }

/* Primera vez (sin una sola marca): en vez de una portada vacía, tres pasos.
   Desaparece solo en cuanto se marca algo, así que no molesta nunca más. */
.primeros {
  border: 1px solid var(--borde); border-left: 3px solid var(--acento);
  border-radius: var(--radio); background: var(--superficie);
  padding: 1rem 1.1rem; margin: 1.3rem 0;
}
.primeros h2 { font-size: 1.02rem; margin-bottom: .6rem; }
.primeros__pasos { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.primeros__pasos li { color: var(--texto-2); font-size: .92rem; line-height: 1.5; }
.primeros__pasos strong { color: var(--texto); }
.primeros__pasos em { color: var(--texto-2); font-style: normal; }
.primeros__pie { margin: .8rem 0 0; color: var(--texto-3); font-size: .84rem; }

/* --------------------------------------------------------------- botones */
/* Regla común: transición corta en todo lo que reacciona al dedo o al ratón,
   y el mismo anillo de foco en los tres estados (teclado, pulsado, hover). */
.boton {
  display: inline-flex; align-items: center; gap: .45rem;
  background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 80%, #000));
  color: #fff;
  border: 1px solid transparent;
  padding: .45rem .85rem;
  border-radius: 999px;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  /* 44 px de alto: por debajo de eso el dedo falla. Con el relleno se quedaba en
     42 y no se nota mirándolo, pero se nota al pulsar en el móvil. */
  min-height: 44px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .06s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.boton:hover {
  filter: brightness(1.06);
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 108, 255, .3), 0 1px 2px rgba(0,0,0,.1);
  transform: translateY(-1px);
}
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton--fantasma {
  background: var(--superficie-2);
  color: var(--texto);
  border-color: var(--borde);
  box-shadow: none;
}
.boton--fantasma:hover {
  border-color: var(--acento);
  color: var(--texto);
  box-shadow: 0 2px 8px rgba(139, 108, 255, .12);
  transform: translateY(-1px);
}
.boton--mini { padding: .35rem .7rem; font-size: .78rem; min-height: 36px; }
.boton--peligro { background: transparent; border-color: var(--peligro); color: var(--peligro); }
.boton--peligro:hover { background: rgba(255, 92, 122, .12); color: var(--peligro); box-shadow: none; }
/* Enlace a jkanime: verde propio para que se distinga del resto de acciones */
.boton--jkanime {
  background: var(--enlace-jk-tinte); color: var(--enlace-jk);
  border-color: var(--enlace-jk-borde);
}
.boton--jkanime:hover { background: var(--enlace-jk-tinte2); border-color: var(--enlace-jk-borde2); color: var(--enlace-jk-fuerte); box-shadow: 0 2px 10px rgba(52, 211, 153, .2); }
/* Enlace de respaldo: animeflv, para las fichas que jkanime no tiene. */
.boton--animeflv {
  background: var(--enlace-af-tinte); color: var(--enlace-af);
  border-color: var(--enlace-af-borde);
}
.boton--animeflv:hover { background: rgba(251, 146, 60, .24); border-color: rgba(251, 146, 60, .7); color: var(--enlace-af-fuerte); box-shadow: 0 2px 10px rgba(251, 146, 60, .2); }
.boton[aria-pressed="true"] { background: var(--acento); color: #fff; border-color: transparent; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }

/* ---------------------------------------------------------------- grid */
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.rejilla--ancha { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* --------------------------------------------------------------- tarjeta */
.tarjeta {
  position: relative; display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}.tarjeta:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
  box-shadow: 0 5px 20px rgba(0,0,0,.22);
}
.tarjeta__enlace { display: flex; flex-direction: column; height: 100%; }
.tarjeta__cuerpo { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tarjeta__titulo { font-size: .9rem; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: -.01em; }
.tarjeta__meta { font-size: .76rem; color: var(--texto-3); display: flex; flex-wrap: wrap; gap: .4rem; }
.tarjeta__sinopsis { font-size: .8rem; color: var(--texto-2); margin: .1rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__pie { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .5rem; }

/* carátula: el póster real encima y, debajo, el degradado con las iniciales
   (que se ve si el título no tiene póster o si la imagen no carga) */
.caratula {
  position: relative; aspect-ratio: 2 / 3; width: 100%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--superficie-3);
}
.caratula__iniciales {
  font-size: clamp(1.6rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: .04em;
  color: rgba(255, 255, 255, .92); text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  padding: 0 .5rem; text-align: center;
}
.caratula__img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.caratula::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
    linear-gradient(to top, rgba(6, 8, 14, .72), transparent 55%);
}

/* tráiler (ficha) */
.trailer {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin: 1.1rem 0; padding: .9rem;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio-s);
}
.trailer--vacio { align-items: flex-start; }
.trailer h2 { font-size: .95rem; margin: 0 0 .35rem; }
.trailer__texto { flex: 1 1 240px; min-width: 0; }
.trailer__texto p { margin: 0 0 .55rem; font-size: .82rem; line-height: 1.5; }
.trailer__texto p:last-child { margin-bottom: 0; }
/* Quién publica el tráiler: dejar claro si el vídeo es de un canal oficial. */
.trailer__credito { font-size: .76rem !important; color: var(--texto-tenue); }
.trailer__caja {
  position: relative; flex: 0 0 246px; width: 246px; aspect-ratio: 16 / 9;
  padding: 0; border: 1px solid var(--borde); border-radius: var(--radio-xs);
  background: #05070d; cursor: pointer; overflow: hidden; display: block;
}
.trailer__miniatura { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; }
.trailer__caja:hover .trailer__miniatura { opacity: 1; }
.trailer__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.5rem; color: #fff;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.55) 0 26%, transparent 62%);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.trailer__marco { flex: 1 1 420px; aspect-ratio: 16 / 9; background: #05070d;
  border: 1px solid var(--borde); border-radius: var(--radio-xs); overflow: hidden; }
.trailer__marco iframe { width: 100%; height: 100%; border: 0; display: block; }

.caratula--mini { aspect-ratio: 1; width: 46px; border-radius: 10px; }
.caratula--mini .caratula__iniciales { font-size: .85rem; }

.insignias { position: absolute; top: .5rem; left: .5rem; right: .5rem; z-index: 2; display: flex; gap: .3rem; flex-wrap: wrap; }
.insignia {
  font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  background: rgba(8, 10, 18, .72); color: #fff; border: 1px solid rgba(255,255,255,.16);
  padding: .16rem .45rem; border-radius: 999px; backdrop-filter: blur(6px);
  white-space: nowrap;
}
.insignia--rank { background: rgba(8,10,18,.8); }
.insignia--estrella { background: rgba(255, 201, 77, .92); color: #241a00; border-color: transparent; }
.insignia--parcial  { background: rgba(45, 212, 167, .92); color: #04231a; border-color: transparent; }
.insignia--inicio   { background: rgba(255, 176, 32, .9); color: #2b1a00; border-color: transparent; }
.insignia--favorito { background: rgba(255, 92, 122, .92); color: #2b0009; border-color: transparent; }
.insignia--play     { background: rgba(220, 38, 38, .88); border-color: transparent; }
.insignia--minota   { background: rgba(139, 92, 246, .94); border-color: transparent; }
/* «ES»: la ficha tiene doblaje al español (sale del reparto de AniList). */
.insignia--dob      { background: rgba(45, 212, 167, .9); color: #04231a; border-color: transparent; }

/* Selector de mi nota (0–10) en la ficha */
.mi-nota {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .22rem .5rem .22rem .65rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.mi-nota__etiqueta {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-3);
  white-space: nowrap;
}
.mi-nota select {
  font: inherit; font-size: .8rem; font-weight: 600;
  background: transparent; color: var(--texto); border: 0; cursor: pointer;
}
.mi-nota select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

/* Series de las que solo se abrió la lista */
.solo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.solo-lista li { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; }
.solo-lista a { font-weight: 600; }
.solo-lista .texto-secundario { font-size: .78rem; }

/* Continuar donde lo dejaste: una fila por serie, con el capítulo siguiente
   verificado en jkanime. Solo aparece lo que se ha comprobado capítulo a capítulo. */
.continuar { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.continuar li { display: flex; align-items: center; gap: .6rem; padding: .32rem .45rem; border-radius: var(--radio-xs); }
.continuar li:hover { background: var(--superficie-2); }
.continuar .caratula--mini { flex: none; }
/* `flex-basis: 0` + `min-width: 0`, y no `auto`, por lo mismo que en .fila__cuerpo:
 * con la base puesta en `auto`, el título presenta su ancho de CONTENIDO (un
 * título largo mide 286px), y como no cabe junto al botón, el contenedor —que
 * sí envuelve— no encoge el título: tira el botón a la línea de abajo y la meta
 * a una tercera. Resultado: filas de dos alturas distintas y el botón bailando
 * de la derecha a la izquierda. Con la base en 0 el título pide 0, todo cabe en
 * la primera línea, y luego el título se estira con lo que sobre. */
.continuar__titulo {
  flex: 1 1 0; min-width: 0;
  font-weight: 600; color: var(--texto); text-decoration: none;
}
.continuar__titulo:hover { color: var(--acento); text-decoration: underline; }
.continuar__meta { flex: none; font-size: .76rem; color: var(--texto-3); white-space: nowrap; }
.continuar .boton { flex: none; }
/* En estrecho la fila no siempre cabe entera en una línea: alineada arriba, el
 * botón queda a la derecha del título (que puede partirse) y la meta baja
 * completa. Con centrado vertical, el botón «bailaba» según el título. */
@media (max-width: 620px) {
  .continuar li { flex-wrap: wrap; align-items: flex-start; }
  .continuar .boton { margin-left: auto; }
}

/* Mi ranking (tu nota) en Mi historial */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ranking li { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--borde-suave, var(--borde)); }
.ranking li:last-child { border-bottom: 0; }
.ranking__puesto {
  flex: none; min-width: 3.4rem; text-align: center;
  font-weight: 800; font-size: .78rem; color: #fff;
  background: rgba(139, 92, 246, .9); border-radius: 999px; padding: .12rem .4rem;
}
.ranking__titulo { flex: 1 1 auto; font-weight: 600; color: var(--texto); text-decoration: none; }
.ranking__titulo:hover { color: var(--acento); text-decoration: underline; }
.ranking__imdb { flex: none; font-size: .78rem; color: var(--texto-suave); }

.nota {
  display: inline-flex; align-items: center; gap: .25rem;
  font-weight: 800; font-size: .8rem; color: var(--estrella);
}
.nota::before { content: "★"; font-size: .78rem; }
.nota--alta { color: var(--acento-2); }
.nota--media { color: var(--acento-3); }

.tiempo-visto { font-size: .74rem; color: var(--acento-2); font-weight: 700; }

.nota-pill {
  display: inline-flex; align-items: baseline; gap: .3rem;
  background: color-mix(in srgb, var(--estrella) 14%, transparent);
  color: var(--estrella); border: 1px solid color-mix(in srgb, var(--estrella) 30%, transparent);
  padding: .18rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 800;
  white-space: nowrap;
}
.nota-pill small { font-weight: 500; font-size: .68rem; opacity: .8; }
.nota-pill.nota--alta { color: var(--acento-2); background: color-mix(in srgb, var(--acento-2) 14%, transparent); border-color: color-mix(in srgb, var(--acento-2) 30%, transparent); }
.nota-pill.nota--media { color: var(--acento-3); background: color-mix(in srgb, var(--acento-3) 14%, transparent); border-color: color-mix(in srgb, var(--acento-3) 30%, transparent); }

.tipo-etiqueta {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento);
}

/* ------------------------------------------------ vista de lista */
.conmutador { display: inline-flex; gap: .2rem; background: var(--superficie-2); border: 1px solid var(--borde); padding: .2rem; border-radius: 999px; }
.conmutador button {
  background: none;
  border: 0;
  color: var(--texto-2);
  font: inherit;
  font-size: .76rem;
  font-weight: 500;
  padding: .25rem .6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.conmutador button:hover { color: var(--texto); }
.conmutador button[aria-pressed="true"] { background: var(--acento); color: #fff; }

.filas { display: grid; gap: .85rem; }
.fila {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.fila:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--acento) 40%, var(--borde));
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.fila__enlace { display: flex; gap: 1rem; padding: .7rem; align-items: stretch; }
.fila__caratula { position: relative; flex: 0 0 104px; width: 104px; }
.fila__caratula .caratula { border-radius: var(--radio-s); }
.fila__cuerpo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; }
.fila__superior { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.fila__titulo { font-size: 1rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.fila:hover .fila__titulo { color: var(--acento); }
.fila__meta { font-size: .78rem; color: var(--texto-3); margin: 0; }
.fila__sinopsis {
  font-size: .84rem; color: var(--texto-2); margin: .15rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fila__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: auto; padding-top: .55rem; }
.fila__estudio { margin-left: auto; font-size: .76rem; color: var(--texto-3); text-align: right; }
.chip--estatico { cursor: default; font-size: .7rem; padding: .18rem .5rem; }
.chip--estatico:hover { border-color: var(--borde); color: var(--texto-2); }

/* --------------------------------------------------------- filtros */
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: .55rem .75rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra-suave);
}
.barra-filtros__dato { font-size: .84rem; color: var(--texto-3); }
.barra-filtros__dato b { color: var(--texto); }
/* El botón que abre los filtros y el que los vuelve a cerrar solo tienen
 * sentido en pantalla estrecha; en ancho las facetas ya están a la vista. */
.boton-filtros, .facetas__aplicar { display: none; }
.barra-filtros select, .barra-filtros input[type="search"] {
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 999px; padding: .5rem .8rem; font: inherit; font-size: .82rem;
}
.campos { display: grid; gap: 1.1rem; grid-template-columns: 250px 1fr; align-items: start; }
.facetas {
  position: sticky; top: 76px;
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio); padding: 1rem; max-height: calc(100vh - 100px); overflow: auto;
}
.facetas h3 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-3);
  margin: 0 0 .45rem;
  font-weight: 600;
}
.facetas__grupo { margin-bottom: 1.15rem; }
.facetas__grupo:last-child { margin-bottom: 0; }
.fichas-filtro { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  color: var(--texto-2);
  border-radius: 999px;
  padding: .28rem .6rem;
  font-size: .75rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.chip:hover { border-color: var(--acento); color: var(--texto); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--acento); border-color: transparent; color: #fff; }
/* Mismo aspecto que un chip pulsado, pero para los que son enlaces (los filtros
   del índice de voces navegan, así que no pueden llevar aria-pressed). */
.chip--activo { background: var(--acento); border-color: transparent; color: #fff; }
.chip small { opacity: .7; font-size: .7rem; }
.chip--quitar { border-style: dashed; }
.chip--play { color: var(--chip-play); }
.chip--dob { color: var(--acento-2); border-color: color-mix(in srgb, var(--acento-2) 45%, transparent); }
.chip--dob:hover { border-color: var(--acento-2); color: var(--texto); }
.campo-rango { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--texto-3); }
.campo-rango input[type="range"] { flex: 1; accent-color: var(--acento); }
.vacio {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--texto-3);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

/* Índice de actores de voz (#/voces): una fila plegable por actor. */
.actores__buscar { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin: 1rem 0 .7rem; }
.actores__buscar input {
  flex: 1; min-width: 200px; background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: .5rem .9rem; color: var(--texto); font: inherit;
}
.actores__buscar input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.actores__filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.actores__filtros a { text-decoration: none; }
.actor { border-top: 1px solid var(--borde-suave); }
.actor > summary {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline;
  padding: .5rem .1rem; cursor: pointer;
}
.actor > summary:hover .actor__nombre { color: var(--acento); }
/* El nombre del actor es un enlace dentro de una fila de un `<summary>` en
   flex: mide 26 px de alto. Con este relleno pasa de 34 px de zona de toque y el
   margen negativo en la misma medida deja la fila exactamente donde estaba. */
.actor__nombre { font-weight: 600; padding: .3rem .1rem; margin: -.3rem -.1rem; }
.actor__cuenta { color: var(--texto-3); font-size: .8rem; }
.actor__idiomas { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.actor__papeles { list-style: none; margin: .2rem 0 .9rem; padding: 0 0 0 1.1rem; }
.actor__papeles li { padding: .12rem 0; font-size: .87rem; color: var(--texto-2); }
.actor__papeles a { color: var(--texto); }
.actor__papeles a:hover { color: var(--acento); }
.actor__personaje { color: var(--texto-3); }
.actor__resto { color: var(--texto-3); font-style: italic; }
.actor__resto a { color: var(--texto-2); font-style: normal; }

/* El nombre del actor, clicable en los dos sitios: en el índice (dentro del
   summary, donde antes era solo texto) y en las fichas (dentro del bloque de
   voces). En el summary hay que anular el cursor de desplegar del padre para
   que se entienda que el nombre lleva a otro sitio. */
.actor > summary > .actor__nombre { cursor: pointer; }
.actor > summary > .actor__nombre::after { content: ' →'; color: var(--texto-3); font-weight: 400; }
.actor > summary > .actor__nombre:hover::after { color: var(--acento); }

/* Ficha de un actor (#/actor/N): su cabecera con cuenta e idiomas, y debajo los
   papeles agrupados por serie con la carátula pequeña delante. */
.ficha-actor {
  background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 10%, var(--superficie)), var(--superficie));
  border-color: color-mix(in srgb, var(--acento) 32%, var(--borde));
}
.ficha-actor h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .35rem; letter-spacing: -.01em; }
.ficha-actor__cuenta { color: var(--texto-2); margin-bottom: .6rem; }
.ficha-actor__idiomas { display: flex; flex-wrap: wrap; gap: .3rem; }
.ficha-actor__idiomas .voces__idioma--principal { border-color: var(--acento); color: var(--acento); }
.ficha-actor__sub {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--texto-3); margin: 1.5rem 0 .8rem;
  display: flex; align-items: center; gap: .8rem;
}
.ficha-actor__sub::after { content: ''; flex: 1; height: 1px; background: var(--borde-suave); }
.ficha-actor__serie { padding: .95rem 1.1rem; }
.ficha-actor__serie:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); }
.ficha-actor__serie-cabecera { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .6rem; }
.ficha-actor__serie-cabecera h3 { font-size: 1.02rem; margin-bottom: .2rem; letter-spacing: -.01em; }
.ficha-actor__serie-cabecera h3 a { color: var(--texto); }
.ficha-actor__serie-cabecera h3 a:hover { color: var(--acento); }
.ficha-actor__poster {
  width: 48px; height: 68px; object-fit: cover; border-radius: var(--radio-xs);
  background: var(--superficie-2); flex-shrink: 0;
  box-shadow: var(--sombra-suave);
}
.actor__papeles--ficha { padding-left: 0; margin: 0; }
.actor__papeles--ficha li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--superficie-2); border: 1px solid var(--borde-suave);
  border-radius: 999px; padding: .22rem .7rem; margin: 0 .35rem .35rem 0;
  font-size: .85rem;
}
.actor__papeles--ficha li .voces__idioma { border: none; padding: 0; background: none; }

.paginacion { display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: 1.6rem; font-size: .85rem; color: var(--texto-3); }
.paginacion button { background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto); border-radius: 999px; padding: .38rem .9rem; cursor: pointer; font: inherit; font-size: .82rem; }
.paginacion button:disabled { opacity: .45; cursor: default; }

/* ----------------------------------------------------------- ficha */
.migas { font-size: .8rem; color: var(--texto-3); margin-bottom: 1rem; }
.migas a { color: var(--texto-2); }
.migas span { margin: 0 .35rem; }

.cabecera-ficha { display: grid; grid-template-columns: 260px 1fr; gap: 1.6rem; margin-bottom: 2rem; }
.cabecera-ficha__datos h1 { font-size: clamp(1.4rem, 2.6vw, 2.05rem); margin-bottom: .2rem; }
.cabecera-ficha__original { color: var(--texto-3); font-size: .92rem; margin-bottom: .7rem; }
.ficha-linea { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-bottom: .8rem; font-size: .88rem; color: var(--texto-2); }
/* Temporadas: cuántas hay, cuál viene y si sigue en emisión. Los tres datos
   van juntos y se separan solos al estrecharse la pantalla. */
.temporadas-resumen { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; }
.temporadas-resumen__proxima { color: var(--acento-3); font-weight: 600; }
.temporadas-resumen__emision { color: var(--acento-2); font-weight: 600; }
.temporadas-mini { color: var(--texto-2); white-space: normal; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 1rem; list-style: none; padding: 0; }

.acciones-ficha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.acciones-ficha .grupo { display: flex; gap: .3rem; background: var(--superficie-2); border: 1px solid var(--borde); padding: .25rem; border-radius: 999px; }
.acciones-ficha .grupo button {
  background: none; border: 0; color: var(--texto-2); font: inherit; font-size: .8rem; font-weight: 600;
  padding: .3rem .75rem; border-radius: 999px; cursor: pointer;
}
.acciones-ficha .grupo button:hover { background: var(--superficie-3); color: var(--texto); }
.acciones-ficha .grupo button[aria-pressed="true"] { background: var(--acento); color: #fff; }

/* `minmax(0, 1fr)` y no `1fr`: el mínimo de `1fr` es el ancho mínimo del
   contenido, y una palabra larga sin espacios (un `code` como
   `datos/catalogo.json`) estiraba la columna y sacaba la página de su caja en
   un móvil. Con 0, la columna obedece al ancho de la pantalla y lo que no cabe
   envuelve o hace scroll en su propio recuadro. */
.bloques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.bloque {
  background: linear-gradient(160deg, var(--superficie), var(--superficie-2));
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--sombra-suave);
}
.bloque--ancho { grid-column: 1 / -1; }
.bloque h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); margin-bottom: .8rem; }
.bloque h2::before { content: ""; display: inline-block; width: 3px; height: 12px; background: var(--acento); border-radius: 2px; margin-right: .5rem; vertical-align: -1px; }
.bloque ul { margin: 0; padding-left: 1.15rem; }
.bloque li { margin-bottom: .3rem; }
.bloque--lista ul li::marker { color: var(--acento); }
/* Un `code` largo (una ruta, un nombre de archivo) no tiene espacios donde
   partirse: sin esto se sale del recuadro en pantallas estrechas. */
.bloque code, .dos-columnas code { overflow-wrap: anywhere; }
.bloque p:last-child { margin-bottom: 0; }
/* El aviso de la copia personal del APK: la única que lleva tu historial dentro
   y por tanto la única que no se puede pasar a nadie. Tiene que saltar a la
   vista dentro de su recuadro, no leerse como un párrafo más. */
.aviso-personal {
  border: 1px solid color-mix(in srgb, var(--acento-3) 55%, transparent);
  background: color-mix(in srgb, var(--acento-3) 14%, transparent);
  border-radius: var(--radio-s); padding: .7rem .8rem;
}

.definiciones { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.2rem; margin: 0; font-size: .88rem; }
.definiciones dt { color: var(--texto-3); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding-top: .12rem; }
.definiciones dd { margin: 0; }
.bloque--definiciones .definiciones { grid-template-columns: max-content 1fr; }

.personaje { border-top: 1px solid var(--borde-suave); padding-top: .8rem; margin-top: .8rem; }
.personaje:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.personaje h3 { font-size: .96rem; margin-bottom: .35rem; }
.personaje dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: 0; font-size: .85rem; color: var(--texto-2); }
.personaje dt { color: var(--texto-3); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; padding-top: .1rem; }
.personaje dd { margin: 0; }

/* --------------------------------------------------------------- voces */
/* Quién dobla a quién. Una ficha puede tener 150 personajes con voz, así que la
   lista va en dos columnas (personaje | voces) y de entrada solo se ven los
   primeros; los demás aparecen con el botón, o filtrando por idioma. El filtro
   se hace sobre lo ya pintado (ver `filtrarVoces` en app.js): así no se vuelve a
   cargar la ficha y no pierdes el punto donde estabas leyendo. */
.voces__cuenta {
  margin-left: .6rem; font-size: .72rem; text-transform: none; letter-spacing: 0;
  color: var(--texto-3); font-weight: 500;
}
.voces__nota { font-size: .82rem; color: var(--texto-3); margin: -.4rem 0 .9rem; }
.voces__filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.voces__grupo {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3); margin: 1.1rem 0 .4rem; font-weight: 600;
}
.voces__grupo span { font-weight: 500; opacity: .7; }
.voces__lista { list-style: none; padding: 0; margin: 0; }
.voces__fila {
  display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
  gap: .15rem .9rem; align-items: baseline; padding: .45rem .35rem;
  border-top: 1px solid var(--borde-suave);
  border-radius: var(--radio-xs);
  transition: background-color .12s ease;
}
.voces__fila:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }
/* `[hidden]` gana a `display: grid` (si no, ocultar no ocultaría nada). */
.voces__fila[hidden], .voces__voz[hidden] { display: none; }
.voces__quien b { font-weight: 600; }
.voces__jp { color: var(--texto-3); font-size: .8rem; }
.voces__actores { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .84rem; color: var(--texto-2); }
.voces__voz { display: inline-flex; align-items: center; gap: .3rem; }

/* La cara del actor de doblaje (viene de AniList). Va DELANTE del nombre, no en
   su lugar: la cara ayuda a reconocerlo, el nombre es el dato. Si la foto no
   está, no se pinta nada y la fila queda como estaba. */
.voces__cara, .actor__cara {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; border: 1px solid var(--borde); background: var(--superficie-2);
}
.actor__cara { width: 26px; height: 26px; }
/* En su ficha la cara es el retrato: más grande y con el nombre al lado. */
.ficha-actor__quien { display: flex; align-items: center; gap: .9rem; }
.ficha-actor__cara {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--acento) 45%, var(--borde));
  background: var(--superficie-2);
}
/* El subrayado va con `text-decoration` y no con un borde de abajo: así se queda
   pegado a la letra aunque el enlace lleve relleno para que se pueda tocar. Con
   el borde, el relleno lo separaba del texto y parecía una línea suelta. */
.voces__actor {
  /* El relleno lateral no es decoración: un nombre corto («Ajie») medía 23 px de
     ancho y quedaba por debajo del mínimo de 24 px de una zona de toque. En
     móvil eso se nota al pulsar y la auditoría lo marcaba como grave. */
  color: inherit; padding: .22rem .3rem;
  text-decoration: underline dotted color-mix(in srgb, var(--acento) 55%, transparent);
  text-underline-offset: 3px;
}
.voces__actor:hover { color: var(--acento); text-decoration-color: var(--acento); }
.voces__idioma {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  border-radius: 999px; padding: 0 .35rem; flex-shrink: 0;
}
.voces__mas { margin-top: 1rem; }
@media (max-width: 620px) {
  .voces__fila { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- capítulos */
/* Misma familia visual que .voces: filas separadas por línea suave, hover
   iluminado y chips. La marca ✔ es un botón cuadrado, no un carácter suelto. */
.caps__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  margin: .6rem 0 .9rem;
}
.caps__progreso {
  flex: 1 1 8rem; min-width: 6rem; height: .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  overflow: hidden;
}
.caps__progreso span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 70%, transparent), var(--acento));
  transition: width .25s ease;
}
.caps__cuenta { font-size: .8rem; color: var(--texto-2); white-space: nowrap; }
/* Lo que te queda, con el tiempo real de cada capítulo. Va al lado de la cuenta
   pero un poco más marcado: es el número que la gente mira para decidir si
   empieza hoy o mañana. */
.caps__restante { font-size: .8rem; color: var(--texto-2); white-space: nowrap; }
.caps__buscar {
  flex: 0 1 13rem; min-width: 8rem;
  /* 34 px de alto: es el buscador de dentro de la lista de capítulos y con .3rem
     de relleno se quedaba en 27, por debajo de lo cómodo para el dedo. */
  padding: .42rem .6rem; font-size: .84rem; color: var(--texto);
  background: var(--fondo-2, transparent); color-scheme: inherit;
  border: 1px solid var(--borde-suave); border-radius: var(--radio-xs);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.caps__buscar:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 25%, transparent); }
.caps__lista { list-style: none; padding: 0; margin: 0; }
.caps__cap {
  display: grid;
  grid-template-columns: 2rem 2.2rem minmax(0, 1fr) auto auto auto;
  gap: .5rem; align-items: center;
  padding: .3rem .35rem;
  border-top: 1px solid var(--borde-suave);
  border-radius: var(--radio-xs);
  transition: background-color .12s ease;
}
.caps__cap:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }
/* `[hidden]` gana a `display: grid` (mismo truco que en .voces__fila). */
.caps__cap[hidden] { display: none; }
.caps__cap--visto .caps__titulo { color: var(--texto-3); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.caps__marca {
  /* 1.8rem (unos 29 px) y no 1.45rem: es la casilla de «visto» de cada capítulo,
     y a 23 px era el control más pequeño de todo el sitio. */
  width: 1.8rem; height: 1.8rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; line-height: 1; color: var(--texto-3);
  background: transparent; border: 1px solid var(--borde-suave);
  border-radius: var(--radio-xs); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.caps__marca:hover { border-color: var(--acento); color: var(--acento); }
.caps__marca:active { transform: translateY(1px); }
.caps__cap--visto .caps__marca {
  color: #fff;
  background: color-mix(in srgb, var(--acento) 75%, transparent);
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .25);
}
.caps__marca:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.caps__num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto-2); text-align: right; }
.caps__titulo {
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.caps__cap time { font-size: .74rem; color: var(--texto-3); white-space: nowrap; }
.caps__dur { font-size: .74rem; color: var(--texto-3); white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right; }
.caps__ver {
  font-size: .76rem; padding: .3rem .6rem; white-space: nowrap;
  color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  border-radius: 999px;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.caps__ver:hover { background: color-mix(in srgb, var(--acento) 12%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--acento) 25%, transparent); }
@media (max-width: 620px) {
  .caps__cap { grid-template-columns: 2rem 1.8rem minmax(0, 1fr) auto; }
  /* En móvil la fecha y los minutos de cada capítulo sobran: el nº y el título
     mandan (el tiempo total sigue contándolos igual). */
  .caps__cap time, .caps__dur { display: none; }
}

.nota-autor {
  border-left: 3px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  padding: .7rem .9rem; border-radius: 0 var(--radio-xs) var(--radio-xs) 0;
  font-size: .88rem; color: var(--texto-2);
}
.nota-autor figcaption { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); margin-bottom: .25rem; }

.aviso-ampliar {
  font-size: .8rem; color: var(--texto-3);
  border: 1px dashed var(--borde); border-radius: var(--radio-xs); padding: .5rem .7rem;
}

/* ------------------------------------------------------- estadísticas */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; margin-bottom: 2rem; }
.kpi {
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio); padding: 1rem 1.1rem;
}
.kpi__valor { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi__valor small { font-size: .9rem; font-weight: 600; color: var(--texto-3); margin-left: .2rem; }
.kpi__etiqueta { font-size: .78rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .07em; margin-top: .3rem; }

/* ---------------------------------------------------------------- insignias
   Las que ya tienes, encendidas; las que no, apagadas pero con su progreso
   debajo, para que se vea lo que falta sin tener que adivinar nada. */
.logros { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: .7rem; }
.logro {
  display: flex; flex-direction: column; gap: .16rem;
  padding: .7rem .8rem; border: 1px solid var(--borde-suave);
  border-radius: var(--radio-s); background: var(--superficie-2);
  opacity: .5; filter: saturate(.45);
}
.logro--hecho {
  opacity: 1; filter: none;
  border-color: color-mix(in srgb, var(--acento-2) 45%, var(--borde));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--acento-2) 13%, var(--superficie-2)), var(--superficie-2));
}
.logro__icono { font-size: 1.35rem; line-height: 1; }
.logro__titulo { font-weight: 700; font-size: .9rem; }
.logro__detalle { font-size: .76rem; color: var(--texto-3); }
.logro__barra {
  margin-top: .35rem; height: 4px; border-radius: 999px;
  background: var(--superficie-3); overflow: hidden;
}
.logro__barra > span { display: block; height: 100%; background: var(--acento); border-radius: inherit; }
.logro--hecho .logro__barra { display: none; }

.barras { display: grid; gap: .45rem; }
.barra { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: .7rem; align-items: center; font-size: .84rem; }
.barra__nombre { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__pista { background: var(--superficie-3); border-radius: 999px; height: 9px; overflow: hidden; }
.barra__relleno { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acento), var(--acento-2)); }
.barra__valor { color: var(--texto-3); font-variant-numeric: tabular-nums; font-size: .78rem; }

.grafica { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: 1.1rem 1.2rem; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica__eje { fill: var(--texto-3); font-size: 10px; }
.grafica__barra { fill: var(--acento); }
.grafica__barra:hover { fill: var(--acento-2); }
.grafica__leyenda { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; font-size: .8rem; color: var(--texto-2); }
.grafica__leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .35rem; }

/* ------------------------------------------------------------ tablas */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde-suave); border-radius: var(--radio); background: var(--superficie); }
/* Un elemento de rejilla tiene min-width:auto, y eso hace que su ancho mínimo sea el
   de su contenido: con una tabla ancha dentro, la vista entera se salía de la pantalla
   en un móvil. Con min-width:0 la columna se ajusta y es la tabla la que se desliza. */
.pila > * { min-width: 0; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.tabla th, table.tabla td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--borde-suave); }
table.tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); background: var(--superficie-2); position: sticky; top: 0; }
table.tabla tbody tr:hover { background: var(--superficie-2); }
table.tabla td.num, table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla caption { caption-side: bottom; padding: .6rem .8rem; color: var(--texto-3); font-size: .78rem; text-align: left; }

/* ------------------------------------------------------- mi historial */
.estantes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.estante {
  background: linear-gradient(160deg, var(--superficie), var(--superficie-2));
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1rem;
  box-shadow: var(--sombra-suave);
}
/* h2 y no h3: los estantes cuelgan directamente del h1 de la vista, y saltarse
   un nivel hace que quien navega por encabezados crea que se ha perdido algo. El
   tamaño va puesto a mano, así que el cambio de nivel no se ve. */
.estante h2 { font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.estante h2 span { font-weight: 500; color: var(--texto-3); font-size: .8rem; }
/* minmax(0, 1fr) y no la columna automática: con auto, la columna se dimensiona por
   el ancho mínimo de cada fila (carátula + título + meta) y la lista se salía de su
   tarjeta. Con la columna flexible, cada fila se ajusta y el título recorta. */
.estante ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.estante li { display: flex; gap: .55rem; align-items: center; padding: .35rem .45rem; border-radius: var(--radio-xs); }
.estante li:hover { background: var(--superficie-2); }
/* El nombre envuelve como siempre, pero la meta (que va con nowrap) puede encogerse
   con puntos suspensivos: sin eso, su ancho mínimo sacaba la lista de su caja y la
   página se desbordaba unos píxeles en algunas anchuras. */
/* El título es un enlace dentro de una fila en flex y medía 22 px de alto. El
   relleno lo sube a 31 px de zona de toque y el margen negativo en la misma
   medida deja la fila como estaba (el relleno del `li` lo absorbe). */
.estante .estante__titulo {
  font-size: .86rem; flex: 1; min-width: 0;
  padding-block: .3rem; margin-block: -.3rem;
}
.estante .estante__meta {
  font-size: .74rem; color: var(--texto-3); white-space: nowrap;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.estante--apagado { opacity: .55; }

/* ---------------------------------------------------------- comparar */
.comparador { display: grid; gap: 1rem; }
.comparador__elegir { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
/* El campo para buscar el título que se compara. Tenía los estilos en línea
   (con `font: inherit`), y por eso se quedaba en 15 px: ninguna regla de la
   hoja podía subirle la letra. En el móvil son 16 px (ver «dedos, no ratones»),
   que es lo que evita que iOS haga zoom al enfocarlo. */
.comparador__buscar {
  flex: 1; min-width: 220px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: .5rem .9rem; color: var(--texto);
  font: inherit; font-size: .9rem;
}
table.tabla--comparar th:first-child { min-width: 150px; }
table.tabla--comparar th { position: static; }
.celda-mejor { color: var(--acento-2); font-weight: 700; }

/* -------------------------------------------------------------- pie */
.pie {
  border-top: 1px solid var(--borde-suave); background: var(--fondo-2);
  padding: 1.6rem 1.1rem 2.4rem; font-size: .84rem; color: var(--texto-3);
}
.pie p { max-width: var(--ancho); margin: 0 auto .5rem; }
.pie code { background: var(--superficie-2); padding: .1rem .35rem; border-radius: 4px; font-family: var(--mono); font-size: .8rem; }
.pie__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pie__sep { opacity: .5; }
/* Los enlaces del pie son pequeños a propósito (el pie no debe competir con el
   contenido), pero seguían siendo el blanco de un toque: medían 22 px y quedaban
   por debajo del mínimo. El relleno va en vertical y el margen negativo en la
   misma medida, así que el pie queda exactamente igual de alto y de ancho. */
.pie__meta a {
  padding-block: .35rem; margin-block: -.35rem; border-radius: var(--radio-xs);
}
.pie__meta a:hover { color: var(--acento); }
/* «Atajos de teclado»: es un botón (abre una ventana, no navega) pero se ve y se
   toca como los demás enlaces del pie. Mismo truco de relleno y margen negativo
   para que el pie no crezca y el blanco de toque llegue al mínimo. */
.pie__boton {
  background: none; border: 0; padding-block: .35rem; margin-block: -.35rem;
  border-radius: var(--radio-xs); color: inherit; font: inherit; cursor: pointer;
}
.pie__boton:hover { color: var(--acento); }

/* ----------------------------------------------------------- avisos */
.avisos {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(140%);
  background: var(--superficie-3); color: var(--texto); border: 1px solid var(--borde);
  padding: .6rem 1.1rem; border-radius: 999px; font-size: .85rem; box-shadow: var(--sombra);
  transition: transform .25s ease; z-index: 60; max-width: 92vw; text-align: center;
}
.avisos[data-visible="1"] { transform: translateX(-50%) translateY(0); }
/* Con la barra de pestañas del móvil delante, el aviso sube por encima de ella:
 * si no, nace tapado y parece que la app no reacciona al marcar una serie. */
@media (max-width: 700px) {
  .avisos { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------- utilidades */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.texto-secundario { color: var(--texto-3); }
.sr { font-size: .8rem; color: var(--texto-3); }
/* Texto que existe para el lector de pantalla pero no se ve: se usa para titular
   una zona que visualmente ya se entiende (la rejilla de resultados, los filtros)
   sin meter un rótulo de más en la pantalla. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pila { display: grid; gap: 1.1rem; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.resaltado { background: color-mix(in srgb, var(--acento) 30%, transparent); border-radius: 3px; padding: 0 .12rem; }

/* ------------------------------------------- acciones rápidas (⋯)
   La tarjeta y la fila se parten en dos zonas: el enlace que lo ocupa todo y este
   botón, que va fuera del enlace (dentro no sería válido ni se podría pulsar). */
.acciones__boton {
  position: absolute; z-index: 3; top: .45rem; right: .45rem;
  /* 34 px, no 30: es el botón que abre las opciones de una tarjeta y en el móvil
     cae justo en la esquina de la carátula, donde el pulgar va más justo. */
  width: 34px; height: 34px; padding: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; line-height: 1;
  font-size: 1.02rem; font-family: inherit;
  background: color-mix(in srgb, var(--superficie) 76%, transparent);
  border: 1px solid var(--borde); color: var(--texto-2);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.acciones__boton:hover, .acciones__boton[aria-expanded="true"] {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
.fila .acciones__boton { top: 50%; transform: translateY(-50%); }
.fila__cuerpo { padding-right: 2.6rem; }        /* hueco para el «⋯», que ahora mide 34 px */

.acciones-menu {
  position: fixed; z-index: 60; min-width: 216px; padding: .5rem;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio-s); box-shadow: var(--sombra);
}
/* Fondo que oscurece la página detrás de la ventana de opciones de la ficha.
   Un div aparte (no un pseudo) porque debe poder cerrar la ventana al tocarlo. */
.acciones-fondo {
  position: fixed; inset: 0; z-index: 59;
  background: rgba(8, 10, 16, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* La ventana de atajos: misma idea que la de opciones de la ficha (centrada,
   sobre un fondo que oscurece y con scroll propio), pero con una lista de teclas
   y su explicación. Va por encima del fondo (z-index mayor) para poder cerrarla. */
.atajos {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(26rem, calc(100vw - 2rem));
  /* Dos veces a propósito: `dvh` es lo correcto, pero un WebView viejo no lo
     entiende y sin la línea de `vh` la ventana se saldría de la pantalla. */
  max-height: min(34rem, calc(100vh - 2rem));
  max-height: min(34rem, calc(100dvh - 2rem));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1.1rem; background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
.atajos h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.atajos__nota { margin: 0 0 .8rem; color: var(--texto-3); font-size: .84rem; }
.atajos__lista {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem;
  margin: 0 0 .9rem; font-size: .88rem;
}
.atajos__lista dt { margin: 0; }
.atajos__lista dd { margin: 0; color: var(--texto-2); }
.atajos kbd {
  display: inline-block; min-width: 1.6rem; padding: .1rem .4rem; text-align: center;
  background: var(--superficie-3); border: 1px solid var(--borde); border-bottom-width: 2px;
  border-radius: var(--radio-xs); font-family: var(--mono); font-size: .78rem; color: var(--texto);
}

/* Aviso antes de salir a jkanime: la misma ventana que la de atajos (hereda
   posición, fondo y scroll) con sitio para una lista de pasos. Un poco más
   ancha porque los pasos llevan enlaces y nombres de navegador. */
.aviso-jk { width: min(30rem, calc(100vw - 2rem)); }
.aviso-jk__recomienda { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.45; }
.aviso-jk__enlace { margin: 0 0 .8rem; font-size: .9rem; }
.aviso-jk__enlace a,
.aviso-jk__pasos a { color: var(--acento); word-break: break-word; }
.aviso-jk__nav { margin: 0 0 .5rem; font-size: .82rem; color: var(--texto-3); }
.aviso-jk__pasos {
  display: grid; gap: .35rem; margin: 0 0 .9rem;
  padding-left: 1.2rem; font-size: .87rem; line-height: 1.45; color: var(--texto-2);
}
.aviso-jk__recordar {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0 0 .9rem; font-size: .84rem; color: var(--texto-3); cursor: pointer;
}
.aviso-jk__recordar input { margin-top: .15rem; flex: none; }
.aviso-jk__botones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aviso-jk__nota-final { margin: .8rem 0 0; font-size: .78rem; color: var(--texto-3); line-height: 1.4; }
/* La ventana de opciones de la ficha: centrada, ancho cómodo de móvil y con
   scroll propio para listas largas en pantallas bajas. */
.acciones-menu--hoja {
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%);
  width: min(22rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  /* Dos veces a propósito: `dvh` es lo correcto (encoge con la barra del
     navegador), pero un WebView de Android viejo no lo entiende y sin la línea
     de `vh` de antes la ventana se saldría de la pantalla en esos móviles. */
  max-height: min(32rem, calc(100vh - 2rem));
  max-height: min(32rem, calc(100dvh - 2rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .75rem;
  border-radius: var(--radio);
}
/* Filas de botones un poco más de dedo dentro de la ventana: hay más sitio. */
.acciones-menu--hoja .acciones-menu__fila button,
.acciones-menu--hoja .acciones-menu__fila a {
  padding: .55rem .6rem; font-size: .9rem;
}
.acciones-menu--hoja .acciones-menu__cajas {
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .1rem .35rem .3rem;
}
.acciones-menu__titulo {
  margin: .3rem .35rem .3rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-3);
}
.acciones-menu__fila { display: flex; flex-direction: column; gap: .2rem; }
.acciones-menu__fila button, .acciones-menu__fila a {
  text-align: left; padding: .4rem .5rem; border-radius: var(--radio-xs);
  background: transparent; border: 1px solid transparent; color: var(--texto);
  font: inherit; font-size: .84rem; cursor: pointer;
}
.acciones-menu__fila button:hover, .acciones-menu__fila a:hover { background: var(--superficie-3); }
/* El enlace de visionado dentro del menú «⋯»: mismo cuerpo que los botones de
   al lado, con el verde de jkanime para reconocerlo de un vistazo. */
.acciones-menu__boton { color: var(--enlace-jk); text-decoration: none; }
.acciones-menu__boton:hover { color: var(--enlace-jk-fuerte); text-decoration: none; }
.acciones-menu__fila button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--acento) 20%, transparent);
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
  color: var(--texto); font-weight: 600;
}
.acciones-menu__enlace {
  display: block; margin: .35rem -.5rem -.5rem; padding: .45rem .85rem;
  border-top: 1px solid var(--borde-suave); font-size: .82rem;
}

/* ------------------------------------------------------- cola */
.cola-siguiente {
  display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.4rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra-suave);
}
.cola-siguiente__caratula { flex: 0 0 132px; width: 132px; }
.cola-siguiente__caratula .caratula { border-radius: var(--radio-s); }
.cola-siguiente__cuerpo { min-width: 0; }
.cola-siguiente__etiqueta {
  margin: 0 0 .25rem; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--acento);
}
.cola-siguiente h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
.cola-siguiente__sinopsis { margin: .55rem 0 0; max-width: 72ch; color: var(--texto-2); font-size: .88rem; }
.cola-siguiente__acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.cola { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.cola__item { display: grid; gap: .4rem; }
.cola__acciones { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }

/* ------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .cabecera__barra { flex-wrap: wrap; }
  .boton-filtros { display: inline-flex; }
  .facetas--abierta .facetas__aplicar { display: inline-flex; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .nav { order: 2; }
  .campos { grid-template-columns: 1fr; }
  /* Las facetas van arriba del listado, así que en estrecho la primera ficha
   * queda fuera de la vista: se enseñan solo cuando se piden con el botón
   * «Filtros» y se vuelven a plegar con «Filtrar» (ver app.js). */
  .facetas { position: static; max-height: none; display: none; }
  .facetas--abierta { display: block; }
  .bloques, .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .cabecera-ficha { grid-template-columns: 1fr; }
  .cabecera-ficha .caratula { max-width: 200px; }
  .trailer__caja, .trailer__marco { flex-basis: 100%; width: 100%; }
  .barra { grid-template-columns: minmax(90px, 40%) 1fr auto; }
}
/* Las reglas de dedo (zonas de 44 px y campos de 16 px) van al final del
   archivo, en «dedos, no ratones»: ahí pisan a las de arriba sin pelearse. */

@media (max-width: 620px) {
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .continuar { gap: .1rem; }
  .continuar li { flex-wrap: wrap; gap: .25rem .5rem; }
  .continuar__meta { order: 3; flex-basis: 100%; }
  .fila__caratula { flex-basis: 78px; width: 78px; }
  .fila__sinopsis { -webkit-line-clamp: 2; }
  .hero { padding: 1.4rem 1rem; }
  /* Ojo: esto va DESPUÉS de la regla de arriba, así que la pisa. Por eso los
     márgenes de la muesca tienen que repetirse aquí, si no, en el móvil
     desaparecían justo donde más falta hacen. */
  main {
    padding: 1.1rem .8rem 3rem;
    padding-left: calc(.8rem + env(safe-area-inset-left, 0px));
    padding-right: calc(.8rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }
  .cola-siguiente { flex-direction: column; }
  .cola-siguiente__caratula { flex-basis: 108px; width: 108px; }
  .cola__acciones { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------- aviso de versión nueva (pwa.js) */
/* Sale abajo, discreto, y solo cuando hay algo que decir. */
.aviso-version {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-2);
  box-shadow: var(--sombra);
  transform: translateX(-50%);
  animation: entra-aviso .22s ease-out;
}
.aviso-version__texto { font-size: .9rem; color: var(--texto-2); }
.aviso-version__texto strong { color: var(--texto); }
@keyframes entra-aviso {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-version { animation: none; }
}

/* ---------------------------------------------------------- impresión */
/* --------------------------------------------- pestañas del móvil */
/* Navegación con el pulgar: cinco pestañas fijas abajo, como cualquier app.
   En escritorio no existe (ahí manda la cabecera). El «aria-current» lo pone
   app.js al renderizar, igual que hace con el menú de la cabecera. */
.pestanas { display: none; }
@media (max-width: 700px) {
  .pestanas {
    position: fixed;
    z-index: 60;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: nowrap;
    max-width: 100%;
    background: var(--fondo-2);
    border-top: 1px solid var(--borde);
    padding-bottom: env(safe-area-inset-bottom, 0px); /* la barra del iPhone */
    margin: 0;
  }
  /* En móvil la barra de abajo lleva TODA la navegación, así que el menú de la
     cabecera sobra: repetía las mismas secciones, empujaba el buscador a una
     segunda línea y hacía que la cabecera pareciera otra barra de pestañas.
     `.pestanas` solo existe por debajo de 700 px, así que las dos condiciones
     cuadran: o navegas por abajo o navegas por arriba, nunca por los dos. */
  .nav { display: none; }
  .pestanas a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: .45rem .5rem;
    font-size: .68rem;
    color: var(--texto-3);
    text-decoration: none;
    min-height: 48px;
    justify-content: center;
    flex: 1 1 0;
    min-width: max(0px, 56px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
  }
  .pestanas a span[class*="icono"] { flex-shrink: 0; }
  /* Iconos SVG en línea (no emoji): el trazo hereda el color de la pestaña. */
  .pestanas__icono { display: flex; align-items: center; justify-content: center; }
  .pestanas__icono svg { width: 22px; height: 22px; display: block; }
  .pestanas a[aria-current="page"] { color: var(--acento); }
  /* La pestaña activa, además del color, lleva un fondo tenue: en un móvil a
     pleno sol el color solo no se distingue. */
  .pestanas a[aria-current="page"] { background: rgba(139, 108, 255, .14); }
  /* no queda cortado en el lado izquierdo */
  .pestanas { border-left: 0; border-right: 0; }
  .pestanas a { border-left: 0; border-right: 0; }
  /* el contenido y el pie no se esconden detrás de la barra */
  main { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
  .pie { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
}

@media print {
  .aviso-version { display: none !important; }
  :root { --fondo: #fff; --superficie: #fff; --texto: #000; --texto-2: #333; --texto-3: #555; --borde: #ccc; --borde-suave: #ddd; }
  .cabecera, .pie, .acciones-ficha, .barra-filtros, .avisos, .sugerencias, .saltar { display: none !important; }
  main { max-width: none; padding: 0; }
  .bloque, .grafica, .tabla-envoltura { break-inside: avoid; }
  a { color: #000; }
}

/* ==========================================================================
   COMUNIDAD, CUENTA Y NOVEDADES  (assets/comunidad.js)
   ========================================================================== */

/* -------------------------------------------------- franja de novedades */
.franja {
  border-bottom: 1px solid var(--borde-suave);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 12%, transparent), transparent);
}
.franja__interior {
  max-width: var(--ancho); margin: 0 auto; padding: .7rem 1.1rem;
  display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; align-items: flex-start;
  position: relative;
}
.franja__etiqueta {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  border-radius: 999px; padding: .18rem .55rem; white-space: nowrap;
}
.franja__cerrar {
  margin-left: auto; background: none; border: none; color: var(--texto-3);
  cursor: pointer; font-size: .95rem; line-height: 1; padding: .2rem .35rem; border-radius: var(--radio-xs);
}
.franja__cerrar:hover { color: var(--texto); background: var(--superficie-2); }
.novedad { flex: 1 1 260px; min-width: 0; }
.novedad__titulo { font-size: .9rem; margin: 0 0 .15rem; }
.novedad__cuerpo { font-size: .85rem; color: var(--texto-2); margin: 0 0 .15rem; }
.novedad__pie { font-size: .76rem; color: var(--texto-3); margin: 0; }
.novedad--nueva .novedad__titulo::after {
  content: 'nuevo'; margin-left: .45rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--acento-2);
  border: 1px solid color-mix(in srgb, var(--acento-2) 45%, transparent);
  border-radius: 999px; padding: .05rem .4rem; vertical-align: middle;
}
.novedad--aviso .novedad__titulo { color: var(--estrella); }
.novedad--mantenimiento .novedad__titulo { color: var(--peligro); }

/* ------------------------------------------------------ paneles y campos */
.panel {
  background: linear-gradient(160deg, var(--superficie), var(--superficie-2));
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1rem 1.1rem; margin-bottom: 1.4rem;
  box-shadow: var(--sombra-suave);
}
.panel__titulo { font-size: 1rem; margin: 0 0 .8rem; }
.panel--cuenta { max-width: 520px; }
.panel--aviso { max-width: 620px; border-color: color-mix(in srgb, var(--acento-2) 40%, var(--borde)); }

/* Ojo con el nombre: esto es un grupo de pestañas DENTRO de una vista (Entrar /
   Crear cuenta). Se llama distinto de `.pestanas` —la barra inferior del móvil—
   porque compartían nombre y esta regla, al ir después, pisaba el `display:none`
   de aquella: la barra de móvil aparecía también en escritorio, al final del
   documento, y en el móvil heredaba el fondo de pastilla. */
.pestanas-panel { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pestanas-panel button {
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-2);
  padding: .38rem .85rem; border-radius: 999px; cursor: pointer; font-size: .84rem; font-weight: 600;
}
.pestanas-panel button[aria-selected="true"] { background: var(--acento); border-color: transparent; color: #fff; }

.formulario { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.formulario > p { margin: 0; flex: 1 1 100%; }
.formulario__nota { flex: 1 1 100%; margin: .9rem 0 0; font-size: .8rem; line-height: 1.5; }
.formulario--ancho .campo { flex: 1 1 220px; }
.formulario--respuesta { margin-top: .7rem; }
.formulario--respuesta .campo { flex: 1 1 100%; }

.campo { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 200px; min-width: 0; }
.campo--ancho { flex: 1 1 100%; }
.campo > span { font-size: .78rem; font-weight: 600; color: var(--texto-2); }
.campo input, .campo select, .campo textarea {
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto);
  border-radius: var(--radio-s); padding: .5rem .65rem; font: inherit; font-size: .88rem;
  width: 100%; resize: vertical;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}

.error-caja {
  background: color-mix(in srgb, var(--peligro) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--peligro) 45%, transparent);
  color: var(--texto); border-radius: var(--radio-s); padding: .6rem .8rem;
  font-size: .86rem; margin: 0 0 1rem;
}

/* ----------------------------------------------------------- propuestas */
.barra-filtros--comunidad { margin-bottom: 1.2rem; }
.propuesta {
  background: linear-gradient(160deg, var(--superficie), var(--superficie-2));
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
  padding: .9rem 1rem;
  margin-bottom: .8rem;
  box-shadow: var(--sombra-suave);
}
.propuesta--abierta { border-left-color: var(--acento); }
.propuesta--en-curso { border-left-color: var(--acento-2); }
.propuesta--hecha { border-left-color: var(--texto-3); opacity: .82; }
.propuesta--descartada { border-left-color: var(--peligro); opacity: .72; }
.propuesta__cabecera { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.propuesta__titulo { font-size: 1rem; margin: 0; flex: 1 1 200px; }
.propuesta__estado {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); border: 1px solid var(--borde); border-radius: 999px; padding: .1rem .5rem;
}
.propuesta__cuerpo { font-size: .88rem; color: var(--texto-2); margin: .5rem 0 .35rem; white-space: pre-wrap; }
.propuesta__meta { font-size: .78rem; color: var(--texto-3); margin: 0 0 .6rem; }
.propuesta__acciones { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.propuesta__admin { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.propuesta__admin select {
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto);
  border-radius: var(--radio-xs); padding: .25rem .4rem; font-size: .78rem;
}
.insignia--tipo {
  background: var(--superficie-3); border-color: var(--borde); color: var(--texto-2);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
}

/* ---------------------------------------------------------- hilos */
.hilo {
  margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--borde);
}
.respuesta {
  background: var(--superficie-2); border-radius: var(--radio-s);
  padding: .55rem .7rem; margin-bottom: .5rem;
}
.respuesta__meta { font-size: .76rem; color: var(--texto-3); margin: 0 0 .25rem; }
.respuesta__cuerpo { font-size: .87rem; margin: 0; white-space: pre-wrap; }

@media (max-width: 620px) {
  .franja__interior { padding: .6rem .8rem; }
  .propuesta__admin { margin-left: 0; }
}

/* ==========================================================================
   AJUSTES DE ESTA COPIA  (app.js: vistaAjustes)
   Cada ajuste es un atributo de <html> (`data-densidad`, `data-escala`…), y
   estas reglas son lo que hace cada uno. Van al final del archivo a propósito:
   así pisan a las de arriba sin depender del orden en que se escribieron.
   ========================================================================== */

/* --- contraste alto
   El tema oscuro por defecto y el claro ya pasan 4,5:1 en el texto de lectura,
   pero el texto secundario y los bordes son discretos a propósito. Esto los
   marca, que es lo que hace falta con mucha luz o vista cansada. */
html[data-contraste="alto"] {
  --texto-2: #dfe4f0;
  --texto-3: #c2cadb;
  --borde: #4a5570;
  --borde-suave: #3c455c;
}
html[data-tema="claro"][data-contraste="alto"] {
  --texto-2: #232a3a;
  --texto-3: #3b4457;
  --borde: #8d95a6;
  --borde-suave: #aab2c0;
}
html[data-contraste="alto"] .chip,
html[data-contraste="alto"] .boton--fantasma { border-width: 2px; }

/* --- letra grande
   Sube la raíz, que es de donde cuelgan casi todos los tamaños (van en `rem`),
   y la letra del cuerpo, que va en píxeles: sin las dos no cambiarían ni la
   mitad de las cosas. */
html[data-escala="grande"] { font-size: 17.5px; }
html[data-escala="grande"] body { font-size: 1rem; }
html[data-escala="grande"] .tarjeta__titulo,
html[data-escala="grande"] .fila__titulo { font-size: 1.05rem; }

/* --- lista compacta */
html[data-densidad="compacta"] .filas { gap: .55rem; }
html[data-densidad="compacta"] .fila__enlace { padding: .5rem; }
html[data-densidad="compacta"] .rejilla { gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
html[data-densidad="compacta"] .tarjeta__cuerpo { padding: .55rem .6rem .65rem; gap: .2rem; }
html[data-densidad="compacta"] .tarjeta__sinopsis { -webkit-line-clamp: 2; }
html[data-densidad="compacta"] .voces__fila { padding: .28rem .35rem; }
html[data-densidad="compacta"] .seccion { margin-bottom: 1.9rem; }

/* --- sin pósters
   Las carátulas se quedan con su color y sus iniciales, que es lo que ya hacían
   de respaldo cuando la imagen no llegaba. `display:none` además evita que el
   navegador pida la imagen: una carátula oculta no entra en pantalla y con
   `loading="lazy"` no se descarga. */
html[data-caratulas="no"] .caratula__img { display: none; }

/* --- sin animaciones (el ajuste; quien lo pide por el sistema ya lo tiene
   respetado en la regla `prefers-reduced-motion` de arriba) */
html[data-movimiento="reducido"] { scroll-behavior: auto; }
html[data-movimiento="reducido"] *,
html[data-movimiento="reducido"] *::before,
html[data-movimiento="reducido"] *::after {
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}
html[data-movimiento="reducido"] .tarjeta:hover,
html[data-movimiento="reducido"] .fila:hover { transform: none; }

/* --- la página de ajustes */
/* Cada fila es un `.campo` (misma caja, misma letra y el mismo mínimo de 44 px
   al dedo que los campos de un formulario): así no hay dos maneras de dibujar
   un desplegable en el sitio. Se añaden el nombre y la explicación. */
.ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1.1rem; }
.ajuste__nombre { font-size: .88rem; }
.ajuste__ayuda {
  font-size: .78rem; font-weight: 400; color: var(--texto-3); line-height: 1.45;
}

/* ==========================================================================
   AMIGOS  (app.js: vistaAmigos)
   Comparar listas a mano: tu código y el de otra persona. Una tarjeta por
   persona, a lo ancho (dentro lleva otra rejilla con lo que te recomienda).
   ========================================================================== */
.amigos { display: grid; gap: 1.2rem; }
.bloque.amigo { display: flex; flex-direction: column; gap: .8rem; }
.amigo__cabecera { display: flex; align-items: baseline; gap: .5rem .8rem; flex-wrap: wrap; }
/* El nombre de la persona es un encabezado de nivel 2 (no se salta ningún
   nivel), pero no lleva el tratamiento de los títulos de bloque: aquí es el
   nombre de alguien, no una etiqueta de sección. */
.bloque.amigo h2 {
  font-size: 1.08rem; font-weight: 700; text-transform: none; letter-spacing: -.015em;
  color: var(--texto); margin: 0;
}
.bloque.amigo h2::before { display: none; }
.amigo__cuando { font-size: .78rem; color: var(--texto-3); }
.bloque.amigo .kpis { margin: 0; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; }
.bloque.amigo .kpi { padding: .6rem .7rem; }
.bloque.amigo .kpi__valor { font-size: 1.35rem; }
.bloque.amigo h3.amigo__titulo {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-3); margin: .3rem 0 0;
}
.amigo__mas { font-size: .84rem; color: var(--texto-3); margin: .4rem 0 0; }

/* ------------------------------------------------- dedos, no ratones
   Va al final del archivo a propósito: son reglas que tienen que poder pisar a
   las de arriba (el tamaño de letra de las pestañas, el relleno de los
   «mini»…) sin depender del orden en que se escribieron.

   Y va DE VERDAD al final porque se había quedado en medio: cuando se añadió
   después la hoja de la nube (campos, propuestas, hilos), sus reglas quedaron
   por debajo y le ganaban por orden —`.campo input` fija .88rem y esta lista
   fija 16px, con la misma especificidad—, así que los campos de los formularios
   se quedaban en 14 px en el móvil. Ahí iOS hace zoom al enfocar y la página se
   queda ampliada: es justo el fallo que esta regla existe para evitar.

   Y va por ANCHO además de por `pointer: coarse` por un motivo concreto: el
   Chromium sin cabeza que usan las pruebas NO emula el puntero táctil, así que
   todo lo que colgaba solo de `coarse` se quedaba sin comprobar nunca — el
   arnés medía 34 px donde en un móvil de verdad hay 44. Con el ancho entra en
   las pruebas de 700, 390, 360 y 320 px; y una tablet táctil ancha sigue
   entrando por `coarse`. */
@media (max-width: 700px), (pointer: coarse) {
  /* --- zonas de toque: ningún control por debajo de 44 px
     Los bordes transparentes agrandan la zona sin mover la maqueta. */
  .boton { min-height: 44px; }
  .boton--mini, .chip, .boton-icono { min-height: 44px; padding-top: .35rem; padding-bottom: .35rem; }
  .pestanas a { min-height: 52px; }

  /* El botón de opciones «⋯» de cada tarjeta: medía 34 px y cae en la esquina
     de la carátula, justo donde el pulgar va más justo. El hueco que le reserva
     el texto de la fila crece con él. */
  .acciones__boton { width: 44px; height: 44px; }
  .fila__cuerpo { padding-right: 3.4rem; }

  /* La barra de filtros, el conmutador rejilla/lista, la paginación y los
     enlaces del pie: todos eran blancos de un toque y todos quedaban cortos. */
  .conmutador button, .seccion__mas, .paginacion button, .boton-filtros,
  .facetas__aplicar, .buscador__limpiar {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* La «✕» de limpiar la búsqueda medía 27 px de ancho: al lado del campo, con
     el pulgar, se falla. Crece a 44 y el campo le deja el hueco. */
  .buscador__limpiar { min-width: 44px; justify-content: center; }
  .buscador input { padding-right: 3rem; }
  /* La casilla de «visto» de cada capítulo y el «▶ ver» medían 29 y 32 px: son
     los dos toques que más se repiten en la ficha, uno detrás de otro y con el
     pulgar. Crecen a 44 sin mover el texto de la fila. */
  .caps__marca { width: 44px; height: 44px; }
  .caps__ver { min-height: 44px; display: inline-flex; align-items: center; }
  /* Los nombres del reparto son enlaces en una lista apretada: se agranda la
     zona con relleno y se compensa con margen, así no cambia el ritmo. */
  .voces__actor, .actor__nombre {
    padding-block: .55rem; margin-block: -.55rem;
    /* Los nombres cortos («Ajie») se quedaban en 31 px de ancho: el relleno
       lateral agranda la zona sin correr el texto, y el mínimo de 44 remata los
       que no llegan ni con eso. */
    padding-inline: .35rem; margin-inline: -.35rem;
  }
  .voces__actor { min-width: 44px; justify-content: flex-start; }
  /* Enlaces que son un renglón de una lista (títulos del historial, botón del
     pie, el resumen de un desplegable): el texto mide 32-34 px de alto y el
     dedo no acierta. Crecen a 44 sin cambiar el espaciado visible. */
  .estante__titulo, .actor__nombre, .voces__actor, .pie__boton {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Un summary con `display: flex` pierde el triangulito en algunos navegadores,
     así que el alto se gana con relleno, no con una caja. El de la lista de
     actores fija su propio relleno con más especificidad, así que va aparte. */
  summary { padding-block: .65rem; }
  .actor > summary { padding-block: .7rem; }
  .barra-filtros select, .barra-filtros input[type="search"], .mi-nota select,
  .actores__buscar input, .campo input, .campo select, .campo textarea,
  .comparador__buscar, .caps__buscar, .amigo-codigo-mio, .amigo-codigo {
    min-height: 44px;
  }
  .pie__meta a { padding-block: .7rem; margin-block: -.7rem; }

  /* --- campos de 16 px como mínimo
     Por debajo de 16 px, iOS hace zoom al enfocar un campo y la página se queda
     ampliada al cerrar el teclado. En el navegador de escritorio no pasa, por
     eso es de los fallos que uno no ve hasta que lo ve todo el mundo. */
  .buscador input, .barra-filtros select, .barra-filtros input[type="search"],
  .mi-nota select, .actores__buscar input, .campo input, .campo select,
  .campo textarea, .comparador__buscar, .caps__buscar,
  .amigo-codigo-mio, .amigo-codigo,
  input, select, textarea { font-size: 16px; }

  /* --- letra mínima legible
     A un brazo de distancia, una etiqueta de 10,6 px no se lee. Suben solo las
     más pequeñas de la escala, no toda la maqueta. */
  .marca__texto small { font-size: .76rem; }
  .insignia { font-size: .76rem; }
  /* Las pestañas de abajo llevan el nombre de cada sección: a .68rem no se
     leían. Suben sin llegar a partirse en dos líneas (van con `white-space:
     nowrap` y reparto igual, así que la más larga marca el ancho de todas). */
  .pestanas a { font-size: .76rem; }
  .tarjeta__meta, .fila__meta { font-size: .8rem; }
  .chip small, .chip--estatico, .nota-pill small { font-size: .76rem; }
  .tarjeta__sinopsis { font-size: .82rem; }
  /* Los botones «mini» y el conmutador rejilla/lista llevan su rótulo a la
     letra del cuerpo: son controles de uso continuo, no notas al pie. */
  .boton--mini, .conmutador button { font-size: .84rem; }
}