/* Papel branco, caneta azul e vermelha — como o rascunho. Tema unico. */
:root{
  --papel:#fff; --fundo:#fff; --zebra:#fafafa;
  --linha:#e3e3e0; --linha-forte:#1c1c1c; --grade:#efefec;
  --tinta:#1c1c1c; --tinta2:#6b7280;
  --azul:#1747a8; --azul-forte:#2d6fd4; --azul-fraco:#e4edf9;
  --verm:#c0392b; --verm-fraco:#fae3e0;
  --cinza:#4b5158; --cinza-fraco:#eceeeb;
  --ok:#1f7a45; --ok-fraco:#e0f0e6;
  --alerta:#8a5a10; --alerta-fraco:#fbf0d8;
  --f-num:"Roboto Mono",ui-monospace,"SF Mono",monospace;
  --f-tit:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-txt:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--fundo)}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--f-txt);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding:20px 18px 60px;display:flex;flex-direction:column;gap:14px}
.n{font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.r{text-align:right}
.neg{color:var(--verm)}
.dim{color:var(--tinta2)}

header{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;
  border-bottom:2px solid var(--linha-forte);padding-bottom:9px}
h1{margin:0;font-family:var(--f-tit);font-size:31px;font-weight:700;line-height:1;letter-spacing:.01em}
.sub{color:var(--tinta2);font-size:12.5px;margin-top:2px}
.stamp{font-family:var(--f-num);font-size:11px;color:var(--tinta2);text-align:right;line-height:1.6}

nav.abas{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--linha)}
nav.abas button{font-family:var(--f-tit);font-size:15.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:7px 15px;border:none;border-bottom:3px solid transparent;background:none;color:var(--tinta2);cursor:pointer}
nav.abas button:hover{color:var(--tinta)}
nav.abas button[aria-selected="true"]{color:var(--azul);border-bottom-color:var(--azul)}
nav.abas button:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}

.filtros{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:2px 0 4px}
.filtros .lbl{font-family:var(--f-tit);font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta2)}
select,input[type=search]{font-family:var(--f-txt);font-size:13px;padding:5px 9px;border-radius:5px;
  border:1px solid var(--linha);background:var(--papel);color:var(--tinta)}
input[type=search]{min-width:190px}
select:focus-visible,input:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.pill{font-size:12.5px;padding:4px 11px;border-radius:999px;border:1px solid var(--linha);
  background:var(--papel);color:var(--tinta);cursor:pointer}
.pill:hover{border-color:var(--azul)}
.pill[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}
.pill:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.pill:disabled{opacity:.4;cursor:default}
button.acao{font-family:var(--f-txt);font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:5px;
  border:1px solid var(--azul);background:var(--azul);color:#fff;cursor:pointer}
button.acao.fantasma{background:var(--papel);color:var(--azul)}
button.acao:disabled{opacity:.5;cursor:default}

/* bloco: titulo, grafico e tabelinha lado a lado */
.bloco{background:var(--papel);border:1px solid var(--linha);border-radius:6px;overflow:hidden}
.bloco>h2{margin:0;padding:9px 14px;font-family:var(--f-tit);font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--linha);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bloco>h2 .nota{font-family:var(--f-txt);font-size:11.5px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--tinta2)}
.corpo{padding:14px}
.dupla{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:22px;align-items:start;padding:14px}
@media(max-width:820px){.dupla{grid-template-columns:1fr;gap:14px}}

/* tabelinha de detalhe ao lado do grafico */
table.detalhe{border-collapse:collapse;width:100%;font-size:13px}
table.detalhe th{font-family:var(--f-tit);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tinta2);text-align:left;padding:4px 7px;border-bottom:1px solid var(--linha);white-space:nowrap}
table.detalhe th.r{text-align:right}
table.detalhe td{padding:5px 7px;border-bottom:1px solid var(--linha)}
table.detalhe td.n{font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
table.detalhe tr.total td{font-weight:700;border-top:1.5px solid var(--linha-forte);border-bottom:none;padding-top:7px}
table.detalhe tr.sub td{color:var(--tinta2);font-size:12px;border-bottom:none;padding-top:2px}
table.detalhe tr.sub td:first-child{padding-left:16px}
.chave{display:inline-block;width:13px;height:13px;border-radius:2px;border:1.5px solid var(--linha-forte);
  margin-right:7px;vertical-align:-2px;flex:none}
.chave.vazio{background:transparent}
.chave.entrada{background:var(--azul-forte);border-color:var(--azul)}
.chave.saida{background:var(--verm);border-color:var(--verm)}
.chave.contorno{background:transparent;border-width:2px;border-color:var(--azul)}
.chave.hach-verm{background:var(--verm-fraco);border-color:var(--verm)}
.chave.hach-azul{background:var(--azul-fraco);border-color:var(--azul)}
.chave.cinza{background:var(--cinza-fraco);border-color:var(--cinza)}

svg{display:block;max-width:100%;height:auto}
.gx text{font-family:var(--f-num);font-size:9.5px;fill:var(--tinta2)}
.gx line{stroke:var(--grade);stroke-width:1}
.bl{font-family:var(--f-num);font-size:9px;fill:var(--tinta2)}

/* tabelas grandes */
.rolagem{overflow-x:auto}
table.grande{border-collapse:collapse;width:100%}
table.grande th{font-family:var(--f-tit);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tinta2);text-align:left;padding:8px 11px;border-bottom:1.5px solid var(--linha);white-space:nowrap;
  position:sticky;top:0;background:var(--papel);z-index:1}
table.grande th.r{text-align:right}
table.grande td{padding:6px 11px;border-bottom:1px solid var(--linha)}
table.grande td.n{font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
table.grande tbody tr:nth-child(even){background:var(--zebra)}
table.grande tbody tr:hover{background:var(--azul-fraco)}
table.grande tbody tr.clicavel{cursor:pointer}
table.grande tbody tr.grupo td{background:var(--cinza-fraco);font-family:var(--f-tit);font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
table.grande tbody tr.somatorio td{font-weight:700;border-top:1.5px solid var(--linha);background:var(--zebra)}
table.grande tfoot td{font-weight:700;border-top:2px solid var(--linha-forte);border-bottom:none;background:var(--papel);padding:9px 11px}

.tag{font-family:var(--f-num);font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap;display:inline-block}
.tag.ok{background:var(--ok-fraco);color:var(--ok)}
.tag.at{background:var(--alerta-fraco);color:var(--alerta)}
.tag.er{background:var(--verm-fraco);color:var(--verm)}
.tag.neutro{background:var(--cinza-fraco);color:var(--tinta2)}
.tag.e{background:var(--azul-fraco);color:var(--azul)}
.tag.s{background:var(--verm-fraco);color:var(--verm)}

.aviso{background:var(--alerta-fraco);border:1px solid var(--alerta);border-radius:6px;padding:10px 13px;font-size:12.5px}
.aviso b{color:var(--alerta)}
.aviso ul{margin:5px 0 0;padding-left:16px}
.aviso li{margin:2px 0}

.paginacao{display:flex;gap:9px;align-items:center;justify-content:space-between;padding:9px 14px;
  border-top:1px solid var(--linha);flex-wrap:wrap;font-size:12.5px}
.carregando,.sem-dados{padding:24px;text-align:center;color:var(--tinta2);font-size:12.5px}
footer{color:var(--tinta2);font-size:11.5px;font-family:var(--f-num);text-align:center;line-height:1.7}

/* faixa de totais do filtro (abas Conciliação, Movimentos, Em aberto, Motor) */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:6px;padding:11px 13px;
  display:flex;flex-direction:column;gap:2px}
.cartao .rot{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta2);font-weight:600}
.cartao .val{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:18px;font-weight:600}
.cartao .obs{font-size:11.5px;color:var(--tinta2)}
.cartao.destaque{border-color:var(--azul);border-width:1.5px}
.cartao.destaque .val{color:var(--azul)}

/* controle de periodo */
.periodo{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:9px 12px;margin-bottom:2px;
  background:var(--papel);border:1px solid var(--linha);border-radius:6px}
.periodo .lbl{font-family:var(--f-tit);font-size:13.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--tinta2)}
.periodo input[type=date]{font-family:var(--f-num);font-size:12.5px;padding:4px 7px;border-radius:5px;
  border:1px solid var(--linha);background:var(--papel);color:var(--tinta)}
.periodo input[type=date]:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.periodo .dim{font-size:12.5px}

/* portão de login */
.portao{max-width:400px;margin:12vh auto;padding:34px 30px;text-align:center;
  background:var(--papel);border:1px solid var(--linha);border-radius:10px}
.portao-marca{width:150px;height:auto;margin-bottom:22px}
.portao h1{font-family:var(--f-tit);font-size:27px;margin:0 0 8px}
.portao p{color:var(--tinta2);font-size:13.5px;margin:0 0 20px;line-height:1.6}
.portao-erro{color:var(--alerta);background:var(--alerta-fraco);border:1px solid var(--alerta);
  border-radius:6px;padding:12px 14px;text-align:left}
.portao code{font-family:var(--f-num);font-size:12px}

/* marca no cabeçalho e por empresa */
.marca{display:flex;align-items:center;gap:13px}
.marca img{height:34px;width:auto}
.marca-emp{height:19px;width:auto;vertical-align:-4px;margin-right:8px}
.usuario{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--tinta2);
  font-family:var(--f-num);justify-content:flex-end;margin-top:5px}
.usuario button{font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--linha);
  background:var(--papel);color:var(--tinta2);cursor:pointer}
.usuario button:hover{border-color:var(--azul);color:var(--azul)}

.aviso.erro-grave{background:var(--verm-fraco);border-color:var(--verm)}
.aviso.erro-grave b{color:var(--verm)}

/* botão de atualizar no cabeçalho */
.usuario #atualizar{font-family:var(--f-txt);font-size:11.5px;padding:2px 10px;border-radius:999px;
  border:1px solid var(--azul);background:var(--papel);color:var(--azul);cursor:pointer}
.usuario #atualizar:hover:not(:disabled){background:var(--azul-fraco)}
.usuario #atualizar:disabled{opacity:.55;cursor:default}

/* medições de uma obra: gráfico largo rola em vez de encolher.
   svg{max-width:100%} comprimiria as barras a ponto de ficarem ilegíveis. */
.corpo.rolagem > svg{max-width:none;width:auto;height:200px}
.bloco > .rolagem > table.detalhe{padding:0 14px 14px}
.bloco > .rolagem > table.detalhe th:first-child,
.bloco > .rolagem > table.detalhe td:first-child{padding-left:14px}