/* Base e componentes reutilizáveis (usam apenas tokens.css). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-100);
  background: var(--atmosfera);
  background-color: var(--bg);
  background-attachment: fixed;
}
/* Bokeh quente ao fundo (luzes desfocadas de uma biblioteca à noite) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.9; filter: blur(7px);
  background:
    radial-gradient(circle at 4% 18%, var(--bokeh) 0 22px, transparent 26px),
    radial-gradient(circle at 8% 33%, var(--bokeh-2) 0 34px, transparent 40px),
    radial-gradient(circle at 96% 12%, var(--bokeh) 0 28px, transparent 34px),
    radial-gradient(circle at 93% 31%, var(--bokeh-2) 0 18px, transparent 22px),
    radial-gradient(circle at 16% 7%, var(--bokeh-2) 0 16px, transparent 20px),
    radial-gradient(circle at 82% 5%, var(--bokeh-2) 0 24px, transparent 30px),
    radial-gradient(circle at 52% 3%, var(--bokeh-2) 0 14px, transparent 18px);
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: 0.005em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); }
h2 { font-size: 1.15rem; }
p { margin: 0; }
a { color: var(--gold-300); text-underline-offset: 3px; }
a:hover { color: var(--white); }

/* Foco visível em tudo que é interativo */
:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.eyebrow {
  margin: 0 0 var(--sp-2); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400);
}
.muted { color: var(--ink-300); }

/* Cartões com vidro leve */
.card {
  position: relative;
  padding: var(--sp-5);
  background: var(--surface-solid);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.card__title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }

/* Botões (alvo de toque mínimo de 44px) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 46px; padding: 0 var(--sp-5);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid transparent;
}
.btn--gold { color: var(--navy-950); background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); box-shadow: var(--shadow-1); }
.btn--gold:hover { color: var(--navy-950); background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); }
.btn--ghost { color: var(--ink-100); background: transparent; border-color: var(--border); }
.btn--ghost:hover { color: var(--ink-100); background: var(--surface-strong); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--block { width: 100%; }

/* Chips e selos */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.2rem 0.7rem; font-size: 0.82rem; font-weight: 600; border-radius: 999px; white-space: nowrap;
  color: var(--ink-100); background: var(--surface-strong); border: 1px solid var(--border);
}
.chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink-500); }
.chip--ok { color: var(--ok-400); border-color: var(--ok-border); }
.chip--ok::before { background: var(--ok-400); }
.chip--alerta { color: var(--danger-400); border-color: var(--danger-border); }
.chip--alerta::before { background: var(--danger-400); }
.chip--ouro { color: var(--gold-300); border-color: var(--border-gold); }
.chip--ouro::before { display: none; }

/* Aviso */
.aviso {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: 0.95rem;
  color: var(--danger-400); background: var(--danger-bg); border: 1px solid var(--danger-border);
}

/* Formulários */
.form { display: flex; flex-direction: column; gap: var(--sp-2); text-align: left; }
.form label { margin-top: var(--sp-3); font-size: 0.9rem; font-weight: 600; color: var(--ink-300); }
.form input {
  min-height: 48px; padding: 0 var(--sp-4); font: inherit; font-size: 1rem; /* 16px evita zoom no iOS */
  color: var(--ink-100); background: var(--field-bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.form input:focus-visible { outline-offset: 1px; border-color: var(--gold-400); }
.form .btn { margin-top: var(--sp-5); }

/* Tabela responsiva: vira lista de cartões em telas estreitas */
.tabela { width: 100%; border-collapse: collapse; font-size: 0.95rem; text-align: left; }
.tabela th { padding: var(--sp-3) var(--sp-4); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300); border-bottom: 1px solid var(--border); }
.tabela td { padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.tabela tr:last-child td { border-bottom: 0; }
@media (max-width: 699.98px) {
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border: 0; text-align: right; }
  .tabela td::before { content: attr(data-label); flex: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-300); text-align: left; }
}

/* ---------- Marca provisória ---------- */
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink-100); }
.brand__logo {  /* logotipo oficial First Prime (PNG com fundo transparente) */
  flex: none; width: auto; height: 50px; object-fit: contain;
  filter: drop-shadow(0 2px 6px var(--sombra-chao));
}
.auth__brand .brand__logo { height: 78px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.14em; }
.brand__sub { margin-top: 3px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.32em; color: var(--gold-400); }

/* Páginas públicas (login e início técnico) */
.auth { display: grid; place-items: center; padding: var(--sp-5) var(--sp-4); }
.auth__card { width: min(100%, 26rem); text-align: center; padding: var(--sp-6) var(--sp-5); }
.auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.auth__card h1 { font-size: 1.6rem; letter-spacing: 0.08em; }
.auth__env { margin-top: var(--sp-1); color: var(--ink-300); font-size: 0.9rem; }
.auth__status { margin-top: var(--sp-4); font-weight: 600; }
.auth__version { margin-top: var(--sp-2); color: var(--ink-300); font-size: 0.85rem; }
.dot { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: var(--sp-2); border-radius: 50%; background: var(--ok-400); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Etapa 7B: entrada (entrar / criar conta) e cadastro ---------- */
.entrada { margin-top: var(--sp-5); text-align: left; }
.entrada__titulo { display: flex; flex-direction: column; gap: 2px; font-size: 1.5rem; letter-spacing: 0.04em; }
.entrada__titulo span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; color: var(--ink-300); }
.entrada--criar { padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.entrada--criar .entrada__titulo { margin-bottom: var(--sp-3); }
.aviso--ok { color: var(--ok-400); background: var(--estado-antecipado-bg); border-color: var(--ok-border); }
.auth--cadastro .auth__card { width: min(100%, 36rem); }
.cadastro { gap: var(--sp-4); margin-top: var(--sp-5); }
.cadastro__bloco { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cadastro__bloco[hidden] { display: none; }
.cadastro__bloco legend { padding: 0 var(--sp-2); font-weight: 700; color: var(--gold-300); }
.cadastro__nota { font-size: 0.85rem; color: var(--ink-300); }
.campo { display: flex; flex-direction: column; gap: var(--sp-1); }
.campo label { margin-top: var(--sp-2); }
.form select {
  min-height: 48px; padding: 0 var(--sp-3); font: inherit; color: var(--ink-100);
  background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.campo--erro input, .campo--erro select { border-color: var(--danger-400); }
.campo__erro { font-size: 0.85rem; color: var(--danger-400); }
.aceite { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-2); font-weight: 500; color: var(--ink-100); cursor: pointer; }
.aceite input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--gold-400); }
.aceite a, .cadastro__rodape a { color: var(--gold-300); }
.cadastro__rodape { text-align: center; color: var(--ink-300); }