/* ── THEME ── */
:root[data-theme="dark"] {
  --bg:#0f1117; --surface:#1a1d27; --surface2:#222637; --border:#2e3348;
  --text:#e2e8f0; --text2:#94a3b8; --shadow:rgba(0,0,0,.45);
  --chart-grid:#2e3348; --chart-tick:#64748b;
}
:root[data-theme="light"] {
  --bg:#f1f5f9; --surface:#ffffff; --surface2:#f8fafc; --border:#e2e8f0;
  --text:#1e293b; --text2:#64748b; --shadow:rgba(0,0,0,.1);
  --chart-grid:#e2e8f0; --chart-tick:#94a3b8;
}
:root {
  --accent:#00833D; --accent2:#14B866;
  --green:#22c55e; --yellow:#eab308; --red:#ef4444;
  --orange:#f97316; --blue:#3b82f6; --purple:#a855f7;
  --card-radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',Arial,sans-serif;font-size:14px;min-height:100vh;transition:background .3s,color .3s}

/* ── HEADER ── */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px var(--shadow)}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--purple));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.logo h1{font-size:19px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.logo span{font-size:11px;color:var(--text2)}
.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{padding:7px 14px;border-radius:8px;border:none;cursor:pointer;font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px;transition:all .2s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{background:var(--surface2)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{opacity:.85}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{opacity:.85}
#fileInput{display:none}

/* ── MULTI-SELECT STATUS ── */
.ms-wrap{position:relative}
.ms-btn{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:5px 28px 5px 9px;font-size:12px;cursor:pointer;min-width:130px;display:flex;align-items:center;gap:6px;user-select:none;white-space:nowrap;transition:border-color .2s}
.ms-btn:hover,.ms-btn.open{border-color:var(--accent)}
.ms-btn::after{content:'▾';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text2);pointer-events:none;transition:transform .2s}
.ms-btn.open::after{transform:translateY(-50%) rotate(180deg)}
.ms-count{background:var(--accent);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700}
.ms-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px var(--shadow);z-index:200;min-width:220px;overflow:hidden}
.ms-dropdown.open{display:block}
.ms-search{padding:8px;border-bottom:1px solid var(--border)}
.ms-search input{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 8px;font-size:11px;outline:none}
.ms-search input:focus{border-color:var(--accent)}
.ms-list{max-height:220px;overflow-y:auto;padding:4px}
.ms-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;transition:background .12s}
.ms-item:hover{background:var(--surface2)}
.ms-item input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.ms-item .ms-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ms-footer{padding:6px 8px;border-top:1px solid var(--border);display:flex;gap:6px}
.ms-footer button{flex:1;font-size:11px;padding:4px 8px;border-radius:6px;border:none;cursor:pointer;font-weight:600}
.ms-footer .ms-all{background:var(--surface2);color:var(--text)}
.ms-footer .ms-none{background:var(--surface2);color:var(--text2)}
.ms-footer .ms-all:hover{background:var(--accent);color:#fff}
.ms-footer .ms-none:hover{background:var(--border)}

/* THEME TOGGLE */
.theme-toggle{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px;display:flex;gap:2px}
.theme-toggle button{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:16px;font-size:14px;transition:background .2s}
.theme-toggle button.active{background:var(--accent)}

/* SOURCE BADGE */
#sourceBadge{font-size:11px;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;display:flex;align-items:center;gap:5px}
#sourceBadge .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes prazoPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,35,26,.0)}50%{box-shadow:0 0 0 3px rgba(242,35,26,.18)}}

/* ── FILTERS ── */
.filters-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filter-group{display:flex;align-items:center;gap:5px}
.filter-group label{font-size:11px;color:var(--text2);white-space:nowrap;font-weight:600}
select,input[type="date"]{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:5px 9px;font-size:12px;outline:none;cursor:pointer;transition:border-color .2s}
select:focus,input[type="date"]:focus{border-color:var(--accent)}
.filter-sep{width:1px;height:26px;background:var(--border)}
.filters-bar .btn{font-size:12px;padding:5px 11px}
#activeFilters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filter-chip{background:rgba(0,131,61,.18);color:var(--accent2);border-radius:20px;padding:2px 10px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px;cursor:pointer}
.filter-chip:hover{background:rgba(0,131,61,.3)}

/* ── MAIN ── */
main{padding:18px 24px}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);padding:16px 18px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer}
.kpi-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px var(--shadow);border-color:var(--kpi-color,var(--accent))}
.kpi-card .kpi-drill-hint{position:absolute;bottom:8px;right:10px;font-size:9px;color:var(--text2);opacity:0;transition:opacity .2s}
.kpi-card:hover .kpi-drill-hint{opacity:1}

/* ── DRILL-DOWN PANEL ── */
#drillPanel{position:fixed;top:0;right:-1000px;width:920px;max-width:94vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:300;display:flex;flex-direction:column;transition:right .35s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px var(--shadow)}
#drillPanel.open{right:0}
.drill-header{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
.drill-header-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.drill-header h2{font-size:15px;font-weight:800;color:var(--text);flex:1;line-height:1.2}
.drill-header .drill-total{font-size:22px;font-weight:800;color:var(--text);margin-left:auto}
.drill-header .drill-close{background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer;padding:4px;border-radius:6px;transition:background .15s}
.drill-header .drill-close:hover{background:var(--surface2);color:var(--text)}
.drill-body{flex:1;overflow-y:auto;overflow-x:auto;padding:16px}
/* 760 e não 640: com 640 a soma das colunas fixas não deixava largura para o
   nome do destinatário, que saía cortado. Painel estreito rola na horizontal
   (.drill-body já tem overflow-x:auto) — preferível a nome ilegível. */
.drill-table{min-width:760px}
.drill-section{margin-bottom:20px}
.drill-section h4{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.drill-chart-wrap{position:relative;height:180px}
.drill-table{width:100%;border-collapse:collapse;font-size:12px}
.drill-table{table-layout:fixed}
.drill-table th{color:var(--text2);font-size:10px;font-weight:700;text-transform:uppercase;padding:6px 10px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.drill-table td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text);word-break:break-word;vertical-align:top;font-size:12px}
.drill-table tr:hover td{background:var(--surface2)}
.drill-table .col-wb{width:136px}
.drill-table .col-dest{width:auto}      /* única coluna elástica: fica com toda a sobra */
.drill-table .col-city{width:104px}
.drill-table .col-date{width:88px}
.drill-table .col-prazo{width:72px;text-align:center}  /* chip "🔴 23/07" não cabe em 58px — saía "23/0" */
.drill-table .col-delay{width:56px;text-align:center}
.drill-table .col-sign{width:78px}
/* Prévia de Carga: colunas próprias. Valor usava col-delay (56px) e saía
   cortado ("R$ 89…"); Status não tinha largura e disputava com o nome. */
.drill-table .pc-status{width:132px}
.drill-table .pc-val{width:96px;text-align:right}   /* "R$ 1.234,56" precisa de ~90px */
/* Nome e endereço QUEBRAM em até 2 linhas em vez de cortar com "…". Endereço é
   texto longo e a coluna nunca vai caber numa linha só; cortar escondia o número
   da casa, que é justamente o que o operador precisa. */
.dest-nome{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* O endereço fica numa LINHA PRÓPRIA, colspan até o fim: não cabe em coluna
   nenhuma (8 colunas fixas já enchem o painel) e cortado com "…" escondia
   justamente o número da casa. Na linha própria tem a largura toda. */
.drill-table tr.row-top td{border-bottom:none;padding-bottom:2px}
.drill-table tr.row-end td{padding:0 10px 6px 10px;font-size:10px;line-height:1.3;color:var(--text2);overflow-wrap:anywhere}
/* Endereço à esquerda, motorista à direita, na mesma linha de apoio. O motorista
   não virou coluna porque a tabela já não tinha largura sobrando. */
.row-end .re-wrap{display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.row-end .re-end{color:var(--text2);text-decoration:none}
.row-end .re-end:hover{color:var(--accent2);text-decoration:underline}
.row-end .re-mot{white-space:nowrap;cursor:pointer;color:var(--accent2);font-weight:600}
.row-end .re-mot.sem{color:var(--text2);font-weight:400;font-style:italic}
.drill-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px}
.drill-bar-row .lbl{min-width:110px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.drill-bar-row .bar-track{flex:1;height:10px;background:var(--border);border-radius:5px;overflow:hidden}
.drill-bar-row .bar-fill{height:100%;border-radius:5px;transition:width .8s ease}
.drill-bar-row .cnt{min-width:32px;text-align:right;color:var(--text2);font-size:11px}
.drill-tabs{display:flex;gap:4px;margin-bottom:12px}
.drill-tab{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.drill-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#drillBackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:299;backdrop-filter:blur(2px)}
#drillBackdrop.open{display:block}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--kpi-color,var(--accent))}
.kpi-card::after{content:attr(data-icon);position:absolute;right:14px;bottom:10px;font-size:36px;opacity:.12}
.kpi-label{font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.kpi-value{font-size:26px;font-weight:800;color:var(--text);letter-spacing:-1px;line-height:1}
.kpi-sub{font-size:11px;margin-top:5px}
.kpi-sub.up{color:var(--green)} .kpi-sub.down{color:var(--red)} .kpi-sub.neutral{color:var(--text2)}
.kpi-bar{height:3px;background:var(--border);border-radius:2px;margin-top:8px;overflow:hidden}
.kpi-bar-fill{height:100%;border-radius:2px;background:var(--kpi-color,var(--accent));transition:width 1.2s cubic-bezier(.4,0,.2,1)}

/* ── CHARTS ── */
.charts-row{display:grid;gap:12px;margin-bottom:12px}
.row-2{grid-template-columns:1fr 1fr}
.row-3{grid-template-columns:2fr 1fr 1fr}
.row-2-1{grid-template-columns:2fr 1fr}
.row-3-eq{grid-template-columns:1fr 1fr 1fr}
.dash-tabs{display:flex;gap:6px;margin:4px 0 16px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:0}
.dash-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text2);font-size:13px;font-weight:600;padding:9px 16px;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}
.dash-tab:hover{color:var(--text)}
.dash-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeInPane .25s ease}
@keyframes fadeInPane{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);padding:16px;position:relative;overflow:hidden}
.chart-card.clickable-chart{cursor:pointer}
.chart-card.clickable-chart:hover .chart-hint{opacity:1}
.chart-hint{position:absolute;top:14px;right:14px;font-size:10px;color:var(--text2);opacity:0;transition:opacity .2s;background:var(--surface2);padding:2px 7px;border-radius:4px}
.chart-card h3{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text2);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.chart-card h3 .tag{font-size:10px;background:var(--surface2);color:var(--text2);border-radius:4px;padding:2px 6px;font-weight:500;border:1px solid var(--border)}
.active-filter-indicator{font-size:10px;background:rgba(0,131,61,.2);color:var(--accent2);border-radius:4px;padding:2px 6px;font-weight:600}
canvas{max-height:240px}

/* SLA METER */
.sla-meter{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sla-ring{position:relative;width:72px;height:72px;flex-shrink:0}
.sla-ring svg{transform:rotate(-90deg)}
.sla-ring .bg{fill:none;stroke:var(--border);stroke-width:7}
.sla-ring .fill{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.sla-ring .label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;font-weight:800;line-height:1}
.sla-ring .label span{font-size:9px;color:var(--text2);font-weight:500}
.sla-stats{flex:1;display:grid;gap:5px}
.sla-row{display:flex;justify-content:space-between;font-size:12px}
.sla-row .sla-k{color:var(--text2)}
.sla-row .sla-v{font-weight:700;color:var(--text)}

/* ── TABLE ── */
.table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);padding:16px;margin-bottom:12px}
.table-card h3{font-size:12px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.table-wrapper{overflow-x:auto;max-height:320px;overflow-y:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
thead th{background:var(--surface2);color:var(--text2);font-weight:700;padding:8px 11px;text-align:left;position:sticky;top:0;z-index:10;white-space:nowrap;user-select:none;border-bottom:1px solid var(--border)}
thead th.sortable{cursor:pointer}
thead th.sortable:hover{color:var(--text)}
thead th.sort-asc::after{content:' ▲';font-size:9px}
thead th.sort-desc::after{content:' ▼';font-size:9px}
tbody tr{border-bottom:1px solid var(--border);transition:background .12s}
tbody tr:nth-child(even){background:rgba(127,127,127,.045)}
tbody tr:hover{background:var(--surface2)}
tbody td{padding:7px 11px;color:var(--text);white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700}
.badge-green{background:rgba(34,197,94,.15);color:#4ade80}
.badge-blue{background:rgba(59,130,246,.15);color:#60a5fa}
.badge-yellow{background:rgba(234,179,8,.15);color:#facc15}
.badge-red{background:rgba(239,68,68,.15);color:#f87171}
.badge-purple{background:rgba(168,85,247,.15);color:#c084fc}
.badge-gray{background:rgba(148,163,184,.15);color:#94a3b8}
.pagination{display:flex;gap:5px;align-items:center;margin-top:10px;justify-content:flex-end}
.pagination button{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:4px 9px;cursor:pointer;font-size:12px;transition:background .15s}
.pagination button:hover{background:var(--accent);color:#fff}
.pagination button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination span{color:var(--text2);font-size:12px;padding:0 3px}
.table-toolbar{display:flex;gap:8px;margin-bottom:10px;align-items:center}
.search-box{flex:1;position:relative}
.search-box input{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 11px 6px 30px;font-size:12px;outline:none;transition:border-color .2s}
.search-box input:focus{border-color:var(--accent)}
.search-box::before{content:'🔍';position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:11px;pointer-events:none}

/* UPLOAD */
.upload-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.upload-overlay.active{display:flex}
.upload-box{background:var(--surface);border:2px dashed var(--accent);border-radius:20px;padding:44px 56px;text-align:center;min-width:360px;position:relative}
.upload-box .upload-icon{font-size:48px;margin-bottom:14px}
.upload-box h2{font-size:19px;margin-bottom:8px;color:var(--text)}
.upload-box p{color:var(--text2);font-size:12px;margin-bottom:18px;line-height:1.6}

/* LOADING OVERLAY */
#loadingOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;align-items:center;justify-content:center;flex-direction:column;gap:14px;backdrop-filter:blur(3px)}
#loadingOverlay.active{display:flex}
.spinner{width:44px;height:44px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOAST */
#toast{position:fixed;bottom:22px;right:22px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:11px 16px;font-size:12px;transform:translateY(80px);opacity:0;transition:all .3s;z-index:500;box-shadow:0 4px 20px var(--shadow);max-width:320px}
#toast.show{transform:translateY(0);opacity:1}

/* ── EMPTY STATE ── */
#emptyState{display:none;position:fixed;inset:0;z-index:50;background:var(--bg);align-items:center;justify-content:center;flex-direction:column;gap:0}
#emptyState.active{display:flex}
.empty-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:48px 56px;text-align:center;max-width:480px;box-shadow:0 24px 60px var(--shadow);animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.empty-icon{font-size:64px;margin-bottom:16px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.empty-card h2{font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px}
.empty-card p{color:var(--text2);font-size:13px;line-height:1.7;margin-bottom:24px}
.empty-card .btn{margin:0 auto;font-size:14px;padding:12px 28px;border-radius:10px}
.empty-steps{display:flex;gap:16px;margin-top:20px;justify-content:center}
.empty-step{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--text2)}
.empty-step .step-num{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.empty-step-arrow{color:var(--border);font-size:18px;align-self:center;margin-top:-12px}

/* ── ROUTE PANEL ── */
#routePanel{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:400;display:none;align-items:flex-start;justify-content:center;padding:20px;backdrop-filter:blur(4px);overflow-y:auto}
#routePanel.active{display:flex}
.route-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:100%;max-width:800px;box-shadow:0 24px 64px var(--shadow)}
.route-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.route-header h2{font-size:17px;font-weight:800;flex:1}
.route-config{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.route-config .field{display:flex;flex-direction:column;gap:5px}
.route-config label{font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase}
.route-config select,.route-config input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:6px 10px;font-size:12px;outline:none}
.route-config select:focus,.route-config input:focus{border-color:var(--accent)}
.route-body{padding:16px 24px;max-height:60vh;overflow-y:auto}
.route-strategy-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;margin-bottom:12px}
.route-group{margin-bottom:14px}
.route-group-header{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface2);border-radius:8px;margin-bottom:6px;font-weight:700;font-size:12px}
.route-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:5px;cursor:grab;transition:box-shadow .15s,border-color .15s;user-select:none}
.route-item:active{cursor:grabbing;box-shadow:0 6px 20px var(--shadow)}
.route-item.dragging{opacity:.5;border-color:var(--accent)}
.route-item.drag-over{border-color:var(--accent);border-style:dashed}
.route-item .drag-handle{color:var(--text2);font-size:16px;flex-shrink:0;cursor:grab}
.route-item .route-num{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.route-item.tt-item{border-color:rgba(238,29,82,.4);background:rgba(238,29,82,.05)}
.route-item.late-item{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.04)}
.route-item .item-info{flex:1;min-width:0}
.route-item .item-wb{font-family:monospace;font-size:10px;color:var(--accent2)}
.route-item .item-dest{font-size:12px;font-weight:600;color:var(--text)}
.route-item .item-addr{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-item .item-badge{font-size:9px;padding:1px 6px;border-radius:10px;font-weight:700;flex-shrink:0}
.route-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap}
.route-stats{padding:10px 24px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;gap:16px;font-size:12px;flex-wrap:wrap}
.route-stat{display:flex;align-items:center;gap:5px;color:var(--text2)}
.route-stat strong{color:var(--text)}

/* ── AUTO REFRESH ── */
#autoBtn.syncing .auto-spin{display:inline-block;animation:autospin 1s linear infinite}
@keyframes autospin{to{transform:rotate(360deg)}}

/* ── GLOBAL SEARCH ── */
#globalSearchInput::placeholder{color:var(--text2)}
#globalSearchDrop::-webkit-scrollbar{width:4px}
#globalSearchDrop::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.global-search-shortcut{font-size:9px;background:var(--border);border-radius:3px;padding:1px 4px;color:var(--text2);position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}

/* ── FAVORITOS ── */
tbody tr:has(.fav-active){background:rgba(234,179,8,.05)!important}
.fav-star{transition:transform .15s,color .15s}
.fav-star:hover{transform:scale(1.3)}

/* ── SKELETON LOADING ── */
.skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 50%,var(--surface2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.kpi-skeleton{height:90px;border-radius:var(--card-radius)}
.chart-skeleton{height:220px;border-radius:8px}

/* ── UPDATE BANNER ── */
#updateBanner{display:none;position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(135deg,#00833D,#14B866);color:#fff;padding:10px 20px;box-shadow:0 2px 12px rgba(0,0,0,.4);animation:slideDown .4s ease}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
#updateBanner.show{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.update-icon{font-size:20px;animation:spin1 2s linear infinite}
@keyframes spin1{0%,100%{transform:rotate(0deg)}50%{transform:rotate(20deg)}}
.update-text{flex:1;font-size:13px;font-weight:600}
.update-text span{font-size:11px;opacity:.8;display:block;font-weight:400}
.update-btn{background:#fff;color:#00833D;border:none;border-radius:8px;padding:7px 16px;font-size:12px;font-weight:800;cursor:pointer;transition:transform .15s;white-space:nowrap}
.update-btn:hover{transform:scale(1.05)}
.update-dismiss{background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:6px;padding:6px 10px;font-size:11px;cursor:pointer}
.update-dismiss:hover{background:rgba(255,255,255,.3)}

/* ── ALERT BAR ── */
#alertBar{background:rgba(239,68,68,.08);border-bottom:1px solid rgba(239,68,68,.25);padding:8px 24px;display:none;align-items:center;gap:12px;flex-wrap:wrap}
#alertBar.active{display:flex}
.alert-badge{background:var(--red);color:#fff;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:800;animation:pulse 2s infinite}
.alert-bar-text{font-size:12px;color:#fca5a5;flex:1}
.alert-bar-text strong{color:#fff}
.alert-actions{display:flex;gap:6px}
.alert-btn{background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.4);color:#fca5a5;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:background .2s}
.alert-btn:hover{background:rgba(239,68,68,.35)}
.alert-dismiss{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:14px;padding:2px 4px}

/* ── RANKING TABLE ── */
.rank-table{width:100%;border-collapse:collapse;font-size:12px}
.rank-table th{background:var(--surface2);color:var(--text2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;text-align:left;position:sticky;top:0;border-bottom:1px solid var(--border)}
.rank-table td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.rank-table tr:hover td{background:var(--surface2)}
.score-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;min-width:60px}
.score-fill{height:100%;border-radius:3px;transition:width .8s ease}
.rank-num{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0}
.rank-1{background:#FFD700;color:#000}
.rank-2{background:#C0C0C0;color:#000}
.rank-3{background:#CD7F32;color:#fff}
.rank-n{background:var(--surface2);color:var(--text2)}
.perf-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700}
.perf-A{background:rgba(34,197,94,.15);color:#4ade80}
.perf-B{background:rgba(59,130,246,.15);color:#60a5fa}
.perf-C{background:rgba(234,179,8,.15);color:#facc15}
.perf-D{background:rgba(239,68,68,.15);color:#f87171}

/* ── HEATMAP ── */
.heatmap-grid{display:grid;grid-template-columns:50px repeat(7,1fr);gap:3px;font-size:10px}
.heatmap-cell{height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;transition:transform .15s;cursor:default}
.heatmap-cell:hover{transform:scale(1.15);z-index:2;position:relative}
.heatmap-label{color:var(--text2);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10px}
.heatmap-header{color:var(--text2);text-align:center;font-weight:700;font-size:10px;padding:4px 0}

/* ── CITY HEALTH ── */
.health-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;flex-shrink:0}
.city-health-row{display:flex;align-items:center;padding:5px 8px;border-radius:6px;font-size:12px;transition:background .12s;gap:6px}
.city-health-row:hover{background:var(--surface2)}
.city-health-row .city-name{flex:1;color:var(--text)}
.city-health-row .city-stats{display:flex;gap:10px;color:var(--text2);font-size:11px}
.city-health-row .city-stats span{white-space:nowrap}
.city-health-row .city-stats .good{color:var(--green)}
.city-health-row .city-stats .warn{color:var(--yellow)}
.city-health-row .city-stats .bad{color:var(--red)}

/* ── VALIDATION TOAST ── */
#validationBox{display:none;position:fixed;top:80px;right:22px;background:var(--surface);border:1px solid var(--yellow);border-radius:12px;padding:16px 18px;max-width:320px;z-index:600;box-shadow:0 8px 30px var(--shadow)}
#validationBox h4{font-size:13px;font-weight:700;color:var(--yellow);margin-bottom:8px}
#validationBox ul{font-size:12px;color:var(--text2);padding-left:16px;line-height:1.8}
#validationBox .val-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text2);cursor:pointer;font-size:16px}

/* ── TRACK FLOAT TOAST ── */
#trackFloatToast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--surface);border:1px solid var(--accent);border-radius:14px;padding:14px 18px;z-index:600;box-shadow:0 8px 32px rgba(0,0,0,.5);opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1);min-width:340px;max-width:420px}
#trackFloatToast.show{transform:translateX(-50%) translateY(0);opacity:1}
.track-toast-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.track-toast-top span{font-size:12px;color:var(--text2)}
.track-toast-top strong{color:var(--text);font-size:13px}
.track-code-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:monospace;font-size:15px;font-weight:700;color:var(--accent2);letter-spacing:1px;text-align:center;margin-bottom:10px;user-select:all}
.track-toast-actions{display:flex;gap:8px}
.track-toast-actions button{flex:1;padding:7px;border-radius:7px;border:none;cursor:pointer;font-size:12px;font-weight:700;transition:opacity .2s}
.track-toast-actions .t-copy{background:var(--accent);color:#fff}
.track-toast-actions .t-copy:hover{opacity:.85}
.track-toast-actions .t-close{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.track-toast-hint{font-size:10px;color:var(--text2);text-align:center;margin-top:8px}
.track-kbd{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;font-family:monospace}

/* ── PAINEL DO ENTREGADOR (mobile) ── */
#driverView{display:none;position:fixed;inset:0;background:var(--bg);z-index:700;flex-direction:column;overflow:hidden}
#driverView.active{display:flex}
.dv-header{background:linear-gradient(135deg,#3b82f6,#22c55e);color:#fff;padding:16px 18px;flex-shrink:0}
.dv-header h1{font-size:18px;font-weight:800}
.dv-header .dv-sub{font-size:12px;opacity:.9;margin-top:2px}
.dv-stats{display:flex;gap:10px;margin-top:12px}
.dv-stat{flex:1;background:rgba(255,255,255,.18);border-radius:10px;padding:8px;text-align:center}
.dv-stat .n{font-size:20px;font-weight:800;line-height:1}
.dv-stat .l{font-size:9px;opacity:.9;text-transform:uppercase}
.dv-body{flex:1;overflow-y:auto;padding:12px;background:var(--bg)}
.dv-group-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin:14px 4px 8px}
.dv-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;transition:opacity .2s}
.dv-card.done{opacity:.5}
.dv-card-top{display:flex;align-items:flex-start;gap:10px}
.dv-card .dv-seq{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dv-card .dv-name{font-weight:700;font-size:14px}
.dv-card .dv-addr{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.4}
.dv-card .dv-wb{font-family:monospace;font-size:10px;color:var(--accent2)}
.dv-card .dv-actions{display:flex;gap:8px;margin-top:10px}
.dv-card .dv-actions button{flex:1;border:none;border-radius:8px;padding:9px;font-size:12px;font-weight:700;cursor:pointer}
.dv-btn-wa{background:#25D366;color:#fff}
.dv-btn-map{background:var(--surface2);color:var(--text);border:1px solid var(--border)!important}
.dv-btn-done{background:#22c55e;color:#fff}
.dv-btn-undone{background:var(--surface2);color:var(--text2);border:1px solid var(--border)!important}
.dv-tt{background:#ee1d52;color:#fff;border-radius:4px;padding:1px 5px;font-size:9px;font-weight:800;margin-left:4px}
.dv-late{background:#ef4444;color:#fff;border-radius:4px;padding:1px 5px;font-size:9px;font-weight:800;margin-left:4px}

/* ── HEADER DROPDOWN MENUS ── */
.hdr-menu{position:relative}
.hdr-menu-btn{display:flex;align-items:center;gap:5px}
.hdr-menu-btn::after{content:'▾';font-size:10px;opacity:.7}
.hdr-menu-items{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px var(--shadow);z-index:300;min-width:230px;padding:6px;animation:hdrMenuIn .15s ease}
@keyframes hdrMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.hdr-menu.open .hdr-menu-items{display:block}
.hdr-menu-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);white-space:nowrap;border:none;background:none;width:100%;text-align:left;transition:background .12s}
.hdr-menu-item:hover{background:var(--surface2)}
.hdr-menu-item .mi-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.hdr-menu-item .mi-badge{margin-left:auto;font-size:9px;font-weight:800;border-radius:10px;padding:1px 6px}
.hdr-menu-sep{height:1px;background:var(--border);margin:5px 8px}
.hdr-menu-label{font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;padding:6px 12px 3px}

/* PRINT */
@media print{
  header,  .filters-bar, .header-actions, .table-card, #toast, .upload-overlay, #loadingOverlay{display:none!important}
  body{background:#fff!important;color:#000!important}
  .chart-card,.kpi-card{border:1px solid #ccc!important;background:#fff!important;break-inside:avoid}
  .kpi-value,.kpi-label{color:#000!important}
}

/* RESPONSIVE */
@media(max-width:1100px){.row-3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  .row-2,.row-3,.row-2-1,.row-3-eq{grid-template-columns:1fr}
  main{padding:10px}
  header{padding:10px;gap:8px}
  header h1{font-size:16px}
  .logo span{font-size:9px}
  .header-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  #globalSearchWrap{flex:1 1 100%;order:5}
  #sourceBadge{display:none}
  .btn{font-size:11px;padding:6px 10px}
  .hdr-menu-items{position:fixed;left:8px;right:8px;top:auto;min-width:0}
  .filters-bar{padding:8px 10px;gap:8px;overflow-x:auto;flex-wrap:nowrap}
  .filter-group{flex-shrink:0}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:8px}
  .kpi-value{font-size:21px}
  .kpi-card{padding:12px 14px}
  /* Painéis e modais ocupam a tela toda no mobile */
  #drillPanel{width:100vw!important;max-width:100vw}
  .route-box,#metaModal>div,#phoneModal>div,#zonasModal>div,#importAnjunModal>div,#pkgDetailModal>div,#comparativoModal>div,#histEntModal>div,#backupModal>div{min-width:0!important;width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important}
  #liveGrid{grid-template-columns:1fr!important}
  .drill-header h2,.route-header h2{font-size:14px}
  table{font-size:11px}
  .chart-card canvas{max-height:200px}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  header .logo span{display:none}
  .btn{font-size:10px;padding:5px 8px}
}