/* ===== Botones globales (reutilizables) ===== */

.btn {
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm, 0.6rem);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  background-clip: padding-box;

  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  line-height: 1.1;
}

.btn-primary {
  background: #0a66ff;
  color: #fff;
  border-color: #0a66ff;
}

.btn-primary:hover {
  background: #0854d0;
  border-color: #0854d0;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
}

.btn-primary:active {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.btn-outline {
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

.btn-outline:hover {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-color: var(--c-primary);
}

/* WhatsApp (por clase o por href wa.me) */
.btn-whatsapp,
a.btn[href^="https://wa.me"],
a[href^="https://wa.me"].btn {
  background: #ecfdf3;
  color: #166534;
  border-color: #bbf7d0;
}

.btn-whatsapp:hover,
a.btn[href^="https://wa.me"]:hover,
a[href^="https://wa.me"].btn:hover {
  background: #dcfce7;
  border-color: #22c55e;
  color: #14532d;
}

/* Ajustes del outline en temas oscuros (sistema o forzado) */
@media (prefers-color-scheme: dark) {
  .btn-outline {
    background: transparent;
    color: var(--c-text);
    border: 1px solid var(--c-border);
  }
}

:root[data-theme="dark"] .btn-outline {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

/* Hovers claros en modo oscuro */
[data-theme="dark"] .btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.5);
}

[data-theme="dark"] .btn-outline:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: #e5e7eb;
  color: #e5e7eb;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .btn-whatsapp,
[data-theme="dark"] a.btn[href^="https://wa.me"],
[data-theme="dark"] a[href^="https://wa.me"].btn {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(34, 197, 94, 0.4);
  color: #bbf7d0;
}

[data-theme="dark"] .btn-whatsapp:hover,
[data-theme="dark"] a.btn[href^="https://wa.me"]:hover,
[data-theme="dark"] a[href^="https://wa.me"].btn:hover {
  background: rgba(22, 163, 74, 0.3);
  border-color: rgba(34, 197, 94, 0.75);
  color: #dcfce7;
}

/* A11Y: Hero primary CTA — contrast (WCAG AA) + focus visible robusto */
a.btn.btn-primary.hero-primary,
button.btn.btn-primary.hero-primary,
.btn.btn-primary.hero-primary{
  background-color: #0a66ff;
  border-color: #0a66ff;
  color: #ffffff;
}

a.btn.btn-primary.hero-primary:hover,
button.btn.btn-primary.hero-primary:hover,
.btn.btn-primary.hero-primary:hover{
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

/* Focus visible: doble anillo (visible en claro y oscuro) */
a.btn.btn-primary.hero-primary:focus-visible,
button.btn.btn-primary.hero-primary:focus-visible,
.btn.btn-primary.hero-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #111827;
}