/* ============================================================
   VFOR Controle de Frotas: sistema visual
   Tema claro por padrão, cartões de vidro sobre a foto da rodovia, menu flutuante sempre escuro.
   Série: azul = receita, laranja = despesa. Verde, âmbar e vermelho só com significado.
   A cor da marca (--brand, por empresa) entra no azul; os estados e o cartão principal não a seguem.
   ============================================================ */

/* ---------- fonte local (sem CDN: CSP estrita) ---------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens ---------- */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --brand: #1F66F2;                      /* padrão; cada empresa pode trocar */
  --page: #E8EFFA;
  --bg-img: url(../img/fundo-claro.jpg);
  --bg-scrim: rgba(236,243,252,0);
  --ink: #0B1B45;  --ink-2: #394A76;  --ink-3: #5A6990;
  --glass: rgba(255,255,255,.74);  --glass-2: rgba(255,255,255,.58);  --solid: #F6F9FE;
  --edge: rgba(255,255,255,.95);  --line: rgba(11,27,69,.10);  --track: rgba(11,27,69,.09);
  --shadow: 0 14px 32px -22px rgba(16,48,130,.30), 0 1px 3px rgba(16,48,130,.07);
  --shadow-forte: 0 34px 80px -24px rgba(6,18,70,.6), 0 4px 14px -6px rgba(6,18,70,.3);
  --blue: var(--brand);
  --blue-ink: color-mix(in srgb, var(--brand) 80%, black);
  --blue-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --on-blue: var(--brand-on, #FFFFFF);
  --cyan: #0FA5D6;
  --orange: #E0691A;  --orange-soft: rgba(224,105,26,.14);
  --good: #0B7A43;  --good-bg: rgba(12,163,92,.13);
  --warn: #8A5300;  --warn-bg: rgba(250,178,25,.22);  --warn-mark: #E59A00;
  --crit: #C22B2B;  --crit-bg: rgba(208,59,59,.12);
  --violet: #5B48C2;  --violet-bg: rgba(91,72,194,.11);
  --btn: #0B1B45;  --btn-ink: #FFFFFF;
  --side-1: #102668;  --side-2: #081538;               /* menu: sempre escuro */
  --side-ink: #F1F5FF;  --side-ink-2: #B4C1E3;  --side-ink-3: #8D9BC4;
  --hero-ink: #FFFFFF;  --hero-ink-2: #C6D5F7;  --hero-ground: #050E2E;
  --font: 'Archivo', "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-hero: 16px;  --r-card: 14px;  --r-item: 10px;  --r-ctl: 8px;
  --w1: #C2560F;  --w2: #E8833A;  --w3: #F2B266;  --w4: #A3AECB;   /* custos na grade de cada R$ 100 */
  /* derivados de uso interno */
  --blue-line: color-mix(in srgb, var(--blue) 42%, transparent);
  --blue-faint: color-mix(in srgb, var(--blue) 7%, transparent);
  --good-line: color-mix(in srgb, var(--good) 34%, transparent);
  --warn-line: color-mix(in srgb, var(--warn) 34%, transparent);
  --crit-line: color-mix(in srgb, var(--crit) 34%, transparent);
  --violet-line: color-mix(in srgb, var(--violet) 30%, transparent);
  --ring: 0 0 0 3px var(--blue-soft);
  --transition: .18s cubic-bezier(.4, 0, .2, 1);
  /* séries extras, para gráficos com mais de duas linhas */
  --serie-3: #0E9F8E;  --serie-4: #B7791F;  --serie-5: #C2417C;  --serie-6: #6D5BD0;  --serie-7: #4B5B85;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #050B1E;
  --bg-img: url(../img/fundo-escuro.jpg);
  --bg-scrim: rgba(4,9,26,.52);
  --ink: #EEF3FF;  --ink-2: #BCC8E6;  --ink-3: #93A0C6;
  --glass: rgba(12,22,54,.74);  --glass-2: rgba(24,40,90,.52);  --solid: #111D42;
  --edge: rgba(150,180,255,.20);  --line: rgba(150,180,255,.15);  --track: rgba(150,180,255,.14);
  --shadow: 0 18px 40px -24px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.35);
  --w1: #E07A2C;  --w2: #F29A55;  --w3: #F6C07E;  --w4: #5F6E96;
  --shadow-forte: 0 34px 80px -24px rgba(0,0,0,.85), 0 4px 14px -6px rgba(0,0,0,.5);
  --blue: color-mix(in srgb, var(--brand) 82%, white);
  --blue-ink: color-mix(in srgb, var(--brand) 45%, white);
  --blue-soft: color-mix(in srgb, var(--brand) 20%, transparent);
  --on-blue: var(--brand-on-dark, #06112B);
  --cyan: #35D6FF;
  --orange: #DE7426;  --orange-soft: rgba(222,116,38,.20);
  --good: #45E0A0;  --good-bg: rgba(69,224,160,.14);
  --warn: #FFC670;  --warn-bg: rgba(250,178,25,.16);  --warn-mark: #FAB219;
  --crit: #FF9C9C;  --crit-bg: rgba(255,120,120,.16);
  --violet: #B9A8FF;  --violet-bg: rgba(177,156,255,.15);
  --btn: #EEF3FF;  --btn-ink: #0B1B45;
  --serie-3: #3FD2BE;  --serie-4: #E0B04C;  --serie-5: #F07CB0;  --serie-6: #A898F5;  --serie-7: #9AA8CF;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { background: var(--page); color: var(--ink); font-family: var(--font); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--blue-line); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.num, .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden, [hidden] { display: none !important; }
.pos { color: var(--good); font-weight: 600; }
.neg { color: var(--crit); font-weight: 600; }
.oculto, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fade { animation: fadeUp .22s ease forwards; }
@keyframes fadeUp { from { transform: translateY(5px); } to { transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic.p { width: 13px; height: 13px; stroke-width: 2.6; vertical-align: -2px; }
.ic.g { width: 19px; height: 19px; }

/* ---------- carregamento inicial ---------- */
.boot { min-height: 100vh; display: grid; place-content: center; gap: 22px; justify-items: center; background: var(--page); }
.boot img { filter: drop-shadow(0 0 24px var(--blue-soft)); }
.boot-bar { width: 160px; height: 3px; background: var(--track); border-radius: 3px; overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 40%; background: var(--blue); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ============================================================
   TELAS DE ACESSO: formulário à esquerda, apresentação do produto à direita
   ============================================================ */
.login-screen { position: relative; z-index: 1; min-height: 100vh; width: 100%; display: grid; grid-template-columns: minmax(440px, 5fr) minmax(0, 7fr); }

/* coluna do formulário */
.login-panel { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; gap: 32px; padding: 32px clamp(24px, 4vw, 48px); }
.login-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-marca { display: flex; align-items: center; gap: 10px; }
.login-marca img { display: block; width: 48px; height: 48px; object-fit: contain; }
.login-marca strong { display: block; font-size: 18px; line-height: 1.1; font-weight: 800; font-stretch: 115%; letter-spacing: .04em; color: var(--ink); }
.login-marca span { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.login-tema { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--glass-2); color: var(--ink-2); cursor: pointer; transition: color var(--transition), border-color var(--transition); }
.login-tema:hover { color: var(--blue); border-color: var(--blue); }
.login-card { width: min(464px, 100%); margin: auto; padding: 32px; border-radius: var(--r-card); background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
.login-card-title { margin-bottom: 20px; }
.login-card-title h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); font-weight: 700; font-stretch: 110%; }
.login-card-title p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.login-form { display: grid; gap: 20px; }
.login-field { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; min-width: 0; align-items: baseline; }
.login-label { grid-area: 1 / 1; color: var(--ink); font-size: 14px; font-weight: 600; }
.login-link { grid-area: 1 / 2; min-height: 24px; border: 0; background: none; padding: 0; color: var(--blue-ink); font-size: 14px; cursor: pointer; }
.login-input-wrap, .login-caps { grid-column: 1 / -1; }
.login-link:hover { text-decoration: underline; }
.login-input-wrap { height: 50px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--solid); transition: border-color var(--transition), box-shadow var(--transition); }
.login-input-wrap:focus-within { border-color: var(--blue); box-shadow: var(--ring); }
.login-input-wrap input { min-width: 0; flex: 1; height: 100%; padding: 0 16px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px; }
.login-input-wrap input::placeholder { color: var(--ink-3); }
.login-input-wrap input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 100px var(--solid); caret-color: var(--ink); }
.login-pass-toggle { width: 44px; height: 44px; margin-right: 3px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--transition); }
.login-pass-toggle:hover { color: var(--blue); }
.login-pass-toggle:focus-visible { outline-offset: -3px; }
.login-caps { color: var(--warn); font-size: 13px; }
.login-btn { width: 100%; min-height: 52px; font-size: 16px; }
.login-error { padding: 10px 12px; border-radius: var(--r-ctl); color: var(--crit); background: var(--crit-bg); font-size: 14px; line-height: 1.4; }
.login-error:empty { display: none; }
.login-dica { padding: 10px 12px; border-radius: var(--r-ctl); color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.login-alt { text-align: center; color: var(--ink-2); font-size: 14px; }
.login-alt a { font-weight: 600; color: var(--blue-ink); }
.login-check { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); font-size: 13.5px; cursor: pointer; }
.login-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blue); }
.login-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.login-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: var(--ink-2); font-size: 13px; }

/* Requisitos da senha em tempo real */
.senha-painel { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--line); }
.senha-forca { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.senha-forca-barra { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.senha-forca-barra span { height: 4px; border-radius: 99px; background: var(--track); transition: background var(--transition); }
.senha-forca-barra span.on.f1 { background: var(--crit); }
.senha-forca-barra span.on.f2 { background: var(--warn); }
.senha-forca-barra span.on.f3, .senha-forca-barra span.on.f4 { background: var(--good); }
.senha-forca-rotulo { min-width: 58px; text-align: right; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.senha-forca-rotulo.f1 { color: var(--crit); } .senha-forca-rotulo.f2 { color: var(--warn); } .senha-forca-rotulo.f3, .senha-forca-rotulo.f4 { color: var(--good); }
.senha-req-titulo { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.senha-req { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.senha-req .req { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); transition: color var(--transition); }
.senha-req .req-marca { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; border: 1.5px solid var(--line); }
.senha-req .req.ok { color: var(--good); }
.senha-req .req.ok .req-marca { background: var(--good); border-color: var(--good); color: #fff; font-size: 9px; }
.senha-req .req.falta { color: var(--ink-2); }
.senha-req .req.falta .req-marca { border-color: var(--crit); color: var(--crit); }
.senha-req .req.pendente .req-marca .ic { opacity: .35; }
.senha-req .req-marca .ic { width: 10px; height: 10px; stroke-width: 3; }
.senha-confere { min-height: 18px; font-size: 12.5px; }
.senha-confere .ok { color: var(--good); } .senha-confere .err { color: var(--crit); }

/* Verificação anti-robô (Cloudflare Turnstile) */
.captcha { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass-2); animation: captcha-in .25s ease-out; }
.captcha-titulo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.captcha-titulo .ic { color: var(--blue); }
.captcha-widget { min-height: 65px; }
.captcha-status { min-height: 18px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.captcha-status .ok { color: var(--good); } .captcha-status .err { color: var(--crit); }
.captcha-retry { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); font-weight: 600; cursor: pointer; text-decoration: underline; }
.login-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
@keyframes captcha-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* coluna de apresentação: sempre escura, nos dois temas */
.login-showcase { position: sticky; top: 12px; isolation: isolate; height: calc(100vh - 24px); margin: 12px 12px 12px 0; min-width: 0; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; gap: 28px; padding: clamp(32px, 3.9vw, 56px) 0 0 clamp(32px, 3.9vw, 56px); color: #EEF3FF; background: #050E2E; border: 1px solid rgba(150,190,255,.28); box-shadow: 0 40px 70px -34px rgba(10,50,170,.75); }
.login-showcase::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(../img/fundo-escuro.jpg) 70% 30%/cover no-repeat; }
.login-showcase::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(4,10,36,.86) 0%, rgba(4,10,36,.62) 55%, rgba(4,10,36,.34) 100%); }
.login-pitch { padding-right: clamp(32px, 3.9vw, 56px); flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.login-pitch h2 { max-width: 620px; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; font-stretch: 112%; color: #fff; }
.login-pitch p { max-width: 520px; color: #C6D5F7; font-size: 16px; line-height: 1.5; }
.login-pitch ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.login-pitch li { display: flex; align-items: center; gap: 12px; }
.login-pitch li .ic { color: #35D6FF; stroke-width: 3; }

/* prévia: a tela real do sistema, reduzida; sangra pela direita e por baixo */
.mock { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 12px 0 0 0; border: 1px solid rgba(255,255,255,.18); border-width: 1px 0 0 1px; background: var(--page) var(--bg-img) center/cover no-repeat; color: var(--ink); box-shadow: 0 -18px 60px rgba(0,0,0,.45); }
.mock-tela { width: 1240px; padding: 18px 22px; transform-origin: top left; overflow: hidden; pointer-events: none; user-select: none; transition: opacity .45s ease; }
/* parada (reduzir movimento): tudo pronto, sem animação; viva: as mesmas animações do sistema, em ciclo */
.mock-tela:not(.mock-viva) *, .mock-tela:not(.mock-viva) *::before, .mock-tela:not(.mock-viva) *::after { animation: none !important; transition: none !important; }
.mock-tela.mock-saindo { opacity: 0; }
.mock-viva .seg button.mock-apertado { transform: scale(.92); }
/* cursor da prévia viva: vai até o filtro e "clica" */
.mock-cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 26px; height: 26px; pointer-events: none; opacity: 0; transition: transform .85s cubic-bezier(.45,.05,.25,1), opacity .3s ease; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.mock-cursor.pula { transition: opacity .3s ease; }
.mock-cursor.visivel { opacity: 1; }
.mock-cursor svg { display: block; width: 26px; height: 26px; }
.mock-cursor path { fill: #fff; stroke: #0B1220; stroke-width: 1.3; stroke-linejoin: round; }
.mock-clique { position: absolute; left: -10.75px; top: -11.8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(53,214,255,.55); opacity: 0; }
.mock-cursor.clicou .mock-clique { animation: mock-clique .55s ease-out; }
@keyframes mock-clique { from { opacity: .95; transform: scale(.25); } to { opacity: 0; transform: scale(1.9); } }
.mock-selo { position: absolute; right: 14px; bottom: 14px; padding: 6px 11px; border-radius: 999px; color: #E8EDF3; background: rgba(5,8,13,.84); border: 1px solid rgba(255,255,255,.16); font-size: 12px; }
/* a prévia sempre usa o layout de computador, qualquer que seja a largura da janela */
.mock-tela .alertas-painel, .mock-tela .detalhes, .mock-tela .ajuda-calc { display: none; }
.mock-tela .hero { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
.mock-tela .s9 { grid-column: span 9; }
.mock-tela .s8 { grid-column: span 8; }
.mock-tela .s4 { grid-column: span 4; }
.mock-tela .s7 { grid-column: span 7; }
.mock-tela .s6 { grid-column: span 6; }
.mock-tela .s5 { grid-column: span 5; }
.mock-tela .op-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mock-tela .cem, .mock-tela .receber { grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); }
.mock-tela .kpis-lado .spark { display: block; }
.mock-tela .s12 { grid-column: span 12; }
.mock-tela .grade > .kpis-lado { grid-column: span 3; grid-template-rows: repeat(4, minmax(0, 1fr)); grid-template-columns: minmax(0, 1fr); }
.mock-tela .clientes { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1020px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-showcase { display: none; }
}
@media (max-width: 540px) {
  .login-panel { padding: 18px 16px; gap: 20px; }
  .login-card { padding: 22px 18px; }
  .login-card-title h1 { font-size: 28px; }
  .login-grid-2 { grid-template-columns: 1fr; gap: 20px; }
  .login-input-wrap input { font-size: 16px; }
}

/* ============================================================
   FUNDO E SHELL: menu encostado na borda esquerda, conteúdo à direita
   ============================================================ */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg i { position: absolute; inset: 0; background: var(--bg-img) center/cover no-repeat; }
.bg i::after { content: ""; position: absolute; inset: 0; background: var(--bg-scrim); }

.shell { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 0; }

/* menu: sempre escuro, nos dois temas */
.side { align-self: start; position: sticky; top: 0; z-index: 30; height: 100vh; height: 100dvh; min-width: 0;
  display: flex; flex-direction: column; gap: 12px; padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 12px max(12px, env(safe-area-inset-left, 0px)); border-radius: 0; color: var(--side-ink);
  background: radial-gradient(130% 50% at 0% 0%, rgba(67,136,242,.38), rgba(67,136,242,0) 60%), linear-gradient(180deg, var(--side-1), var(--side-2));
  border: 0; border-right: 1px solid rgba(150,180,255,.22); box-shadow: 16px 0 40px -28px rgba(6,20,80,.7); }
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--side-ink); }
.marca:hover { text-decoration: none; }
.marca img { width: 38px; height: 38px; flex: none; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(53,214,255,.35)); }
.marca span { min-width: 0; }
.marca b { display: block; font-size: 16px; font-weight: 800; font-stretch: 118%; letter-spacing: .04em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca small { display: block; font-size: 11.5px; color: var(--side-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-teste { display: inline-flex; margin: 0 4px; padding: 3px 10px; align-self: flex-start; border-radius: 999px; font-size: 12px; font-weight: 600; color: #FFD58A; background: rgba(250,178,25,.16); }
.side-corpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: rgba(150,180,255,.3) transparent; }
.busca { display: flex; align-items: center; gap: 9px; height: 40px; flex: none; padding: 0 11px; border-radius: 9px; background: rgba(3,10,36,.45); border: 1px solid rgba(150,180,255,.20); color: var(--side-ink-2); }
.busca input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--side-ink); }
.busca input::placeholder { color: var(--side-ink-3); }
.busca input::-webkit-search-cancel-button { filter: invert(.8); }
.busca:focus-within { border-color: #6FE0FF; box-shadow: 0 0 0 3px rgba(53,214,255,.18); }
.grupo[hidden], .item[hidden], .busca-vazia[hidden] { display: none; }
.grupo-tit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--side-ink-3); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.grupo-tit:hover { color: var(--side-ink); }
.grupo-tit .ic { transition: transform .25s ease; }
.grupo.aberto .grupo-tit .ic { transform: rotate(90deg); }
.grupo-itens { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.grupo.aberto .grupo-itens { grid-template-rows: 1fr; }
.grupo-itens > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .28s; display: flex; flex-direction: column; gap: 2px; }
.grupo.aberto .grupo-itens > div { visibility: visible; transition-delay: 0s; }
.item { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--side-ink-2); transition: background .15s ease, color .15s ease; }
.item:hover { background: rgba(255,255,255,.07); color: var(--side-ink); text-decoration: none; }
.item.ativo { color: var(--side-ink); font-weight: 600; background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 62%, transparent), color-mix(in srgb, var(--brand) 18%, transparent)); box-shadow: inset 0 0 0 1px rgba(150,190,255,.30); }
.item.ativo .ic { color: #7FE6FF; }
.busca-vazia { padding: 8px 12px; color: var(--side-ink-2); }
.side-rodape { display: flex; flex-direction: column; gap: 8px; flex: none; }
.side-pe { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; background: rgba(3,10,36,.42); border: 1px solid rgba(150,180,255,.18); }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #06112B; background: linear-gradient(135deg, #7FE6FF, #4388F2); }
.side-pe > div { flex: 1; min-width: 0; }
.side-pe b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-pe small { display: block; font-size: 11.5px; color: var(--side-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tema { width: 40px; height: 40px; flex: none; border-radius: 8px; border: 1px solid rgba(150,180,255,.24); background: rgba(255,255,255,.06); color: var(--side-ink); display: grid; place-items: center; cursor: pointer; }
.tema:hover { background: rgba(255,255,255,.12); }
.side-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.side-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--side-ink-2); font-size: 13px; cursor: pointer; white-space: nowrap; }
.side-link:hover { background: rgba(255,255,255,.07); color: var(--side-ink); text-decoration: none; }
.side :focus-visible { outline-color: #6FE0FF; }

.main { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 24px;
  padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* dedo: alvos de toque continuam com 44 px */
@media (pointer: coarse) { .item, .busca, .tema { min-height: 44px; } .tema { width: 44px; } }
.content { min-width: 0; width: 100%; }
.content:focus { outline: 0; }
.banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--r-item); margin: 0 0 14px; background: var(--glass-2); border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }
.banner > .ic { flex: none; }
.banner.warn > .ic { color: var(--warn); }
.banner.info > .ic { color: var(--blue); }
.banner.danger { background: var(--crit-bg); color: var(--crit); }
.banner.danger > .ic { color: var(--crit); }
.banner.ok > .ic { color: var(--good); }
.main-banner .banner { margin: 0; }

/* Barra de atalhos e gaveta do menu: só existem no celular e no tablet. No computador, .side-menu é o próprio menu lateral. */
.side-menu { display: contents; }
.gaveta-topo, .gaveta-fundo, .barra-baixo { display: none; }

@media (max-width: 920px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* z-index: auto: o menu lateral é item da grade e, com z-index, prenderia a gaveta abaixo do fundo escurecido */
  .side { position: static; z-index: auto; height: auto; border-radius: 0; border-right: 0; border-bottom: 1px solid rgba(150,180,255,.22); padding: 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  .main { padding: 12px; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* barra fixa embaixo: Início, Viagens, Abastecimento, Revisões e Mais */
  .barra-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: linear-gradient(180deg, var(--side-1), var(--side-2)); border-top: 1px solid rgba(150,180,255,.24); box-shadow: 0 -14px 30px -20px rgba(6,20,80,.75); }
  .atalho { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 4px 0;
    border: 0; border-radius: 12px; background: none; color: var(--side-ink-2); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .atalho:hover { text-decoration: none; color: var(--side-ink); }
  /* letra um pouco mais estreita (a fonte tem largura variável): "Abastecimento" cabe inteiro até em 360 px */
  .atalho span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-stretch: 84%; letter-spacing: .01em; }
  .atalho .ic { width: 22px; height: 22px; transition: transform .15s ease; }
  .atalho:active .ic { transform: scale(.9); }
  /* tela aberta: ícone dentro de uma pílula acesa, como nos apps de celular */
  .atalho::before { content: ''; position: absolute; top: 4px; left: 50%; width: 52px; height: 28px; border-radius: 999px; transform: translateX(-50%) scaleX(.4); opacity: 0;
    background: color-mix(in srgb, var(--brand) 55%, transparent); transition: transform .2s ease, opacity .2s ease; }
  .atalho > * { position: relative; }
  .atalho.ativo, .atalho-mais[aria-expanded="true"] { color: var(--side-ink); }
  .atalho.ativo::before, .atalho-mais[aria-expanded="true"]::before { opacity: 1; transform: translateX(-50%) scaleX(1); }
  .atalho.ativo .ic, .atalho-mais[aria-expanded="true"] .ic { color: #7FE6FF; }
  /* com a gaveta aberta, só o "Mais" fica aceso */
  body.menu-aberto .atalho.ativo:not(.atalho-mais)::before { opacity: 0; }
  body.menu-aberto .atalho.ativo:not(.atalho-mais) { color: var(--side-ink-2); }
  body.menu-aberto .atalho.ativo:not(.atalho-mais) .ic { color: inherit; }
  .atalho:focus-visible { outline: 2px solid #6FE0FF; outline-offset: -2px; }

  /* "Mais": o menu completo sobe de baixo, por cima da página e logo acima da barra */
  .side-menu, .side-corpo, .side-rodape { display: none; }
  .side.aberta .side-menu { position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 59; display: flex; flex-direction: column; gap: 12px;
    max-height: calc(100dvh - 140px - env(safe-area-inset-bottom, 0px)); padding: 10px max(14px, env(safe-area-inset-right, 0px)) 14px max(14px, env(safe-area-inset-left, 0px));
    border-radius: 18px 18px 0 0; color: var(--side-ink); border-top: 1px solid rgba(150,180,255,.28);
    background: radial-gradient(130% 50% at 0% 0%, rgba(67,136,242,.32), rgba(67,136,242,0) 60%), linear-gradient(180deg, var(--side-1), var(--side-2));
    box-shadow: 0 -24px 50px -20px rgba(3,10,36,.8); animation: gaveta .24s cubic-bezier(.2,.8,.2,1); }
  .side.aberta .side-corpo { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .side.aberta .side-rodape { display: flex; }
  .gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
  .gaveta-topo b { font-size: 15px; font-weight: 700; }
  .gaveta-topo::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(150,180,255,.35); }
  .gaveta-fechar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(150,180,255,.24); background: rgba(255,255,255,.06); color: var(--side-ink); cursor: pointer; }
  .menu-aberto .gaveta-fundo { display: block; position: fixed; inset: 0; z-index: 58; background: rgba(3,10,36,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s ease; }
  body.menu-aberto { overflow: hidden; }

  /* avisos sobem para não ficar atrás da barra */
  .toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}
@keyframes gaveta { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .side.aberta .side-menu, .menu-aberto .gaveta-fundo { animation: none; } }

/* ============================================================
   CABEÇALHO DA PÁGINA
   ============================================================ */
.ph { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 4px 2px 0; margin-bottom: 14px; }
.ph-left { flex: 1 1 0; min-width: 0; }
/* Telas com filtros: título em cima e os botões sempre na mesma fileira, no mesmo lugar. O tamanho do texto não muda a posição de nada. */
.ph:has(.filtros-btn) { flex-direction: column; align-items: stretch; }
.ph:has(.filtros-btn) .ph-left { flex: none; }
.ph:has(.filtros-btn) .ph-actions { flex: none; }
@media (max-width: 1100px) { .ph { flex-direction: column; align-items: stretch; } .ph-left { flex: none; } }
.ph h1 { font-size: 22px; line-height: 1.15; font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; color: var(--ink); }
.ph-sub { color: var(--ink-2); font-size: 13px; max-width: 820px; }
.ph-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph-actions .btn { padding: 0 12px; }
.ph-actions > .sino, .ph:has(.filtros-btn) .ph-actions > .btn.primary { margin-left: auto; }
/* controles de filtro e abas da tela são opacos: o fundo não atrapalha a leitura */
.ph-actions .vidro, .linha-abas .seg, .linha-abas-seg { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }
.sec-head h2 { font-size: 18px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.sec-head h2 .ic { color: var(--blue); }
.sec-head p { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); margin: 18px 0 10px; }
.section-title .ic { color: var(--blue); }
@media (max-width: 640px) { .ph h1 { font-size: 20px; } }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--glass-2); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.btn:hover { border-color: var(--blue); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .ic { width: 16px; height: 16px; }
.btn.primary { background: var(--blue); color: var(--on-blue); border-color: transparent; font-weight: 700; }
.btn.primary:hover { background: var(--blue-ink); color: var(--on-blue); }
:root[data-theme="dark"] .btn.primary:hover { background: color-mix(in srgb, var(--blue) 88%, white); }
.btn.cheio { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.btn.danger { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.btn.danger:hover { border-color: var(--crit); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { color: var(--ink); background: var(--blue-soft); border-color: transparent; }
.btn.sm { min-height: 34px; padding: 0 11px; font-size: 13px; }
.btn.icon { width: 40px; padding: 0; }
.btn.sm.icon { width: 34px; }
.btn.mais { width: 44px; height: 44px; padding: 0; }
.btn.block { width: 100%; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

/* ============================================================
   CARTÕES, INDICADORES E GRADES
   ============================================================ */
.vidro, .card, .kpi { background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
.card { border-radius: var(--r-card); overflow: hidden; margin-bottom: 20px; min-width: 0; }
.card-pad { padding: 22px; }
.card-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-head:has(> .ajuda-calc) { padding-right: 54px; }
.card-head > .ajuda-calc { position: absolute; top: 14px; right: 14px; }
.card-head h3 { font-size: 18px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 9px; letter-spacing: -.005em; }
.card-head h3 .ic { color: var(--blue); }
.card-head p { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.card .table-wrap { border-top: 0; }
.grid { display: grid; gap: 20px; }
.grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.span-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid > .card { margin-bottom: 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi-grid .kpi { padding: 14px 16px; }
.kpi-grid .kpi-value { font-size: 21px; }
@media (max-width: 1280px) { .grid.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.span-2-1, .grid.k3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid.k4, .grid.k2, .grid.k5 { grid-template-columns: 1fr; } }

/* indicador compacto: ícone em azulejo, rótulo, valor com "R$" menor, variação e minigráfico */
.kpi { position: relative; overflow: hidden; min-width: 0; padding: 16px 18px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.kpi-topo, .kpi-label { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.kpi-label > .ic { color: var(--blue); }
.kpi-ico { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }
.kpi-ico.lar { color: var(--orange); background: var(--orange-soft); }
.kpi-grid .kpi-ico { width: 30px; height: 30px; border-radius: 10px; }
.kpi-grid .kpi-ico .ic { width: 16px; height: 16px; }
.kpi-val, .kpi-value { font-size: 24px; line-height: 1.1; font-weight: 700; font-stretch: 108%; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-val small, .kpi-value small { font-size: .55em; font-weight: 600; color: var(--ink-2); margin-right: 3px; }
.kpi-base, .kpi-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.delta.bom { color: var(--good); }
.delta.alto { color: var(--warn); }
.delta.ruim { color: var(--crit); }
.kpi.ok .kpi-value, .kpi.ok .kpi-val { color: var(--good); }
.kpi.danger .kpi-value, .kpi.danger .kpi-val { color: var(--crit); }
.kpi.warn .kpi-value, .kpi.warn .kpi-val { color: var(--warn); }
.kpi.destaque { border-color: var(--blue-line); }
.spark { height: 44px; margin: auto -18px -16px; }
.spark svg { display: block; width: 100%; height: 100%; }
.sp-area { fill: var(--blue); fill-opacity: .10; }
.sp-linha { fill: none; stroke: var(--ink-2); stroke-opacity: .75; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sp-fim { fill: var(--blue); stroke: var(--solid); stroke-width: 2; }
.spark.sp-troca .sp-area, .spark.sp-troca .sp-fim { animation: aparece .9s ease both; }
@keyframes aparece { from { opacity: 0; } }

/* ============================================================
   DASHBOARD
   Mais compacto e mais leve: cantos menores, textos menores, cartão principal baixo.
   Azul = lucro e receita, vermelho = prejuízo, laranja = despesa. Sem verde no Dashboard.
   ============================================================ */
.dash-carregando { opacity: .6; pointer-events: none; transition: opacity var(--transition); }
/* Título rola com a página; a barra de período e filtros fica presa no alto (fundo e sombra só quando está presa). */
.dash-ph { margin-bottom: 8px; }
.dash-barra { position: sticky; top: 0; z-index: 25; margin: -6px -16px 12px; padding: 6px 16px; border-bottom: 1px solid transparent; transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.dash-barra.fixa { background: color-mix(in srgb, var(--solid) 90%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: var(--line); box-shadow: 0 12px 22px -18px rgba(11,27,69,.55); }
.dash-barra .ph-actions > .sino { margin-left: auto; }
@media (max-width: 920px) { .dash-barra { margin: -6px -12px 10px; padding: 6px 12px; } }
/* celular: período, filtros e sino numa fileira; mês e ano na outra (a barra presa ocupa pouco da tela) */
@media (max-width: 640px) {
  .dash-barra .ph-actions > .sino { order: 1; }
  .dash-barra .ph-actions > .pil-sel { order: 2; }
  .dash-barra .ph-actions > .btn.ghost { order: 3; }
  .dash-barra .pil-mes { flex: 1 1 0; width: auto; min-width: 0; }
  .dash-barra .pil-ano { width: 118px; }
}
.mock-tela .dash-barra { position: static; }
.pilula { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 9px; color: var(--ink); font-weight: 600; }
.pilula .ic:first-child { color: var(--blue); }
.pilula:hover { border-color: var(--blue); }
.pil-sel { position: relative; cursor: pointer; white-space: nowrap; }
.pil-mes { width: 196px; }
.pil-ano { width: 158px; }
.pil-texto { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pil-sel select, .filtro select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; font-size: 14px; }
.pil-sel:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }
.filtro:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
.filtro { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 9px; color: var(--ink-2); cursor: pointer; font-size: 13.5px; }
.filtro b { color: var(--ink); font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro:hover { border-color: var(--blue); }
/* Seletor em pílula (Mês | Ano até agora, abas de Pedágios e de Vales): o mesmo desenho em qualquer lugar da tela. */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 10px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { flex: 0 0 auto; height: 32px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); }
.seg button:not([aria-pressed="true"]):hover { color: var(--ink); background: var(--blue-soft); }
.seg button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.sino { position: relative; width: 38px; padding: 0; justify-content: center; cursor: pointer; }
.sino .ic:first-child { color: var(--ink); }
.sino span { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--crit); color: var(--solid); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.sino.at span { background: var(--warn-mark); color: #1A1200; }
.sino.neutro span { background: var(--ink-3); }

.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.s12 { grid-column: span 12; } .s9 { grid-column: span 9; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; }
.s6 { grid-column: span 6; } .s5 { grid-column: span 5; } .s4 { grid-column: span 4; } .s3 { grid-column: span 3; }
.dcard { position: relative; min-width: 0; border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.dcard > .ajuda-calc { position: absolute; top: 12px; right: 12px; z-index: 2; }
.dcard.piscar { animation: piscar 1.4s ease; }
@keyframes piscar { 0%, 100% { box-shadow: var(--shadow); } 30% { box-shadow: 0 0 0 3px var(--blue-line); } }
.dcard h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; text-wrap: balance; color: var(--ink); }
.card-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding-right: 30px; }
.card-topo > div:first-child { flex: 1 1 260px; min-width: 0; }
.card-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sub { color: var(--ink-3); font-size: 12.5px; }
.dash-vazio { padding: 28px 10px; }
.empurra { margin-top: auto; }

/* cartão principal: a cor segue o resultado (azul com lucro, vermelho com prejuízo); só gradiente e bolinhas, sem foto */
.hero { position: relative; isolation: isolate; overflow: hidden; min-width: 0; border-radius: var(--r-hero); padding: 16px 20px; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 20px;
  --h1: #6FE0FF; --h2: #4C94FF; --h-veu: 4,10,36; --h-chao: #050E2E; --h-luz: rgba(31,102,242,.42); --h-luz2: rgba(53,214,255,.12); --h-borda: rgba(150,190,255,.26); --h-sombra: rgba(10,50,170,.55); --h-brilho: rgba(53,214,255,.6); --hero-ink-2: #C6D5F7;
  color: var(--hero-ink); border: 1px solid var(--h-borda); box-shadow: 0 24px 48px -30px var(--h-sombra); transition: border-color .6s ease, box-shadow .6s ease;
  background: radial-gradient(85% 120% at 100% 0%, var(--h-luz), transparent 62%), radial-gradient(60% 90% at 0% 100%, var(--h-luz2), transparent 62%), linear-gradient(160deg, color-mix(in srgb, var(--h-chao) 82%, white 4%), var(--h-chao)); }
.hero[data-estado="vermelho"] { --h1: #FFA79A; --h2: #E5484D; --h-veu: 36,6,10; --h-chao: #26070A; --h-luz: rgba(229,72,77,.40); --h-luz2: rgba(255,140,120,.10); --h-borda: rgba(255,160,150,.30); --h-sombra: rgba(150,20,30,.5); --h-brilho: rgba(255,120,110,.6); --hero-ink-2: #F2D2CE; }
.hero-bolhas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero > .ajuda-calc { position: absolute; top: 10px; right: 10px; z-index: 3; color: var(--hero-ink-2); }
.hero > .ajuda-calc:hover, .hero > .ajuda-calc[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.14); }
.hero-esq { min-width: 0; container-type: inline-size; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.hero-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hero-txt h2 { font-size: 18px; font-size: clamp(15px, 5.6cqi, 19px); line-height: 1.2; font-weight: 700; font-stretch: 106%; color: inherit; }
.hero-rot { display: flex; align-items: center; gap: 7px; color: var(--hero-ink-2); font-size: 12.5px; }
.hero-rot .ic { color: var(--h1); }
.hero-num { display: flex; align-items: flex-start; gap: 8px; font-size: clamp(30px, 3.4vw, 46px); font-size: clamp(30px, 13cqi, 48px); line-height: .95; font-weight: 700; font-stretch: 110%; letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 0 34px var(--h-brilho); }
.hero-num small { font-size: .36em; font-weight: 600; letter-spacing: 0; margin-top: .45em; color: var(--hero-ink-2); text-shadow: none; }
.hero-delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-height: 26px; padding: 2px 9px; border-radius: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); color: #fff; font-size: 12.5px; font-weight: 700; }
.hero-delta .ic { color: var(--h1); }
.hero-delta.cai .ic { transform: rotate(180deg); }
.hero-delta span { color: var(--hero-ink-2); font-weight: 400; }
.hero-dados { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 0; padding-top: 10px; border-top: 1px solid var(--h-borda); }
.hero-dados div { min-width: 0; padding-right: 14px; }
.hero-dados div + div { padding-left: 14px; border-left: 1px solid var(--h-borda); }
.hero-dados div:last-child { padding-right: 0; }
.hero-dados dt { font-size: 11.5px; color: var(--hero-ink-2); white-space: nowrap; }
.hero-dados dd { font-size: 15px; font-weight: 700; margin-top: 1px; }
.hero-dados dd.txt { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.hero-graf { min-width: 0; min-height: 196px; display: flex; flex-direction: column; gap: 4px; }
.hg-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-right: 28px; color: var(--hero-ink-2); font-size: 12.5px; }
.hg-topo b { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px; border-radius: 7px; background: rgba(255,255,255,.10); border: 1px solid var(--h-borda); color: var(--h1); font-size: 12px; font-weight: 700; }
.hg-plot { position: relative; flex: 1; min-height: 166px; touch-action: pan-y; border-radius: 8px; }
.hg-plot > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hg-plot text { font-family: var(--font); font-size: 11.5px; fill: var(--hero-ink-2); font-variant-numeric: tabular-nums; }
.hg-plot .forte { fill: #fff; font-weight: 700; }
.hg-linha { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--h-brilho)); }
.hg-stop-a { stop-color: var(--h1); stop-opacity: .46; }
.hg-stop-b { stop-color: var(--h1); stop-opacity: .04; }
.hg-stop-c { stop-color: var(--h2); }
.hg-stop-d { stop-color: var(--h1); }
.hg-ponto { fill: rgb(var(--h-veu)); stroke: var(--h1); stroke-width: 1.5; }
.hg-ponta { fill: #fff; stroke: var(--h1); stroke-width: 3; }
.pulso { fill: var(--h1); transform-box: fill-box; transform-origin: center; animation: pulso 2.4s ease-out infinite; }
@keyframes pulso { from { transform: scale(1); opacity: .55; } to { transform: scale(3.4); opacity: 0; } }
.hero .dica { top: 0; min-width: 168px; background: rgba(var(--h-veu),.95); border-color: var(--h-borda); color: #fff; box-shadow: 0 14px 32px -14px rgba(0,0,0,.8); }
.hero .dica h3, .hero .dica p { color: var(--hero-ink-2); }
.hero .dica p b { color: #fff; min-width: 0; }
.hero .dica p.res { border-top-color: var(--h-borda); }
.hero .dica p.res .ic { color: var(--h1); }
.hero .dica p.cai .ic { transform: rotate(180deg); }

/* alertas: painel que abre pelo sino */
.alertas-painel { position: absolute; z-index: 30; right: 0; top: calc(100% + 10px); width: min(450px, 100%); max-height: min(78vh, 620px); overflow-y: auto; padding: 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-forte); transform-origin: top right; animation: abre .2s cubic-bezier(.2,.8,.2,1); }
.alertas-painel:focus { outline: 0; }
@keyframes abre { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.alertas-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alertas-painel h2 { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.fechar { width: 36px; height: 36px; flex: none; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.fechar:hover { border-color: var(--blue); color: var(--ink); }
.alerta { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px; border-radius: 10px; font-size: 13px; background: var(--glass-2); border: 1px solid var(--line); transition: transform .18s ease, border-color .18s ease; }
.alerta:hover { transform: translateX(3px); border-color: var(--blue); }
.alerta-ico { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn); }
.alerta.crit .alerta-ico { background: var(--crit-bg); color: var(--crit); }
.alerta.ok .alerta-ico { background: var(--blue-soft); color: var(--blue-ink); }
.alerta.info .alerta-ico { background: var(--blue-soft); color: var(--blue-ink); }
.alerta small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--warn); }
.alerta.crit small { color: var(--crit); }
.alerta.ok small, .alerta.info small { color: var(--blue-ink); }
.alerta b { display: block; font-weight: 600; line-height: 1.3; }
.alerta p { color: var(--ink-3); font-size: 12.5px; }
.pend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; border-radius: 9px; background: var(--warn-bg); color: var(--ink); font-size: 13px; }
.pend-link { border: 0; background: none; padding: 0; font-weight: 700; color: var(--ink); white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pend-mini { color: var(--warn); font-weight: 600; }

/* indicadores: coluna compacta ao lado do cartão principal (ícone à esquerda, uma linha de texto embaixo) */
.kpis-lado { min-width: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kpis-lado .kpi { min-height: 0; padding: 7px 12px 7px 46px; border-radius: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "topo graf" "val graf" "base graf"; align-content: center; gap: 1px 10px; }
.kpis-lado .kpi-topo { grid-area: topo; font-size: 11.5px; line-height: 1.3; gap: 4px; }
.kpis-lado .kpi-topo .ajuda-calc { width: 18px; height: 18px; margin: -2px 0; }
.kpis-lado .kpi-topo .ajuda-calc .ic { width: 13px; height: 13px; }
.kpis-lado .kpi-ico { position: absolute; left: 11px; top: 50%; margin-top: -13px; width: 26px; height: 26px; border-radius: 7px; }
.kpis-lado .kpi-ico .ic { width: 14px; height: 14px; }
.kpis-lado .kpi-val { grid-area: val; font-size: 18px; line-height: 1.15; }
.kpis-lado .kpi-base { grid-area: base; display: block; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis-lado .kpi-base .delta { margin-right: 5px; gap: 2px; }
.kpis-lado .kpi-base .delta .ic { width: 11px; height: 11px; vertical-align: -1px; }
.kpis-lado .spark { grid-area: graf; width: 56px; height: 30px; margin: 0; align-self: end; }
.kpis-lado .anel { grid-area: graf; width: 46px; height: 46px; align-self: center; }
.kpis-lado .anel b { font-size: 11.5px; }
.kpis-lado .anel circle { stroke-width: 10; }
.delta.bom { color: var(--blue-ink); }
.delta.cai .ic { transform: rotate(90deg); }

/* o que move a operação: seis números numa faixa */
.op-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; }
.op-item { min-width: 0; padding: 2px 16px; border-left: 1px solid var(--line); }
.op-item:first-child { border-left: 0; padding-left: 0; }
.op-item dt { font-size: 12px; color: var(--ink-3); }
.op-item dd { font-size: 18px; font-weight: 700; font-stretch: 104%; line-height: 1.25; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.op-item dd.txt { font-size: 14px; white-space: normal; }
.op-item p { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* listas com barra */
.linhas { display: flex; flex-direction: column; gap: 9px; }
.linha-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 13px; }
.linha-topo span { color: var(--ink-2); }
.linha-topo b { font-weight: 700; white-space: nowrap; }
.selo { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; font-style: normal; background: var(--warn-bg); color: var(--warn); }
.selo.crit { background: var(--crit-bg); color: var(--crit); }
.card-topo > .selo { margin: 0; }
.grande { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.grande b { font-size: 27px; line-height: 1; font-weight: 700; font-stretch: 110%; letter-spacing: -.02em; color: var(--ink); }
.grande b.neg-txt { color: var(--crit); }
.grande span { color: var(--ink-2); font-size: 13px; }

/* o que mudou: o período e o anterior lado a lado */
.mudou-frase { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.mudou { display: flex; flex-direction: column; gap: 12px; }
.mudou-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
.mudou-linha > span { color: var(--ink-2); font-size: 13px; }
.mudou-linha > b { font-size: 14px; font-weight: 700; text-align: right; }
.mudou-barras { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; }
.mudou-barras i { display: block; height: 5px; border-radius: 3px; width: var(--w); transform-origin: left center; animation: cresce .9s cubic-bezier(.2,.8,.2,1) both; }
.mudou-barras i.antes { background: color-mix(in srgb, var(--ink-3) 30%, transparent); }
.mudou-barras i.agora { background: var(--blue); }
.mudou-barras i.agora.lar { background: var(--orange); }
.mudou-barras i.agora.neg { background: var(--crit); }
.mudou-rodape { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); }
.variacao { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 5px; font-size: 11.5px; font-weight: 700; background: var(--blue-soft); color: var(--blue-ink); }
.variacao.alto { background: var(--warn-bg); color: var(--warn); }
.variacao.neutro { background: var(--track); color: var(--ink-2); }
.variacao.ruim { background: var(--crit-bg); color: var(--crit); }

/* cada R$ 100: grade de 100 quadrados e legenda que destaca */
.cem { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 20px; align-items: center; }
.waffle { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; aspect-ratio: 1; max-width: 100%; }
.waffle i { display: block; border-radius: 3px; background: var(--c); transition: opacity .2s ease, transform .2s ease, background-color .45s ease; animation: surge .35s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
.waffle i.troca { animation: none; }
.waffle i.vira { animation: vira .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
.waffle.foco i { opacity: .18; }
.waffle.foco i.on { opacity: 1; transform: scale(1.06); }
@keyframes surge { from { opacity: 0; transform: scale(.4); } }
@keyframes vira { from { opacity: .25; transform: scale(.3) rotate(-90deg); } }
.cem-leg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cem-item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--ink); font: inherit; }
button.cem-item { cursor: pointer; }
.cem-item:hover, .cem-item:focus-visible { background: var(--blue-soft); }
.cem-item > i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.cem-item span { font-size: 13px; color: var(--ink-2); }
.cem-item b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.cem-item small { grid-column: 2 / -1; font-size: 11.5px; color: var(--ink-3); }
.cem-item.sobra { background: var(--blue-soft); }
.cem-item.sobra span { color: var(--ink); font-weight: 600; }
.cem-item.sobra b { font-size: 16px; color: var(--blue-ink); }

/* quanto falta receber: colunas pela idade do frete e quem mais deve */
.receber { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
.colunas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; height: 200px; border-bottom: 1px solid var(--line); }
.coluna { height: 100%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; border-radius: 8px 8px 0 0; }
button.coluna { cursor: pointer; }
button.coluna:hover { background: var(--blue-soft); }
.coluna b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.coluna i { display: block; width: min(46px, 100%); height: var(--h); min-height: 3px; border-radius: 5px 5px 0 0; background: var(--c); transform-origin: bottom center; animation: sobe .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
.coluna i.troca { animation: none; transition: height .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d); }
@keyframes sobe { from { transform: scaleY(.15); } }
.colunas-rot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 6px; text-align: center; }
.colunas-rot span { font-size: 12px; color: var(--ink-2); line-height: 1.25; }
.colunas-rot small { display: block; font-size: 11.5px; color: var(--ink-3); }
.devedores h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.devedor { display: block; width: 100%; padding: 7px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.devedor:first-of-type { border-top: 0; }
.devedor:hover .devedor-topo span { color: var(--blue-ink); }
.devedor-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.devedor-topo b { font-weight: 700; white-space: nowrap; }
.devedor small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* cavalos */
.tabela-simples { width: 100%; min-width: 540px; border-collapse: collapse; }
.tabela-simples th { font-size: 12px; font-weight: 500; color: var(--ink-3); text-align: left; padding: 8px 12px 8px 0; }
.tabela-simples td { padding: 7px 12px 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tabela-simples th.d, .tabela-simples td.d { text-align: right; padding-right: 0; padding-left: 12px; }
.tabela-simples .col-margem { padding-left: 20px; }
.tabela-simples tbody tr { transition: background .15s ease; }
.tabela-simples tbody tr:hover { background: var(--blue-soft); }
.tabela-simples .placa { width: 82px; border-radius: 4px; }
.tabela-simples .placa::before { height: 5px; }
.tabela-simples .placa span { font-size: 14px; line-height: 19px; }
.margem { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.margem .barra { flex: 1; }
.margem b { width: 56px; text-align: right; font-weight: 700; }
.neg-txt { color: var(--crit); font-weight: 700; }

/* quem mais contrata: lista com barra */
.cli-lista { display: flex; flex-direction: column; }
.cli-linha { display: block; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; }
.cli-linha:first-child { border-top: 0; }
button.cli-linha { cursor: pointer; }
button.cli-linha:hover .cli-topo > span { color: var(--blue-ink); }
.cli-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.cli-topo > span { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-topo b { font-size: 14px; font-weight: 700; white-space: nowrap; }
.cli-topo em { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: 6px; font-weight: 600; }
.cli-linha small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

/* tabelas detalhadas */
.detalhes > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: var(--r-item); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.detalhes > summary:hover { color: var(--ink); border-color: var(--blue); }
.detalhes > summary::-webkit-details-marker { display: none; }
.detalhes > summary .seta { margin-left: auto; transition: transform var(--transition); }
.detalhes[open] > summary .seta { transform: rotate(180deg); }
.detalhes[open] > summary { margin-bottom: 14px; }

/* entre 921 e 1400 px os minigráficos da coluna somem para nenhum valor ser cortado */
@media (max-width: 1400px) and (min-width: 1241px) {
  .kpis-lado .spark { display: none; }
}
@media (max-width: 1240px) {
  .s9 { grid-column: span 12; }
  .grade > .kpis-lado { grid-column: span 12; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s8, .s7, .s6, .s5, .s4 { grid-column: span 12; }
  .op-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .s3 { grid-column: span 6; }
}
@media (max-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-graf { min-height: 210px; }
}
@media (max-width: 640px) {
  .s3 { grid-column: span 12; }
  .grade > .kpis-lado { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 16px; }
  .hero-graf { min-height: 200px; }
  .hero-dados { grid-template-columns: auto minmax(0, 1fr); }
  .hero-dados div:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .dcard { padding: 16px; border-radius: 12px; }
  .op-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-item { border-left: 1px solid var(--line); padding-left: 14px; }
  .op-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cem, .receber { grid-template-columns: minmax(0, 1fr); }
  .waffle { max-width: 260px; }
  .alerta { grid-template-columns: 36px minmax(0, 1fr); }
  .alerta .btn { grid-column: 1 / -1; }
  .ph-actions .filtro { flex: 1 1 auto; justify-content: space-between; }
}

/* ============================================================
   FILTROS E FORMULÁRIOS
   ============================================================ */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px 18px; }
.toolbar .fg { min-width: 150px; }
.toolbar .fg.grow { flex: 1; min-width: 220px; }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* filtros: botão em destaque; o painel abre por cima da tela e não empurra os dados */
.filtros-btn { flex: none; width: 136px; justify-content: flex-start; background: var(--solid); border-color: var(--blue); color: var(--blue-ink); font-weight: 700; }
.filtros-btn.com-resumo { width: 272px; }
.filtros-btn:hover { background: color-mix(in srgb, var(--blue) 12%, var(--solid)); }
.filtros-btn[aria-expanded="true"] { background: var(--blue); color: var(--on-blue); }
.filtros-btn .chip-num { margin-left: auto; flex: none; }
.filtros-resumo { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.filtros-btn[aria-expanded="true"] .filtros-resumo { color: inherit; }
.filtros-pop { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); width: min(760px, 100%); max-height: min(82vh, 720px); overflow-y: auto; padding: 16px 18px 18px; border-radius: var(--r-card); background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-forte); animation: abre .18s cubic-bezier(.2,.8,.2,1); transform-origin: top right; }
.filtros-pop:focus { outline: 0; }
.filtros-pop-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.filtros-pop-topo strong { font-size: 18px; font-weight: 700; color: var(--ink); }
.filtros-corpo { display: flex; flex-direction: column; gap: 14px; }
.filtros-pe { display: flex; justify-content: flex-end; }
.sec-head { position: relative; }
.linha-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.linha-periodo .cal-area { flex: 0 1 300px; }
.filtro-busca { position: relative; display: flex; align-items: center; }
.filtro-busca > .ic { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.filtro-busca .input { padding-left: 40px; }
.filtros-corpo .seg { background: var(--glass-2); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.filtros-corpo .seg .ic { margin-right: 6px; }
.filtro-painel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.filtro-cal { margin-top: 10px; }
.filtros-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 14px; }
/* calendário de período */
.cal { position: relative; }
.cal-nav { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; pointer-events: none; }
.cal-seta { pointer-events: auto; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--solid); color: var(--ink-2); cursor: pointer; }
.cal-seta:hover { border-color: var(--blue); color: var(--ink); }
.cal-meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 22px; }
.cal-titulo { height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink); }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; margin-top: 6px; }
.cal-sem { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding-bottom: 4px; }
.cal-dia { height: 36px; border: 0; background: transparent; color: var(--ink); border-radius: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.cal-dia:hover { background: var(--blue-soft); border-radius: 10px; }
.cal-dia.hoje { font-weight: 800; color: var(--blue-ink); }
.cal-dia.meio { background: var(--blue-soft); }
.cal-dia.ini, .cal-dia.fim { background: var(--blue); color: var(--on-blue); font-weight: 700; }
.cal-dia.ini { border-radius: 10px 0 0 10px; }
.cal-dia.fim { border-radius: 0 10px 10px 0; }
.cal-dia.ini.fim { border-radius: 10px; }
.cal-texto { margin-top: 8px; color: var(--ink-2); font-size: 13.5px; }
.cal-area { position: relative; }
.cal-campo { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; white-space: nowrap; }
.cal-campo .ic { color: var(--blue); }
.cal-pop { position: fixed; z-index: 600; width: min(580px, calc(100vw - 32px)); overflow-y: auto; padding: 14px; border-radius: var(--r-item); background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-forte); }
.chip-ativo { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--blue-soft); color: var(--ink); cursor: pointer; }
.chip-ativo:hover { background: var(--blue-line); }
.limpar-filtros { min-height: 40px; padding: 0 10px; border: 0; background: none; color: var(--blue-ink); font-weight: 600; cursor: pointer; }
.limpar-filtros:hover { text-decoration: underline; }
.chip-num { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; margin-left: 8px; border-radius: 999px; background: var(--track); color: var(--ink); font-size: 12.5px; font-weight: 700; }
.chip.on .chip-num { background: var(--blue); color: var(--on-blue); }
.btn .chip-num { margin-left: 0; background: var(--blue); color: var(--on-blue); }

/* barra flutuante de seleção: fica à vista enquanto a lista rola */
.lista-area { position: relative; }
.barra-sel { position: sticky; bottom: 16px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; width: fit-content; max-width: 100%; margin: -6px auto 20px; padding: 10px 10px 10px 20px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); box-shadow: var(--shadow-forte); }
.barra-sel strong { font-weight: 700; }
.barra-sel-limpar { min-height: 44px; padding: 0 12px; border: 0; background: none; color: inherit; font-weight: 600; cursor: pointer; opacity: .8; }
.barra-sel-limpar:hover { opacity: 1; }
.barra-sel-acao.btn, .barra-sel .btn { min-height: 44px; padding: 0 18px; background: var(--btn-ink); color: var(--btn); border-color: transparent; font-weight: 700; }
.barra-sel .btn:hover { border-color: transparent; opacity: .92; }
.barra-sel .btn .ic { color: var(--good); }
:root[data-theme="dark"] .barra-sel .btn .ic { color: #0B7A43; }
/* motorista e cavalo */
.mot-cav { display: flex; align-items: center; gap: 12px; }
.mot-cav > div { min-width: 0; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--ink-2); transition: var(--transition); }
.chip:hover { border-color: var(--blue); color: var(--ink); }
.chip.on { background: var(--blue-soft); border-color: var(--blue); color: var(--ink); font-weight: 600; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.fg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fg > label, .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fg label .req { color: var(--crit); }
.fg .help { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
/* obrigatório vazio: a caixa fica em vermelho até ser preenchida */
.fg.erro > label { color: var(--crit); }
.fg.erro .input, .fg.erro .select, .fg.erro .textarea, .fg.erro .input:hover { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); }
.fg.erro::after { content: "Preencha este campo"; color: var(--crit); font-size: 12.5px; font-weight: 500; }
/* novo cadastro embaixo das caixas de seleção (só para o administrador) */
.input, .select, .textarea { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-ctl); font-size: 14px; line-height: 1.4; outline: none; background: var(--solid); border: 1px solid var(--line); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6990' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.input:hover:not(:focus):not(:disabled), .select:hover:not(:focus):not(:disabled), .textarea:hover:not(:focus) { border-color: var(--blue-line); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue); box-shadow: var(--ring); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: .85; }
.select option, .select optgroup { background: var(--solid); color: var(--ink); }
.textarea { resize: vertical; min-height: 84px; }
.input[readonly] { background: var(--glass-2); color: var(--ink-2); }
.input:disabled, .select:disabled { opacity: .45; cursor: not-allowed; }
.input.money, .input.num { text-align: right; font-variant-numeric: tabular-nums; }
input[type="date"].input::-webkit-calendar-picker-indicator, input[type="month"].input::-webkit-calendar-picker-indicator { cursor: pointer; }
:root[data-theme="dark"] input[type="date"].input::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="month"].input::-webkit-calendar-picker-indicator { filter: invert(.75); }
input[type="color"].input { padding: 3px; height: 44px; }
.up { text-transform: uppercase; }
.up::placeholder { text-transform: none; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; color: var(--ink-2); }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
.chips .check { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--glass-2); }
.form-section { border: 1px solid var(--line); border-radius: var(--r-item); padding: 16px; margin-bottom: 14px; background: var(--glass-2); }
.form-section > h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.form-section > h4 .ic { color: var(--blue); }
.inline-note { font-size: 13px; color: var(--ink-3); }
.err-msg { color: var(--crit); font-size: 13px; font-weight: 500; min-height: 18px; }

/* combo pesquisável (ac-* do original) */
.combo { position: relative; }
.combo .input { padding-right: 32px; }
.combo-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; display: flex; }
.combo-caret .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.combo-list { position: fixed; z-index: 600; overflow-y: auto; padding: 4px; background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: var(--shadow-forte); }
.combo-opt { padding: 9px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; transition: var(--transition); }
.combo-opt small { color: var(--ink-3); font-size: 11px; }
.combo-opt.on, .combo-opt:hover { background: var(--blue-soft); }
.combo-vazio { padding: 10px; color: var(--ink-3); font-size: 12px; text-align: center; }
/* Novo cadastro: sempre a última opção, visível mesmo com a lista rolando */
.combo-opt.combo-novo { position: sticky; bottom: -4px; justify-content: flex-start; align-items: center; margin: 4px -4px -4px; padding: 11px 14px; border-top: 1px solid var(--line); border-radius: 0; background: var(--solid); color: var(--blue-ink); font-weight: 700; }
.combo-opt.combo-novo .ic { width: 15px; height: 15px; }
.combo-opt.combo-novo.on, .combo-opt.combo-novo:hover { background: color-mix(in srgb, var(--blue) 12%, var(--solid)); }

/* ============================================================
   TABELAS (tbl do original)
   ============================================================ */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { position: sticky; top: 0; z-index: 1; background: var(--glass-2); color: var(--ink-3); font-weight: 500; font-size: 13px; padding: 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
.table th.right { text-align: right; }
.table th.sort { cursor: pointer; }
.table th.sort:hover { color: var(--ink); }
.table td { height: 56px; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.clicavel { cursor: pointer; }
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover td { background: var(--blue-soft); }
.table tbody tr.sel td { background: var(--blue-soft); }
.table td.acts { white-space: nowrap; text-align: right; width: 1%; }
.table td.cb, .table th.cb { width: 56px; padding: 0 0 0 12px; }
.table tfoot td { font-weight: 700; background: var(--glass-2); height: 48px; }
/* caixa de seleção: 20 px dentro de um alvo de 44 px */
.cb-alvo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
.cb-alvo input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 2px solid var(--ink-3); background: transparent; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.cb-alvo input:checked, .cb-alvo input:indeterminate { background-color: var(--blue); border-color: var(--blue); background-repeat: no-repeat; background-position: center; background-size: 14px; }
.cb-alvo input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.cb-alvo input:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--ink-3); flex-wrap: wrap; }
.page-actions { display: flex; align-items: center; gap: 8px; }
.empty { padding: 56px 20px; text-align: center; color: var(--ink-3); }
.empty > .ic { width: 44px; height: 44px; display: block; margin: 0 auto 14px; opacity: .4; }
.empty strong { display: block; color: var(--ink-2); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
/* placa no padrão Mercosul, igual nos dois temas */
.placa { display: inline-flex; flex-direction: column; flex: none; width: 92px; border-radius: 6px; overflow: hidden; background: #F5F8FF; border: 1px solid #0B1B45; box-shadow: 0 6px 14px -8px rgba(11,27,69,.6); vertical-align: middle; }
.placa::before { content: ""; height: 6px; background: #1B4FD8; }
.placa span { text-align: center; color: #0B1B45; font-size: 16px; line-height: 22px; font-weight: 700; font-stretch: 78%; letter-spacing: .08em; }

/* resumo do filtro (sum-row do original) */
.totais { display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 14px 22px; background: var(--glass-2); }
.totais > div { display: flex; gap: 6px; align-items: baseline; }
.totais span { color: var(--ink-3); }
.totais strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   BADGES, TAGS
   ============================================================ */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border: 0; background: var(--track); color: var(--ink-2); }
.badge .ic { width: 12px; height: 12px; stroke-width: 2.8; }
.badge.ok { background: var(--good-bg); color: var(--good); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--crit-bg); color: var(--crit); }
.badge.info { background: var(--blue-soft); color: var(--blue-ink); }
.badge.violet { background: var(--violet-bg); color: var(--violet); }
.tag { display: inline-block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: 6px; background: var(--track); letter-spacing: .03em; }

/* ============================================================
   JANELAS, TOASTS, MENU
   ============================================================ */
.modal-back { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(11,27,69,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .15s ease; }
.modal { width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-forte); animation: up .18s ease; overflow: hidden; }
.modal.lg { max-width: 880px; }
.modal.xl { max-width: min(1200px, 96vw); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 6px; }
.modal-head h3 { font-size: 18px; font-weight: 700; color: var(--ink); }
.modal-head p { margin-top: 2px; color: var(--ink-3); font-size: 13.5px; }
.modal-body { padding: 14px 24px 22px; overflow-y: auto; flex: 1; min-width: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--glass-2); flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; }
@media (max-width: 640px) { .modal-back { padding: 8px; } .modal-body { padding: 12px 16px 16px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(12px); opacity: 0; } }

.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 999; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 44px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; min-width: 240px; padding: 12px 16px; border-radius: 10px; font-weight: 500; background: var(--solid); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-forte); animation: up .2s ease; }
.toast > .ic { flex: none; margin-top: 1px; }
.toast.ok > .ic { color: var(--good); }
.toast.erro > .ic { color: var(--crit); }
.toast.aviso > .ic { color: var(--warn-mark); }

/* "Como é calculado": ícone no canto do gráfico e explicação que abre ao clicar. */
.ajuda-calc { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; flex-shrink: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; transition: var(--transition); }
.ajuda-calc .ic { width: 17px; height: 17px; }
.ajuda-calc:hover, .ajuda-calc[aria-expanded="true"] { color: var(--blue); background: var(--blue-soft); }
.kpi-label-dir { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.ajuda-pop { position: fixed; z-index: 450; width: min(350px, calc(100vw - 16px)); max-height: min(82vh, 560px); overflow-y: auto; padding: 16px 18px; background: var(--solid); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-item); box-shadow: var(--shadow-forte); font-size: 13.5px; line-height: 1.45; }
.ajuda-pop:focus { outline: none; }
.ajuda-pop-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ajuda-pop-topo strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.ajuda-pop-x { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -3px -5px 0 0; padding: 0; flex-shrink: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; }
.ajuda-pop-x:hover { color: var(--ink); background: var(--blue-faint); }
.ajuda-pop-formula { margin: 10px 0; padding: 9px 12px; border-radius: var(--r-ctl); background: var(--blue-soft); color: var(--ink); font-weight: 600; }
.ajuda-pop ul { margin: 0; padding-left: 16px; list-style: disc; }
.ajuda-pop li + li { margin-top: 6px; }
.ajuda-pop-exemplo { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--ink-3); }
.ajuda-pop-exemplo b { color: var(--ink-2); font-weight: 600; }
@media (pointer: coarse) {
  .ajuda-calc, .ajuda-pop-x { width: 40px; height: 40px; }
  .ajuda-pop-x { margin: -10px -12px 0 0; }
  .card-head:has(> .ajuda-calc) { padding-right: 54px; }
  .card-head > .ajuda-calc { top: 4px; right: 6px; }
}
.menu { position: fixed; z-index: 450; min-width: 220px; padding: 6px; background: var(--solid); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-forte); }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; border: 0; background: transparent; padding: 0 12px; border-radius: 10px; cursor: pointer; text-align: left; color: var(--ink-2); }
.menu button .ic { width: 16px; height: 16px; color: var(--ink-3); }
.menu button:hover:not(:disabled) { background: var(--blue-soft); color: var(--ink); }
.menu button:hover:not(:disabled) .ic { color: var(--blue); }
.menu button:disabled { opacity: .5; cursor: not-allowed; }
.menu button.perigo, .menu button.perigo .ic { color: var(--crit); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }

/* ============================================================
   PEÇAS DIVERSAS
   ============================================================ */
.preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.preview > div { padding: 12px 14px; border-radius: 9px; background: var(--glass-2); border: 1px solid var(--line); }
.preview .pv-l { font-size: 12.5px; color: var(--ink-3); margin-bottom: 3px; }
.preview .pv-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums; }

.lista-simples { list-style: none; }
.lista-simples li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lista-simples li:last-child { border-bottom: 0; }

/* barras de progresso: trilho de 8 px, crescem a partir da esquerda */
.bar, .barra { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 4px; background: var(--blue); min-width: 2px; }
.barra i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--blue); transform-origin: left center; animation: cresce 1s cubic-bezier(.2,.8,.2,1) both; }
.barra.lar i { background: var(--orange); }
.barra.neg i { background: var(--crit); }
.barra.at i { background: var(--warn-mark); }
@keyframes cresce { from { transform: scaleX(.3); } to { transform: scaleX(1); } }
/* troca de período: a barra vai da largura antiga até a nova, sem repetir a entrada */
.barra i.troca, .mudou-barras i.troca { animation: none; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.partes { display: flex; gap: 2px; height: 10px; }
.partes i { display: block; height: 100%; border-radius: 5px; background: var(--orange); transform-origin: left center; animation: cresce 1s cubic-bezier(.2,.8,.2,1) both; }
.partes i + i { background: var(--blue); }
.anel { position: relative; width: 86px; height: 86px; flex: none; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 9; }
.anel .trilho { stroke: var(--track); }
.anel .valor { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px var(--blue-soft)); }
.anel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; }

/* gráficos */
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--ink-2); font-size: 12.5px; }
.legenda > span { display: inline-flex; align-items: center; gap: 8px; }
.legenda i { width: 18px; height: 3px; border-radius: 2px; background: var(--blue); }
.plot { position: relative; outline-offset: 6px; touch-action: pan-y; }
.plot > svg { display: block; width: 100%; overflow: visible; }
.plot text { font-family: var(--font); font-size: 11.5px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.plot .forte { fill: var(--ink); font-weight: 700; font-size: 12px; }
.g-grade { stroke: var(--line); stroke-width: 1; }
.g-base { stroke: var(--ink-3); stroke-opacity: .5; stroke-width: 1; }
.g-guia { stroke: var(--ink-3); stroke-width: 1; }
.g-faixa { fill: var(--blue); fill-opacity: .11; }
.g-linha { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.g-ponta { stroke: var(--solid); stroke-width: 2; }
.g-coluna { fill: var(--blue-soft); }
.dica { position: absolute; z-index: 5; top: 6px; min-width: 180px; padding: 10px 12px; border-radius: 9px; pointer-events: none; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); }
.dica h3 { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.dica p { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.dica p b { color: var(--ink); font-weight: 700; min-width: 84px; }
.dica p i { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.dica p.res { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.conclusao { padding: 9px 12px; border-radius: 8px; background: var(--glass-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
.tabela-rolagem { overflow-x: auto; }

.tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; overflow-x: auto; border-radius: 9px; background: var(--glass); border: 1px solid var(--edge); width: fit-content; max-width: 100%; }
.tab { min-height: 40px; border: 0; background: none; padding: 0 16px; font-weight: 500; color: var(--ink-2); cursor: pointer; border-radius: 10px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); background: var(--blue-soft); font-weight: 600; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; }
.kv dt { color: var(--ink-3); font-size: 12px; }
.kv dd { font-weight: 600; }

.dropzone { border: 2px dashed var(--line); border-radius: 9px; padding: 28px; text-align: center; color: var(--ink-2); cursor: pointer; transition: var(--transition); }
.dropzone > .ic { width: 30px; height: 30px; color: var(--blue); display: block; margin: 0 auto 10px; }
.dropzone:hover, .dropzone.over { border-color: var(--blue); background: var(--blue-faint); }
/* Verificação em duas etapas */
.mfa-passos { display: grid; grid-template-columns: max-content 1fr; gap: 20px; align-items: start; }
.mfa-qr { display: block; width: 210px; height: 210px; image-rendering: pixelated; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.mfa-chave { font-size: 14px; margin: 8px 0 14px; word-break: break-word; }
.mfa-codigos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mfa-codigos li { font-variant-numeric: tabular-nums; font-size: 14px; text-align: center; padding: 9px 10px; border-radius: 8px; background: var(--track); border: 1px solid var(--line); }
.mfa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mfa-alerta { color: var(--warn); font-weight: 600; }
@media (max-width: 640px) {
  .mfa-passos { grid-template-columns: 1fr; justify-items: center; }
  .mfa-passos > div { width: 100%; }
}
.secret { font-variant-numeric: tabular-nums; font-size: 18px; padding: 14px; border-radius: 10px; background: var(--track); border: 1px solid var(--line); text-align: center; letter-spacing: .05em; user-select: all; }
.logo-preview { max-height: 64px; max-width: 220px; padding: 8px; border-radius: 10px; background: #06121F; }

/* impressão da segunda via do fechamento */
.print-doc { background: #fff; color: #0F172A; padding: 28px; border-radius: 12px; font-family: var(--font); }
.print-doc h2 { margin: 0 0 4px; font-size: 18px; }
.print-doc table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.print-doc th { text-align: left; font-size: 11px; color: #475569; background: #F1F5F9; padding: 6px; }
.print-doc td { padding: 6px; border-bottom: 1px solid #E2E8F0; }
.print-doc .assin { display: flex; gap: 40px; margin-top: 56px; }
.print-doc .assin div { flex: 1; border-top: 1px solid #0F172A; padding-top: 4px; text-align: center; color: #475569; }
@media print {
  :root { color-scheme: light; }
  body * { visibility: hidden !important; }
  .print-doc, .print-doc * { visibility: visible !important; }
  .print-doc { position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
  .modal-back { background: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Status clicável da viagem e modal de recebimento (padrão do app original). */
.badge-click { cursor: pointer; font-family: inherit; transition: filter var(--transition), box-shadow var(--transition); }
.badge-click:hover { filter: brightness(1.12); box-shadow: 0 0 0 3px var(--blue-faint); }
.link-status { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.link-status:hover { color: var(--blue); }
.preview.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--glass-2); margin-bottom: 14px; }
.status-card .preview { margin: 10px 0 6px; }
.status-card-tit { font-weight: 700; text-align: center; }
.status-card-sub { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 2px; }
.status-tit { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 14px 0 8px; }
.status-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.status-choice { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--solid); color: var(--ink-2); cursor: pointer; font: inherit; transition: var(--transition); }
.status-choice:hover:not(:disabled) { border-color: var(--blue-line); }
.status-choice:disabled { opacity: .5; cursor: not-allowed; }
.status-choice.active { border-color: currentColor; box-shadow: 0 0 0 3px var(--blue-faint); }
.status-choice strong { display: block; font-size: 13px; color: var(--ink); }
.status-choice small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.status-choice.pending .status-dot { background: var(--ink-3); }
.status-choice.received { color: var(--good); } .status-choice.received .status-dot { background: var(--good); }
.status-choice.partial { color: var(--warn); } .status-choice.partial .status-dot { background: var(--warn); }
.parcial-box { display: none; margin-top: 10px; padding: 12px; border: 1px dashed var(--warn-line); border-radius: 12px; background: var(--warn-bg); }
.parcial-box.open { display: block; }
.parcial-acao { display: flex; justify-content: flex-end; margin-top: 8px; }
.status-hist { max-height: 220px; overflow-y: auto; }
.hist-valor { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.money.riscado { text-decoration: line-through; color: var(--ink-3); }
.lista-simples li.estornado .cell-main { color: var(--ink-2); }

/* Baixa em lote: uma linha por viagem; no celular vira cartão e nada some. */
.bl-ferramentas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 12px 0; }
.bl-ferramentas .fg { flex: 1 1 260px; margin: 0; }
.bl-botoes { display: flex; gap: 8px; }
.bl-lista { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--solid); }
.bl-linha { display: grid; grid-template-columns: 22px minmax(0, 1.25fr) minmax(0, 1fr) 104px 104px 128px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bl-linha:last-child { border-bottom: 0; }
.bl-linha:hover { background: var(--glass-2); }
.bl-linha.hidden { display: none; }
.bl-linha > input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--blue); }
.bl-texto { min-width: 0; }
.bl-texto strong, .bl-texto small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-texto strong { font-size: 12.5px; font-weight: 600; }
.bl-texto small { margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.bl-money { text-align: right; font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums; font-size: 12px; }
.bl-saldo { color: var(--warn); }
.bl-money span, .bl-final span { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.bl-final span { margin-bottom: 2px; text-align: right; }
.bl-final .input { min-height: 36px; padding: 4px 8px; text-align: right; font-size: 13px; }
.bl-final .input.invalido { border-color: var(--crit); }
.bl-vazio { padding: 32px 14px; }
@media (max-width: 760px) {
  .bl-lista { max-height: none; overflow: visible; }
  .bl-linha { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; align-items: start; }
  .bl-texto, .bl-final { grid-column: 2 / -1; }
  .bl-texto strong, .bl-texto small { white-space: normal; }
  .bl-money { text-align: left; }
  .bl-frete { grid-column: 2; }
  .bl-saldo { grid-column: 3; }
  .bl-final span { text-align: left; }
  .bl-final .input { height: 44px; text-align: left; font-size: 16px; }
}
@media (max-width: 640px) { .status-picker, .preview.k3 { grid-template-columns: 1fr; } }

/* Análises do abastecimento */
.kpi.destaque-total { grid-column: span 2; border-color: var(--blue-line); background: linear-gradient(135deg, var(--glass) 0%, var(--blue-soft) 100%); }
.kpi.destaque-total .kpi-value { color: var(--blue); }
.barras-h { display: flex; flex-direction: column; gap: 12px; }
.barra-h-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 5px; }
.barra-h-top strong { font-variant-numeric: tabular-nums; font-size: 13px; }
.barra-h-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 760px) { .kpi.destaque-total { grid-column: 1 / -1; } }

/* Importação por planilha-modelo */
.passos-import { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.passos-import li { color: var(--ink-2); font-size: 13px; }
.passos-import li strong { color: var(--ink); }
.passos-import li > div { margin-top: 8px; }
.linha-arquivo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Lançamento de viagens em massa */
.massa-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.massa-barra .spacer { flex: 1; }
.massa-grade { overflow: auto; border: 1px solid var(--edge); border-radius: var(--r-item); max-height: 52vh; background: var(--glass); box-shadow: var(--shadow); }
.massa-grade th { background: var(--solid); }
.massa-grade table { width: max-content; min-width: 100%; }
.massa-grade td { padding: 4px 6px; }
.massa-grade .input, .massa-grade .select { min-height: 38px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.massa-grade .input.right { text-align: right; }
.massa-grade tr.linha-erro td { background: var(--crit-bg); }
.massa-grade .acoes-linha { white-space: nowrap; }
.xml-rel { margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); }
tr:has(.marca-usada:checked) td { opacity: .62; }
tr:has(.marca-usada:checked) td:first-child { opacity: 1; }
.marca-usada { width: 15px; height: 15px; accent-color: var(--blue); }
.detalhe-lista { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 16px; font-size: 13px; }
.detalhe-lista dt { color: var(--ink-3); }
.detalhe-lista dd { margin: 0; word-break: break-word; }
.xml-rel summary { padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.xml-rel .table-wrap, .xml-rel table { margin: 0; }

/* ============================================================
   TABELAS: texto longo quebra a linha em vez de empurrar colunas para fora da tela
   ============================================================ */
.cel { display: contents; }
.table.cartao th, .table.manter th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
/* muitas colunas: respiro lateral menor para caber sem rolagem */
.table.cartao:has(thead th:nth-child(8)) th, .table.cartao:has(thead th:nth-child(8)) td,
.table.manter:has(thead th:nth-child(8)) th, .table.manter:has(thead th:nth-child(8)) td { padding-left: 10px; padding-right: 10px; }
.table.cartao:has(thead th:nth-child(11)) th, .table.cartao:has(thead th:nth-child(11)) td { padding-left: 8px; padding-right: 8px; }

/* tablet: dois blocos lado a lado apertam as tabelas; um embaixo do outro cabe sem rolagem */
@media (max-width: 960px) { .grid.k2 { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   CELULAR: dados primeiro, ação principal à vista e nada para rolar de lado
   ============================================================ */
@media (max-width: 820px) {
  /* botões do topo em uma fileira que rola de lado; a ação principal vem primeiro e nunca fica na parte escondida */
  .ph-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ph-actions::-webkit-scrollbar { display: none; }
  .ph-actions .btn { flex: 0 0 auto; white-space: nowrap; }
  .ph-actions .btn.primary { order: -1; }
  .ph:has(.filtros-btn) .ph-actions > .btn.primary { margin-left: 0; }
  .filtros-btn.com-resumo { width: 136px; }
  .filtros-resumo { display: none; }
  .ph-actions .btn:only-child { flex: 1 1 auto; }
  /* seletor de mês ou período no topo: fica à vista, sem precisar rolar a fileira */
  .ph-actions:has(> .fg, > .combo, > .pil-sel) { flex-wrap: wrap; overflow: visible; }
  .ph-actions > .fg { flex: 1 1 100%; }
  /* painel de filtros de ponta a ponta no celular */
  .filtros-pop { left: 0; width: 100%; }
  .filtros-corpo .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtros-corpo .seg button { flex: 0 0 auto; }

  /* indicadores em duas colunas, com o valor em uma linha só (o "R$" nunca fica sozinho acima do número) */
  .kpi-grid, .grid.k4, .grid.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px; }
  .kpi .kpi-value { font-size: clamp(13px, 3.9vw, 18px); white-space: nowrap; }
  .kpi.destaque, .kpi.destaque-total { grid-column: 1 / -1; }
  .kpi.destaque .kpi-value, .kpi.destaque-total .kpi-value { font-size: 21px; }

  /* tamanho de toque; 16px nos campos evita o zoom automático do iPhone */
  .btn, .btn.sm { min-height: 44px; }
  .btn.icon, .btn.sm.icon { width: 44px; }
  .input, .select, .textarea { font-size: 16px; }

  /* tabela vira cartões: título da coluna à esquerda, valor à direita */
  .table-wrap:has(> .table.cartao) { overflow-x: visible; }
  .table.cartao, .table.cartao tbody, .table.cartao thead tr { display: block; width: 100%; }
  .table.cartao thead { display: none; }
  /* "selecionar todos" continua acessível nas listas com ação em lote */
  .table.cartao:has(th.cb) thead { display: block; }
  .table.cartao thead th:not(.cb) { display: none; }
  .table.cartao thead th.cb { display: flex; align-items: center; gap: 4px; width: auto; padding: 4px 12px; background: none; border: 0; font-size: 13px; }
  .table.cartao thead th.cb::after { content: 'Selecionar todos'; }
  .table.cartao tbody tr { display: block; margin: 10px 12px; padding: 6px 0; border: 1px solid var(--line); border-radius: var(--r-item); background: var(--glass-2); }
  .table.cartao tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto; height: auto; padding: 5px 12px;
    border: 0; text-align: right; overflow-wrap: anywhere;
  }
  .table.cartao tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label); flex: 0 0 auto; max-width: 46%; text-align: left; color: var(--ink-3);
    font-size: 13px; font-weight: 500; overflow-wrap: normal;
  }
  .table.cartao tbody td > .cel { display: block; flex: 0 1 auto; min-width: 0; text-align: right; }
  .table.cartao tbody td:has(> .cel:empty) { display: none; }
  .table.cartao tbody td.cb { width: auto; padding-right: 12px; }
  .table.cartao tbody td.acts { justify-content: flex-end; flex-wrap: wrap; gap: 8px; width: auto; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); white-space: normal; }
  .table.cartao tbody td.acts:empty { display: none; }
  .table.cartao tbody tr:hover td { background: transparent; }
  .table.cartao tbody tr.sel { background: var(--blue-soft); border-color: var(--blue-line); }
  .table.cartao tbody tr.sel td { background: transparent; }
  /* tabela larga de conferência continua rolando de lado, com a primeira coluna à vista */
  .table.manter { width: max-content; min-width: 100%; }
  .table.manter th:first-child, .table.manter td:first-child { position: sticky; left: 0; z-index: 1; background: var(--solid); }

  /* janela sobe da base, de ponta a ponta, com os botões sempre à vista */
  .modal-back { align-items: flex-end; padding: 0; }
  .modal, .modal.lg, .modal.xl { max-width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 14px 14px 0 0; }
  .modal-head { padding: 16px 16px 4px; }
  .modal-body { padding: 10px 16px 14px; }
  .modal-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .modal-foot .btn { flex: 1 1 140px; }
}

/* Resumo bancário: um cartão por banco, lado a lado */
.bancos { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; }
.banco { margin: 0; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.banco-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.banco-logo { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--blue-soft); color: var(--blue-ink); font-weight: 800; font-size: 17px; }
.banco-nome { min-width: 0; }
.banco-nome h3 { font-size: 18px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banco-nome p { color: var(--ink-3); font-size: 13px; }
.banco-saldo { text-align: right; }
.banco-saldo span { display: block; color: var(--ink-3); font-size: 13px; }
.banco-saldo strong { font-size: 22px; font-weight: 700; font-stretch: 106%; white-space: nowrap; }
.banco-fluxos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.banco-fluxo { min-width: 0; padding: 10px 12px; border-radius: 9px; background: var(--glass-2); border: 1px solid var(--line); }
.banco-fluxo span { display: block; color: var(--ink-3); font-size: 12.5px; }
.banco-fluxo strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banco-contas { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.banco-conta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.banco-conta:hover { border-color: var(--blue); }
.banco-conta-txt { min-width: 0; }
.banco-conta-txt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banco-conta-txt small { color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 640px) {
  .bancos, .banco { grid-template-columns: minmax(0, 1fr); }
  .banco-saldo { text-align: left; }
  .banco-fluxos { grid-template-columns: minmax(0, 1fr); }
}

/* Fechamento do motorista */
.fech-topo { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(240px, 340px); gap: 14px; }
.fech-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; }
.fech-resumo { position: sticky; top: 14px; }
.fech-tit { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.fech-tit .ic { color: var(--blue); }
.fech-grupo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.fech-grupo-tit { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; color: var(--ink); }
.fech-grupo-tit span { color: var(--ink-3); font-size: 13px; }
.fech-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.fech-item:hover { background: var(--blue-soft); }
.fech-item input { width: 18px; height: 18px; accent-color: var(--blue); }
.fech-item-txt { min-width: 0; }
.fech-item-txt b { display: block; font-weight: 600; }
.fech-item-txt small { color: var(--ink-3); font-size: 12.5px; }
.fech-item-valor { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.fech-ajustes { display: flex; flex-direction: column; gap: 8px; }
.fech-ajuste { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px auto; gap: 8px; align-items: center; }
.fech-linha { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.fech-linha b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.fech-linha b.pos { color: var(--good); }
.fech-linha b.neg-txt { color: var(--crit); }
.fech-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 4px; font-weight: 700; color: var(--ink); }
.fech-total b { font-size: 24px; font-stretch: 106%; white-space: nowrap; }
.fech-botoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fech-resumo-corpo { margin-top: 8px; }
.fech-resumo-det { max-width: 420px; margin: 14px 0 0 auto; }
.fech-nota { margin-top: 12px; }
@media (max-width: 1100px) { .fech-grade, .fech-topo { grid-template-columns: minmax(0, 1fr); } .fech-resumo { position: static; } }
@media (max-width: 640px) { .fech-ajuste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fech-ajuste > :first-child { grid-column: 1 / -1; } }

.consumo-placa { max-height: 340px; overflow-y: auto; }

/* km/L comparado com a mediana da frota: melhores e pontos de atenção embaixo do gráfico */
.kml-destaque { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.kml-destaque h4 { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: var(--good); }
.kml-destaque h4.ruim { color: var(--crit); }
.kml-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.kml-item strong { margin-left: auto; font-size: 13.5px; }
.kml-item .delta { min-width: 62px; justify-content: flex-end; font-size: 13px; }
.kml-nota { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) { .kml-destaque { grid-template-columns: minmax(0, 1fr); } }

/* pagamento de parcelas: prévia de como o valor se distribui e parcela clicável na lista */
.pag-previa, .desp-previa { align-items: flex-start; margin: 12px 0 0; }
.pag-previa ul { margin: 4px 0 0 18px; padding: 0; }
.pag-previa li { margin: 2px 0; }
.link-parcela { padding: 0; border: 0; background: none; color: var(--blue-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
:root[data-theme="dark"] .link-parcela { color: var(--blue); }

/* área preenchida nos gráficos de linha (DRE bancária) */
.g-area { stroke: none; }

/* cascata do saldo de pedágio: recarga sobe, uso desce */
.g-sobe { fill: var(--blue); }
.g-desce { fill: var(--orange); }
.g-elo { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.g-saldo { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: .55; }

/* totais do formulário presos no topo da janela enquanto o formulário rola */
.preview.totais-fixos { position: sticky; top: -14px; z-index: 6; margin: -14px -24px 14px; padding: 12px 24px 10px; background: var(--solid); border-bottom: 1px solid var(--line); box-shadow: 0 8px 14px -12px rgba(11,27,69,.35); }
.preview.totais-fixos > div { padding: 7px 12px; border-radius: var(--r-item); }
.preview.totais-fixos .pv-l { margin-bottom: 1px; font-size: 12px; }
@media (max-width: 820px) {
  .preview.totais-fixos { top: -10px; margin: -10px -16px 12px; padding: 8px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .preview.totais-fixos > div { padding: 5px 9px; }
  .preview.totais-fixos .pv-v { font-size: 13.5px; }
}

/* exportar para Excel: escolha de colunas e cálculos */
.exp { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.exp h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.exp h4 .ic { color: var(--blue); }
.exp-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.exp-contagem { color: var(--ink-3); font-size: 13px; }
.exp-topo .link-status { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.exp-grupo { position: relative; margin: 0 0 10px; padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: var(--r-item); min-width: 0; }
.exp-grupo legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.exp-grupo-acoes { position: absolute; top: -9px; right: 10px; padding: 0 6px; background: var(--solid); color: var(--ink-3); font-size: 12px; }
.exp-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 10px; }
.exp-itens.um { grid-template-columns: minmax(0, 1fr); }
.exp-opcao { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 6px; border-radius: 7px; cursor: pointer; color: var(--ink); font-size: 13.5px; }
.exp-opcao:hover { background: var(--blue-soft); }
.exp-opcao input { flex: none; width: 16px; height: 16px; accent-color: var(--blue); }
.exp-lado { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.exp-bloco { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-item); }
.exp-bloco .help { display: block; margin: 4px 0 8px; }
.exp-bloco .select { width: 100%; }
.exp-periodo p { margin-top: 6px; color: var(--ink-2); font-size: 13.5px; }
.exp-periodo .help { margin-bottom: 0; }
@media (max-width: 820px) {
  .exp { grid-template-columns: minmax(0, 1fr); }
  .exp-lado { position: static; }
}

/* suporte */
.sup-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-bottom: 16px; }
.sup-tit { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.sup-tit .ic { color: var(--blue); }
.sup-form { display: flex; flex-direction: column; gap: 14px; }
.sup-form > .sub { margin-top: -10px; }
.sup-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sup-tipo { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--r-item); border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.sup-tipo:hover { border-color: var(--blue); }
.sup-tipo[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.sup-tipo .ic { flex: none; color: var(--blue); margin-top: 1px; }
.sup-tipo strong { display: block; font-weight: 700; }
.sup-tipo small { color: var(--ink-3); font-size: 12.5px; }
.sup-zona { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--r-item); color: var(--ink-2); cursor: pointer; }
.sup-zona:hover, .sup-zona.sobre, .sup-zona:focus-visible { border-color: var(--blue); background: var(--blue-soft); }
.sup-zona .ic { flex: none; color: var(--blue); }
.sup-zona strong { display: block; color: var(--ink); font-weight: 600; }
.sup-zona small { color: var(--ink-3); font-size: 12.5px; }
.sup-miniaturas { display: flex; flex-wrap: wrap; gap: 10px; }
.sup-miniaturas:not(:empty) { margin-top: 10px; }
.sup-mini { position: relative; width: 96px; height: 72px; margin: 0; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line); }
.sup-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sup-mini-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(6,17,43,.72); color: #fff; cursor: pointer; }
.sup-enviar { display: flex; justify-content: flex-end; }
.sup-whats { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 14px; }
.sup-whats p { color: var(--ink-2); }
.sup-whats .btn { text-decoration: none; }
.sup-numero { text-align: center; font-weight: 700; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.sup-lista { margin-bottom: 16px; }
.sup-sec { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.sup-sec .ic { color: var(--good); }
.sup-texto { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.sup-imagens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sup-imagens a { display: block; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line); }
.sup-imagens img { display: block; width: 180px; height: 120px; object-fit: cover; }
.sup-resposta { margin-top: 14px; padding: 2px 14px 12px; border-radius: var(--r-item); background: var(--good-bg); }
.sup-resposta small { display: block; margin-top: 6px; color: var(--ink-3); }
.sup-responder { margin-top: 16px; }
@media (max-width: 960px) {
  .sup-grade { grid-template-columns: minmax(0, 1fr); }
  .sup-whats { position: static; }
}
@media (max-width: 640px) { .sup-tipos { grid-template-columns: minmax(0, 1fr); } }

/* abas de uma tela */
.linha-abas { margin-bottom: 16px; }
.linha-abas-seg { margin-bottom: 16px; }
.preview { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* placa, rota e idade do frete nas tabelas */
.rota { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
@media (max-width: 1240px) { .rota { flex-wrap: wrap; white-space: normal; } }
.rota i { flex: 0 0 34px; height: 0; border-top: 2px dashed var(--blue); }
.card-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.barra-espaco { margin-top: 6px; }
.kpi-label-dir .badge { white-space: nowrap; }
/* prévia da cor da marca em Configurações */
.cor-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.previa-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.previa-marca .btn { pointer-events: none; }
.previa-menu { display: inline-flex; padding: 6px; border-radius: 9px; background: linear-gradient(180deg, var(--side-1), var(--side-2)); }
.previa-menu .item { min-height: 36px; }