/* ===================================================================
   ValorIA — camada de marca (tema)
   Padrão para aplicações de cliente. Carregada por ÚLTIMO, depois de
   todos os CSS de estrutura. Só mexe em cor, fonte e marca: nenhuma
   regra de layout, tamanho ou posição aqui.
   Para tirar a marca de um app: remova esta única linha do index.html.
   Fonte dos valores: claude/identidade-visual.md (identidade v2, escura).
   =================================================================== */

:root{
  /* --- paleta oficial ValorIA --- */
  --va-bg:#11181C;          /* grafite: fundo principal */
  --va-bg2:#0C1114;         /* fundo 2: faixas, barra lateral, campos */
  --va-panel:#161F24;       /* painel: cartões e telas */
  --va-turq:#0E7490;        /* turquesa: botão principal, ação */
  --va-vivo:#2DD4BF;        /* turquesa vivo: ícones, pontos, "bom" */
  --va-claro:#99F6E4;       /* turquesa claro: rótulos e destaques */
  --va-text:#fff;
  --va-text2:rgba(255,255,255,.74);
  --va-text3:rgba(255,255,255,.52);
  --va-line:rgba(255,255,255,.12);
  --va-line2:rgba(255,255,255,.22);
  --va-ambar:#F2C879;       /* âmbar oficial: só gargalo/atenção */
  --va-alerta:#F08A7A;      /* crítico (aprovado em 11/11) */
  --va-r-btn:10px;          /* canto de botão */
  --va-r-bloco:16px;        /* canto de bloco */

  /* --- tokens que o app já usava, redefinidos --- */
  --ink:#fff; --muted:rgba(255,255,255,.62); --line:rgba(255,255,255,.12);
  --blue:#0E7490; --navy:#0C1114; --canvas:#11181C;

  /* --- símbolo ValorIA: V em duas metades (esquerda branca, direita clara) --- */
  --va-marca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='2,5 8.6,5 16,17.6 16,29.5' fill='%23ffffff'/%3E%3Cpolygon points='16,29.5 16,17.6 23.4,5 30,5' fill='%2399F6E4'/%3E%3C/svg%3E");
}

/* ===== Escala de texto do app ======================================
   12/11, pedido dele: "a fonte está muito pequena, aumente no app todo,
   de forma proporcional". Todas as fontes dos CSS e do JSX viraram rem.
   ESTE número controla o app inteiro: mexeu aqui, mudou tudo junto.
   16px era o original; 17.6px = +10%.                                */
html{font-size:17.6px}
html{color-scheme:dark}
body{background:var(--va-bg);color:var(--va-text2);
  font-family:Geist,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.03em}

/* ===== 1. Marca =================================================== */
.brand-mark,.mobile-logo{background:none;background-image:var(--va-marca);
  background-repeat:no-repeat;background-position:center;background-size:30px 30px;
  box-shadow:none;border-radius:var(--va-r-btn);color:transparent;font-size:0}
.mobile-logo{border:1px solid var(--va-line);background-size:21px 21px}
.brand strong,.en-brand strong{font-size:0;color:transparent;letter-spacing:0}
.brand strong:before,.en-brand strong:before{content:'TRANSPORTADORA';display:block;
  color:#fff;font-size:0.6875rem;font-weight:600;letter-spacing:.2em}
.brand strong:after,.en-brand strong:after{content:'IUNES';display:block;
  color:var(--va-claro);font-size:1.125rem;font-weight:600;letter-spacing:.1em;line-height:1.15}
/* marca grande da porta de entrada (12/11): mesma marca, outro tamanho */
.en-marca-grande .brand-mark{width:96px;height:96px;background-size:96px 96px;border-radius:0}
.en-marca-grande strong:before{font-size:0.9375rem;letter-spacing:.3em}
.en-marca-grande strong:after{font-size:3.25rem;letter-spacing:.06em;line-height:1.05}
.en-marca-grande small{font-size:0.8125rem;margin-top:12px;letter-spacing:.02em}
.brand small,.en-brand small{color:var(--va-text3)}
.brand small em{background:rgba(45,212,191,.16);color:var(--va-claro);font-weight:700}
.brand-btn:hover strong:before,.brand-btn:hover strong:after{color:var(--va-vivo)}
/* assinatura discreta: o nome exibido é do cliente, o sistema é da ValorIA.
   Única regra do tema que mexe em posição — ela É a marca, não o layout. */
.sidebar-bottom:after{content:'sistema ValorIA';display:block;margin-top:12px;
  text-align:center;font-size:0.625rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.28)}

/* ===== 2. Superfícies ============================================= */
.topbar,.panel,.metric,.kpis article,.how>div,.market-strip,.quote,.trip-card,
.en-nums article,.en-caso,.en-card,.en-box,.en-login,.qe-truck,.qe-op,.qe-pick,
.qe-fila-card,.cand,.route,.modal,.seg,.sim-clock,.profile-pick,.secondary,
.panel-title button,.log-tabs>div button,.qe-filters button,.base-card,.seller-card,
.form-panel{background:var(--va-panel);border-color:var(--va-line);color:var(--va-text2)}
.panel,.metric,.quote,.en-caso,.en-card,.en-box,.trip-card,.qe-truck{box-shadow:0 2px 10px rgba(0,0,0,.28)}
.en-login{box-shadow:0 12px 40px rgba(0,0,0,.45)}

.en-op,.qe-detail,.selected-orders,.calc,.km-facts p,.seller-stats p,.qe-op-nums p,
.tk-grid p,.cand-nums span,.kanban-column,.search,.top-actions button,.metric-top i,
.avatar,.qe-gauge,.meta-bar,.hb-track,.meter,.capacity-bar,.en-perfis button,
.trip-people>span,.modal>header button,.cmp-card dl div{background:var(--va-bg2);border-color:var(--va-line)}
.search{color:var(--va-text3)}
.top-actions button{color:var(--va-text2)}
.sidebar{background:var(--va-bg2);color:var(--va-text2);border-right:1px solid var(--va-line)}

/* campos ------------------------------------------------------------ */
.field select,.field input,.en-login input,.move select,.seller-filter select,
.profile-pick select,.search input{background:var(--va-bg2);border-color:var(--va-line2);color:var(--va-text)}
::placeholder{color:rgba(255,255,255,.34)}
.field select:focus,.field input:focus,.en-login input:focus{border-color:var(--va-vivo);
  box-shadow:0 0 0 3px rgba(45,212,191,.18)}
:focus-visible{outline:2px solid var(--va-vivo)}
.check input,.logistics-orders input{accent-color:var(--va-vivo)}

/* campos de formulário (ver v3.css, bloco de 12/11) */
.form-grid>label:not(.field){color:var(--va-text3)}
.form-grid>label:not(.field)>select,
.form-grid>label:not(.field)>input{background:var(--va-bg2);border-color:var(--va-line2);color:var(--va-text)}
.form-grid>label:not(.field)>select:focus,
.form-grid>label:not(.field)>input:focus{border-color:var(--va-vivo);box-shadow:0 0 0 3px rgba(45,212,191,.18)}

/* ===== 3. Texto =================================================== */
h1,h2,h3,.strong,.page-heading h1,.en-hero h1,.en-login h2,.en-caso h2,.en-card h3,
.en-box h2,.metric>strong,.kpis strong,.en-nums strong,.qe-id,.qe-op-head b,.en-op b,
.en-op span,.trip-route,.cand-head strong,.cand-nums b,.calc b,.kv b,.client-list b,
.attn b,.todo-list b,.mini-title,.hbar b,.hb-label,.mix-legend b,.tk-grid b,.lr-name b,
.qe-stop b,.qe-vol,.qe-pick-main b,.qe-pick-vol,.qe-fila-card b,.qe-fila-card span,
.en-passos b,.en-perfis b,.seller-stats b,.km-facts b,.qe-op-nums b,.score-line b,
.ontime b,.legend b,.donut strong,.selected-orders b,.selected-orders>p>strong,
.modal>header h2,.profile strong,.qe-verdito,.en-verdito,.ms-item strong,.q-name,
.q-value strong,.q-perl b,.cmp-top b,.cmp-card dd,.cmp-verdict b,.alert-strip strong,
.ma-body strong,.snapshot-note strong,.ai-tip strong,.perm-banner b,.sim-clock b,
.base-card h2,.seller-card h2,.todo-list li>div b,.en-cta b,.demo-guide>div strong,
.cmp-intro strong,.placeholder h1,.qe-legend b.e-fila{color:var(--va-text)}

.en-lead,.en-txt,.en-nota,.en-verdito,.qe-meta,.q-why,.qe-op-resumo,.rs,.mini-list li,
.calc p,.mix-legend li,.ev-list li p,.legend p,.insight,.how p,.placeholder p,
.cmp-intro p,.en-cta p,.kpis article.hl span,.snapshot-note p,.ai-tip p,.perm-banner,
.sim-banner,.excluded summary,.lr-bars div,.client-list small,.parts p,.kv,
.fleet-alerts li,.trip-people b,.qe-pick-main small,.tk-status,.route p,
.selection-summary span,.modal-step strong,.cell-sub,.qe-stop small{color:var(--va-text2)}

.en-label,.en-sub,.en-mini,.q-unit,.q-week,.en-vs,.en-foot,.bar-wrap small,.y-axis,
.donut small,.metric small,.metric-top,.profile small,.profile i,.today,.ms-label small,
.ms-item span,.source-col h3,.source-col small,.quote footer,.trip-card footer,
.capacity-line,.hb-label small,.mix-legend small,.lr-name small,.attn small,
.seller-stats span,.km-facts span,.qe-op-nums span,.tk-grid span,.cand-nums span,
.cand-sub,.calc p small,.selected-orders small,.modal-step small,.en-passos small,
.en-perfis small,.qe-placa,.qe-eyebrow,.qe-legend,.qe-empty,.ev-list li span,
.en-nums span,.field,.check,.log-metrics span,.log-metrics small,.base-load,
.todo-list small,.mini-list li span,.calc-note,.excluded,.store-note,.en-login label,
.en-login-nota,.en-op small,.qe-op-sub,.qe-fila-card small,.en-ou span,.column-dot,
.kanban-column>header b,.more,.sr,.sidebar-bottom .profile-pick,.live-badge,
.score-line,.meta-line,.chips .chip{color:var(--va-text3)}
.en-login-nota b,.en-nota b,.qe-meta b{color:var(--va-text2)}

/* rótulos e links em turquesa ------------------------------------- */
.en-eyebrow,.page-heading p,.en-dor,.ms-label span,.placeholder>span,.modal>header p,
.demo-guide>div span,.cmp-intro span,.en-perfis em,.qe-fila-card em,.trip-head>strong,
td.order-id,.logistics-orders td b,.mini-list li b,.base-card h2 em,
a,.link,.link-btn,.inline-link,.ms-more,.panel-title .link,.quote footer a,
.source-col a,.log-tabs>button.active{color:var(--va-claro)}
.en-label{color:var(--va-text3)}

/* ===== 4. Ações =================================================== */
.primary{background:var(--va-turq);border-color:var(--va-turq);color:#fff;
  box-shadow:0 6px 18px rgba(14,116,144,.38)}
.primary:hover{background:#12879f}
.secondary:hover{border-color:var(--va-line2);background:var(--va-panel)}
.en-visit{background:rgba(45,212,191,.10);border-color:rgba(45,212,191,.35);color:var(--va-claro)}
.en-visit:hover{background:rgba(45,212,191,.18);border-color:var(--va-vivo)}
.en-ou:before,.en-ou:after{background:var(--va-line)}
.en-passos i,.modal-step>span,.base-ico,.sn-icon,.ai-tip>span,.demo-guide button>i{background:var(--va-turq);color:#fff}
.base-ico.k-u,.snapshot-note.live .sn-icon{background:var(--va-vivo);color:#06231f}
.avatar{background:rgba(14,116,144,.3);color:var(--va-claro)}
.profile>span{background:rgba(14,116,144,.3);color:var(--va-claro)}
.danger{background:var(--va-alerta);border-color:var(--va-alerta);color:#2a0f0a}
.advance{background:rgba(14,116,144,.22);color:var(--va-claro)}

/* ===== 5. Navegação ============================================== */
.nav-item{color:var(--va-text2)}
.nav-item:hover,.nav-item.active{background:rgba(45,212,191,.10);color:var(--va-text)}
.nav-item.active{box-shadow:inset 3px 0 var(--va-vivo)}
.nav-item.future:hover{background:transparent;color:var(--va-text3)}
.nav-item.future small{color:var(--va-text3)}
.nav-item b{background:var(--va-turq);color:#fff}
.nav-item b.tag-new{background:rgba(45,212,191,.16);color:var(--va-claro)}
.nav-item b.tag-live{background:rgba(242,200,121,.18);color:var(--va-ambar)}
.profile{border-top-color:var(--va-line)}
.sidebar .profile-pick{background:var(--va-bg);border-color:var(--va-line)}
.sidebar .profile-pick select{color:var(--va-text)}
.mobile-nav{background:var(--va-bg2);border:1px solid var(--va-line);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.mobile-nav button{color:var(--va-text3)}
.mobile-nav button.active{background:rgba(45,212,191,.12);color:var(--va-text)}
.log-tabs,.qe-tabs{border-bottom-color:var(--va-line)}
.log-tabs>button,.qe-tabs button{color:var(--va-text3)}
.log-tabs>button.active{border-bottom-color:var(--va-vivo)}
.qe-tabs button.on{color:var(--va-text);border-bottom-color:var(--va-vivo)}
.log-tabs>button b{background:rgba(14,116,144,.28);color:var(--va-claro)}
.qe-filters button.on{background:var(--va-turq);border-color:var(--va-turq);color:#fff}

/* ===== 6. Blocos que já eram escuros ============================= */
.demo-guide,.compare,.en-cta,.toast{background:var(--va-panel);border:1px solid var(--va-line);color:var(--va-text)}
.demo-guide button,.cmp-card{background:var(--va-bg2);border-color:var(--va-line)}
.demo-guide button:hover,.cmp-card:hover{background:rgba(45,212,191,.08);border-color:var(--va-vivo)}
.demo-guide button b{color:var(--va-text)}
.demo-guide button small,.cmp-meta,.cmp-card dt{color:var(--va-text3)}
.cmp-card dl .hl{background:rgba(14,116,144,.32)}
.cmp-verdict{color:var(--va-text2)}
.kpis article.hl{background:rgba(14,116,144,.22);border-color:rgba(45,212,191,.25)}
.kpis article.hl small{color:var(--va-text3)}
.toast{box-shadow:0 14px 34px rgba(0,0,0,.55)}
.toast span{background:var(--va-vivo);color:#06231f}
.demo-mode{background:rgba(45,212,191,.10);border-color:rgba(45,212,191,.28);color:var(--va-vivo)}
.demo-mode i{background:var(--va-vivo)}

/* ===== 7. Tabelas ================================================ */
table{color:var(--va-text2)}
th{background:var(--va-bg2);color:var(--va-text3);border-bottom:1px solid var(--va-line)}
td{border-top-color:var(--va-line);color:var(--va-text2)}
tr.row-on td{background:rgba(14,116,144,.18)}
.orders .panel-title,.sources .panel-title,.form-panel .panel-title,
.fleet-alerts .panel-title,.truck-panel .panel-title,.detail-panel .panel-title{border-bottom-color:var(--va-line)}

/* ===== 8. Situações (etiquetas) ================================== */
.pill,.status,.priority,.chip,.pstat,.st-done,.qe-status,.cand-mode,.live-badge,
.q-week{background:rgba(255,255,255,.08);color:var(--va-text2)}
.p-base,.p-retorno,.st-road,.sig-ok,.status-concluida,.cand-mode.m-encaixe,
.live-badge.on,.e-livre .qe-status{background:rgba(45,212,191,.14);color:var(--va-vivo)}
.p-rota,.status-em-rota,.st-plan,.cand-mode.m-base{background:rgba(14,116,144,.28);color:var(--va-claro)}
.p-carregando,.status-carregando,.st-wait,.sig-warn,.cand-mode.m-retorno,
.cand-mode.m-rota,.live-badge.stale,.e-semdestino .qe-status{background:rgba(242,200,121,.16);color:var(--va-ambar)}
.p-manutencao,.priority.high,.sig-bad,.e-cheio .qe-status{background:rgba(240,138,122,.16);color:var(--va-alerta)}
.e-fila .qe-status{background:rgba(255,255,255,.08);color:var(--va-text2)}
.cand-head em,.qe-op-head em,.route em{background:var(--va-vivo);color:#06231f}

/* ===== 9. Avisos ================================================= */
.alert-strip,.market-alert,.qe-alert.warn{background:rgba(242,200,121,.09);
  border-color:rgba(242,200,121,.30);color:var(--va-ambar)}
.alert-strip p,.ma-body p,.ma-body .ma-watch,.market-alert>a,.alert-strip button{color:var(--va-ambar)}
.alert-icon,.ma-tag{background:var(--va-ambar);color:#241a05}
.qe-alert.warn i{background:var(--va-ambar);color:#241a05}
.snapshot-note,.ai-tip,.insight,.perm-banner,.sim-banner,.saving,.qe-alert.ok,
.allocation{background:rgba(14,116,144,.14);border-color:rgba(45,212,191,.22);color:var(--va-text2)}
.saving{color:var(--va-vivo)}
.qe-alert.ok i{background:var(--va-vivo);color:#06231f}
.qe-alert.crit{background:rgba(240,138,122,.10);border-color:rgba(240,138,122,.32);color:var(--va-alerta)}
.qe-alert.crit i{background:var(--va-alerta);color:#2a0f0a}
.allocation.over{background:rgba(240,138,122,.10);border-color:rgba(240,138,122,.3)}
.allocation.over .capacity-bar i{background:var(--va-alerta)}
.en-limites li:before{color:var(--va-ambar)}

/* números com sinal ----------------------------------------------- */
.warn-num,.q-note,.attn p,.qe-op-av.warn,.ev-list li.warn p,.chg.up{color:var(--va-ambar)}
.chg.down,.ok-num,.calc p.tot b,.metric small b,.log-metrics small.positive,
.orange small b{color:var(--va-vivo)}
.form-err,.sug-empty,.qe-op-av.crit,.ev-list li.bad p,.link-btn.danger{color:var(--va-alerta)}
.bad-num{color:var(--va-alerta)!important}

/* ===== 10. Gráficos e medidores ================================== */
.bars{border-bottom-color:var(--va-line);
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0,rgba(255,255,255,.07) 1px,transparent 1px,transparent 35px)}
.bar{background:rgba(255,255,255,.13)}
.bar.current{background:linear-gradient(var(--va-vivo),var(--va-turq))}
.bar span{color:var(--va-claro)}
.donut:after{background:var(--va-panel)}
.green-dot{background:var(--va-vivo)}.blue-dot{background:var(--va-turq)}
.amber-dot{background:var(--va-ambar)}.gray-dot{background:rgba(255,255,255,.2)}
.meter i,.capacity-bar i,.hb-track i,.meta-bar i{background:var(--va-turq)}
.meter i.ok{background:var(--va-vivo)}.meter i.warn{background:var(--va-ambar)}
.lr-bars i{background:rgba(255,255,255,.18)}
.lr-bars i.ok{background:var(--va-vivo)}.lr-bars i.late{background:var(--va-ambar)}
.chart-svg text{fill:rgba(255,255,255,.55)}
.rA{background:var(--va-vivo);color:#06231f}.rB{background:var(--va-turq);color:#fff}
.rC{background:var(--va-ambar);color:#241a05}.rD{background:var(--va-alerta);color:#2a0f0a}
.ontime div{background:rgba(242,200,121,.10)}
.ontime div.ok{background:rgba(45,212,191,.10)}
.ontime small{color:var(--va-text3)}
.mix-legend span{opacity:.9}

/* ===== 11. Modal e listas ======================================== */
.modal-backdrop{background:rgba(5,9,11,.74)}
.modal{background:var(--va-panel);box-shadow:-20px 0 60px rgba(0,0,0,.6)}
.modal>header,.modal>footer{border-color:var(--va-line)}
.cand:hover{border-color:rgba(45,212,191,.42)}
.cand.on{border-color:var(--va-vivo);background:rgba(45,212,191,.08);box-shadow:0 0 0 1px var(--va-vivo)}
.cand:focus-visible{box-shadow:0 0 0 3px rgba(45,212,191,.3)}
.rs:before{background:rgba(255,255,255,.3)}
.rs.good:before{background:var(--va-vivo)}.rs.warn:before{background:var(--va-ambar)}
.rs.bad:before{background:var(--va-alerta)}.rs.bad{color:var(--va-alerta)}
.selected-orders p,.client-list li,.todo-list li,.mini-list li,.attn li,.calc p,
.en-passos li,.en-limites li,.qe-stop,.ev-list li,.fleet-alerts li{border-color:var(--va-line)}
.client-list{border-top-color:var(--va-line)}
.todo-list li.bad b:before{background:var(--va-alerta)}
.todo-list li.warn b:before{background:var(--va-ambar)}
.todo-list li.ok b:before{background:var(--va-vivo)}
.orphan .avatar{background:rgba(240,138,122,.16);color:var(--va-alerta)}

/* ===== 12. Quadro de espaço ====================================== */
.qe-truck{border-left-color:rgba(255,255,255,.18)}
.qe-truck.e-livre{border-left-color:var(--va-vivo)}
.qe-truck.e-semdestino{border-left-color:var(--va-ambar)}
.qe-truck.e-cheio{border-left-color:var(--va-alerta)}
.qe-truck.e-fila{border-left-color:rgba(255,255,255,.26)}
.qe-truck.qe-novo{box-shadow:0 0 0 2px var(--va-vivo),0 6px 22px rgba(45,212,191,.25)}
.qe-detail{border-top-color:var(--va-line)}
.qe-gauge{border-color:var(--va-line)}
.qe-seg{background:var(--va-turq);border-right-color:var(--va-bg2)}
.qe-free{background-image:repeating-linear-gradient(115deg,rgba(45,212,191,.24) 0 6px,transparent 6px 12px)}
.qe-over{background:repeating-linear-gradient(115deg,var(--va-alerta) 0 5px,rgba(240,138,122,.55) 5px 10px)}
.qe-legend b.e-livre{color:var(--va-vivo)}.qe-legend b.e-semdestino{color:var(--va-ambar)}
.qe-legend b.e-cheio{color:var(--va-alerta)}
.qe-dot{background:rgba(255,255,255,.22)}
.qe-dot.done{background:var(--va-vivo)}
.qe-dot.now{background:var(--va-turq);box-shadow:0 0 0 3px rgba(14,116,144,.4)}
.qe-empty,.empty-column{border-color:var(--va-line2)}
.qe-op.best,.en-op.best,.route.best{border-color:var(--va-vivo);background:rgba(45,212,191,.07)}
.en-op span,.qe-op .qe-op-nums p{background:rgba(255,255,255,.06);border-color:var(--va-line)}
.qe-op.best .qe-op-nums p,.en-op.best span{background:var(--va-panel);border-color:rgba(45,212,191,.4)}
.en-op.best span{color:var(--va-claro)}
.qe-pick:hover,.qe-fila-card:hover,.en-perfis button:hover{border-color:var(--va-vivo);background:rgba(45,212,191,.07)}
.qe-fila-card{border-left-color:var(--va-ambar)}
.qe-fila-card:hover{border-left-color:var(--va-vivo)}

/* ===== 13. Viagens (kanban) ====================================== */
.kanban-column>header b{background:rgba(255,255,255,.1);color:var(--va-text2)}
.column-dot.programada{background:rgba(255,255,255,.3)}
.column-dot.carregando{background:var(--va-ambar)}
.column-dot.em-rota{background:var(--va-turq)}
.column-dot.concluida{background:var(--va-vivo)}
.trip-card footer{border-top-color:var(--va-line)}
.selection-summary{border-bottom-color:var(--va-line)}

/* ===== 14. Mercado =============================================== */
.ms-item{background:var(--va-bg2);border-color:var(--va-line)}
.ms-item:hover{background:rgba(45,212,191,.07);border-color:rgba(45,212,191,.4)}
.quote.is-live{border-color:rgba(45,212,191,.3)}
.q-missing{color:var(--va-text3)}
.quote footer,.source-col{border-color:var(--va-line)}
.dot-live,.live-badge.on i,.tk-signal i{background:var(--va-vivo)}
.live-badge i{background:rgba(255,255,255,.3)}
.live-badge.stale i{background:var(--va-ambar)}
.en-hero{border-bottom-color:var(--va-line)}
.en-tag{background:rgba(45,212,191,.14);color:var(--va-claro)}
.ro-tag{background:rgba(242,200,121,.12);border-color:rgba(242,200,121,.3);color:var(--va-ambar)}
.sidebar .ro-tag{background:rgba(242,200,121,.10);border-color:rgba(242,200,121,.26);color:var(--va-ambar)}

/* ===== 15. Rastreamento ========================================== */
.seg button{color:var(--va-text2);border-right-color:var(--va-line)}
.seg button.on{background:rgba(14,116,144,.28);color:var(--va-claro)}
.sim-clock i{background:var(--va-vivo)}
.truck-pin:focus circle,.cpin:focus circle{stroke:var(--va-vivo)}

/* ===== 16. Cantos (10 px botão, 16 px bloco) ===================== */
.panel,.metric,.quote,.trip-card,.en-card,.en-box,.en-caso,.en-nums article,
.kpis article,.how>div,.market-strip,.qe-truck,.kanban-column,.demo-guide,
.compare,.en-cta,.log-metrics article{border-radius:var(--va-r-bloco)}
.en-login{border-radius:18px}

/* ===== 17. Correções da 1ª rodada (conferidas no navegador) ======= */
/* caixas de indicador da Frota e das Viagens: ficavam brancas */
.log-metrics article{background:var(--va-panel);border-color:var(--va-line);border-radius:var(--va-r-bloco)}
/* aviso "cotações ao vivo": fundo claro com texto claro */
.snapshot-note.live{background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.28)}
.quote.is-live{border-color:rgba(45,212,191,.3)}
.fa-dot{background:var(--va-ambar)}
.fleet-alerts li.bad .fa-dot{background:var(--va-alerta)}
/* topo colorido dos indicadores: tira azul/verde/roxo/laranja */
.metric.blue{border-top-color:var(--va-turq)}
.metric.green{border-top-color:var(--va-vivo)}
.metric.purple{border-top-color:var(--va-claro)}
.metric.orange{border-top-color:var(--va-ambar)}
.metric:after{background:var(--va-bg2);color:var(--va-claro)}

/* mapa da carteira (SVG desenhado no código: recolorido pelo valor original) */
.cmap [fill="#f3f6fa"]{fill:rgba(255,255,255,.045)}      /* 12/11: o mapa estava quase preto */
.cmap [fill="#b6c0cf"]{fill:rgba(255,255,255,.5)}        /* pontos das cidades */
.cmap text[fill="#445067"]{fill:rgba(255,255,255,.9)}
.cmap text[fill="#7a8597"]{fill:rgba(255,255,255,.76)}   /* nomes das cidades */
/* contorno escuro: o nome da cidade continua legível mesmo quando um
   caminhão passa por cima. Só nos rótulos de cidade, não nos pinos. */
.cmap text[fill="#7a8597"],.cmap text[fill="#445067"]{paint-order:stroke;
  stroke:#0B1116;stroke-width:3.5px;stroke-linejoin:round;stroke-linecap:round}
.cmap [fill="#1f9d63"]{fill:var(--va-vivo)}
.cmap [fill="#2f7ddd"]{fill:var(--va-turq)}
.cmap [fill="#e0a030"]{fill:var(--va-ambar)}
.cmap [fill="#d4533f"]{fill:var(--va-alerta)}
.cmap [fill="#111c32"]{fill:var(--va-turq)}
.cmap [fill="#1f7a50"]{fill:var(--va-vivo)}
.cmap rect[fill="#fff"][stroke="#e1e6ee"]{fill:var(--va-panel);stroke:var(--va-line)}
.cmap [stroke="#fff"]{stroke:#0B1116}
.cmap line[stroke="#1f9d63"]{stroke:var(--va-vivo)}
.cmap line[stroke="#2f7ddd"]{stroke:var(--va-turq)}
.cmap line[stroke="#e0a030"]{stroke:var(--va-ambar)}
.cmap line[stroke="#d4533f"]{stroke:var(--va-alerta)}
.cmap g.cpin:has(circle[fill="#1f9d63"]) text,.cmap g.cpin:has(circle[fill="#e0a030"]) text,
.cmap g.cpin:has(circle[fill="#d4533f"]) text,.cmap g.cpin:has(circle[fill="#8265d7"]) text,
.cmap g:has(rect[fill="#1f7a50"][stroke="#fff"]) text{fill:#06231f}
/* mapa do rastreamento (mesma classe .cmap, cores próprias) */
.cmap text[fill="#1f2b40"]{fill:var(--va-text)}
.cmap [fill="#8265d7"]{fill:var(--va-claro)}
.cmap polyline[stroke="#d5dce6"]{stroke:rgba(255,255,255,.34)}  /* estradas */
.cmap polyline[stroke="#2f7ddd"]{stroke:var(--va-turq)}
.cmap polyline[stroke="#e0a030"]{stroke:var(--va-ambar)}
.cmap polyline[stroke="#d4533f"]{stroke:var(--va-alerta)}

/* gráficos dos relatórios (SVG desenhado no código) */
.chart-svg text[fill="#1f2b40"]{fill:var(--va-text)}
.chart-svg text[fill="#8993a2"]{fill:rgba(255,255,255,.5)}
.chart-svg line[stroke="#e7eaf0"]{stroke:rgba(255,255,255,.1)}
.chart-svg path[fill="#2f7ddd"]{fill:var(--va-turq)}
.chart-svg path[fill="#1f9d63"]{fill:var(--va-vivo)}

/* ===================================================================
   18. Camada "futurista" (11/11, pedido dele: moderno, dinâmico)
   Mesma linguagem do site V5: grade fina, vidro, brilho turquesa,
   movimento suave. Continua sendo só aparência — nada de layout.
   =================================================================== */

/* fundo: grade fina + dois brilhos turquesa, fixos na tela */
body{
  background:
    radial-gradient(1100px 560px at 78% -12%, rgba(14,116,144,.26), transparent 62%),
    radial-gradient(820px 480px at -5% 108%, rgba(45,212,191,.10), transparent 60%),
    linear-gradient(transparent 0 39px, rgba(255,255,255,.030) 39px 40px) 0 0/100% 40px,
    linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.030) 39px 40px) 0 0/40px 100%,
    var(--va-bg);
  background-attachment:fixed;
}

/* vidro: painéis translúcidos com borda de luz */
.panel,.metric,.quote,.trip-card,.en-card,.en-box,.en-caso,.en-nums article,
.kpis article,.how>div,.log-metrics article,.qe-truck,.market-strip,.seller-card,
.base-card,.form-panel,.modal,.demo-guide,.compare,.en-cta{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),rgba(22,31,36,.74);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.34);
}
.en-login{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(22,31,36,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 50px rgba(0,0,0,.5);
}
.topbar{background:rgba(12,17,20,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sidebar{box-shadow:1px 0 0 rgba(255,255,255,.06),26px 0 70px -46px rgba(45,212,191,.5)}

/* navegação: item ativo com brilho */
.nav-item{transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.nav-item.active{
  background:linear-gradient(90deg,rgba(45,212,191,.18),rgba(45,212,191,.02));
  box-shadow:inset 3px 0 var(--va-vivo),0 0 26px -10px rgba(45,212,191,.6)}

/* movimento: tudo que é cartão reage ao mouse */
.panel,.metric,.quote,.trip-card,.qe-truck,.ms-item,.cand,.en-card,.en-perfis button,
.demo-guide button,.cmp-card,.qe-pick,.qe-fila-card,.primary,.secondary{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.quote:hover,.en-card:hover,.ms-item:hover,.trip-card:hover,.qe-truck:hover{transform:translateY(-2px)}
.quote:hover,.trip-card:hover,.qe-truck:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 36px rgba(0,0,0,.42)}

/* botão principal: gradiente e luz */
.primary{background:linear-gradient(180deg,#128da9,#0E7490);
  box-shadow:0 6px 18px rgba(14,116,144,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.primary:hover{background:linear-gradient(180deg,#16a0bf,#0f7f9c);
  box-shadow:0 10px 28px rgba(45,212,191,.38),inset 0 1px 0 rgba(255,255,255,.22);transform:translateY(-1px)}

/* números: alinhados e com brilho onde importa */
.metric>strong,.kpis strong,.q-value strong,.ms-item strong,.log-metrics strong,
.donut strong,.ontime b,.en-nums strong{font-variant-numeric:tabular-nums}
.q-value strong,.ms-item strong,.metric>strong{text-shadow:0 0 24px rgba(45,212,191,.22)}
.en-hero h1,.page-heading h1{text-shadow:0 0 70px rgba(45,212,191,.14)}

/* ===== painel de mercado: cockpit ================================= */
.market-strip{position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,116,144,.16),rgba(14,116,144,.03)),rgba(12,17,20,.8)}
.market-strip:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--va-vivo),rgba(45,212,191,0))}
.market-strip:after{content:'';position:absolute;left:-32%;top:0;width:32%;height:1px;
  background:linear-gradient(90deg,transparent,var(--va-vivo),transparent);
  animation:va-sweep 5s linear infinite;pointer-events:none}
@keyframes va-sweep{from{left:-32%}to{left:132%}}
.ms-item{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09)}
.ms-item strong{font-size:1.0625rem;letter-spacing:-.02em}
.ms-item:hover{border-color:rgba(45,212,191,.5);background:rgba(45,212,191,.09)}

/* ===== sinal de ao vivo ==========================================
   Conserto de um defeito antigo: em styles.css, ".ms-label span"
   (display:block) vencia ".live-badge" (display:inline-flex), então
   dentro da faixa de mercado a bolinha virava um risco vertical.   */
.ms-label .live-badge{display:inline-flex}
.live-badge i{display:inline-block;flex:none;width:7px;height:7px}
.live-badge{position:relative;overflow:hidden}
.live-badge.on,.live-badge.stale{padding-bottom:7px}
.live-badge.on i{box-shadow:0 0 0 0 rgba(45,212,191,.55);animation:va-pulse 1.9s ease-out infinite}
@keyframes va-pulse{to{box-shadow:0 0 0 9px rgba(45,212,191,0)}}
.lb-next{font-style:normal;margin-left:6px;opacity:.72;font-variant-numeric:tabular-nums}
.ms-label .lb-next{display:none}            /* na faixa, só a barra do ciclo */
.lb-prog{position:absolute;left:7px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--va-turq),var(--va-vivo));
  transition:width 1s linear;font-size:0;opacity:.85}
.live-badge.stale .lb-prog{background:linear-gradient(90deg,rgba(242,200,121,.5),var(--va-ambar))}

/* ===== piscada quando a cotação muda ============================= */
.va-flash-sobe,.va-flash-desce{animation:va-flash 1.2s ease-out}
.va-flash-sobe{--va-flash-cor:rgba(242,200,121,.5)}
.va-flash-desce{--va-flash-cor:rgba(45,212,191,.55)}
@keyframes va-flash{
  0%{box-shadow:0 0 0 1px var(--va-flash-cor),0 0 34px -4px var(--va-flash-cor)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.34)}}
.q-value strong{transition:color .5s ease}
.va-flash-sobe .q-value strong{color:var(--va-ambar)}
.va-flash-desce .q-value strong{color:var(--va-vivo)}

/* ===== respeita quem pediu menos movimento ======================= */
@media(prefers-reduced-motion:reduce){
  .market-strip:after,.live-badge.on i,.va-flash-sobe,.va-flash-desce{animation:none}
  .quote:hover,.en-card:hover,.ms-item:hover,.trip-card:hover,.qe-truck:hover,.primary:hover{transform:none}
}

/* ===== 19. Rankings (12/11) ====================================== */
.rk li{border-bottom-color:var(--va-line)}
.rk-pos{background:rgba(255,255,255,.07);color:var(--va-text2)}
.rk li.rk-1 .rk-pos,.rk-pos.rk-ouro{background:var(--va-turq);color:#fff;
  box-shadow:0 0 18px -6px rgba(45,212,191,.8)}
.rk-main b{color:var(--va-text)}
.rk-main small{color:var(--va-text3)}
.rk-track{background:rgba(255,255,255,.08)}
.rk-track i{background:linear-gradient(90deg,var(--va-turq),var(--va-vivo))}
.rk li.rk-1 .rk-track i{background:linear-gradient(90deg,var(--va-vivo),var(--va-claro))}
.rk-val{color:var(--va-text)}
.rk-nota{color:var(--va-text3)}
.rk-nota b{color:var(--va-text2)}

/* ===== 20. Calendário de compra (12/11) ========================== */
.cal-nav b{color:var(--va-text)}
.cal-card{background:var(--va-bg2)}
.cal-card header b,.cal-preco{color:var(--va-text)}
.cal-preco em{color:var(--va-text3)}
.cal-nums dt{color:var(--va-text3)}
.cal-nums dd{color:var(--va-text2)}
.cal-verdito{color:var(--va-text2)}
.cal-verdito b{color:var(--va-text)}
.cal-verdito small{color:var(--va-text3)}
.cal-tab th{color:var(--va-text3)}
.cal-tab th[scope="row"]{color:var(--va-text)}
.cal-tab th.cal-hoje{color:var(--va-claro)}
.cal-melhor{box-shadow:0 0 0 1px var(--va-vivo),0 0 20px -8px rgba(45,212,191,.9)}
.cal-cel small{color:var(--va-vivo)}
.cal-prod button{background:var(--va-bg2);border-color:var(--va-line);color:var(--va-text2)}
.cal-prod button:hover{border-color:var(--va-line2);color:var(--va-text)}
.cal-prod button.on{background:var(--va-turq);border-color:var(--va-turq);color:#fff}
.cal-dow{color:var(--va-text3)}
.cal-dia b{color:var(--va-text)}
.cal-dia.cal-hj{box-shadow:0 0 0 2px var(--va-vivo)}
.cal-resumo div{background:var(--va-bg2);border-color:var(--va-line)}
.cal-resumo dt{color:var(--va-text3)}
.cal-resumo dd{color:var(--va-text)}
.cal-resumo dd span{color:var(--va-text3)}

/* ===== 21. Mapa real (contorno IBGE, 12/11) ====================== */
.cmap-mun path{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.17);
  stroke-width:1.6px;vector-effect:non-scaling-stroke}
.cmap-mun path:hover{fill:rgba(45,212,191,.10);stroke:rgba(45,212,191,.45)}

/* ===== 22. Ficha dos veículos (12/11) ============================ */
.vw-card{background:var(--va-bg2);border-color:var(--va-line)}
.vw-card header b{color:var(--va-text)}
.vw-modelo{color:var(--va-text)}
.vw-specs dt{color:var(--va-text3)}
.vw-specs dd{color:var(--va-text2)}
/* desenho esquemático: sem cor nova, só a paleta */
.vw-cab{fill:var(--va-turq)}
.vw-vidro{fill:rgba(255,255,255,.30)}
.vw-tanque{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.34);stroke-width:1.5}
.vw-chassi{fill:rgba(255,255,255,.26)}
.vw circle{fill:rgba(255,255,255,.42)}
.vw circle.vw-aro{fill:var(--va-bg2)}
.vw-cons{border-top-color:var(--va-line)}
.vw-cons b{color:var(--va-text)}
.vw-cons small{color:var(--va-text3)}
.vw-cons.c-bom{background:rgba(45,212,191,.10)}
.vw-cons.c-bom b{color:var(--va-vivo)}
.vw-cons.c-bom span{background:rgba(45,212,191,.18);color:var(--va-vivo)}
.vw-cons.c-medio{background:rgba(255,255,255,.04)}
.vw-cons.c-medio span{background:rgba(255,255,255,.10);color:var(--va-text2)}
.vw-cons.c-ruim{background:rgba(242,200,121,.09)}
.vw-cons.c-ruim b{color:var(--va-ambar)}
.vw-cons.c-ruim span{background:rgba(242,200,121,.18);color:var(--va-ambar)}

/* ===== 23. Consumo no cartão do candidato (12/11) ================
   Central Logística: o custo por km agora é de cada caminhão, não um
   número único. A cor repete a da ficha do veículo, de propósito —
   é a mesma informação, em outra tela.
   ================================================================ */
.cn-cons.c-bom{background:rgba(45,212,191,.12)}
.cn-cons.c-bom b{color:var(--va-vivo)}
.cn-cons.c-medio{background:rgba(255,255,255,.05)}
.cn-cons.c-ruim{background:rgba(242,200,121,.11)}
.cn-cons.c-ruim b{color:var(--va-ambar)}