:root{
  --papel:#F5F4F0; --cartao:#FFF; --tinta:#1F2B33; --tinta-suave:#5B6B74;
  --kraft:#B07C3E; --kraft-claro:#E9DCC8; --verde:#177A6B; --verde-claro:#DDEEE9;
  --coral:#D2553F; --coral-claro:#F6E2DC; --azul:#33627E; --ambar:#C99A2C;
  --linha:#E3E0D8; --raio:10px;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --sans:'Archivo',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--papel);color:var(--tinta);font-size:15px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;width:100%}
main.wrap{flex:1;padding-bottom:48px}
a{color:var(--azul)}

/* ---------- topo ---------- */
.topo{background:var(--tinta);color:#F4F1E9}
.topo-in{display:flex;align-items:center;gap:28px;padding:14px 20px;flex-wrap:wrap}
.marca{display:flex;flex-direction:column;line-height:1.15}
.marca strong{font-weight:750;font-variation-settings:'wdth' 112;font-size:19px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--kraft)}
.menu{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.menu a{color:#B9C3C6;text-decoration:none;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:7px}
.menu a:hover{color:#fff;background:rgba(255,255,255,.07)}
.menu a.ativo{color:#fff;background:rgba(255,255,255,.12)}
.sessao{display:flex;align-items:center;gap:12px;font-size:13px;color:#B9C3C6}
.sessao .sair{color:var(--kraft);text-decoration:none;font-weight:600}
.onda{height:10px;background:repeating-linear-gradient(90deg,var(--kraft) 0 5px,#8f6330 5px 7px,var(--kraft) 7px 12px);border-top:2px solid #8f6330}

/* ---------- tipografia / seções ---------- */
h1{font-weight:750;font-variation-settings:'wdth' 110;font-size:26px;margin:26px 0 4px}
h2{font-weight:700;font-variation-settings:'wdth' 106;font-size:19px;margin:30px 0 12px}
.sub{color:var(--tinta-suave);font-size:13.5px;margin-bottom:18px}

/* ---------- flash ---------- */
.flash{margin-top:18px;padding:12px 16px;border-radius:8px;font-size:14px;border:1px solid}
.flash-ok{background:var(--verde-claro);border-color:#bfe0d7;color:#0f5a4e}
.flash-erro{background:var(--coral-claro);border-color:#eec6bc;color:#93331f}

/* ---------- cards / KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:20px}
.kpi{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px 12px;box-shadow:0 2px 10px rgba(31,43,51,.05)}
.kpi .rot{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-suave)}
.kpi .val{font-family:var(--mono);font-weight:600;font-size:clamp(14px,1.5vw,18px);margin-top:6px;white-space:nowrap}
.kpi .det{font-size:12px;color:var(--tinta-suave);margin-top:3px}
.bt-verde{border-top:3px solid var(--verde)}.bt-coral{border-top:3px solid var(--coral)}
.bt-kraft{border-top:3px solid var(--kraft)}.bt-ambar{border-top:3px solid var(--ambar)}
.bt-azul{border-top:3px solid var(--azul)}
.pos{color:var(--verde)}.neg{color:var(--coral)}.amb{color:var(--ambar)}

.card{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:20px;margin-top:14px}
.card h3{font-size:15px;font-weight:650;margin-bottom:2px}
.card .hint{font-size:12.5px;color:var(--tinta-suave);margin-bottom:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chart-donut{position:relative;height:250px}
.chart-bar{position:relative;height:270px}

/* ---------- régua ---------- */
.regua{display:flex;height:52px;border-radius:6px;overflow:hidden;border:1px solid var(--linha)}
.regua .seg{display:flex;align-items:center;justify-content:center}
.regua .seg span{font-family:var(--mono);font-size:11.5px;font-weight:600;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.legenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.leg{display:flex;gap:8px;align-items:flex-start;font-size:12.5px}
.leg .q{width:11px;height:11px;border-radius:3px;margin-top:3px;flex-shrink:0}
.leg b{font-family:var(--mono);font-weight:600}
.leg small{display:block;color:var(--tinta-suave)}

/* ---------- filtros / formulários ---------- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;margin-top:16px}
label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
input,select,textarea{font-family:var(--sans);font-size:14px;padding:8px 10px;border:1px solid var(--linha);border-radius:7px;background:#fff;color:var(--tinta);min-width:130px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:1px}
.btn{display:inline-block;font-family:var(--sans);font-weight:650;font-size:13.5px;padding:9px 18px;border-radius:8px;border:none;cursor:pointer;text-decoration:none}
.btn-principal{background:var(--tinta);color:#fff}
.btn-principal:hover{background:#2c3d47}
.btn-kraft{background:var(--kraft);color:#fff}
.btn-suave{background:transparent;color:var(--tinta-suave);border:1px solid var(--linha)}
.btn-mini{font-size:12px;padding:5px 10px}
.btn-perigo{background:transparent;color:var(--coral);border:1px solid var(--coral-claro)}
form.inline{display:inline}

/* ---------- tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--cartao)}
.tabela-caixa{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);overflow:auto;margin-top:14px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-suave);text-align:left;padding:10px;border-bottom:2px solid var(--linha);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--linha);vertical-align:top}
tbody tr:hover{background:#FBFAF6}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
tfoot td{font-weight:600;border-top:2px solid var(--tinta);font-family:var(--mono)}
.badge{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 9px;border-radius:999px;text-transform:uppercase}
.badge.aberto{background:var(--kraft-claro);color:#7d5527}
.badge.parcial{background:#F3E6C4;color:#7c5e12}
.badge.recebido,.badge.ok{background:var(--verde-claro);color:var(--verde)}
.badge.interna{background:#E4E9EC;color:#4c626f}

/* ---------- login ---------- */
.login-fundo{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.login-caixa{background:var(--cartao);border:1px solid var(--linha);border-radius:14px;padding:34px;width:100%;max-width:400px;box-shadow:0 10px 40px rgba(31,43,51,.08)}
.login-caixa h1{margin:4px 0 2px;font-size:24px}
.login-caixa .sub{margin-bottom:20px}
.login-caixa form{display:flex;flex-direction:column;gap:14px}
.login-caixa input{min-width:0;width:100%}

.rodape{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--linha);font-size:12px;color:var(--tinta-suave)}

@media (max-width:960px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .regua .seg span{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}