/* ===== Análisis de vídeo =====
   El taller va sobre fondo OSCURO y el resto de la app sobre claro, y es a
   propósito: es el mismo criterio que la pizarra a pantalla completa. Aquí no
   se está editando una página, se está mirando un vídeo, y un panel blanco al
   lado de un fotograma de césped le roba el contraste a lo único que importa.

   La pantalla de entrada, en cambio, es una pantalla de la app como las demás:
   blanca, con sus fichas y su tipografía. Se lee, no se mira. */

/* La letra de las cartelas va EMPAQUETADA y no traída de Google, por dos
   razones que se explican enteras en fuentes/LEEME.md: el service worker no
   guarda las tipografías de fuera, así que en modo avión las cartelas cambiaban
   de letra; y un SVG convertido en imagen no puede ir a buscar nada fuera, así
   que sin tenerla aquí la jugada exportada saldría con otra tipografía que la
   que se vio en pantalla. */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fuentes/barlow-condensed-800.woff2') format('woff2');
}

/* OJO CON ESTO ANTES DE TOCAR NADA. Aquí abajo hay elementos con display puesto
   por clase (.an-btn es inline-flex, .an-tools y .an-sello son flex), y esa
   regla le GANA por especificidad a la del navegador para [hidden]. Sin esta
   línea, esconder algo desde el JS no lo esconde: el sello de CONGELADO y la
   barra de herramientas se quedaban puestos para siempre, y salían a la vez el
   botón de congelar y el de seguir. */
#analysisView [hidden]{display:none}

/* ---------- el distintivo de beta ---------- */
/* Rojo, arriba del todo y siempre puesto. El color de estado de la app dice
   "duda" o "baja" y aquí dice exactamente eso: esto todavía no es firme. */
.an-beta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 20px;padding:11px 14px;
  background:#fdecee;border:1px solid #f3c3c8;border-left:4px solid var(--red);
  border-radius:9px;color:#7c3a40;font-size:12.5px;line-height:1.5;
}
.an-beta>b{
  flex:none;background:var(--red);color:#fff;border-radius:6px;
  padding:3px 9px 2px;font:800 10.5px Manrope,sans-serif;letter-spacing:.14em;
}
.an-beta .ojo{color:#7c3a40;font-weight:700}
/* El mismo aviso en el menú, para que se vea antes de entrar, y en su ficha del
   tutorial, que es el otro sitio donde alguien se encuentra la función. */
.nav-item b.beta{
  background:var(--red);color:#fff;font:800 9px Manrope,sans-serif;
  letter-spacing:.1em;padding:2px 6px;
}
.tut-card h3 b.beta{
  background:var(--red);color:#fff;border-radius:5px;margin-left:9px;
  padding:2px 7px 1px;font:800 9px Manrope,sans-serif;letter-spacing:.12em;
  vertical-align:middle;
}

/* ---------- la entrada: qué es esto y cómo va ---------- */
.an-intro{max-width:900px}
.an-hero{margin-bottom:16px}

/* ---------- la guía: cinco tarjetas que se pasan con el dedo ---------- */
/* El carrusel es scroll nativo con puntos de anclaje, igual que el de la
   portada: el dedo, la inercia del sistema y el comportamiento correcto en cada
   navegador salen gratis, y el teclado recorre la lista como lo que es, una
   lista. El JavaScript solo añade los puntos y las flechas. */
.an-guia{position:relative;max-width:720px;margin:0 0 20px}
.an-guia-pista{
  display:flex;gap:12px;list-style:none;margin:0;padding:4px 2px 10px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.an-guia-pista::-webkit-scrollbar{display:none}
.an-guia-pista:focus-visible{outline:3px solid var(--navy-2);outline-offset:3px;border-radius:var(--radio)}

.an-paso{
  flex:0 0 auto;width:min(76vw,300px);scroll-snap-align:center;
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden}
/* El dibujo manda el alto de la tarjeta: es 16:9 como el vídeo que enseña, así
   que todas las tarjetas miden lo mismo y el carrusel no da saltos. */
.an-ilu{margin:0;background:var(--tinte-2);border-bottom:1px solid var(--line)}
.an-ilu svg{display:block;width:100%;height:auto}
.an-paso-txt{display:flex;gap:10px;align-items:flex-start;padding:13px 14px 15px}
.an-paso-txt b{flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;
  font:800 12px Manrope,sans-serif}
.an-paso-txt strong{display:block;font:700 13.5px 'DM Sans',sans-serif;color:var(--ink);margin-bottom:3px}
.an-paso-txt span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}

/* Los puntos dicen por dónde vas y además se pulsan. El activo se alarga en vez
   de solo cambiar de color: a 8px es lo único que se distingue de un vistazo. */
.an-guia-puntos{display:flex;justify-content:center;align-items:center;gap:7px;min-height:8px}
.an-guia-punto{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:#c4cede;transition:width .16s ease,background .16s ease}
.an-guia-punto[aria-current="true"]{width:24px;border-radius:4px;background:var(--navy)}
.an-guia-punto:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* Las flechas solo de tablet para arriba: en el móvil sobran —se pasa con el
   dedo— y taparían media tarjeta. */
.an-guia-flecha{
  position:absolute;top:46%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:var(--white);color:var(--navy);display:none;place-items:center;
  box-shadow:var(--sombra);transition:transform .12s ease,border-color .12s ease}
.an-guia-flecha::after{content:'';width:9px;height:9px;
  border-top:2.5px solid currentColor;border-right:2.5px solid currentColor}
.an-guia-prev{left:-14px}
.an-guia-prev::after{transform:rotate(-135deg);margin-left:3px}
.an-guia-next{right:-14px}
.an-guia-next::after{transform:rotate(45deg);margin-right:3px}
.an-guia-flecha:hover{border-color:var(--borde-tinte);transform:translateY(-50%) scale(1.06)}
.an-guia-flecha:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* Al principio y al final se apaga en vez de desaparecer, para que no salte. */
.an-guia-flecha[disabled]{opacity:.3;cursor:default;transform:translateY(-50%)}
@media(min-width:900px){.an-guia-flecha:not([hidden]){display:grid}}

.an-avisos{display:grid;gap:9px;margin:12px 0 0}
.an-aviso{display:flex;gap:10px;align-items:flex-start;background:var(--tinte-2);
  border:1px solid var(--borde-tinte);border-radius:10px;padding:12px 14px;
  color:var(--muted);font-size:13px;line-height:1.55}
.an-aviso i{font-style:normal;flex:none;font-size:15px;line-height:1.35}
.an-aviso b{color:var(--ink)}
.an-cargar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.an-cargar .btn{padding:13px 22px;font-size:13px}
.an-cargar small{color:var(--muted);font-size:12px}

/* La letra pequeña, plegada. El resumen tiene que parecer pulsable sin gritar:
   es lo que se lee una vez y no lo que hay que leer para empezar. */
.an-detalles{max-width:720px;margin:18px 0 0}
.an-detalles>summary{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  color:var(--navy-2);font:700 12.5px 'DM Sans',sans-serif;
  border:1px solid var(--line);border-radius:9px;background:var(--white);
  padding:8px 13px}
.an-detalles>summary::-webkit-details-marker{display:none}
.an-detalles>summary::before{content:'▸';font-size:11px;line-height:1}
.an-detalles[open]>summary::before{content:'▾'}
.an-detalles>summary:hover{border-color:var(--borde-tinte)}
.an-detalles>summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ---------- el taller ---------- */
.an-taller{background:var(--navy-3);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra-alta)}
.an-escena{background:#000;display:grid;place-items:center;padding:0}

/* El marco lleva la proporción REAL del vídeo (se la pone analisis.js al leer
   los metadatos), así el <video> lo llena exacto y no hay franjas negras DENTRO
   del marco. Sin eso, la capa de dibujo tendría que calcular a mano dónde cae
   la imagen y las marcas bailarían al girar el móvil. */
.an-video-wrap{position:relative;width:100%;max-height:70vh;aspect-ratio:16/9;
  margin:0 auto;background:#000}
.an-video-wrap video{display:block;width:100%;height:100%;background:#000}
.an-video-wrap svg{position:absolute;inset:0;width:100%;height:100%;
  touch-action:none;pointer-events:none}
/* La capa solo se queda el dedo con la imagen parada: mientras el vídeo corre,
   el toque es del reproductor y sirve para congelar. */
.an-taller.congelado .an-video-wrap svg{pointer-events:auto;cursor:crosshair}
/* La capa de las marcas vivas no recibe NUNCA: está debajo y es solo para
   mirar. Lleva el id porque si no la regla de arriba se la lleva por delante al
   congelar y el dedo dejaría de llegar a la de dibujo. */
.an-video-wrap svg#anVivas{pointer-events:none!important}
/* Con la herramienta de mover, el dedo ya no dibuja: agarra. En un ordenador la
   cruz decia lo contrario. */
.an-taller.congelado.moviendo .an-video-wrap svg{cursor:grab}
.an-taller.congelado.moviendo .an-video-wrap svg:active{cursor:grabbing}
.an-taller.congelado.borrando .an-video-wrap svg{cursor:pointer}
/* Con la imagen congelada el dedo DIBUJA, no desplaza la pagina. El
   touch-action va en el MARCO, que es un div, y no solo en el SVG: Safari no
   respeta touch-action sobre elementos SVG, y arrastrar una marca en el movil
   movia la pantalla en vez de pintar. El overscroll-behavior evita ademas el
   rebote de la pagina cuando el trazo llega al borde. */
.an-taller.congelado .an-video-wrap{touch-action:none;overscroll-behavior:contain}

/* Al reanudar, las marcas no se van de un fotograma para otro: se apagan
   mientras la jugada arranca. Un corte seco se lee como "se han borrado". */
.an-video-wrap svg.desvanece{opacity:0;transition:opacity 1s ease-out}
@media(prefers-reduced-motion:reduce){.an-video-wrap svg.desvanece{transition:none}}
.an-video-wrap text{font-family:'Barlow Condensed','Arial Narrow',Manrope,sans-serif;
  font-weight:800;letter-spacing:.055em;text-transform:uppercase}

.an-sello{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:7px;
  background:#04080ad9;color:#ffb020;border-radius:999px;padding:5px 12px 4px;
  font:800 11px Manrope,sans-serif;letter-spacing:.14em;pointer-events:none}
.an-sello::before{content:'';width:7px;height:7px;border-radius:50%;background:#ffb020}
/* Siguiendo a un jugador el fotograma SÍ se mueve —es lo que se está marcando—,
   así que el sello no puede decir lo mismo ni del mismo color que CONGELADO. */
.an-taller.siguiendo .an-sello{color:var(--marca-verde)}
.an-taller.siguiendo .an-sello::before{background:var(--marca-verde);animation:an-late 1.6s ease-in-out infinite}
@keyframes an-late{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.an-taller.siguiendo .an-sello::before{animation:none}}

/* El panel de grabar tapa el vídeo a propósito: mientras graba no hay nada que
   tocar ahí, y lo único importante es que la app se quede delante. */
.an-graba{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:11px;background:#04080ad4;padding:16px;text-align:center}
.an-graba-chip{font:800 11px Manrope,sans-serif;letter-spacing:.16em;color:#f5414f}
.an-graba-linea{width:min(260px,72vw);height:6px;border-radius:3px;background:#ffffff26;overflow:hidden}
.an-graba-linea i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--marca-verde),var(--marca-verde-2));transition:width .2s linear}
.an-graba p{margin:0;color:#cfe0f0;font-size:12px;line-height:1.5;max-width:30ch}
.an-graba p b{font-variant-numeric:tabular-nums}
/* Grabando no se toca nada más: para cortar está el botón del propio panel. */
.an-taller.grabando .an-mandos,
.an-taller.grabando .an-clip-mandos,
.an-taller.grabando .an-tools{opacity:.3;pointer-events:none}

.an-nombre{color:#7f93a6;font-size:11px;padding:9px 14px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.an-error{margin:10px 14px 0;background:#3a1418;border:1px solid #6b2129;color:#ffd9dc;
  border-radius:9px;padding:11px 13px;font-size:12.5px;line-height:1.5}

/* ---------- las dos barras de mandos ---------- */
.an-mandos,.an-tools{display:flex;align-items:center;gap:8px;padding:12px 14px;flex-wrap:wrap}
.an-tools{border-top:1px solid #143050;background:#061a31}

.an-btn{border:1px solid #1c3a55;background:#12283f;color:#e7eef5;border-radius:9px;
  padding:8px 12px;font:700 12px 'DM Sans',sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:background .15s,border-color .15s}
.an-btn:hover:not(:disabled){background:#173045;border-color:#22496a}
.an-btn:disabled{opacity:.4;cursor:default}
.an-btn.puesta{background:#e8eff7;border-color:#e8eff7;color:var(--navy)}
.an-btn.ancha{padding:8px 16px}
/* Los iconos de dentro de un botón van en <i> por poder esconder el rótulo sin
   tocarlos; la cursiva del navegador en una flecha no pinta nada. */
.an-btn i{font-style:normal}
.an-btn.clave{background:linear-gradient(135deg,var(--marca-verde),var(--marca-verde-2));
  border:0;color:var(--navy);font-weight:800}
.an-btn.clave:hover{filter:brightness(1.06)}
.an-btn.roja{color:#ffb4ba;border-color:#5b2027}
.an-btn.roja:hover:not(:disabled){background:#3a1418;border-color:#6b2129}
.an-btn:focus-visible,.an-color:focus-visible{outline:2px solid var(--marca-verde);outline-offset:2px}

.an-reloj{color:#9fb3c6;font:600 12px 'DM Sans',sans-serif;
  font-variant-numeric:tabular-nums;flex:none;min-width:88px;text-align:center}

/* La barra de tiempo se lleva el hueco que sobre; en un móvil estrecho baja a
   su propia fila entera en vez de quedarse en un canuto de 40 px. */
.an-barra{flex:1 1 160px;min-width:120px;accent-color:var(--marca-verde);height:26px}

.an-sep{width:1px;align-self:stretch;background:#143050;margin:0 3px}
.an-derecha{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.an-colores{display:flex;gap:6px;align-items:center}
.an-color{border:1px solid #1c3a55;background:#12283f;border-radius:9px;padding:6px;
  cursor:pointer;line-height:0}
.an-color i{display:block;width:17px;height:17px;border-radius:5px;
  box-shadow:0 0 0 1px #ffffff26 inset}
.an-color.puesta{border-color:#e8eff7;background:#1d3a58}

/* La barra de seguir se distingue de la de dibujar por el filo verde: son dos
   modos y el dedo hace cosas distintas en cada uno. Sin la señal, el entrenador
   toca al jugador creyendo que dibuja un foco. */
.an-sigue{border-top:2px solid var(--marca-verde);background:#07253a}
.an-sigue b{color:#eaf1f8;font:800 12px Manrope,sans-serif;min-width:34px;text-align:center}
.an-sigue-pista{margin:0;padding:9px 14px 0;color:#9fb3c6;font-size:11.5px;line-height:1.5}
.an-sigue-pista b{color:var(--marca-verde);font-weight:700}
/* Con la marca puesta el dedo no dibuja: coloca al jugador. */
.an-taller.siguiendo .an-video-wrap svg{cursor:cell}

.an-pie{color:#6f8398;font-size:11px;padding:0 14px 12px;line-height:1.5}

/* ---------- la fila de marcar y la jugada abierta ---------- */
.an-fila-marcar{padding-top:0}
.an-fila-marcar small{color:#7f93a6;font-size:11px}
/* Dentro de una jugada no se marca otra: el botón se va, y en su sitio manda la
   barra del clip. */
.an-taller.en-jugada .an-fila-marcar{display:none}

.an-clip{border-top:1px solid #143050;background:#08223f;padding:13px 14px 14px}
.an-clip-cab{margin-bottom:11px}
.an-clip-cab strong{display:block;font:700 15px Manrope,sans-serif;color:#eaf1f8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-clip-cab strong.sin{color:#6f8398;font-weight:600;font-style:italic}
.an-clip-cab small{display:block;color:#7f93a6;font-size:11px;margin-top:2px}

/* La línea de la jugada, con las pausas encima. Va justo debajo de la barra de
   tiempo y con su mismo ancho: las dos hablan del mismo clip. */
.an-clip-linea{position:relative;height:26px;margin-bottom:10px}
.an-clip-linea::before{content:'';position:absolute;left:0;right:0;top:11px;height:4px;
  border-radius:2px;background:#12406f}
/* LAS DOS CAPAS NO RECIBEN EL DEDO, SUS HIJOS SÍ. Las dos van a inset:0, así
   que la de encima —sea cual sea— tapa la línea entera y se queda los toques
   que iban para la de abajo. Costó que no se pudiera abrir una marca que sigue
   al jugador: el tramo estaba pintado, se veía, y el toque se lo comía un div
   transparente. Quien recibe es el botón, que es lo que se ve. */
.an-clip-pausas,.an-clip-vivas{position:absolute;inset:0;pointer-events:none}
.an-pausa,.an-viva{pointer-events:auto}

/* Un tramo y no una chapa: lo que dice de una marca que sigue al jugador es
   CUÁNTO dura y dónde empieza, y eso solo se ve de largo. */
/* EL BOTÓN ES LA LÍNEA ENTERA DE ALTO y la barra de color son 8 px pintados
   dentro. Una diana de 8 píxeles se falla con el dedo tantas veces que equivale
   a no poder tocarla; con los 26 de la línea se acierta a la primera y lo que
   se ve sigue siendo una barra fina. El color viaja en una variable y no en el
   fondo del botón: el fondo tiene que quedarse transparente para que la zona
   que sobra no se vea. */
.an-viva{position:absolute;top:0;height:26px;min-width:18px;border:0;padding:0;
  background:none;cursor:pointer;display:block}
.an-viva::before{content:'';position:absolute;left:0;right:0;top:9px;height:8px;
  border-radius:4px;background:var(--viva,var(--marca-verde));opacity:.75;
  box-shadow:0 0 0 2px #08223f}
.an-viva:hover::before,.an-viva.puesta::before{opacity:1}
.an-viva.puesta::before{box-shadow:0 0 0 2px #08223f,0 0 0 4px var(--viva,var(--marca-verde))}
.an-pausa{position:absolute;top:0;transform:translateX(-50%);
  width:22px;height:26px;border:0;background:none;cursor:pointer;padding:0;
  font:800 10px Manrope,sans-serif;color:var(--navy);display:grid;place-items:center}
.an-pausa::before{content:'';position:absolute;top:3px;width:20px;height:20px;
  border-radius:50%;background:#ffb020;box-shadow:0 0 0 2px #08223f}
.an-pausa.puesta::before{background:#fff;box-shadow:0 0 0 2px #08223f,0 0 0 4px #ffb020}
.an-pausa span,.an-pausa{position:absolute}
.an-pausa{z-index:1}

.an-clip-mandos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.an-clip-pie{margin:11px 0 0;color:#6f8398;font-size:11px;line-height:1.5}
.an-clip-pie b{color:#9fb3c6;font-weight:600}
.an-ventana{display:flex;align-items:center;gap:6px;flex:none}
.an-ventana b{color:#cfe0f0;font:700 12px 'DM Sans',sans-serif;min-width:46px;text-align:center;
  font-variant-numeric:tabular-nums}
.an-ventana .an-btn{padding:6px 11px;font-size:15px;line-height:1}

/* Mientras la jugada se reproduce seguida, los mandos de editar estorban: lo que
   se está haciendo es enseñar, no montar. */
.an-taller.reproduciendo .an-clip-mandos,
.an-taller.reproduciendo .an-mandos{opacity:.35;pointer-events:none}
.an-taller.reproduciendo .an-clip-mandos .an-derecha{opacity:1;pointer-events:auto}

/* ---------- la chuleta de atajos ---------- */
/* Solo donde hay un teclado de verdad. En un móvil sería una línea de ruido
   justo debajo del vídeo, que es el sitio más caro de la pantalla, y encima
   contando teclas que ese aparato no tiene. */
.an-atajos{display:none}
@media(hover:hover) and (pointer:fine){
  .an-atajos{display:block;margin:0;padding:0 14px 12px;color:#6f8398;
    font-size:11px;line-height:1.9}
  .an-atajos b{color:#9fb3c6;font-weight:600}
}
.an-atajos kbd{display:inline-block;border:1px solid #1c3a55;background:#12283f;
  border-radius:5px;padding:1px 6px;color:#cfe0f0;
  font:700 10.5px 'DM Sans',sans-serif;line-height:1.6}

/* ---------- el taller a pantalla completa ---------- */
/* EL MISMO CRITERIO QUE LA PIZARRA AMPLIADA, y por el mismo motivo: no se
   duplica nada. Es el taller de siempre sacado a position:fixed, con las barras
   recolocadas por `order`. Dibujar, mover, estirar y borrar siguen funcionando
   sin enterarse, porque son exactamente los mismos nodos con los mismos
   manejadores.

   Aquí la cuenta es más apretada que en la pizarra. Un móvil tumbado son 390 px
   de alto: el vídeo se lleva lo que dejen las barras, así que cada fila que
   sobra se le quita al fotograma. Por eso en pantalla completa se va lo que se
   usa UNA VEZ POR JUGADA —el título, la explicación, la ventana de ±, la
   portada, exportar, guardar y la lista de guardadas— y se queda lo que se toca
   en cada marca. Todo eso sigue estando a una tecla: se sale con A o con Esc. */
.an-taller.an-full{
  position:fixed;inset:0;z-index:55;margin:0;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;overflow:hidden;background:#04101f;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.an-full-on{overflow:hidden}
body.an-full-on .bottom-nav{display:none!important}

/* El vídeo primero y los mandos después: en la mano, el pulgar llega abajo. El
   min-height:0 es lo que deja que la escena ENCOJA cuando las barras envuelven;
   sin él, en una pantalla corta las barras se salen y no hay manera de tocarlas. */
.an-taller.an-full .an-escena{order:1;flex:1 1 0;min-height:0}
.an-taller.an-full .an-tools{order:2}
.an-taller.an-full .an-mandos{order:3;border-top:1px solid #143050}
.an-taller.an-full .an-fila-marcar{order:4;border-top:0;padding-top:0}
.an-taller.an-full .an-clip{order:5}
.an-taller.an-full .an-error{order:0;margin:8px 10px 0}

/* El marco NO se escala con CSS: lleva la proporción real del vídeo, y poniendo
   a la vez el ancho y el alto al 100 % esa proporción se anula y la marca se
   despega de la imagen. Lo mide analisis.js, como el campo ampliado de la
   pizarra. */
.an-taller.an-full .an-video-wrap{max-height:100%;margin:auto}

/* Lo que se usa una vez por jugada se va; lo que se toca en cada marca se queda. */
.an-taller.an-full .an-nombre,
.an-taller.an-full .an-pie,
.an-taller.an-full .an-atajos,
.an-taller.an-full .an-guardadas,
.an-taller.an-full .an-clip-cab,
.an-taller.an-full .an-clip-pie,
.an-taller.an-full .an-fila-marcar small,
.an-taller.an-full .an-clip .an-ventana,
.an-taller.an-full #anPortada,
.an-taller.an-full #anExportar,
.an-taller.an-full #anGuardar{display:none}
.an-taller.an-full .an-clip{border-top:1px solid #143050;padding:9px 10px 10px}
.an-taller.an-full .an-clip-linea{height:22px;margin-bottom:7px}

/* Las barras, apretadas: cada píxel que se lleva una fila se lo quita al
   fotograma, que es lo único que se está mirando. */
.an-taller.an-full .an-mandos,
.an-taller.an-full .an-tools{padding:7px 10px;gap:6px}
.an-taller.an-full .an-btn{padding:6px 10px}

/* Un móvil tumbado son 390 px de alto y ahí no sobra ni una fila. Las
   herramientas pasan a ser ICONOS, que es la misma decisión que ya se tomó en
   la barra de la pizarra ampliada por la misma razón. Los rótulos que se quedan
   son los de los mandos: un ⤡ suelto no dice "salir" en ningún idioma, y salir
   es lo que hay que encontrar sin pensar. */
@media(max-height:560px){
  .an-taller.an-full .an-tools .an-btn>span{display:none}
  .an-taller.an-full .an-tools .an-btn{padding:6px 9px}
  .an-taller.an-full .an-sigue-pista{display:none}
}
/* La pista de seguir se queda a pantalla completa mientras haya alto: no es
   adorno, es la cuenta de lo que llevas marcado y lo que falta. */
.an-taller.an-full .an-sigue-pista{order:2;padding:4px 10px 0;font-size:11px}

/* ---------- las jugadas guardadas ---------- */
.an-guardadas{border-top:1px solid #143050;padding:14px}
/* En la entrada la lista va sola y la primera, sin la tarjeta oscura del taller
   alrededor que la sostenga: se la pone ella. Es el mismo nodo, movido. */
.an-intro .an-guardadas{background:var(--navy-3);border:1px solid #143050;
  border-radius:var(--radio);box-shadow:var(--sombra-alta);margin:0 0 22px}
.an-g-pista{margin:-4px 0 10px;color:#7f93a6;font-size:12px;line-height:1.55;max-width:62ch}
.an-guardadas h3{margin:0 0 10px;font:800 13px Manrope,sans-serif;color:#eaf1f8;
  letter-spacing:.02em;display:flex;align-items:baseline;gap:8px}
.an-guardadas h3 span{font:600 10.5px 'DM Sans',sans-serif;color:#6f8398;letter-spacing:0}
.an-sin{margin:0;color:#7f93a6;font-size:12px;line-height:1.55}
.an-guardada{display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid #143050;border-radius:10px;background:#0d2a4a;
  padding:10px 11px;margin-bottom:7px;transition:border-color .15s,background .15s}
.an-guardada:hover{border-color:#22496a;background:#12325a}
.an-guardada.ajena{opacity:.6}
.an-g-txt{min-width:0;flex:1}
.an-g-txt strong{display:block;font:700 13px 'DM Sans',sans-serif;color:#eaf1f8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-g-txt small{display:block;color:#7f93a6;font-size:11px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El archivo que hace falta para abrirla. Va en su propia línea porque es lo
   que hay que leer antes de tocar, no un dato más de la ficha. */
.an-g-video{color:#8fb0cc}
.an-g-borrar{flex:none;border:1px solid #5b2027;background:transparent;color:#ffb4ba;
  border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:13px;line-height:1}
.an-g-borrar:hover{background:#3a1418}

/* ---------- el diálogo de la cartela ---------- */
#anTextoDialog .modal-box{max-width:420px}
#anTextoDialog input{width:100%;border:1px solid var(--line);border-radius:9px;
  padding:12px 13px;font:700 15px Manrope;text-transform:uppercase;letter-spacing:.02em}
.an-tam{display:flex;gap:8px;margin-top:12px}
.an-tam button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid var(--line);background:var(--white);border-radius:10px;
  padding:9px 6px 8px;cursor:pointer;color:var(--muted);
  transition:border-color .15s,background .15s,color .15s}
.an-tam button i{font-style:normal;font-family:'Barlow Condensed','Arial Narrow',Manrope,sans-serif;
  font-weight:800;line-height:1;color:var(--ink)}
.an-tam button:nth-child(1) i{font-size:14px}
.an-tam button:nth-child(2) i{font-size:19px}
.an-tam button:nth-child(3) i{font-size:25px}
.an-tam button:nth-child(4) i{font-size:32px}
.an-tam button span{font-size:10.5px;font-weight:600;letter-spacing:.02em}
/* La fila alta la marca la "A" grande; las tres cajas se igualan con ella para
   que los rótulos queden a la misma altura y no escalonados. */
.an-tam button{justify-content:flex-end;min-height:62px}
.an-tam button.puesta{border-color:var(--navy);background:var(--tinte);color:var(--navy)}
.an-tam button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.an-texto-pies{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}
.an-texto-nota{color:var(--muted);font-size:12px;margin:9px 0 0}

@media(max-width:680px){
  .an-paso{width:min(84vw,300px)}
  /* De borde a borde de la pantalla: contra el margen de 10px de la vista, la
     tarjeta siguiente no asomaba y no se veía que hubiera más. */
  .an-guia-pista{padding-inline:10px;margin-inline:-10px}
  .an-video-wrap{max-height:56vh}
  .an-mandos,.an-tools{padding:10px;gap:6px}
  /* La barra está pegada al vídeo, así que lo que ocupe de alto es lo que
     separa el fotograma del dedo. En un móvil son nueve botones, y con el
     tamaño de los mandos se iban a tres filas: apretándolos entran en dos, sin
     dejar de ser dianas que se tocan con el pulgar. */
  .an-tools{gap:5px}
  .an-tools .an-btn{padding:8px 9px;font-size:11px}
  .an-tools .an-derecha{gap:5px}
  .an-barra{flex-basis:100%;order:9}
  .an-sep{display:none}
  .an-derecha{margin-left:0;flex-basis:100%}
  .an-derecha .an-btn{flex:1}
  .an-reloj{min-width:76px;font-size:11px}
  /* El rótulo de ampliar se va y se queda el icono. En una fila de mandos de
     vídeo, ⤢ se entiende sin que nadie lo explique; y con la palabra puesta son
     tres botones a un tercio de ancho, que dejan "Quitar marcas y seguir" en
     tres líneas. Esa línea de más sale del hueco entre el fotograma y el dedo,
     que es lo caro de esta pantalla. */
  .an-mandos #anAmpliar{flex:0 0 auto}
  .an-mandos #anAmpliarNombre{display:none}
  .an-clip,.an-guardadas{padding:12px 10px}
  .an-clip-mandos .an-btn{flex:1}
  /* Los mandos de la ventana son dos signos, no dos botones anchos: si entran en
     el reparto de arriba, el − y el + se comen media fila. */
  .an-ventana{flex:1 0 100%;justify-content:center}
  .an-ventana .an-btn{flex:none;min-width:56px}
}