:root{
  --navy:#0e2033; --navy2:#16304b; --linha:#e3e8ef; --fundo:#f4f6f9;
  --texto:#16202b; --suave:#6b7a8d; --ouro:#b89247; --verde:#1f7a4c; --vermelho:#a8322f;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--texto);background:var(--fundo)}
#shell{display:flex;min-height:100vh}

/* ---------- menu ---------- */
#menu{width:252px;flex:0 0 252px;background:var(--navy);color:#cfdbe8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.marca{display:flex;gap:10px;align-items:center;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.marca .logo{width:38px;height:38px;flex:0 0 38px;border-radius:9px;background:var(--ouro);color:#14202d;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.5px}
.marca b{display:block;font-size:13px;letter-spacing:.6px;color:#fff}
.marca span{display:block;font-size:11px;color:#8fa4bb}
#nav{flex:1;overflow-y:auto;padding:10px 8px}
#nav a,#nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;color:#cfdbe8;
  font:inherit;padding:9px 11px;border-radius:7px;cursor:pointer;text-decoration:none;margin-bottom:2px}
#nav a:hover,#nav button:hover{background:rgba(255,255,255,.07);color:#fff}
#nav a.on{background:var(--ouro);color:#14202d;font-weight:600}
#nav .ic{width:18px;text-align:center;opacity:.9;font-size:14px}
#nav .seta{margin-left:auto;font-size:10px;opacity:.6;transition:transform .15s}
#nav .aberto .seta{transform:rotate(90deg)}
#nav .sub{display:none;padding:2px 0 6px 20px}
#nav .sub.aberto{display:block}
#nav .sub a{font-size:13px;padding:7px 10px;color:#a9bdd3}
#nav .sub a .pt{margin-left:auto;font-size:11px;color:#7f93aa;font-variant-numeric:tabular-nums}
#nav .sub a.on .pt{color:#2d3b4a}
.rodape{padding:10px 16px;font-size:11px;color:#6d8199;border-top:1px solid rgba(255,255,255,.08)}

/* ---------- conteudo ---------- */
#tela{flex:1;min-width:0;padding:22px 26px 60px}
.carregando{color:var(--suave);padding:40px}
h1{font-size:19px;margin:0 0 2px;letter-spacing:.2px}
.sub1{color:var(--suave);font-size:12.5px;margin:0 0 18px}
.topo{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.topo .cresce{flex:1;min-width:200px}
.card{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:16px 18px}
.card h2{font-size:12px;letter-spacing:.9px;color:var(--suave);margin:0 0 12px;font-weight:700;text-transform:uppercase}

label{display:block;font-size:11px;letter-spacing:.5px;color:var(--suave);font-weight:700;text-transform:uppercase;margin-bottom:4px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid #cfd8e3;border-radius:7px;font:inherit;background:#fff;color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:2px solid #b7cce4;outline-offset:-1px;border-color:#7ea4cd}
input[readonly]{background:#f3f5f8;color:var(--suave)}
button.b{background:var(--navy);color:#fff;border:0;border-radius:7px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer}
button.b:hover{background:var(--navy2)}
button.b.alt{background:#fff;color:var(--navy);border:1px solid #cfd8e3}
button.b.perigo{background:#fff;color:var(--vermelho);border:1px solid #e0bcbb}
.grade{display:grid;gap:12px 14px}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--texto);text-transform:none;letter-spacing:0;font-weight:500;margin:0}
.chk input{width:auto;margin:0}

/* ---------- dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:14px;text-align:center}
.kpi .rot{font-size:10.5px;letter-spacing:.8px;font-weight:700;color:var(--suave);text-transform:uppercase;min-height:26px;display:flex;align-items:center;justify-content:center}
.kpi .pil{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:34px;padding:0 14px;
  border-radius:999px;color:#fff;font-weight:700;font-size:17px;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.kpi .vgv{font-size:9.5px;letter-spacing:1px;color:var(--suave);font-weight:700}
.kpi .val{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px}
.kpi.zero{opacity:.45}
.faixa{display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:stretch}
@media(max-width:900px){.faixa{grid-template-columns:1fr}}
.total{background:var(--navy);color:#fff;border:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.total .rot{font-size:11px;letter-spacing:1.4px;color:#9fb6cf;font-weight:700}
.total .qt{font-size:30px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.total .vg{font-size:19px;font-weight:700;color:var(--ouro);font-variant-numeric:tabular-nums}
.total .pq{font-size:11.5px;color:#9fb6cf}
.rosca{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.rosca svg{width:168px;height:168px}
.rosca .meio{font-size:26px;font-weight:800;fill:var(--navy)}
.rosca .meio2{font-size:9px;letter-spacing:1.2px;fill:#8794a5;font-weight:700}
.rosca .leg{font-size:11.5px;color:var(--suave);text-align:center}

/* ---------- tabela ---------- */
.rolo{overflow:auto;border:1px solid var(--linha);border-radius:12px;background:#fff;max-height:62vh}
table{border-collapse:collapse;width:100%;font-size:12.5px}
thead th{position:sticky;top:0;background:#eef2f7;text-align:left;padding:9px 10px;font-size:10.5px;letter-spacing:.6px;
  text-transform:uppercase;color:#53657a;border-bottom:1px solid var(--linha);white-space:nowrap;z-index:1}
tbody td{padding:7px 10px;border-bottom:1px solid #f0f3f7;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
tbody tr:hover{background:#f7f9fc}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.3px;color:#fff;background:#8494a6}
.tag.ASSINADOS{background:var(--verde)} .tag.EM_CONTRATO{background:#2a6aa8} .tag.RESERVA{background:#b07d20}
.tag.PERMUTA{background:#7a5ea8} .tag.VENDAS_INTERNAS{background:#2a8a8a} .tag.RETIRADA_SOCIOS{background:#5a6b7d}
.tag.ESTOQUE{background:#9aa7b5} .tag.INDISPONIVEL{background:#6a7480} .tag.DISTRATO{background:var(--vermelho)}
.tag.NAO_MAPEADO{background:#c2410c}
.aviso{background:#fff7e6;border:1px solid #f0d9a8;color:#7a5a12;border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.ok{background:#eaf6ef;border:1px solid #b9ddc7;color:#1a5c38;border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.erro{background:#fdeceb;border:1px solid #efc3c1;color:#8c2a27;border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.linhas{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.linhas > div{min-width:150px}
.est{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.est .card{border-left:5px solid var(--navy)}
.est .nm{font-size:13px;font-weight:700;margin-bottom:8px}
.est .ln{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;border-bottom:1px dashed #eceff4}
.est .ln:last-child{border:0} .est .ln b{font-variant-numeric:tabular-nums}
.barra{height:7px;border-radius:999px;background:#e7ecf2;overflow:hidden;margin-top:9px}
.barra i{display:block;height:100%;border-radius:999px}