/* Marca Integral - preto, branco e ciano.
   O ciano e SO destaque e acao. Ambar e vermelho nunca mudam: alerta tem
   que continuar gritando na cor de alerta. */
:root{
  --preto:#0A0D10; --carvao:#12171C; --card:#161C22; --linha:#232B33;
  --branco:#F2F6F8; --cinza:#8A97A3; --cinza2:#5C6873;
  --ciano:#25D6E8; --ciano-fundo:rgba(37,214,232,.10);
  --verde:#2ECC8F; --ambar:#F5A623; --vermelho:#FF5A5F;
  --raio:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--preto); color:var(--branco);
  font:15px/1.5 "Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ciano);text-decoration:none}
a:hover{text-decoration:underline}

/* ------------------------------------------------------------- estrutura */
.topo{
  display:flex;align-items:center;gap:22px;
  padding:0 28px;height:62px;
  background:var(--carvao);border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:20;
}
.marca{font-weight:800;letter-spacing:.14em;font-size:13px;white-space:nowrap}
.marca b{color:var(--ciano)}
.topo nav{display:flex;gap:20px;flex:1}
.topo nav a{color:var(--cinza);font-size:14px;font-weight:500}
.topo nav a.on,.topo nav a:hover{color:var(--branco);text-decoration:none}
.quem{font-size:13px;color:var(--cinza);text-align:right;line-height:1.3}
.quem b{color:var(--branco);display:block;font-weight:600}
.papel{
  display:inline-block;margin-top:2px;padding:1px 7px;border-radius:20px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ciano-fundo);color:var(--ciano);
}
main{max-width:1240px;margin:0 auto;padding:28px}

h1{font-size:24px;margin:0 0 4px;font-weight:700;letter-spacing:-.01em}
h2{font-size:15px;margin:30px 0 12px;font-weight:600;color:var(--branco)}
.sub{color:var(--cinza);font-size:13px;margin:0 0 22px}

/* ---------------------------------------------------------------- cartoes */
.cartao{
  background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio);padding:20px;
}
.grade{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

.numero{background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio);padding:16px 18px}
.numero .rot{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cinza2);margin-bottom:7px;font-weight:600;
}
.numero .val{font-size:26px;font-weight:700;letter-spacing:-.02em}
.numero .obs{font-size:12px;color:var(--cinza);margin-top:4px}
.bom{color:var(--verde)} .ruim{color:var(--vermelho)} .atencao{color:var(--ambar)}
.destaque{color:var(--ciano)}
.vazio{color:var(--cinza2)}

/* ---------------------------------------------------------------- tabelas */
.rolagem{overflow-x:auto;border-radius:var(--raio);border:1px solid var(--linha)}
table{border-collapse:collapse;width:100%;background:var(--card);font-size:13px}
th,td{padding:9px 12px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--linha)}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;
  background:var(--card)}
thead th{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza2);font-weight:700;background:var(--carvao);
}
thead th:first-child{background:var(--carvao)}
tbody tr:hover td{background:#1B222A}
tbody tr:hover td:first-child{background:#1B222A}
tr.total td{font-weight:700;background:var(--carvao);border-top:2px solid var(--linha)}
tr.total td:first-child{background:var(--carvao)}
tr.branca td{color:var(--cinza2)}
.calculado{color:var(--cinza)}
.faixa td{
  background:#0E1318;color:var(--ciano);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
}
.faixa td:first-child{background:#0E1318}

/* ------------------------------------------------------------ formularios */
input,select,textarea{
  background:#0D1216;border:1px solid var(--linha);color:var(--branco);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ciano);box-shadow:0 0 0 3px var(--ciano-fundo)
}
input[readonly]{background:#0A0E11;color:var(--cinza2)}
td input{padding:5px 7px;text-align:right;min-width:88px}
label{display:block;font-size:12px;color:var(--cinza);margin:0 0 5px;font-weight:500}
.campo{margin-bottom:16px}
.botao{
  background:var(--ciano);color:#04262B;border:0;border-radius:8px;
  padding:10px 20px;font-weight:700;font-size:14px;cursor:pointer;width:auto;
}
.botao:hover{filter:brightness(1.1)}
.botao.fantasma{background:transparent;color:var(--ciano);
  border:1px solid var(--ciano)}
.barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.barra select{width:auto;min-width:130px}
.direita{margin-left:auto}

/* --------------------------------------------------------------- avisos */
.aviso{padding:11px 15px;border-radius:9px;margin-bottom:14px;font-size:14px}
.aviso.ok{background:rgba(46,204,143,.12);color:var(--verde);
  border:1px solid rgba(46,204,143,.3)}
.aviso.erro{background:rgba(255,90,95,.12);color:var(--vermelho);
  border:1px solid rgba(255,90,95,.3)}

/* ----------------------------------------------------------------- abas */
.cabeca{
  background:var(--carvao);border:1px solid var(--linha);
  border-radius:var(--raio);padding:20px 22px 0;margin-bottom:22px;
}
.cabeca .titulo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.selo{
  font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;
  background:var(--ciano-fundo);color:var(--ciano);
}
.selo.cinza{background:#1E252C;color:var(--cinza)}
.abas{display:flex;gap:4px;margin-top:18px}
.abas a{
  padding:9px 15px;font-size:13px;color:var(--cinza);font-weight:500;
  border-bottom:2px solid transparent;
}
.abas a.on{color:var(--ciano);border-bottom-color:var(--ciano)}
.abas a:hover{color:var(--branco);text-decoration:none}

/* ------------------------------------------------------------- barra meta */
.trilho{height:8px;background:#0D1216;border-radius:20px;overflow:hidden;
  margin:10px 0 6px}
.trilho i{display:block;height:100%;background:var(--ciano);border-radius:20px}
.trilho i.bateu{background:var(--verde)}
.trilho i.longe{background:var(--ambar)}

/* --------------------------------------------------------------- passos */
.passos{list-style:none;padding:0;margin:0}
.passos li{
  display:flex;gap:14px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--linha);
}
.passos li:last-child{border-bottom:0}
.bolinha{
  width:22px;height:22px;border-radius:50%;flex:0 0 22px;margin-top:1px;
  border:2px solid var(--linha);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;color:var(--cinza2);
}
.passos li.feito .bolinha{background:var(--verde);border-color:var(--verde);
  color:#04231A}
.passos li.agora .bolinha{border-color:var(--ciano);color:var(--ciano);
  box-shadow:0 0 0 4px var(--ciano-fundo)}
.passos li.agora .nome{color:var(--ciano);font-weight:700}
.passos .nome{font-weight:500}
.passos .quando{font-size:12px;color:var(--cinza2)}

/* ---------------------------------------------------------------- entrar */
.porta{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px}
.porta .cartao{width:100%;max-width:390px;padding:34px}
.porta .marca{font-size:15px;margin-bottom:6px}
.porta h1{font-size:20px;margin-bottom:24px}
.porta .botao{width:100%;margin-top:6px}

.rodape{color:var(--cinza2);font-size:12px;text-align:center;padding:30px}
@media(max-width:700px){
  main{padding:16px}
  .topo{padding:0 16px;gap:14px}
  .topo nav{display:none}
}