/* ==========================================================
   DECKA · INTERFAZ (el movimiento de los menús)
   El panel de equipo corre hacia el lado al cambiar de modelo,
   y las filas caen escalonadas detrás. Los tiempos son los de
   una consola: 260 ms de entrada, curva con un punto de rebote
   pequeño, y nada que dure lo bastante como para estorbar.
   ========================================================== */

@keyframes decka-corre-der{
  from{ opacity:0; transform:translate3d(38px,0,0) }
  60% { opacity:1; transform:translate3d(-4px,0,0) }
  to  { opacity:1; transform:none }
}
@keyframes decka-corre-izq{
  from{ opacity:0; transform:translate3d(-38px,0,0) }
  60% { opacity:1; transform:translate3d(4px,0,0) }
  to  { opacity:1; transform:none }
}
@keyframes decka-cae{
  from{ opacity:0; transform:translate3d(0,9px,0) }
  to  { opacity:1; transform:none }
}

.corre[data-desliza="der"]{ animation:decka-corre-der .26s cubic-bezier(.22,.9,.28,1) both }
.corre[data-desliza="izq"]{ animation:decka-corre-izq .26s cubic-bezier(.22,.9,.28,1) both }
.corre > *{ animation:decka-cae .3s cubic-bezier(.22,.9,.28,1) both;
            animation-delay:var(--retardo,0ms) }

/* la pestaña elegida: el subrayado se desliza, no salta */
.eq-pes{ position:relative }
.eq-pes button{ position:relative; transition:color .16s ease }
.eq-pes button::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px;
  border-radius:2px; background:var(--hielo,#7FD4FF);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .22s cubic-bezier(.22,.9,.28,1);
}
.eq-pes button[aria-selected="true"]::after{ transform:scaleX(1) }

/* el pulso de la consola: al pulsar, el botón se hunde un pelo
   y suelta un halo que se expande. Sin JavaScript. */
button:active, .mini:active, .btn:active, [role="button"]:active{
  transform:translateY(.5px) scale(.988);
}
button, .mini, .btn{ transition:transform .09s ease, border-color .16s ease, color .16s ease }

@media (prefers-reduced-motion: reduce){
  .corre, .corre > *{ animation:none !important }
  button:active, .mini:active, .btn:active{ transform:none }
}

/* interruptor del sonido de la interfaz */
.ui-sonido{ display:inline-flex; align-items:center; gap:6px }
.ui-sonido[data-on="0"]{ opacity:.55 }