/* ══════════════════════════════════════════════════════════════════════
   Guía de botones — Lo Del Ruso
   Verde de marca: #10B981 (hover #059669)

   Uso: <a|button class="btn btn-primary">...</a|button>

   Variantes principales:
     .btn-primary    fondo verde sólido, texto blanco
     .btn-secondary  fondo claro, texto verde, borde fino verde

   Modificadores de tamaño (mismo radio y tipografía siempre):
     .btn-sm         compacto, para chips del header
     .btn-lg         protagonista, para hero y CTAs
     .btn-block      ocupa todo el ancho disponible

   Excepciones de color (mantienen métrica y tipografía del sistema):
     .btn-mp         azul Mercado Pago — sólo botones de pago
     .btn-danger     rojo — sólo acciones destructivas (cancelar reserva)
     .on-dark        ajusta .btn-secondary sobre fotos/fondos oscuros
   ══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 8px;
  font-family: inherit; font-size: 0.95rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Variantes ── */
.btn-primary { background: #10B981; color: #FFFFFF; }
.btn-primary:hover { background: #059669; color: #FFFFFF; }

.btn-secondary { background: #F8FAFC; color: #059669; border-color: #10B981; }
.btn-secondary:hover { background: #F0FDF4; color: #047857; }

/* Secundario sobre foto/fondo oscuro (hero de la home) */
.btn-secondary.on-dark { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.btn-secondary.on-dark:hover { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: rgba(255,255,255,.6); }

/* ── Tamaños ── */
.btn-sm { padding: 8px 14px; font-size: 0.82rem; }
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

/* ── Excepciones de color ── */
.btn-mp { background: #009EE3; color: #FFFFFF; }
.btn-mp:hover { background: #0081C4; color: #FFFFFF; }

.btn-danger { background: transparent; color: #EF4444; border-color: #FCA5A5; }
.btn-danger:hover { background: #FEF2F2; color: #DC2626; }