/* Tokens e casca compartilhados do Painel Percar — mesma identidade do gerador de propostas */
:root{
  --navy:#1F2A38; --ink:#2C3E51; --blue:#4078BC; --sky:#9DC3E6;
  --red:#BD352E; --green:#2E7D52; --amber:#B57A1E;
  --surf:#F1F4F8; --line:#DCE3EB; --muted:#6B7A8A; --white:#fff;
  --pad:20px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--surf); color:var(--ink); font:15px/1.5 'IBM Plex Sans',system-ui,sans-serif}
h1,h2,h3,.num{font-family:'Archivo',system-ui,sans-serif}
.num{font-variant-numeric:tabular-nums; font-family:'IBM Plex Mono'}
a{color:var(--blue)}

/* ---------- topo ---------- */
header.top{background:var(--navy); color:#fff; padding:18px var(--pad); display:flex; align-items:center; gap:16px; flex-wrap:wrap}
header.top img{height:36px}
header.top .t{font:600 18px/1.2 'Archivo'}
header.top .s{color:var(--sky); font-size:12.5px}
nav.mods{display:flex; gap:4px; margin-left:auto; align-items:center; flex-wrap:wrap}
nav.mods a{color:#A9BACB; text-decoration:none; font:500 14px 'IBM Plex Sans'; padding:9px 15px; border-radius:7px}
nav.mods a[aria-current=page]{background:#2A3949; color:#fff}
nav.mods a:hover{color:#fff}
nav.mods .quem{color:var(--sky); font-size:12.5px; padding:0 10px 0 16px; border-left:1px solid #3C4C5E; margin-left:10px}
nav.mods button.sair{background:transparent; border:0; color:#8FA0B2; font:500 12.5px 'IBM Plex Sans'; cursor:pointer; padding:9px 10px}
nav.mods button.sair:hover{color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:1360px; margin:0 auto; padding:var(--pad)}
.card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:16px}
.card > h2{margin:0 0 4px; font-size:16px; font-weight:600; color:var(--navy)}
.card > .hint{margin:0 0 14px; font-size:12.5px; color:var(--muted)}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
label{display:block; font-size:12px; font-weight:500; color:var(--muted); margin-bottom:5px}
input,select,textarea{width:100%; font:15px 'IBM Plex Sans'; color:var(--ink); padding:9px 11px; border:1px solid var(--line); border-radius:7px; background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
input[type=number]{font-family:'IBM Plex Mono'}

button.go{padding:12px 18px; border:0; border-radius:9px; cursor:pointer; background:var(--blue); color:#fff; font:600 14px 'Archivo'}
button.go:hover{background:#35659F}
button.go:disabled{background:var(--muted); cursor:progress}
button.sec{border:1px solid var(--line); background:#fff; color:var(--ink); font:500 13px 'IBM Plex Sans'; padding:9px 13px; border-radius:7px; cursor:pointer}
button.sec:hover{border-color:var(--blue); color:var(--blue)}
.status{font-size:12.5px; color:var(--muted); min-height:18px; margin-top:9px}
.aviso{background:#FFF8E8; border:1px solid #EBD9A8; border-radius:8px; padding:11px 14px; font-size:12.5px; color:#6A5A34; margin-bottom:14px}
.erro{background:#FBEDEC; border:1px solid #F2A9A4; border-radius:8px; padding:11px 14px; font-size:12.5px; color:var(--red); margin-bottom:14px}
.tag{display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; background:#E8EFF7; color:var(--blue)}
.tag.ok{background:#EDF5EF; color:var(--green)}
.tag.no{background:#FBEDEC; color:var(--red)}
.tag.warn{background:#FFF8E8; color:var(--amber)}

/* ---------- tabelas ---------- */
table.dados{width:100%; border-collapse:collapse; font-size:13.5px}
table.dados th{text-align:left; font:500 11.5px 'IBM Plex Sans'; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); padding:0 10px 9px; border-bottom:1px solid var(--line); white-space:nowrap}
table.dados td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
table.dados tr:last-child td{border-bottom:0}
table.dados .r,table.dados th.r{text-align:right; font-family:'IBM Plex Mono'; font-variant-numeric:tabular-nums}
table.dados .pos{color:var(--green)} table.dados .neg{color:var(--red)}
table.dados tr.tot td{font-weight:600; background:var(--surf)}
.vazio{padding:44px 10px; text-align:center; color:var(--muted); font-size:14px}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px}
.kpi{background:var(--navy); color:#fff; border-radius:10px; padding:16px 18px}
.kpi span{display:block; font-size:11.5px; color:var(--sky)}
.kpi strong{display:block; font:700 24px/1.2 'Archivo'; margin-top:4px; letter-spacing:-.3px; font-variant-numeric:tabular-nums}
.kpi.claro{background:#fff; color:var(--navy); border:1px solid var(--line)}
.kpi.claro span{color:var(--muted)}

/* ---------- login ---------- */
#login{position:fixed; inset:0; background:var(--navy); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50}
#login .box{width:100%; max-width:380px}
#login img{height:44px; margin-bottom:26px}
#login h1{margin:0 0 6px; font:600 22px 'Archivo'; color:#fff}
#login p.sub{margin:0 0 22px; font-size:13px; color:var(--sky)}
#login label{color:#A9BACB}
#login input{background:#2A3949; border-color:#3C4C5E; color:#fff; margin-bottom:14px}
#login input::placeholder{color:#6B7A8A}
#login .err{min-height:20px; font-size:13px; color:#F2A9A4; margin:2px 0 10px}
#login button.go{width:100%; padding:14px}

/* ---------- home: módulos ---------- */
.mods-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.mod{display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 22px 20px; position:relative; overflow:hidden}
.mod:hover{border-color:var(--blue)}
.mod .k{font:600 11px 'IBM Plex Sans'; letter-spacing:.8px; text-transform:uppercase; color:var(--blue)}
.mod h2{margin:8px 0 6px; font-size:19px; color:var(--navy)}
.mod p{margin:0; font-size:13px; color:var(--muted)}
.mod .n{position:absolute; right:18px; top:16px; font:700 34px/1 'Archivo'; color:#E8EFF7}
.mod.breve{opacity:.75}
.mod.breve .k{color:var(--amber)}
footer{max-width:1360px; margin:0 auto; padding:4px var(--pad) 34px; font-size:12px; color:var(--muted)}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}