/* Formularios (unidad B2): estados de envío, validación y confirmación. */

/* B-04 · Enviando: el botón conserva ancho y color; un hilo de tinta corre por su borde inferior */
.boton.ocupado { position: relative; overflow: clip; }
@media (prefers-reduced-motion: no-preference) {
  /* currentColor: marfil en el botón lleno, terracota en el de contorno */
  .boton.ocupado::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .7; animation: hilo 1.2s var(--pluma) infinite; }
}
@keyframes hilo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* B-06 · Odómetro: cada dígito en su ranura. La ventana abraza la cifra (tinta entre .18 y .83 em) y conserva el
   renglón de 1 em con el margen; el ancho sale de las cifras tabulares y no cambia al rodar */
.contador b .dig { display: inline-grid; align-content: center; height: .76em; margin: .12em 0; overflow: clip; vertical-align: top; }
.contador b .dig, .contador b .dig-v { font-size: inherit; font-style: normal; color: inherit; }
.contador b .dig-v, .selector-num output > span { grid-area: 1 / 1; margin: 0; }
/* La cifra que rueda llega en data-n (cifra() de interacciones.js) y se pinta aquí; sin esta regla la ranura quedaba en blanco */
.contador b .dig-v[data-n]::before { content: attr(data-n); }

/* B-07 · Selector que rueda */
.selector-num output { display: inline-grid; justify-items: center; overflow: clip; }
.selector-num button[aria-disabled="true"] { opacity: .35; }