/* ═══════════════════════════════════════════════════════════════════════════
   PONTUAL PETRÓLEO — LOGÍSTICA (SGL) — CORPORATE UNIFICADO v7
   Inspiração: pontualpetroleo.com.br + Ecossistema Digital (intranet)
   Paleta: navy #18216E / #232C7A · amarelo #FFD815 · verde #629725
           papel #F7F7F8 · carvão #222221 · linha #E4E6EA
   Foco: responsividade total e cores 100% uniformes em todas páginas/cards
   Fonte: Montserrat (site institucional) — idêntica ao ecossistema
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS — Claro (padrão) — alinhado a pontualpetroleo.com.br
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Base Pontual — ecossistema */
  --navy: #18216E;
  --navy-2: #232c7a;
  --blue: #18216E;
  --blue-2: #232c7a;
  --blue-soft: #eef1ff;
  --yellow: #FFD815;
  --yellow-soft: #fff8cc;
  --green: #629725;
  --green-soft: #eef4e2;
  --red: #bf3450;
  --ink: #222221;
  --muted: #5f6670;
  --subtle: #75828b;
  --line: #e4e6ea;
  --line-strong: #c9d2dc;
  --bg: #f7f7f8;
  --paper: #ffffff;
  --shadow: 0 8px 24px rgba(24,33,110,.08);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;
  --sidebar-w: 264px;

  /* Compat — variáveis legadas do bundle logístico (mapeadas) */
  --n-0: #ffffff;
  --n-25: #fbfbfa;
  --n-50: #f7f7f8;
  --n-100: #f0f1f3;
  --n-200: #e4e6ea;
  --n-300: #d5d8de;
  --n-400: #9aa2ab;
  --n-500: #6b7481;
  --n-600: #4b545f;
  --n-700: #373e48;
  --n-800: #222221;
  --n-900: #16181a;
  --n-950: #0a0b0c;

  --accent-50: #eef1fb;
  --accent-100: #dde3f7;
  --accent-200: #bcc7ed;
  --accent-300: #94a3e0;
  --accent-400: #6578cd;
  --accent-500: #3f52b6;
  --accent-600: #2a37a0;
  --accent-700: #18216e;
  --accent-800: #141b57;
  --accent-900: #0f1443;
  --accent: #18216e;
  --accent-hover: #232c7a;
  --accent-active: #141b57;
  --accent-soft: #eef1ff;
  --accent-contrast: #ffffff;
  --ring: 0 0 0 3px rgba(24,33,110,.18);

  --tech: #4c6685;
  --tech-text: #3a5370;
  --tech-strong: #34506b;
  --tech-soft: #eef2f7;
  --tech-border: #cdd7e2;
  --tech-contrast: #ffffff;

  --chart-1: #18216e;
  --chart-2: #3f52b6;
  --chart-3: #629725;
  --chart-4: #e08600;
  --chart-5: #9c7c4c;
  --chart-6: #b0866b;
  --chart-7: #4b6e8a;
  --chart-8: #8a97a5;

  --header-bg: #ffffff;
  --header-border: rgba(24,33,110,.14);
  --header-text: #18216e;
  --header-text-muted: rgba(24,33,110,.60);
  --header-btn: rgba(24,33,110,.06);
  --header-btn-hover: rgba(24,33,110,.11);
  --header-btn-bg: #ffffff;

  --success: #2f6b4f;
  --success-bg: #eef4e2;
  --success-border: rgba(47,107,79,.26);
  --danger: #bf3450;
  --danger-bg: #fef2f2;
  --danger-border: rgba(191,52,80,.20);
  --warning: #8a5a10;
  --warning-bg: #fff8cc;
  --warning-border: rgba(138,90,16,.22);
  --info: #18216e;
  --info-bg: #eef1ff;
  --info-border: rgba(24,33,110,.20);

  --bg-elevated: #ffffff;
  --card-bg: #ffffff;
  --surface-2: #fbfbfa;
  --surface-3: #f0f1f3;
  --text: #222221;
  --text-muted: #5f6670;
  --text-subtle: #75828b;
  --border: #e4e6ea;
  --border-strong: #c9d2dc;
  --input-bg: #ffffff;
  --input-border: #cbd4de;

  --font: "Montserrat","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display: "Montserrat","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono: "Fira Code","Cascadia Code",ui-monospace,Consolas,monospace;

  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 18px; --r-2xl: 22px; --r-full: 9999px;
  --sh-xs: 0 1px 2px rgba(16,24,40,.05);
  --sh-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --sh-md: 0 4px 12px -4px rgba(16,24,40,.08), 0 2px 6px -2px rgba(16,24,40,.06);
  --sh-lg: 0 12px 24px -8px rgba(16,24,40,.10), 0 4px 8px -4px rgba(16,24,40,.06);
  --sh-xl: 0 24px 48px -12px rgba(16,24,40,.14), 0 8px 16px -8px rgba(16,24,40,.08);
  --elev-drawer: -20px 0 50px rgba(24,33,110,.12);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --t-fast: 150ms; --t: 200ms; --t-slow: 300ms;
  --focus-ring: 0 0 0 3px rgba(24,33,110,.22);
  --focus-glow: 0 0 0 3px rgba(24,33,110,.16), 0 0 14px -4px rgba(24,33,110,.28);
  --brand-line: linear-gradient(90deg, #18216e 0%, #232c7a 50%, #FFD815 100%);

  --pontual-azul: #18216e;
  --pontual-azul-claro: #232c7a;
  --brand: #18216e;
  --brand-hover: #232c7a;
  --brand-accent: #18216e;
  --brand-yellow: #FFD815;
  --brand-yellow-ink: #4a3a00;
  --brand-green: #629725;
  --brand-green-hover: #4f7d1e;
}

/* ───────────────────────────────────────────────────────────────────────────
   1b. TOKENS — Escuro (toggle [data-theme="dark"])
   ─────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --n-0: #0d1219; --n-25: #10161d; --n-50: #131a22; --n-100: #17202a; --n-200: #1e2a37; --n-300: #2a3948; --n-400: #4a5a6c; --n-500: #6b7c90; --n-600: #97a6b5; --n-700: #c2cdd8; --n-800: #e2e7ed; --n-900: #f1f4f7; --n-950: #f8fafb;
  --navy: #eef1ff; --navy-2: #c6cdff; --blue-soft: #232c5c; --yellow: #FFD815; --green: #7fae9c; --green-soft: rgba(127,174,156,.12);
  --ink: #e2e7ed; --muted: #97a3b1; --subtle: #6b7a8c; --line: #26313e; --line-strong: #39485a; --bg: #0f151d; --paper: #151d27;
  --shadow: 0 8px 24px rgba(0,0,0,.35);

  --accent-50: #17204a; --accent-100: #1d2860; --accent-200: #243373; --accent-300: #3143a2; --accent-400: #3b78dd; --accent-500: #4d8bf0; --accent-600: #6b9ff3; --accent-700: #6b9ff3; --accent-800: #c1cbfa; --accent-900: #e2e7fd;
  --accent: #4d8bf0; --accent-hover: #6b9ff3; --accent-active: #3b78dd; --accent-soft: rgba(80,100,215,.20); --accent-contrast: #0d1219; --ring: 0 0 0 3px rgba(107,127,236,.25);
  --tech: #6b9ff3; --tech-text: #8fb3ff; --tech-strong: #6b9ff3; --tech-soft: rgba(47,69,97,.20); --tech-border: rgba(95,131,168,.42); --tech-contrast: #0f1620;
  --chart-1: #6b7fec; --chart-2: #4053bd; --chart-3: #7fae9c; --chart-4: #9b8fc0; --chart-5: #c9a465; --chart-6: #d0a084; --chart-7: #6e8fb0; --chart-8: #8a97a5;
  --header-bg: linear-gradient(105deg, #1a3a5c 0%, #234775 100%); --header-border: rgba(255,255,255,.14); --header-text: #ffffff; --header-text-muted: rgba(255,255,255,.62); --header-btn: rgba(255,255,255,.06); --header-btn-hover: rgba(255,255,255,.11); --header-btn-bg: #ffffff;
  --success: #7fae9c; --success-bg: rgba(127,174,156,.12); --success-border: rgba(127,174,156,.36); --danger: #cf9188; --danger-bg: rgba(207,145,136,.12); --danger-border: rgba(207,145,136,.36); --warning: #d1b07a; --warning-bg: rgba(209,176,122,.12); --warning-border: rgba(209,176,122,.36);
  --bg-elevated: #131a23; --card-bg: #151d27; --surface-2: #1a232e; --surface-3: #22303f; --text: #e2e7ed; --text-muted: #97a3b1; --text-subtle: #6b7a8c; --border: #26313e; --border-strong: #39485a; --input-bg: #121922; --input-border: #33414f;
  --sh-xs: 0 1px 2px rgba(0,0,0,.5); --sh-sm: 0 1px 3px rgba(0,0,0,.45); --sh-md: 0 6px 14px -4px rgba(0,0,0,.55); --sh-lg: 0 18px 36px -10px rgba(0,0,0,.65); --sh-xl: 0 30px 60px -16px rgba(0,0,0,.75);
  --elev-drawer: -22px 0 52px -22px rgba(0,0,0,.70), -1px 0 0 rgba(255,255,255,.06);
  --focus-ring: 0 0 0 3px rgba(107,159,243,.30); --focus-glow: 0 0 0 3px rgba(107,159,243,.20), 0 0 14px -4px rgba(107,159,243,.40);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. BASE — Montserrat, fundo papel, seleção, scrollbar
   ─────────────────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { max-width: 100vw; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 14px; line-height: 1.5;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
#root { max-width: 100vw; min-height: 100vh; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.2; font-weight: 700; color: var(--text); }
a { color: var(--accent); transition: color var(--t-fast) var(--ease); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: rgba(24,33,110,.16); color: var(--n-900); }
:root[data-theme="dark"] ::selection { background: rgba(107,159,243,.28); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
:root[data-theme="dark"] * { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n-300); background-clip: content-box; border: 2px solid transparent; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: content-box; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: content-box; }
@media (prefers-reduced-motion: reduce) { *,:before,:after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
input,select,textarea,button { font-family: inherit; }
@media (max-width: 640px) { input,select,textarea { font-size: 16px !important; } }

/* ───────────────────────────────────────────────────────────────────────────
   3. HEADER — branco sólido (claro) / navy sólido (escuro), filete 2px
       Sem backdrop-filter (rejeitado). Logo colorida/branca via pseudo.
   ─────────────────────────────────────────────────────────────────────────── */
.pg-header, .pg-header.dash-header, .mod-header, header[style*="--header-bg"] {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 12px 24px;
  border-bottom: 1px solid var(--header-border);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
/* Várias páginas (Contratos, ContratoDetalhe, etc.) colocam o .mod-header
   como primeiro filho de um wrapper com padding uniforme (ex: padding:20px
   pra centralizar o conteúdo com max-width). Isso empurra o header pra
   baixo mesmo com position:sticky — a área de "grude" do sticky é a caixa
   de padding do ancestral rolável, então o padding-top nunca é superado,
   nem rolando a página. Zera só o padding-top desse wrapper direto; os
   outros lados (usados pelo conteúdo abaixo do header) ficam intactos. */
div:has(> .mod-header) { padding-top: 0 !important; }
html:not([data-theme="dark"]) .pg-header,
html:not([data-theme="dark"]) .pg-header.dash-header,
html:not([data-theme="dark"]) .mod-header,
html:not([data-theme="dark"]) header[style*="--header-bg"] {
  background: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(24,33,110,.14) !important;
  box-shadow: 0 1px 0 rgba(24,33,110,.04), 0 8px 24px -16px rgba(24,33,110,.18) !important;
}
html[data-theme="dark"] .pg-header,
html[data-theme="dark"] .pg-header.dash-header,
html[data-theme="dark"] .mod-header,
html[data-theme="dark"] header[style*="--header-bg"] {
  background: linear-gradient(105deg, #1a3a5c 0%, #234775 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.55) !important;
}
/* filete de marca removido — solicitado: sem marcador sobre PONTUAL/nome/Dashboard */
/* Tipografia do header — força navy/branco conforme tema */
html:not([data-theme="dark"]) .pg-header *, html:not([data-theme="dark"]) .mod-header * { color: #18216e !important; }
html[data-theme="dark"] .pg-header *, html[data-theme="dark"] .mod-header * { color: #ffffff !important; }
/* Avatar do usuário — inicial com fundo azul deve ter letra clara (branca), não preta/navy */
html:not([data-theme="dark"]) .pg-header .nav-avatar,
html:not([data-theme="dark"]) .pg-header .nav-avatar *,
html:not([data-theme="dark"]) .pg-header .avatar,
html:not([data-theme="dark"]) .pg-header .avatar *,
html:not([data-theme="dark"]) .nav-drawer .nav-avatar,
html:not([data-theme="dark"]) .nav-drawer .nav-avatar *,
html:not([data-theme="dark"]) .nav-avatar,
html:not([data-theme="dark"]) .nav-avatar * { color: #ffffff !important; }
/* Logo — <img> sempre branca no JS; claro esconde e mostra colorida via ::before */
html:not([data-theme="dark"]) .pg-header .pg-logo,
html:not([data-theme="dark"]) .pg-header.dash-header .pg-logo,
html:not([data-theme="dark"]) .mod-header .pg-logo { position: relative; }
html:not([data-theme="dark"]) .pg-header .pg-logo img,
html:not([data-theme="dark"]) .pg-header.dash-header .pg-logo img,
html:not([data-theme="dark"]) .mod-header .pg-logo img { opacity: 0; }
html:not([data-theme="dark"]) .pg-header .pg-logo::before,
html:not([data-theme="dark"]) .pg-header.dash-header .pg-logo::before,
html:not([data-theme="dark"]) .mod-header .pg-logo::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 40px; width: 149px; background: url("/pontual-logo.png") left center / contain no-repeat;
}
/* .mod-header usa <ModuleHeader height={36}> (img real invisível, 36px) —
   o pseudo-elemento ::before (logo colorida visível) precisa bater com
   esse tamanho real, senão ele vaza por cima do título ao lado (o img
   invisível é quem define a largura reservada no flex, não o ::before,
   que é position:absolute). Por isso o tamanho aqui é diferente do
   .pg-header (que usa a logo em 40px). */
html:not([data-theme="dark"]) .mod-header .pg-logo::before { height: 36px; width: 134px; }
/* Inverso: Pneus usa logo colorida sem variant — no escuro mostrar branca */
.pg-logo-inverse { position: relative; display: inline-flex; }
html[data-theme="dark"] .pg-logo-inverse img { opacity: 0; }
html[data-theme="dark"] .pg-logo-inverse::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 34px; width: 126px; background: url("/pontual-logo-white.png") left center / contain no-repeat;
}
/* Bloco usuário — hierarquia */
html:not([data-theme="dark"]) .pg-header .pg-logo span:last-child,
html:not([data-theme="dark"]) .pg-header.dash-header .pg-logo span:last-child,
html:not([data-theme="dark"]) .mod-header .mod-sub { color: rgba(24,33,110,.62) !important; letter-spacing: .04em !important; }
html:not([data-theme="dark"]) .pg-header-actions span:not(.nav-item-label):not(.pgn-panel *):not(.pgh-panel *) { background: none !important; background-color: transparent !important; color: #18216e !important; }
/* Botões de header com fundo branco — texto navy mesmo no escuro */
.pg-header.dash-header button[style*="header-btn-bg"],
.pg-header.dash-header button[style*="header-btn-bg"] * { color: #18216e !important; }
html:not([data-theme="dark"]) .nav-item.is-active,
html:not([data-theme="dark"]) .nav-item.is-active * { color: #fff !important; }

/* ───────────────────────────────────────────────────────────────────────────
   4. NAV DRAWER — à direita, borda esquerda, sombra, hover wash + filete
   ─────────────────────────────────────────────────────────────────────────── */
.nav-trigger, .nav-trigger-claro {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: #fff; color: var(--navy); box-shadow: var(--sh-xs);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-trigger:hover, .nav-trigger-claro:hover { background: var(--surface-2); border-color: var(--accent-300); color: #18216e; }
.nav-overlay { background: rgba(23,32,45,.42); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; }
.nav-drawer {
  background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: var(--elev-drawer); width: min(360px, 88vw);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--t) var(--ease);
}
.nav-drawer::before { display: none; }
.nav-brand { font-family: var(--font-display); font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px;
  padding: 9px 11px; border-radius: var(--r-sm); color: var(--muted);
  font-size: 13px; font-weight: 500; text-align: left; background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.nav-item-ico { width: 18px; height: 18px; flex: 0 0 18px; color: #7390a1; }
.nav-item-chevron { width: 15px; height: 15px; flex: 0 0 15px; margin-left: auto; color: var(--subtle); }
.nav-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: rgba(24,33,110,.06); color: #18216e; }
.nav-item.is-active { background: #18216e !important; color: #fff !important; box-shadow: inset 3px 0 0 #FFD815 !important; font-weight: 700; }
.nav-item.is-active .nav-item-ico, .nav-item.is-active .nav-item-chevron { color: #fff !important; }
.nav-group-title { padding: 16px 11px 6px; color: #8b9ca7; text-transform: uppercase; font-size: 10.5px; letter-spacing: .9px; font-weight: 700; }
.nav-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; }
:root[data-theme="dark"] .nav-drawer { background: #151d27; border-left-color: var(--line); }
:root[data-theme="dark"] .nav-item { color: #97a3b1; }
:root[data-theme="dark"] .nav-item:hover { background: rgba(107,159,243,.12); color: #fff; }

/* ───────────────────────────────────────────────────────────────────────────
   5. BOTÕES — navy gradiente, secondary, amarelo, verde — Montserrat
   ─────────────────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font); border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
  user-select: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; font-size: .875rem; font-weight: 700; line-height: 1; border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .52; cursor: not-allowed; transform: none; }
.btn svg { flex-shrink: 0; }
.btn-primary {
  background: linear-gradient(180deg, #232c7a 0%, #18216e 100%); color: #fff;
  border-color: rgba(255,255,255,.08); box-shadow: 0 6px 16px -8px rgba(24,33,110,.55);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 8px 20px -8px rgba(24,33,110,.65); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-xs); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent-300); color: #18216e; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--blue-soft); color: var(--navy); }
.btn-danger { background: #bf3450; color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(191,52,80,.45); }
.btn-danger:hover:not(:disabled) { background: #a02a42; }
.btn-sm { padding: 6px 11px; font-size: .8rem; border-radius: var(--r-xs); }
.btn-lg { padding: 12px 22px; font-size: .95rem; border-radius: var(--r-md); }
.btn-block { width: 100%; }
.btn-yellow { background: var(--yellow) !important; color: #18216e !important; border-color: #e6c51a !important; font-weight: 800; }
.btn-yellow:hover:not(:disabled) { background: #ffe14d !important; }
.btn-green { background: var(--green) !important; color: #fff !important; border-color: #4f7d1e !important; }
.btn-green:hover:not(:disabled) { background: #6fa72b !important; }
.mod-hbtn, .mod-hbtn-alt, .exportbar-btn, .frota-header-btn, .manut-header-btn, .pneus-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; border-radius: var(--r-sm); font-weight: 700; font-size: .82rem;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* Esses botões nasceram pra header escuro/gradiente — vidro translúcido
   (background: rgba(255,255,255,.14) + backdrop-filter: blur) com texto
   branco. Em headers claros (maioria das páginas) o componente já recebe
   fundo branco via var(--header-btn-bg) acima, mas o backdrop-filter
   inline sobrevive e, combinado com esse fundo opaco, some com a
   box-shadow (bug de composição do Chromium) — o botão fica sem nenhum
   contorno visível, parecendo texto solto em vez de botão. */
.mod-hbtn, .mod-hbtn-alt, .exportbar-btn, .frota-header-btn, .manut-header-btn, .pneus-btn,
[class*="header-btn"] {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* .mod-hbtn-alt é a variante "vidro" (background: rgba(255,255,255,.14) +
   texto branco) de um componente de header compartilhado — assume fundo
   escuro/gradiente. Como os headers do sistema hoje são claros (ver
   normalização desta sessão), ela fica branco-sobre-branco, ilegível. Já
   havia um patch pontual só pra Permissões; generaliza pra qualquer
   header do sistema. */
.pg-header .mod-hbtn-alt, .pg-header-actions .mod-hbtn-alt,
.mod-header .mod-hbtn-alt, .dash-header .mod-hbtn-alt {
  background: var(--header-btn-bg) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
}
.pg-header .mod-hbtn-alt:hover, .pg-header-actions .mod-hbtn-alt:hover,
.mod-header .mod-hbtn-alt:hover, .dash-header .mod-hbtn-alt:hover {
  background: var(--surface-2) !important;
}
.mod-hbtn:active:not(:disabled), .mod-hbtn-alt:active:not(:disabled), .exportbar-btn:active:not(:disabled) { transform: scale(.98); }

/* ───────────────────────────────────────────────────────────────────────────
   6. FORMULÁRIOS — 40px, focus ring navy, label 12px
   ─────────────────────────────────────────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%; font-family: var(--font); color: var(--text);
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--r-sm); padding: 9px 12px; font-size: .9rem; line-height: 1.4; min-height: 40px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--navy) !important; box-shadow: var(--focus-ring) !important; outline: none; }
:root[data-theme="dark"] .input:focus, :root[data-theme="dark"] .select:focus, :root[data-theme="dark"] .textarea:focus { border-color: #6b9ff3 !important; }
.field-label, form label, .grid-form-2 label, .grid-form-3 label, .grid-form-4 label { display: block; margin-bottom: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); width: 16px; height: 16px; cursor: pointer; }

/* ───────────────────────────────────────────────────────────────────────────
   7. CARDS — estrutura unificada (todas páginas)
       .card, .kpi-card, .quick-card, .table-wrap, .modal-card, .pg-modal
       Borda 1px hairline, radius 12px, elevação, hover lift -2px
   ─────────────────────────────────────────────────────────────────────────── */
.card, .kpi-card, .table-wrap, .modal-card, .pg-modal, .quick-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-sm);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.card-pad { padding: 20px; }
.card-hover:hover, .card:hover.card-hover, .quick-card:hover {
  transform: translateY(-2px); border-color: rgba(24,33,110,.22); box-shadow: var(--sh-md);
}
.kpi-card { position: relative; overflow: hidden; }
.kpi-card .kpi-value, .kpi-value, .numero-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 800; letter-spacing: -.01em; }
.kpi-card .kpi-label { color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-size: .74rem; font-weight: 600; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
/* Quick cards — inspiração pontual servicos (.scard) */
.quick-card { padding: 16px; min-height: 126px; text-align: left; }
.quick-card strong { font-size: 12.5px; color: #1f3040; font-weight: 700; display: block; }
.quick-card span { min-height: 32px; margin-top: 4px; color: #6f8290; font-size: 11px; line-height: 1.45; display: block; }
.quick-icon { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 9px; background: var(--blue-soft); color: var(--navy); }
:root[data-theme="dark"] .quick-card strong { color: #e2e7ed; }
:root[data-theme="dark"] .quick-card span { color: #97a3b1; }

/* ───────────────────────────────────────────────────────────────────────────
   8. BADGES, ALERTAS, PAGINAÇÃO
   ─────────────────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-full); background: var(--surface-3); color: var(--muted); border: 1px solid var(--line); font-size: .70rem; font-weight: 700; letter-spacing: .01em; }
.badge-accent { background: var(--blue-soft); color: var(--navy); border-color: #bcc7ed; }
.badge-tech { background: var(--tech-soft); color: var(--tech-text); border-color: var(--tech-border); }
.badge-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: .85rem; font-weight: 500; }
.alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--navy); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.pagination { display: inline-flex; align-items: center; gap: 4px; }
.pagination button { min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.pagination button:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.pagination button[aria-current="page"], .pagination button.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ───────────────────────────────────────────────────────────────────────────
   9. TABELAS — thead navy uppercase, hover wash
   ─────────────────────────────────────────────────────────────────────────── */
.modern-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.modern-table thead th {
  background: var(--surface-2); color: var(--navy); text-transform: uppercase;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: left;
  padding: 11px 14px; border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; z-index: 1;
}
:root[data-theme="dark"] .modern-table thead th { color: #e2e7ed; }
.modern-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); height: 40px; }
.modern-table tbody tr { transition: background var(--t-fast) var(--ease); }
.modern-table tbody tr:hover { background: rgba(24,33,110,.05); }
:root[data-theme="dark"] .modern-table tbody tr:hover { background: rgba(107,159,243,.10); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: #c3cdd8; border-radius: 999px; }

/* ───────────────────────────────────────────────────────────────────────────
   10. LAYOUT — grids, page-body, pg-body, quick-grid, dash, etc
   ─────────────────────────────────────────────────────────────────────────── */
.page-body { max-width: 1300px; margin: 0 auto; padding: 24px; }
.pg-body { max-width: 1400px; margin: 0 auto; padding: 28px 24px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pg-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.dash-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.dash-grid-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: stretch; }
.dash-grid-2 > *, .pneus-gridveic > * { min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { color: var(--navy); font-size: 26px; line-height: 1.2; letter-spacing: -.3px; }
:root[data-theme="dark"] .page-head h1 { color: #eef1ff; }
.page-head p { color: var(--muted); font-size: 13px; max-width: 56ch; margin-top: 6px; }
.breadcrumb { font-size: 11px; color: #8b9da6; margin-bottom: 6px; }
.breadcrumb span { padding: 0 5px; color: #b0bdc4; }
.grid-form-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-form-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-form-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.grid-auto-240 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.grid-item-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 12px; align-items: start; }
.pg-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.tabs-scroll { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tabs-scroll > * { flex-shrink: 0; }

/* Hero inspiracão pontual — para painéis de destaque (opcional) */
.hero-pontual {
  position: relative; min-height: 260px; overflow: hidden; display: flex; align-items: center;
  border-radius: var(--radius); box-shadow: var(--shadow);
  background-image: linear-gradient(100deg, rgba(24,33,110,.97) 0%, rgba(24,33,110,.85) 42%, rgba(24,33,110,.35) 100%), url("/melhor-foto-pontual.jpg");
  background-size: cover; background-position: center 52%;
}
.hero-pontual-content { position: relative; z-index: 1; max-width: 620px; padding: 36px; color: #fff; }
.hero-pontual h1 { color: #fff; font-size: clamp(22px, 3.6vw, 32px); line-height: 1.15; letter-spacing: -.4px; margin: 12px 0 10px; }
.hero-pontual p { color: #dfe3ff; font-size: 13px; line-height: 1.6; max-width: 525px; }
.hero-pontual .btn-primary { background: var(--yellow); color: #3a2c00; border-color: var(--yellow); }

/* ───────────────────────────────────────────────────────────────────────────
   11. MODAIS / OVERLAY
   ─────────────────────────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(9,12,20,.55); backdrop-filter: blur(3px); }
.modal-card, .pg-modal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-xl); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.pg-modal-overlay { display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-mobile-sheet { border-radius: 16px 16px 0 0; max-height: 92vh; margin-top: auto; }

/* ───────────────────────────────────────────────────────────────────────────
   12. CORES INLINE → REMAPEAMENTO UNIFORME (hardcoded nos bundles)
       Garante que nenhum azul/ciano/roxo/laranja destoante escape.
   ─────────────────────────────────────────────────────────────────────────── */
[style*="color:#1a3a5c"], [style*="color:#1A3A5C"] { color: #18216e !important; }
[style*="color:#0EA5E9"], [style*="color:#0ea5e9"],
[style*="color:#0891B2"], [style*="color:#0891b2"],
[style*="color:#06B6D4"], [style*="color:#06b6d4"],
[style*="color:#0284C7"], [style*="color:#0284c7"] { color: #18216e !important; }
[style*="background:#0EA5E9"], [style*="background:#0ea5e9"],
[style*="background-color:#0EA5E9"], [style*="background-color:#0ea5e9"],
[style*="background:#0891B2"], [style*="background:#0891b2"] { background: #18216e !important; color: #fff !important; }
[style*="color:#2563eb"], [style*="color:#2563EB"],
[style*="color:#3b82f6"], [style*="color:#3B82F6"],
[style*="color:#1d4ed8"], [style*="color:#1D4ED8"],
[style*="color:#1e40af"], [style*="color:#1E40AF"] { color: #18216e !important; }
[style*="background:#2563eb"], [style*="background:#2563EB"],
[style*="background:#3b82f6"], [style*="background:#3B82F6"],
[style*="background:#1d4ed8"], [style*="background:#1D4ED8"],
[style*="background-color:#2563eb"], [style*="background-color:#3b82f6"],
[style*="background-color:#1d4ed8"] { background: #18216e !important; color: #fff !important; }
[style*="color:#7c3aed"], [style*="color:#7C3AED"],
[style*="color:#9333ea"], [style*="color:#9333EA"],
[style*="color:#db2777"], [style*="color:#DB2777"] { color: #18216e !important; }
[style*="background:#7c3aed"], [style*="background:#7C3AED"],
[style*="background:#9333ea"], [style*="background:#db2777"],
[style*="background-color:#7c3aed"], [style*="background-color:#9333ea"] { background: #18216e !important; color: #fff !important; }
[style*="color:#ea580c"], [style*="color:#EA580C"],
[style*="color:#f97316"], [style*="color:#F97316"] { color: #18216e !important; }
[style*="background:#ea580c"], [style*="background:#EA580C"],
[style*="background-color:#ea580c"], [style*="background-color:#EA580C"],
[style*="background:#f97316"], [style*="background-color:#f97316"] { background: #FFD815 !important; color: #18216e !important; }
[style*="color:#f59e0b"], [style*="color:#F59E0B"],
[style*="color:#fbbf24"], [style*="color:#FBBF24"],
[style*="color:#d97706"], [style*="color:#D97706"] { color: #8a5a10 !important; }
[style*="background:#f59e0b"], [style*="background:#F59E0B"],
[style*="background:#fbbf24"], [style*="background:#FBBF24"],
[style*="background-color:#f59e0b"], [style*="background-color:#fbbf24"] { background: #FFD815 !important; color: #18216e !important; }
[style*="color:#16A34A"], [style*="color:#16a34a"],
[style*="color:#22c55e"], [style*="color:#22C55E"],
[style*="color:#059669"], [style*="color:#059669"],
[style*="color:#0f766e"], [style*="color:#0F766E"] { color: #629725 !important; }
[style*="background:#16A34A"], [style*="background:#16a34a"],
[style*="background:#22c55e"], [style*="background:#059669"],
[style*="background:#0f766e"], [style*="background-color:#16A34A"],
[style*="background-color:#16a34a"], [style*="background-color:#22c55e"] { background: #629725 !important; color: #fff !important; }
[style*="color:#0369a1"], [style*="color:#0369A1"],
[style*="color:#075985"], [style*="color:#075985"] { color: #18216e !important; }
[style*="box-shadow: 0 0 0 1px #f59e0b"], [style*="box-shadow:0 0 0 1px #f59e0b"],
[style*="0 0 0 1px #f59e0b"] { box-shadow: 0 0 0 1px #18216e !important; }
.pg-header[style*="borderImage"], [style*="3d6b47"] { border-image: none !important; border-bottom: 3px solid #18216e !important; }

/* Tailwind genéricos → corporate */
.bg-blue-50,.bg-blue-100,.bg-blue-200,.bg-blue-300,.bg-blue-500,.bg-blue-600,.bg-blue-700,.bg-blue-800,.bg-blue-900 { background-color: var(--blue-soft) !important; }
.bg-green-50,.bg-green-100 { background-color: var(--success-bg) !important; }
.bg-yellow-50,.bg-yellow-100,.bg-yellow-200,.bg-yellow-600 { background-color: var(--yellow-soft) !important; }
.bg-red-50,.bg-red-100 { background-color: var(--danger-bg) !important; }
.text-blue-500,.text-blue-600,.text-blue-700,.text-blue-800 { color: var(--navy) !important; }
.text-green-500,.text-green-600,.text-green-700 { color: var(--green) !important; }
.text-yellow-500,.text-yellow-600,.text-yellow-700 { color: var(--navy) !important; }
.text-red-500,.text-red-600,.text-red-700 { color: var(--danger) !important; }
.text-gray-500,.text-gray-600,.text-gray-700,.text-gray-800,.text-gray-900 { color: var(--muted) !important; }
.border-gray-200,.border-gray-300,.border-gray-400 { border-color: var(--line) !important; }
.border-blue-200,.border-blue-400,.border-blue-500,.border-blue-600 { border-color: #bcc7ed !important; }
.border-green-200,.border-green-500 { border-color: var(--success-border) !important; }
.border-yellow-200,.border-yellow-500 { border-color: var(--yellow) !important; }
.border-red-200,.border-red-500 { border-color: var(--danger-border) !important; }
.shadow-lg,.shadow-xl { box-shadow: var(--sh-lg) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   13. LOGIN — isola launcher, glass preservado, foto aérea
   ─────────────────────────────────────────────────────────────────────────── */
.login-splash, .login-intro, .login-select, .login-gate { display: none !important; }
.login-card { display: block !important; }
.login-back { display: none !important; }
.login-splash, .login-intro, .login-select, .login-gate, .login-back { pointer-events: none; }
.login-card .login-input {
  background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.45) !important;
  color: #fff !important; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.login-card .login-input:hover { background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.60) !important; }
.login-card .login-input:focus { background: rgba(255,255,255,.24) !important; border-color: rgba(255,255,255,.85) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.28), 0 0 18px -6px rgba(24,33,110,.75) !important; outline: none !important; }
.login-card .login-btn { background: linear-gradient(180deg, #232c7a 0%, #18216e 100%) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 12px 28px -14px rgba(24,33,110,.85) !important; }
.login-card .login-btn:hover:not(:disabled) { filter: brightness(1.07); }

/* PWA banner — azul institucional */
div[style*="#1a3a5c"] { background: #18216e !important; }
button[style*="#EA580C"] { background: #232c7a !important; color: #fff !important; }

/* ───────────────────────────────────────────────────────────────────────────
   14. RECHARTS — paleta corporativa nos gráficos
   ─────────────────────────────────────────────────────────────────────────── */
.recharts-text { fill: var(--muted) !important; }
.recharts-cartesian-axis-line, .recharts-cartesian-axis-tick-line { stroke: var(--line) !important; }
.recharts-cartesian-grid line { stroke: var(--line) !important; }
.recharts-legend-item-text { color: var(--ink) !important; }
.recharts-label { fill: var(--ink) !important; }
:root[data-theme="dark"] .recharts-text { fill: #97a3b1 !important; }
:root[data-theme="dark"] .recharts-cartesian-axis-line, :root[data-theme="dark"] .recharts-cartesian-axis-tick-line, :root[data-theme="dark"] .recharts-cartesian-grid line { stroke: var(--line) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   15. FOCUS / ACESSIBILIDADE
   ─────────────────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid rgba(24,33,110,.45); outline-offset: 2px; box-shadow: var(--focus-glow); }
:root[data-theme="dark"] :focus-visible { outline-color: rgba(107,159,243,.65); }

/* ───────────────────────────────────────────────────────────────────────────
   16. RESPONSIVIDADE — breakpoints inspirados em pontualpetroleo.com.br
       1024 / 900 / 840 / 768 / 640 / 480 / 400
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .home-grid, .profile-grid { grid-template-columns: 1fr; }
  .news-list { grid-template-columns: 1fr; }
  .featured-news { grid-template-columns: 1fr; }
  .pg-stats, .pg-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
  .pneus-ficha { overflow-x: auto; }
}

@media (max-width: 900px) {
  .page-body { padding: 18px 14px !important; }
  .pg-body { padding: 18px 16px !important; }
  .pg-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
  .pg-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .layout-sidebar { grid-template-columns: 1fr !important; gap: 14px !important; }
  .grid-form-2, .grid-form-3, .grid-form-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
  .grid-item-linha { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .dash-grid-2 { grid-template-columns: 1fr !important; }
  .pneus-nav { overflow-x: auto; flex-wrap: nowrap !important; padding: 8px 12px !important; scrollbar-width: thin; }
  .pneus-nav > button { flex-shrink: 0; }
  .conjunto-wrap table { min-width: 480px; }
  .conjunto-wrap > div > div:has(table) { overflow-x: auto; }
  /* Cobertura ampla: qualquer <table> da aplicação ganha rolagem horizontal
     em mobile, mesmo fora de .table-wrap/main/.pg-body (muitas páginas ainda
     usam <table> cru dentro de divs comuns). Antes só as 3 classes acima
     tinham a correção, deixando a maioria das páginas sem ela — tabela
     cortava/espremia em telas pequenas em vez de rolar. (frontend only) */
  table:not(.no-scroll-fix) { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table.no-wrap-collapse { white-space: normal; }
  .modal-mobile-sheet-overlay { align-items: flex-end !important; padding: 0 !important; }
}

@media (max-width: 840px) {
  .topbar { padding: 0 14px; }
  .search { width: auto; flex: 1; }
}

@media (max-width: 768px) {
  .dash-grid-2 { grid-template-columns: 1fr !important; gap: 10px; }
  .grid-item-linha { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .grid-form-3, .grid-form-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .oc-corpo { flex-direction: column !important; }
  .oc-corpo > * { width: 100% !important; min-width: 0 !important; min-height: auto !important; }
  .conjunto-toolbar { flex-direction: column !important; align-items: stretch !important; }
  .conjunto-toolbar select { width: 100% !important; min-width: 0 !important; }
  .conjunto-toolbar button { margin-left: 0 !important; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1; }
  .nav-item { min-height: 44px; }
  .pneus-inspecao-actions { flex-wrap: wrap !important; gap: 8px !important; }
  .pneus-inspecao-actions .pneus-btn { flex: calc(50% - 4px) !important; justify-content: center !important; padding: 12px 14px !important; font-size: .88rem !important; }
  .pneus-inspecao-actions .pneus-btn-primary { flex: 100% !important; order: -1 !important; padding: 14px 16px !important; font-size: .95rem !important; }
}

@media (max-width: 640px) {
  .page { padding: 20px 16px 44px; }
  .page-body { padding: 12px 10px !important; }
  .pg-body { padding: 12px 10px !important; }
  .pg-header, .pg-header.dash-header, .mod-header { flex-wrap: wrap !important; gap: 8px !important; height: auto !important; padding: 10px 14px !important; }
  .pg-header-actions { width: auto !important; margin-left: auto !important; justify-content: flex-end !important; }
  .pg-header-center { flex: 100% !important; justify-content: flex-start !important; }
  .pg-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 10px 14px !important; }
  .pg-toolbar input { width: 100% !important; min-width: 0 !important; }
  .pg-toolbar .pg-tabs { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 2px; justify-content: flex-start !important; }
  .pg-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 12px !important; }
  .pg-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .dash-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .dash-grid-2 > * { min-width: 0; }
  .grid-form-2, .grid-form-3, .grid-form-4, .grid-item-linha { grid-template-columns: 1fr !important; }
  .grid-auto-280, .grid-auto-240, .grid-auto-200 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .tabs-scroll { padding-bottom: 2px; }
  .modal-mobile-full { width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; margin: 0 !important; border-radius: 0 !important; }
  .modal-mobile-sheet { border-radius: 16px 16px 0 0 !important; width: 100% !important; max-width: 100% !important; max-height: 92vh !important; margin-top: auto !important; }
  .modal-mobile-sheet-overlay { align-items: flex-end !important; padding: 0 !important; }
  .pg-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .pg-modal { border-radius: 16px 16px 0 0 !important; width: 100% !important; max-height: 92vh !important; }
  .hide-mobile { display: none !important; }
  .pg-logo svg { height: 28px !important; }
  .hero-pontual-content { padding: 24px; }
  .hero-pontual-status { display: none; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid, .upcoming-grid { grid-template-columns: 1fr; }
  .histo-header { display: none !important; }
  .histo-item { grid-template-columns: 1fr 1fr !important; gap: 6px 12px !important; padding: 12px 14px !important; }
  .histo-item > :nth-child(4) { grid-column: 1 / -1 !important; font-weight: 600; }
  .histo-item > :nth-child(5) { grid-column: 1 / -1 !important; color: var(--muted); font-size: .85rem; }
  .leaflet-container { min-height: 50vh; }
  .leaflet-popup-content .popup-row-extra { display: none !important; }
  .leaflet-popup-content > div { max-width: 78vw; min-width: 0 !important; }
  .pneus-ficha [style*="180px 1fr"], .pneus-ficha [style*="180px 1fr 110px 130px"] { grid-template-columns: 1fr !important; gap: 8px !important; }
  .pneus-rowmid, .pneus-gridveic { grid-template-columns: 1fr !important; }
  .pneus-footer { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pneus-inspecao-grid { grid-template-columns: 1fr !important; }
  .mod-hbtn, .mod-hbtn-alt, .exportbar-btn, .frota-header-btn, .manut-header-btn, .pneus-btn { min-height: 40px; }
  .manut-navgroups { padding-top: 8px !important; padding-bottom: 8px !important; }
  .force-stack [style*="grid-template-columns"], .force-stack [style*="gridTemplateColumns"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .page { padding: 16px 12px 32px; }
  .page-body, .pg-body { padding: 10px !important; }
  .pg-grid { grid-template-columns: 1fr !important; }
  .quick-grid { grid-template-columns: 1fr !important; }
  .dash-kpi { grid-template-columns: 1fr !important; }
  .dash-modules { grid-template-columns: 1fr !important; }
  .grid-form-2, .grid-form-3, .grid-form-4 { grid-template-columns: 1fr !important; }
  .pg-header { padding: 8px 10px !important; }
  .hero-pontual h1 { font-size: 20px; }
  .cadastro-item { align-items: flex-start !important; padding: 10px 12px !important; }
  .cadastro-item > button { flex: 1; padding: 6px 10px !important; font-size: .78rem !important; }
  .pneus-inspecao-actions .pneus-btn { flex: 100% !important; }
  .estepe-box { flex-direction: row !important; align-self: stretch !important; max-width: 100% !important; justify-content: space-between !important; }
  .brand-logo { width: 100px; }
}

@media (max-width: 400px) {
  .quick-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 20px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   17. ANIMAÇÕES GLOBAIS
   ─────────────────────────────────────────────────────────────────────────── */
.fade-in { animation: fade-in var(--t-slow) var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dashTipIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.dash-mapa-wrap { position: relative; }
.dash-mapa-wrap.dash-mapa-fullscreen { position: fixed; inset: 0; height: 100dvh; width: 100vw; z-index: 100000; background: var(--bg); border-radius: 0; }
.dash-mapa-fs-btn { position: absolute; top: 12px; right: 12px; z-index: 1000; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--paper); color: var(--navy); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; box-shadow: var(--sh-sm); }
.dash-mapa-fs-btn:hover { background: var(--surface-2); }

/* ───────────────────────────────────────────────────────────────────────────
   18. AJUSTES PONTUAIS — garante que nenhum card herde fundo divergente
   ─────────────────────────────────────────────────────────────────────────── */
.card *, .kpi-card *, .quick-card *, .table-wrap * { box-sizing: border-box; }
.pg-header .pg-logo span:last-child { font-size: .72rem; font-weight: 500; }
.pg-header-actions > div:first-child > div:first-child { font-weight: 600; font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   MANUTENÇÃO — CORREÇÃO FRONTEND ONLY (2026-09-23)
   Barra superior e interface estavam divergentes (Manrope/Space Grotesk,
   #1a3a5c, #f5c318, rainbow borderImage, fundo #f5f7fb). Uniformiza para
   Montserrat + tokens corporativos (#18216E, #FFD815, var(--bg)).
   Apenas CSS — não altera backend. Complementa o patch JS do header.
   ═══════════════════════════════════════════════════════════════════════════ */
.manut-page-root { font-family: var(--font) !important; background: var(--bg) !important; }
.manut-page-root .manut-display { font-family: var(--font-display) !important; letter-spacing: 0.012em !important; font-weight: 800 !important; }
/* Header já corrigido no JS para var(--header-bg) — reforço CSS para fallback e para cópias antigas em cache */
html:not([data-theme="dark"]) .manut-page-root .pg-header,
html:not([data-theme="dark"]) .manut-page-root .pg-header.dash-header { background: #ffffff !important; background-image: none !important; border-bottom: 1px solid rgba(24,33,110,.14) !important; box-shadow: 0 1px 0 rgba(24,33,110,.04), 0 8px 24px -16px rgba(24,33,110,.18) !important; }
html[data-theme="dark"] .manut-page-root .pg-header,
html[data-theme="dark"] .manut-page-root .pg-header.dash-header { background: linear-gradient(105deg, #1a3a5c 0%, #234775 100%) !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; }
.manut-page-root .pg-header *,
.manut-page-root .pg-header.dash-header * { font-family: var(--font) !important; }
/* Remapeia cores hardcoded da manutenção para paleta corporativa — pega qualquer inline style */
[style*="#1a3a5c" i], [style*="#1A3A5C" i] { color: #18216e !important; }
[style*="background:#1a3a5c" i], [style*="background-color:#1a3a5c" i],
[style*="background: #1a3a5c" i], [style*="background-color: #1a3a5c" i] { background: #18216e !important; background-color: #18216e !important; color: #fff !important; }
[style*="border:#1a3a5c" i], [style*="border-color:#1a3a5c" i],
[style*="border: #1a3a5c" i], [style*="border-color: #1a3a5c" i] { border-color: #18216e !important; }
[style*="1a3a5c"] { border-color: #18216e !important; }
/* Amarelo antigo #f5c318 → corporate #FFD815 */
[style*="#f5c318" i], [style*="#F5C318" i] { background: #FFD815 !important; background-color: #FFD815 !important; color: #18216e !important; border-color: #FFD815 !important; }
[style*="f5c318" i] { background: #FFD815 !important; color: #18216e !important; }
/* Rainbow antigo — já removido no JS, mas garante que cópias antigas percam */
[style*="3d6b47" i], [style*="b5d947" i], [style*="f5c318" i][style*="borderImage" i] { border-image: none !important; border-bottom: 1px solid var(--header-border) !important; }
/* Tabelas/cards da manutenção — fundo branco corporativo e tipografia */
.manut-page-root .tableWrap, .manut-page-root [style*="background:#fff" i] { background: var(--paper) !important; }
.manut-page-root th, .manut-page-root [style*="background:#1a3a5c"] { background: #18216e !important; color: #fff !important; }
.manut-page-root .tipoCard, .manut-page-root [class*="tipoCard"] { border-color: var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--sh-sm) !important; font-family: var(--font) !important; }
.manut-page-root .navTabActive, .manut-page-root [style*="navTabActive"] { background: #18216e !important; color: #fff !important; border-color: #18216e !important; }
/* Fundo de página — se JS antigo ainda usa #f5f7fb */
[style*="#f5f7fb" i] { background: var(--bg) !important; }
/* Garante que inputs usem var(--font) e não herdem Manrope */
.manut-page-root input, .manut-page-root select, .manut-page-root textarea, .manut-page-root button { font-family: var(--font) !important; }

/* Manutenção — botão Dashboard idêntico a Frota/Pneus (frontend only) */
.manut-page-root .pg-header .frota-header-btn,
.manut-page-root .pg-header .manut-header-btn,
.manut-page-root .pg-header dash-header .frota-header-btn {
  background: var(--header-btn-bg) !important;
  border: none !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
}
.manut-page-root .pg-header .frota-header-btn:hover,
.manut-page-root .pg-header .manut-header-btn:hover { transform: translateY(-1px) !important; }
/* Garante hamburguer visível — nav-trigger em header claro */
.manut-page-root .pg-header .nav-trigger,
.manut-page-root .pg-header .nav-trigger-claro {
  display: inline-grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Manutenção — garante Dashboard e hamburger idênticos a Frota (v9 patch2) */
.manut-page-root .pg-header .manut-header-btn { background: var(--header-btn-bg) !important; border: none !important; color: var(--text) !important; }
.manut-page-root .pg-header-actions { gap: 8px !important; }

/* Pneus — cards e cores idênticas ao sistema (frontend only) */
.pneus-nav, .pneus-nav.tabs-scroll { background: var(--paper) !important; border-bottom: 1px solid var(--line) !important; }
.pneus-nav button { font-family: var(--font) !important; }
.pneus-page-root, .pneus-page { font-family: var(--font) !important; background: var(--bg) !important; }
.pneus-page-root .card, .pneus-page-root .kpi-card { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--sh-sm) !important; }

/* Dashboard botão uniforme + responsivo (frontend only) */
.pg-header .frota-header-btn,
.pg-header .manut-header-btn,
.pg-header [class*="header-btn"] {
  background: var(--header-btn-bg) !important;
  border: none !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
}
.pg-header .frota-header-btn svg,
.pg-header .manut-header-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
@media (max-width: 640px) {
  .pg-header { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 14px !important; }
  .pg-header-actions { width: auto !important; margin-left: auto !important; justify-content: flex-end !important; gap: 8px !important; }
  .pg-header .frota-header-btn span.hide-mobile,
  .pg-header .manut-header-btn span.hide-mobile { display: none !important; }
  .pg-header .frota-header-btn,
  .pg-header .manut-header-btn { padding: 8px 10px !important; min-width: 38px; justify-content: center; }
}

/* Pneus — cards uniformes com sistema (fallback) */
.pg-stats > div { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--sh-sm) !important; }

/* Rastreamento — Mapa/Tabela: texto claro quando ativo (fundo navy) */
div[style*="var(--border-strong)"] > button[style*="var(--accent)"],
button[style*="background: var(--accent)"],
button[style*="background:var(--accent)"] {
  color: #fff !important;
}
div[style*="var(--border-strong)"] > button[style*="var(--accent)"] *,
button[style*="background: var(--accent)"] *,
button[style*="background:var(--accent)"] * {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
}
button[style*="background: var(--accent)"] svg,
button[style*="background:var(--accent)"] svg {
  stroke: #fff !important;
  color: #fff !important;
}
/* Inativo mantém escuro */
div[style*="var(--border-strong)"] > button[style*="var(--card-bg)"],
button[style*="var(--card-bg)"] { color: var(--text-muted) !important; }

/* Pneus — total de pneus letra escura sobre card claro (fix) */
.pg-stats > div { color: var(--text) !important; }
.pg-stats > div [style*="var(--text)"] { color: var(--text) !important; }
.pg-stats > div [style*="var(--text-muted)"] { color: var(--text-muted) !important; }

/* Permissões — design moderno e elaborado (frontend only, sem quebrar JS)
   Escopado em .page-permissoes: .mod-header é a classe do ModuleHeader
   compartilhado por TODAS as páginas de módulo (Contratos, etc.) — sem o
   escopo, este cartão flutuante vazava pra todo mundo e quebrava o
   header colado no topo (a margem conflita com position:sticky). */
.page-permissoes .mod-header { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--sh-sm) !important; margin: 16px 16px 0 !important; padding: 16px 20px !important; }
.page-permissoes .mod-header .mod-title { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--navy) !important; letter-spacing: 0.012em !important; }
.page-permissoes .mod-header .mod-hbtn-alt { background: var(--paper) !important; border: 1px solid var(--line) !important; color: var(--text) !important; border-radius: 8px !important; padding: 8px 16px !important; font-weight: 700 !important; box-shadow: var(--sh-xs) !important; }
.page-permissoes .mod-header .mod-hbtn-alt:hover { background: var(--surface-2) !important; border-color: var(--accent-100) !important; color: var(--navy) !important; }
div[style*="Permissões por Cargo"] { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 16px 20px !important; box-shadow: var(--sh-sm) !important; margin-bottom: 16px !important; }
table[style*="borderCollapse: collapse"] { border-radius: var(--radius) !important; overflow: hidden !important; }
th[style*="var(--accent)"] { background: var(--accent) !important; color: #fff !important; font-weight: 800 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }

/* ═══════════════════════════════════════════════════════════════════════════

/* Pneus — total de pneus letra escura sobre card claro (fix) */
.pg-stats > div { color: var(--text) !important; }
.pg-stats > div > div { color: var(--text) !important; }

/* Todo e qualquer caractere em Montserrat — sem excecao pra mono/tabular
   (pedido explicito). Antes elementos numericos/codigo (placa, valor, cpk
   etc.) usavam --font-mono (Fira Code) pra alinhamento tabular; agora usam
   Montserrat tambem, igual a tudo mais. (frontend only) */
* { font-family: var(--font) !important; }
.font-mono, code, kbd, samp, pre, [data-mono], .placa, .cpk, .valor, .odometro, .id-sascar, th.numero, td.numero, .kpi-value, .numero-tabular { font-family: var(--font) !important; }
[style*="Manrope"], [style*="Space Grotesk"], [style*="Inter"], [style*="system-ui"], [style*="Fira Sans"], [style*="Fira Code"], [style*="Helvetica"], [style*="Montserrat"] { font-family: var(--font) !important; }

/* Ordens de Carregamento e Motoristas — UI/UX moderno e elaborado (frontend only) */
.oc-corpo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; max-width: 1300px; margin: 0 auto; padding: 24px; }
@media (max-width: 1024px) { .oc-corpo { grid-template-columns: 1fr; gap: 16px; padding: 16px; } }
@media (max-width: 640px) { .oc-corpo { padding: 12px; gap: 12px; } }
.oc-corpo .colLista, .oc-corpo .colForm { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-sm); overflow: hidden; }
.oc-corpo .painelHeader { background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; }
.oc-corpo .painelTitulo { font-weight: 800; color: var(--navy); font-size: 1rem; letter-spacing: 0.012em; }
.oc-corpo .painelSub { font-size: .78rem; color: var(--text-muted); }
.oc-corpo .toolbarLista { padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.oc-corpo .inputBusca { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text); font-size: .9rem; }
.oc-corpo .inputBusca:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(24,33,110,.12); outline: none; }
.oc-corpo .filtroTabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 9999px; }
.oc-corpo .filtroTabs button { padding: 6px 14px; border-radius: 9999px; border: none; background: transparent; color: var(--text-muted); font-weight: 600; cursor: pointer; transition: all .15s ease; }
.oc-corpo .filtroTabs button[style*="var(--accent)"] { background: var(--navy) !important; color: #fff !important; }
.motoristas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 24px; max-width: 1300px; margin: 0 auto; }
.motoristas-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--sh-sm); transition: transform .2s ease, box-shadow .2s ease; }
.motoristas-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--accent-100); }

/* Contratos / Contrato detalhe — grids de estatística (4 e 3 colunas) e
   financeiro não tinham breakpoint: em telas estreitas os cards extra
   (3º/4º) ficavam empurrados pra fora do viewport (cortados, invisíveis)
   e valores em R$ estouravam a largura da coluna. (frontend only) */
.ctr-stats-grid, .cd-stats-grid, .cd-fin-grid { min-width: 0; }
.ctr-stats-grid > *, .cd-stats-grid > *, .cd-fin-grid > *, .cd-info-grid > * { min-width: 0; }
@media (max-width: 640px) {
  .ctr-stats-grid, .cd-stats-grid, .cd-fin-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cd-info-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px) {
  .ctr-stats-grid, .cd-stats-grid, .cd-fin-grid { grid-template-columns: 1fr !important; }
}
/* Tabelas (viagens, contratos) — em vez de cortar colunas ou deixar
   vazar, rola horizontalmente só a tabela, mantendo o card ao redor
   intacto. */
.tbl-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll-x table { min-width: 640px; }

/* OC e Motoristas — interfaces mais organizadas e simplificadas (frontend only) */
.oc-simplificado { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; max-width: 1300px; margin: 0 auto; padding: 24px; }
.oc-simplificado .oc-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-sm); padding: 20px; }
.oc-simplificado .oc-hero { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--sh-sm); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.motoristas-simplificado { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding: 24px; max-width: 1300px; margin: 0 auto; }
.motoristas-simplificado .motorista-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.motoristas-simplificado .motorista-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
@media (max-width: 1024px) { .oc-simplificado { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .oc-simplificado, .motoristas-simplificado { padding: 12px; gap: 12px; } .motoristas-simplificado { grid-template-columns: 1fr; } }

/* Botão de expandir o mapa (tela cheia) — Leaflet usa z-index:1000 nos
   próprios controles, empatando com o botão. Sobe acima disso. (frontend only) */
.dash-mapa-fs-btn {
  z-index: 1100 !important;
}


/* Corrige a raiz: .nav-overlay nunca teve position:fixed, então não cobria
   a tela como um overlay de verdade, deixando conteúdo (mapas etc.) aparecer
   por cima do menu lateral ao abrir. (frontend only) */
.nav-overlay {
  position: fixed !important;
  inset: 0 !important;
  align-items: stretch !important;
  z-index: 200000 !important;
  /* Forca camada de composicao propria — sem isso, o background/backdrop-filter
     do overlay falha em compor por cima do mapa (Leaflet usa transform:translate3d
     nos tiles pra performance, e o Chrome as vezes pinta essas camadas GPU acima
     do overlay mesmo com z-index/stacking corretos). O clique ja ia pro overlay
     (hit-test certo), so a pintura visual vazava. (frontend only) */
  transform: translateZ(0) !important;
  will-change: transform !important;
}
.nav-drawer {
  position: fixed !important;
  z-index: 200001 !important;
}

/* Quando o menu lateral está aberto, neutraliza qualquer painel interno
   com z-index elevado (ex: cabeçalhos sticky de painéis internos, z-index:100)
   para o menu sempre vencer visualmente. (frontend only) */
body:has(.nav-overlay.is-open) [style*="z-index: 100"],
body:has(.nav-overlay.is-open) [style*="z-index:100"] {
  z-index: 1 !important;
}

/* O truque de layer proprio (translateZ) no .nav-overlay nao garante
   sempre vencer visualmente o Leaflet (o Chrome as vezes so recompoe
   certo depois de um toggle). Garantia definitiva: esconde o mapa
   enquanto o menu esta aberto, eliminando o conflito de composicao
   de vez (ele fica coberto pelo overlay escuro de qualquer forma). (frontend only) */
body:has(.nav-overlay.is-open) .leaflet-container {
  visibility: hidden !important;
}
/* Botao 'Expandir mapa' (dash-map-fs.js) e criado via JS puro com
   z-index:1100 inline, sem classe. Mesmo escondendo o .leaflet-container,
   esse botao fica fora dele (irmao no painel) e sofria o mesmo vazamento
   visual sobre o menu. Escondido junto pelo mesmo motivo. (frontend only) */
body:has(.nav-overlay.is-open) [style*="z-index:1100"],
body:has(.nav-overlay.is-open) [style*="z-index: 1100"] {
  visibility: hidden !important;
}


/* ═══ Uniformizacao de UI entre modulos (pedido do usuario) ═══ */

/* Cabecalho de tabela consistente em toda a app — algumas telas
   (Setores, Usuarios) usavam fundo claro/texto navy, outras
   (Atrelamento, OC, Historico) fundo navy solido/texto branco.
   Padroniza pro estilo navy solido, que ja era o mais usado. (frontend only) */
table thead tr { background: var(--accent) !important; }
table thead th { background: transparent !important; color: #fff !important; }

/* Modulo Pneus usava uma paleta verde-esmeralda propria (rgb(5,150,105))
   em vez do azul-marinho de marca usado no resto da app (botao 'Novo pneu'
   e aba 'Estoque' ativa). Uniformiza pra --navy. (frontend only) */
[style*="background: rgb(5, 150, 105)"],
[style*="background:rgb(5, 150, 105)"] {
  background: var(--accent) !important;
}



/* ═══ Busca global de funcionalidades (global-search.js) — frontend only ═══
   Botão de lupa que expande no lugar (efeito "expanding search bar" clássico
   de Material Design), ancorado à esquerda do bloco de nome do usuário no
   header, em vez de abrir um modal centralizado.
   Estrutura: #pgs-trigger (wrap sem overflow, so posiciona) > .pgs-pill
   (visual arredondado com overflow:hidden, contem icone+input+clear) +
   .pgs-dropdown (irmao do pill, fora do overflow, pra nao ser cortado). ═══ */

@keyframes pgs-ripple-anim { to { transform: scale(1); opacity: 0; } }
.pgs-ripple {
  position: absolute; border-radius: 50%; background: rgba(24,33,110,.28);
  transform: scale(0); transform-origin: center; opacity: 1; pointer-events: none;
  animation: pgs-ripple-anim .55s cubic-bezier(.2,.6,.35,1) forwards;
}

#pgs-trigger {
  position: relative; flex: 0 0 auto; margin-right: 10px;
  width: 38px; height: 38px;
}

#pgs-trigger .pgs-pill {
  position: relative; overflow: hidden; display: flex; align-items: center;
  width: 100%; height: 100%;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: #fff; box-shadow: var(--sh-xs);
  transition: width .38s cubic-bezier(.4,0,.2,1), border-radius .38s cubic-bezier(.4,0,.2,1),
              box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
#pgs-trigger .pgs-pill:hover { border-color: var(--accent-300); box-shadow: var(--sh-sm); }

#pgs-trigger .pgs-icon-btn {
  position: relative; overflow: hidden; flex: 0 0 auto;
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: none; background: transparent; color: var(--navy); cursor: pointer;
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.4,0,.2,1), color .2s ease;
}
#pgs-trigger .pgs-icon-btn svg { transition: transform .3s cubic-bezier(.4,0,.2,1); }
#pgs-trigger:not(.is-expanded) .pgs-icon-btn:hover svg { transform: scale(1.12) rotate(-8deg); }
#pgs-trigger .pgs-icon-btn:active { transform: scale(.88); }

#pgs-trigger .pgs-inline-input {
  width: 0; min-width: 0; flex: 0 0 auto; border: none; outline: none; background: transparent;
  font-size: .92rem; font-family: var(--font); color: var(--text); opacity: 0;
  padding: 0; transition: width .38s cubic-bezier(.4,0,.2,1), opacity .26s ease .08s;
}
#pgs-trigger .pgs-inline-input::placeholder { color: var(--text-subtle); }

#pgs-trigger .pgs-clear {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 0; height: 28px; opacity: 0; margin: 0;
  display: inline-grid; place-items: center; border-radius: 50%;
  border: none; background: transparent; color: var(--text-subtle); cursor: pointer;
  transition: width .3s cubic-bezier(.4,0,.2,1), opacity .24s ease .06s, background .2s ease, color .2s ease;
}
#pgs-trigger .pgs-clear:hover { background: var(--surface-3); color: var(--text); }

#pgs-trigger .pgs-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; width: 100%;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-xl); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98);
  transition: opacity .22s ease, transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .22s;
  pointer-events: none;
}

/* ── Estado expandido ────────────────────────────────────────────────── */
#pgs-trigger.is-expanded {
  position: fixed; top: var(--pgs-top); right: var(--pgs-right);
  width: min(420px, calc(100vw - 24px)); height: 44px;
  z-index: 260000; margin-right: 0;
}
#pgs-trigger.is-expanded .pgs-pill {
  border-radius: 22px; border-color: var(--accent-300); box-shadow: var(--sh-xl);
  padding-left: 4px;
}
#pgs-trigger.is-expanded .pgs-inline-input {
  width: 100%; flex: 1 1 auto; opacity: 1; padding: 0 4px;
}
#pgs-trigger.is-expanded .pgs-clear {
  width: 28px; opacity: 1; margin-right: 4px;
}
#pgs-trigger.is-expanded .pgs-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
  transition: opacity .3s ease .1s, transform .36s cubic-bezier(.4,0,.2,1) .1s, visibility 0s linear;
}

#pgs-trigger .pgs-list { max-height: 55vh; overflow-y: auto; padding: 8px; }
#pgs-trigger .pgs-item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 11px 14px; border-radius: 12px;
  border: none; background: transparent; color: var(--text); cursor: pointer;
  font-family: var(--font); font-size: .88rem; font-weight: 600;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
#pgs-trigger .pgs-item svg { flex: 0 0 auto; color: var(--text-subtle); transition: color .12s ease; }
#pgs-trigger .pgs-item.is-active,
#pgs-trigger .pgs-item:hover { background: var(--accent-soft); color: var(--navy); transform: translateX(2px); }
#pgs-trigger .pgs-item.is-active svg,
#pgs-trigger .pgs-item:hover svg { color: var(--navy); }
#pgs-trigger .pgs-item mark { background: transparent; color: var(--navy); font-weight: 800; }
#pgs-trigger .pgs-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pgs-trigger .pgs-item-path { font-size: .74rem; font-weight: 500; color: var(--text-subtle); flex: 0 0 auto; }
#pgs-trigger .pgs-item-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#pgs-trigger .pgs-item-sub { font-size: .72rem; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
#pgs-trigger .pgs-empty { padding: 28px 16px; text-align: center; color: var(--text-subtle); font-size: .85rem; }

@media (max-width: 640px) {
  #pgs-trigger.is-expanded { width: calc(100vw - 20px); right: 10px !important; }
  #pgs-trigger .pgs-item-path { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #pgs-trigger, #pgs-trigger *, .pgs-ripple { transition: none !important; animation: none !important; }
}


/* ═══ Notificacoes (notifications.js) — frontend only ═══
   Sino no header, ao lado da busca. Dropdown simples ancorado por
   position:absolute (fica no fluxo normal do header, entao rola junto
   com a pagina — evita o mesmo problema de "flutuar sozinho" que a
   barra de busca teve com position:fixed). Dados filtrados por
   hierarquia: só mostra o que o usuario tem permissao de ver no menu. ═══ */

#pgn-trigger { position: relative; flex: 0 0 auto; margin-right: 10px; }

#pgn-trigger .pgn-bell-btn {
  position: relative; overflow: hidden;
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: #fff; color: var(--navy); box-shadow: var(--sh-xs); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s cubic-bezier(.4,0,.2,1);
}
#pgn-trigger .pgn-bell-btn:hover { background: var(--surface-2); border-color: var(--accent-300); box-shadow: var(--sh-sm); }
#pgn-trigger .pgn-bell-btn:active { transform: scale(.9); }

#pgn-trigger .pgn-badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px !important;
  background: var(--danger-bg) !important; color: var(--danger) !important;
  font-size: .64rem; font-weight: 800; font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center;
  border: none !important; line-height: 1;
}
/* [hidden] do HTML não vencia o "display: inline-flex" acima (mesma
   especificidade, mas a declaração explícita de display ganha do default
   do navegador pro atributo) — badge nunca sumia de fato mesmo com 0
   urgentes. Só ficava invisível na prática porque quase sempre havia
   algum item vencido; agora que dá pra marcar tudo como lido, o contador
   pode zerar de verdade e o badge precisa sumir. */
#pgn-trigger .pgn-badge[hidden] { display: none !important; }

#pgn-trigger .pgn-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(380px, calc(100vw - 24px)); max-height: 70vh;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-xl); overflow: hidden; font-family: var(--font);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity .22s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .22s;
  pointer-events: none; z-index: 250000;
}
#pgn-trigger .pgn-panel.is-open {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
  transition: opacity .26s ease .05s, transform .3s cubic-bezier(.4,0,.2,1) .05s, visibility 0s linear;
}

#pgn-trigger .pgn-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: .92rem; color: var(--navy);
}
#pgn-trigger .pgn-refresh-btn {
  position: relative; overflow: hidden;
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; border: none; background: transparent; color: var(--text-subtle); cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .4s ease;
}
#pgn-trigger .pgn-refresh-btn:hover { background: var(--surface-3); color: var(--navy); transform: rotate(75deg); }

#pgn-trigger .pgn-body { overflow-y: auto; padding: 6px; }

#pgn-trigger .pgn-section { padding: 6px 4px; }
#pgn-trigger .pgn-section + .pgn-section { border-top: 1px solid var(--border); margin-top: 4px; }
#pgn-trigger .pgn-section-title {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px;
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-subtle);
}
#pgn-trigger .pgn-section-title svg { flex: 0 0 auto; }
#pgn-trigger .pgn-count {
  margin-left: auto; background: var(--surface-3); color: var(--text-muted);
  border-radius: 999px; padding: 1px 7px; font-size: .68rem; font-weight: 700;
}

#pgn-trigger .pgn-item {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px;
  border: none; background: transparent; cursor: pointer; font-family: var(--font);
  transition: background .12s ease;
}
#pgn-trigger .pgn-item:hover { background: var(--accent-soft); }
#pgn-trigger .pgn-item-main { font-size: .84rem; color: var(--text); }
#pgn-trigger .pgn-item-main strong { color: var(--navy); }
#pgn-trigger .pgn-item-sub { font-size: .72rem; color: var(--text-subtle); }
#pgn-trigger .pgn-item-danger .pgn-item-sub { color: var(--danger); font-weight: 600; }

#pgn-trigger .pgn-empty-mini { padding: 6px 10px 10px; font-size: .78rem; color: var(--text-subtle); }
#pgn-trigger .pgn-empty { padding: 32px 16px; text-align: center; color: var(--text-subtle); font-size: .85rem; }
#pgn-trigger .pgn-loading { padding: 32px 16px; text-align: center; color: var(--text-subtle); font-size: .85rem; }

/* Painel de notificações em mobile — era position:absolute ancorado no
   sino com "right:-46px" tentando compensar a largura, mas vazava pra
   fora da tela (direita cortada, sobrando vão à esquerda). Virou bottom
   sheet (fixo embaixo), mas o gatilho (sino) fica no topo da tela — abrir
   pra cima quebra o padrão de apps (painel deveria abrir no sentido do
   elemento que foi clicado). Agora é fixed + full-width (continua sem
   vazar lateralmente) mas abre a partir do TOPO: "top" é calculado via JS
   (positionMobile() em notifications.js) com a borda inferior real do
   header, que muda de altura quando quebra em 2 linhas (421-640px). */
@media (max-width: 640px) {
  #pgn-trigger .pgn-panel {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 0 0 16px 16px !important; transform: translateY(-16px) !important;
  }
  #pgn-trigger .pgn-panel.is-open { transform: translateY(0) !important; }
  #pgn-trigger .pgn-item { padding: 12px 34px 12px 22px !important; }
}

#pgn-trigger .pgn-panel-header { gap: 10px; }
#pgn-trigger .pgn-header-actions { display: flex; align-items: center; gap: 4px; }
#pgn-trigger .pgn-markall-btn {
  display: flex; align-items: center; gap: 5px; border: none; background: transparent;
  color: var(--text-subtle); font-family: var(--font); font-size: .72rem; font-weight: 700;
  padding: 5px 8px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
#pgn-trigger .pgn-markall-btn:hover { background: var(--surface-3); color: var(--navy); }
@media (max-width: 420px) { #pgn-trigger .pgn-markall-btn span { display: none; } }

#pgn-trigger .pgn-unread-dot {
  position: absolute; left: 8px; top: 15px; width: 7px; height: 7px; border-radius: 999px;
  background: var(--accent);
}
#pgn-trigger .pgn-item-danger .pgn-unread-dot { background: var(--danger); }
#pgn-trigger .pgn-item { padding-left: 20px; }
#pgn-trigger .pgn-item-read .pgn-item-main,
#pgn-trigger .pgn-item-read .pgn-item-sub { opacity: .55; }
#pgn-trigger .pgn-mark-read {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  color: var(--text-subtle); opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
#pgn-trigger .pgn-item:hover .pgn-mark-read, #pgn-trigger .pgn-item:focus-within .pgn-mark-read { opacity: 1; }
#pgn-trigger .pgn-mark-read:hover { background: var(--surface-3); color: var(--accent); }
@media (max-width: 640px) {
  #pgn-trigger .pgn-mark-read { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  #pgn-trigger, #pgn-trigger * { transition: none !important; animation: none !important; }
}


/* ═══ Frota — botoes de acao dos cards usavam paleta Tailwind generica
   (roxo/azul/slate) em vez dos tokens da marca, destoando do resto da
   app. Uniformiza pra --accent-soft/--accent (mesmo padrao usado nos
   botoes Editar de Setores, Usuarios, Cargos etc). (frontend only) ═══ */
.frota-card-action[title="Editar veículo"],
.frota-card-action[title="Ver QR Code do veículo"] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.frota-card-action[title="Bloquear veículo"],
.frota-card-action[title="Desbloquear veículo"] {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}


/* ═══ Frota — mesmo problema (azul Tailwind rgb(29,78,216)/rgb(219,234,254))
   se repete em mais lugares do card: icone de marca, spans de motorista e
   carretas vinculadas. Cobre via atributo, ja que sao estilos inline sem
   classe. (frontend only) ═══ */
[style*="rgb(29, 78, 216)"] { color: var(--accent) !important; }
[style*="background: rgb(219, 234, 254)"],
[style*="background:rgb(219, 234, 254)"] { background: var(--accent-soft) !important; }


/* ═══ Frota — mesmo roxo Tailwind (rgb(124,58,237)) tambem aparece no
   botao QR Code do painel de detalhes (visao Split), um componente
   diferente do card, sem classe/title pra mirar. Cobre via atributo,
   igual ao azul. (frontend only) ═══ */
[style*="rgb(124, 58, 237)"] { color: var(--accent) !important; }
[style*="background: rgb(243, 232, 255)"],
[style*="background:rgb(243, 232, 255)"] { background: var(--accent-soft) !important; }


/* ═══ Ajuda (help.js) — frontend only. Mesmo padrao visual dos botoes de
   busca/notificacao: icone circular no header, dropdown ancorado por
   position:absolute (fica no fluxo normal, entao rola junto com a
   pagina). ═══ */

#pgh-trigger { position: relative; flex: 0 0 auto; margin-right: 10px; }

#pgh-trigger .pgh-help-btn {
  position: relative; overflow: hidden;
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: #fff; color: var(--navy); box-shadow: var(--sh-xs); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s cubic-bezier(.4,0,.2,1);
}
#pgh-trigger .pgh-help-btn:hover { background: var(--surface-2); border-color: var(--accent-300); box-shadow: var(--sh-sm); }
#pgh-trigger .pgh-help-btn:active { transform: scale(.9); }

#pgh-trigger .pgh-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(320px, calc(100vw - 24px)); max-height: 70vh;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-xl); overflow: hidden; font-family: var(--font);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity .22s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .22s;
  pointer-events: none; z-index: 250000;
}
#pgh-trigger .pgh-panel.is-open {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
  transition: opacity .26s ease .05s, transform .3s cubic-bezier(.4,0,.2,1) .05s, visibility 0s linear;
}

#pgh-trigger .pgh-panel-header {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: .92rem; color: var(--navy);
}

#pgh-trigger .pgh-body { overflow-y: auto; padding: 12px 14px 14px; }
#pgh-trigger .pgh-section + .pgh-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
#pgh-trigger .pgh-section-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-subtle); margin-bottom: 8px;
}

#pgh-trigger .pgh-shortcut {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px; color: var(--text);
}
#pgh-trigger .pgh-shortcut svg { color: var(--text-subtle); flex: 0 0 auto; }
#pgh-trigger .pgh-shortcut-label { font-size: .82rem; flex: 1 1 auto; }
#pgh-trigger .pgh-kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border-strong);
  font-size: .72rem; font-weight: 700; color: var(--text-muted); font-family: var(--font);
}

#pgh-trigger .pgh-tip {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px;
  font-size: .8rem; color: var(--text-muted); line-height: 1.4;
}
#pgh-trigger .pgh-tip svg { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }

/* Mesmo motivo e mesma solução do painel de notificações: dropdown
   ancorado (position:absolute) vazava pra fora da tela em mobile. Fica
   fixed + full-width (sem vazar), mas abre a partir do TOPO — o gatilho
   (ícone de ajuda) fica no header, então o painel desce dali, não sobe
   do fundo da tela. "top" é calculado via JS (positionMobile() em
   help.js) com a borda inferior real do header. */
@media (max-width: 640px) {
  #pgh-trigger .pgh-panel {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 0 0 16px 16px !important; transform: translateY(-16px) !important;
  }
  #pgh-trigger .pgh-panel.is-open { transform: translateY(0) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #pgh-trigger, #pgh-trigger * { transition: none !important; animation: none !important; }
}


/* ═══ Header — logo colado no subtitulo (frontend only)
   .pg-logo .hide-mobile embrulha dois <span> inline (titulo do modulo +
   "Sistema de Gestao Logistica") direto um apos o outro, sem espaco
   nenhum no HTML entre eles — ficava lendo "LogisticaSistema de Gestao..."
   colado. O gap:1px do wrapper nao ajudava porque ele e display:block,
   nao flex (gap so funciona em flex/grid). ═══ */
.pg-logo .hide-mobile { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 6px !important; }
.pg-logo .hide-mobile span { display: inline-block !important; }


/* ═══ Header — titulo da pagina colado na logomarca (frontend only)
   .pg-header e flex com gap:14px entre TODOS os filhos, mas 14px fica
   apertado especificamente entre a imagem do logo e o bloco de
   titulo/subtitulo (fontes grandes/bold ali do lado). Acrescenta um
   respiro extra so nesse ponto, sem mexer no gap geral do header. ═══ */
.pg-logo { margin-right: 10px !important; }


/* ═══ Header mobile — minimiza informacoes, vibe de app (frontend only)
   Esconde o subtitulo ("Sistema de Gestao Logistica") em telas pequenas
   — informacao redundante que so ocupa espaco vertical. Reduz a logo e
   os paddings do header pra sobrar mais tela pro conteudo navegavel. ═══ */
@media (max-width: 640px) {
  .pg-logo .hide-mobile { display: none !important; }
  .pg-logo + div:not(.pg-header-actions) { display: none !important; }
  .pg-logo > div:not(.hide-mobile) { display: none !important; }
  .pg-logo img { max-height: 28px !important; width: 104px !important; }
  html:not([data-theme="dark"]) .pg-header .pg-logo::before,
  html:not([data-theme="dark"]) .pg-header.dash-header .pg-logo::before,
  html:not([data-theme="dark"]) .mod-header .pg-logo::before { width: 104px !important; height: 28px !important; }
  .pg-header, .pg-header.dash-header, .mod-header { padding: 8px 12px !important; }
  .pg-logo { margin-right: 8px !important; gap: 8px !important; }
}


/* ═══ Header em telas bem estreitas (celular) — aperta mais um pouco
   pra logo + barra de icones caberem numa unica linha, sem quebrar.
   Confirmado por medicao real: faltavam ~28px em 376px uteis com 6
   icones (busca/sino/ajuda/+novo/dashboard/menu) — este bloco cobre
   essa folga reduzindo gaps/paddings so nesse breakpoint. (frontend only) ═══ */
/* ═══ Header entre 421-640px — quando logo + ícones não cabem numa linha
   só, o flex-wrap (regra mais acima) jogava os ícones pra uma 2ª linha,
   mas a logo ficava sozinha na 1ª linha grudada no canto esquerdo (e a
   2ª linha de ícones também não usava a largura toda — sobrava um vão à
   esquerda por causa do margin-left:auto que só faz sentido quando os
   dois cabem lado a lado). Força logo e ações a ocuparem 100% da largura
   cada uma quando quebram: logo centralizada em cima, ícones distribuídos
   (space-between) embaixo. ═══ */
@media (min-width: 421px) and (max-width: 640px) {
  .pg-header, .pg-header.dash-header, .mod-header { justify-content: center; }
  .pg-logo { flex: 1 1 100%; justify-content: center; margin-right: 0 !important; }
  .pg-header-actions { flex: 1 1 100%; justify-content: space-between !important; margin-left: 0 !important; }
}
@media (max-width: 420px) {
  .pg-header, .pg-header.dash-header, .mod-header { padding: 8px 6px !important; gap: 4px !important; flex-wrap: nowrap !important; }
  .pg-header-actions { gap: 4px !important; flex-wrap: nowrap !important; flex-shrink: 0 !important; margin-left: 0 !important; }
  .pg-logo { margin-right: 0 !important; flex-shrink: 0 !important; }
  .pg-logo img { max-height: 24px !important; width: 88px !important; }
  html:not([data-theme="dark"]) .pg-header .pg-logo::before,
  html:not([data-theme="dark"]) .pg-header.dash-header .pg-logo::before,
  html:not([data-theme="dark"]) .mod-header .pg-logo::before { width: 88px !important; height: 24px !important; }
  #pgs-trigger, #pgn-trigger, #pgh-trigger { margin-right: 0 !important; }
  #pgs-trigger:not(.is-expanded), #pgn-trigger, #pgh-trigger { width: 32px !important; height: 32px !important; }
  #pgn-trigger .pgn-bell-btn, #pgh-trigger .pgh-help-btn { width: 32px !important; height: 32px !important; }
  .nav-trigger { width: 32px !important; height: 32px !important; }
  .pg-header .frota-header-btn, .pg-header .manut-header-btn, .pg-header .mod-hbtn, .pg-header .mod-hbtn-alt, .pg-header .exportbar-btn, .pg-header .pneus-btn { min-width: 32px !important; width: 32px !important; height: 32px !important; padding: 6px !important; gap: 0 !important; }
  .pg-logo .hide-mobile, .pg-logo + div:not(.pg-header-actions), .pg-logo > div:not(.hide-mobile) { display: none !important; width: 0 !important; margin: 0 !important; }
}


/* ═══ PWA instalado no iOS (Home Screen) — status bar fica translucida
   (apple-mobile-web-app-status-bar-style=black-translucent), entao a
   pagina desenha por baixo dela e o header fica colado no topo. Aplica
   o safe-area-inset-top so em modo standalone, sem mudar o navegador
   normal. (frontend only) ═══ */
@media (display-mode: standalone) {
  .pg-header, .pg-header.dash-header, .mod-header, header[style*="--header-bg"] {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  }
}
@media (display-mode: standalone) and (max-width: 640px) {
  .pg-header, .pg-header.dash-header, .mod-header { padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important; }
}
@media (display-mode: standalone) and (max-width: 420px) {
  .pg-header, .pg-header.dash-header, .mod-header { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; }
}


/* ═══ Spinner de carregamento (modulo Contratos/Retiradas) — classe
   usada pelos componentes Loader2 do lucide-react em estados de
   loading/parsing/salvando. (frontend only) ═══ */
.anim-spin { animation: pg-spin 1s linear infinite; }
@keyframes pg-spin { to { transform: rotate(360deg); } }

/* ═══ Manutenção — cores destoantes do resto do sistema (frontend only)
   Os cards de estatística (Estoque, OS, Financeiro) usavam fundo pastel
   tipo "alerta" (vermelho/verde/azul claro) e os botões de ação tinham
   4 cores saturadas sem hierarquia (verde/vermelho/slate-900), além do
   slate-900 (rgb(15,23,42), tailwind) no lugar do navy da marca
   (#18216E) usado em todo o resto do app. Neutraliza o preenchimento,
   deixando a cor de status só como borda/aro — e troca o slate-900 pela
   cor de destaque real da marca, pra Manutenção ficar visualmente
   igual às outras páginas (Contratos, Fechamento etc.). ═══ */
div[style*="background: rgb(254, 242, 242)"],
div[style*="background: rgb(240, 253, 244)"],
div[style*="background: rgb(240, 249, 255)"],
div[style*="background: rgb(239, 246, 255)"],
div[style*="background: rgb(255, 251, 235)"] {
  background: var(--card-bg) !important;
}
button[style*="background: rgb(5, 150, 105)"] {
  background: var(--card-bg) !important; color: #059669 !important; border: 1px solid #059669 !important;
}
button[style*="background: rgb(220, 38, 38)"] {
  background: var(--card-bg) !important; color: #DC2626 !important; border: 1px solid #DC2626 !important;
}
button[style*="background: rgb(15, 23, 42)"],
div[style*="background: rgb(15, 23, 42)"] {
  background: var(--accent) !important;
}

/* Manutenção — layout mestre-detalhe (lista de veículo/item + painel) era
   um flex row fixo, sem stack em mobile: o painel de detalhe ficava
   espremido em ~70px de largura ao lado da lista, texto cortado. Empilha
   em 1 coluna abaixo de 768px, igual ao padrão já usado no resto do app. */
@media (max-width: 768px) {
  div[style*="align-items: stretch; min-height: 400px"] {
    flex-direction: column !important;
  }
}

/* Manutenção — sub-navegação (.manut-navgroups): era overflow-x:auto
   sem nenhuma pista visual de scroll — em mobile, Insumos/Financeiro/
   Cadastros ficavam invisíveis fora da tela, sem indicação de que dava
   pra rolar. Troca pra flex-wrap: cada grupo quebra linha e tudo fica
   sempre visível, sem gesto escondido. Esconde os rótulos de categoria
   (Visão/Preventiva/Config) nas telas bem estreitas — texto miúdo que só
   adiciona ruído quando o espaço já está apertado. */
@media (max-width: 900px) {
  .manut-navgroups {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding: 10px 12px !important;
    row-gap: 10px !important;
  }
  .manut-navgroups > div[style*="min-width: max-content"] {
    border-right: none !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 480px) {
  .manut-navgroups span[style*="font-size: 0.62rem"] {
    display: none !important;
  }
}

/* ═══ Tema escuro — icones/texto brancos sobre fundo branco no header
   (achado ao testar Frota.jsx em dark mode: busca, sino, ajuda,
   Dashboard/Voltar e botoes mod-hbtn-alt ficavam completamente
   invisiveis). Causa: ".pg-header *, .mod-header *" forca color:#fff
   !important no tema escuro (regra generica pra texto sobre o header
   navy), mas #pgs-trigger/#pgn-trigger/#pgh-trigger/.mod-hbtn/
   .mod-hbtn-alt tem fundo SEMPRE branco (--header-btn-bg e #fff nos
   dois temas) — e var(--navy)/var(--text)/var(--accent) tambem mudam
   de valor no escuro (viram claros, pensados pra texto sobre fundo
   escuro). Usa hex literal (nao variavel) pra nao herdar a inversao
   do tema. (frontend only) ═══ */
html[data-theme="dark"] #pgs-trigger .pgs-icon-btn,
html[data-theme="dark"] #pgs-trigger .pgs-icon-btn *,
html[data-theme="dark"] #pgn-trigger .pgn-bell-btn,
html[data-theme="dark"] #pgn-trigger .pgn-bell-btn *,
html[data-theme="dark"] #pgh-trigger .pgh-help-btn,
html[data-theme="dark"] #pgh-trigger .pgh-help-btn *,
html[data-theme="dark"] .mod-hbtn,
html[data-theme="dark"] .mod-hbtn *,
html[data-theme="dark"] .pg-header .mod-hbtn-alt,
html[data-theme="dark"] .pg-header .mod-hbtn-alt *,
html[data-theme="dark"] .mod-header .mod-hbtn-alt,
html[data-theme="dark"] .mod-header .mod-hbtn-alt *,
html[data-theme="dark"] .nav-trigger,
html[data-theme="dark"] .nav-trigger *,
html[data-theme="dark"] .nav-trigger-claro,
html[data-theme="dark"] .nav-trigger-claro * {
  color: #18216e !important;
}