/* Congresso BASES 2026 — tokens e componentes compartilhados */
:root {
  --navy: oklch(0.19 0.05 275);
  --navy-2: oklch(0.25 0.06 275);
  --navy-3: oklch(0.32 0.07 275);
  --cream: oklch(0.965 0.008 82);
  --cream-2: oklch(0.935 0.012 82);
  --white: #fff;
  --magenta: oklch(0.55 0.24 3);
  --magenta-dark: oklch(0.47 0.21 3);
  --magenta-soft: oklch(0.95 0.035 3);
  --gold: oklch(0.78 0.16 78);
  --orange: oklch(0.66 0.19 40);
  --blue: oklch(0.434 0.172 259);
  --green: oklch(0.5 0.12 160);
  --green-soft: oklch(0.95 0.04 160);
  --red: oklch(0.55 0.2 27);
  --red-soft: oklch(0.96 0.03 27);
  --amber-soft: oklch(0.96 0.05 85);
  /* Identidade da Prefeitura de Cuiabá (cores do brasão/logo oficial) */
  --pref-green: #087860;
  --pref-green-dark: #055544;
  --pref-green-deep: #0a3a3c;
  --pref-green-soft: #e3f2ed;
  --pref-gold: #f8c010;
  --ink: oklch(0.24 0.035 275);
  --muted: oklch(0.5 0.025 275);
  --line: oklch(0.89 0.012 82);
  --line-strong: oklch(0.8 0.015 275);
  --rainbow: linear-gradient(90deg, oklch(0.55 0.24 3), oklch(0.66 0.19 40), oklch(0.78 0.16 78), oklch(0.62 0.17 150), oklch(0.5 0.17 259), oklch(0.5 0.2 300));
  --radius: 14px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px oklch(0.19 0.05 275 / 0.06), 0 12px 32px -12px oklch(0.19 0.05 275 / 0.18);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--magenta); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid oklch(0.78 0.16 78 / 0.9); outline-offset: 2px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s, box-shadow 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--magenta); color: #fff; box-shadow: 0 8px 20px -8px oklch(0.55 0.24 3 / 0.6); }
.btn-primary:hover:not(:disabled) { background: var(--magenta-dark); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover:not(:disabled) { background: var(--navy-3); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { border-color: var(--navy); background: var(--white); }
.btn-success { background: var(--green); color: #fff; }
.btn-danger { background: var(--white); border-color: var(--red); color: var(--red); }
.btn-danger:hover:not(:disabled) { background: var(--red-soft); }
.btn-sm { min-height: 36px; padding: 0 0.95rem; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn .arrow { transition: transform 0.15s; }
.btn:hover .arrow { transform: translateX(3px); }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field > label, .field > .label { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.req { color: var(--magenta); font-weight: 700; }
.opt { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--white);
  font-size: 1rem; /* 16px evita zoom automático no iOS */
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23343759' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center; padding-right: 2.5rem;
}
.input::placeholder { color: oklch(0.65 0.02 275); }
.input:hover, .select:hover { border-color: oklch(0.65 0.03 275); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px oklch(0.19 0.05 275 / 0.1); }
.field.invalid .input, .field.invalid .select { border-color: var(--red); background: var(--red-soft); }
.field.valid .input { border-color: oklch(0.7 0.1 160); }
.hint { font-size: 0.8rem; color: var(--muted); }
.error-msg { font-size: 0.82rem; color: var(--red); font-weight: 500; display: flex; gap: 0.35rem; align-items: flex-start; }
.error-msg:empty { display: none; }
.error-msg::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; }
.input-wrap { position: relative; }
.input-wrap .input-status { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--muted); }

.check {
  display: flex; gap: 0.8rem; align-items: flex-start; cursor: pointer;
  padding: 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--white);
  transition: border-color 0.15s, background 0.15s;
}
.check:hover { border-color: var(--navy); }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--magenta); cursor: pointer; }
.check.checked { border-color: var(--magenta); background: var(--magenta-soft); }
.field.invalid .check { border-color: var(--red); background: var(--red-soft); }

.alert { padding: 0.9rem 1rem; border-radius: 12px; font-size: 0.92rem; display: flex; gap: 0.6rem; align-items: flex-start; }
.alert-error { background: var(--red-soft); color: oklch(0.42 0.16 27); border: 1px solid oklch(0.85 0.07 27); }
.alert-info { background: oklch(0.96 0.02 259); color: oklch(0.35 0.12 259); border: 1px solid oklch(0.87 0.05 259); }
.alert-warn { background: var(--amber-soft); color: oklch(0.42 0.1 60); border: 1px solid oklch(0.86 0.09 80); }
.alert-success { background: var(--green-soft); color: oklch(0.38 0.1 160); border: 1px solid oklch(0.85 0.07 160); }

.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--green-soft); color: oklch(0.38 0.1 160); }
.badge-pending { background: var(--amber-soft); color: oklch(0.45 0.11 60); }
.badge-cancel { background: var(--red-soft); color: oklch(0.45 0.17 27); }
.badge-ext { background: oklch(0.95 0.03 259); color: var(--blue); }
.badge-gest { background: var(--magenta-soft); color: var(--magenta-dark); }

.rainbow-bar { height: 4px; background: var(--rainbow); }

/* Toast */
.toast-host { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
.toast { pointer-events: auto; background: var(--navy); color: #fff; padding: 0.85rem 1.1rem; border-radius: 12px; box-shadow: var(--shadow); font-size: 0.92rem; animation: toast-in 0.2s ease-out; }
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}