:root{
  --fundo:#0b1220; --topo:#111c30; --painel:#121e30; --borda:#27364d; --campo:#18263b; --campo-borda:#33445e;
  --texto:#e8eef9; --mudo:#94a6bf; --azul:#1675c9; --azul-claro:#91d9ff; --teal:#39b4c9;
  --bom:#61dfb2; --ruim:#ff8c95; --alerta:#ffbd75;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;color:var(--texto);background:var(--fundo)}
body{margin:0;background:var(--fundo);font-size:14px;line-height:1.45}
a{color:var(--azul-claro);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:25px;margin:3px 0} h2{font-size:17px;margin:0 0 14px} h2.sub{margin-top:22px;font-size:15px}
.mudo{color:var(--mudo);font-size:12px} .pequeno{font-size:11px} .caps{text-transform:uppercase;letter-spacing:.06em}
.centro{text-align:center} .num{text-align:right;font-variant-numeric:tabular-nums} .bom{color:var(--bom)} .ruim{color:var(--ruim)}

.topo{background:var(--topo);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:5}
.topo-in{max-width:1700px;margin:auto;padding:10px 32px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:9px;color:var(--texto);font-size:16px} .marca:hover{text-decoration:none}
.marca-ico{color:var(--teal);font-size:22px} .marca-ico.grande{font-size:42px}
.menu{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.menu a{padding:7px 12px;border-radius:8px;color:var(--mudo)} .menu a:hover{background:#1a2a41;text-decoration:none;color:var(--texto)}
.menu a.on{background:#193452;color:var(--azul-claro)}
.sair{display:flex;align-items:center;gap:10px;margin:0} .quem{color:var(--mudo);font-size:12px}

.pagina{max-width:1700px;margin:auto;padding:26px 32px 60px}
.cabeca{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;flex-wrap:wrap;margin-bottom:20px}
.tag{background:#193452;padding:6px 12px;border-radius:18px;color:var(--azul-claro);font-size:12px;white-space:nowrap}

input,select,button,.btn,.btn-sec{font:inherit}
input,select{background:var(--campo);color:var(--texto);border:1px solid var(--campo-borda);padding:10px 11px;border-radius:9px;min-width:135px;max-width:100%}
input[type=checkbox]{min-width:0;width:auto}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.btn,.btn-sec,button{cursor:pointer;border:0;border-radius:9px;padding:10px 16px;display:inline-block;text-align:center}
.btn,button.btn{background:var(--azul);color:#fff} .btn:hover{background:#1a85e0;text-decoration:none}
.btn-sec,button.btn-sec,.sair button{background:var(--campo);color:var(--texto);border:1px solid var(--campo-borda);padding:8px 13px}
.btn-sec:hover{background:#20324b;text-decoration:none} .btn-link{color:var(--mudo);font-size:12px}

.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.filtros input[name=q]{min-width:260px;flex:1}

.painel{background:var(--painel);border:1px solid var(--borda);border-radius:13px;padding:18px;margin-top:18px}
.cabeca+.painel,.filtros+.painel{margin-top:0}
.cards{display:grid;gap:13px} .c5{grid-template-columns:repeat(5,minmax(150px,1fr))} .c4{grid-template-columns:repeat(4,minmax(150px,1fr))}
.faixa{margin-top:18px}
.card{background:#0f1a2b;border:1px solid var(--borda);border-radius:11px;padding:16px}
.card.destaque{border-color:#2d5a86;background:#102237}
.card .rotulo{font-size:12px;color:#aabbd0} .card .valor{font-size:24px;font-weight:700;margin:8px 0 3px;overflow-wrap:anywhere}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px} .grade .painel{margin-top:0}
.dica{margin-top:10px;color:#a5b6ca;font-size:12px}

.barra{display:grid;grid-template-columns:150px 1fr 60px;gap:12px;align-items:center;margin:10px 0;font-size:13px;color:var(--texto)}
a.barra:hover{text-decoration:none;background:#17263b;border-radius:8px}
.b-rot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .barra b{text-align:right}
.b-trilho{height:12px;background:#25354c;border-radius:8px;overflow:hidden;display:block}
.b-fill{display:block;height:100%;background:linear-gradient(90deg,#188ce1,#49d4c7);border-radius:8px}
.b-fill.f-faturado{background:linear-gradient(90deg,#2aa876,#61dfb2)} .b-fill.f-retido{background:linear-gradient(90deg,#d9822b,#ffbd75)}
.b-fill.f-encerrado{background:#6b7d96} .b-fill.f-a_validar{background:#a07be0}

.colunas{display:flex;align-items:flex-end;gap:6px;height:210px;padding-top:6px;overflow-x:auto}
.col{flex:1;min-width:34px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.col-b{width:100%;max-width:38px;background:linear-gradient(0deg,#188ce1,#49d4c7);border-radius:5px 5px 0 0;min-height:2px}
.col-n{font-size:11px;color:var(--mudo)} .col-m{font-size:10px;color:var(--mudo);white-space:nowrap}

.alertas{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.alerta{display:flex;gap:14px;align-items:center;background:#0f1a2b;border:1px solid var(--borda);border-left:4px solid var(--mudo);border-radius:10px;padding:12px 14px;color:var(--texto)}
.alerta:hover{text-decoration:none;background:#17263b} .alerta.ativo{outline:2px solid var(--teal)}
.alerta.n-alto{border-left-color:var(--ruim)} .alerta.n-medio{border-left-color:var(--alerta)} .alerta.n-baixo{border-left-color:var(--teal)}
.alerta-n{font-size:26px;font-weight:750;min-width:58px;text-align:right;font-variant-numeric:tabular-nums}
.alerta-t{display:flex;flex-direction:column;gap:2px} .alerta-t small{color:var(--mudo);font-size:11.5px} .alerta-v{color:var(--alerta)!important;font-weight:600}

.tabela-rolagem{overflow:auto;max-height:680px;margin-top:10px}
table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}
th,td{padding:10px 11px;border-bottom:1px solid #28364b;text-align:left;vertical-align:middle}
th.num{text-align:right} th{position:sticky;top:0;background:#1a2a41;z-index:1}
tr:hover td{background:#17263b}
td input,td select{padding:6px 8px;min-width:0;width:100%}
.acoes{display:flex;gap:6px}
.pilula{border-radius:12px;background:#273d58;padding:3px 9px;font-size:11.5px;display:inline-block}
.pilula.f-faturado{background:#14442f;color:var(--bom)} .pilula.f-retido{background:#4a3417;color:var(--alerta)}
.pilula.f-aberto{background:#173a5c;color:var(--azul-claro)} .pilula.f-encerrado{background:#2b3544;color:#b3c0d2}
.pilula.f-a_validar{background:#3a2c5e;color:#cdb8ff}
.paginacao{display:flex;gap:14px;align-items:center;justify-content:center;margin:14px 0 4px}

.ficha{display:grid;grid-template-columns:200px 1fr;gap:9px 14px;margin:0} .ficha dt{color:var(--mudo)} .ficha dd{margin:0;overflow-wrap:anywhere}
.linha-tempo{list-style:none;padding:0;margin:0} .linha-tempo li{padding:8px 0;border-bottom:1px solid #28364b}

.aviso{background:#1b2d44;border:1px solid #2d5a86;border-radius:10px;padding:12px 15px;margin:0 0 16px}
.aviso.erro{background:#3a1a22;border-color:#8a3340;color:#ffd3d8} .aviso.ok{background:#12372a;border-color:#2a7a58;color:#c8f5e0}
code.senha{background:#0b1220;padding:3px 9px;border-radius:6px;font-size:16px;letter-spacing:.04em;user-select:all}

.login-caixa{max-width:400px;margin:7vh auto 0;background:var(--painel);border:1px solid var(--borda);border-radius:14px;padding:30px}
.login-marca{text-align:center;margin-bottom:22px} .login-marca h1{font-size:24px;margin:6px 0 2px}
.form-login{display:flex;flex-direction:column;gap:14px} .form-login label,.form-linha label,.form-grade label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mudo)}
.form-login input{width:100%}
.form-linha{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.form-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-items:end}
fieldset{border:1px solid var(--campo-borda);border-radius:9px;padding:8px 12px;margin:0} legend{font-size:12px;color:var(--mudo);padding:0 6px}
label.check{flex-direction:row;align-items:center;gap:6px;color:var(--texto);font-size:13px;display:inline-flex;margin-right:12px}

@media(max-width:1050px){.c5,.c4{grid-template-columns:repeat(2,1fr)}.grade{grid-template-columns:1fr}.ficha{grid-template-columns:150px 1fr}}
@media(max-width:560px){.pagina{padding:16px}.topo-in{padding:10px 16px}.c5,.c4{grid-template-columns:1fr}.barra{grid-template-columns:100px 1fr 48px}}