/* PUENTE · la sesión de práctica.
   Registro de PRODUCTO: el diseño sirve a la tarea, no se luce. Escala fija en
   rem (no `clamp`): el chico usa esto siempre en el mismo aparato y una tipografía
   que se estira según el ancho se ve peor, no mejor. Transiciones de 150-250 ms:
   está en flujo, no quiere ver coreografías.

   Tres cosas que NO están aquí a propósito:
     · barras laterales de color como acento — la pista lleva fondo tintado y un
       signo, no un `border-left` de 3 px;
     · ningún modal — la corrección EMPUJA el contenido hacia abajo, porque un
       modal se cierra sin leerse y aquí lo que hay que leer es justamente eso;
     · ningún estilo en línea desde JS: la CSP es `style-src 'self'` y queda
       bloqueado EN SILENCIO. Los anchos van por clases .w0…w100 de tokens.css. */

/* ── capas de celebración ────────────────────────────────────────────────── */
.capa-fondo{position:fixed;inset:0;pointer-events:none;z-index:0}
.capa-frente{position:fixed;inset:0;pointer-events:none;z-index:60}
.env{position:relative;z-index:1;max-width:56rem;margin:0 auto;padding:1.5rem 1.25rem 5rem}

/* ── tipos ───────────────────────────────────────────────────────────────── */
h1{font-size:3.25rem;line-height:1.02;margin:.4rem 0 0;color:var(--navy);font-weight:800}
h2{font-size:1.75rem;line-height:1.15;margin:0 0 .35rem;font-weight:800}
.lema{font-size:1.0625rem;color:var(--tinta-2);margin:.75rem 0 2rem;max-width:34ch;
  margin-inline:auto}
.lema b{color:var(--tinta);font-weight:600}
.sub{color:var(--tinta-2);margin:0 0 1.25rem;max-width:62ch}
.chico{font-size:.8125rem;color:var(--tinta-3);line-height:1.5;margin:1rem 0 0;max-width:44ch;
  margin-inline:auto}
.chico b{color:var(--tinta-2);font-weight:600}
.centro{text-align:center}
.nota{font-size:.875rem;color:var(--tinta-3);line-height:1.55;margin:1rem .25rem 0;max-width:66ch}
.nota b{color:var(--tinta-2)}

/* ── entrada ─────────────────────────────────────────────────────────────── */
#p-entrada{padding-top:3rem}
.marca{display:block;margin:0 auto;height:auto;max-width:60vw}
.caja{max-width:24rem;margin:2rem auto 0;text-align:left;background:var(--panel);
  border:1px solid var(--linea);border-radius:var(--r);padding:1.5rem;box-shadow:var(--sombra)}
label{display:block;font-size:.8125rem;font-weight:600;color:var(--tinta-2);margin:0 0 .4rem}
input[type=text]{width:100%;padding:.75rem .875rem;font:inherit;color:var(--tinta);
  background:var(--panel-2);border:1.5px solid var(--linea-2);border-radius:var(--r-s);
  transition:border-color .16s ease,background .16s ease}
input[type=text]::placeholder{color:var(--tinta-3)}
input[type=text]:hover{border-color:var(--tinta-4)}
input[type=text]:focus{background:var(--panel);border-color:var(--azul);outline:none}
#caja-clave{margin-top:.9rem}
input[type=password]{width:100%;padding:.75rem .875rem;font:inherit;color:var(--tinta);
  background:var(--panel-2);border:1.5px solid var(--linea-2);border-radius:var(--r-s);
  letter-spacing:.12em;transition:border-color .16s ease,background .16s ease}
input[type=password]::placeholder{color:var(--tinta-3);letter-spacing:normal}
input[type=password]:hover{border-color:var(--tinta-4)}
input[type=password]:focus{background:var(--panel);border-color:var(--azul);outline:none}
.msg-error{color:var(--error);font-size:.875rem;margin:.6rem 0 0;font-weight:500}

/* ── botones: default, hover, focus, active, disabled ───────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tactil);padding:0 1.375rem;border:1.5px solid var(--azul);
  background:var(--azul);color:#fff;font-weight:650;font-size:1rem;border-radius:var(--r-s);
  transition:background .16s ease,border-color .16s ease,transform .1s ease}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--linea);border-color:var(--linea-2);color:var(--tinta-4);
  cursor:not-allowed;transform:none}
.btn.grande{width:100%;margin-top:1rem;font-size:1.0625rem}
.btn.fantasma{background:transparent;color:var(--azul);border-color:var(--linea-2)}
.btn.fantasma:hover{background:var(--panel-2);border-color:var(--azul);color:var(--navy)}
.btn.ok{background:var(--acierto);border-color:var(--acierto)}
.btn.ok:hover{background:var(--verde-txt);border-color:var(--verde-txt)}

.son-btn{position:fixed;right:1rem;bottom:1rem;z-index:70;min-height:auto;
  padding:.45rem .85rem;font-size:.75rem;font-weight:600;color:var(--tinta-2);
  background:var(--panel);border:1px solid var(--linea-2);border-radius:999px;
  box-shadow:var(--sombra);transition:color .16s ease,border-color .16s ease}
.son-btn:hover{color:var(--navy);border-color:var(--azul)}
.son-btn[aria-pressed="true"]{color:var(--tinta-4)}

/* ── la sesión ───────────────────────────────────────────────────────────── */
.sesion{position:relative;background:var(--juego);border:1px solid var(--linea);
  border-radius:var(--r);box-shadow:var(--sombra-alta);overflow:visible}
.cab{display:flex;align-items:center;gap:.9rem;padding:.85rem 1.15rem;
  border-bottom:1px solid var(--linea);background:var(--panel);
  border-radius:var(--r) var(--r) 0 0}
.arco-chico{flex:0 0 2.25rem;line-height:0}
.barra{flex:1;height:.6rem;background:var(--linea);border-radius:999px;overflow:hidden}
/* El avance va por CLASE, no por --av ni por style.width: la CSP bloquea el
   estilo en línea en silencio, y animar `width` obliga a recalcular la
   maquetación en cada fotograma. `scaleX` lo compone la GPU. */
.barra i{display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--azul),var(--verde));
  transform-origin:left;transform:scaleX(0);
  transition:transform .35s cubic-bezier(.22,.75,.3,1)}
.barra i.a0{transform:scaleX(0)}      .barra i.a10{transform:scaleX(.1)}
.barra i.a17{transform:scaleX(.17)}   .barra i.a20{transform:scaleX(.2)}
.barra i.a25{transform:scaleX(.25)}   .barra i.a33{transform:scaleX(.33)}
.barra i.a40{transform:scaleX(.4)}    .barra i.a50{transform:scaleX(.5)}
.barra i.a60{transform:scaleX(.6)}    .barra i.a67{transform:scaleX(.67)}
.barra i.a75{transform:scaleX(.75)}   .barra i.a80{transform:scaleX(.8)}
.barra i.a83{transform:scaleX(.83)}   .barra i.a90{transform:scaleX(.9)}
.barra i.a100{transform:scaleX(1)}
.xp-total{font-size:.8125rem;font-weight:700;color:var(--tinta-2);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.cuerpo{display:grid;grid-template-columns:5.5rem 1fr;gap:1.25rem;padding:1.4rem 1.25rem 1.35rem}
.col-arco{line-height:0}
.meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 .55rem}
.rotulo{font-size:.75rem;font-weight:700;color:var(--azul);background:var(--panel);
  border:1px solid var(--linea-2);border-radius:999px;padding:.2rem .6rem}
.hab{font-size:.8125rem;color:var(--tinta-3)}
.enun{font-size:1.3125rem;line-height:1.42;font-weight:500;margin:0 0 1.1rem}
.enun em{font-style:normal;background:var(--panel);border:1px dashed var(--linea-2);
  border-radius:.25rem;padding:.05em .9em}

.ops{display:grid;gap:.6rem}
.op{position:relative;display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
  min-height:var(--tactil);padding:.7rem 1rem;background:var(--panel);
  border:2px solid var(--linea-2);border-radius:var(--r-s);color:var(--tinta);
  font-size:1.0625rem;font-weight:500;
  transition:border-color .16s ease,background .16s ease,transform .1s ease}
.op:hover:not(:disabled){border-color:var(--azul);background:var(--panel-2)}
.op:active:not(:disabled){transform:scale(.99)}
.op:disabled{cursor:default}
.op .k{flex:0 0 1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:.375rem;
  background:var(--panel-2);border:1px solid var(--linea-2);font-size:.75rem;font-weight:800;
  color:var(--tinta-3);transition:background .16s ease,color .16s ease}
.op.bien{border-color:var(--acierto);background:var(--acierto-bg)}
.op.bien .k{background:var(--acierto);border-color:var(--acierto);color:#fff}
.op.mal{border-color:var(--error);background:var(--error-bg);animation:sacude .28s cubic-bezier(.36,.07,.19,.97)}
.op.mal .k{background:var(--error);border-color:var(--error);color:#fff}
.op.era{border-color:var(--acierto);border-style:dashed}
@keyframes sacude{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}
  60%{transform:translateX(4px)}85%{transform:translateX(-2px)}}

/* el +XP se ancla DENTRO de la opción que lo ganó: la recompensa pertenece a
   la cosa lograda, y así no hace falta posicionarla con estilo en línea */
.xp{position:absolute;right:1rem;top:.4rem;font-family:"Bricolage Grotesque",Inter,sans-serif;
  font-weight:800;font-size:1.375rem;color:var(--verde-txt);pointer-events:none;
  animation:subeXP 1.1s cubic-bezier(.22,.9,.3,1) forwards}
@keyframes subeXP{0%{opacity:0;transform:translateY(6px) scale(.7)}
  22%{opacity:1;transform:translateY(-6px) scale(1.12)}
  100%{opacity:0;transform:translateY(-3.25rem) scale(1)}}

/* ── pista: fondo tintado y un signo, NO una barra lateral de color ───────── */
/* Se abre con grid-template-rows 0fr→1fr, no con max-height ni padding: animar
   una medida de caja obliga a recalcular la maquetación en cada fotograma. */
.pista{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .22s cubic-bezier(.22,.75,.3,1)}
.pista.abre{grid-template-rows:1fr;margin-top:.9rem}
.pista>span{overflow:hidden;display:block}
.pista.abre>span{padding:.75rem 1rem;border-radius:var(--r-s);
  background:var(--panel-2);border:1px solid var(--linea-2);font-size:.9375rem;color:var(--tinta-2)}
.pista.abre>span::before{content:"?";display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;
  margin-right:.5rem;border-radius:50%;background:var(--oro);color:#2A1A00;
  font-weight:800;font-size:.75rem;vertical-align:-.2rem}

/* ── corrección: acordeón que EMPUJA ─────────────────────────────────────── */
.corr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.22,.75,.3,1)}
.corr.abre{grid-template-rows:1fr}
.corr>div{overflow:hidden}
.corr-in{margin-top:1rem;padding:1rem 1.1rem;border-radius:var(--r-s);border:1px solid var(--linea)}
.corr-in.bien{background:var(--acierto-bg);border-color:var(--acierto)}
.corr-in.mal{background:var(--error-bg);border-color:var(--error)}
.veredicto{display:flex;align-items:center;gap:.45rem;font-size:.9375rem;font-weight:700;margin:0 0 .5rem}
.corr-in.bien .veredicto{color:var(--acierto)}
.corr-in.mal .veredicto{color:var(--error)}
.veredicto::before{content:"";width:1.125rem;height:1.125rem;border-radius:50%;flex:0 0 auto;
  background:currentColor;opacity:.22}
.tuya{font-size:.9375rem;margin:0 0 .2rem;color:var(--tinta-2)}
.tuya s{color:var(--error);text-decoration-thickness:1.5px}
.tuya:empty{display:none}
.buena{font-size:1.0625rem;font-weight:650;color:var(--acierto);margin:0 0 .55rem}
.por{font-size:.9375rem;line-height:1.55;color:var(--tinta);margin:0}
.por b{font-weight:650}
.fig-corr:empty{display:none}
.fig-corr{margin-top:.9rem}

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

/* ── racha ───────────────────────────────────────────────────────────────── */
/* El rebote de aquí abajo es deliberado y es la única familia que lo lleva: la
   racha y su latido son la RECOMPENSA, y el sobrepaso es lo que la hace sentir
   ganada. Encargo explícito de Hidalgo («métele más dopamina»). Fuera de estos
   dos sitios, todo usa curvas exponenciales sin rebote. */
.racha{position:absolute;top:-.7rem;right:1rem;margin:0;display:inline-flex;align-items:center;
  gap:.4rem;background:var(--oro);color:#2A1A00;font-weight:800;font-size:.8125rem;
  padding:.3rem .8rem;border-radius:999px;box-shadow:0 .35rem 1rem -.35rem rgba(221,152,23,.7);
  opacity:0;transform:scale(.7) translateY(4px);
  transition:opacity .2s ease,transform .2s cubic-bezier(.3,1.5,.5,1)}
.racha.on{opacity:1;transform:none}
.racha.late{animation:rachaLate .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes rachaLate{0%,100%{transform:none}38%{transform:scale(1.22) rotate(-3deg)}}

/* resplandor detrás de la tarjeta que celebra */
.sesion.brilla::before,.tarjeta.brilla::before{content:"";position:absolute;inset:-1.75rem;
  border-radius:2rem;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(221,152,23,.32),transparent 72%);
  animation:resplandor 1.4s ease-out forwards}
@keyframes resplandor{0%{opacity:0;transform:scale(.75)}28%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.14)}}

/* ── figuras ─────────────────────────────────────────────────────────────── */
.fig{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-s);
  padding:1.1rem 1.15rem;margin:0 0 1.1rem}
.fig svg{overflow:visible}
.fig figure{margin:0;display:flex;flex-direction:column;align-items:center}
.fig figcaption{font-size:.75rem;color:var(--tinta-3);text-align:center;margin-top:.45rem;font-weight:600}
.sig-nota{font-size:1rem;max-width:12rem;text-align:left;color:var(--tinta-2);font-weight:600;
  font-family:Inter,sans-serif;line-height:1.45}
.fig .sig{font-family:"Bricolage Grotesque",Inter,sans-serif;font-size:1.75rem;font-weight:800;
  color:var(--tinta-3)}
/* Contenido que aparece, no premio que se celebra: entra con una curva
   exponencial y sin pasarse del destino. El rebote se reserva para lo que
   PREMIA algo, que es lo único que puede permitírselo. */
.porcion{transform-origin:center;transform-box:fill-box;opacity:0;
  animation:entraPorcion .38s cubic-bezier(.16,1,.3,1) forwards}
@keyframes entraPorcion{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.celda-g{opacity:0;animation:entraPorcion .26s ease-out forwards}
/* Los retardos van por CLASE. `style="animation-delay:…"` lo bloquea la CSP
   `style-src 'self'` EN SILENCIO: las piezas entraban todas de golpe y no había
   forma de notarlo salvo mirando la consola. Lo cazó el QA de navegador. */
.r0{animation-delay:0.000s}
.r1{animation-delay:0.055s}
.r2{animation-delay:0.110s}
.r3{animation-delay:0.165s}
.r4{animation-delay:0.220s}
.r5{animation-delay:0.275s}
.r6{animation-delay:0.330s}
.r7{animation-delay:0.385s}
.r8{animation-delay:0.440s}
.r9{animation-delay:0.495s}
.r10{animation-delay:0.550s}
.r11{animation-delay:0.605s}
.r12{animation-delay:0.660s}
.r13{animation-delay:0.715s}
.r14{animation-delay:0.770s}
.r15{animation-delay:0.825s}
.r16{animation-delay:0.880s}
.r17{animation-delay:0.935s}
.r18{animation-delay:0.990s}
.r19{animation-delay:1.045s}
.r20{animation-delay:1.100s}
.r21{animation-delay:1.155s}
.r22{animation-delay:1.210s}
.r23{animation-delay:1.265s}
/* dasharray fijo: 4 lados × 150 px del cuadro de la figura */
.borde-anim{stroke-dasharray:600;stroke-dashoffset:600;animation:dibuja 1s ease-out forwards .2s}
@keyframes dibuja{to{stroke-dashoffset:0}}
.frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;
  vertical-align:middle;font-weight:700}
.frac .num{padding:0 .2rem}
.frac .den{padding:0 .2rem;border-top:2px solid currentColor;margin-top:.1rem}

/* ── por qué te toca esto hoy ─────────────────────────────────────────────
   Un sistema adaptativo que no puede explicar su decisión es indistinguible de
   uno roto. La frase va DENTRO de la sesión, arriba del todo, no escondida en
   un menú: es lo primero que el chico debería poder discutir. */
.porque{margin:0;padding:.7rem 1.15rem;font-size:.875rem;line-height:1.45;
  color:var(--tinta-2);background:var(--panel);border-bottom:1px solid var(--linea);
  border-radius:var(--r) var(--r) 0 0}
.porque b{color:var(--navy);font-weight:650}
.porque+.cab{border-radius:0}

/* ── aviso de borrador ───────────────────────────────────────────────────
   No es decorativo: mientras el banco no lo firme un docente, la pantalla lo
   dice. Un aviso que solo vive en un documento no lo lee nadie. */
.aviso-borrador{max-width:36rem;margin:0 auto 1.25rem;padding:.7rem 1rem;text-align:center;
  font-size:.8125rem;color:var(--atencion);background:var(--panel);
  border:1px solid color-mix(in srgb,var(--atencion) 40%,transparent);border-radius:var(--r-s)}

/* ── resultado ───────────────────────────────────────────────────────────── */
.tarjeta{position:relative;background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);box-shadow:var(--sombra);padding:2rem 1.75rem}
.arco-fin{line-height:0;display:flex;justify-content:center;margin-bottom:.75rem}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-s);
  overflow:hidden;margin:1.25rem 0}
.cifras>div{background:var(--panel);padding:.9rem .75rem}
.cifras dt{font-size:.75rem;color:var(--tinta-3);font-weight:600;margin:0}
.cifras dd{font-family:"Bricolage Grotesque",Inter,sans-serif;font-size:1.75rem;font-weight:800;
  margin:.2rem 0 0;line-height:1;color:var(--tinta)}
.cifras dd.alerta{color:var(--atencion)}
.patron{text-align:left;border:1px solid var(--linea);border-radius:var(--r-s);
  background:var(--panel-2);padding:.9rem 1rem;margin-bottom:.6rem}
.patron .cab-p{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem}
.patron b{font-size:1rem}
.patron .veces{font-size:.6875rem;font-weight:800;color:var(--atencion);
  border:1px solid var(--atencion);border-radius:999px;padding:.1rem .5rem}
.patron .ej{display:grid;gap:.15rem;font-size:.9375rem;margin-top:.35rem}
.patron .ej .mal{color:var(--error);text-decoration:line-through;text-decoration-thickness:1.5px}
.patron .ej .bien{color:var(--acierto)}
.vacio{color:var(--tinta-3);font-size:.9375rem;text-align:left;margin:0 0 1rem}

@media (max-width:34rem){
  .cuerpo{grid-template-columns:1fr;gap:.25rem;padding:1.1rem 1rem}
  .col-arco{width:4.5rem}
  h1{font-size:2.5rem}
  .enun{font-size:1.1875rem}
  .env{padding:1rem .875rem 4.5rem}
}

/* ── EL MAPA DEL PUENTE ────────────────────────────────────────────────────
   Solo late el nodo que toca. Un mapa con cinco cosas pulsando no señala nada,
   y el chico deja de mirar todas. */
.mapa-caja{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra);padding:.5rem .5rem 0;overflow-x:auto;margin-bottom:.9rem}
.svg-mapa{min-width:44rem;display:block}
.pilar{stroke:var(--linea);stroke-width:2.5;stroke-linecap:round}
.tablero{stroke:var(--linea-2);stroke-width:3;stroke-linecap:round}
.tramo{fill:none;stroke:var(--linea-2);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 8}
.tramo.hecho{stroke:url(#tramo);stroke-width:6;stroke-dasharray:none}
.nodo{cursor:pointer}
.nodo .base{stroke-width:3;transition:transform .22s cubic-bezier(.16,1,.3,1);
  transform-box:fill-box;transform-origin:center}
.nodo .aro{fill:none;stroke:none}
.nodo:hover .base,.nodo:focus-visible .base{transform:scale(1.12)}
.nodo .rot{font-family:Inter,sans-serif;font-size:11px;font-weight:600;fill:var(--tinta-2);
  paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
.n-dominado .base{fill:var(--verde);stroke:var(--verde)}
.n-en_ritmo .base{fill:var(--azul);stroke:var(--azul)}
.n-fragil   .base{fill:var(--panel);stroke:var(--atencion);stroke-width:4}
.n-disponible .base{fill:var(--panel);stroke:var(--azul)}
.n-bloqueado{color:var(--tinta-4)}
.n-bloqueado .base{fill:var(--panel-2);stroke:var(--linea-2)}
.n-bloqueado .rot{fill:var(--tinta-4)}
.nodo.late .base{fill:var(--oro);stroke:var(--oro);animation:late 2.4s ease-in-out infinite}
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.nodo.sacude{animation:sacudeN .3s cubic-bezier(.36,.07,.19,.97)}
@keyframes sacudeN{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}
  60%{transform:translateX(4px)}85%{transform:translateX(-2px)}}
.mapa-pie{display:flex;gap:.5rem 1.1rem;flex-wrap:wrap;align-items:center;
  padding:.35rem .6rem .7rem;font-size:.75rem;color:var(--tinta-3)}
.mapa-pie i{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;
  margin-right:.35rem;vertical-align:-.05rem}
.mapa-dice{font-size:.875rem;line-height:1.5;color:var(--tinta-2);margin:0 0 1rem;
  min-height:1.4rem}
.mapa-dice b{color:var(--navy);font-weight:650}
.mapa-dice.bloqueo b{color:var(--atencion)}
.tabs{display:flex;gap:.4rem;margin:0 0 .8rem}
.tab{min-height:2.4rem;padding:0 1rem;font-size:.9375rem;font-weight:600;border-radius:999px;
  border:1.5px solid var(--linea-2);background:var(--panel);color:var(--tinta-2);
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.tab:hover{border-color:var(--azul);color:var(--navy)}
.tab[aria-selected="true"]{background:var(--azul);border-color:var(--azul);color:#fff}

.tit-mapa h2{margin:0 0 .25rem}
.tit-mapa .sub{margin:0 0 1rem}
.pi-dom{background:var(--verde)}
.pi-rit{background:var(--azul)}
.pi-sin{background:var(--panel);border:2px solid var(--azul)}
.pi-fra{background:var(--panel);border:2px solid var(--atencion)}
.pi-toca{background:var(--oro)}
.pi-blo{background:var(--panel-2);border:1px solid var(--linea-2)}
.controles-fin{display:grid;gap:.6rem;margin-top:1rem}