/* Tema base global para vistas públicas de reservas.
   Cambia colores/tipografías en variables.css y esta capa se adapta sola. */

body {
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  color: var(--color-text-primary);
  background: linear-gradient(
    180deg,
    var(--bg-gradient-start),
    var(--bg-gradient-mid),
    var(--bg-gradient-end)
  );
}

main.container {
  margin-top: 96px;
}

.rv-container {
  color: var(--color-text-primary);
}

.rv-main-card,
.card-reserva,
.rv-finish-card,
.cc-shell {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.rv-section-title,
.brand-calligraphy {
  color: var(--color-text-primary);
}

.rv-section-subtitle,
.text-muted {
  color: var(--color-text-light) !important;
}

button,
.btn,
.rv-submit-button,
.rv-continue-button,
.rv-sucursal-cta-button,
.btn-primary,
.btn-secondary {
  transition: all var(--transition-fast);
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  main.container {
    margin-top: 88px;
  }
}