/* Baldosa Recargas. CSS propio: hub.css está bloqueado.
   Mismo tamaño que el resto (3.5rem dentro de la casilla 4.6rem).
   Icono 17 ago 2026: teal plano + R. Las ondas van en SVG encima. */

.hub-tile[data-tool="recargas"] .hub-tile__icon img,
.hub-tile[data-tool="recargas"] .recargas-icon__ondas {
  grid-area: 1 / 1;
  width: 3.5rem;
  height: 3.5rem;
}

.recargas-icon__ondas {
  position: relative;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.recargas-onda {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0.35;
  animation: recargas-buscar 4s ease-in-out infinite;
}

.recargas-onda--1 {
  animation-delay: 0s;
}

.recargas-onda--2 {
  animation-delay: 0.22s;
}

.recargas-onda--3 {
  animation-delay: 0.44s;
}

/* De dentro a fuera, una vez cada 4 segundos. Reposo visible, no apagado. */
@keyframes recargas-buscar {
  0%,
  6% {
    opacity: 0.35;
  }
  14%,
  30% {
    opacity: 1;
  }
  42%,
  100% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recargas-onda {
    animation: none;
    opacity: 1;
  }
}