/* CFM Análise AI — client portal (B-LE15). Navy/gold, deliberately distinct from the reviewer
   surface (terracotta/teal). Schema-driven intake: dashboard, institutional accordion, per-AI card. */
:root{
  --bg:            #2B3660;
  --surface:       #3B4A80;
  --surface-raised:#4C5C95;
  --surface-sunk:  #33406F;
  --border:        #5E6EA8;
  --border-soft:   #4A5990;

  --text:          #EDEFF7;
  --text-2:        #AFB6D4;
  --text-muted:    #8189AD;

  --accent:        #E8B84B;
  --accent-hover:  #F2C866;
  --accent-on:     #2E2408;

  --st-novo-bg:      #28405A;  --st-novo-fg:      #A8CFEE;
  --st-analise-bg:   #4A3D1A;  --st-analise-fg:   #F5DA7B;
  --st-bloqueado-bg: #4A211C;  --st-bloqueado-fg: #F0A79B;
  --st-done-bg:      #26402F;  --st-done-fg:      #8BD3A3;

  --st-rascunho-bg:  rgba(0,0,0,.16);
  --st-rascunho-fg:  #8189AD;

  --radius: 8px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

*{ box-sizing:border-box; }

body{
  margin:0; padding:2rem 1rem;
  background:var(--bg); color:var(--text);
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.5;
}
.wrap{ max-width:900px; margin:0 auto; }
a{ color:var(--text-2); }

.masthead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:24px;
  border-bottom:1px solid var(--border-soft);
}
.wordmark{ margin:0; font-size:15px; font-weight:600; white-space:nowrap; }
.wordmark .ia{ color:var(--accent); }
.who{ margin:0; font-size:13px; color:var(--text-muted); }
.who a{ color:var(--text-2); }

h1{ margin:0 0 4px; font-size:24px; font-weight:600; }
.lede{ margin:0 0 24px; font-size:14px; color:var(--text-2); }

/* --- pre-auth landing + error hero (index.html / error.html) --- */
.hero{ max-width:520px; padding:8px 0 24px; }
.hero .eyebrow{
  margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-family:var(--mono);
}
.hero h1{ font-size:32px; line-height:1.2; margin:0 0 14px; }
.hero .lede{ font-size:16px; color:var(--text-2); margin:0 0 8px; }
.hero .sub{ font-size:14px; color:var(--text-muted); margin:0 0 28px; }
.hero .btn{ padding:11px 26px; font-size:15px; }
.steps{
  display:flex; gap:22px; flex-wrap:wrap;
  margin-top:32px; padding-top:22px; border-top:1px solid var(--border-soft);
}
.step{ flex:1; min-width:130px; }
.step .n{ display:block; font-size:12px; color:var(--accent); font-family:var(--mono); margin-bottom:3px; }
.step p{ margin:0; font-size:13px; color:var(--text-2); }

/* --- dashboard "como funciona" (first-time client only) — reuses .steps/.step --- */
.howto{ margin-bottom:12px; }
.howto-title{ margin:0; font-size:13px; color:var(--text-muted); }
.howto .steps{ margin-top:10px; padding-top:0; border-top:none; }

/* --- Sistemas de IA surface: institutional-summary-with-gear + per-system accordions --- */
.org{
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:16px;
  background:var(--surface-sunk); border-radius:var(--radius); border:1px solid var(--border-soft);
}
.org-main{ flex:1; min-width:0; }
.org-name{ margin:0; font-size:15px; }
.org-meta{ margin:1px 0 0; font-size:12px; color:var(--text-muted); font-family:var(--mono); }
.gear{
  width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--border-soft); border-radius:var(--radius);
  cursor:pointer; color:var(--text-2); text-decoration:none; transition:all .12s;
}
.gear:hover{ background:var(--surface-raised); color:var(--text); border-color:var(--border); }
.gear svg{ width:17px; height:17px; }

.systems{ margin-bottom:12px; }
.sys{ background:var(--surface); border-radius:12px; margin-bottom:8px; overflow:hidden; }
.sys-head{
  display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px;
  background:none; border:none; cursor:pointer; color:var(--text); font:inherit; text-align:left;
  transition:background .1s;
}
.sys-head:hover{ background:var(--surface-raised); }
.sys-head[aria-expanded="true"] .chev{ transform:rotate(45deg); }
.sys-main{ flex:1; min-width:0; }
.sys-name{ font-size:15px; }
.sys-code{ display:block; margin-top:2px; font-size:12px; color:var(--text-muted); font-family:var(--mono); }
.sys-body{ padding:0 16px 18px; border-top:1px solid var(--border-soft); background:var(--surface-sunk); }
.sys-body[hidden]{ display:none; }
.sys-body .field:first-of-type{ margin-top:18px; }

/* read-only record of a submitted system */
.dl{ margin:18px 0 0; display:grid; gap:14px; }
.dl-row{ display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:baseline; }
@media (max-width:620px){ .dl-row{ grid-template-columns:1fr; gap:2px; } }
.dl dt{ font-size:13px; color:var(--text-muted); }
.dl dd{ margin:0; font-size:14px; }
.dl dd.chips{ display:flex; flex-wrap:wrap; gap:5px; }
.chip{ font-size:12px; padding:2px 9px; background:var(--surface-raised); border-radius:var(--radius); color:var(--text-2); }
.sent{ margin-top:18px; padding-top:14px; border-top:1px solid var(--border-soft); font-size:12px; color:var(--text-muted); }

.sys-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--border-soft);
}

.card{ background:var(--surface); border-radius:12px; padding:18px 20px; margin-bottom:12px; }
.card.locked{ background:var(--surface-sunk); }
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.card-head h2{ margin:0; font-size:17px; font-weight:600; flex:1; min-width:0; }
.card > p{ margin:0 0 14px; font-size:14px; color:var(--text-2); }
.card > p:last-child{ margin-bottom:0; }

.badge{ font-size:12px; padding:3px 10px; border-radius:var(--radius); white-space:nowrap; flex-shrink:0; }
.b-novo{      background:var(--st-novo-bg);      color:var(--st-novo-fg); }
.b-analise{   background:var(--st-analise-bg);   color:var(--st-analise-fg); }
.b-bloqueado{ background:var(--st-bloqueado-bg); color:var(--st-bloqueado-fg); }
.b-done{      background:var(--st-done-bg);      color:var(--st-done-fg); }
.b-rascunho{  background:var(--st-rascunho-bg); color:var(--st-rascunho-fg); border:1px solid rgba(255,255,255,.08); }

.btn{
  display:inline-block; font:inherit; font-size:14px; font-weight:500;
  padding:9px 18px; border:none; border-radius:var(--radius);
  background:var(--accent); color:var(--accent-on);
  cursor:pointer; text-decoration:none; transition:background .12s;
}
.btn:hover{ background:var(--accent-hover); }
.btn.ghost{ background:transparent; color:var(--text-2); border:1px solid var(--border); }
.btn.ghost:hover{ background:var(--surface-raised); color:var(--text); }
/* Avaliar (Alpha) — deliberately off-system purple, apart from the gold primary actions. */
.btn.alpha{ background:#A78BFA; color:#241A3E; }
.btn.alpha:hover{ background:#b9a2fb; }
.btn:disabled{ background:var(--surface-raised); color:var(--text-muted); cursor:not-allowed; }
form{ margin:0; }

.progress{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.bar{ flex:1; height:5px; border-radius:3px; background:rgba(0,0,0,.22); overflow:hidden; }
.bar > span{ display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .25s; }
.pct{ font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; min-width:88px; text-align:right; }

.sys-list{ margin:0; padding:0; list-style:none; }
.sys-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.sys-row:last-child{ border-bottom:none; }
.sys-main{ flex:1; min-width:0; }
.sys-name{ margin:0; font-size:15px; }
.sys-meta{ margin:2px 0 0; font-size:12px; color:var(--text-muted); font-family:var(--mono); }
.add-row{ padding-top:14px; }

.empty{ text-align:center; padding:28px 20px; color:var(--text-2); font-size:14px; }
.empty p{ margin:0 0 14px; }

.summary{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; margin-bottom:20px;
  background:var(--surface-sunk); border-radius:var(--radius); border:1px solid var(--border-soft);
}
.summary .org{ flex:1; min-width:0; }
.summary .org-name{ margin:0; font-size:14px; }
.summary .org-meta{ margin:1px 0 0; font-size:12px; color:var(--text-muted); font-family:var(--mono); }
.summary .link{
  font:inherit; font-size:13px; padding:0; background:none; border:none; cursor:pointer;
  color:var(--text-2); text-decoration:underline; text-underline-offset:2px;
}
.summary .link:hover{ color:var(--text); }

.blocks{ margin-bottom:12px; }
.block{ background:var(--surface); border-radius:12px; margin-bottom:8px; overflow:hidden; }
.block-head{
  display:flex; align-items:center; gap:12px; width:100%; padding:14px 18px;
  background:none; border:none; cursor:pointer; color:var(--text); font:inherit; text-align:left;
  transition:background .1s;
}
.block-head:hover{ background:var(--surface-raised); }
.chev{
  width:8px; height:8px; flex-shrink:0;
  border-right:2px solid var(--text-2); border-bottom:2px solid var(--text-2);
  transform:rotate(-45deg); transition:transform .15s; margin-left:3px; margin-right:4px;
}
.block-head[aria-expanded="true"] .chev{ transform:rotate(45deg); }
.block-title{ flex:1; min-width:0; font-size:15px; font-weight:500; }
.block-sub{ margin:1px 0 0; font-size:12px; color:var(--text-muted); font-weight:400; display:block; }
.block-count{ font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.block-count.full{ color:var(--st-done-fg); }
.minibar{ width:52px; height:4px; border-radius:2px; flex-shrink:0; background:rgba(0,0,0,.24); overflow:hidden; }
.minibar > span{ display:block; height:100%; border-radius:2px; background:var(--accent); transition:width .25s; }
.minibar > span.full{ background:var(--st-done-fg); }

.block-body{ padding:4px 18px 18px; border-top:1px solid var(--border-soft); background:var(--surface-sunk); }
.block-body[hidden]{ display:none; }
.block-body .field:first-child{ margin-top:16px; }

.block.gated .block-head{ cursor:not-allowed; }
.block.gated .block-title, .block.gated .block-count{ color:var(--text-muted); }

label{ display:block; font-size:13px; color:var(--text-2); margin-bottom:5px; }
label .req{ color:var(--accent); }
.field{ margin-bottom:16px; }

input[type=text], input[type=email], input[type=number], input[type=date], select, textarea{
  width:100%; font:inherit; font-size:14px; padding:9px 11px; border-radius:var(--radius);
  background:var(--surface-sunk); color:var(--text); border:1px solid var(--border-soft);
  transition:border-color .12s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); }
input::placeholder{ color:var(--text-muted); }

.radios{ display:flex; gap:8px; flex-wrap:wrap; }
.radio{
  font-size:13px; padding:7px 14px; border-radius:var(--radius);
  background:var(--surface-sunk); color:var(--text-2);
  border:1px solid var(--border-soft); cursor:pointer; transition:all .1s;
}
.radio:hover{ border-color:var(--border); color:var(--text); }
.radio.on{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); font-weight:500; }

.ev{ display:flex; align-items:center; gap:8px; margin-top:7px; font-size:12px; color:var(--text-muted); }
.ev .ev-input{ flex:1; min-width:0; max-width:340px; font-size:12px; padding:6px 9px; }
.ev span{ flex:1; }

.warn{
  margin-top:7px; padding:8px 11px; border-left:3px solid var(--accent);
  background:rgba(232,184,75,.09); font-size:12px; color:var(--text-2);
}

/* Alpha per-field marks (✓ ok / ⚠ flag) sit left of each question label; grey when stale. */
.mark{ display:inline-block; width:1.15em; margin-right:.35em; font-weight:700; text-align:center; line-height:1; }
.mark.ok{ color:#5bb98a; }
.mark.flag{ color:var(--accent); cursor:help; }
.mark.stale{ opacity:.3; }
.alpha-note{
  margin:12px 0; padding:9px 12px; border-left:3px solid var(--accent);
  background:rgba(232,184,75,.09); font-size:12.5px; color:var(--text-2); border-radius:0 6px 6px 0;
}

/* Verdict summary — colour follows the verdict; clickable list of flagged items. */
.alpha-summary{ margin:12px 0; padding:10px 12px; border-radius:8px; border-left:3px solid; font-size:13px; }
.alpha-summary.warn{ border-color:var(--accent); background:rgba(232,184,75,.09); }
.alpha-summary.ok{ border-color:#5bb98a; background:rgba(91,185,138,.10); }
.alpha-head{ margin:0; font-weight:600; }
.alpha-summary.warn .alpha-head{ color:#c69a2e; }
.alpha-summary.ok .alpha-head{ color:#4aa578; }
.alpha-flags{ list-style:none; margin:8px 0 0; padding:0; }
.alpha-flags li{ margin:4px 0; }
.alpha-flags a{ display:block; text-decoration:none; color:inherit; padding:6px 8px; border-radius:6px; }
.alpha-flags a:hover{ background:rgba(232,184,75,.12); }
.alpha-flags .q{ display:block; font-weight:600; color:var(--text); }
.alpha-flags .m{ display:block; color:var(--text-2); margin-top:2px; }
.alpha-flags li.grouped summary{ cursor:pointer; padding:6px 8px; border-radius:6px; font-weight:600; color:var(--text-2); }
.alpha-flags li.grouped summary:hover{ background:rgba(232,184,75,.12); }
.alpha-sub{ list-style:none; margin:2px 0 0 14px; padding:0; }
.alpha-sub .q{ font-weight:500; color:var(--text-2); }
.field.flash{ animation:alphaflash 1.2s ease-out; }
@keyframes alphaflash{ from{ background:rgba(232,184,75,.22); } to{ background:transparent; } }
.warn[hidden]{ display:none; }

.signal{
  padding:12px 16px; margin-bottom:16px; border-radius:var(--radius);
  border-left:3px solid var(--st-done-fg); background:var(--st-done-bg); color:var(--st-done-fg);
  font-size:14px;
}
.signal[hidden]{ display:none; }

.wizard-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:22px; padding-top:16px; border-top:1px solid var(--border-soft);
}
.saved{ font-size:12px; color:var(--text-muted); }
.saved.on{ color:var(--st-done-fg); }
.foot-btns{ display:flex; gap:8px; }

.foot{
  margin-top:40px; padding-top:16px; border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; color:var(--text-muted);
}
.foot p{ margin:0; }
.foot nav{ display:flex; gap:16px; }
.foot a{ color:var(--text-muted); text-decoration:none; }
.foot a:hover{ color:var(--text-2); text-decoration:underline; }