/* LatinosCPA — CONECTAR WHATSAPP (Embedded Signup).
 *
 * Hereda del sistema de la página: usa .btn y las variables ya definidas en
 * style.css, así que el modo oscuro y los estilos existentes siguen valiendo
 * sin repetir aquí ninguna paleta. Sólo se añade lo que no existía. */

.wa-connect-card {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--line, rgba(128, 128, 128, .28));
  border-radius: 12px;
  background: var(--card-2, transparent);
}

.wa-connect-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  line-height: 1.3;
}

.wa-connect-lead {
  margin: 0 0 12px;
  font-size: .9rem;
  line-height: 1.5;
  opacity: .85;
  max-width: 62ch;
}

.wa-connect-btn {
  /* Objetivo táctil mínimo de 44 px: en móvil este botón abre un popup y
   * fallarlo obliga a repetir todo el flujo. */
  min-height: 44px;
  padding: 11px 18px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* El estado deshabilitado tiene que LEERSE deshabilitado, no sólo estarlo:
 * el motivo real vive en .wa-connect-state, justo debajo, y lo anuncia el
 * aria-live. */
.wa-connect-btn[disabled],
.wa-connect-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

.wa-connect-btn[aria-busy="true"] { cursor: progress; }

.wa-connect-state {
  margin: 10px 0 0;
  font-size: .85rem;
  line-height: 1.5;
  opacity: .8;
  max-width: 62ch;
}

.wa-connect-state.wa-connect-blocked {
  opacity: 1;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(200, 140, 0, .35);
  background: rgba(200, 140, 0, .08);
}

/* Foco visible propio: el outline por defecto desaparece sobre el fondo
 * oscuro de la tarjeta en varios navegadores. */
.wa-connect-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .wa-connect-card { padding: 13px; }
  .wa-connect-btn { width: 100%; }
}

/* Respeta la preferencia del sistema: aquí no hay animaciones propias, pero
 * el aria-busy puede heredar transiciones de .btn. */
@media (prefers-reduced-motion: reduce) {
  .wa-connect-btn { transition: none; }
}