/* Base visual compartilhada pelos protótipos Missão Rio Verde */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");
:root{
  --bg:#F3F5F4; --surface:#FFFFFF; --fg:#16201D; --muted:#5B6A65; --line:#D7DEDB;
  --soil:#A8441E; --soil-soft:#F4E2D9; --leaf:#2F6B4F; --leaf-soft:#DDEDE4;
  --amber:#9A6A00; --amber-soft:#F5EACB; --sky:#2D5F8A; --sky-soft:#DCE7F1; --bad:#B3261E; --bad-soft:#F7DEDC;
  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111816; --surface:#18211E; --fg:#E7EEEB; --muted:#9AAAA4; --line:#2A3632;
  --soil:#E08A62; --soil-soft:#3A2419; --leaf:#7CC4A0; --leaf-soft:#1C3329;
  --amber:#E2B54F; --amber-soft:#382D12; --sky:#7FB3E0; --sky-soft:#16283A; --bad:#F2867E; --bad-soft:#3B1A18; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111816; --surface:#18211E; --fg:#E7EEEB; --muted:#9AAAA4; --line:#2A3632;
  --soil:#E08A62; --soil-soft:#3A2419; --leaf:#7CC4A0; --leaf-soft:#1C3329;
  --amber:#E2B54F; --amber-soft:#382D12; --sky:#7FB3E0; --sky-soft:#16283A; --bad:#F2867E; --bad-soft:#3B1A18; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--f-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 56px}
.wrap{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em}
h2{font-size:19px;font-weight:700}
h3{font-size:15px;font-weight:700}
p{margin:0}
a{color:var(--sky)}
.top{display:flex;flex-direction:column;gap:8px;max-width:75ch}
.top p{color:var(--muted)}
.back{font:500 13px var(--f-mono);text-decoration:none;color:var(--muted)}
.eyebrow{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soil)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid>*{min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel.hl{border-color:var(--soil)}
.k{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.big{font:700 34px/1 var(--f-display);font-variant-numeric:tabular-nums}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
select,input[type=number],input[type=date],input[type=text]{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
input[type=range]{accent-color:var(--soil);width:100%}
button{font:600 14px var(--f-body);border-radius:7px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);padding:8px 14px;cursor:pointer}
button.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--soil);outline-offset:2px}
.pill{display:inline-block;font:600 12px var(--f-body);padding:3px 10px;border-radius:999px}
.ok{background:var(--leaf-soft);color:var(--leaf)} .warn{background:var(--amber-soft);color:var(--amber)} .no{background:var(--bad-soft);color:var(--bad)}
.note{font-size:13px;color:var(--muted);border-left:3px solid var(--amber);padding-left:10px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
th{font:500 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.scroll{overflow-x:auto}
svg text{fill:var(--muted);font:11px var(--f-mono)}
.sample{font:500 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--amber);background:var(--amber-soft);padding:3px 8px;border-radius:4px;align-self:flex-start}
canvas{max-width:100%;display:block;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
button.ghost[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}