/* =========================================================================
   Oliveira Roque — sistema visual único (Sovereign Juris)
   0. Fontes  1. Tokens  2. Base  3. Primitivos  4. Página do kit  5. Responsivo
   Os tokens abaixo são a ÚNICA fonte de cores/raios/sombras do site.
   intake.css consome estes tokens; não redefina cores lá.
   ========================================================================= */

/* ---- 0. Fontes (auto-hospedadas, sem CDN) -------------------------------
   Domine nos títulos e Inter no corpo, conforme DESIGN.md. Arquivos variáveis
   em assets/fonts (SIL Open Font License; textos em OFL-*.txt na mesma pasta).
   Dois subconjuntos por família: latin cobre o português do dia a dia e
   latin-ext só é baixado se a página usar algum caractere daquela faixa.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-var-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:Domine;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/domine-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Domine;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/domine-var-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  color-scheme:light;
  font-synthesis:none;
  --font-sans:Inter,"Segoe UI",system-ui,sans-serif;
  --font-serif:Domine,Georgia,"Times New Roman",serif;

  /* Constantes de marca (não mudam com o tema) */
  --navy:#16203f;
  --navy-hover:#2b3553;

  /* Semânticos (remapeados no tema escuro) */
  --gold:#c0af82;
  --gold-ink:#6b5d37;
  --gold-surface:#f1e7cd;

  --paper:#faf8f5;
  --surface:#fff;
  --surface-sunken:#f3f4f5;
  --line:#e2dfd8;
  --ink:#16203f;
  --muted:#5d606a;
  --muted-soft:#747681;

  --danger:#a22e2e;
  --danger-surface:#fff4f2;
  --danger-line:#e4b8b4;

  --field-bg:#fff;
  --field-line:#e2dfd8;

  --btn-primary-bg:var(--navy);
  --btn-primary-ink:#fff;
  --btn-primary-bg-hover:var(--navy-hover);

  --radius:4px;
  --radius-lg:8px;
  --shadow-card:0 1px 2px rgba(22,32,63,.04);
  --shadow-lift:0 16px 36px -12px rgba(22,32,63,.12),0 4px 12px -2px rgba(22,32,63,.04);
  --ease:.15s ease;
}

html[data-theme=dark]{
  color-scheme:dark;
  --gold:#d7c597;
  --gold-ink:#e1d3ae;
  --gold-surface:#303d60;

  --paper:#0d1326;
  --surface:#16203f;
  --surface-sunken:#0d1326;
  --line:#35405d;
  --ink:#e3e7f2;
  --muted:#b4bdcf;
  --muted-soft:#b4bdcf;

  --danger:#ffccca;
  --danger-surface:#402127;
  --danger-line:#7a3a38;

  --field-bg:#0d1326;
  --field-line:#35405d;

  --btn-primary-bg:#d7c597;
  --btn-primary-ink:#16203f;
  --btn-primary-bg-hover:#e3d4ab;

  --shadow-card:0 1px 2px rgba(0,0,0,.25);
  --shadow-lift:0 16px 36px -12px rgba(0,0,0,.45);
}

/* ---- 2. Base ------------------------------------------------------------ */
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.48}
a{color:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
/* Títulos em Domine (serifada); rótulos, corpo e controles em Inter. */
h1,h2{font-family:var(--font-serif);letter-spacing:-.02em}
h1{font-size:clamp(26px,4vw,36px);font-weight:600;line-height:1.2;margin:10px 0}

/* ---- 3. Primitivos compartilhados --------------------------------------- */
/* Campos: branco sobre papel, borda hairline, foco navy + halo dourado. */
input,select,textarea{
  width:100%;
  min-height:45px;
  padding:11px 13px;
  border:1px solid var(--field-line);
  border-radius:var(--radius);
  background:var(--field-bg);
  color:var(--ink);
  font-size:14px;
  transition:border-color var(--ease),box-shadow var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 2px rgba(192,175,130,.35);
}
html[data-theme=dark] input:focus,
html[data-theme=dark] select:focus,
html[data-theme=dark] textarea:focus{border-color:var(--gold)}
textarea{resize:vertical;line-height:1.65;min-height:110px}
select:disabled{background:var(--surface-sunken);color:var(--muted-soft)}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
input[type=radio],input[type=checkbox]{
  width:17px;height:17px;min-height:0;padding:0;flex-shrink:0;
  accent-color:var(--navy);
}
html[data-theme=dark] input[type=radio],
html[data-theme=dark] input[type=checkbox]{accent-color:var(--gold)}

.field-error{font-size:11px;color:var(--danger);display:block;line-height:1.5;margin-top:4px}
.field-error:empty{display:none}
.hint{display:block;font-size:11px;color:var(--muted-soft);line-height:1.5;margin-top:5px}
.required{color:var(--danger)}

/* ---- 4. Página do kit --------------------------------------------------- */
.page-heading{max-width:1240px;margin:38px auto 24px;padding:0 24px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold-ink);margin:0}
.page-heading>p:last-child{color:var(--muted);font-size:14px;line-height:1.7}

.kit-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.kit-tabs a{
  text-decoration:none;font-size:13px;padding:10px 16px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  transition:border-color var(--ease),background var(--ease);
}
.kit-tabs a:hover{border-color:var(--gold)}
.kit-tabs a[aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff}
html[data-theme=dark] .kit-tabs a[aria-current=page]{background:var(--gold);border-color:var(--gold);color:var(--navy)}

.workspace{
  max-width:1240px;padding:0 24px;margin:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;
}
form{min-width:0}
.form-note{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 20px}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  margin-bottom:24px;
  overflow:hidden;
}
.panel-heading{
  padding:20px 24px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;justify-content:flex-start;
}
.panel-heading h2{font-size:18px;font-weight:600;margin:0;line-height:1.45;letter-spacing:-.01em}
.step{
  width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-size:12px;display:grid;place-items:center;flex-shrink:0;
}
html[data-theme=dark] .step{background:var(--gold);color:var(--navy)}

.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;padding:24px}
.field{min-width:0}
.field.wide{grid-column:1/-1}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;line-height:1.5}
.input-row{display:flex;gap:8px}
.input-row input{min-width:0}

/* Cartão de identificação: vindo do cadastro, a primeira seção já está
   preenchida, então aparece como resumo em leitura, não como formulário. */
.client-card{
  padding:22px 24px;background:var(--surface-sunken);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;
}
.client-card-name{
  font-family:var(--font-serif);font-size:19px;font-weight:600;
  letter-spacing:-.01em;line-height:1.3;margin:0;
}
.client-card-grid{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 24px}
.client-card-grid dt{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.client-card-grid dd{margin:4px 0 0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.client-card .text-button{margin-left:0;align-self:flex-start}
.client-missing{
  margin:0;padding:14px 24px;font-size:13px;line-height:1.5;
  color:var(--gold-ink);background:var(--gold-surface);
  border-bottom:1px solid var(--line);
}
.fields+.fields{border-top:1px solid var(--line)}

.button{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--radius);padding:11px 16px;font-size:13px;font-weight:600;
  transition:border-color var(--ease),background var(--ease);
}
.button:hover:enabled{border-color:var(--gold)}
.button.primary{
  background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);
  color:var(--btn-primary-ink);width:100%;padding:16px 20px;font-size:14px;font-weight:650;
}
.button.primary:hover:enabled{background:var(--btn-primary-bg-hover);border-color:var(--btn-primary-bg-hover)}
.button.small{font-size:12px;padding:8px 14px;min-height:45px;white-space:nowrap}
.text-button{
  margin-left:auto;background:none;border:0;color:var(--ink);
  font-size:12px;text-decoration:underline;padding:4px;
}

/* Progresso do preenchimento: barra + atalho para cada seção. */
.progress-content{padding:18px 24px 20px}
.progress-track{height:5px;border-radius:999px;background:var(--surface-sunken);border:1px solid var(--line);overflow:hidden}
.progress-track>span{display:block;height:100%;width:0;background:var(--gold);transition:width .25s ease}
.progress-sections{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.progress-item{
  width:100%;display:flex;align-items:center;gap:10px;
  background:none;border:0;border-radius:var(--radius);
  padding:9px 8px;text-align:left;color:inherit;font-size:12px;line-height:1.5;
  transition:background var(--ease);
}
.progress-item:hover{background:var(--surface-sunken)}
.progress-item-title{flex:1;min-width:0}
.progress-item-mark{
  flex-shrink:0;min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--gold-surface);color:var(--gold-ink);
  font-size:11px;font-weight:700;
}
.progress-item.done .progress-item-title{color:var(--muted)}
.progress-item.done .progress-item-mark{background:transparent;color:var(--gold-ink);border:1px solid var(--gold)}

/* Entrega do kit: o estado "pronto" é o clímax do formulário. */
.downloads.ready .panel-heading{border-bottom-color:var(--gold)}
.kit-ready{
  border:1px solid var(--gold);border-radius:var(--radius);
  background:var(--gold-surface);padding:16px 18px;margin-bottom:16px;
}
.kit-ready-title{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-ink);
}
.kit-ready-count{margin:8px 0 14px;font-size:13px;line-height:1.6}
.button.accent{
  width:100%;background:var(--gold);border-color:var(--gold);
  color:var(--navy);font-size:14px;font-weight:650;padding:14px 18px;
}
.button.accent:hover:enabled{filter:brightness(.95)}
.downloads.ready #validate{background:var(--surface);border-color:var(--line);color:var(--ink)}
.downloads.ready #validate:hover:enabled{background:var(--surface);border-color:var(--gold)}
.downloads-label{margin:16px 0 10px;font-size:11px;color:var(--muted-soft);letter-spacing:.04em}

.panel-description{font-size:13px;line-height:1.7;color:var(--muted);padding:0 24px;margin:18px 0}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 24px 24px}
.check-item{
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:flex-start;gap:10px;padding:13px;
  font-size:13px;line-height:1.6;cursor:pointer;
  transition:border-color var(--ease),background var(--ease);
}
.check-item input{margin:2px 0 0}
.check-item:hover{border-color:var(--gold)}
.check-item:has(input:checked){background:var(--gold-surface);border-color:var(--gold)}

aside{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;scrollbar-width:thin}
.preview{font-size:13px;line-height:1.9;margin:20px 24px;overflow-wrap:anywhere}
.download-content{padding:20px 24px 24px}
.file-label{font-size:10px;color:var(--gold-ink);margin-left:auto;font-weight:700;letter-spacing:.08em}
#status{font-size:12px;line-height:1.7;color:var(--muted);margin:14px 0}
#status.error{color:var(--danger)}
#downloads{display:grid;gap:8px}
#downloads button{text-align:left;font-size:12px}

.tags,.prompts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.tags button,.prompts button{
  background:var(--surface-sunken);border:1px solid var(--line);
  border-radius:var(--radius);font-size:11px;padding:8px 10px;
  color:var(--ink);text-align:left;line-height:1.5;
  transition:border-color var(--ease);
}
.tags button:hover,.prompts button:hover{border-color:var(--gold)}
.tags button{max-width:100%;overflow-wrap:anywhere}
.prompts button{background:var(--surface);color:var(--muted)}

.radio-options{display:flex;gap:10px;flex-wrap:wrap}
.field .radio-choice{
  display:flex;align-items:center;gap:9px;margin:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-sunken);
  padding:12px 18px;cursor:pointer;font-size:13px;font-weight:400;
  transition:border-color var(--ease),background var(--ease);
}
.radio-choice:has(input:checked){background:var(--gold-surface);border-color:var(--gold)}
.field .inline-checkbox{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  margin:0;padding:0 8px;font-size:12px;font-weight:600;flex-shrink:0;
}

.location-picker{border:0;padding:0;margin:0;min-width:0}
.location-picker legend{font-size:13px;font-weight:600;margin-bottom:14px;padding:0}
.location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}

#portal-status{white-space:pre-wrap;font-size:12px;line-height:1.7}
.notice{padding:20px;color:var(--danger)}
.bpc-prompts{margin-top:18px}
.bpc-prompts h3{font-size:12px;margin:16px 0 8px}
.bpc-prompts p{font-size:11px;line-height:1.6;color:var(--muted)}

/* ---- 5. Responsivo ------------------------------------------------------ */
@media(max-width:1000px){
  .workspace{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
  .fields{padding:20px 18px}
  .panel-heading{padding:16px 18px}
  .checklist{grid-template-columns:1fr;padding:0 18px 18px}
  .panel-description{padding:0 18px}
}
@media(max-width:760px){
  .workspace{grid-template-columns:1fr;padding:0 16px}
  .page-heading{padding:0 16px;margin-top:24px}
  aside{position:static;max-height:none;overflow:visible}
  .fields{grid-template-columns:1fr;gap:17px}
  .field.wide{grid-column:auto}
  .checklist{grid-template-columns:1fr}
  .location-grid{grid-template-columns:1fr;gap:16px}
}