/* Diário de Bordo: letra grande, botões grandes, tela inteira aproveitada. Verde de placa de rodovia. */
[hidden]{display:none!important}
:root{
  --bg:#eef2ef; --surface:#ffffff; --surface-2:#f4f7f5; --line:#d5ddd8;
  --fg:#16211b; --muted:#56665d;
  --accent:#0d5c3a; --accent-fg:#ffffff; --accent-soft:#dcebe2;
  --good:#1a7a43; --warn:#a05f00; --warn-soft:#fdf0d9; --bad:#b3261e; --bad-soft:#fbe3e1;
  --placa:#1f4fa8; --logo-fundo:transparent; --logo-pad:0;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:10px; --topo:60px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1512; --surface:#18201c; --surface-2:#1e2823; --line:#2c3832; --fg:#e7eee9; --muted:#9aaba1;
  --accent:#3fae73; --accent-fg:#06140c; --accent-soft:#1f3a2b; --good:#5ccf8c; --warn:#f0b04a; --warn-soft:#3a2d14; --bad:#ff7b72; --bad-soft:#3d1c1a;
  --placa:#6f9bf0; --logo-fundo:#e4e8e5; --logo-pad:3px 6px; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1512; --surface:#18201c; --surface-2:#1e2823; --line:#2c3832; --fg:#e7eee9; --muted:#9aaba1;
  --accent:#3fae73; --accent-fg:#06140c; --accent-soft:#1f3a2b; --good:#5ccf8c; --warn:#f0b04a; --warn-soft:#3a2d14; --bad:#ff7b72; --bad-soft:#3d1c1a;
  --placa:#6f9bf0; --logo-fundo:#e4e8e5; --logo-pad:3px 6px; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.45 var(--body);-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--surface);z-index:40}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.01em;margin:0;text-wrap:balance}
h3{font-size:21px}
a{color:inherit}
.num,.nr,td{font-variant-numeric:tabular-nums}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- topo fixo ---------- */
#topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:12px;min-height:var(--topo);background:var(--surface);border-bottom:1px solid var(--line);
  padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#marca{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;text-decoration:none}
.logo-img{display:block;height:44px;width:auto;max-width:160px;object-fit:contain;background:var(--logo-fundo);padding:var(--logo-pad);border-radius:8px}
.logo-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--accent-fg)}
.marca-txt{min-width:0}
.marca-txt b{display:block;font-family:var(--display);font-size:22px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca-txt small{display:block;font-size:12px;color:var(--muted);white-space:nowrap}
#nav{display:flex;gap:2px;flex:1;min-width:0;justify-content:center}
#nav a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}
#nav a:hover{color:var(--fg);background:var(--surface-2)}
#nav a.on{color:var(--accent-fg);background:var(--accent)}
#nav .ct{display:none}
.topo-dir{display:flex;align-items:center;gap:8px;margin-left:auto}
.off{font-size:12px;font-weight:700;color:var(--warn);border:1px solid var(--warn);border-radius:99px;padding:2px 8px;white-space:nowrap}
.btn-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);cursor:pointer}

main{padding-block:16px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1800px;margin:0 auto}

/* celular: abas embaixo, topo enxuto */
@media (max-width:899px){
  #nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);gap:0;justify-content:stretch;
    padding:4px max(4px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
  #nav a{flex:1;flex-direction:column;gap:2px;padding:6px 0;font-size:11px;min-width:0}
  #nav a.on{background:var(--accent-soft);color:var(--accent)}
  #nav .lg{display:none} #nav .ct{display:block}
  main{padding-block:12px calc(90px + env(safe-area-inset-bottom,0px))}
  .marca-txt b{font-size:20px}
  .so-pc{display:none!important}
}
@media (min-width:900px){ .so-cel{display:none!important} }
@media (min-width:900px) and (max-width:1180px){ #nav .lg{display:none} #nav .ct{display:inline} #nav a{padding:9px 10px;gap:6px} }

/* ---------- blocos ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.top h1{font-size:32px;line-height:1.1}
.sub{color:var(--muted);font-size:14px}
.hint{font-size:13px;color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.entre{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
.btn{border-radius:var(--r);padding:10px 16px;font-weight:600;cursor:pointer;background:var(--surface-2);color:var(--fg);border:1px solid var(--line);min-height:44px;display:inline-flex;align-items:center;gap:6px;justify-content:center;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:14px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn .ic{width:18px;height:18px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
select{min-height:44px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:6px 10px}
.monthbar{display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1px}
.monthbar button{background:none;border:0;padding:8px 12px;cursor:pointer;font-size:18px;color:var(--fg);border-radius:8px;min-height:40px}
.monthbar span{min-width:128px;text-align:center;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;min-width:0;text-decoration:none;color:inherit}
.kpi .l{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.kpi .v{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.hl{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.kpi.hl .l{color:inherit;opacity:.85}
.aviso{color:var(--warn)}
.sec{margin:6px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sec h2{font-size:23px}
.duas{display:grid;gap:16px;align-items:start}
@media (min-width:1100px){.duas{grid-template-columns:minmax(0,1fr) 380px}}
.duas>*{min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.card.compacto{padding:4px 14px}
.mini{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.mini:last-child{border-bottom:0}
.grid2{display:grid;gap:12px}
@media (min-width:700px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Ajustes: cartões em colunas que se encaixam (sem buraco), para caber na tela sem rolar */
.grid3{columns:300px;column-gap:12px}
.grid3>.card{break-inside:avoid;margin:0 0 12px}
.grid3 .f:has(.check){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
.grid3 .f:has(.check)>label:first-child{grid-column:1/-1}
.grid3 .check{min-height:36px}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.plate{display:inline-block;font-family:var(--display);font-weight:700;letter-spacing:.08em;border:2px solid var(--fg);border-top-width:6px;border-top-color:var(--placa);border-radius:4px;padding:0 6px;font-size:14px;line-height:1.3;background:var(--surface)}
.kmbox{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;background:var(--surface-2);border-radius:8px;padding:6px 10px;font-size:14px}
.odo{font-family:var(--display);font-size:26px;font-weight:700}
.lines{display:grid;gap:4px;margin-top:10px;font-size:15px}
.lines div{display:flex;justify-content:space-between;gap:8px}
.lines div span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.lines .tot{border-top:1px solid var(--line);padding-top:6px;margin-top:4px;font-size:17px}
.pos{color:var(--good)} .neg{color:var(--bad)}
.list{display:grid;gap:8px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;cursor:pointer;text-align:left;width:100%;color:inherit}
.item:hover{border-color:var(--accent)}
.item .t{font-weight:700;font-size:17px;overflow-wrap:anywhere}
.item .m{color:var(--muted);font-size:14px}
.item .r{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.pill.ok{background:var(--accent-soft);color:var(--good)}
.pill.wait{background:var(--warn-soft);color:var(--warn)}
.pill.late{background:var(--bad-soft);color:var(--bad)}
.clipe{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:700;color:var(--muted);vertical-align:middle}
.clipe .ic{width:16px;height:16px}
.alert{display:block;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);text-decoration:none}
.alert.w{border-color:var(--warn);background:var(--warn-soft)}
.alert.b{border-color:var(--bad);background:var(--bad-soft)}
.alert b{display:block}
.banner{background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--r);padding:8px 12px;margin-bottom:14px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:15px}
.empty{color:var(--muted);text-align:center;padding:28px 12px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}
.bar{height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--good)}
.bar i.w{background:var(--warn)} .bar i.b{background:var(--bad)}
.logo-prev{max-height:64px;max-width:200px;background:var(--logo-fundo);padding:var(--logo-pad);border-radius:8px}

/* ---------- tabelas (computador) ---------- */
.tabela{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0;white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
.nr{text-align:right;white-space:nowrap}

/* ---------- janela de formulário ---------- */
dialog{border:0;padding:0;border-radius:14px;background:var(--bg);color:var(--fg);width:min(640px,100vw);max-height:92vh;max-width:100vw}
dialog.largo{width:min(1100px,96vw)}
dialog::backdrop{background:rgba(0,0,0,.5)}
@media (max-width:640px){dialog,dialog.largo{margin:auto 0 0;width:100vw;border-radius:14px 14px 0 0;max-height:94vh}}
.dlg-h{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 16px;gap:8px}
.dlg-h h2{font-size:24px}
.dlg-b{padding:14px 16px;display:grid;gap:12px}
.dlg-f{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}
.form2{display:grid;gap:12px}
@media (min-width:900px){.form2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.f{display:grid;gap:4px;min-width:0}
.f label{font-size:13px;font-weight:600;color:var(--muted)}
.f input,.f select,.f textarea{width:100%;min-height:46px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:8px 12px;font-size:17px}
.f textarea{min-height:70px}
.f input{min-width:0}
@media (max-width:400px){.fr{gap:8px}.f input[type=date]{padding:8px 6px;font-size:15px}}
.fr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 12px;margin:0;display:grid;gap:10px;background:var(--surface);min-width:0}
legend{font-family:var(--display);font-weight:700;font-size:18px;padding:0 6px}
.cost{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) 40px;gap:6px;align-items:end}
.cost .x{min-height:46px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r);cursor:pointer;font-size:18px}
.check{display:flex;gap:8px;align-items:center;font-weight:600;min-height:44px}
.check input{width:22px;height:22px}
.f .check input{min-height:0;width:22px;height:22px;padding:0}
.summary{background:var(--accent-soft);border-radius:var(--r);padding:12px}

/* ---------- anexos ---------- */
.anexos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.anexo{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);overflow:hidden}
.anexo a{display:block;text-decoration:none;color:inherit}
.anexo img,.anexo .pdf{display:grid;place-items:center;width:100%;height:84px;object-fit:cover;background:var(--bg)}
.anexo .pdf{font-family:var(--display);font-weight:700;font-size:22px;color:var(--bad)}
.anexo small{display:block;padding:4px 6px;font-size:11px;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anexo .x{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:99px;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.anexar{align-self:start;justify-self:start}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:600;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ajustes finos */
@media (max-width:599px){.kpi{padding:10px 12px}.kpi .v{font-size:22px}.top h1{font-size:28px}}
td:nth-child(2){white-space:nowrap}

/* celular: Ajustes vai para o topo (engrenagem) e libera uma aba embaixo */
.ajustes-cel{display:none}
@media (max-width:899px){.ajustes-cel{display:grid}#nav a[href="#ajustes"]{display:none}}

/* abas: no celular só as principais + "Mais"; no computador todas (rola de lado se faltar espaço) */
@media (max-width:899px){#nav a:not(.cel){display:none}}
@media (min-width:900px){#nav .so-cel-nav{display:none}#nav{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}}
@media (min-width:900px) and (max-width:1599px){#nav .lg{display:none}#nav .ct{display:inline}#nav a{padding:9px 9px;gap:5px}}
.mais-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.mais-bt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--fg);text-decoration:none;font-weight:700;cursor:pointer;font-size:15px}
.mais-bt .ic{width:28px;height:28px;color:var(--accent)}
tfoot td{border-top:2px solid var(--line);background:var(--surface-2)}

/* relatório e impressão (Imprimir / salvar em PDF) */
.rel-cab{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.rel-cab h2{font-size:26px}
@media print{
  @page{margin:12mm}
  :root{--bg:#fff;--surface:#fff;--surface-2:#f2f2f2;--line:#bbb;--fg:#000;--muted:#444}
  body{background:#fff;font-size:11px}
  #topo,#nav,.no-print,.banner,.toast,dialog,body::before{display:none!important}
  main{padding:0;max-width:none}
  .tabela{overflow:visible;border:0}
  table{font-size:10px}
  th,td{padding:4px 6px}
  th{position:static}
  .so-pc{display:block!important}
}

/* ---------- conta e sincronização ---------- */
.sync{font-size:12px;font-weight:700;border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:2px 8px;white-space:nowrap}
.sync.ok{color:var(--good);border-color:var(--good)}.sync.warn{color:var(--warn);border-color:var(--warn)}.sync.bad{color:var(--bad);border-color:var(--bad)}
.sem-login #nav,.sem-login .btn-ajuda,.sem-login .ajustes-cel{display:none!important}
.login-box{max-width:420px;margin:6vh auto 0}
.login-box .card{gap:10px}.login-box h2{font-size:28px}
.erro-login{color:var(--bad);font-weight:600;min-height:1.2em}
@media (max-width:600px){.sync{font-size:11px;padding:2px 6px}}
.olho-box{position:relative;display:block}
.olho-box input{padding-right:52px!important}
.olho{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;height:40px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px}
.olho:hover,.olho:focus-visible{color:var(--fg);background:var(--surface-2)}