/* ==========================================================
   Boton "Centro de ayuda" con sonar doble
   Variables (se pueden cambiar aqui):
     --ayuda-color        color de fondo (#016062)
     --ayuda-color-hover  color al pasar el mouse
     --ayuda-radio        esquinas (50rem = forma de pildora; 1.5rem = mas sutil)
   ========================================================== */
.btn-ayuda {
  --ayuda-color: #016062;
  --ayuda-color-hover: #014b4c;
  --ayuda-radio: 50rem;
  position: relative;
  background-color: var(--ayuda-color);
  border-color: var(--ayuda-color);
  color: #fff !important;          /* texto siempre blanco, aunque otro estilo del sitio lo cambie */
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
/* Forma de pildora: se fuerza para ganarle a .btn y .rounded de Bootstrap u otros estilos del sitio */
.btn.btn-ayuda { border-radius: var(--ayuda-radio) !important; }

.btn-ayuda:hover,
.btn-ayuda:focus,
.btn-ayuda:active,
.btn-ayuda:visited {
  background-color: var(--ayuda-color-hover);
  border-color: var(--ayuda-color-hover);
  color: #fff !important;
}

/* Dos aros seguidos que se expanden y se desvanecen (cada 4 s) */
.btn-ayuda::before,
.btn-ayuda::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border: 2px solid var(--ayuda-color);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: ayudaSonar 4s ease-out infinite;
}
.btn-ayuda::before { animation-delay: .35s; }

@keyframes ayudaSonar {
  0%        { transform: scale(1);         opacity: .7; }
  35%, 100% { transform: scale(1.14, 1.5); opacity: 0; }
}

/* Al pasar el mouse o enfocar con teclado, el sonar se detiene */
.btn-ayuda:hover::before,
.btn-ayuda:hover::after,
.btn-ayuda:focus::before,
.btn-ayuda:focus::after {
  animation: none;
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .btn-ayuda::before,
  .btn-ayuda::after { animation: none; }
}