/* Respuesta al toque en toda la app (Guille, 18/08/2026).

   Tres cosas, y las tres pequeñas:
   1. Una onda de agua bajo el dedo, como el lector de huella del móvil.
      Suave y pequeña: un aro de un pelo que se va en poco más de un tercio
      de segundo (Guille, 18/08/2026: la primera versión se veía de más).
   2. El botón que se pulsa se hunde un pelín.
   3. Una vibración cortísima (el motor lo pone el navegador; el iPhone
      todavía no vibra desde la web, sólo Android).

   El comportamiento está en static/js/pbc-tap-feedback.js. Las burbujas que
   había antes se quitaron de toda la app el 18/08/2026. */

/* ---------- 1. La onda ---------- */

/* Capa de las ondas: encima de todo pero transparente al ratón, para no
   robarle ni un clic al botón que hay debajo. */
.pbc-onda-capa {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.pbc-onda {
  position: absolute;
  border-radius: 50%;
  /* Aro de un pelo: Guille lo pidio mas suave y mas pequeno el 18/08/2026.
     Antes eran dos aros de 2px que llegaban a 150px y se veian de mas. */
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  will-change: transform, opacity;
  animation: pbc-onda-abre 360ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Sobre fondo claro el aro blanco no se veria: ahi se pinta en azul PBC. La
   clase la pone el JS mirando el color de lo que hay debajo del dedo. */
.pbc-onda.pbc-onda-oscura {
  border-color: rgba(14, 116, 144, 0.32);
}

@keyframes pbc-onda-abre {
  0% {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    opacity: 0.5;
  }
  100% {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    opacity: 0;
  }
}

/* ---------- 2. El botón se hunde ---------- */

/* Sólo mientras el dedo está apoyado, y sólo en lo que de verdad se pulsa.
   Se deja a propósito con la fuerza justa, para que cualquier pantalla pueda
   desactivarlo sin pelearse con esta hoja. */
html.pbc-tapfx button:active,
html.pbc-tapfx .btn:active,
html.pbc-tapfx .pbc-btn:active,
html.pbc-tapfx [role="button"]:active,
html.pbc-tapfx a.btn:active,
html.pbc-tapfx input[type="submit"]:active,
html.pbc-tapfx input[type="button"]:active {
  transform: scale(0.96);
  transition: transform 90ms ease-out;
}

/* En iPhone, el gris que Safari pinta encima al tocar estorba a la onda. */
html.pbc-tapfx {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 3. Quien pide menos movimiento no ve nada de esto ---------- */

@media (prefers-reduced-motion: reduce) {
  .pbc-onda-capa {
    display: none;
  }

  html.pbc-tapfx button:active,
  html.pbc-tapfx .btn:active,
  html.pbc-tapfx .pbc-btn:active,
  html.pbc-tapfx [role="button"]:active,
  html.pbc-tapfx a.btn:active,
  html.pbc-tapfx input[type="submit"]:active,
  html.pbc-tapfx input[type="button"]:active {
    transform: none;
  }
}