/* ==========================================================================
   MinhaEst2 — Design tokens + utilitários compartilhados
   Fonte ÚNICA da verdade para cor, raio, foco e componentes de layout.
   Carregado por todas as telas (base, login, autologins) ANTES do CSS da página.
   ========================================================================== */
:root {
  /* Marca */
  --brand: #183883;
  --brand-hover: #12294f;
  --brand-support: #589ccc;
  --brand-050: #eef3fb;

  /* Neutros (viés frio) */
  --ink: #1a2333;
  --muted: #5b6675;
  --hairline: #e2e7f1;
  --surface: #ffffff;

  /* Semânticas */
  --success: #1f8a5b;

  /* Raio (uma escala só) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Sombra */
  --shadow-sm: 0 1px 2px rgba(24, 56, 131, .06), 0 6px 18px rgba(24, 56, 131, .06);
}

/* ---- Botões da marca (Bootstrap 5.3 usa custom props --bs-btn-*) ---- */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
}

.bg-primary { background-color: var(--brand) !important; }

/* ---- Foco consistente com a marca (mantém acessibilidade) ---- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(24, 56, 131, .20);
}

.btn:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(24, 56, 131, .30);
}

a:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---- Cabeçalho de seção (antes duplicado em reserva/minhas-reservas) ---- */
.section-header {
  border-left: 4px solid var(--brand);
  padding-left: 10px;
}

.section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0;
}

.section-subtitle {
  font-size: .8rem;
  color: var(--brand-support);
  margin: 0;
}

.form-divider {
  border-color: var(--hairline);
  margin: 1.25rem 0;
}

/* ---- Superfície de conteúdo (painéis de reserva/minhas-reservas) ---- */
.app-panel {
  border-radius: var(--r-lg);
}

/* ---- Utilitários compartilhados (antes duplicados nos dois CSS) ---- */
.rounded-5 { border-radius: var(--r-sm); }

@keyframes shake {
  25% { transform: translateX(4px); }
  50% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}