/* Botón "Continuar con Agua Bendita" para las plataformas conectadas al SSO.
   Uso:
   <link rel="stylesheet" href="https://SSO/static/sso-boton/boton.css">
   <a class="ab-sso-btn" href="/ruta-de-login-de-la-plataforma">
     <img src="https://SSO/static/img/logo_ab.png" alt=""> Continuar con Agua Bendita
   </a>                                                                                  */
.ab-sso-btn {
  display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box;
  padding: 10px 22px 10px 10px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font: 600 14px/1.2 "DM Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: .02em;
  background: linear-gradient(135deg, #0A5F66, #0B3A40); color: #FFFFFF; border: 1px solid rgba(77,208,216,.35);
  box-shadow: 0 12px 28px -12px rgba(10,95,102,.8); transition: background .2s, border-color .2s, transform .2s;
}
.ab-sso-btn:hover { background: linear-gradient(135deg, #087D88, #0A5F66); border-color: #F2BC14; color: #fff; transform: translateY(-1px); text-decoration: none; }
.ab-sso-btn img { width: 34px; height: 34px; object-fit: contain; padding: 3px; border-radius: 50%; background: rgba(255,255,255,.14); }
.ab-sso-btn::after { content: "\2192"; color: #E4C45A; margin-left: 4px; transition: transform .2s; }
.ab-sso-btn:hover::after { transform: translateX(3px); }
.ab-sso-btn.claro { background: #FFFFFF; color: #1F1C18; border-color: #E6DFD2; }
.ab-sso-btn.claro::after { color: #087D88; }
.ab-sso-btn.ancho { width: 100%; }