/* ============================================================
   FleetOBD · TEMA "AURORA LIGHT" (v3.0)
   Tema claro, leve e moderno para uso o dia inteiro.
   Carregado DEPOIS do style.css: redefine os tokens e refaz
   o acabamento visual. Estrutura, textos e fluxos não mudam.
   ============================================================ */

:root {
  /* superfícies claras */
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #17233a;
  --muted: #64748b;
  --line: #e5eaf1;
  --navy: #ffffff;
  --navy-2: #eef2f7;
  /* marca e estados */
  --accent: #0ea5a0;
  --accent-d: #0b8f7e;
  --accent-hi: #0b8f7e;
  --accent-soft: #e2f6f4;
  --ok: #16a34a; --warn: #ea580c; --check: #ca8a04; --crit: #dc2626; --off: #94a3b8; --drv: #7c3aed;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(23, 35, 58, .05), 0 1px 3px rgba(23, 35, 58, .06);
  --shadow-md: 0 4px 14px rgba(23, 35, 58, .08);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* ---------- base ---------- */
body { background: var(--bg); color: var(--ink); }
a { color: var(--accent-d); }
::selection { background: rgba(14, 165, 160, .22); }

/* scrollbars discretas */
.side::-webkit-scrollbar, .tablewrap::-webkit-scrollbar { width: 8px; height: 8px; }
.side::-webkit-scrollbar-thumb, .tablewrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.side::-webkit-scrollbar-track, .tablewrap::-webkit-scrollbar-track { background: transparent; }

/* ---------- tipografia ---------- */
h1 {
  font-family: "Exo 2", system-ui, sans-serif; font-weight: 700;
  font-size: 1.6rem; letter-spacing: .2px; color: var(--ink);
}
h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: .15px; color: var(--ink); }
main > header.top { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.mono, td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* ---------- menu lateral (claro, estilo SaaS) ---------- */
.side {
  background: #ffffff;
  border-right: 1px solid var(--line); color: #475569;
  box-shadow: 1px 0 0 rgba(23, 35, 58, .02);
}
.side .brand { color: var(--ink); border-bottom: 1px solid var(--line); }
.side .brand b { color: var(--accent); }
.side .brand .tagline { color: var(--muted); }
.side nav a { color: #475569; border-radius: 9px; }
.side nav a:hover { background: #f1f5f9; color: var(--ink); }
.side nav a.on {
  background: var(--accent-soft); color: var(--accent-d);
  box-shadow: inset 3px 0 0 var(--accent); font-weight: 650;
}
.side nav.nv .nv-main { border-bottom-color: var(--line); }
.side nav.nv .nv-main a, .side nav.nv .nv-main .dis { color: #3c4d66; }
.side nav.nv .nv-main a:hover { background: #f1f5f9; color: var(--ink); }
.side nav.nv .nv-main a.on { background: var(--accent); color: #ffffff; box-shadow: none; }
.side nav.nv details.grp { border-bottom-color: var(--line); }
.side nav.nv details.grp > summary {
  color: var(--accent-d); background: var(--accent-soft);
  border: 1px solid rgba(14, 165, 160, .22); border-radius: 9px; font-weight: 650;
}
.side nav.nv details.grp > summary:hover { background: #d3f0ed; color: var(--accent-d); }
.side nav.nv details.grp > summary::after { color: var(--accent); }
.side nav.nv .grpbody { border-left-color: #dbe4ee; }
.side nav.nv .grpbody > a { color: #556788; }
.side nav.nv .grpbody > a:hover { background: #f1f5f9; color: var(--ink); }
.side nav.nv .grpbody > a.on {
  background: var(--accent-soft); color: var(--accent-d);
  box-shadow: inset 3px 0 0 var(--accent); font-weight: 650;
}
.side nav .sub { border-left-color: #dbe4ee; }
.side nav .sub a { color: #7c8ca3; }
.side nav .sub a:hover { background: #f1f5f9; color: var(--ink); }
.side nav .sub a.on { color: var(--accent-d); background: transparent; font-weight: 650; }
.side nav .dis { color: #a7b4c6; }
.side nav .ic svg { width: 17px; height: 17px; display: block; }
.badge { background: var(--crit); color: #ffffff; }
.side-foot { color: var(--muted); border-top: 1px solid var(--line); }
.side-foot .co { color: var(--ink); }
.side-foot a, .side-foot button { color: #7c8ca3; }
.side-foot a.acct { border: 1px solid var(--line); color: #475569; border-radius: 8px; }
.side-foot a.acct:hover { background: #f1f5f9; }
.dev { color: #8ba0b8; border-top: 1px solid var(--line); }
.dev b { color: #475569; }
.dev a { color: #7c8ca3; }
.ver-inline { color: var(--accent-d); }
.navpin, .navbtn { background: #ffffff; border: 1px solid var(--line); color: #64748b; border-radius: 8px; }
.navpin:hover, .navbtn:hover { background: #f1f5f9; color: var(--ink); }

/* ---------- cards, stats ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--off); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat b { font-family: "Exo 2", system-ui, sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--ink); }
.stat span { color: var(--muted); }
.stat.ok { border-left-color: var(--ok); }
.stat.warn { border-left-color: var(--warn); }
.stat.check { border-left-color: var(--check); }
.stat.crit { border-left-color: var(--crit); }

/* ---------- tabelas ---------- */
td { background: transparent; }
th { color: var(--muted); border-bottom-color: var(--line); letter-spacing: .4px; }
td { border-bottom-color: var(--line); }
tbody tr:hover { background: #f6faf9; }
tr.grp td {
  background: var(--surface-2); border-top: 1px solid var(--line);
  color: var(--accent-d); text-transform: uppercase; letter-spacing: .8px; font-size: .78rem; font-weight: 700;
}
tr.isnew td { background: #fefce8; }
tr.shoprow td { background: #f5f3ff; }
tr.shoprow td:first-child { box-shadow: inset 4px 0 0 var(--drv); }
tr.archived { opacity: .55; }

/* ---------- pills (pastéis claros) ---------- */
.pill {
  background: #eef2f7; color: #55667e;
  box-shadow: inset 0 0 0 1px #d7dfe9; border-radius: 99px;
  letter-spacing: .5px;
}
.pill.ok { background: #e8f7ee; color: var(--ok); box-shadow: inset 0 0 0 1px #bbe5c9; }
.pill.warn { background: #fdf0e7; color: var(--warn); box-shadow: inset 0 0 0 1px #f6d3b8; }
.pill.check { background: #fdf8e3; color: var(--check); box-shadow: inset 0 0 0 1px #efe3a6; }
.pill.crit { background: #fdeaea; color: var(--crit); box-shadow: inset 0 0 0 1px #f3bcbc; }
.pill.off { background: #eef2f7; color: #6b7d95; box-shadow: inset 0 0 0 1px #d7dfe9; }
.pill.drv, .pill.autista { background: #f1ecfd; color: var(--drv); box-shadow: inset 0 0 0 1px #d9caf7; }
.pill.adblue { background: #e8f1fe; color: #2563eb; box-shadow: inset 0 0 0 1px #c3d9fa; }
.pill.adblue.urgent { background: #2563eb; color: #ffffff; box-shadow: none; }
.pill.fuel { background: #fdf8e3; color: #a16207; box-shadow: inset 0 0 0 1px #efe3a6; }
.pill.fuel.urgent { background: #eab308; color: #ffffff; box-shadow: none; }
.pill.shop { background: #f1ecfd; color: var(--drv); box-shadow: inset 0 0 0 1px #d9caf7; }
.pill.badge { background: #e6f6fe; color: #0284c7; box-shadow: inset 0 0 0 1px #bde4f8; }
.pill.nobadge { background: #fdf0e7; color: var(--warn); box-shadow: inset 0 0 0 1px #f6d3b8; }
.pill.bday { background: #fceaf4; color: #db2777; box-shadow: inset 0 0 0 1px #f4c6e0; }
.pill.manual-prio { background: #eceefe; color: #4f46e5; }
.pill.lvl1 { background: #e8f1fe; color: #2563eb; }
.pill.lvl2 { background: #fdf8e3; color: var(--check); }
.pill.lvl3 { background: var(--crit); color: #ffffff; }
.pill.shop::before { content: ""; }

/* ---------- barras e LEDs ---------- */
.bar, .oilbar { background: #e8edf4; border-radius: 99px; overflow: hidden; }
.bar i, .oilbar i { background: var(--accent); border-radius: 99px; }
.bar.warn i, .oilbar.soon i { background: var(--warn); }
.bar.crit i, .oilbar.over i { background: var(--crit); }
.bar.check i { background: #eab308; }
.dot { box-shadow: 0 0 0 3px rgba(148, 163, 184, .18); }
.dot.ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.dot.warn { background: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .18); }
.dot.check { background: #eab308; box-shadow: 0 0 0 3px rgba(234, 179, 8, .2); }
.dot.crit { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.dot.drv { background: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.dot.fuel { background: #ec4899; box-shadow: 0 0 0 3px rgba(236, 72, 153, .18); }
.dot.adblue { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }

/* ---------- formulários ---------- */
label { color: #52637a; }
input, select, textarea {
  background: #ffffff; border: 1px solid #d4dce6; color: var(--ink);
  border-radius: 9px;
}
input::placeholder, textarea::placeholder { color: #9aa8bc; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 160, .16);
}
input[readonly] { background: var(--surface-2); color: var(--muted); }
select option { background: #ffffff; color: var(--ink); }
.hint { color: #8ba0b8; }

.btn {
  background: var(--accent); color: #ffffff; border: 0; border-radius: 9px;
  font-weight: 650; box-shadow: 0 1px 2px rgba(11, 143, 126, .3);
  transition: background .12s, transform .12s, box-shadow .12s;
}
.btn:hover { background: var(--accent-d); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn.ghost {
  background: #ffffff; color: #475569; border: 1px solid #d4dce6; box-shadow: var(--shadow-sm);
}
.btn.ghost:hover { background: #f8fafc; border-color: #b9c6d5; color: var(--ink); }
.btn.danger { background: #ffffff; color: var(--crit); border: 1px solid #f3bcbc; box-shadow: var(--shadow-sm); }
.btn.danger:hover { background: #fdeaea; }
.btn.wa { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn.wa:hover { background: #15803d; }
.chip { background: var(--accent-soft); border-color: rgba(14, 165, 160, .35); color: var(--accent-d); }

.flash { border-radius: 10px; border: 1px solid transparent; }
.flash.ok { background: #e8f7ee; color: var(--ok); border-color: #bbe5c9; }
.flash.err { background: #fdeaea; color: var(--crit); border-color: #f3bcbc; }
.flash.warn { background: #fdf0e7; color: var(--warn); border-color: #f6d3b8; }

.kv dt { color: var(--muted); }
.pager a { color: var(--accent-d); }
.empty { color: var(--muted); }

/* segmentos e tabs */
.seg { border-color: #d4dce6; background: #ffffff; }
.seg a, .seg button { color: #55667e; background: transparent; }
.seg a:hover { background: #f1f5f9; }
.seg a.on, .seg a.on:hover, .seg button.on { background: var(--accent); color: #ffffff; }
.seg button:hover { background: #f1f5f9; }
.seg button.on:hover { background: var(--accent); }
.vtabs { border-bottom-color: var(--line); }
.vtab { color: var(--muted); }
.vtab:hover { color: var(--ink); }
.vtab.on { color: var(--accent-d); border-bottom-color: var(--accent); }
.vcnt { background: var(--crit); color: #ffffff; }
.instabs .btn.on { background: var(--accent); color: #ffffff; }

/* ---------- acesso / setup ---------- */
.auth {
  background:
    radial-gradient(700px 420px at 50% 8%, rgba(14, 165, 160, .1), transparent 65%),
    linear-gradient(180deg, #eef4f6, #e7edf3);
}
.auth .box {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(23, 35, 58, .12);
}
.auth .box .field label { color: #52637a; }
.auth .co { color: #8ba0b8; }
.auth .ver { color: #9aa8bc; }
.auth .logo-txt, .logo.dark .logo-txt { color: var(--ink); }
.auth .logo-txt b, .logo.dark .logo-txt b { color: var(--accent); }

/* ---------- dashboard ---------- */
.dsum {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.dcounts b { font-family: var(--font-mono); }
.dtot b { color: var(--ink); }
.dsep { color: var(--accent-d); font-weight: 700; }
.dsep::after { background: linear-gradient(90deg, var(--accent), transparent); height: 2px; border-radius: 2px; }
.dsep.rest { color: #8ba0b8; }
.dsep.rest::after { background: var(--line); }

.dtile {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.dtile:hover { border-color: #c9d5e2; box-shadow: var(--shadow-md); }
.dtile.new { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 165, 160, .15); }
.dnew { background: var(--accent); color: #ffffff; }
.dplate { font-family: "Exo 2", system-ui, sans-serif; font-weight: 700; letter-spacing: .8px; color: var(--ink); }
.ddrv { color: #55667e; }
.ddrv.shift { color: var(--ok); }
.ddrv.shift.long { color: var(--warn); }
.ddrv.shopdrv { color: var(--drv); }
.dkm { color: #8ba0b8; } .dkm b { color: var(--ink); font-family: var(--font-mono); }
.dupd { color: #a7b4c6; }
.gauge { background: var(--surface-2); color: #55667e; border: 1px solid var(--line); border-radius: 9px; }
.gauge .gs i { background: #dbe4ee; border-radius: 3px; }
.gauge .gv { color: var(--ink); }
.gauge.na .gv { color: #a7b4c6; }
.tl { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.tl i { background: #dbe4ee; border-radius: 3px; }
.tl .r.on { background: #ef4444; }
.tl .o.on { background: #f97316; }
.tl .y.on { background: #eab308; }
.tl .g.on { background: #22c55e; }
.tl .p.on { background: #8b5cf6; }
@keyframes tlblink { 50% { background: #dbe4ee; } }

/* legenda / cartões de veículo (dashboard e listas) */
.vcard {
  background: var(--surface);
  border: 1px solid var(--line); border-left: 5px solid var(--off); border-radius: var(--radius);
  color: var(--ink); box-shadow: var(--shadow-sm);
}
.vcard:hover { box-shadow: var(--shadow-md); }
.vcard.ok { border-left-color: var(--ok); } .vcard.warn { border-left-color: var(--warn); }
.vcard.check { border-left-color: #eab308; } .vcard.crit { border-left-color: var(--crit); }
.vcard.off { background: var(--surface-2); }
.vcard .code { font-family: "Exo 2", system-ui, sans-serif; font-weight: 700; letter-spacing: .8px; }
.vcard .meta { color: var(--muted); }
.vcard .why { color: #52637a; }
.vcard .why div::before { color: var(--accent); }

.tile { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); }
.tile:hover { box-shadow: var(--shadow-md); }
.tile.ok { border-left: 4px solid var(--ok); }
.tile.warn { border-left: 4px solid var(--warn); }
.tile.check { border-left: 4px solid #eab308; }
.tile.crit { border-left: 4px solid var(--crit); }
.tile.off { border-left: 4px solid var(--off); }
.tile .plate { font-family: "Exo 2", system-ui, sans-serif; font-weight: 700; }
.tile .tfoot, .tile .tnote { color: var(--muted); }

/* ---------- officina (quiosque) ---------- */
body.kiosk { background: #eef2f7; }
.khead {
  background: #ffffff;
  border-bottom: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.khead h1 { color: var(--ink); }
.kbrand { color: var(--ink); } .kbrand b { color: var(--accent); }
.khead .btn.ghost { color: #475569; border-color: #d4dce6; }
.khead .btn.ghost:hover { background: #f1f5f9; }
.clock { font-family: var(--font-mono); color: var(--accent-d); }
.ktotals { color: #52637a; } .ktotals b { color: var(--ink); font-family: var(--font-mono); }

/* azulejos do quiosque: cartão claro + faixa de estado (vence as cores sólidas antigas) */
.ktile.crit, .ktile.warn, .ktile.check, .ktile.ok, .ktile.off, .ktile.drv,
.ktile.fuel, .ktile.fuel.crit, .ktile.fuel.warn, .ktile.fuel.ok, .ktile.fuel.off {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.ktile.crit, .ktile.fuel.crit { border-left: 6px solid var(--crit); background: linear-gradient(90deg, #fdf3f3, #ffffff 40%); }
.ktile.warn, .ktile.fuel.warn { border-left: 6px solid var(--warn); background: linear-gradient(90deg, #fdf6ef, #ffffff 40%); }
.ktile.check { border-left: 6px solid #eab308; background: linear-gradient(90deg, #fdf9ea, #ffffff 40%); }
.ktile.ok, .ktile.fuel.ok { border-left: 6px solid var(--ok); }
.ktile.off, .ktile.fuel.off { border-left: 6px solid var(--off); opacity: .85; }
.ktile.drv { border-left: 6px solid var(--drv); background: linear-gradient(90deg, #f7f4fe, #ffffff 40%); }
.ktile.fuel { border-left: 6px solid #ec4899; background: linear-gradient(90deg, #fdf2f8, #ffffff 40%); }
.kgrid .ktile .kplate { color: var(--ink); }
.kgrid .ktile .kcode { color: var(--muted); opacity: 1; }
.kgrid .ktile .kprob, .ktile.ok .kprob .ok-line { color: #3c4d66; }
.kgrid .ktile .kinfo, .ktile.ok .kinfo { color: #8ba0b8; opacity: 1; }
.kgrid .ktile .pill, .ktile.crit .pill, .ktile.warn .pill, .ktile.check .pill,
.ktile.ok .pill, .ktile.off .pill, .ktile.drv .pill, .ktile.fuel .pill {
  background: #ffffff; box-shadow: none; color: #55667e; border: 1px solid #d4dce6;
}
.ktile.crit .pill { color: var(--crit); border-color: #f3bcbc; background: #fdeaea; }
.ktile.warn .pill { color: var(--warn); border-color: #f6d3b8; background: #fdf0e7; }
.ktile.check .pill { color: var(--check); border-color: #efe3a6; background: #fdf8e3; }
.ktile.ok .pill, .kgrid .ktile.ok .pill { color: var(--ok); border-color: #bbe5c9; background: #e8f7ee; }
.ktile.drv .pill { color: var(--drv); border-color: #d9caf7; background: #f1ecfd; }
.ktile.fuel .pill { color: #db2777; border-color: #f4c6e0; background: #fceaf4; }
.ktile { border-radius: 14px; box-shadow: var(--shadow-sm); }
.ktile:hover { box-shadow: var(--shadow-md); }
.kplate { font-family: "Exo 2", system-ui, sans-serif; font-weight: 700; letter-spacing: .8px; }
.kprob .kl.warn, .ktile.crit .kl.warn, .ktile.check .kl.warn { background: #fdf0e7; color: var(--warn); }
.kprob .kl.check, .ktile.crit .kl.check, .ktile.warn .kl.check { background: #fdf8e3; color: var(--check); }
.kprob .kl.drv, .ktile .kl.drv { background: #f1ecfd; color: var(--drv); }

.kstrip > div {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.kstrip span { color: var(--muted); }
.kstrip b { font-family: var(--font-mono); }
.abtn { border-radius: 12px; }
.abtn:hover { filter: brightness(1.04); }
.lockbox {
  background: #fdf6ef; border: 1px dashed #f0c9a8;
  border-left: 4px solid var(--warn); border-radius: 12px; color: var(--ink);
}
.erow { border-bottom-color: var(--line); }
dialog.kdlg {
  background: #ffffff;
  border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 24px 70px rgba(23, 35, 58, .25);
}
dialog.kdlg::backdrop { background: rgba(23, 35, 58, .35); }
.pick span { background: #ffffff; border-color: #d4dce6; color: #475569; border-radius: 9px; }
.pick input:checked + span { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.signbox { background: var(--surface-2); border-color: var(--line); }
.signbox label { color: var(--muted); }
.field input.pwshort, .signbox input.pwshort { border-color: #d4dce6; }
.field input.pwshort::placeholder { color: #9aa8bc; }

/* ---------- relatórios, gráficos e misc ---------- */
.vb .vcol i { background: linear-gradient(180deg, #14b8a6, var(--accent-d)); border-radius: 5px 5px 0 0; }
.vb .vcol i.zero { background: #dbe4ee; }
.vb .vn { font-family: var(--font-mono); }
.vb .vl { color: var(--muted); }
.hb .hbar { background: #e8edf4; border-radius: 99px; }
.hb .hbar i { background: var(--accent); border-radius: 99px; }
.hb .hbar.warn i { background: var(--warn); }
.hb.nowork .hbar i { background: #c3cfdd; }
.hb.nowork .hl, .hb.nowork .hv { color: var(--muted); }
.chart svg { background: #ffffff; border: 1px solid var(--line); border-radius: 10px; }
.chart svg .grid { stroke: #e8edf4; }
.chart .lbl, .chart .ctime, .chart .caxis { color: var(--muted); }
.src { background: #eef2f7; color: #55667e; border-color: #d4dce6; }
.src.est { background: #fdf8e3; color: var(--check); border-color: #efe3a6; }
.pids { background: var(--surface-2); border: 1px solid var(--line); color: #55667e; border-radius: 9px; }
.logospec { background: var(--surface-2); border-color: var(--line); color: #55667e; }
.bkstatus { background: var(--surface-2); border-color: var(--line); }
.bkerr { color: var(--crit); }
.devbox { background: var(--accent-soft); border-color: rgba(14, 165, 160, .35); border-radius: 12px; }
.devcode { background: #ffffff; border-color: #d4dce6; color: var(--accent-d); }
.score.good { background: #e8f7ee; color: var(--ok); box-shadow: inset 0 0 0 1px #bbe5c9; }
.score.mid { background: #fdf8e3; color: var(--check); box-shadow: inset 0 0 0 1px #efe3a6; }
.score.bad { background: #fdeaea; color: var(--crit); box-shadow: inset 0 0 0 1px #f3bcbc; }
.barpill { background: #e8f7ee; color: var(--ok); }
.barpill.tb-warn { background: #fdf0e7; color: var(--warn); }
.barpill.tb-crit { background: #fdeaea; color: var(--crit); }
.tpmsw { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.livedot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.livedot.off { background: var(--off); box-shadow: none; }
.readok { color: var(--ok); }
.oilneg { color: var(--crit); }
.newdrv-plus { background: var(--accent); color: #ffffff; }
a.newdrv:hover .newdrv-plus { background: var(--accent-d); }
.grp-adblue { color: #2563eb; } .grp-fuel { color: #a16207; }
.cluster { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.telltales { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.opid { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.opid b { color: var(--ink); }
.dash3wrap { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.dtcrep-h { color: #52637a; }
.prio select { background: #ffffff; border-color: #d4dce6; color: var(--ink); }

/* diagrama de pneus/freios: desenho claro */
.tydiag .tybody { fill: #eef2f7; stroke: #b9c6d5; }
.tydiag .tycab { fill: #e2e9f1; }
.tydiag .tytxt { fill: #8ba0b8; }
.tydiag .tytxt.big { fill: #55667e; }
.tydiag .tyre.ty-na .tybase { fill: #f1f5f9; stroke: #f1f5f9; }
.tydiag .tyre.ty-na .tytread { stroke: #d4dce6; }
.tydiag .vb-body { stroke: #a7b4c6; }
.tydiag .vb-plate { fill: #17233a; }

/* ---------- app do motorista (mobile, claro) ---------- */
body.drvapp { background: linear-gradient(180deg, #eef4f6, #e9eef4); color: var(--ink); }
body.drvapp .card { background: #ffffff; border: 1px solid var(--line); color: var(--ink); border-radius: 18px; box-shadow: var(--shadow-sm); }
body.drvapp h1 { color: var(--ink); }
body.drvapp .top .plate {
  background: var(--accent-soft); color: var(--accent-d); border: 1px solid rgba(14, 165, 160, .35);
  font-family: var(--font-mono);
}
body.drvapp .top { color: var(--ink); }
body.drvapp .top .who { color: #52637a; opacity: 1; }
body.drvapp .lg { color: var(--ink); } body.drvapp .lg b { color: var(--accent); }
body.drvapp .lbl { color: #52637a; }
body.drvapp .disp {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--accent-d);
  font-family: var(--font-mono);
}
body.drvapp .keys button { background: #ffffff; border: 1px solid #d4dce6; color: var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm); }
body.drvapp .keys button:active { background: #eef2f7; }
body.drvapp .big { background: var(--accent); color: #ffffff; box-shadow: 0 6px 16px rgba(14, 165, 160, .3); border-radius: 14px; }
body.drvapp .big:active { filter: brightness(.96); }
body.drvapp .big.grey { background: #ffffff; color: #475569; border: 1px solid #d4dce6; box-shadow: var(--shadow-sm); }
body.drvapp .big.off { background: #eef2f7; color: #a7b4c6; box-shadow: none; }
body.drvapp .big.sel { outline: 4px solid rgba(14, 165, 160, .35); }
body.drvapp .out { background: #ffffff; border-color: #d4dce6; color: #475569; box-shadow: var(--shadow-sm); }
body.drvapp .big.ico svg { width: 26px; height: 26px; flex: none; }
/* variantes de cor dos botões grandes do motorista */
body.drvapp .big.blue { background: #2563eb; color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
body.drvapp .big.amber { background: #d97706; color: #fff; box-shadow: 0 6px 16px rgba(217, 119, 6, .3); }
body.drvapp .big.purple { background: #7c3aed; color: #fff; box-shadow: 0 6px 16px rgba(124, 58, 237, .3); }
body.drvapp .big.red { background: #dc2626; color: #fff; box-shadow: 0 6px 16px rgba(220, 38, 38, .3); }
body.drvapp .big.slate { background: #ffffff; color: #475569; border: 1px solid #d4dce6; box-shadow: var(--shadow-sm); }
body.drvapp input[type=password], body.drvapp input[type=text], body.drvapp input[type=tel] {
  background: #ffffff; border-color: #d4dce6; color: var(--ink); font-family: var(--font-mono); letter-spacing: .2em;
}
body.drvapp .flash.ok { background: #e8f7ee; color: var(--ok); }
body.drvapp .flash.err { background: #fdeaea; color: var(--crit); }
body.drvapp .flash.warn { background: #fdf0e7; color: var(--warn); }

/* ---------- impressão ---------- */
@media print {
  body { background: #fff !important; color: #0f1b2d !important; }
  .card, .stat, .dsum, .dtile, .kstrip > div, .lockbox, .signbox, .devbox, .bkstatus,
  .logospec, .pids, .tpmsw, .vcard, .tile, .auth .box, .chart svg, .opid, .ktile {
    background: #fff !important; color: #0f1b2d !important;
    border-color: #d5dce6 !important; box-shadow: none !important;
  }
  h1, h2, h3, p, span, div, td, th, label, .muted, .hint, .dkm, .dkm b, .ddrv, .dplate, .kplate, .kprob, .kinfo, .vcard .why, .vcard .meta { color: #0f1b2d !important; text-shadow: none !important; }
  a { color: #0b8f7e !important; }
  input, select, textarea { background: #fff !important; color: #0f1b2d !important; border-color: #b8c2d0 !important; box-shadow: none !important; }
  .pill, .badge, .score, .typill, .barpill, .dnew { box-shadow: none !important; }
  .bar i, .oilbar i, .hb .hbar i, .vb .vcol i { box-shadow: none !important; }
  .dot, .tl i, .livedot { box-shadow: none !important; }
}

/* ---------- acessibilidade: sem animações ---------- */
@media (prefers-reduced-motion: reduce) {
  .dot, .livedot, .tl .on { animation: none !important; }
  .btn { transition: none; }
}

/* ---------- seletor de tema (menu lateral) ---------- */
.themesw { display: flex; align-items: center; gap: 6px; padding: 8px 4px 10px; border-top: 1px solid var(--line); }
.themesw button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: #ffffff; border: 1px solid var(--line); color: #64748b;
  border-radius: 8px; padding: 5px 4px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.themesw button:hover { background: #f1f5f9; color: var(--ink); }
.themesw button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-d); }
.themesw button svg { width: 13px; height: 13px; display: block; flex: none; }

/* ---------- escolha de tema do motorista (primeiro acesso) ---------- */
body.drvapp .thpick { background: #ffffff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 22px 18px; margin-bottom: 14px; text-align: center; }
body.drvapp .thpick h2 { font-size: 1.25rem; margin: 0 0 6px; color: var(--ink); }
body.drvapp .thpick p { color: #52637a; margin: 0 0 16px; font-size: .95rem; }
body.drvapp .thbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.drvapp .thbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 64px; border: 2px solid #d4dce6; border-radius: 14px;
  background: #ffffff; color: #475569; font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
body.drvapp .thbtn svg { width: 22px; height: 22px; }
body.drvapp .thbtn.sel { background: var(--accent); border-color: var(--accent); color: #ffffff; }
body.drvapp .thlink { background: none; border: 0; color: #8ba0b8; font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline; padding: 4px; }