:root {
  --fundo: #f5f6f4; --papel: #ffffff; --tinta: #1d2522; --suave: #5b6863; --linha: #e2e6e3;
  --marca: #0f5f4c; --marca-clara: #d7ebe4; --alerta: #b4410e; --alerta-fundo: #fbeee6; --ok: #2f7a3e;
  --barra: #2f6f8f; --barra-prev: #9cc3d6; --faixa: #d9e8ef;
  --sombra: 0 1px 2px rgba(20, 30, 25, .06), 0 4px 16px rgba(20, 30, 25, .05);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #121715; --papel: #1b2220; --tinta: #e6ece9; --suave: #9aa8a2; --linha: #2c3633;
          --marca: #5cc0a0; --marca-clara: #1f3a32; --alerta: #f0925f; --alerta-fundo: #3a2419; --ok: #7ccf8c;
          --barra: #6fb2d4; --barra-prev: #3b6275; --faixa: #22343c; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-size: 14px; line-height: 1.45; }
a { color: var(--marca); }
h1, h2 { font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 28px 0 4px; }
.sobretitulo { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }

/* entrada */
body.entrar { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.cartao-entrar { background: var(--papel); box-shadow: var(--sombra); border-radius: 14px; padding: 32px; max-width: 420px; }
.cartao-entrar h1 { margin: 2px 0 10px; font-size: 22px; }
.botao { display: inline-block; margin: 14px 0 8px; background: var(--marca); color: #fff; text-decoration: none;
         padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.nota { color: var(--suave); font-size: 12px; margin: 0; }

/* topo e status */
.topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px;
        background: var(--papel); border-bottom: 1px solid var(--linha); }
.marca strong { font-size: 17px; }
.usuario { display: flex; align-items: center; gap: 10px; color: var(--suave); }
.etiqueta { font-size: 11px; background: var(--marca-clara); color: var(--marca); padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.status { padding: 8px 24px; font-size: 12.5px; color: var(--suave); border-bottom: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.status b { color: var(--tinta); font-weight: 600; }
.avisos { margin: 12px 24px 0; background: var(--alerta-fundo); color: var(--alerta); border-radius: 8px; padding: 10px 14px; font-weight: 550; }
.avisos p { margin: 2px 0; }

/* abas */
.abas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px 24px 0; }
.abas button { border: 0; background: none; color: var(--suave); padding: 8px 12px; border-radius: 8px 8px 0 0; font: inherit; cursor: pointer;
               border-bottom: 2px solid transparent; }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--marca); font-weight: 600; }
.filtro-filial { margin-left: auto; color: var(--suave); display: flex; gap: 6px; align-items: center; }
select, input[type="search"] { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha);
                               border-radius: 7px; padding: 6px 8px; }
input[type="search"] { min-width: 280px; }
main { padding: 4px 24px 32px; }
.ajuda { color: var(--suave); margin: 0 0 10px; max-width: 900px; }
.controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 6px 0; color: var(--suave); }
.contagem { color: var(--suave); font-size: 12.5px; margin: 6px 0; }

/* cartões */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.cartao { background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); padding: 14px 16px; }
.cartao .rotulo { color: var(--suave); font-size: 12px; }
.cartao .valor { font-size: 24px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cartao .detalhe { color: var(--suave); font-size: 12px; margin-top: 2px; }

/* tabelas */
.tabela-rolagem { overflow-x: auto; background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
th { font-size: 12px; color: var(--suave); font-weight: 600; background: var(--papel); position: sticky; top: 0; }
td.num, th.num { text-align: right; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--marca-clara); }
td.fatores { white-space: normal; min-width: 220px; color: var(--suave); font-size: 12.5px; }
.pilula { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-right: 4px; background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; }
.prob { display: inline-flex; align-items: center; gap: 6px; }
.prob i { display: inline-block; height: 6px; border-radius: 3px; background: var(--alerta); opacity: .75; }
.vazio { padding: 18px; color: var(--suave); }

/* gráfico */
.grafico { background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); padding: 12px; margin-bottom: 14px; }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .barra { fill: var(--barra); }
.grafico .barra-prev { fill: var(--barra-prev); }
.grafico .barra-incompleta { fill: none; stroke: var(--barra); stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafico .faixa-erro { stroke: var(--tinta); stroke-width: 1.4; fill: none; opacity: .7; }
.grafico .eixo { stroke: var(--linha); }
.grafico text { fill: var(--suave); font-size: 10px; }

.rodape { color: var(--suave); font-size: 12px; padding: 8px 24px 24px; }

@media (max-width: 720px) {
  .topo, .status, .abas, main, .rodape { padding-left: 16px; padding-right: 16px; }
  .avisos { margin: 12px 16px 0; }
  .filtro-filial { margin-left: 0; width: 100%; }
  input[type="search"] { min-width: 0; width: 100%; }
}