:root { --fundo:#f5f6f8; --papel:#fff; --texto:#1b2430; --suave:#5d6978; --linha:#e2e6eb; --marca:#1f3a5f;
  --alerta:#b3261e; --alerta-bg:#fdecea; --atencao:#8a5a00; --atencao-bg:#fff4dc; --ok:#1a7346; --ok-bg:#e4f5ec; --neutro-bg:#eef1f4; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--fundo); color:var(--texto); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; background:var(--papel); border:1px solid var(--linha); border-radius:8px; padding:7px 12px; }
button:hover { border-color:#b9c2cd; }
button:disabled { opacity:.55; cursor:default; }
:focus-visible { outline:2px solid var(--marca); outline-offset:2px; }
button.primario { background:var(--marca); border-color:var(--marca); color:#fff; font-weight:600; }
h1 { font-size:18px; margin:0; } h1 span { color:var(--suave); font-weight:400; }
h2 { font-size:16px; margin:0; } h2 span { color:var(--suave); font-weight:400; }
.topo { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--papel); border-bottom:1px solid var(--linha); }
.acoes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.atualizado { color:var(--suave); font-size:13px; }
main { max-width:1240px; margin:0 auto; padding:20px 24px 48px; display:grid; gap:24px; }
section { min-width:0; }
.mes { display:flex; align-items:center; gap:10px; }
.mes h2 { min-width:170px; text-align:center; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:10px; }
.card { display:flex; flex-direction:column; gap:2px; text-align:left; background:var(--papel); border:1px solid var(--linha); border-radius:12px; padding:14px 16px; }
.card small { color:var(--suave); font-size:13px; }
.card strong { font-size:24px; font-variant-numeric:tabular-nums; line-height:1.25; }
.card em { font-style:normal; color:var(--suave); font-size:13px; }
.card.alerta strong { color:var(--alerta); } .card.atencao strong { color:var(--atencao); } .card.ok strong { color:var(--ok); }
.filtros { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px; scroll-margin-top:12px; }
.abas { display:flex; flex-wrap:wrap; gap:6px; }
.abas button span { color:var(--suave); font-size:13px; }
.abas button[aria-selected="true"] { background:var(--marca); border-color:var(--marca); color:#fff; }
.abas button[aria-selected="true"] span { color:#d7e2ef; }
input { background:var(--papel); border:1px solid var(--linha); border-radius:8px; padding:8px 11px; }
#busca { width:280px; max-width:100%; }
.tabela { overflow-x:auto; background:var(--papel); border:1px solid var(--linha); border-radius:12px; }
table { width:100%; border-collapse:collapse; min-width:820px; }
th,td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--linha); vertical-align:middle; }
th { font-size:13px; color:var(--suave); font-weight:600; background:#fafbfc; }
.ordenar { background:none; border:0; border-radius:4px; padding:0; font-weight:600; color:inherit; white-space:nowrap; }
.ordenar:hover { color:var(--texto); text-decoration:underline; }
th[aria-sort] .ordenar { color:var(--texto); }
tfoot td { font-weight:700; border-bottom:0; background:#fafbfc; }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cliente { font-weight:600; }
.desc { color:var(--suave); max-width:300px; font-size:14px; }
.links { white-space:nowrap; font-size:14px; }
a { color:var(--marca); }
.selo { display:inline-block; padding:2px 9px; border-radius:99px; font-size:13px; white-space:nowrap; background:var(--neutro-bg); color:var(--suave); }
.selo.alerta { background:var(--alerta-bg); color:var(--alerta); } .selo.atencao { background:var(--atencao-bg); color:var(--atencao); } .selo.ok { background:var(--ok-bg); color:var(--ok); }
.vazio { text-align:center; color:var(--suave); padding:32px; }
.erro { background:var(--alerta-bg); color:var(--alerta); padding:9px 12px; border-radius:8px; margin:0; }
.tela-login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login, dialog form { display:grid; gap:14px; }
.login { width:min(360px,100%); background:var(--papel); border:1px solid var(--linha); border-radius:14px; padding:26px; }
label { display:grid; gap:5px; font-size:14px; font-weight:600; }
dialog { border:1px solid var(--linha); border-radius:14px; padding:22px; width:min(380px,92vw); color:var(--texto); }
dialog::backdrop { background:rgba(20,30,45,.4); }