:root{
  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg:#F3F6FA;
  --surface:#FFFFFF;
  --surface-2:#EAEEF4;
  --border:#D9E0E9;
  --text:#111A2B;
  --text-2:#57667A;
  --brand-deep:#1F4781;
  --brand-deep-hover:#173962;
  --brand-light:#0095DA;
  --brand-light-soft:#E3F4FC;
  --ok:#1E8A5F;
  --ok-soft:#E4F5EC;
  --warn:#C77F1A;
  --warn-soft:#FCF0DC;
  --danger:#C0392B;
  --danger-soft:#FBE9E7;
  --chart-1:#2A78D6;
  --chart-2:#EB6834;
  --chart-3:#1BAF7A;
  --shadow: 0 1px 2px rgba(17,26,43,.06), 0 4px 14px rgba(17,26,43,.07);
  --radius: 14px;
  --radius-sm: 9px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A101C; --surface:#111A2B; --surface-2:#182338; --border:#25324A;
    --text:#E7EDF6; --text-2:#93A2B8;
    --brand-deep:#4C7BC2; --brand-deep-hover:#5E8DD3;
    --brand-light:#26AEEF; --brand-light-soft:rgba(38,174,239,.14);
    --ok:#3FBF8B; --ok-soft:rgba(63,191,139,.14);
    --warn:#E3A23C; --warn-soft:rgba(227,162,60,.14);
    --danger:#E5695C; --danger-soft:rgba(229,105,92,.14);
    --chart-1:#3987E5; --chart-2:#D95926; --chart-3:#199E70;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-ui);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0}
button{font-family:inherit}
input,select,textarea{font-family:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand-light); outline-offset:2px}
[hidden]{display:none !important}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* Header */
.topbar{
  background:var(--brand-deep); color:#fff; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  position:sticky; top:0; z-index:20; box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:10px; white-space:nowrap}
.brand-logo{height:34px; width:auto; display:block; flex-shrink:0}
.brand-text strong{display:block; font-size:16px; font-weight:700; letter-spacing:.3px}
.brand-text span{display:block; font-size:11.5px; opacity:.75; margin-top:1px}
.topnav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:8px}
.nav-btn{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#fff;
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.nav-btn:hover{background:rgba(255,255,255,.22)}
.nav-btn.is-active{background:#fff; color:var(--brand-deep); border-color:#fff}
.user-pill{font-size:12.5px; opacity:.85; white-space:nowrap}
.link-btn{background:none;border:none;color:rgba(255,255,255,.85);font-size:12.5px;text-decoration:underline;cursor:pointer;padding:6px;white-space:nowrap}
.hamburger-btn{
  display:none; align-items:center; justify-content:center; flex-shrink:0;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#fff;
  width:34px; height:34px; border-radius:9px; font-size:16px; cursor:pointer;
}
.hamburger-btn:hover{background:rgba(255,255,255,.22)}

/* Barra inferior mobile da expedição/supervisão/gerência (atalhos de checklist) */
nav.staff-bottom-nav{display:none}

@media (max-width:480px){
  .topbar{padding:12px 14px}
  .brand-text span{display:none}
  .topnav{width:100%; justify-content:flex-start}
  .nav-btn{padding:7px 11px; font-size:12.5px}
}

/* Layout */
#app{max-width:2200px; margin:0 auto; padding:20px 16px 60px}
#app.is-form{max-width:520px}
.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; margin-bottom:14px; box-shadow:var(--shadow);
}
.card-title{
  font-size:12px; font-weight:700; color:var(--text-2); text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:12px;
}
.screen{display:none}
.screen.is-active{display:block}

label{display:block; font-size:12.5px; font-weight:600; color:var(--text-2); margin-bottom:5px}
.field{margin-bottom:13px}
input[type=text],input[type=password],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:14.5px; color:var(--text); background:var(--surface); appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-light)}
textarea{resize:vertical; min-height:64px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
small.hint{font-size:12px; color:var(--text-2); display:block; margin:-4px 0 12px}

.steps{display:flex; gap:0; margin-bottom:18px}
.step-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; color:var(--text-2); font-size:11px; font-weight:600;
}
.step-dot{
  width:26px; height:26px; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  background:var(--surface); color:var(--text-2);
}
.step-btn.is-active .step-dot{background:var(--brand-light); border-color:var(--brand-light); color:#fff}
.step-btn.is-active{color:var(--text)}
.step-btn.is-done .step-dot{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}

.sec-label{
  display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  border-radius:0 9px 9px 0; padding:9px 13px; margin-bottom:14px;
}
.sec-entrega{background:var(--brand-light-soft); border-left:4px solid var(--brand-light); color:var(--brand-deep)}

.parada{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden}
.parada-header{padding:12px 14px; display:flex; align-items:center; gap:10px; cursor:pointer}
.parada-num{
  background:var(--brand-deep); color:#fff; border-radius:50%; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; flex-shrink:0;
}
.parada-info{flex:1; min-width:0}
.parada-cliente{font-size:14.5px; font-weight:600}
.parada-nf{font-size:11.5px; color:var(--text-2); margin-top:1px}
.parada-body{padding:0 14px 14px; border-top:1px solid var(--surface-2)}
.parada.is-collapsed .parada-body{display:none}
.parada.is-collapsed .chevron{transform:rotate(-90deg)}
.chevron{transition:transform .15s; color:var(--text-2); flex-shrink:0}
.remove-btn{background:none; border:none; color:var(--danger); font-size:18px; cursor:pointer; padding:2px 4px; line-height:1}

.row-item{display:grid; grid-template-columns:1fr 74px 32px; gap:8px; align-items:center; margin-bottom:8px}
.row-item.recolha-row{grid-template-columns:1fr 70px 120px 32px}
.row-item.nf-row{grid-template-columns:1fr 32px}
.row-item select,.row-item input{font-size:13.5px; min-width:0}
.row-item > *{min-width:0}
.row-add{
  display:flex; align-items:center; gap:6px; background:none; border:1.5px dashed var(--border);
  border-radius:var(--radius-sm); padding:9px 12px; width:100%; color:var(--text-2); font-size:13px;
  cursor:pointer; margin-top:4px;
}
.row-add:hover{border-color:var(--brand-light); color:var(--brand-light)}
.row-del{background:none; border:none; color:var(--text-2); font-size:18px; cursor:pointer; line-height:1}
.row-del:hover{color:var(--danger)}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chip{
  padding:6px 12px; border-radius:999px; font-size:12.5px; border:1.5px solid var(--border);
  background:var(--surface); cursor:pointer; color:var(--text-2);
}
.chip.is-ok{background:var(--ok-soft); border-color:var(--ok); color:var(--ok); font-weight:600}
.chip.is-warn{background:var(--warn-soft); border-color:var(--warn); color:var(--warn); font-weight:600}
.chip.is-bad{background:var(--danger-soft); border-color:var(--danger); color:var(--danger); font-weight:600}

/* ── Checklists de conferência/expedição: seleção em cartão + matriz Sim/Não ── */
.radio-card{
  display:flex; align-items:center; gap:12px; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px; cursor:pointer;
}
.radio-card:hover{border-color:var(--brand-light)}
.radio-card.is-sel{border-color:var(--brand-deep); background:var(--brand-light-soft)}
.radio-dot{width:20px; height:20px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; position:relative}
.radio-card.is-sel .radio-dot{border-color:var(--brand-deep)}
.radio-card.is-sel .radio-dot::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--brand-deep)}
.radio-label{font-size:14.5px; font-weight:600}
.matrix-row{padding:10px 0; border-bottom:1px solid var(--surface-2)}
.matrix-row:last-child{border-bottom:none}
.matrix-label{font-size:13.5px; margin-bottom:7px}
.badge-branch{background:var(--brand-light-soft); color:var(--brand-deep); font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:8px; display:inline-block; margin-bottom:12px}
.req{color:var(--danger)}
.termo-texto{font-size:12px; color:var(--text-2); background:var(--surface-2); border-radius:var(--radius-sm); padding:13px; margin:12px 0; line-height:1.6; max-height:240px; overflow-y:auto}
.termo-texto b{color:var(--text)}
.row-add.is-done{border-color:var(--ok); color:var(--ok)}

.add-parada{
  display:flex; align-items:center; justify-content:center; gap:8px; background:none;
  border:2px dashed var(--brand-light); border-radius:var(--radius); padding:13px; width:100%;
  color:var(--brand-light); font-size:14.5px; font-weight:600; cursor:pointer; margin-bottom:18px;
}
.add-parada:hover{background:var(--brand-light-soft)}

.btn{border:none; border-radius:11px; padding:13px; font-size:15px; font-weight:600; cursor:pointer}
.btn-primary{background:var(--brand-deep); color:#fff; width:100%}
.btn-primary:hover{background:var(--brand-deep-hover)}
.btn-primary:disabled{opacity:.6; cursor:wait}
.btn-secondary{background:var(--surface); color:var(--brand-deep); border:1.5px solid var(--brand-deep); width:100%}
.btn-secondary:hover{background:var(--brand-light-soft)}
.btn-danger{background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger)}
.btn-sm{padding:7px 12px; font-size:13px; border-radius:8px; width:auto}
.btn-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.banner{border-radius:var(--radius-sm); padding:11px 14px; font-size:13px; margin-bottom:14px; display:flex; gap:8px; align-items:flex-start}
.banner-success{background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok)}
.banner-error{background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger)}
.banner-info{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn)}

.confirm-row{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--surface-2); font-size:13.5px}
.confirm-row:last-child{border-bottom:none}
.confirm-label{color:var(--text-2); flex-shrink:0}
.confirm-val{font-weight:600; text-align:right}
.confirm-val small{display:block; font-weight:400; color:var(--text-2); margin-top:2px}

/* Painel */
.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.panel-head h1{font-size:20px; font-weight:700}
.panel-head p{color:var(--text-2); font-size:13px; margin-top:2px}
.panel-head-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.kpi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px}
@media (min-width:640px){ .kpi-grid{grid-template-columns:repeat(4,1fr)} }
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); min-width:0}
.kpi-label{font-size:11.5px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px}
.kpi-value{font-family:var(--font-mono); font-size:26px; font-weight:600; margin-top:4px}
.kpi-value.is-danger{color:var(--danger)}

/* Dashboard de indicadores */
.indic-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-bottom:14px}
.indic-donut-wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.indic-donut-center{font-family:var(--font-mono); font-size:20px; font-weight:700; fill:var(--text)}
.indic-legend{display:flex; flex-direction:column; gap:6px; font-size:12.5px}
.indic-legend-item{display:flex; align-items:center; gap:8px; color:var(--text-2)}
.indic-legend-dot{width:10px; height:10px; border-radius:3px; flex-shrink:0}
.indic-legend-val{font-family:var(--font-mono); font-weight:700; color:var(--text); margin-left:auto; padding-left:10px}
.indic-bar-row{display:grid; grid-template-columns:110px 1fr 44px; align-items:center; gap:10px; margin-bottom:8px; font-size:12.5px}
.indic-bar-row:last-child{margin-bottom:0}
.indic-bar-label{color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.indic-bar-track{background:var(--surface-2); border-radius:999px; height:10px; overflow:hidden}
.indic-bar-fill{height:100%; border-radius:999px}
.indic-bar-val{font-family:var(--font-mono); font-weight:700; text-align:right}
.indic-empty{color:var(--text-2); font-size:13px; padding:8px 0}
.indic-subnote{font-size:11.5px; color:var(--text-2); margin-top:8px}

.tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap}
.tab-btn{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--text-2); cursor:pointer}
.tab-btn.is-active{background:var(--brand-deep); color:#fff; border-color:var(--brand-deep)}
.tab-badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:999px; background:var(--surface-2); color:var(--text-2); font-size:11px; font-weight:700}
.tab-btn.is-active .tab-badge{background:rgba(255,255,255,.25); color:#fff}
.tab-badge.is-danger{background:var(--danger); color:#fff}

.filters{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  box-shadow:var(--shadow);
}
.filters .field{margin-bottom:0; min-width:140px}
.filters .field.grow{flex:1; min-width:200px}

.table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.table-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:760px}
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-2);
  background:var(--surface-2); padding:10px 14px; position:sticky; top:0; font-weight:700;
}
tbody td{padding:11px 14px; border-top:1px solid var(--surface-2); font-size:13.5px; vertical-align:middle}
tbody tr.is-row:hover{background:var(--surface-2)}
tbody tr.is-row{cursor:pointer}
.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700}
.pill-novo{background:var(--brand-light-soft); color:var(--brand-deep)}
.pill-revisado{background:var(--ok-soft); color:var(--ok)}
.pill-motorista{background:var(--surface-2); color:var(--text-2)}
.pill-expedicao{background:var(--brand-light-soft); color:var(--brand-deep)}
.pill-supervisao{background:var(--ok-soft); color:var(--ok)}
.pill-gerencia{background:var(--warn-soft); color:var(--warn)}
.pill-inactive{background:var(--danger-soft); color:var(--danger)}
.pill-campo{background:var(--brand-light-soft); color:var(--brand-deep)}
.pill-atencao{background:var(--warn-soft); color:var(--warn)}
.pill-atrasado{background:var(--danger-soft); color:var(--danger)}
.tag-ocorrencia{background:var(--danger-soft); color:var(--danger); font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; margin-left:6px}
.tag-ok{background:var(--ok-soft); color:var(--ok); font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; margin-left:6px}
.tag-bad{background:var(--danger-soft); color:var(--danger); font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; margin-left:6px}
.empty-state{padding:48px 20px; text-align:center; color:var(--text-2)}
.empty-state strong{display:block; color:var(--text); font-size:15px; margin-bottom:4px}

.detail-cell{background:var(--surface-2)}
.detail-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:18px; padding:16px 4px}
@media (max-width:760px){ .detail-grid{grid-template-columns:1fr} }
.detail-block h3{font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-2); margin-bottom:8px}
.mini-parada{background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:10px 12px; margin-bottom:8px; font-size:13px}
.mini-parada .mp-head{display:flex; justify-content:space-between; font-weight:600; margin-bottom:3px}
.mini-parada small{color:var(--text-2); display:block; margin-top:2px}
.edit-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

.login-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; width:100%; max-width:360px; box-shadow:var(--shadow)}
.login-card .brand{justify-content:center; margin-bottom:18px}

.settings-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.list-manager ul{list-style:none; margin:0; padding:0}
.list-manager li{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--surface-2); font-size:13.5px}
.list-manager li span{flex:1}
.list-manager li.is-inactive span{color:var(--text-2); text-decoration:line-through}
.list-manager-actions{display:flex; gap:6px; flex-shrink:0}
.inline-add{display:flex; gap:8px; margin-top:10px}
.inline-add input{flex:1}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:60; max-width:min(90vw,420px)}

/* ── Dashboard unificado (sidebar + conteúdo) ───────────────────────────── */
.dash-layout{display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start}
.dash-sidebar{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 0; box-shadow:var(--shadow); position:sticky; top:78px; min-width:0}
.dash-sidebar-section{padding:0 14px; margin-bottom:20px}
.dash-sidebar-section:last-child{margin-bottom:0}
.dash-sidebar-title{font-size:10.5px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; padding:0 4px}
.dash-nav-item{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none;
  padding:9px 10px; border-radius:9px; cursor:pointer; color:var(--text-2); font-size:13px; font-weight:600;
}
.dash-nav-item:hover{background:var(--surface-2); color:var(--text)}
.dash-nav-item.is-active{background:var(--brand-light-soft); color:var(--brand-deep)}
.dash-nav-badge{margin-left:auto; background:var(--surface-2); color:var(--text-2); font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px}
.dash-nav-item.is-active .dash-nav-badge{background:var(--brand-deep); color:#fff}
.dash-nav-badge.is-danger{background:var(--danger); color:#fff}

.dash-rota-mini{padding:9px 10px; border-radius:9px; border:1px solid var(--border); margin-bottom:6px; font-size:12px}
.dash-rota-mini .drm-top{display:flex; justify-content:space-between; gap:6px; font-weight:600}
.dash-rota-mini small{color:var(--text-2); display:block; margin-top:2px}

.dash-main{min-width:0}

@media (max-width:900px){
  .dash-layout{grid-template-columns:1fr}
  .dash-sidebar{position:static; padding:10px; display:none}
  .dash-sidebar-section{padding:0 6px}
  .dash-sidebar-section.is-rotas{display:none}
  .dash-sidebar-nav-row{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px}
  .dash-sidebar-nav-row .dash-nav-item{flex-shrink:0; width:auto; white-space:nowrap}

  /* Menu ☰: revela a navegação completa do painel (igual ao desktop) */
  .dash-sidebar.is-mobile-open{display:block; margin-bottom:14px}
  .dash-sidebar.is-mobile-open .dash-sidebar-section.is-rotas{display:block}
  .dash-sidebar.is-mobile-open .dash-sidebar-nav-row{flex-direction:column; overflow-x:visible}
  .dash-sidebar.is-mobile-open .dash-sidebar-nav-row .dash-nav-item{width:100%; white-space:normal}

  .hamburger-btn{display:inline-flex}
  nav.staff-bottom-nav{display:flex}
  #app.has-staff-bottom-nav{padding-bottom:78px}
}

/* Cards compactos de rotas pendentes de revisão (detalhe/edição via modal).
   Largura máxima igual à dos cards de indicador acima (kpi-grid) — com
   poucos cards na lista, eles não esticam para preencher a linha toda. */
.review-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,320px)); gap:10px; margin-bottom:20px}
.review-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:10px 12px; cursor:pointer; transition:box-shadow .15s, border-color .15s;
}
.review-card:hover{box-shadow:0 2px 10px rgba(17,26,43,.12); border-color:var(--brand-light)}
.review-card.has-obs{border-color:var(--warn)}
.review-card-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; flex-wrap:wrap}
.review-card-title{font-weight:700; font-size:13.5px}
.review-card-status{display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:flex-end}
.review-card-row{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; padding:4px 0; border-top:1px solid var(--surface-2)}
.review-card-row span:first-child{color:var(--text-2)}
.review-card-row span:last-child{font-weight:600; text-align:right}
.review-card-row.is-danger span:last-child{color:var(--danger)}
.tag-obs{background:var(--warn-soft); color:var(--warn); font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; margin-left:6px; cursor:help}
.review-nf-check{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:600}
.review-nf-check input{width:auto}

/* Toggle de status direto no card compacto (sem abrir o modal) */
.status-toggle{display:inline-flex; border-radius:999px; overflow:hidden; border:1px solid var(--border); cursor:default}
.status-toggle-btn{border:none; background:var(--surface); color:var(--text-2); font-size:11px; font-weight:700; padding:3px 9px; cursor:pointer; white-space:nowrap}
.status-toggle-btn + .status-toggle-btn{border-left:1px solid var(--border)}
.status-toggle-btn:hover:not(.is-active){background:var(--surface-2)}
.status-toggle-btn.is-active.is-novo{background:var(--brand-light-soft); color:var(--brand-deep)}
.status-toggle-btn.is-active.is-revisado{background:var(--ok-soft); color:var(--ok)}

/* Checkbox de NF entregue direto no card compacto (sem abrir o modal) */
.nf-check-chip{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  padding:3px 8px 3px 6px; border-radius:999px; margin-left:6px; cursor:pointer;
  background:var(--warn-soft); color:var(--warn);
}
.nf-check-chip.is-checked{background:var(--ok-soft); color:var(--ok)}
.nf-check-chip input{width:auto; margin:0; cursor:pointer}

/* Alertas */
.alert-list{display:flex; flex-direction:column; gap:8px}
.alert-item{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--danger);
  border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow);
}
.alert-item.is-warn{border-left-color:var(--warn)}
.alert-item-icon{font-size:17px; flex-shrink:0}
.alert-item-txt strong{font-size:13.5px; display:block}
.alert-item-txt p{font-size:12.5px; color:var(--text-2); margin-top:2px}
.alert-item-action{margin-left:auto; flex-shrink:0}

/* Modal de detalhes (histórico) */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,16,28,.55); display:flex; align-items:center;
  justify-content:center; z-index:50; padding:20px; overflow-y:auto;
}
.modal-box{background:var(--surface); border-radius:var(--radius); padding:20px; width:100%; max-width:640px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto}
.modal-box-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.modal-box-head h2{font-size:16px}
.modal-close{background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--text-2); padding:2px 6px}

/* Barra inferior de navegação (motorista, celular) */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -2px 10px rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px 8px;
  background:none; border:none; color:var(--text-2); font-size:11px; font-weight:600; cursor:pointer;
}
.bottom-nav-item.is-active{color:var(--brand-deep)}
.bottom-nav-icon{font-size:18px; line-height:1}
#app.has-bottom-nav{padding-bottom:78px}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }