/* TODO LO QUE SE PULSA ACUSA RECIBO EN EL MISMO FOTOGRAMA, Y LO HACE IGUAL EN TODAS PARTES.
 *
 * Un botón que parece muerto se pulsa dos veces, y eso es peor que uno lento: son dos fichajes,
 * dos correcciones o dos descargas. El acuse no es decoración — es lo que impide el segundo toque.
 *
 * NO HAY NI UN COLOR NUEVO AQUÍ, y es deliberado. El vocabulario ya estaba escrito en la fase 4 y
 * probado a 7:1: la tecla del mural INVIERTE ENTERA al pulsarse (docs/07-diseno.md 4.3), y el
 * panel ya invertía al pasar el ratón. Esto es esa misma frase dicha en todos los sitios donde se
 * pulsa, no una idea nueva — y por eso `test/contrast.test.js` sigue diciendo lo mismo.
 *
 * Y OJO CON `.accio`, QUE ES DOS COSAS: en el panel es un botón, y en el mural es el párrafo de
 * 96 px que dice ENTRADA (mural.css). Por eso aquí se escribe `button.accio` y nunca `.accio` a
 * secas — si no, pulsar en cualquier sitio de la pantalla de confirmación invertiría ese titular
 * con los colores del panel. Es la misma forma que `removeDefaultSheet_`: un nombre visible
 * comparado contra otra cosa que se llama igual.
 *
 * Un solo fichero, y ese es el punto. Si cada pantalla resuelve su propio acuse, en tres meses hay
 * cuatro formas distintas de decir «te he oído».
 */

/* --- 1 · El acuse, inmediato ------------------------------------------------------------- */

/* `--durada-toc` está elegida con este motivo escrito al lado: 120 ms, «por debajo de ~100 ms se
 * lee como instantáneo, y esto NO QUIERE ser instantáneo: quiere decir te he oído». */
button.accio,
.pestanya,
.cosa__accions button {
  transition:
    background var(--durada-toc) linear,
    color var(--durada-toc) linear,
    opacity var(--durada-toc) linear;
}

/* `:active` para el ratón y `[data-premuda]` para el dedo, que es el par que la tecla ya usaba.
 * El táctil no tiene `:active` fiable: llega tarde o no llega, y llegar tarde es no llegar. */
button.accio:active,
button.accio[data-premuda],
.cosa__accions button:active,
.cosa__accions button[data-premuda] {
  background: var(--doc-tinta);
  color: var(--doc-fons);
  /* Sin transición AL ENTRAR: el acuse es el fotograma siguiente al dedo, no 120 ms después.
   * Los 120 ms son para SALIR, que es donde se lee como respuesta y no como parpadeo. */
  transition: none;
}

/* --- 1-bis · Y el mural y el móvil, que es donde se ficha ---------------------------------- */

/* CUATRO CLASES NO TENÍAN NINGÚN ESTADO DE PULSADO: `.placa`, `.secundari`, `.resposta` y
 * `.idioma`. Entre ellas está EL BOTÓN DE FICHAR, que es el único que toca la mayoría de la
 * plantilla — y el único cuyo segundo toque escribe una fila que no se puede borrar.
 *
 * El pulsado del mural ya estaba escrito y aprendido: la tecla INVIERTE ENTERA con
 * `--premut-fons` / `--premut-tinta` (styles.css, docs/07-diseno.md 4.3). Aquí se dice esa misma
 * frase en el resto de lo que se pulsa, con esos dos tokens y no con otros dos.
 *
 * NO se invierte cada placa contra su propio par —verde sobre tinta, tinta sobre verde—, que era
 * lo primero que se probó: durante 120 ms el «Sí» del acuse se veía igual que el «No», y un botón
 * que al pulsarlo se parece a OTRO botón no acusa recibo, informa mal. Un solo aspecto de pulsado
 * en todo el aparato, el que la tecla ya enseñó. */
.placa:not(.placa--mostra):active,
.placa:not(.placa--mostra)[data-premuda],
.resposta:active,
.resposta[data-premuda] {
  background: var(--premut-fons);
  color: var(--premut-tinta);
  transition: none;
}

/* La placa de salida lleva filete propio, medido a 7,57:1 contra el acero para separarla del
 * fondo. Invertida, ese filete se queda en un rojo oscuro sobre claro: se mantiene visible con la
 * tinta del pulsado, que es el mismo par ya medido. */
.placa--sortida:active,
.placa--sortida[data-premuda] { border-color: var(--premut-tinta); }

/* Texto subrayado, no bloque. Aquí invertir sería pintar un rectángulo donde hay una frase, así
 * que el acuse es el de la casa para un texto: sube de peso de tinta. Sin color nuevo. */
.secundari:active,
.secundari[data-premuda],
.idioma:active,
.idioma[data-premuda] { color: var(--tinta); transition: none; }

.placa, .resposta, .secundari, .idioma {
  transition: background var(--durada-toc) linear, color var(--durada-toc) linear;
}

/* Y la placa conserva su propia transición de llegada, que es el sello de 220 ms de 8.6: una
 * declaración entera de `transition` aquí la habría borrado sin que nadie lo notara, porque lo
 * que se pierde es una animación que ya no se dispara. */
.placa { transition: background var(--durada-toc) linear, color var(--durada-toc) linear,
                     transform var(--durada-segell) var(--corba-arriba); }

/* --- 2 · Hover solo donde hay puntero ----------------------------------------------------- */

/* El mural es una pantalla atornillada a una pared y no tiene ratón. Un `:hover` ahí se queda
 * pegado después de tocar —el navegador lo simula— y deja un botón encendido que nadie está
 * tocando: un estado falso, que es justo lo que este fichero viene a evitar. */
@media (hover: hover) and (pointer: fine) {
  button.accio:hover { background: var(--doc-tinta); color: var(--doc-fons); }
  button.accio[disabled]:hover { background: none; color: var(--doc-tinta-suau); }
  .pestanya:hover { color: var(--doc-tinta); }
  /* El móvil abierto en un portátil sí tiene puntero, y sus enlaces viven dentro de una frase. */
  .secundari:hover, .idioma:hover { color: var(--tinta); }
}

/* Y LAS PLACAS NO LLEVAN HOVER, NI SIQUIERA CON PUNTERO, y se declara aquí para que pueda dejar
 * de ser así. El hover sirve para decir «de todo esto, el puntero está sobre ESTO»; una placa de
 * 168 px es lo único que hay en su pantalla, así que no distingue nada — y encenderla al pasar
 * por encima la haría parecer pulsada sin que nadie la haya pulsado. */

/* --- 3 · En marcha ------------------------------------------------------------------------ */

/* Cuando la acción tarda, el botón lo dice EN SU SITIO. No un disco girando en medio de la
 * pantalla: eso mueve la mirada fuera de donde está el dedo y no dice qué está tardando.
 *
 * Y no se puede volver a pulsar — que es la mitad que importa. `pointer-events: none` y no solo
 * `disabled`, porque un `disabled` puesto tarde ya ha dejado pasar el segundo toque.
 *
 * DOS ESTADOS Y NO UNO, y la diferencia es de tiempo. `[data-marxa]` lo pone `press()` sin ceder
 * el hilo, así que llega en el mismo fotograma y es lo que BLOQUEA. `esperant` lo pone un
 * temporizador a los 140 ms y es lo único que SE VE.
 *
 * Escribirlo en un solo atributo fue el primer intento y estaba mal: casi todo lo que se pulsa
 * en el panel contesta antes de esos 140 ms, así que el botón se apagaba y se encendía en 60 ms
 * —un parpadeo que se lee como un fallo de la pantalla— y el comentario de `premsa.js` prometía
 * justamente lo contrario de lo que hacía el CSS. */
button.accio[data-marxa],
.cosa__accions button[data-marxa],
.placa[data-marxa],
.resposta[data-marxa],
.secundari[data-marxa],
.idioma[data-marxa],
.pestanya[data-marxa] {
  pointer-events: none;
}

/* El único movimiento continuo del producto, y dura lo que dura una espera. Solo `opacity`:
 * la regla de la fase 7.5 es que el contenedor no se mueve nunca, y un botón que late de
 * tamaño empuja lo que tiene al lado. */
@keyframes esperant {
  0%, 100% { opacity: .55; }
  50%      { opacity: .80; }
}

/* Y NO SOBRE UNA PLACA DEL MURAL, que es donde el atenuado sale caro.
 *
 * La opacidad compone el botón entero contra el fondo, así que atenuar una placa acerca al acero
 * tanto el verde como su tinta: el par está medido a 7:1 y esto lo baja sin que `contrast.test.js`
 * pueda verlo, porque ese guardián lee `tokens.css` y esto no es un token. Un suelo AAA no se
 * pierde por una decisión: se pierde por una regla escrita en otro sitio.
 *
 * Y no hace falta: el mural YA tiene su espera, y es una pantalla entera —`renderChecking`, con
 * el nombre, la hora y «comprovant»—. El atenuado es para los controles pequeños del panel y del
 * móvil, donde no hay pantalla que cambiar. Ahí la placa se queda igual, y bloqueada. */
.esperant:not(.placa):not(.resposta) {
  opacity: .55;
  animation: esperant 1.2s var(--corba-arriba) infinite;
}

/* --- 4 · Y quien pidió que nada se mueva, no ve nada moverse ------------------------------ */

/* `prefers-reduced-motion` ya pone las tres duraciones a cero en tokens.css. Aquí se retira
 * además la animación — pero NO el estado: el botón sigue apagándose y sigue sin dejarse
 * pulsar. Reducir el movimiento no puede reducir la información. */
@media (prefers-reduced-motion: reduce) {
  .esperant:not(.placa):not(.resposta) { animation: none; opacity: .55; }
}