/* Identidade do protótipo aprovado: barra lateral por perfil, conteúdo ao centro, faixa amarela de aviso.
   Fontes do sistema (a CSP não aceita fontes de terceiros). Nada de style="" no HTML: a CSP recusa. */
:root{
  --fundo:#f3f4f2;--painel:#fff;--painel2:#eceeea;--linha:#d5d9d3;--texto:#1d2420;--suave:#5f6a63;
  --acento:#1f5f8b;--acento-suave:#dbe8f2;--acento-texto:#fff;
  --ok:#2f7a4a;--ok-suave:#dcefe2;--atencao:#a46a0b;--atencao-suave:#f8ecd4;--erro:#b0362c;--erro-suave:#f7dedb;
  --faixa:#ffd84d;--faixa-texto:#2a2200;--r:6px;
  --f-titulo:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-corpo:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --fundo:#141917;--painel:#1c2220;--painel2:#232a27;--linha:#323b37;--texto:#e6ebe7;--suave:#9aa59e;
  --acento:#6fb0dd;--acento-suave:#1f3443;--acento-texto:#0d1a22;
  --ok:#6cc68d;--ok-suave:#1d3326;--atencao:#e3ad4f;--atencao-suave:#3a2e17;--erro:#ef8076;--erro-suave:#3d221f;
  --faixa:#e9c437;--faixa-texto:#1d1700;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:15px/1.5 var(--f-corpo)}
h1,h2,h3{font-family:var(--f-titulo);margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:1.5rem}h2{font-size:1.15rem;margin-top:8px}h3{font-size:.98rem}
p{margin:0}
a{color:var(--acento)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
code{font-family:var(--f-mono);font-size:.85em;background:var(--painel2);padding:1px 6px;border-radius:4px;word-break:break-all}

/* faixa de aviso (toda atualização com mudança visível) */
.faixa{background:var(--faixa);color:var(--faixa-texto);padding:10px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-weight:500}
.faixa span{flex:1;min-width:200px}
.faixa button{background:transparent;border:1px solid var(--faixa-texto);border-radius:4px;padding:3px 10px;font-weight:600;cursor:pointer}

/* casca */
.casca{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.casca.sozinha{grid-template-columns:1fr}
.lado{background:var(--painel);border-right:1px solid var(--linha);padding:16px 12px;display:flex;flex-direction:column;gap:18px}
.marca{display:flex;gap:10px;align-items:center;padding:0 6px}
.marca-sinal{width:30px;height:30px;border:2px solid var(--texto);border-radius:4px;display:grid;place-items:center;font-family:var(--f-titulo);font-weight:700;font-size:.8rem}
.marca-nome{font-family:var(--f-titulo);font-weight:700;line-height:1.1}
.marca-nome small{display:block;font-family:var(--f-mono);font-weight:400;font-size:.66rem;color:var(--suave)}
.menu{display:flex;flex-direction:column;gap:2px}
.menu a{display:block;padding:7px 10px;border-radius:var(--r);color:var(--texto);text-decoration:none}
.menu a:hover{background:var(--painel2)}
.menu a[aria-current="page"]{background:var(--acento-suave);color:var(--acento);font-weight:600}
.quem{margin-top:auto;padding:10px;border-top:1px solid var(--linha);font-size:.85rem;display:flex;flex-direction:column;gap:4px}
.quem button{align-self:flex-start;background:none;border:0;padding:0;color:var(--acento);cursor:pointer}
.principal{min-width:0;padding:20px 24px 40px;display:flex;flex-direction:column;gap:18px}

/* comuns */
.cartao{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.entrada{max-width:400px;width:100%;margin:40px auto}
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.nota{color:var(--suave);font-size:.88rem}
.rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);font-weight:600}
label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--suave)}
label.marcar{flex-direction:row;align-items:center;gap:8px;color:var(--texto)}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;border:1px solid var(--linha);background:var(--fundo);border-radius:var(--r);padding:8px 10px;color:var(--texto)}
.btn{border:1px solid var(--linha);background:var(--painel);border-radius:var(--r);padding:7px 14px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--texto);display:inline-block}
.btn:hover{border-color:var(--suave)}
.btn.pri{background:var(--acento);border-color:var(--acento);color:var(--acento-texto)}
.btn.peq{padding:3px 10px;font-size:.85rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.linha{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.linha>label{flex:1;min-width:160px}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.erro{color:var(--erro);min-height:1em;font-size:.9rem}
.selo{display:inline-flex;align-items:center;padding:1px 9px;border-radius:99px;font-size:.78rem;font-weight:600;background:var(--painel2);color:var(--suave);white-space:nowrap}
.selo.ok{background:var(--ok-suave);color:var(--ok)}.selo.atencao{background:var(--atencao-suave);color:var(--atencao)}
.selo.ruim{background:var(--erro-suave);color:var(--erro)}.selo.acento{background:var(--acento-suave);color:var(--acento)}
.aviso{padding:10px 12px;border-radius:var(--r);background:var(--acento-suave)}
.aviso.atencao{background:var(--atencao-suave);color:var(--atencao)}
.tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--suave);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--linha)}
td{padding:9px 10px;border-bottom:1px solid var(--linha);vertical-align:middle}
tr:last-child td{border-bottom:0}
td .btn{margin:2px}
.qr{display:block;width:200px;height:200px;margin:4px auto;background:#fff;padding:6px;border-radius:var(--r)}
.codigos{columns:2;list-style:none;padding:0;margin:0}.codigos li{margin:6px 0}
.vazio{padding:28px 16px;text-align:center;color:var(--suave);border:2px dashed var(--linha);border-radius:var(--r)}

@media (max-width:760px){
  .casca{grid-template-columns:1fr;align-content:start}
  .lado{border-right:0;border-bottom:1px solid var(--linha);padding:12px 16px}
  .menu{flex-direction:row;flex-wrap:wrap}
  .quem{margin-top:0;flex-direction:row;flex-wrap:wrap;gap:12px;border-top:0;padding:0 6px}
  .principal{padding:16px}
  .entrada{margin:16px auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}