/* Same light palette as the Painel de Ofertas: dark top bar, white cards, navy primary button. */
:root {
  --canvas: #e6ebf2; --surface: #fff; --surface-2: #f8fafc; --hover: #f1f5f9; --line: #e3e8ef; --line-forte: #cdd6e1; --borda: #d5dde8;
  --ink: #0f1c2b; --ink-2: #3f5267; --muted: #66788c; --navy: #104281; --navy-hover: #0c3566;
  --blue: #0b66b3; --blue-600: #1683e0; --blue-soft: rgba(53,169,255,.11);
  --green: #17733a; --green-soft: rgba(30,142,62,.11); --amber: #8a5a00; --amber-soft: rgba(255,179,26,.2); --red: #bf2639; --red-soft: rgba(255,83,103,.1);
  --sombra: 0 1px 2px rgba(16,30,50,.06), 0 3px 10px rgba(16,30,50,.06); --sombra-2: 0 20px 50px rgba(16,30,50,.18);
  --fonte: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --topo: 58px; --gap: 16px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink); font: 14px/1.45 var(--fonte); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h2 { margin: 0; font-size: 16px; }
h3 { margin: 16px 0 8px; font-size: 14px; }

/* ---------------------------------------------------------------- top bar with tabs */
.topbar { flex: none; height: var(--topo); display: flex; align-items: stretch; gap: 24px; padding: 0 clamp(16px, 2vw, 28px);
  background: linear-gradient(90deg, #0a1a2e, #0f2742); color: #fff; box-shadow: 0 6px 20px rgba(10,26,46,.18); position: relative; z-index: 10; }
.marca { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; flex: none; }
.marca img { height: 26px; }
.marca span { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.8); font-weight: 600; font-size: 13.5px; }
.abas { display: flex; align-items: stretch; gap: 4px; flex: 1; }
.aba { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: rgba(255,255,255,.66);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.aba:hover { color: #fff; }
.aba.ativa { color: #fff; border-bottom-color: #35a9ff; }
.aba:focus-visible { outline: 2px solid #7fc4ff; outline-offset: -4px; }
.selo { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(53,169,255,.22); color: #cfe9ff; }
.selo.espera { background: #ffb31a; color: #2b1d00; }
.topo-usuario { align-self: center; display: flex; align-items: center; gap: 2px; color: rgba(255,255,255,.72); font-size: 12.5px; white-space: nowrap; }
.topo-nome { max-width: 240px; margin-right: 8px; overflow: hidden; text-overflow: ellipsis; }
.topo-link { padding: 5px 8px; border: 0; border-radius: 8px; background: none; color: rgba(255,255,255,.85); font: inherit; font-weight: 600; cursor: pointer; }
.topo-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.topo-link:focus-visible { outline: 2px solid #7fc4ff; outline-offset: 1px; }
/* Dashboard controls on the bar: the company and link dropdowns (their open lists keep the system's light colors) and
   the administrators' Acumulado switch. */
.topo-dashboard { align-self: center; flex: none; display: flex; align-items: center; gap: 8px; }
.topo-dashboard[hidden] { display: none; }
.topo-dashboard select { width: auto; height: 32px; padding: 0 34px 0 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  appearance: none; background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center; }
.topo-dashboard select:hover { border-color: rgba(255,255,255,.4); background-color: rgba(255,255,255,.14); }
.topo-dashboard select:focus { border-color: rgba(255,255,255,.5); box-shadow: none; }
.topo-dashboard select:focus-visible { outline: 2px solid #7fc4ff; outline-offset: 1px; }
/* Fixed for a user limited in Usuários: a plain pill without the arrow. */
.topo-dashboard select:disabled { padding-right: 14px; background-image: none; color: rgba(255,255,255,.85); cursor: default; opacity: 1; }
.topo-dashboard select:disabled:hover { border-color: rgba(255,255,255,.22); background-color: rgba(255,255,255,.08); }
.topo-dashboard option { color: #10243d; background: #fff; }
.topo-acumulado { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.topo-acumulado[hidden] { display: none; }
/* A small switch before the word: off on the left, on to the right in blue. */
.topo-acumulado::before { content: ''; width: 24px; height: 14px; border-radius: 999px; background: rgba(255,255,255,.25) radial-gradient(circle at 7px 50%, #fff 4.5px, transparent 5px); }
.topo-acumulado:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.topo-acumulado[aria-pressed="true"] { border-color: #fff; background: #fff; color: var(--navy); }
.topo-acumulado[aria-pressed="true"]::before { background: #35a9ff radial-gradient(circle at 17px 50%, #fff 4.5px, transparent 5px); }
.topo-acumulado:focus-visible { outline: 2px solid #7fc4ff; outline-offset: 1px; }
/* Medium windows: tighter bar so tabs, company filter and user fit on one line (the name stays on the Sair tooltip). */
@media (min-width: 900px) and (max-width: 1679px) {
  .topbar { gap: 14px; }
  .aba { padding: 0 10px; }
  .topo-nome { display: none; }
}
/* The administrators' seven tabs need more room: their name shows from 1920px and, below 1600px, the bar shows only the
   logo (the product name stays in the browser title). */
@media (min-width: 900px) and (max-width: 1919px) {
  .topbar:has(.aba[data-perfil="admin"]:not([hidden])) .topo-nome { display: none; }
}
@media (min-width: 900px) and (max-width: 1599px) {
  .topbar:has(.aba[data-perfil="admin"]:not([hidden])) .marca span { display: none; }
}
@media (min-width: 900px) and (max-width: 1365px) {
  .topbar { gap: 10px; }
  .aba { padding: 0 7px; }
  .topo-dashboard { gap: 6px; }
  .topo-dashboard select { padding: 0 27px 0 11px; background-position: right 10px center; }
  .topo-dashboard select:disabled { padding-right: 11px; }
  .topo-acumulado { padding: 0 11px 0 8px; }
  .topo-link { padding: 5px 6px; }
}

/* ---------------------------------------------------------------- layout */
.app { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--gap) clamp(16px, 2vw, 28px); }
.painel { display: flex; flex-direction: column; gap: var(--gap); }
.painel-simulacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-content: start; align-items: start; }
.coluna { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); padding: 18px 20px; min-width: 0; }
.card-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* Desktop: the page fits the window; only long tables scroll, inside their own card. */
@media (min-width: 900px) and (min-height: 600px) {
  body { height: 100vh; overflow: hidden; }
  .app { min-height: 0; }
  .painel { height: 100%; min-height: 0; }
  .cresce { min-height: 0; overflow: auto; }
  .lote-grade { flex: 1; min-height: 0; }
  .lote-lado { overflow: auto; }
  .lote-tabela, .historico-card { min-height: 0; }
  .historico-card { flex: 1; }
  .lote-tabela .tabela-scroll, .historico-card .tabela-scroll { flex: 1; min-height: 0; }
}

/* ---------------------------------------------------------------- controls */
input, textarea, select { width: 100%; border: 1px solid var(--line-forte); border-radius: 10px; background: #fff; color: var(--ink); padding: 10px 12px; font: inherit; font-size: 15px; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(53,169,255,.2); }
input.invalido { border-color: #d93a4e; box-shadow: 0 0 0 3px var(--red-soft); }
textarea { resize: vertical; min-height: 110px; }
.btn { height: 40px; padding: 0 16px; border: 1px solid var(--line-forte); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--hover); }
.btn.primario { border-color: var(--navy); background: var(--navy); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--navy-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.link { color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link:hover { text-decoration: underline; }
.status { margin: 10px 2px 0; color: var(--muted); font-size: 13px; }
.status:empty { display: none; }
.status.erro { color: var(--red); }
.muted { color: var(--muted); }
.pequeno { font-size: 12.5px; }
.erro-texto { color: var(--red); }

/* ---------------------------------------------------------------- consultation */
.busca { display: flex; gap: 10px; }
.busca input { flex: 1; height: 46px; font-size: 16px; }
.busca .btn { height: 46px; padding: 0 22px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--blue-600); background: #f4f9ff; color: var(--ink-2); }
.aviso.erro { border-left-color: #d93a4e; background: #fff6f7; }
.aviso.ok { border-left-color: #1e8e3e; background: #f3fbf6; }
.aviso.espera { border-left-color: #e0a100; background: #fff8e6; }
.aviso.espera strong { color: var(--amber); }
.aviso strong { display: block; color: var(--ink); }
.aviso .btn { margin-left: auto; height: 34px; }
.spinner { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--line-forte); border-top-color: var(--navy); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.fornecedor { font-size: 19px; }
#resumo { margin: 6px 0 0; }
.situacoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.situacao { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.situacao span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.situacao b { display: block; margin-top: 4px; }
.situacao.nao-informado b { color: var(--amber); }
.acoes-resultado { margin-top: 14px; }

/* ---------------------------------------------------------------- simulation: purchase value and the credit in each rule */
.simulacao-valor { display: grid; gap: 6px; margin-top: 16px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.simulacao-valor input { height: 46px; font-size: 16px; }
.link-config { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.link-config:hover:not(:disabled) { text-decoration: underline; }
.link-config:disabled { color: var(--muted); cursor: default; }
/* The three rules side by side, centered like the dashboard cards; the supplier's rule is highlighted. */
.creditos-regras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.credito-regra { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--sombra); text-align: center; }
.credito-regra.aplicavel { border-color: var(--blue-600); background: #f4f9ff; box-shadow: 0 0 0 3px rgba(53,169,255,.15); }
.credito-nome { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.credito-nome b { font-size: 14px; color: var(--ink-2); }
.credito-nome small { color: var(--muted); font-size: 12px; }
.credito-selo { margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 700; white-space: nowrap; }
.credito-valor { max-width: 100%; margin-top: 4px; }
.credito-valor strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.credito-valor small { display: block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#notaSimulacao { margin: 12px 0 0; }
.kpi { min-height: 116px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); min-width: 0; }
.kpi span { display: block; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kpi strong { display: block; margin: 12px 0 4px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi small { color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- batches */
.barra-lotes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; flex: none; }
.lote-seletor { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 1 1 280px; max-width: 520px; }
.lote-seletor label { flex: none; color: var(--ink-2); font-weight: 600; }
.lote-seletor select { height: 40px; padding: 6px 10px; font-size: 14px; }
.segmento { display: inline-flex; border: 1px solid var(--line-forte); border-radius: 10px; overflow: hidden; margin-left: auto; }
.segmento button { height: 38px; padding: 0 14px; border: 0; border-left: 1px solid var(--line-forte); background: #fff; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.segmento button:first-child { border-left: 0; }
.segmento button:hover { background: var(--hover); }
.segmento button.ativo { background: var(--navy); color: #fff; }
.segmento + .lote-seletor { margin-left: 0; }
.valores-lote { margin: 8px 0 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.valores-lote:empty { display: none; }
.valores-lote small { display: block; color: var(--muted); font-weight: 400; }
.amostra { margin-top: 10px; }
.amostra table { font-size: 12.5px; }
.amostra td, .amostra th { padding: 6px 8px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
.vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
.vazio strong { font-size: 17px; }
.vazio p { max-width: 520px; margin: 4px 0; }
.lote-grade { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--gap); }
.lote-lado { padding: 14px 16px; }
.lote-lado #statusLote { margin-top: 0; color: var(--ink-2); font-weight: 600; }
.progresso-linha { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.progresso-linha progress { flex: 1; height: 10px; accent-color: var(--navy); }
.progresso-linha strong { flex: none; font-variant-numeric: tabular-nums; }
/* The three batch actions share one row and wrap only when the card is too narrow. */
.lote-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lote-acoes .btn { flex: 1 1 auto; height: 34px; padding: 0 6px; font-size: 12px; }
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-top: 12px; }
/* Batch counters: number and label on one line, so the side card fits beside the items table. */
.lote-lado .contadores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.lote-lado .contador { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; }
.lote-lado .contador strong { font-size: 15px; }
.lote-lado .contador span { font-size: 11px; }
.contador { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); min-width: 0; }
.contador strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.contador span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.25; }
.contador.forte strong { color: var(--navy); }
.contador.ok strong { color: var(--green); }
.contador.velho strong { color: var(--amber); }
.contador.erro strong { color: var(--red); }
#contagemLote { margin: 6px 0 0; }
.lote-tabela, .historico-card { display: flex; flex-direction: column; }
/* Batch items: every text line is cut with "…" (whole text on hover), so each item takes two lines and more items fit. */
#resultadosLote table { table-layout: fixed; }
#resultadosLote th:nth-child(2) { width: 120px; }
#resultadosLote td { padding: 6px 10px; }
#resultadosLote :is(b, small, .linha-unica) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tabela-scroll > p { margin: 14px; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.paginacao .btn { height: 34px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.filtros label { display: grid; gap: 5px; flex: 1 1 140px; max-width: 460px; color: var(--ink-2); font-size: 12.5px; }
.filtros input { height: 38px; padding: 6px 10px; font-size: 14px; }

/* ---------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { position: sticky; top: 0; z-index: 1; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--hover); }
tbody tr.sem-clique { cursor: default; }
tbody tr.sem-clique:hover { background: none; }
td small { display: block; color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- dialogs */
dialog { width: min(820px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sombra-2); color: var(--ink); }
#dlgImportar { width: min(860px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(10,26,46,.45); }
dialog[open] { display: flex; flex-direction: column; }
.dlg-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.dlg-corpo { padding: 16px 20px; overflow: auto; }
.dlg-corpo pre { white-space: pre-wrap; font: 12.5px/1.5 ui-monospace, Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.dlg-corpo dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 13px; }
.dlg-corpo dt { color: var(--muted); }
.dlg-corpo dd { margin: 0; overflow-wrap: anywhere; }
.dlg-rodape { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 16px 16px; }
.espaco { flex: 1; }
.dlg-acoes { display: flex; align-items: center; gap: 8px; }
.dlg-acoes .btn { height: 34px; padding: 0 12px; font-size: 13px; }
.fechar { width: 34px; height: 34px; border: 1px solid var(--line-forte); border-radius: 10px; background: #fff; font-size: 20px; cursor: pointer; }
.fonte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-bottom: 14px; }
.fonte > div { flex: 1; min-width: 0; }
.fonte strong { display: block; overflow-wrap: anywhere; }
.fonte small { display: block; }
.arquivo-icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .03em; }
#fonteTexto { margin-bottom: 14px; }
#fonteTexto .btn { margin-top: 8px; }
.lista-label { display: block; margin: 0 0 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.lote-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.lote-campos label { display: grid; gap: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.lote-campos input { height: 42px; }
.multi-importacoes { margin-top: 14px; }
.multi-importacoes .tabela-scroll { max-height: 36vh; }
.multi-importacoes td { min-width: 115px; }
.multi-importacoes td:first-child { min-width: 210px; }
.multi-importacoes input, .multi-importacoes select { min-width: 135px; padding: 7px 9px; font-size: 13px; }
.multi-sumario { margin-bottom: 10px; }
.multi-erro { color: var(--red); }
#previaLote { margin-top: 12px; padding-top: 4px; }
#previaDetalhes p { margin: 10px 0 0; }

/* ---------------------------------------------------------------- dashboard */
/* From 1280 x 600 the dashboard fits the window without a scrollbar; spacing and type grow with the window height. */
/* A dashboard uses the full width of large screens. */
.app:has(> .painel-dashboard:not([hidden])) { max-width: 1920px; }
.painel-dashboard { --dash-gap: 12px; --dash-pad: 14px; --dash-fonte: 12px; --dash-linha: 1px; --dash-kpi: 24px; --dash-kpi-pad: 8px 12px;
  --dash-menor: calc(var(--dash-fonte) - 1px); overflow: auto; gap: var(--dash-gap); padding: 2px; }
.dashboard-cabecalho { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 16px; padding: 0 2px; }
.dashboard-cabecalho h1 { margin: 3px 0 0; font-size: 28px; line-height: 1.2; letter-spacing: -.8px; }
.dashboard-eyebrow { color: #6e8197; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
.dashboard-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.dashboard-base-media { margin: 0; font-size: 12px; color: var(--muted); }
/* Queue bar on a single row: cache validity, progress with its status, buttons. */
.fila-global { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "validade progresso botoes" "validade status botoes";
  align-items: center; gap: 2px 18px; padding: 10px 16px; }
.validade-cache { grid-area: validade; }
.fila-botoes { grid-area: botoes; }
.validade-cache { display: grid; gap: 4px; color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.validade-cache span { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; white-space: nowrap; }
.validade-cache input { width: 64px; height: 32px; padding: 4px 7px; font-size: 13px; }
.fila-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fila-botoes .btn { height: 34px; padding: 0 10px; font-size: 12px; }
.fila-progresso { grid-area: progresso; display: flex; align-items: center; gap: 10px; }
.fila-progresso progress { flex: 1; height: 9px; accent-color: var(--green); }
#statusFila { grid-area: status; margin: 0; }

/* Summary strips modeled on the Gestão de Motoristas overview: translucent tiles on a dark band. Blue for Fornecedores,
   green for Subcontratados: cost and credit per month on top, the three credit rules in small tiles below. */
/* Same columns and gap as the tables below, so each strip sits exactly above its table. */
.dashboard-resumo { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dash-gap); }
.dashboard-banner { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: calc(var(--dash-pad) - 4px); border-radius: 18px;
  background: linear-gradient(120deg, #0f2a4a 0%, #163d6b 55%, #1d5590 100%); box-shadow: 0 10px 26px rgba(10,26,46,.22); color: #fff; }
.dashboard-banner.banner-verde { background: linear-gradient(120deg, #0b302d 0%, #0f4741 55%, #146157 100%); }
.banner-linha { display: grid; gap: 8px; }
.banner-principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.banner-regras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.banner-carregando { margin: 0; padding: 12px; color: rgba(255,255,255,.7); }
/* Titles and values centered in every tile. */
.banner-item { min-width: 0; display: flex; align-items: center; justify-content: center; padding: var(--dash-kpi-pad); text-align: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.09); }
.banner-texto { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; }
/* Full values in two tiles per half width: the big number follows the window width as well as the height tier. */
.banner-texto > strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: min(var(--dash-kpi), max(15px, calc(1.7vw - 5px))); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.banner-texto > strong.com-credito { color: #a7f3d0; }
.banner-rotulo { max-width: 100%; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--dash-fonte) + 1px); font-weight: 600; color: rgba(255,255,255,.86); }
/* Main tiles: the cost in light glass, the credit in a mint tint. */
.banner-principal [data-card="credito"] { border-color: rgba(110,231,183,.4); background: rgba(52,211,153,.16); }
.banner-principal [data-card="credito"] .banner-rotulo { color: #bbf7d0; }
/* Rule tiles: light cards with the rule's color on top, so they stand apart from the band. */
.banner-mini { --regra-cor: #64748b; padding: 5px 10px; border: 0; border-top: 3px solid var(--regra-cor); border-radius: 10px; background: #f6f9fc; box-shadow: 0 2px 6px rgba(5,20,40,.18); }
.banner-mini[data-regra="hibrido"] { --regra-cor: #2f7de1; }
.banner-mini[data-regra="lucro_real"] { --regra-cor: #0f9f7a; }
.banner-mini .banner-rotulo { margin-bottom: 0; color: var(--regra-cor); font-size: var(--dash-menor); font-weight: 700; letter-spacing: .02em; }
.banner-mini .banner-texto > strong { color: #10243d; font-size: calc(var(--dash-fonte) + 3px); }
/* Rule tiles are buttons: the chosen one gets its rule's ring and the others fade while the table is filtered. */
button.banner-mini { width: 100%; font: inherit; cursor: pointer; transition: transform .12s, box-shadow .12s, opacity .12s; }
button.banner-mini:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,20,40,.28); }
button.banner-mini:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
button.banner-mini[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 2px var(--regra-cor), 0 4px 12px rgba(5,20,40,.28); }
.banner-regras:has([aria-pressed="true"]) button.banner-mini:not([aria-pressed="true"]) { opacity: .62; }
.filtro-regra { height: 22px; padding: 0 8px; border: 1px solid #d6e2ee; border-radius: 999px; background: var(--categoria-fundo); color: var(--categoria-cor); font-size: var(--dash-menor); font-weight: 600; cursor: pointer; }
.filtro-regra[hidden] { display: none; }
.banner-texto > small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: rgba(255,255,255,.66); line-height: 1.3; font-size: var(--dash-menor); font-variant-numeric: tabular-nums; }
.valor-curto { display: none; }

/* Each category: its 20 largest clients with the saved tax option and the estimated credit. */
.dashboard-tabelas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dash-gap); }
.dashboard-tabela { --categoria-cor: #148b82; --categoria-fundo: #f0f8f6; min-height: 0; display: flex; flex-direction: column; padding: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px rgba(20,45,80,.035); }
.dashboard-subcontratados { --categoria-cor: #5c77c2; --categoria-fundo: #f2f4fb; }
.dashboard-tabela .card-cab { flex: none; margin: 0; padding: calc(var(--dash-pad) - 4px) var(--dash-pad) 8px; }
.ranking-titulo { display: flex; gap: 10px; align-items: center; }
.ranking-titulo h2 { font-size: calc(var(--dash-fonte) + 3px); letter-spacing: -.2px; }
.categoria-marca { width: 4px; height: 18px; border-radius: 3px; background: var(--categoria-cor); }
.btn-detalhes { height: 28px; padding: 0 10px; border-color: #e0e7f0; font-size: var(--dash-menor); color: #526980; }
.btn-detalhes span { margin-left: 4px; }
.dashboard-tabela .tabela-scroll { flex: 1; min-height: 0; margin: 0 var(--dash-pad) var(--dash-pad); }
.ranking-tabela { height: 100%; table-layout: fixed; }
.ranking-tabela.parcial { height: auto; }
.ranking-tabela th { background: #fbfcfe; font-size: var(--dash-menor); padding: 6px 8px; color: #7a8b9d; white-space: nowrap; }
.ranking-tabela td { font-size: var(--dash-fonte); padding: var(--dash-linha) 8px; vertical-align: middle; border-color: #eef2f6; }
/* Column widths in em follow the header type, so they grow with the height tiers. */
.ranking-tabela th:nth-child(1) { width: 36px; }
.ranking-tabela th:nth-child(3), .ranking-tabela th:nth-child(5) { width: 10.2em; }
.ranking-tabela th:nth-child(4) { width: 11.4em; }
.ranking-tabela .cliente-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ranking-tabela .ranking-valor { color: #40566d; }
/* Slim badge and position marker: the 20 rows fit the card from 1280 x 720 up. */
.ranking-tabela :is(.opcao-tributaria, .vinculo-tag) { display: block; width: fit-content; padding-top: 2px; padding-bottom: 2px; font-size: var(--dash-menor); line-height: 1.2; }
.ranking-credito { color: #14685e; font-weight: 650; }
.credito-vazio { color: var(--muted); }
.opcao-mobile { display: none; }
.ranking-numero { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; font-size: var(--dash-menor); color: #8292a2; }
.ranking-destaque { background: var(--categoria-fundo); color: var(--categoria-cor); font-weight: 700; }
.ranking-posicao { color: var(--muted); }
.dashboard-tabela .num, #tabelaClientes .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opcao-tributaria { display: inline-block; max-width: 100%; padding: 4px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.opcao-simples_nacional { color: #137b64; background: #e6f5ee; }
.opcao-simei { color: #366d9f; background: #eaf2fb; }
.opcao-simples_cbs { color: #1f5fbf; background: #e4eefc; }
.opcao-nao_optante { color: #3b5676; background: #edf1f6; }
.opcao-nao_consultado { color: #937022; background: #fbf3df; }
.opcao-pessoa_fisica { color: #756496; background: #f0edf7; }
.opcao-nao_identificado, .opcao-nao_informado { color: #748090; background: #edf0f4; }
/* Link tags in the same colors as the Vínculos tab: Administrativo in violet, Operacional in orange. */
.vinculo-tag { display: inline-block; max-width: 100%; padding: 4px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.vinculo-tag[data-vinculo="Administrativo"] { color: #5b2fbf; background: #efe8fd; }
.vinculo-tag[data-vinculo="Operacional"] { color: #a8460c; background: #fdeee2; }
.vinculo-vazio { color: var(--muted); }
#dlgClientes { width: min(1120px, calc(100vw - 24px)); }
#tabelaClientes { max-height: 55vh; }

/* Window height tiers (desktop): more room means larger type and rows. */
@media (min-width: 900px) and (max-height: 739px) {
  .painel-dashboard { --dash-gap: 10px; --dash-pad: 12px; --dash-linha: 1px; --dash-kpi: 22px; --dash-kpi-pad: 6px 10px; }
  /* Low windows: tighter strips, cards and top 20 rows make room for the credit rules. */
  .dashboard-banner { gap: 5px; padding: 6px; }
  .banner-linha { gap: 6px; }
  .banner-mini { padding: 3px 10px; }
  .banner-mini .banner-texto > strong { line-height: 1.1; }
  .dashboard-tabela .card-cab { padding-top: 6px; padding-bottom: 6px; }
  .ranking-tabela th { padding-top: 4px; padding-bottom: 4px; }
  .ranking-tabela .opcao-tributaria { padding-top: 1px; padding-bottom: 1px; }
  .ranking-numero { width: 16px; height: 16px; }
}
@media (min-width: 900px) and (min-height: 810px) {
  .painel-dashboard { --dash-gap: 14px; --dash-pad: 16px; --dash-fonte: 12.5px; --dash-linha: 2px; --dash-kpi: 27px; --dash-kpi-pad: 10px 14px; }
}
@media (min-width: 900px) and (min-height: 940px) {
  .painel-dashboard { --dash-gap: 16px; --dash-pad: 18px; --dash-fonte: 13.5px; --dash-linha: 5px; --dash-kpi: 30px; --dash-kpi-pad: 12px 16px; }
  .ranking-numero { width: 20px; height: 20px; }
}
@media (min-width: 900px) and (min-height: 1100px) {
  .painel-dashboard { --dash-gap: 20px; --dash-pad: 22px; --dash-fonte: 15px; --dash-linha: 8px; --dash-kpi: 34px; --dash-kpi-pad: 14px 18px; }
  .ranking-numero { width: 22px; height: 22px; }
}
/* Window width tiers. */
@media (min-width: 1280px) and (min-height: 600px) {
  .dashboard-tabelas { flex: 1; min-height: 0; }
}
@media (max-width: 1279px) {
  .dashboard-tabelas { grid-template-columns: minmax(0, 1fr); }
  .dashboard-resumo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fila-global { grid-template-columns: 1fr; grid-template-areas: "validade" "progresso" "status" "botoes"; }
  .fila-botoes { justify-content: flex-start; }
}
/* Phones: the tax option moves under the name and values use the short form. */
@media (max-width: 560px) {
  .painel-dashboard { --dash-kpi: 20px; }
  .banner-principal, .banner-regras { grid-template-columns: minmax(0, 1fr); }
  .ranking-tabela :is(th, td):is(:nth-child(1), :nth-child(4)) { display: none; }
  .ranking-tabela th:nth-child(3), .ranking-tabela th:nth-child(5) { width: 7.6em; white-space: normal; }
  .ranking-tabela .valor-completo { display: none; }
  .ranking-tabela .valor-curto { display: inline; }
  .opcao-mobile { display: block; margin-top: 3px; }
}

/* Configurações e projeções: premissas separadas da classificação consultada. */
.abas { min-width: 0; overflow-x: auto; }
.painel-configuracoes, .painel-usuarios, .painel-vinculos { height: 100%; overflow: auto; padding: 2px; }
/* Same one-line header as the dashboard. */
:is(.painel-configuracoes, .painel-usuarios, .painel-vinculos) .dashboard-cabecalho h1 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
/* Compact enough to fit the window: the three grouping rules sit side by side. */
.config-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.config-regras, .config-previa { padding: 18px 20px; }
.config-selo { border-radius: 20px; padding: 4px 10px; color: var(--navy); background: var(--blue-soft); font-size: 11px; font-weight: 700; }
.config-grade label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; color: var(--ink-2); font-size: 13px; }
.config-aliquota { margin: 0; }
.config-percentuais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.config-subtitulo { margin: 16px 0 10px; }
.config-mapeamentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.config-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.config-acoes .status { margin: 0; font-size: 12px; }
.config-previa h2 { margin: 5px 0 16px; font-size: 20px; }
.config-previa label { max-width: 240px; margin-bottom: 8px; }
.config-exemplo { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.config-exemplo strong { font-size: 23px; font-variant-numeric: tabular-nums; color: var(--navy); }
@media (max-width: 899px) {
  .config-grade { grid-template-columns: 1fr; }
}
@media (max-width: 1099px) {
  .config-mapeamentos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .config-regras, .config-previa { padding: 18px; }
  .config-percentuais { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .config-percentuais input { padding: 10px 6px; }
}

/* ---------------------------------------------------------------- login, password dialog and users */
.tela-login { min-height: 100vh; background: linear-gradient(135deg, #0a1a2e 0%, #0f2d4c 55%, #15457a 100%); }
.login { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 16px; }
.login-logo { height: 40px; }
.login-card { width: min(400px, 100%); padding: 28px 28px 22px; border-radius: 18px; background: var(--surface); box-shadow: var(--sombra-2); }
.login-card h1 { margin: 0; font-size: 20px; letter-spacing: -.3px; }
.login-card > p.muted { margin: 4px 0 18px; font-size: 13px; }
.login-card form { display: grid; gap: 14px; }
.login-card label, .senha-form label, .usuarios-form label, .acesso-form label { display: grid; gap: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.login-card input { height: 44px; }
.login-card .btn { height: 44px; margin-top: 4px; }
#dlgSenha, #dlgAcesso { width: min(420px, calc(100vw - 24px)); }
.senha-form, .acesso-form { display: grid; gap: 12px; }
:is(.senha-form, .acesso-form) :is(.pequeno, .status) { margin: 0; }
.senha-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.usuarios-card { flex: none; display: flex; flex-direction: column; padding: 20px; }
.painel-usuarios .usuarios-card { flex: 1; min-height: 0; }
.painel-usuarios #tabelaUsuarios { flex: 1; min-height: 0; }
.usuarios-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.usuarios-form .btn { height: 42px; }
#tabelaUsuarios { margin-top: 14px; }
#tabelaUsuarios tr.inativo td { color: var(--muted); }
.usuarios-acoes { text-align: right; white-space: nowrap; }
.usuarios-acoes .btn { height: 30px; margin-left: 6px; padding: 0 10px; font-size: 12px; }
#tabelaUsuarios td { vertical-align: middle; }

/* ---------------------------------------------------------------- links: Administrativo in violet, Operacional in orange */
.vinculos-contagem { flex: none; display: flex; gap: 6px; }
.vinculo-chip { --vinculo-cor: #64748b; display: inline-flex; align-items: baseline; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--line-forte); border-radius: 999px;
  background: #fff; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; line-height: 28px; }
.vinculo-chip b { color: var(--vinculo-cor); font-variant-numeric: tabular-nums; }
.vinculo-chip[data-chip="Administrativo"] { --vinculo-cor: #6d3fd0; }
.vinculo-chip[data-chip="Operacional"] { --vinculo-cor: #c25410; }
.vinculo-chip:hover { background: var(--hover); }
.vinculo-chip[aria-pressed="true"] { border-color: var(--vinculo-cor); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vinculo-cor) 22%, transparent); }
.vinculos-card { display: flex; flex-direction: column; padding: 14px 16px; }
/* Filters on the left, the spreadsheet export and import on the right. */
.vinculos-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.vinculos-filtros :is(input, select) { flex: 0 1 190px; height: 34px; padding: 4px 10px; font-size: 13px; }
.vinculos-filtros input { flex: 1 1 240px; max-width: 420px; }
.vinculos-filtros .btn { height: 34px; padding: 0 12px; font-size: 12.5px; }
/* Bulk marking on one line: how many are listed and selected on the left, the three marks on the right. */
.vinculos-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; font-size: 13px; }
#selecaoVinculos { color: var(--ink-2); font-weight: 600; }
.vinculos-lote .btn { height: 28px; padding: 0 10px; font-size: 12px; }
#statusVinculos { margin: 0 2px 8px; }
/* Compact: the whole list scrolls inside the card, one line of fixed height per document (vinculos.js draws only the
   rows in view and needs that height: 28px + the 1px border). Fixed columns keep their width while scrolling. */
.vinculos-tabela { table-layout: fixed; font-size: 12.5px; }
.vinculos-tabela th { padding-top: 6px; padding-bottom: 6px; white-space: nowrap; }
.vinculos-tabela td { height: 29px; padding: 0 8px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vinculos-tabela tr.vinculos-espaco td, .vinculos-tabela tr.vinculos-espaco { height: 0; padding: 0; border: 0; }
.vinculos-tabela .vinculos-marca { width: 36px; }
.vinculos-tabela th:nth-child(3) { width: 104px; }
.vinculos-tabela th:nth-child(4) { width: 196px; }
.vinculos-tabela th:nth-child(5) { width: 128px; }
.vinculos-tabela th:nth-child(6) { width: 196px; }
.vinculos-tabela th:nth-child(7) { width: 70px; }
.vinculos-tabela input[type="checkbox"] { display: block; width: 15px; height: 15px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.vinculos-cliente > span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vinculos-cliente b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.vinculos-cliente small { flex: none; display: inline; }
.vinculos-editado { color: var(--amber); font-weight: 600; }
.vinculos-editar { width: 1%; }
.vinculos-editar .btn { height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; }
.vinculo-opcoes { display: inline-flex; border: 1px solid var(--line-forte); border-radius: 7px; overflow: hidden; }
.vinculos-tabela .vinculo-opcoes button { height: 22px; padding: 0 8px; font-size: 11.5px; }
.vinculo-opcoes button { height: 28px; padding: 0 10px; border: 0; border-left: 1px solid var(--line-forte); background: #fff; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.vinculo-opcoes button:first-child { border-left: 0; }
.vinculo-opcoes button:hover { background: var(--hover); color: var(--ink); }
.vinculo-opcoes button[aria-pressed="true"][data-vinculo="Administrativo"] { background: #efe8fd; color: #5b2fbf; }
.vinculo-opcoes button[aria-pressed="true"][data-vinculo="Operacional"] { background: #fdeee2; color: #a8460c; }
.vinculo-btn[data-marcar="Administrativo"]:not(:disabled) { border-color: #c9b5f3; color: #5b2fbf; }
.vinculo-btn[data-marcar="Operacional"]:not(:disabled) { border-color: #f1c19f; color: #a8460c; }
/* Editar: name and link on top, one row per spreadsheet line below. */
#dlgCadastro { width: min(920px, calc(100vw - 24px)); }
.cadastro-form { display: grid; gap: 12px; }
.cadastro-form > p { margin: 0; }
.cadastro-topo { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; }
.cadastro-topo label { display: grid; gap: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.cadastro-topo :is(input, select) { height: 40px; padding: 6px 10px; font-size: 14px; }
#cadastroItens { max-height: 46vh; }
.cadastro-tabela td { vertical-align: middle; }
.cadastro-tabela input { height: 32px; padding: 4px 8px; font-size: 13px; }
.cadastro-tabela input.num { text-align: right; font-variant-numeric: tabular-nums; }
.cadastro-tabela :is(th, td):nth-child(2) { width: 150px; }
.cadastro-tabela :is(th, td):nth-child(3) { width: 70px; }
#dlgImportarVinculos { width: min(640px, calc(100vw - 24px)); }
#dlgImportarVinculos .dlg-corpo > p { margin: 0 0 10px; }
.importacao-erros { max-height: 32vh; overflow: auto; margin: 12px 0 0; padding: 8px 8px 8px 26px; border: 1px solid var(--line); border-radius: 10px; color: var(--red); font-size: 13px; }
@media (max-width: 760px) {
  .cadastro-topo { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) and (min-height: 600px) {
  .painel-vinculos .vinculos-card { flex: 1; min-height: 0; }
  .painel-vinculos #tabelaVinculos { flex: 1; min-height: 0; }
}

/* ---------------------------------------------------------------- narrow screens: normal page scroll */
/* Below 1280px the dashboard filters and the Acumulado switch get their own line under the bar. */
@media (max-width: 1279px) {
  .topbar:has(.topo-dashboard:not([hidden])) { flex-wrap: wrap; height: auto; min-height: var(--topo); }
  .topbar > :not(.topo-dashboard) { min-height: var(--topo); }
  .topo-dashboard { order: 9; flex: 0 0 100%; justify-content: center; margin-bottom: 8px; }
}
@media (max-width: 899px) {
  .topbar { gap: 12px; }
  .marca span, .topo-nome { display: none; }
  .aba { padding: 0 8px; font-size: 13px; }
  .painel-simulacao, .lote-grade { grid-template-columns: 1fr; }
  .usuarios-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vinculos-lote .espaco { display: none; }
  .tabela-scroll { max-height: 70vh; }
}
@media (max-width: 560px) {
  /* Phones: the two filters share a line and the Acumulado switch goes under them. */
  .topo-dashboard { flex-wrap: wrap; }
  .topo-dashboard select { flex: 1 1 140px; min-width: 0; }
  .marca img { height: 20px; }
  .abas { gap: 0; }
  .aba { padding: 0 6px; font-size: 12.5px; }
  .busca { flex-wrap: wrap; }
  .busca .btn { width: 100%; }
  .situacoes, .creditos-regras { grid-template-columns: 1fr; }
  .lote-seletor { margin-left: 0; max-width: none; }
}