:root {
  --azul: #041667;
  --ambar: #f8a800;
  --texto: #2a2e42;
  --cinza: #767b8c;
  --linha: #e1e5ee;
  --painel: #f3f5fa;
  --fundo: #f7f8fc;
  --branco: #ffffff;
  --erro: #c0392b;
  --ok: #1e7e4a;
  --raio: 10px;
  font-family: "Segoe UI", Calibri, system-ui, -apple-system, sans-serif;
  color: var(--texto);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); font-size: 14px; }
[hidden] { display: none !important; }
h1, h2 { color: var(--azul); margin: 0; }
h2 { font-size: 16px; }

.btn {
  border: 1px solid var(--linha); background: var(--branco); color: var(--azul);
  border-radius: 8px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--azul); }
.btn:disabled { opacity: .45; cursor: default; border-color: var(--linha); }
.btn.primario { background: var(--azul); color: var(--branco); border-color: var(--azul); }
.btn.primario:hover:not(:disabled) { background: #0a2390; }
.btn.fantasma { background: transparent; }
input, select {
  font: inherit; border: 1px solid var(--linha); border-radius: 8px; padding: 7px 10px;
  background: var(--branco); color: var(--texto); min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--ambar); outline-offset: -1px; border-color: transparent; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cinza); font-weight: 600; }

.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.cartao.sem-pad { padding: 0; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: linear-gradient(135deg, var(--azul) 0 55%, var(--fundo) 55%); }
.login-cartao { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.logo-login { height: 34px; align-self: flex-start; }
.login h1 { font-size: 22px; }
.sub { margin: -6px 0 4px; color: var(--cinza); }
.erro { color: var(--erro); min-height: 1em; margin: 0; }

/* topo */
.topo { display: flex; align-items: center; gap: 20px; padding: 10px 24px; background: var(--branco);
  border-bottom: 3px solid var(--ambar); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.logo { height: 26px; }
.abas { display: flex; gap: 4px; }
.aba { border: 0; background: none; font: inherit; font-weight: 600; color: var(--cinza); padding: 8px 14px;
  border-radius: 8px; cursor: pointer; }
.aba.ativa { color: var(--azul); background: var(--painel); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sync-info, .quem { color: var(--cinza); font-size: 12px; }

.conteudo { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; max-width: 1500px; margin: 0 auto; }

/* numeros */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.numero { background: var(--branco); border: 1px solid var(--linha); border-top: 3px solid var(--ambar);
  border-radius: var(--raio); padding: 14px 16px; cursor: default; }
.numero.clicavel { cursor: pointer; }
.numero.clicavel:hover { border-color: var(--azul); border-top-color: var(--ambar); }
.numero b { display: block; font-size: 24px; color: var(--azul); }
.numero span { font-size: 11px; color: var(--cinza); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* tabelas */
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza);
  padding: 10px 12px; border-bottom: 1px solid var(--linha); background: var(--painel); white-space: nowrap; }
.tabela th[data-ord] { cursor: pointer; }
.tabela th[data-ord]:hover { color: var(--azul); }
.tabela th.ord-asc::after { content: " ▲"; }
.tabela th.ord-desc::after { content: " ▼"; }
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover { background: #fafbff; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .chk { width: 36px; }
.barra { height: 6px; background: var(--painel); border-radius: 3px; min-width: 80px; }
.barra i { display: block; height: 100%; background: var(--azul); border-radius: 3px; }
.etq { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600;
  background: var(--painel); color: var(--azul); }
.etq.alerta { background: #fdecea; color: var(--erro); }
.etq.neutra { background: #f1f1f4; color: var(--cinza); }
.link { white-space: nowrap; color: var(--azul); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.link:hover { text-decoration: underline; }
.mudo { color: var(--cinza); }

/* filtros */
.filtros { display: grid; grid-template-columns: 2fr repeat(3, 1fr) 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 1100px) { .filtros { grid-template-columns: repeat(2, 1fr); } .filtros .largo { grid-column: 1 / -1; } }
.barra-acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
#contagem { font-weight: 600; color: var(--azul); }
.paginacao { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; gap: 12px; }
.paginacao div { display: flex; align-items: center; gap: 8px; }

/* dialogos */
.dialogo { border: 0; border-radius: var(--raio); padding: 0; width: min(560px, calc(100% - 32px));
  box-shadow: 0 20px 60px rgba(4, 22, 103, .25); }
.dialogo::backdrop { background: rgba(4, 22, 103, .35); }
.dialogo form { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.rodape-dlg { display: flex; justify-content: flex-end; gap: 8px; }
.campos { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; max-height: 60vh; overflow: auto; }
.campos dt { color: var(--cinza); font-size: 12px; font-weight: 600; }
.campos dd { margin: 0; word-break: break-word; }
.campos .sep { grid-column: 1 / -1; border-top: 1px solid var(--linha); margin: 6px 0 2px; padding-top: 8px;
  color: var(--ambar); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aviso { margin: 0; font-size: 12px; color: var(--cinza); background: var(--painel); padding: 10px; border-radius: 8px; }
.resultado { margin: 0; font-weight: 600; }
.resultado.ok { color: var(--ok); }
.resultado.falha { color: var(--erro); }

.faixa { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--azul); color: var(--branco);
  padding: 10px 18px; border-radius: 99px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 20; }

/* telas estreitas */
.filtros label, .filtros input, .filtros select { width: 100%; min-width: 0; }
@media (max-width: 1100px) { .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .filtros { grid-template-columns: minmax(0, 1fr); }
  .conteudo { padding: 16px; }
  .topo { padding: 10px 16px; }
}