/* Estilo de la web: dosmilero cute, rosa y morado.
   Sacado del tema alt de /stats/ del BCBHub (_recursos/referencias/tema_alt_stats_bcbhub.html). */


/* --- Fuentes (static/fuentes/, licencia OFL en cada OFL-*.txt) ---
   - DotGothic16: letra de puntitos para el texto (pensada para 16 px y múltiplos).
   - Kiwi Maru: redondita para los títulos. Solo existe en Medium (500); los títulos van en
     negrita (700) y el navegador la engorda él solo ("negrita sintética").
   - font-display: swap → mientras carga, el texto sale con otra letra en vez de quedarse invisible.
   - Recortadas a los caracteres de la web (+ todo el latino) y en .woff2: de 7 MB a ~100 KB.
     Las completas están en _recursos/fuentes/; se recortan con `python manage.py recortar_fuentes`.
     Si algún carácter no está, el navegador lo pinta con la siguiente fuente de la lista. */
@font-face {
  font-family: 'DotGothic16';
  font-weight: 400;
  font-display: swap;
  src: url('../fuentes/DotGothic16.woff2') format('woff2');
}

/* Anton: palo seco muy gruesa y estrecha, la más parecida (gratis) a la del logo de SEKAI.
   Solo se usa en .sekai. */
@font-face {
  font-family: 'Anton';
  font-weight: 400;
  font-display: swap;
  src: url('../fuentes/Anton.woff2') format('woff2');
}

@font-face {
  font-family: 'Kiwi Maru';
  font-weight: 500;
  font-display: swap;
  src: url('../fuentes/KiwiMaru-Medium.woff2') format('woff2');
}


/* --- Paleta: toda la web usa estas variables (cámbialas aquí y cambia todo) --- */
:root {
  --rosa: #ff8fc8;          /* rosa principal */
  --rosa-claro: #ffe3f1;    /* rosa muy claro, fondos */
  --rosa-fuerte: #e0459b;   /* rosa fuerte, texto y bordes */
  --morado: #b68cff;
  --morado-claro: #f1e6ff;
  --morado-fuerte: #7c3aed;
  --tinta: #6b2c5f;         /* texto: berenjena, más suave que el negro */

  /* Si a una fuente le falta un carácter, se prueba la siguiente de la lista */
  --fuente-texto: 'DotGothic16', Verdana, Tahoma, sans-serif;
  --fuente-titulo: 'Kiwi Maru', 'DotGothic16', cursive;

  color-scheme: light;      /* controles del navegador (scroll...) siempre en claro */
}


/* --- Fondo: mosaico de cuadritos rosas con corazones, como los fondos .gif de los 2000 ---
   Dos capas que se repiten cada 40×40 px (la primera de la lista va encima):

     ┌────┬────┐
     │ ♥  │    │   1. corazón: dibujito SVG escrito aquí mismo (data:image/svg+xml).
     ├────┼────┤      %23 = "#" (dentro de una URL, # se escribe así).
     │    │ ♥  │   2. cuadritos alternos: conic-gradient con cuatro cuartos de color,
     └────┴────┘      uno sí y uno no = tablero de ajedrez.

   - Sin background-attachment: fixed → el fondo se mueve con la página, como entonces. */
body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--rosa-claro);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 29 L12.5 21.5 A5 5 0 0 1 20 14.5 A5 5 0 0 1 27.5 21.5 Z' fill='%23ffb3d9'/%3E%3C/svg%3E"),
    conic-gradient(#ffe3f1 25%, #fff3f9 0 50%, #ffe3f1 0 75%, #fff3f9 0);
  background-size: 40px 40px, 40px 40px;
}


/* --- Cursores propios: Remilia en toda la página; un corazón sobre lo que se puede pinchar ---
   - cursor: url(dibujo) X Y, respaldo
       X Y      = el "punto" que hace clic dentro del dibujo (en píxeles desde arriba a la izquierda).
       respaldo = el cursor normal del sistema, por si el dibujo no carga.
   - Remilia con su lanza: pixel art de 42WV (2012), 32×32. Hace clic con la punta de la lanza (0 0).
     No más grande: muchos sistemas no aceptan cursores de más de 32 px.
   - Corazón: 7×6 "píxeles" pintados a 21×18 px, rosa fuerte con un píxel blanco de brillo.
     Hace clic en su centro (10 9).

         . ■ ■ . ■ ■ .
         ■ □ ■ ■ ■ ■ ■      □ = brillo blanco
         ■ ■ ■ ■ ■ ■ ■
         . ■ ■ ■ ■ ■ .
         . . ■ ■ ■ . .
         . . . ■ . . .                                                               */
body {
  cursor: url('../imagenes/cursor_remilia_42wv_32.png') 0 0, auto;
}

a,
button,
summary,
label,
input[type="checkbox"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='18' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23e0459b' d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3Cpath fill='%23fff' d='M1 1h1v1H1z'/%3E%3C/svg%3E") 10 9, pointer;
}


/* --- Estela de brillos: estrellitas que salen detrás del ratón (las crea static/js/efectos.js) ---
   - Mismo dibujo que las estrellitas del título, a 14×14 px. Rosa o morada (.brillo--morado).
   - position: fixed + left/top (los pone el JS) → en el sitio del ratón, dentro de la ventana.
   - margin negativo (mitad del tamaño): el centro de la estrellita queda justo en el ratón.
   - pointer-events: none → no "tapan" lo de debajo: los clics pasan a través.
   - Animación: cae 22 px, encoge y se desvanece. forwards → se queda en el último fotograma
     (invisible) hasta que el JS la borra. */
.brillo {
  position: fixed;
  z-index: 70;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff8fc8' d='M3 0h1v7H3zM0 3h7v1H0zM2 2h3v3H2z'/%3E%3Cpath fill='%23fff' d='M3 3h1v1H3z'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: brillo-cae 0.8s ease-out forwards;
}

.brillo--morado {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23b68cff' d='M3 0h1v7H3zM0 3h7v1H0zM2 2h3v3H2z'/%3E%3Cpath fill='%23fff' d='M3 3h1v1H3z'/%3E%3C/svg%3E");
}

@keyframes brillo-cae {
  from { transform: translateY(0)    scale(1);   opacity: 1; }
  to   { transform: translateY(22px) scale(0.5); opacity: 0; }
}


/* --- Enlaces: morados (en vez del azul del navegador); rosas al pasar el ratón --- */
a {
  color: var(--morado-fuerte);
}

a:hover {
  color: var(--rosa-fuerte);
}

/* <cite>: títulos de obras. El navegador los pone en cursiva; DotGothic16 no tiene cursiva
   (saldría torcida a la fuerza), así que la quitamos. */
cite {
  font-style: normal;
}


/* --- Títulos: letra "pegatina" (borde blanco y sombra morada) --- */
h1,
h2,
h3 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--rosa-fuerte);
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 var(--morado);
  letter-spacing: 0.02em;
}


/* --- Ventanitas: mezcla de lo cuqui (puntitos + brillo rosa) y Windows XP ---
   Estructura (en el HTML):

     .ventana
     ┌─────────────────────────────────┐  ← .ventana-barra: título a la izquierda,
     │ ✿ sobre_mi.exe        [♡][−][✕] │     botones de mentira a la derecha
     ├·································┤
     │ .ventana-contenido              │
     └─────────────────────────────────┘

   - Esquinas rectas (border-radius: 0). Antes eran redondas arriba y casi rectas abajo, como las
     ventanas de XP: border-radius con 4 valores (arriba-izq, arriba-der, abajo-der, abajo-izq).
   - Borde liso y fino; los puntitos van POR FUERA, separados 4px: outline es una línea que se
     dibuja fuera del borde (outline-offset = la separación). No ocupa sitio: no mueve nada.
   - En el hueco entre borde y puntitos se ve el anillo blanco del box-shadow (brillo rosa).
   - overflow: hidden → la barra no se sale de las esquinas redondas (no recorta outline ni sombra). */
.ventana {
  margin: 2rem 0;
  scroll-margin-top: 1rem;  /* al desplazar la página hasta una ventana, que no se corten los puntitos de fuera */
  background: rgba(247, 240, 255, 0.9);  /* lila muy clarito (casi blanco), un poco transparente */
  border: 1px solid var(--rosa);
  outline: 3px dotted var(--rosa);
  outline-offset: 4px;
  border-radius: 0;  /* esquinas rectas */
  box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(255, 143, 200, 0.75);
  overflow: hidden;
}

/* Fondo de corazones (marco medio transparente de Picmix) detrás del contenido de las ventanas
   de la COLUMNA DERECHA, al 70% de opacidad. (En las de la izquierda, más grandes y alargadas,
   el marco se estiraba demasiado.)
   - Un fondo normal no se puede hacer más transparente sin que lo haga también el texto de encima.
     Por eso va en ::before, una capa aparte del tamaño de la caja (inset: 0) con opacity: 0.7,
     puesta DETRÁS del contenido (z-index: -1).
   - isolation: isolate → ese "detrás" es dentro de la ventana (si no, se iría detrás del fondo de la página).
   - Estirado (100% 100%) para que el marco llegue a los cuatro bordes de cada ventana. */
.columna-lateral .ventana-contenido {
  position: relative;
  isolation: isolate;
}

.columna-lateral .ventana-contenido::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../imagenes/marco_corazones_picmix_2916538.png') center / 100% 100% no-repeat;
  opacity: 0.7;
  pointer-events: none;
}

/* Barra de título
   - display: flex + justify-content: space-between → título pegado a la izquierda, botones a la derecha.
   - Fondo en dos capas (la primera va encima):
     1. Brillo de XP: blanco transparente en la mitad de arriba que se corta de golpe a la mitad
        (50% → 50%: sin transición). Parece una barra de plástico brillante.
     2. Debajo, el degradado rosa → morado, de izquierda a derecha. */
.ventana-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.5rem 0.25rem 0.7rem;
  font-family: var(--fuente-titulo);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #a0306f;  /* sombrita dura bajo las letras, como en XP */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%),
    linear-gradient(90deg, var(--rosa), var(--morado));
  border-bottom: 2px dotted #fff;
}

/* Botones ♡ − ✕: cada uno en su cuadradito con borde blanco. No hacen nada (son de adorno). */
.ventana-botones {
  display: flex;
  gap: 3px;
}

.ventana-botones span {
  width: 1.15rem;
  height: 1.15rem;
  line-height: 1.05rem;  /* un poco menos que el alto: el borde de 1px ocupa sitio */
  text-align: center;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid #fff;
  border-radius: 3px;
}

/* El primer botón (♡): en vez del carácter, el corazoncito de pixel art que late (GIF de Picmix, 13×12)
   - color: transparent → el ♡ sigue en el HTML pero no se ve; encima, el GIF de fondo. */
.ventana-botones span:first-child {
  color: transparent;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.25) url('../imagenes/corazon_picmix_1520.gif') center / 13px 12px no-repeat;
  image-rendering: pixelated;
}

.ventana-contenido {
  padding: 0.5rem 1.2rem 1rem;
}

/* Ventana minimizada (<details>, ver miscelánea en inicio.html)
   - Más estrecha: parece una ventana pequeñita olvidada al final de la página.
   - El <summary> trae de serie un triángulo; lo quitamos (list-style y ::-webkit-details-marker,
     este último para Safari) y ponemos el nuestro delante del título: ▸ cerrada, ▾ abierta.
   - [open]: atributo que el navegador pone en <details> cuando está abierta. */
.ventana--mini {
  max-width: 22rem;
}

.ventana--mini[open] {
  max-width: none;  /* al abrirla se "maximiza": todo el ancho, como las demás */
}

.ventana--mini summary {
  list-style: none;  /* el cursor de corazón le llega de la regla general de summary */
}

.ventana--mini summary::-webkit-details-marker {
  display: none;
}

.ventana--mini .ventana-titulo::before {
  content: '▸ ';
}

.ventana--mini[open] .ventana-titulo::before {
  content: '▾ ';
}

/* Cerrada, la barra es lo único que se ve: sin la raya de puntitos de debajo */
.ventana--mini:not([open]) .ventana-barra {
  border-bottom: none;
}


/* --- Dentro de las ventanas --- */

/* Nino: flota a la derecha y el texto la rodea por la izquierda.
   - image-rendering: pixelated → si el navegador la escala, píxeles nítidos en vez de borrosos. */
.nino {
  float: right;
  margin: 0 0 0.5rem 1rem;
  image-rendering: pixelated;
}

/* Yui durmiendo (pixel art de hal, 200×107 pintado a 150×80), en el hueco de abajo a la izquierda
   de sobre_mi.exe. Flota a la izquierda: las frases del yuri y de Nino (a la derecha) quedan a su
   lado. Al ser un GIF reducido, pixelated lo mantiene nítido. */
.yui {
  float: left;
  margin: 1.5rem 1rem 0.5rem 0;
  image-rendering: pixelated;
}

/* Yui tocando la guitarra (pixel art de hal, 200×198 pintado a 64×63), sentada en la esquina de
   abajo a la derecha del Winamp, colgando un poco por fuera del borde:

     │ ┌─────── vídeo ────────┐ │
     │ └──────────────────────┘ │   ← el vídeo, sin tapar (las normas de YouTube lo prohíben)
     │ ══════▮══════════     🎸 │   ← Yui encima del final de la barra de progreso...
     │ [⏮][▶][⏸][⏹][⏭] SHUF 🔇 🎸│   ← ...y de la esquina, por fuera del borde
     └──────────────────────────┘🎸

   - position: absolute respecto al Winamp (que lleva position: relative), anclada abajo a la derecha.
   - bottom/right negativos: asoma por fuera de la esquina.
   - pointer-events: none → los clics la atraviesan (no estorba a los botones de debajo).
   - .winamp-progreso y .winamp-interruptores le dejan sitio a la derecha. */
.winamp {
  position: relative;
}

.yui-guitarra {
  position: absolute;
  right: -14px;
  bottom: -16px;
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
}

.winamp .winamp-progreso {
  margin-right: 52px;
}

.winamp .winamp-interruptores {
  margin-left: 6px;  /* SHUF y 🔇 justo detrás de los botones, no pegados a la derecha (ahí está Yui) */
}

/* Tarta de fresa (Picmix), justo detrás de Yui durmiendo (también flota a la izquierda) */
.tarta {
  float: left;
  margin: 3rem 1rem 0 -1.2rem;  /* margen izquierdo negativo: pegadita a Yui */
}

/* Gatito con trébol (Picmix), de mascota a la derecha de contacto.exe */
.gatito {
  float: right;
  margin: 0 0 0.3rem 0.5rem;
}

/* Frases importantes (yuri, Nino): más grandes, con la letra de los títulos */
.destacado {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rosa-fuerte);
  text-align: right;  /* alineado a la derecha */
  clear: right;       /* por debajo de Nino (que flota a la derecha): todas llegan al mismo borde */
}

/* Corazón de Nino: relleno (♥, no ♡) y moradito */
.corazon-nino {
  color: var(--morado);
}

/* --- "SEKAI Editorial" en sus colores corporativos, con las letras saltando en ola ---
   - Color de su logo: rojo granate (#af2b2b), liso. (Probado con un borde dorado como el sol
     de la "O", #ffd86f, pero a este tamaño se mezclaba con el rojo y parecía naranja.)
   - Cada letra es un <span> con --i = su posición. display: inline-block → se puede mover
     (a un trozo de texto normal no se le aplica transform).
   - animation-delay: calc(var(--i) * 0.08s) → cada letra empieza 0.08s después que la
     anterior: así el salto recorre la palabra como una ola.

       S E K A I   E d i t o r i a l
       ↑ . . . .   . . . . . . . . .   (t = 0)
       . ↑ . . .   . . . . . . . . .   (t = 0.08s) ... */
.sekai {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;     /* Anton ya es gruesa de por sí */
  font-size: 1.1em;
  letter-spacing: 0.02em;
  color: #af2b2b;
  white-space: nowrap;  /* que no se parta entre "SEKAI" y "EDITORIAL" */
}

/* Aplastado: el grupo de letras, al 85% de alto (scaleY) sin cambiar el ancho.
   - inline-block: transform no se aplica a texto "en línea" normal.
   - transform-origin: abajo → encoge hacia la línea del texto, no hacia el centro. */
.sekai > span[aria-hidden] {
  display: inline-block;
  transform: scaleY(0.85);
  transform-origin: 50% 85%;
}

/* La "O" del logo: un aro rojo con una luna creciente amarilla dentro.
   Es una cajita ovalada (border-radius: 50%) con borde rojo grueso y, dentro, dos capas de fondo
   (la primera de la lista va encima):

      ╭───╮     1. círculo del color del fondo de la ventana, desplazado a la derecha (at 62%)
     │ (● │  →     tapa casi todo el amarillo...
      ╰───╯     2. ...círculo amarillo centrado: solo asoma su borde izquierdo = luna creciente

   - Mide en "em" (relativo al tamaño de la letra): si cambia el tamaño del texto, la O lo sigue.
   - vertical-align: baseline + height ≈ altura de las mayúsculas de Anton → asienta como una letra más. */
.sekai-o {
  width: 0.7em;         /* casi tan ancha como alta tras el aplastado (0.85em × 0.85) → redondita */
  height: 0.85em;       /* = altura de las mayúsculas de Anton */
  box-sizing: border-box;
  margin: 0 0.02em;
  border: 0.11em solid #af2b2b;
  border-radius: 50%;
  vertical-align: baseline;
  background:
    radial-gradient(closest-side at 66% 50%, #f7f0ff 0 70%, transparent 74%),
    radial-gradient(closest-side, #ffd86f 0 96%, transparent 100%);
}

.sekai span[style] {
  display: inline-block;
  animation: letra-salta 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes letra-salta {
  0%, 40%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sekai span[style] {
    animation: none;
  }
}

/* Texto solo para lectores de pantalla: existe en la página pero no se ve
   (la receta estándar: caja de 1px, recortada y fuera del flujo). */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Susurro: texto casi escondido, pequeño y de un rosa muy pálido que casi se funde con el fondo.
   - Vuelve a la letra de puntitos normal (sin negrita, sin sombra) para que no llame la atención. */
.susurro {
  font-family: var(--fuente-texto);
  font-weight: 400;
  font-size: 0.7rem;
  color: #f2b8d6;
}

/* Lirio blanco de pixel art (static/imagenes/lirio_blanco.png), junto a "yuri".
   - Sin el fondo blanco y recortado a lo que ocupa el dibujo (327×457; original en
     _recursos/imagenes/lirio_blanco_original.png) y pintado a 34×48.
   - El tamaño se cambia en inicio.html (width y height del <img>).
   - vertical-align: middle → a media altura de la línea de texto.
   - image-rendering: pixelated → al reducirlo, píxeles nítidos en vez de borrosos. */
.lirio {
  vertical-align: middle;
  image-rendering: pixelated;
}

/* --- Cuadrícula de obras (templates/obras_cuadricula.html) ---
   - repeat(auto-fill, minmax(120px, 1fr)): tantas columnas como quepan, cada una de 120px como
     mínimo; el sitio que sobra se reparte entre ellas. Así se adapta sola al ancho (móvil incluido).
   - Es una <ul>: sin viñetas ni sangría. */
.obras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1.2rem 1rem;
  list-style: none;
  padding: 0;
}

/* .obra: la tarjeta (un <a> si tiene enlace, un <div> si no) */
.obra {
  display: block;
  color: var(--tinta);
  text-decoration: none;
}

/* Portada: proporción de un tomo (2 de ancho × 3 de alto) aunque la imagen venga de otro tamaño.
   object-fit: cover → la imagen llena el hueco recortando lo que sobre, sin deformarse. */
.portada {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--rosa), 3px 3px 0 var(--morado);
  transition: transform 0.15s;
}

/* Al pasar el ratón, la portada da un saltito */
.obras a:hover .portada {
  transform: translateY(-4px);
}

/* Sin portada todavía: recuadro de rayas rosas con el título en medio */
.portada--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  box-sizing: border-box;  /* el padding cuenta dentro del ancho: no se sale de la columna */
  text-align: center;
  font-size: 0.75rem;
  color: var(--rosa-fuerte);
  background: repeating-linear-gradient(45deg, var(--rosa-claro) 0 8px, #fff 8px 16px);
}

.obra-titulo {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* Nominación a un premio: una línea pequeñita en rosa intenso bajo el título
     K-ON!, vol. 1
     ♛ nominado a Mejor Seinen · Manga BCN 2026   ← .nominacion */
.nominacion {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.65rem;
  line-height: 1.3;
  color: var(--rosa-fuerte);
}

/* En los tomos que aún no han salido, escondida: el navegador quita .obra--proximamente
   el día que se publican (efectos.js), y entonces aparece sola */
.obra--proximamente .nominacion {
  display: none;
}

.obras a:hover .obra-titulo {
  color: var(--morado-fuerte);
  text-decoration: underline;
}

/* --- Casilla "esconder los que aún no han salido" (encima de los mangas) ---
   Cómo funciona, sin JavaScript:
   - :has() pregunta "¿contiene...?". body:has(#ocultar-proximamente:checked) = "la página
     contiene la casilla marcada". Si es así, se ocultan todos los .obra--proximamente
     (los <li> de los libros con publicado False), estén en mangas o en novelas.
   - Al desmarcarla, la condición deja de cumplirse y vuelven a aparecer.

     ┌──────────────────────────────────────────┐
     │ [♥] ✧ esconder los que aún no han salido ✧ │   ← recuadro fino, cuadriculado
     └──────────────────────────────────────────┘                                          */
body:has(#ocultar-proximamente:checked) .obra--proximamente {
  display: none;
}

/* Recuadro fino de esquinas rectas, borde rosa intenso y fondo de papel cuadriculado:
   - Cuadrícula: dos degradados de 1px (líneas verticales y horizontales) repetidos cada 8px. */
.ocultar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.7rem 0.25rem 0.4rem;
  font-size: 0.85rem;
  color: var(--rosa-fuerte);
  background-color: #fff;
  background-image:
    linear-gradient(90deg, var(--rosa-claro) 1px, transparent 1px),
    linear-gradient(180deg, var(--rosa-claro) 1px, transparent 1px);
  background-size: 8px 8px;
  border: 1px solid var(--rosa-fuerte);
}

.ocultar:hover {
  border-color: var(--morado-fuerte);
}

/* La casilla en sí: la del navegador, borrada (appearance: none) y dibujada de nuevo
   - Vacía: cuadradito blanco, de esquinas rectas, con borde rosa intenso fino.
   - Marcada (:checked): con el corazón de pixel art dentro (el mismo del cursor). */
.ocultar input,
.ocultar-casilla {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--rosa-fuerte);
}

/* El corazón: en la casilla de verdad cuando está marcada, y en la "copia" de novelas
   (.ocultar-casilla) cuando la página contiene la de verdad marcada (:has, como arriba). */
.ocultar input:checked,
body:has(#ocultar-proximamente:checked) .ocultar-casilla {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23e0459b' d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3Cpath fill='%23fff' d='M1 1h1v1H1z'/%3E%3C/svg%3E") no-repeat center / 11px 9px;
}

/* Con el teclado (Tab), que se vea qué está seleccionado */
.ocultar input:focus-visible {
  outline: 2px solid var(--morado-fuerte);
  outline-offset: 2px;
}

/* Etiqueta "próximamente": pastillita morada */
/* Siempre está en el HTML, pero solo se ve en los libros que aún no han salido (.obra--proximamente) */
.proximamente {
  display: none;
  margin-top: 0.3rem;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  color: #fff;
  background: var(--morado);
  border-radius: 999px;
}

.obra--proximamente .proximamente {
  display: inline-block;
}


/* Lista de idiomas: sin viñetas (la bandera ya hace de viñeta) */
.idiomas {
  list-style: none;
  padding-left: 0.5rem;
}

/* --- Cartel parpadeante del bingo (arriba del inicio, templates/inicio.html) ---
   Como los carteles "NEW!" de las webs de los 2000: dos colores chillones que se cambian de golpe.
   - Animación cartel-parpadea: cada 1 s, medio segundo rosa chicle con letras amarillas y medio
     amarillo con letras rosas. steps(1): sin transición, de golpe (si no, se fundiría y no parpadearía).
   - .cartel-bingo-new: el "★ NEW! ★" de los lados va en un tercer color (blanco sobre el rosa,
     morado sobre el amarillo), para que quede aún más dosmilero y se siga leyendo.
   - Con "reducir movimiento": quieto, en rosa con letras amarillas. */
.cartel-bingo {
  display: block;
  margin: 0 auto 1rem;
  padding: 0.5rem 1rem;
  font-family: var(--fuente-titulo);
  font-size: clamp(0.9rem, 2.5vw, 1.25rem);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 3px dashed #fff;
  outline: 3px solid #ff00aa;
  box-shadow: 0 0 14px #ff00aa;
  animation: cartel-parpadea 1s steps(1) infinite;
}

.cartel-bingo-new {
  display: inline-block;
  animation: cartel-parpadea-texto 1s steps(1) infinite;
}

@keyframes cartel-parpadea {
  0% {
    color: #ffff00;
    background: #ff00aa;
  }
  50% {
    color: #ff00aa;
    background: #ffff00;
  }
}

/* Solo el color de las letras del "★ NEW! ★", a la vez que el fondo del cartel */
@keyframes cartel-parpadea-texto {
  0% {
    color: #fff;
  }
  50% {
    color: #7c00ff;
  }
}

.cartel-bingo:hover,
.cartel-bingo:focus-visible {
  text-decoration: underline wavy;
}

@media (prefers-reduced-motion: reduce) {
  .cartel-bingo,
  .cartel-bingo-new {
    animation: none;
    color: #ffff00;
    background: #ff00aa;
  }

  .cartel-bingo-new {
    color: #fff;
    background: none;
  }
}

/* --- Cabecera: nombre + qué hago --- */
.cabecera {
  margin: 1rem 0 0;
}

/* El nombre, pequeñito encima; lo grande es el subtítulo (qué hago):

     silvia talavera                                  ← h1, 1rem
     ✦ Traductora japonés → español · manga y n.l. ✦  ← .subtitulo, 1.5rem, entre estrellitas */
.cabecera h1 {
  margin: 0;
  font-size: 1rem;
}

/* Estrellitas de pixel art a los lados del subtítulo, que parpadean (como en el tema alt del BCBHub)
   - ::before y ::after: dos "cajas extra" que el CSS pone antes y después del texto del subtítulo.
   - Llevan su propio fondo (el dibujo): no les afecta el truco de la purpurina del subtítulo.
   - Cada una es un dibujito SVG escrito aquí mismo: 7×7 "píxeles" (viewBox 0 0 7 7), pintado a 21×21 px:

         . . . ■ . . .      ■ = color (rosa la izquierda, morada la derecha)
         . . . ■ . . .      □ = píxel blanco del centro (el brillo)
         . . ■ ■ ■ . .
         ■ ■ ■ □ ■ ■ ■      path: barra vertical (M3 0h1v7H3z) + horizontal (M0 3h7v1H0z)
         . . ■ ■ ■ . .            + cuadrado 3×3 del centro (M2 2h3v3H2z)
         . . . ■ . . .
         . . . ■ . . .

   - %23 = "#" y %3C %3E = < > (dentro de una URL se escriben así).
   - La de la derecha va con retraso (animation-delay) para que no parpadeen a la vez. */
.subtitulo::before,
.subtitulo::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0 0.3em;
  vertical-align: middle;
  /* Ahora: los destellos de pixel art de Picmix (un GIF ya animado, 32×32).
     Antes: la estrellita SVG dibujada arriba, con la animación estrella-parpadea. */
  background: url('../imagenes/destellos_picmix_47714.gif') no-repeat center / contain;
  image-rendering: pixelated;
}

.subtitulo::before {
  margin-left: 0;  /* la de la izquierda, pegada al borde como el resto del contenido */
}

.subtitulo::after {
  transform: scaleX(-1);  /* la de la derecha, reflejada: no son idénticas */
}

/* Subtítulo con purpurina: un degradado rosa-morado que se mueve de lado DENTRO de las letras
   - background-clip: text + color transparente → el fondo (el degradado) solo se ve en las letras.
   - background-size: 300% → el degradado es 3 veces más ancho que el texto: hay sitio para moverlo.
   - La animación desplaza el degradado (background-position) de 0% a 300% en bucle.
   - Sin blanco (en el BCBHub sí lo había): en letra pequeña sobre fondo claro desaparecería. */
.subtitulo {
  margin: 0.2rem 0 0;
  font-size: 1.5rem;
  background: linear-gradient(90deg, var(--rosa-fuerte), var(--morado-fuerte), #c13f9a, var(--rosa-fuerte), var(--morado-fuerte));
  background-size: 300% 100%;
  -webkit-background-clip: text;  /* Safari aún necesita el prefijo */
  background-clip: text;
  color: transparent;
  animation: purpurina 4s linear infinite;
}

@keyframes purpurina {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .subtitulo {
    animation: none;
  }
}


/* --- Separadores ★·.·´¯`·.·★ (entre la cabecera y las ventanas, y antes del pie) ---
   - Es un <div> vacío: el dibujo lo pone ::before con content (texto escrito aquí).
   - El adorno se repite muchas veces y lo que no cabe se corta (overflow: hidden + nowrap):
     así llena el ancho sea cual sea, en el móvil o en una pantalla grande.
   - Es de adorno: aria-hidden en el HTML (si no, el lector de pantalla leería "estrella, punto..."). */
.separador {
  overflow: hidden;
  white-space: nowrap;
  margin: 1rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--morado);
}

.separador::before {
  content: '★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★·.·´¯`·.·★';
}


/* --- Dos columnas: principal (sobre mí + libros) + lateral (idiomas, otros, contacto) ---
   - display: grid → la caja se divide en columnas.
   - grid-template-columns: 1fr 18rem → la lateral mide 18rem fijos; la principal (1fr = "una
     fracción del sitio que sobra") se queda con todo lo demás.
   - align-items: start → cada ventana mide lo que su contenido (si no, se estirarían las dos
     hasta la altura de la más alta).
   - En pantallas estrechas (móvil, < 700px): una sola columna, una ventana debajo de otra. */
.columnas {
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: 0 2rem;
  align-items: start;
}

@media (max-width: 700px) {
  .columnas {
    grid-template-columns: 1fr;
  }
}


/* --- Reproductor tipo Winamp 2, con música de YouTube (lo maneja static/js/reproductor.js) ---
   - Imita la piel clásica de Winamp 2.x (cuerpo metálico, barra con rayitas, pantalla LCD negra,
     espectro, barra de progreso y botones en relieve), pero en rosa. Colores en las variables --wa-*.
   - Debajo de la pantalla, la "ventana de vídeo" con el reproductor de YouTube.
   - .es-mini (botón "_"): solo queda la barra. .esta-sonando: el espectro se mueve.
   (Sacado del Winamp de mentira del tema alt del BCBHub.) */
.winamp {
  margin-top: 2rem;
  font-family: var(--fuente-texto);
  font-size: 11px;
  /* Colores del reproductor, todos aquí: para cambiarlos, solo estas líneas */
  --wa-cuerpo-arriba: #f6cbe4;  /* cuerpo: "metal" rosa, de arriba... */
  --wa-cuerpo-abajo: #c58ab4;   /* ...a abajo */
  --wa-claro: #fff0f8;          /* borde claro del relieve */
  --wa-oscuro: #6b2c5f;         /* borde oscuro del relieve */
  --wa-barra: #3b1a35;          /* barra de título y surco del progreso: berenjena */
  --wa-acento: #ff8fc8;         /* rayitas, "WINAMP" */
  --wa-lcd: #ff8fc8;            /* letras de la pantalla */
  --wa-lcd-apagado: #b0507f;    /* letras apagadas de la pantalla (kbps, kHz) */
  --wa-lcd-brillo: #ff4fa3;     /* brillito de las letras */
  --wa-boton-arriba: #fff3fa;   /* botones, de arriba... */
  --wa-boton-abajo: #e3a3c8;    /* ...a abajo */
  color: var(--wa-lcd);
  background: linear-gradient(180deg, var(--wa-cuerpo-arriba) 0%, var(--wa-cuerpo-abajo) 100%);
  border: 1px solid;
  border-color: var(--wa-claro) var(--wa-oscuro) var(--wa-oscuro) var(--wa-claro);  /* relieve */
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

/* Barra: "WINAMP" entre dos tiras de rayitas (::before y ::after, que se estiran con flex: 1)
   - Las rayitas: repeating-linear-gradient de arriba abajo, 1px de color + 1px transparente. */
.winamp-barra {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 14px;
  padding: 0 3px;
  background: var(--wa-barra);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--wa-acento);
}

.winamp-barra::before,
.winamp-barra::after {
  content: '';
  flex: 1;
  height: 6px;
  background: repeating-linear-gradient(180deg, var(--wa-acento) 0 1px, transparent 1px 2px);
}

.winamp-cuerpo {
  padding: 5px;
}

.winamp.es-mini .winamp-cuerpo {
  display: none;
}

/* Pantalla LCD: negra, hundida (relieve al revés), en dos columnas */
.winamp-pantalla {
  display: flex;
  gap: 6px;
  padding: 4px 5px;
  background: #000;
  border: 1px solid;
  border-color: var(--wa-oscuro) var(--wa-claro) var(--wa-claro) var(--wa-oscuro);
}

.winamp-izquierda {
  flex: none;
  width: 76px;
}

.winamp-derecha {
  flex: 1;
  min-width: 0;  /* sin esto, el título largo ensancharía la columna en vez de cortarse */
}

.winamp-tiempo {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 0 0 3px var(--wa-lcd-brillo);
}

.winamp-estado {
  margin-right: 3px;
  font-size: 9px;
  vertical-align: top;
}

/* kbps / kHz / stereo: como en Winamp, cifras en cajita y "stereo" encendido */
.winamp-info {
  margin-top: 4px;
  font-size: 9px;
  color: var(--wa-lcd-apagado);
}

.winamp-info b {
  padding: 0 2px;
  font-weight: 400;
  color: var(--wa-lcd);
  border: 1px solid var(--wa-lcd-apagado);
}

.winamp-info i {
  float: right;
  font-style: normal;
  color: var(--wa-lcd);
}

/* Título que corre: el <span> empieza desplazado un ancho entero a la derecha (padding-left: 100%
   del hueco) y la animación lo lleva hasta salir por la izquierda (-100% de su propio ancho). */
.winamp-titulo {
  overflow: hidden;
  white-space: nowrap;
}

.winamp-titulo span {
  display: inline-block;
  padding-left: 100%;
  animation: winamp-titulo-corre 12s linear infinite;
}

@keyframes winamp-titulo-corre {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Espectro (debajo del tiempo): 14 barritas que suben y bajan, cada una a su ritmo
   - align-items: flex-end → crecen desde abajo.
   - Degradado de abajo arriba (morado → rosa → blanco), con el alto TOTAL (16px) y anclado abajo:
     cada barrita enseña solo su trozo (las bajitas, solo morado).
   - Sin sonar (sin .esta-sonando): animación en pausa y todas bajitas. */
.winamp-espectro {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 16px;
  margin-top: 4px;
}

.winamp-espectro span {
  flex: 1;
  height: 30%;
  background: linear-gradient(0deg, #8a5cf0 0%, #b68cff 35%, #ff8fc8 70%, #fff 100%) bottom / 100% 16px no-repeat;
  animation: winamp-espectro 0.9s ease-in-out infinite alternate;
}

.winamp-espectro span:nth-child(3n)   { animation-duration: 0.6s; }
.winamp-espectro span:nth-child(3n+1) { animation-duration: 1.1s; animation-delay: -0.3s; }
.winamp-espectro span:nth-child(4n)   { animation-delay: -0.5s; }
.winamp-espectro span:nth-child(5n)   { animation-duration: 0.75s; }

@keyframes winamp-espectro {
  from { height: 15%; }
  to   { height: 100%; }
}

.winamp:not(.esta-sonando) .winamp-espectro span {
  animation-play-state: paused;
  height: 10%;
}

@media (prefers-reduced-motion: reduce) {
  .winamp-espectro span,
  .winamp-titulo span {
    animation: none;
  }
}

/* Ventana de vídeo: negra y hundida como la pantalla. Mide 200px de alto, el mínimo que pide
   YouTube para sus reproductores; el vídeo (16:9) queda centrado con bandas negras. */
.winamp-ventana-video {
  height: 200px;
  margin-top: 5px;
  background: #000;
  border: 1px solid;
  border-color: var(--wa-oscuro) var(--wa-claro) var(--wa-claro) var(--wa-oscuro);
}

.winamp-ventana-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Barra de progreso: un surco oscuro y un "taco" que avanza (left lo pone el JS, en %) */
.winamp-progreso {
  position: relative;
  height: 8px;
  margin: 5px 9px;  /* margen a los lados: el taco (18px, centrado) no se sale en el 0% ni en el 100% */
  background: var(--wa-barra);
  border: 1px solid;
  border-color: var(--wa-oscuro) var(--wa-claro) var(--wa-claro) var(--wa-oscuro);
}

.winamp-progreso span {
  position: absolute;
  top: -1px;
  left: 0;
  width: 18px;
  height: 8px;
  margin-left: -9px;  /* centrado en su posición */
  background: linear-gradient(180deg, var(--wa-boton-arriba), var(--wa-boton-abajo));
  border: 1px solid;
  border-color: #fff var(--wa-oscuro) var(--wa-oscuro) #fff;
}

/* Botones: "metálicos" en relieve, como los de Winamp (en rosa claro); al pulsarlos, hundidos (:active) */
.winamp-botones {
  display: flex;
  align-items: center;
  gap: 1px;
}

.winamp button {
  width: 23px;
  height: 18px;
  padding: 0;
  font-family: Arial, sans-serif;  /* los símbolos ⏮ ▶ ⏸..., más claros que con la letra de puntitos */
  font-size: 9px;
  line-height: 1;
  color: var(--wa-barra);
  background: linear-gradient(180deg, var(--wa-boton-arriba), var(--wa-boton-abajo));
  border: 1px solid;
  border-color: #fff var(--wa-oscuro) var(--wa-oscuro) #fff;
  border-radius: 0;
}

.winamp button:active {
  border-color: var(--wa-oscuro) #fff #fff var(--wa-oscuro);
}

.winamp-barra button {
  order: 1;  /* al final de la barra, detrás de las rayitas de la derecha (::after va con order 0) */
  width: 11px;
  height: 10px;
  font-size: 8px;
  line-height: 6px;
}

/* SHUF y sonido (🔇/🔊), a la derecha de los botones
   - Pulsados (aria-pressed="true", lo pone el JS): hundidos y "encendidos" en rosa, como un LED.
     aria-pressed también le dice al lector de pantalla si están activados. */
.winamp-interruptores {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

.winamp .winamp-interruptor {
  width: auto;
  height: 14px;
  padding: 0 4px;
  font-family: var(--fuente-texto);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.winamp .winamp-interruptor[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #ff6fb5, #e0459b);
  border-color: var(--wa-oscuro) #fff #fff var(--wa-oscuro);
  text-shadow: 0 0 3px #fff;
  box-shadow: 0 0 5px var(--wa-lcd-brillo);
}

/* 🔇 parpadeando: al cambiar de página sonaba con sonido, pero el navegador no ha dejado seguir
   así; se ha quedado en silencio y avisa de que hay que pulsarlo (lo pone y lo quita el JS) */
.winamp .winamp-avisar {
  animation: winamp-avisar 0.6s steps(1) infinite;
}

@keyframes winamp-avisar {
  50% {
    background: var(--wa-lcd-brillo);
    box-shadow: 0 0 6px var(--wa-lcd-brillo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .winamp .winamp-avisar {
    animation: none;
    background: var(--wa-lcd-brillo);
  }
}


/* --- Nieve cayendo (los copos los crea static/js/nieve.js) ---
   - .nieve: capa fija del tamaño de la ventana; pointer-events: none → los clics la atraviesan.
     overflow: hidden → los copos que bajan de la ventana no crean barra de scroll.
   - z-index 40: por encima del contenido, por debajo de la marquesina (45) y de Hachiware (46).
   - .copo: empieza por encima de la ventana (-5vh) y baja hasta por debajo (105vh).
   - El <span> de dentro se balancea a los lados (alternate: ida y vuelta).
   - Blancos con un brillo rosa alrededor (si no, sobre el fondo clarito ni se verían); algunos rosas. */
.nieve {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;  /* sutil: medio transparente */
}

.copo {
  position: absolute;
  top: 0;
  color: #fff;
  text-shadow: 0 0 2px var(--rosa), 0 0 4px var(--rosa);
  animation: copo-cae linear infinite;
}

.copo--rosa {
  color: var(--rosa);
  text-shadow: 0 0 2px #fff;
}

.copo span {
  display: inline-block;
  animation: copo-vaiven ease-in-out infinite alternate;
}

@keyframes copo-cae {
  from { transform: translateY(-5vh); }
  to   { transform: translateY(105vh); }
}

@keyframes copo-vaiven {
  from { transform: translateX(-15px); }
  to   { transform: translateX(15px); }
}


/* --- Hachiware, Chiikawa y Usagi paseando por el borde de abajo de la ventana ---
   (los crea y los mueve static/js/shimeji.js)
   - Una cajita de 64×64 que enseña un trozo de su hoja de dibujos (10×7 dibujos de 128 px):
     background-size a la mitad (640×448) → cada dibujo mide 64 px; el JS mueve background-position.
   - .shimeji--NOMBRE: la hoja de cada uno (lo demás, igual para todos).
   - position: fixed → se mueven por la ventana, no por la página (no se van al hacer scroll).
   - z-index 46: por delante de la marquesina (45) cuando pasa por donde andan.
   - touch-action: none → en el móvil, arrastrarlos con el dedo no hace scroll de la página. */
.shimeji {
  position: fixed;
  z-index: 46;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-size: 640px 448px;
  touch-action: none;
  cursor: grab;
}

.shimeji--hachiware { background-image: url('../imagenes/hachiware_hoja.webp'); }
.shimeji--chiikawa  { background-image: url('../imagenes/chiikawa_hoja.webp'); }
.shimeji--usagi     { background-image: url('../imagenes/usagi_hoja.webp'); }

.shimeji.esta-cogida {
  cursor: grabbing;
}


/* --- Pie dosmilero: contador, botones 88×31, "Best viewed...", webring y guestbook ---
   (como el de /stats/ del BCBHub; todo de adorno) */
.pie {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.85rem;
}

.pie p {
  margin: 0.4rem 0;
}

/* Contador "cuentakilómetros": cada cifra en su cajita negra, con la cifra rosa
   - Fondo de cada cifra: negro con una raya a la mitad (degradado que cambia de golpe en el 50%),
     como las cifras que giraban en los contadores de entonces.
   - Borde en relieve: claro arriba-izquierda, oscuro abajo-derecha. */
.contador {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #333;
  border: 2px solid;
  border-color: #777 #111 #111 #777;
}

.contador span {
  width: 1.1em;
  padding: 0.1em 0;
  font-family: monospace;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--rosa);
  background: linear-gradient(180deg, #000 0%, #2a2a2a 50%, #000 50%, #1a1a1a 100%);
}

/* Destellos que estallan (Picmix, 52×46 pintados a 26×23, nítidos) a los lados de "You are visitor nº" */
.estallido {
  width: 26px;
  height: 23px;
  vertical-align: middle;
  image-rendering: pixelated;
}

.contador-nota {
  font-size: 0.7rem;
  color: var(--rosa-fuerte);
}

/* Botones 88×31: el tamaño exacto de los "badges" de entonces
   - inline-flex + column: dos líneas de texto centradas en vertical y en horizontal.
   - box-sizing: border-box → los 88×31 incluyen el borde (si no, medirían 92×35).
   - Cada uno con sus colores (modificador --nombre). No enlazan a nada. */
.botones-88 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 1rem 0 0.6rem;
}

.boton-88 {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 88px;
  height: 31px;
  overflow: hidden;
  border: 2px solid;
  border-color: rgba(255, 255, 255, 0.7) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.7);
  font-family: var(--fuente-texto);
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.boton-88 b {
  font-size: 12px;
}

.boton-88--django  { background: #0c4b33; color: #fff; }
.boton-88--html    { background: #fff; color: #0055a5; }
.boton-88--notepad { background: #ffffe0; color: #333; }

/* Nino: su cara en pixel art (27×27, 1 píxel del dibujo = 1 píxel de pantalla) a la izquierda;
   "二乃" (Nino en kanji) y "BEST GIRL" a la derecha. */
.boton-88--nino      { flex-direction: row; gap: 5px; justify-content: flex-start; background: #e9dcff; color: var(--morado-fuerte); }
.boton-88--nino img  { image-rendering: pixelated; }
.boton-88--nino span { display: flex; flex-direction: column; align-items: center; font-size: 9px; white-space: nowrap; }
.boton-88--nino b    { font-family: var(--fuente-titulo); font-size: 13px; color: var(--rosa-fuerte); }

/* Internet Explorer: el logo (SVG, en el HTML) a la izquierda y "best viewed with IE 6" a la derecha */
.boton-88--ie        { flex-direction: row; gap: 3px; background: linear-gradient(180deg, #e8f1ff, #9cc3f5); color: #003a8c; font-size: 9px; }
.boton-88--ie svg    { flex: none; }
.boton-88--ie b      { font-size: 10px; }


/* SOS団: el logo (54 px de alto pintado a 27: nítido en pantallas de alta resolución) y
   "SOS団 / Brigade", sobre el azul del uniforme de Kitakō */
.boton-88--sos       { flex-direction: row; gap: 4px; background: linear-gradient(180deg, #3a6fd8, #1d3f99); color: #fff; }
.boton-88--sos img   { height: 27px; width: auto; }
.boton-88--sos span  { display: flex; flex-direction: column; align-items: center; }
.boton-88--sos b     { font-family: var(--fuente-titulo); font-size: 14px; color: #ffe14d; text-shadow: 1px 1px 0 #b3001b; }

.mejor-con {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Enlaces del webring y del guestbook: morados con subrayado ondulado, como en los 2000.
   Los de verdad (<a>: "next", "Sign my guestbook!") y los de adorno (<span>, no van a ningún
   sitio) se ven igual. Con el cursor de corazón. */
.enlace-falso {
  color: var(--morado-fuerte);
  text-decoration: underline wavy var(--rosa);
  text-underline-offset: 3px;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='18' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23e0459b' d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3Cpath fill='%23fff' d='M1 1h1v1H1z'/%3E%3C/svg%3E") 10 9, pointer;
}


/* --- Marquesina de créditos: cartelito fijo abajo que cruza la pantalla, de derecha a izquierda ---
   (sacada del tema alt del BCBHub; allí era html::after, aquí HTML de verdad para poder llevar enlaces)
   - .marquesina: la "ventanilla" fija abajo, de lado a lado. overflow: hidden → lo que se sale
     por los lados no se ve (ni crea barra de scroll).
   - .marquesina-texto: el texto en una sola línea (nowrap), que la animación mueve:
     empieza fuera por la derecha (100vw = ancho de la ventana) y acaba fuera por la izquierda
     (-100% = su propio ancho).
   - Al pasar el ratón se para (animation-play-state: paused): así se pueden pinchar los enlaces. */
.marquesina {
  position: fixed;
  bottom: 0.8rem;
  left: 0;
  right: 0;
  z-index: 45;
  overflow: hidden;
}

.marquesina-texto {
  display: inline-block;
  margin: 0;
  padding: 0.2rem 1rem;
  white-space: nowrap;
  font-family: var(--fuente-titulo);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--rosa), var(--morado));
  /* Borde "en relieve" de Windows 98: claro arriba-izquierda, oscuro abajo-derecha */
  border: 2px solid;
  border-color: #fff0f7 #a0306f #a0306f #fff0f7;
  animation: marquesina 30s linear infinite;
}

.marquesina:hover .marquesina-texto {
  animation-play-state: paused;
}

.marquesina a {
  color: #fff;
}

@keyframes marquesina {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

/* Quien pide al sistema "menos movimiento": la marquesina quieta, con el texto en varias líneas.
   - Ya no va fija abajo (position: static): quieta ocupa varias líneas y, fija, taparía un buen
     trozo de pantalla todo el rato (sobre todo en el móvil). Va al final de la página, como un pie. */
@media (prefers-reduced-motion: reduce) {
  .marquesina {
    position: static;
    margin-top: 1rem;
  }

  .marquesina-texto {
    animation: none;
    white-space: normal;
  }
}


/* --- Contenido centrado, con aire a los lados en el móvil --- */
main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;  /* abajo, hueco para que la marquesina (fija) no tape lo último */
}


/* --- Bingo del Manga Barcelona (templates/bingo.html; lo monta static/js/bingo.js) ---

     plantilla: (•) original ( ) alternativa     ← .bingo-selector
     ┌───────────────────┐
     │ <img> plantilla    │   ← .bingo-tablero (position: relative)
     │  [b][b][b][b][b]   │   ← .bingo-casilla: botones transparentes encima,
     │  ...               │      colocados en % por bingo.js (position: absolute)
     └───────────────────┘                                                     */

/* Selector de plantilla: sin el marco gris de los <fieldset>, todo en una línea */
.bingo-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0 0 1rem;
  padding: 0;
  border: none;
}

.bingo-selector legend {
  float: left;  /* truco: sin esto, la leyenda de un fieldset no se pone en línea con lo demás */
  margin-right: 0.3rem;
  color: var(--rosa-fuerte);
}

.bingo-selector input {
  accent-color: var(--rosa-fuerte);  /* el puntito del radio, en rosa */
}

/* El tablero: la imagen ocupa todo el ancho que pueda (hasta un máximo) y las casillas se
   colocan encima respecto a esta caja (position: relative = "la referencia de mis hijos").
   - La original es alta (1150×1750): más estrecha, para que quepa entera en pantalla.
   - La alternativa es apaisada (2300×1578): puede ser más ancha. */
.bingo-tablero {
  position: relative;
  container-type: inline-size;  /* "contenedor": así sus hijos pueden medir en cqw (ver .bingo-lista) */
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 0 0 2px #fff, 4px 4px 0 var(--morado);
}

.bingo-tablero[data-plantilla="alternativa"] {
  max-width: 900px;
}

/* La imagen de la plantilla. height: auto → la altura sale sola del ancho y de la proporción.
   ">" = solo la hija directa del tablero: sin él, esta regla también pillaría las portadas de
   dentro de las casillas (y su height: auto las haría salirse de la casilla). */
.bingo-tablero > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Títulos en la lista 1-25 de la alternativa (posición, tamaño y color los pone bingo.js).
   - cqw: 1cqw = 1% del ancho del tablero → la letra encoge y crece con él, como la imagen.
   - translateY(-50%): "top" es el centro de la línea, no su borde de arriba.
   - Si el título no cabe: se corta con "…" (white-space + overflow + text-overflow).
   - Letra de la plantilla: una sans-serif gruesa (Verdana en negrita se le parece). */
.bingo-lista {
  position: absolute;
  overflow: hidden;
  font-family: Verdana, Tahoma, sans-serif;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  pointer-events: none;  /* que no estorbe a los clics */
}

/* Cada casilla: un botón transparente justo encima del cuadrado de la plantilla */
.bingo-casilla {
  position: absolute;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 2px;
}

/* Al pasar el ratón o con el teclado (Tab): un velo rosa para ver dónde se va a pinchar */
.bingo-casilla:hover,
.bingo-casilla:focus-visible {
  background: rgba(255, 143, 200, 0.35);
  outline: 2px dashed var(--rosa-fuerte);
  outline-offset: -2px;
}

/* La casilla elegida: borde morado de puntitos, como las ventanitas */
.bingo-casilla.es-elegida {
  outline: 3px dotted var(--morado-fuerte);
  outline-offset: 2px;
}

/* --- Arrastrar portadas entre casillas (bingo.js: "Arrastrar una portada...") ---
   - Casillas llenas: con la manita de agarrar. user-select / touch-callout: que al mantener
     pulsado no se seleccione la imagen ni salga el menú de "guardar imagen" del móvil.
   - .es-origen: la casilla de la que sale (medio transparente).
   - .es-destino: la casilla sobre la que se va a soltar (borde morado grueso).
   - .bingo-fantasma: la copia de la portada que sigue al dedo o al ratón. position: fixed →
     respecto a la pantalla; pointer-events: none → "transparente" para los clics y para
     elementFromPoint (así se encuentra la casilla de debajo). */
.bingo-casilla.esta-llena {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.bingo-casilla.es-origen {
  opacity: 0.35;
}

.bingo-casilla.es-destino {
  background: rgba(124, 58, 237, 0.3);
  outline: 4px solid var(--morado-fuerte);
  outline-offset: 0;
}

.bingo-fantasma {
  position: fixed;
  z-index: 1000;
  object-fit: cover;
  pointer-events: none;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(107, 44, 95, 0.45);
  transform: rotate(-4deg) scale(1.05);
  opacity: 0.9;
}

/* Casilla con obra: la portada entera, tan alta como la casilla y centrada.
   - object-fit: contain → cabe entera sin deformarse ni recortarse. Las portadas son 2:3 (más
     altas que anchas): en las casillas casi cuadradas de la original quedan franjas blancas a
     los lados (el blanco de la plantilla); en las de la alternativa (200×286) casi no se nota. */
.bingo-casilla-portada {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Editorial de las casillas rojas: cintita roja abajo, encima de la portada */
.bingo-casilla-editorial {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2cqw 0.4cqw;
  overflow: hidden;
  /* En cqw (% del ancho del tablero): la misma proporción que en la imagen descargada, también
     en los tableros pequeños de la galería. La alternativa es el doble de ancha: letra menor. */
  font-size: 1.45cqw;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;  /* si no cabe: "Distrito Ma…" */
  background: #e63946;
}

/* Debajo del tablero: el botón de descargar y su mensaje, centrados */
.bingo-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-top: 1.2rem;
}

/* Botón grande del bingo: como la barra de las ventanitas (rosa → morado con brillo tipo XP)
     ·  ✧ ⬇ descargar imagen ✧  ·     ← letra de títulos, blanca con sombrita dura
   - Dos fondos superpuestos: arriba, el brillo (blanco semitransparente que se corta a la mitad);
     debajo, el degradado de colores.
   - outline de puntitos POR FUERA (como las ventanas) y brillo rosa alrededor (box-shadow). */
.bingo-boton {
  padding: 0.5rem 1.4rem;
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 1px 1px 0 #a0306f;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%),
    linear-gradient(90deg, var(--rosa), var(--morado));
  border: 2px solid #fff;
  border-radius: 999px;  /* pastilla */
  outline: 2px dotted var(--rosa);
  outline-offset: 3px;
  box-shadow: 0 0 12px rgba(255, 143, 200, 0.8), 3px 3px 0 var(--morado-fuerte);
  transition: transform 0.15s, box-shadow 0.15s;
}

/* Estrellitas a los lados del texto */
.bingo-boton::before {
  content: '✧ ';
}

.bingo-boton::after {
  content: ' ✧';
}

/* Al pasar el ratón: da un saltito y brilla más */
.bingo-boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 143, 200, 1), 3px 5px 0 var(--morado-fuerte);
}

/* Al pulsar: se "hunde" (la sombra dura desaparece y baja un poco) */
.bingo-boton:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 8px rgba(255, 143, 200, 0.8);
}

.bingo-boton:focus-visible {
  outline: 2px solid var(--morado-fuerte);
}

.bingo-boton:disabled {
  opacity: 0.6;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bingo-boton,
  .bingo-boton:hover {
    transition: none;
    transform: none;
  }
}

.bingo-acciones-mensaje {
  font-size: 0.8rem;
  color: var(--rosa-fuerte);
}

/* Vacío, fuera: si no, su hueco (gap) empuja el botón de descargar a un lado y no queda
   centrado encima del de "añadir a la galería" */
.bingo-acciones-mensaje:empty {
  display: none;
}

.bingo-tablero[data-plantilla="alternativa"] .bingo-casilla-editorial {
  font-size: 1.05cqw;
}

/* Casilla de un tablero "de solo mirar" (galería, moderación): encima de su cuadrado */
.bingo-mini-casilla {
  position: absolute;
  display: block;
}

/* Casilla sin portada (bingos de redes: obra que no está en AniList): el título escrito, centrado.
   Letra en cqw (1% del ancho del tablero, como la lista de la alternativa): encoge con el tablero.
   overflow: hidden → si el título es muy largo, se corta en vez de salirse de la casilla. */
.bingo-mini-casilla--texto {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.6cqw;
  font-size: 1.9cqw;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.92);
  border: 1px dashed var(--rosa);
}

/* --- Añadir a la galería pública (un <details>: el <summary> es el botón que lo abre) ---
   - list-style: none + ::-webkit-details-marker → sin el triangulito de los <details>.
   - El formulario usa los mismos estilos de campos que el panel de las casillas. */
.bingo-compartir {
  margin-top: 1.2rem;
  text-align: center;
}

.bingo-compartir > summary {
  display: inline-block;
  list-style: none;
}

/* El botón centrado (bajo el de descargar) y la notita a su derecha. Rejilla de 3 columnas:

     │      1fr       │       auto        │      1fr       │
     │    (vacía)     │ ✧ añadir a la ✧   │ podrás ver tus │
     │                │   galería...      │ aciertos...    │

   - Las dos de los lados miden lo mismo (1fr cada una), así la del medio queda en el centro
     exacto, como si la notita no estuviera.
   - align-items: start → con el formulario abierto (crece la del medio), la notita se queda
     arriba, a la altura del botón.
   - En el móvil (≤ 700px): una sola columna, la notita centrada debajo. */
.bingo-compartir-fila {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0.5rem 1rem;
  margin-top: 1.2rem;
}

.bingo-compartir-fila .bingo-compartir {
  grid-column: 2;
  margin-top: 0;
}

/* La notita de al lado: pequeña, fina y fucsia. margin-top: centrada con el botón (que es más alto) */
.bingo-nota {
  grid-column: 3;
  margin-top: 0.45rem;
  max-width: 16rem;
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: left;
  color: #ff2fa0;
}

@media (max-width: 700px) {
  .bingo-compartir-fila {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .bingo-compartir-fila .bingo-compartir,
  .bingo-nota {
    grid-column: 1;
  }

  .bingo-nota {
    margin-top: 0;
    text-align: center;
  }
}

.bingo-compartir > summary::-webkit-details-marker {
  display: none;
}

.bingo-formulario {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 26rem;
  margin: 1rem auto 0;
  padding: 1rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed var(--rosa);
}

.bingo-formulario p {
  margin: 0;
  font-size: 0.85rem;
}

.bingo-formulario label,
.bingo-moderar-entrar label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}

/* Red + usuario en una fila (se apilan si no caben, en el móvil) */
.bingo-formulario-red {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.bingo-formulario-red label:last-child {
  flex: 1;
  min-width: 10rem;
}

.bingo-formulario input,
.bingo-formulario select,
.bingo-moderar-entrar input {
  padding: 0.3rem 0.4rem;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--rosa-fuerte);
  border-radius: 0;
}

.bingo-formulario button {
  align-self: center;
}

.bingo-formulario-mensaje {
  color: var(--rosa-fuerte);
  text-align: center;
}

.bingo-formulario-mensaje:empty {
  display: none;
}

/* La trampa para robots: fuera de la pantalla (no display: none, que algunos robots detectan) */
.bingo-trampa {
  position: absolute;
  left: -9999px;
}

/* --- Galería: tarjetas de bingos en cuadrícula ---
   - Tantas columnas como quepan, de 230px como mínimo. La alternativa (apaisada) ocupa dos.
   - En el móvil (una sola columna), "span 2" no puede: min(2, columnas) lo hace el navegador solo. */
.bingo-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.5rem;
}

/* Las tarjetas que "ver todos" esconde (bingo-galeria.js: limitar). Hace falta decirlo: si una
   regla le pone display a la tarjeta, ganaría al hidden */
.bingo-galeria > [hidden] {
  display: none;
}

.bingo-ver-todos-fila {
  margin: 1.2rem 0 0;
  text-align: center;
}

.bingo-ver-todos[hidden],
.bingo-top-ver-mas[hidden],
.bingo-ver-mas[hidden] {
  display: none;
}

/* "ver 20 más" del top: más pegadito a las tarjetas que el "ver todos" de la galería */
.bingo-ver-todos-fila:has(.bingo-top-ver-mas, .bingo-ver-mas) {
  margin-top: 0.6rem;
}

.bingo-tarjeta {
  margin: 0;
}

.bingo-tarjeta[data-plantilla="alternativa"] {
  grid-column: span 2;
}

@media (max-width: 560px) {
  .bingo-tarjeta[data-plantilla="alternativa"] {
    grid-column: auto;
  }
}

/* El tablero de una tarjeta: todo el ancho de la tarjeta (sin los máximos del editor).
   En la galería es un <button>: sin el aspecto de botón del navegador. */
.bingo-tarjeta .bingo-tablero,
.bingo-grande .bingo-tablero {
  max-width: none;
}

button.bingo-tablero {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  transition: transform 0.15s;
}

button.bingo-tablero:hover {
  transform: translateY(-3px);
}

button.bingo-tablero:focus-visible {
  outline: 3px dotted var(--morado-fuerte);
  outline-offset: 3px;
}

.bingo-tarjeta-autor {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
}

.bingo-tarjeta-autor b {
  font-weight: normal;
  color: var(--morado-fuerte);
}

/* Bingos de redes: el texto del post, en 4 líneas como mucho (line-clamp corta con "…"), y los
   enlaces (ver el post, también en Bluesky) */
.bingo-tarjeta-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
  opacity: 0.85;
}

/* El "y tuiteó:" de delante, en los bingos de la web */
.bingo-tarjeta-texto b {
  font-weight: normal;
  color: var(--rosa-fuerte);
}

.bingo-tarjeta-enlaces {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
}

.bingo-redes-explicacion,
.bingo-redes-nota {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  text-align: center;
}

.bingo-redes-nota {
  margin: 1rem 0 0;
  color: var(--rosa-fuerte);
}

.bingo-redes-mensaje:empty,
.bingo-redes-nota:empty {
  display: none;
}

/* "y de redes" en la explicación del top: resaltado en rosa (pero legible: letra oscura).
   Con "solo web" marcada, desaparece: :has() = "la ventana que contiene la casilla marcada"
   (así no hace falta JS para esto). */
.bingo-top-redes mark {
  padding: 0 0.25em;
  color: var(--tinta);
  background: #ffc2e2;
  border-radius: 3px;
}

.ventana-contenido:has(#bingo-top-solo-web:checked) .bingo-top-redes {
  display: none;
}

/* La casilla "solo web" del top */
.bingo-top-filtro {
  margin: -0.5rem 0 0.6rem;
  font-size: 0.8rem;
  text-align: center;
}

/* Los botones de demografía: en fila, con hueco entre ellos y saltando de línea si no caben
   (móvil). white-space: nowrap → el botón redondo y su nombre nunca se separan. */
.bingo-top-demografias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.9rem;
  margin-top: 0;
}

.bingo-top-demografias label {
  white-space: nowrap;
}

.bingo-galeria-mensaje:empty {
  display: none;
}

/* El bingo en grande: casi toda la pantalla (dejando 1rem a cada lado).
   .bingo-panel.bingo-grande (las dos clases) y no solo .bingo-grande: el <dialog> también es
   .bingo-panel, cuya regla (width: 42rem) va más abajo y, a igualdad, ganaría la de abajo. */
.bingo-panel.bingo-grande {
  width: min(80rem, 100% - 2rem);
}

/* Que el bingo quepa también de alto. El tablero ocupa todo el ancho de la ventana y su altura
   sale de ese ancho, así que lo que se limita es el ANCHO de la ventana:

     ancho del tablero = alto que le queda × (ancho / alto de la plantilla)

   - Alto que le queda: 100dvh (la pantalla) − 12rem (márgenes del <dialog>, barra de título,
     botón "ver ...", autor, huecos). Calculado a ojo: si un día no cabe, el <dialog> hace scroll.
   - + 2.4rem + 2px: el padding de .ventana-contenido (1.2rem por lado) y el borde de la ventana.
   - :has(...) = "la ventana que CONTIENE un tablero de esta plantilla" (cambia al pulsar el botón).
   - 100% aquí = el ancho de la pantalla (el <dialog> abierto se mide respecto a ella). */
.bingo-panel.bingo-grande:has(.bingo-tablero[data-plantilla="original"]) {
  width: min(100% - 2rem, (100dvh - 12rem) * 1150 / 1750 + 2.4rem + 2px);
}

.bingo-panel.bingo-grande:has(.bingo-tablero[data-plantilla="alternativa"]) {
  width: min(80rem, 100% - 2rem, (100dvh - 12rem) * 2300 / 1578 + 2.4rem + 2px);
}

/* width: 100% hace falta: el contenido del panel es flex en columna, y ahí un hijo con
   margin: auto no se estira, se queda "tan ancho como su contenido". Con container-type
   (ver .bingo-tablero) ese ancho es 0 → el tablero desaparecía y solo se veía el autor. */
.bingo-grande .bingo-tablero {
  width: 100%;
}

/* El botón "ver alternativa / ver original": centrado y de su tamaño (en flex en columna, sin
   align-self se estiraría a todo el ancho) */
.bingo-grande-cambiar {
  align-self: center;
}

/* --- Top 10 de la galería (bingo-galeria.js: pintarTop) ---
   Tarjetitas en rejilla de 5 columnas (dos filas de 5), centrada y como mucho de 46rem de ancho
   (si no, en pantallas grandes las portadas saldrían enormes). En el móvil, 3 por fila.
   Cada tarjetita es un enlace a AniList: el puesto encima de la portada, el título y en cuántos
   bingos sale.
     ┌──────┐
     │1º    │  ← .bingo-top-puesto (encima de la esquina de la portada)
     │      │
     └──────┘
     Título
     ♡ 7 bingos */
.bingo-top-explicacion {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  text-align: center;
}

.bingo-top-mensaje {
  font-size: 0.85rem;
  text-align: center;
  color: var(--rosa-fuerte);
}

.bingo-top-mensaje:empty {
  display: none;
}

/* Una sola fila de 10. En pantallas estrechas no caben: la fila se desliza de lado
   (overflow-x: auto), con tarjetas de 90px. padding arriba e izquierda: para que la pastilla
   del puesto, que asoma por fuera de la portada, no quede cortada por el deslizamiento. */
.bingo-top {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0.6rem 0 0 0.5rem;
  list-style: none;
}

@media (max-width: 800px) {
  .bingo-top {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 90px;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
}

.bingo-top:empty {
  display: none;
}

.bingo-top a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--tinta);
  text-decoration: none;
}

.bingo-top img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(255, 143, 200, 0.7);
  transition: transform 0.15s;
}

.bingo-top a:hover img,
.bingo-top a:focus-visible img {
  transform: translateY(-3px) rotate(-1deg);
}

@media (prefers-reduced-motion: reduce) {
  .bingo-top img {
    transition: none;
  }
}

/* El puesto: una pastillita con el degradado de las barras, en la esquina de arriba */
.bingo-top-puesto {
  position: absolute;
  top: -0.5rem;
  left: -0.4rem;
  z-index: 1;
  padding: 0 0.5rem;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #a0306f;
  background: linear-gradient(90deg, var(--rosa), var(--morado));
  border: 2px solid #fff;
  border-radius: 999px;
}

.bingo-top b {
  font-weight: normal;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--morado-fuerte);
  overflow-wrap: anywhere;
}

.bingo-top small {
  font-size: 0.68rem;
  color: var(--rosa-fuerte);
  overflow-wrap: anywhere;
}

/* --- Cartel de obras (datitos): el "UNDER CONSTRUCTION" de /stats/ del BCBHub ---
   - Fondo de rayas en diagonal amarillo/rosa (repeating-linear-gradient: se repite cada 24px).
   - Parpadeo seco, como los GIF de los 2000: steps(2) → sin fundido, solo se ve / no se ve.
   - Con "reducir movimiento" activado en el sistema, quieto.
     ┌─────────────────────────┐
     │ ///UNDER CONSTRUCTION/// │
     │ ///工事中 (っ˘ω˘ς )////// │
     └─────────────────────────┘ */
.cartel-obras {
  width: fit-content;
  margin: 0 auto 0.8rem;
  padding: 0.6rem 1.2rem;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  color: var(--rosa-fuerte);
  background: repeating-linear-gradient(45deg, #fff3b0 0 12px, #ffd1e8 12px 24px);
  border: 3px solid var(--rosa-fuerte);
  animation: cartel-parpadeo 1.2s steps(2, start) infinite;
}

/* En la cabecera, al lado del título: en fila (flex) y, si no caben, el cartel baja (wrap).
   Ahí, más pequeño y sin margen (el de arriba es para cuando va suelto, centrado). */
.cabecera-con-cartel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.2rem;
}

.cabecera-con-cartel .cartel-obras {
  margin: 0;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
}

@keyframes cartel-parpadeo {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .cartel-obras {
    animation: none;
  }
}

/* --- Numeritos (datitos, bingo-datitos.js: pintarNumeros) ---
   Arriba, contadores: el número con las cajitas negras del contador de visitas (.contador, del
   pie) y qué es al lado. En una fila; si no caben, bajan.
     ▐0▌▐6▌▐7▌ bingos    ▐9▌▐5▌▐3▌ obras distintas    ▐1▌▐6▌▐3▌▐5▌ casillas llenas
   - font-size del .contador más pequeño que en el pie: aquí son tres y no tienen que gritar. */
.datitos-contadores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.8rem;
}

.datitos-contadores div {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.datitos-contadores .contador span {
  font-size: 1rem;
}

.datitos-contadores div > span:last-child {
  font-size: 0.8rem;
  color: var(--morado-fuerte);
}

/* Debajo, barras partidas en trozos (el ancho de cada trozo lo pone el JS con flex-grow), con
   pinta de barra de progreso de Windows XP: hueco hundido, bloquecitos y brillo.
     demografía
     ▕▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▏   ← .datitos-barra-tira
     ■ shōnen 197 (16%)  ■ shōjo ...  ← .datitos-barra-leyenda
   - Colores por orden: el 1º trozo y el 1º cuadradito de la leyenda, el mismo color; el 2º, el
     siguiente... (nth-child). Así el JS no tiene que saber de colores.
   - El cuadradito de la leyenda es un ::before (una caja que CSS pone delante del texto).
   - Las barras, una al lado de otra (las columnas que quepan, de 20rem como mínimo: en el
     móvil, una debajo de otra). */
.datitos-barras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0.6rem 1.5rem;
  align-items: start;  /* cada columna, de su alto: la tarta no se estira hasta el alto de la de al lado */
}

.datitos-barra-titulo {
  margin: 0 0 0.25rem;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--morado-fuerte);
}

/* El hueco: blanco, con borde "hundido" (oscuro arriba-izquierda, claro abajo-derecha: lo
   contrario que un botón, que sale hacia fuera) y 2px de margen hasta los bloquecitos */
.datitos-barra-tira {
  display: flex;
  gap: 2px;
  height: 1rem;
  padding: 2px;
  background: #fff;
  border: 2px solid;
  border-color: #9a8fb0 #fff #fff #9a8fb0;
}

/* Cada trozo:
   - flex-basis 0: no tiene ancho propio, todo sale de flex-grow (si no, no sería proporcional).
   - Encima de su color (background-color, abajo por nth-child), dos capas de background-image:
     1. rayas blancas verticales cada 9px → los bloquecitos de las barras de XP;
     2. brillo: blanco arriba que se desvanece hacia la mitad, y un poco de sombra abajo. */
.datitos-barra-tira span {
  flex-basis: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 7px, #fff 7px 9px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12));
}

.datitos-barra-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1rem;
  margin: 0.3rem 0 0;
  padding: 0;
  font-size: 0.75rem;
  list-style: none;
}

.datitos-barra-leyenda li::before {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.35em;
  border: 1px solid #6b5a8a;
}

/* Los colores de los datos, por orden. Variables para que los use también la tarta (el JS
   escribe "var(--dato-1)"... en su conic-gradient). --dato-sin: "sin datos de AniList". */
.bingo-numeros {
  --dato-1: var(--rosa);
  --dato-2: #b18cff;
  --dato-3: #7fc8ff;
  --dato-4: #ffd966;
  --dato-5: #8fe3c0;
  --dato-6: #ff9f80;
  --dato-sin: #d9d0e3;
}

/* background-color (no background): así no se borran las capas de bloquecitos y brillo de arriba */
.datitos-barra-tira span:nth-child(1), .datitos-barra-leyenda li:nth-child(1)::before { background-color: var(--dato-1); }
.datitos-barra-tira span:nth-child(2), .datitos-barra-leyenda li:nth-child(2)::before { background-color: var(--dato-2); }
.datitos-barra-tira span:nth-child(3), .datitos-barra-leyenda li:nth-child(3)::before { background-color: var(--dato-3); }
.datitos-barra-tira span:nth-child(4), .datitos-barra-leyenda li:nth-child(4)::before { background-color: var(--dato-4); }
.datitos-barra-tira span:nth-child(5), .datitos-barra-leyenda li:nth-child(5)::before { background-color: var(--dato-5); }
.datitos-barra-tira span:nth-child(6), .datitos-barra-leyenda li:nth-child(6)::before { background-color: var(--dato-6); }

/* "sin datos de AniList": siempre gris, vaya en el puesto que vaya (más específico que los de arriba) */
.datitos-barra-tira span.datitos-sin-datos,
.datitos-barra-leyenda li.datitos-sin-datos::before {
  background-color: var(--dato-sin);
}

/* La tarta (pie chart): el círculo a la izquierda y la leyenda a la derecha, en columna.
   El título ocupa toda la fila de arriba (grid-column: 1 / -1 = de la primera a la última).
     demografía
     (círculo)  ■ shōnen ...
                ■ shōjo ...  */
.datitos-tarta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  gap: 0.2rem 1rem;
}

.datitos-tarta .datitos-barra-titulo {
  grid-column: 1 / -1;
}

.datitos-tarta .datitos-barra-leyenda {
  flex-direction: column;
  margin: 0;
}

/* El círculo, como las tartas del Excel de entonces: colores planos (sin brillo), borde oscuro
   y una sombra dura desplazada (sin difuminar: 0 de desenfoque). */
.datitos-tarta-circulo {
  width: 7rem;
  aspect-ratio: 1;
  border: 2px solid #6b5a8a;
  border-radius: 50%;
  box-shadow: 4px 4px 0 rgba(107, 90, 138, 0.35);
}

/* --- Editoriales (datitos, dentro de numeritos; bingo-datitos.js: crearEditoriales) ---
   .datitos-columna: la columna de la izquierda de numeritos (la tarta y, debajo, manga o novela). */
.datitos-columna {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

/* Lista «top hits», como las de las barras laterales de los blogs de los 2000:
     1. Planeta ............ 23
     2. Milky Way .......... 21
   - Hueco "hundido" como el de la barra de XP (oscuro arriba-izquierda, claro abajo-derecha).
   - Filas alternas rosa y blanco (nth-child(odd): la 1ª, 3ª, 5ª...).
   - Cada fila, flex: puesto, nombre, puntitos (el <i>, que se estira con flex: 1) y número. */
.datitos-hits {
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  list-style: none;
  background: #fff;
  border: 2px solid;
  border-color: #9a8fb0 #fff #fff #9a8fb0;
}

.datitos-hits li {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.05rem 0.4rem;
}

.datitos-hits li:nth-child(odd) {
  background: #ffe3f1;
}

.datitos-hits span {
  min-width: 1.6em;
  text-align: right;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--rosa-fuerte);
}

.datitos-hits b {
  font-weight: normal;
  color: var(--morado-fuerte);
  white-space: nowrap;
}

.datitos-hits i {
  flex: 1;
  border-bottom: 2px dotted var(--morado);
}

.datitos-hits small {
  color: var(--rosa-fuerte);
}

/* "▸ y 5 más": las demás editoriales, plegadas (al abrirlo, la misma lista debajo) */
.datitos-hits-mas summary {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--morado-fuerte);
  cursor: pointer;
}

.datitos-hits-mas .datitos-hits {
  margin-top: 0.25rem;
}

/* --- Constelaciones (datitos, bingo-datitos.js: pintarGrafo) ---
   El cielo es un <canvas> (lo dibuja el JS entero); aquí, lo de alrededor:
     buscar obra [___]  bingo de [___]  [♡ mi bingo] [limpiar]  colores: ( ) ...   ← .grafo-controles
     ┌──────────────────────────────────────── [+][−][⟲] ┐                        ← .grafo-zoom
     │  (canvas)            ┌──────────────┐               │
     │                      │ tooltip XP   │               │                        ← .grafo-tooltip
     └──────────────────────┴──────────────┴──────────────┘
     ★ constelación de ... (14)  ★ ...                                              ← .grafo-leyenda */
/* "obras puente: ..." debajo de la descripción: pegadita a ella y un poco más pequeña */
.grafo-definicion {
  margin-top: -0.7rem;
  font-size: 0.75rem;
  color: var(--morado-fuerte);
}

.grafo-controles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.2rem;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
}

/* Campos de texto y botones estilo Windows 98: borde hundido (campos) o saliente (botones) */
.grafo-controles input[type="search"] {
  width: 13rem;
  padding: 0.1rem 0.3rem;
  font: inherit;
  font-size: 0.8rem;
  background: #fff;
  border: 2px solid;
  border-color: #6b5a8a #fff #fff #6b5a8a;
}

.boton98 {
  padding: 0.05rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  color: #000;
  background: #e8e0f0;
  border: 2px solid;
  border-color: #fff #6b5a8a #6b5a8a #fff;
  cursor: pointer;
}

/* Al pulsarlo (o si está "encendido"), el borde al revés: parece que se hunde */
.boton98:active,
.boton98[aria-pressed="true"] {
  border-color: #6b5a8a #fff #fff #6b5a8a;
  background: #d8cce8;
}

.grafo-marco {
  position: relative;  /* para colocar el zoom y el tooltip encima del canvas */
  background: #170d2b;
  border: 2px solid;
  border-color: #6b5a8a #fff #fff #6b5a8a;
}

.grafo-cielo {
  display: block;
  width: 100%;
  height: 640px;
  cursor: grab;
}

.grafo-cielo.arrastrando {
  cursor: grabbing;
}

@media (max-width: 800px) {
  .grafo-cielo {
    height: 460px;
  }
}

.grafo-zoom {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
}

.grafo-zoom .boton98 {
  width: 1.7rem;
  padding: 0;
  font-family: monospace;
  font-size: 0.9rem;
}

/* El aviso "ctrl + rueda para hacer zoom": centrado encima del cielo, como un cartelito de
   Windows (fondo lila, borde saliente). pointer-events: none, para no tapar el canvas. */
.grafo-aviso-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  color: #000;
  background: #e8e0f0;
  border: 2px solid;
  border-color: #fff #6b5a8a #6b5a8a #fff;
  pointer-events: none;
}

.grafo-aviso-zoom[hidden] {
  display: none;
}

/* El tooltip amarillo de Windows XP (pointer-events: none: que no "tape" el ratón al canvas) */
.grafo-tooltip {
  position: absolute;
  display: flex;
  gap: 0.5rem;
  max-width: 20rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  color: #000;
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.grafo-tooltip[hidden] {
  display: none;
}

.grafo-tooltip img {
  width: 46px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid #000;
}

.grafo-tooltip b {
  display: block;
  margin-bottom: 0.15rem;
}

.grafo-estado {
  min-height: 1.2em;
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  text-align: center;
  color: var(--rosa-fuerte);
}

/* Leyenda: un ★ del color de cada cosa (el color lo pone el JS en --color) */
.grafo-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.9rem;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.75rem;
  list-style: none;
}

.grafo-leyenda li::before {
  content: '★';
  margin-right: 0.3em;
  color: var(--color);
  text-shadow: 1px 1px 0 #6b5a8a;  /* para que los colores claros se vean sobre el fondo claro */
}

.grafo-ayuda {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  text-align: center;
  color: var(--morado-fuerte);
}

/* --- Tu bingo (datitos, bingo-datitos.js: pintarTuBingo) ---
   Arriba, dos columnas (en el móvil, una debajo de otra): el mapa y el índice de nicho.
     ┌ mapa (canvas) ──────┐  índice de nicho
     │  ✦  ✦ ♥ estás aquí   │  ▕▉▉▉▉▉▉▉▉▉░░░▏   ← la barra de XP de numeritos, de un solo trozo
     └─────────────────────┘  más nicho que el 85%
   Debajo, las recomendaciones (las tarjetitas del top). */
.tu-arriba {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
  gap: 1rem 1.5rem;
  align-items: start;
}

@media (max-width: 800px) {
  .tu-arriba {
    grid-template-columns: 1fr;
  }
}

.tu-mapa {
  display: block;
  width: 100%;
  height: 340px;
}

.tu-nicho .datitos-barra-tira span {
  flex: none;
  width: 0;  /* el JS le pone el % */
  background-color: var(--rosa);
}

.tu-nicho-texto {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--morado-fuerte);
}

.tu-recomendaciones {
  margin-top: 1rem;
}

.tu-recomendaciones[hidden] {
  display: none;
}

/* --- Peticiones (datitos, bingo-datitos.js: pintarPeticiones) ---
   Pestañas como las de las ventanas de propiedades de Windows 98:
     ┌★ Planeta 23┐┌★ Milky Way 21┐┌★ ...      ← .datitos-pestana (la elegida, más alta y "pegada")
     │  [1º][2º][3º]...                        ← .datitos-pestana-contenido (el panel)
     └──────────────────────────────────
   - Pestañas: borde claro arriba-izquierda y oscuro a la derecha (salen hacia fuera).
   - La elegida (aria-selected="true"): 2px más alta, del color del panel y, con margin-bottom
     -2px, se monta encima del borde de arriba del panel: así parece que son una sola pieza.
   - flex-wrap: si no caben en una fila, bajan a otra. */
.datitos-pestanas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 2px;
  padding: 0 0.3rem;
}

.datitos-pestana {
  position: relative;
  margin-bottom: -2px;
  padding: 0.15rem 0.6rem;
  font: inherit;
  font-size: 0.78rem;
  color: #000;
  background: #e8e0f0;
  border: 2px solid;
  border-color: #fff #6b5a8a transparent #fff;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}

.datitos-pestana[aria-selected="true"] {
  z-index: 1;
  padding-top: 0.3rem;
  padding-bottom: calc(0.15rem + 2px);
  background: #fbf8ff;
  font-weight: bold;
}

.datitos-pestana span {
  text-shadow: 1px 1px 0 #6b5a8a;  /* que las ★ claras (Distrito, blanca) se vean */
}

.datitos-pestana small {
  color: var(--rosa-fuerte);
}

.datitos-pestana-contenido {
  padding: 0.8rem 0.6rem 0.6rem;
  background: #fbf8ff;
  border: 2px solid;
  border-color: #fff #6b5a8a #6b5a8a #fff;
}

/* Las tarjetitas del top dentro de una pestaña: el mismo hueco a la derecha que a la izquierda
   (.bingo-top solo lo tiene a la izquierda, para la pastilla del puesto), si no, la última
   tarjeta quedaba pegada al borde del panel */
.datitos-pestana-contenido .bingo-top {
  padding-right: 0.5rem;
}

/* --- Nicho del nicho (datitos, bingo-datitos.js: pintarNicho) ---
   El preview reutiliza .bingo-top (sin pastilla de puesto, así que sin el hueco de arriba).
   Debajo, la lista entera plegada en un <details>, en columnas de 16rem (las que quepan):
     ▸ ver las 412 obras
         Título · ♡ nick     Título · ♡ nick     Título · ♡ nick */
.bingo-nicho-preview {
  padding: 0 0 0.5rem;
}

/* .bingo-boton tiene su propio display: sin esto, el botón "otras ↻" se vería aun escondido */
.bingo-nicho-otras[hidden] {
  display: none;
}

.bingo-nicho-todas summary {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--morado-fuerte);
  cursor: pointer;
}

.bingo-nicho-todas ul {
  columns: 16rem;
  column-gap: 1.5rem;
  margin: 0.6rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  list-style: none;
}

/* break-inside: avoid → una obra nunca se parte entre dos columnas */
.bingo-nicho-todas li {
  break-inside: avoid;
  margin-bottom: 0.25rem;
}

.bingo-nicho-todas small {
  color: var(--rosa-fuerte);
}

/* --- Moderación --- */
.bingo-moderar [hidden] {
  display: none;
}

.bingo-moderar-entrar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.7rem 1rem;
}

.bingo-moderar-mensaje {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  color: var(--rosa-fuerte);
}

.bingo-tarjeta-fecha {
  margin: 0.2rem 0 0;
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Los textos escritos a mano: lo que hay que revisar */
.bingo-tarjeta-textos {
  margin: 0.4rem 0;
  padding-left: 1.8rem;
  font-size: 0.75rem;
}

.bingo-tarjeta-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  button.bingo-tablero,
  button.bingo-tablero:hover {
    transition: none;
    transform: none;
  }
}

.bingo-creditos {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  text-align: center;
}

/* --- Panel de una casilla (un <dialog>) ---
   - Es una .ventana (barra rosa, puntitos...), centrada encima de todo.
   - width: min(42rem, 100% - 2rem) → 42rem, o lo que quepa dejando 1rem a cada lado (móvil).
   - max-height + overflow: auto → si hay muchos resultados, se desplaza dentro, no la página. */
.bingo-panel {
  width: min(42rem, 100% - 2rem);
  max-height: calc(100% - 3rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--tinta);
  font-family: var(--fuente-texto);
}

/* ::backdrop: el fondo que pone el navegador detrás de un <dialog> abierto */
.bingo-panel::backdrop {
  background: rgba(107, 44, 95, 0.35);
}

/* El ✕ del panel sí funciona (los de las otras ventanitas son de adorno), mismo aspecto */
.bingo-panel-cerrar {
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid #fff;
  border-radius: 3px;
}

.bingo-panel-cerrar:hover {
  background: var(--rosa-fuerte);
}

.bingo-panel .ventana-contenido {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.bingo-panel p {
  margin: 0;
}

.bingo-panel-tipo {
  color: var(--rosa-fuerte);
}

/* Cada campo: el texto encima y la caja debajo, a todo lo ancho */
.bingo-panel label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}

/* Nota en pequeño junto al nombre de un campo: "(opcional · ...)" */
.bingo-opcional {
  font-size: 0.7rem;
  color: var(--rosa-fuerte);
}

.bingo-panel input {
  padding: 0.3rem 0.4rem;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--rosa-fuerte);
  border-radius: 0;
}

.bingo-panel input:focus-visible {
  outline: 2px solid var(--morado-fuerte);
  outline-offset: 1px;
}

/* [hidden] tiene que ganar a los display: flex de abajo (si no, lo escondido se vería) */
.bingo-panel [hidden] {
  display: none;
}

/* Lo que ya hay en la casilla: portada pequeña a la izquierda, campos a la derecha */
.bingo-panel-actual {
  display: flex;
  gap: 0.7rem;
  padding: 0.5rem;
  background: var(--rosa-claro);
  border: 1px dashed var(--rosa);
}

.bingo-panel-actual img {
  flex: none;
  width: 110px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 2px solid #fff;
}

.bingo-panel-actual > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;  /* sin esto, un título largo ensancharía la caja y se saldría del panel */
}

/* aceptar y quitar, en fila */
.bingo-panel-botones {
  display: flex;
  gap: 0.5rem;
}

/* aceptar: relleno (es el principal); quitar: solo el borde */
.bingo-panel-aceptar {
  padding: 0.1rem 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  color: #fff;
  background: var(--morado-fuerte);
  border: 1px solid var(--morado-fuerte);
}

.bingo-panel-aceptar:hover {
  background: var(--rosa-fuerte);
  border-color: var(--rosa-fuerte);
}

.bingo-panel-quitar {
  padding: 0.1rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--rosa-fuerte);
  background: #fff;
  border: 1px solid var(--rosa-fuerte);
}

.bingo-panel-quitar:hover {
  color: #fff;
  background: var(--rosa-fuerte);
}

/* Resultados de AniList: una fila por obra (portada pequeña + título + detalles) */
.bingo-resultados {
  margin: -0.3rem 0 0;
  padding: 0;
  list-style: none;
}

.bingo-resultados:empty {
  display: none;
}

.bingo-resultados button {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.45rem;
  font: inherit;
  text-align: left;
  color: var(--tinta);
  background: #fff;
  border: none;
  border-bottom: 1px dotted var(--rosa);
}

.bingo-resultados button:hover,
.bingo-resultados button:focus-visible {
  background: var(--morado-claro);
}

.bingo-resultados img {
  flex: none;
  width: 64px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.bingo-resultados span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bingo-resultados b {
  font-weight: normal;
  color: var(--morado-fuerte);
}

.bingo-resultados small {
  font-size: 0.7rem;
  opacity: 0.8;
}

.bingo-panel-mensaje {
  font-size: 0.8rem;
  color: var(--rosa-fuerte);
}

.bingo-panel-mensaje:empty {
  display: none;
}

/* "⚠ parece que ya está licenciado en España..." (ListadoManga), debajo de la obra del panel */
.bingo-panel-licencia {
  margin: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: #c2006b;
  background: #fff0f7;
  border: 1px dashed #ff2fa0;
}

/* "⚠ parece que ya está licenciado..." en la lista de resultados: debajo del botón de la obra,
   sangrado para que quede debajo del título (64px de portada + 0.9rem de hueco + 0.45rem de borde) */
.bingo-resultados .bingo-licenciado {
  margin: 0;
  padding: 0.1rem 0.45rem 0.35rem calc(64px + 0.9rem + 0.45rem);
  font-size: 0.7rem;
  color: #c2006b;
  background: #fff0f7;
  border-bottom: 1px dotted var(--rosa);
}

/* Con aviso debajo, la línea de puntitos va debajo del aviso, no entre el botón y el aviso */
.bingo-resultados button:has(+ .bingo-licenciado) {
  border-bottom: none;
}


/* ============================================================================================
   Página 404 (templates/404.html, views.no_encontrada)
   Como las de lirla y BCBHub: franja de adornos con el "logo" (aquí, el 404) encima, aviso,
   título y accesos. Todo centrado dentro de una ventanita.
   ============================================================================================ */

.no-encontrada {
  max-width: 48rem;
  margin-inline: auto;
}

.no-encontrada .ventana-contenido {
  padding-top: 1rem;
  text-align: center;
}

/* La franja: los simbolitos y, en la misma celda de la rejilla, el 404 encima (centrado).
   grid-area: 1 / 1 → los dos ocupan la celda 1,1: se apilan sin position: absolute. */
.no-encontrada-franja {
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
}

.no-encontrada-franja > * {
  grid-area: 1 / 1;
}

/* 24 columnas de simbolitos. container-type: el tamaño de la letra sale del ancho de la franja
   (100cqi = todo su ancho), así caben siempre 24 por fila, en el móvil también.
   En reposo, clarititos (--opacidad, --tono: los pone la vista al azar); al pasar el ratón,
   de golpe enteros y girados (--giro cuartos de vuelta), y luego vuelven despacio. */
.no-encontrada-simbolos {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  width: 100%;
  user-select: none;
}

.no-encontrada-simbolos span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: calc(100cqi / 24 * 0.6);
  line-height: 1;
  color: hsl(var(--tono) 85% 62%);
  opacity: var(--opacidad);
  transition: opacity 0.8s ease-in, rotate 0.4s ease-out, scale 0.4s ease-out;
}

.no-encontrada-simbolos span:hover {
  transition-duration: 0s;
  opacity: 1;
  rotate: calc(var(--giro) * 90deg);
  scale: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .no-encontrada-simbolos span:hover {
    rotate: none;
    scale: none;
  }
}

/* El 404: grande, en la letra de los títulos, con el degradado de las barras y un marquito
   (como el logo de lirla, con fondo para que no se mezcle con los simbolitos).
   pointer-events: none → el ratón "atraviesa" el 404 y los simbolitos de debajo siguen girando. */
.no-encontrada-numero {
  margin: 0;
  padding: 0 1.2rem;
  font-family: var(--fuente-titulo);
  font-size: clamp(3rem, 12vw, 5.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rosa-fuerte);
  background: rgba(247, 240, 255, 0.92);
  border: 2px dotted var(--rosa);
  border-radius: 1rem;
  text-shadow: 3px 3px 0 var(--morado), 0 0 14px rgba(255, 143, 200, 0.8);
  pointer-events: none;
}

.no-encontrada-aviso {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--morado-fuerte);
}

.no-encontrada-titulo {
  margin: 0 0 0.6rem;
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--rosa-fuerte);
}

/* El kaomoji llorando, en su propia línea si no cabe (nowrap: que no se parta por la mitad) */
.no-encontrada-kaomoji {
  display: inline-block;
  white-space: nowrap;
}

.no-encontrada-texto {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
}

/* Yui durmiendo: centrada, a su tamaño (200×107) y nítida (pixelated: sin difuminar los píxeles) */
.no-encontrada-yui {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1rem;
  image-rendering: pixelated;
}


/* ============================================================================================
   Guestbook (/guestbook/, templates/guestbook.html y static/js/guestbook.js)
   El formulario reutiliza .bingo-formulario / .bingo-boton / .bingo-trampa; aquí solo lo propio.
   ============================================================================================ */

/* El formulario, algo más ancho que el del bingo (hay que escribir un mensaje) */
.guestbook-formulario {
  max-width: 34rem;
  margin-top: 0.5rem;
}

.guestbook-formulario textarea {
  padding: 0.3rem 0.4rem;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--rosa-fuerte);
  border-radius: 0;
  resize: vertical;  /* que se pueda hacer más alto, pero no más ancho que el formulario */
}

/* Los iconitos: pastillas en fila (se parten en varias líneas si no caben)
     (◕‿◕✿)  [(｡♥‿♥｡)]  ʕ•ᴥ•ʔ  ...     ← la elegida, rellena de rosa
   - El circulito del radio se esconde (pero sigue ahí: se puede elegir con el teclado). */
.guestbook-iconos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: none;
}

.guestbook-iconos legend {
  margin-bottom: 0.3rem;
  padding: 0;
  font-size: 0.85rem;
}

.guestbook-iconos input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.guestbook-iconos span {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--rosa);
  border-radius: 999px;
  cursor: pointer;
}

.guestbook-iconos input:checked + span {
  color: #fff;
  background: linear-gradient(90deg, var(--rosa), var(--morado));
  border-color: #fff;
  box-shadow: 0 0 6px rgba(255, 143, 200, 0.9);
}

/* Al moverse con el tabulador: que se vea cuál tiene el foco */
.guestbook-iconos input:focus-visible + span {
  outline: 2px solid var(--morado-fuerte);
  outline-offset: 2px;
}

.guestbook-aviso:empty {
  display: none;
}

/* Cada mensaje: una notita con borde de puntitos
     ┌ ʕ•ᴥ•ʔ nick · 05/11/2026 ┄┄┄┄┄┄┐
     ┆ el mensaje...                  ┆
     └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘ */
.guestbook-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.guestbook-mensaje {
  padding: 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.75);
  border: 2px dotted var(--rosa);
}

.guestbook-mensaje header {
  font-size: 0.8rem;
}

.guestbook-mensaje-icono {
  color: var(--rosa-fuerte);
}

.guestbook-mensaje b {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--morado-fuerte);
}

.guestbook-mensaje time {
  opacity: 0.8;
}

/* pre-line: respeta los saltos de línea del mensaje. overflow-wrap: que una palabra
   larguísima (o un enlace pegado) se parta en vez de salirse de la notita. */
.guestbook-mensaje p {
  margin: 0.3rem 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}


/* ============================================================================================
   Revisión de los bingos de redes (SOLO LOCAL: templates/revisar_redes.html y _fila.html)
     [portada] @usuario · casilla 7 · ver imagen      DUDOSA   ← el color del borde = el estado
               leído / AniList / botones
   ============================================================================================ */
.revision-cuentas {
  margin: 0;
  font-weight: bold;
  text-align: center;
}

.revision-ayuda {
  font-size: 0.75rem;
  text-align: center;
}

.revision-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.revision-separador {
  grid-column: 1 / -1;  /* ocupa toda la fila de la rejilla */
  margin-top: 1.5rem;
  text-align: center;
  color: var(--morado-fuerte);
}

.revision-fila {
  display: flex;
  gap: 0.7rem;
  padding: 0.5rem;
  font-size: 0.8rem;
  background: #fff;
  border: 2px solid var(--rosa);
}

.revision-fila p {
  margin: 0 0 0.2rem;
  overflow-wrap: anywhere;
}

.revision-fila > div {
  flex: 1;
  min-width: 0;
}

/* El color del borde según el estado: rojo lo que hay que mirar, verde lo seguro o aceptado */
.revision-fila--dudosa { border-color: #ff9800; }
.revision-fila--sin-resultado { border-color: #e53935; }
.revision-fila--segura,
.revision-fila--aceptada,
.revision-fila--cambiada { border-color: #43a047; }
.revision-fila--sin-obra { border-color: #9e9e9e; }

.revision-fila--guardando {
  opacity: 0.5;
}

.revision-fila img,
.revision-sin-portada {
  flex: none;
  width: 60px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.revision-sin-portada {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #999;
  background: #eee;
}

.revision-estado {
  float: right;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  background: var(--rosa-claro);
  border-radius: 999px;
}

.revision-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.3rem;
}

.revision-acciones button,
.revision-buscar {
  padding: 0.1rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--tinta);
  text-decoration: none;
  background: var(--rosa-claro);
  border: 1px solid var(--rosa);
  border-radius: 4px;
}

.revision-enlace {
  display: inline-flex;
}

.revision-enlace input {
  width: 13rem;
  padding: 0.1rem 0.3rem;
  font: inherit;
  font-size: 0.75rem;
  border: 1px solid var(--rosa);
}