/* Mesa de Dados: cores, tipografia e peças comuns a todas as páginas */

:root {
  --bg: #e9ecf3; --bg-2: #dfe3ec; --surface: #ffffff; --surface-2: #f4f6fa;
  --text: #1a2133; --muted: #5d667c; --line: #cfd4e0;
  --accent: #0f6b66; --accent-2: #0b5551; --on-accent: #ffffff;
  --gold: #b07a12; --good: #1b7f3b; --bad: #b3261e; --warn: #b26a00;
  --felt: #1f5c50;
  --shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 8px 24px rgba(20, 30, 50, .08);
  --r: 14px; --r-s: 10px;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1422; --bg-2: #141a2b; --surface: #19203a; --surface-2: #1f2744;
    --text: #e8ebf4; --muted: #9aa3ba; --line: #2c3557;
    --accent: #f0b94a; --accent-2: #d9a233; --on-accent: #1a1405;
    --gold: #f0b94a; --good: #6fd18a; --bad: #ff8b80; --warn: #ffb35c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1422; --bg-2: #141a2b; --surface: #19203a; --surface-2: #1f2744;
  --text: #e8ebf4; --muted: #9aa3ba; --line: #2c3557;
  --accent: #f0b94a; --accent-2: #d9a233; --on-accent: #1a1405;
  --gold: #f0b94a; --good: #6fd18a; --bad: #ff8b80; --warn: #ffb35c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.4; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 700; border-radius: var(--r-s); padding: 9px 14px; cursor: pointer;
  text-decoration: none; transition: transform .08s, background .15s, border-color .15s;
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primario { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primario:hover { background: var(--accent-2); }
.btn.perigo { color: var(--bad); }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.fantasma:hover { background: var(--surface-2); }
.btn.peq { padding: 5px 10px; font-size: .88rem; border-radius: 8px; }
.btn.grande { padding: 13px 20px; font-size: 1.1rem; }
.link { background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ---------- campos ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; color: var(--muted); }
.campo input, .campo select, .entrada {
  font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 10px 12px; min-width: 0;
}
.campo input:focus, .entrada:focus { border-color: var(--accent); outline: none; }

/* ---------- cartões ---------- */
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

/* ---------- avatares ---------- */
.av {
  --tam: 40px; width: var(--tam); height: var(--tam); border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; overflow: hidden; color: #fff; font-weight: 800;
  font-size: calc(var(--tam) * .4); background: var(--cor, #0f6b66); position: relative;
}
.av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- avisos ---------- */
#avisos { position: fixed; z-index: 100; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 440px); }
.aviso {
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 600;
  box-shadow: var(--shadow); animation: entra .25s ease-out; pointer-events: auto; text-align: center;
}
.aviso.erro { background: var(--bad); color: #fff; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

/* ---------- ícones (mesmo traço do símbolo do site) ---------- */
.ic { flex: none; display: inline-block; vertical-align: -3px; }
.btn .ic { vertical-align: middle; }