/* =========================================================================
   goFlux View — design system (etapa E1)
   Identidade: skill goflux-brand. Produto View → acento AMARELO #FFDD00 sobre
   base grafite #1D1D33. Fonte Nunito. CSS estático compilado (sem runtime).
   ========================================================================= */
:root{
  --bg:#15121f;            /* fundo grafite profundo (brand dark) */
  --bg-2:#191527;
  --surface:#1d1d33;       /* card grafite oficial */
  --surface-2:#23233b;
  --surface-3:#2a2a45;
  --border:#302d49;
  --border-soft:#272340;
  --text:#ececf4;
  --text-soft:#d2d2e0;     /* prosa longa (narrativas, alertas, modal) — um passo abaixo de --text */
  --muted:#9a9ab4;
  --muted-2:#84849e;       /* >=4.5:1 sobre a sidebar (WCAG AA); era #74748c (3.79:1) */
  --view:#ffdd00;          /* acento do produto View */
  --view-700:#e6c700;
  --view-dim:rgba(255,221,0,.12);
  --view-dim-2:rgba(255,221,0,.06);
  --pos:#2fcf78;
  --neg:#ff5d6c;
  --azul:#56a8ff;
  --grafite:#1d1d33;
  /* Variantes "-text" para uso como cor de texto/borda sobre --surface/--bg.
     --view/--pos/--neg ficam vívidos para swatches, gráficos e fundos (--btn--primary,
     badges) nos dois temas; mas texto direto nessas cores mede só 1.35:1/2.04:1/2.99:1
     contra branco (tema claro) — reprova WCAG AA (4.5:1). As variantes abaixo herdam o
     valor vívido no escuro (onde já passa) e são escurecidas só no tema claro. */
  --view-text:var(--view);
  --pos-text:var(--pos);
  --neg-text:var(--neg);
  --azul-text:var(--azul);
  --azul-dim:rgba(86,168,255,.12);
  --piso-text:#ff7e00;      /* status "piso ANTT" (calculadora) — mesma lógica de contraste acima */
  /* Escala tipográfica — 8 degraus (consolida os tamanhos ad-hoc de TEXTO; ícones/glyphs
     usam seus próprios tamanhos e ficam de fora). O par 2xl/3xl preserva a distinção
     KPI (25) × KPI herói (29) que uma escala mais curta colapsaria. */
  --fs-2xs:10px;            /* labels/caption uppercase */
  --fs-xs:11px;             /* metadados, badges */
  --fs-sm:12.5px;           /* corpo secundário, notas */
  --fs-md:14px;             /* corpo padrão */
  --fs-lg:17px;             /* título de seção */
  --fs-xl:22px;             /* título de página */
  --fs-2xl:25px;            /* KPI */
  --fs-3xl:29px;            /* KPI herói / número herói */
  /* Cores semânticas (estado do SISTEMA) — desacopladas de --pos/--neg (leitura de
     MERCADO: frete sobe/desce). Use estas p/ erro/sucesso/aviso/informação, nunca
     as de mercado. Variantes "-text" escurecem no tema claro (contraste AA). */
  --success:#2fcf78; --success-text:var(--success);
  --danger:#ff5d6c;  --danger-text:var(--danger);
  --warning:#ff7e00; --warning-text:var(--warning);
  --info:#56a8ff;    --info-text:var(--info);
  --radius:14px;
  --radius-sm:10px;
  --space-grid:14px;
  --space-section:16px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-soft:0 4px 14px -8px rgba(0,0,0,.5);
  --sidebar-w:250px;
  --sidebar-top:#1b1830;      /* topo do gradiente do menu lateral */
  --sidebar-bottom:#141022;   /* base do gradiente */
  --topbar-bg:rgba(21,18,31,.82);
  --font:'Nunito','Trebuchet MS',Verdana,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
button,input,select,textarea{font-family:inherit}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
/* Foco de teclado visível e consistente (botões, links, abas). --view-text
   garante contraste do anel nos dois temas; inputs/selects mantêm o próprio anel. */
:focus-visible{outline:2px solid var(--view-text);outline-offset:2px;border-radius:4px}
.input:focus-visible,.select:focus-visible{outline:none}
/* Link "pular para o conteúdo": invisível até receber foco de teclado (1º Tab da página) */
.skip-link{position:fixed;top:-48px;left:12px;z-index:200;background:var(--view);color:var(--grafite);
  font-weight:800;font-size:var(--fs-sm);padding:9px 16px;border-radius:var(--radius-sm);transition:top .15s ease}
.skip-link:focus-visible{top:12px;outline:2px solid var(--text);outline-offset:2px}
::selection{background:var(--view);color:var(--grafite)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#33304d;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- loading bar (navegação de página inteira) ------------------- */
.loading-bar{
  position:fixed;top:0;left:0;width:100%;height:3px;z-index:100;
  opacity:0;pointer-events:none;transition:opacity .12s ease;
  background:linear-gradient(90deg,transparent,var(--view),var(--view-700),transparent);
  background-size:35% 100%;background-repeat:no-repeat;
}
.loading-bar.active{opacity:1;animation:gf-loading-slide 1.1s ease-in-out infinite}
@keyframes gf-loading-slide{
  0%{background-position:-35% 0}
  100%{background-position:135% 0}
}
@media(prefers-reduced-motion:reduce){
  .loading-bar.active{animation:none;background:var(--view);background-size:100% 100%}
}

/* ---------- shell ------------------------------------------------------- */
.app-shell{display:flex;min-height:100vh;transition:margin-right .2s ease}
/* Chat aberto: o conteúdo se espreme para a esquerda, abrindo espaço para o
   painel em vez de ser coberto por ele. A largura do empurrão é a mesma do chat
   (--gf-chat-w), então segue o redimensionamento. Não vale em fullscreen/mobile
   (lá o chat ocupa tudo) — quem controla a classe é chat.syncSqueeze(). */
html.gf-chat-squeeze .app-shell{margin-right:var(--gf-chat-w,400px)}
@media(prefers-reduced-motion:reduce){.app-shell{transition:none}}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  /* Acompanha o tema: os dois tons vêm de tokens redefinidos em
     :root[data-theme="light"]. Antes era um gradiente escuro fixo, e o menu
     ficava preto no tema claro. */
  background:linear-gradient(180deg,var(--sidebar-top),var(--sidebar-bottom));
  border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;z-index:50;
  transition:width .18s ease;
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}
.sidebar__brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.sidebar__home{display:flex;align-items:center;min-width:0}
/* Card fixo atrás do logo. A arte "View_Claro" é branca+amarela e some quando o
   menu clareia no tema claro. Um fundo grafite de cor FIXA (não muda com o tema)
   mantém o logo legível sempre: no escuro ele quase funde com o menu, no claro
   vira um quadradinho discreto que segura o contraste. */
.sidebar__logo{height:30px;width:auto;box-sizing:content-box;
               background:#1b1830;padding:6px 10px;border-radius:9px}
/* Marca compacta "g" (mesma do favicon): substitui a logo no rail recolhido */
.sidebar__mark{display:none;width:30px;height:30px;flex:0 0 30px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--view);
  font-size:18px;font-weight:800;line-height:1;place-items:center}
/* Seta de reabrir — só aparece com a sidebar recolhida (rail). Tab sutil
   encostada na borda, com um único aceno curto ao aparecer; no hover reforça
   com cor e um nudge. */
.sidebar__expand{display:none;position:absolute;top:50%;right:-11px;
  transform:translateY(-50%);width:22px;height:36px;z-index:51;
  border:1px solid var(--border);border-left:0;border-radius:0 10px 10px 0;
  background:var(--surface-2);color:var(--muted-2);cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease}
.sidebar__expand svg{width:13px;height:13px}
html[data-sidebar="rail"] .sidebar__expand{
  display:grid;place-items:center;animation:sidebarExpandHint 1.1s ease-in-out .6s 1}
.sidebar__expand:hover{background:var(--view-dim);color:var(--view);
  transform:translateY(-50%) translateX(2px)}
@keyframes sidebarExpandHint{
  0%,100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(-50%) translateX(3px)}
}
@media(prefers-reduced-motion:reduce){html[data-sidebar="rail"] .sidebar__expand{animation:none}}
@media(max-width:980px){.sidebar__expand{display:none!important}}
/* Seta de recolher — o par visual da seta de abrir. A sidebar expandida já
   tem o pino pra isso, então esta fica discreta: só aparece no hover/foco da
   sidebar, em vez de ficar sempre visível competindo com o conteúdo. */
.sidebar__collapse{display:none;position:absolute;top:50%;right:-11px;
  transform:translateY(-50%);width:22px;height:36px;z-index:51;place-items:center;
  border:1px solid var(--border);border-left:0;border-radius:0 10px 10px 0;
  background:var(--surface-2);color:var(--muted-2);cursor:pointer;opacity:0;
  transition:background .15s ease,color .15s ease,opacity .15s ease}
.sidebar__collapse svg{width:13px;height:13px}
/* Sempre visível: depender do hover na borda escondia o controle de quem não
   sabia que ele existia. */
html:not([data-sidebar="rail"]) .sidebar__collapse{display:grid;opacity:1}
.sidebar__collapse:hover{background:var(--view-dim);color:var(--view);opacity:1}
@media(max-width:980px){.sidebar__collapse{display:none!important}}
/* Scroll continua funcionando (roda do mouse/teclado); só a barra some — numa
   coluna estreita e escura a barra nativa cria uma faixa cinza feia na borda. */
.sidebar__nav{flex:1;overflow-y:auto;padding:6px 12px 16px;
  scrollbar-width:none;-ms-overflow-style:none}
.sidebar__nav::-webkit-scrollbar{display:none}
.nav-group{margin-top:16px}
.nav-group__label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);padding:0 10px 7px}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--muted);font-weight:700;font-size:var(--fs-md);
  position:relative;margin-bottom:2px;transition:background .15s,color .15s;
}
.nav-item svg{width:18px;height:18px;flex:0 0 18px;stroke-width:2}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--view-dim);color:var(--view)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--view)}
/* roadmap ("em breve"): acordeão recolhido por padrão, sóbrio — sem link/ação */
.nav-group--soon{margin-top:20px;padding-top:14px;border-top:1px solid var(--border-soft)}
.nav-group__toggle{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;padding:0 10px 7px;margin:0;cursor:pointer;
  font:inherit;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);transition:color .15s;
}
.nav-group__toggle:hover{color:var(--muted)}
.nav-group__toggle .nav-group__label{padding:0}
.soon-count{
  margin-left:auto;font-size:var(--fs-2xs);font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--muted-2);background:var(--surface-2);border-radius:99px;padding:1px 7px;
  font-variant-numeric:tabular-nums;
}
.nav-group__chevron{flex:0 0 auto;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.nav-group--soon.open .nav-group__chevron{transform:rotate(90deg)}
.nav-group__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1)}
.nav-group--soon.open .nav-group__panel{grid-template-rows:1fr}
.nav-group__panel-inner{overflow:hidden;min-height:0}
.nav-item--soon{opacity:.6;cursor:default;pointer-events:none;font-weight:600;font-size:var(--fs-sm)}
.nav-item--soon .nav-item__dot-wrap{display:flex;flex:0 0 18px;align-items:center;justify-content:center}
.nav-item--soon .dot{width:5px;height:5px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;height:62px;
  display:flex;align-items:center;gap:14px;padding:0 22px;
  background:var(--topbar-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar__title{display:flex;flex-direction:column;line-height:1.1}
.topbar__title h1{font-size:var(--fs-lg);font-weight:800}
.topbar__title span{font-size:var(--fs-xs);color:var(--muted)}
.topbar__tickers{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ticker{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:5px 11px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.ticker b{color:var(--text);font-size:var(--fs-sm);margin-left:5px;font-variant-numeric:tabular-nums}
.ticker .chg{margin-left:5px;font-weight:800}
.iconbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--view-text);font-weight:700;cursor:pointer;transition:background .15s ease}
.iconbtn:hover{background:var(--surface-3)}
.menu-toggle{display:none}
.content{padding:22px;max-width:1320px;width:100%;margin:0 auto}

/* ---------- componentes ------------------------------------------------- */
.grid{display:grid;gap:var(--space-grid)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
/* Faixas de KPI (topo das telas). cols-4 mantém UMA linha e rola na horizontal
   quando falta largura. cols-5 (cockpit) usa auto-fit: em desktop fica em uma
   linha e, em tela estreita, quebra para 2-3 por linha em vez de esconder KPI
   atrás de scroll lateral — teste do energúmeno: todo KPI visível sem rolagem.
   cols-4/cols-5 são usados só por essas faixas; não afeta os demais blocos. */
.cols-4{grid-template-columns:repeat(4,minmax(150px,1fr));overflow-x:auto}
.cols-5{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:1100px){.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.cols-2,.cols-3{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.card__pad{padding:18px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-soft)}
.panel-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text);margin-bottom:14px}
.panel-title::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--view)}
/* variante com ação no canto (ex.: link "ver todas") — o título quebra e o link vai pra direita */
.panel-title--actions{flex-wrap:wrap;gap:.5rem}
.panel-link{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--view-text);font-size:var(--fs-xs);text-transform:none;letter-spacing:0}
/* Subtítulo "história" (storytelling com dados): a conclusão do gráfico em uma frase,
   logo abaixo do título do painel — foco antes de o olho chegar às barras. */
.panel-story{font-size:var(--fs-sm);color:var(--muted);font-weight:600;line-height:1.45;margin:2px 0 10px}
.section-gap{margin-bottom:var(--space-section)}

.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;position:relative;overflow:hidden;display:flex;flex-direction:column}
/* KPI sem sparkline (ex.: erro do modelo): centra o conteúdo pra não sobrar vão na base */
.kpi--nospark{justify-content:center}
.kpi__label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.kpi__value{font-size:var(--fs-2xl);font-weight:800;margin-top:3px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi__detail{font-size:var(--fs-xs);color:var(--muted);margin-top:1px}
.kpi__spark{margin-top:10px;height:34px}

/* Zonas da tela: segmenta o empilhado de painéis (todos iguais) em blocos com
   significado — "Rota selecionada" vs "Mercado". Hierarquia por rótulo/posição,
   um acento só (a barra amarela marca a zona; os painéis dentro são irmãos). */
.zone-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:26px 0 13px}
.zone-head--first{margin-top:2px}
.zone-head__k{font-size:var(--fs-sm);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text);position:relative;padding-left:13px}
.zone-head__k::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:14px;border-radius:2px;background:var(--view)}
.zone-head__sub{font-size:var(--fs-sm);color:var(--muted);font-weight:600}

/* Hierarquia dos KPIs: um "herói" (o número que o trader olha primeiro, com filete
   de acento no topo) e os cards "beta" recuados — menos confiança que o realizado. */
.kpi--hero{border-color:rgba(255,221,0,.35)}
.kpi--hero::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--view)}
.kpi--hero .kpi__value{font-size:var(--fs-3xl)}
.kpi--beta{background:var(--bg-2)}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:99px;border:1px solid var(--border)}
.badge--view{background:var(--view-dim);border-color:rgba(255,221,0,.35);color:var(--view-text)}
.badge--pos{background:rgba(47,207,120,.12);border-color:rgba(47,207,120,.35);color:var(--pos-text)}
.badge--neg{background:rgba(255,93,108,.12);border-color:rgba(255,93,108,.35);color:var(--neg-text)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

.pos{color:var(--pos-text);font-weight:800}
.neg{color:var(--neg-text);font-weight:800}
.muted{color:var(--muted)}
/* "beta" é status, não marca — usa --azul (reservado p/ status), não o amarelo
   de navegação/ação primária/foco, para não competir pelo mesmo significado. */
.beta-tag{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--azul-text);background:var(--azul-dim);border:1px solid rgba(86,168,255,.35);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:middle}
.sidebar .nav-item .beta-tag{margin-left:auto}
.slider-row{margin-bottom:14px}
.slider-row label{display:flex;justify-content:space-between;font-size:var(--fs-sm);font-weight:700;margin-bottom:6px}
.slider-row label span{color:var(--view-text);font-weight:800}
.slider-row input[type=range]{width:100%;accent-color:var(--view)}
.status-ok{color:var(--pos-text);font-weight:700}
.status-beta{color:var(--azul-text);font-weight:700}
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:28px;text-align:center;color:var(--muted);background:var(--surface-2)}
/* Notas de rodapé dos painéis: romano (itálico a ~11px degrada leitura) e 12px. */
.note{font-size:var(--fs-sm);color:var(--muted);line-height:1.55;margin-top:12px}

/* botões pílula (marca) e controles */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:700;font-size:var(--fs-sm);padding:8px 16px;border-radius:99px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--surface-3)}
.btn--primary{background:var(--view);color:var(--grafite);border-color:var(--view)}
.btn--primary:hover{background:var(--view-700)}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.select,.input{appearance:none;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:9px 13px;font-size:var(--fs-md);font-family:var(--font);width:100%;transition:border-color .15s ease,box-shadow .15s ease}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239a9ab4' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.input:focus,.select:focus{outline:none;border-color:var(--view-text);box-shadow:0 0 0 3px var(--view-dim)}
.controls{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
/* barra de ações dos filtros: agrupa Limpar + Piso ANTT + Favoritas e joga o grupo
   para a direita, separado dos campos de busca (antes eram style= inline soltos). */
.filter-actions{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.seg button{border:0;background:var(--surface-2);color:var(--muted);min-height:44px;padding:9px 15px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;transition:background .12s,color .12s}
.seg button.on{background:var(--view);color:var(--grafite)}
/* variante compacta (cabeçalhos de gráfico, controles de sazonalidade): mantém baixa */
.seg--sm button{min-height:0;padding:5px 11px;font-size:var(--fs-xs)}

/* Busca de rota (search-first) — Forecast e Analytics. Dois campos de digitação
   (origem/destino) com filtro opcional por UF; a lista só aparece ao focar/digitar
   (sem lista longa por padrão). Ver static/js/route_search.js. */
.route-search{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
/* os campos crescem p/ preencher a linha inteira (sem vão à direita); produto não estica */
.route-search .rs-field{display:flex;flex-direction:column;gap:5px;flex:1 1 240px;min-width:200px}
.route-search .rs-field--prod{flex:0 1 180px;min-width:150px}
.route-search .rs-field>label{font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
/* Empilhado (drawer "Rota comparativa"): uma coluna, campos em largura total. */
.route-search--stack{flex-direction:column;align-items:stretch}
.route-search--stack .rs-field,.route-search--stack .rs-field--prod{flex:1 1 auto;min-width:0;width:100%}
.rs-typeahead{position:relative;flex:1 1 auto}
.rs-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;max-height:280px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:5px}
.rs-menu .rs-opt{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--text);
  font-family:var(--font);font-size:var(--fs-sm);padding:8px 10px;border-radius:8px;cursor:pointer}
.rs-menu .rs-opt:hover,.rs-menu .rs-opt:focus{background:var(--view-dim);outline:none}
.rs-menu .rs-empty{padding:8px 10px;font-size:var(--fs-sm);color:var(--muted)}

/* Dropdown de seleção única com painel estilizado (mesmo visual do "Commodity"
   em Comex). O controle usa .select (herda o chevron); o painel lista .msel__opt
   com o item selecionado em destaque amarelo. */
.msel{position:relative}
.msel__control{text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msel__panel{position:absolute;z-index:31;top:calc(100% + 4px);left:0;right:0;min-width:170px;max-height:280px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:5px;display:flex;flex-direction:column;gap:1px}
.msel__panel[hidden]{display:none}
.msel__opt{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--text);
  font-family:var(--font);font-size:var(--fs-sm);padding:8px 10px;border-radius:8px;cursor:pointer}
.msel__opt:hover{background:var(--surface-3)}
.msel__opt.on{background:var(--view-dim);color:var(--view-text);font-weight:700}

/* Painéis de gráfico lado a lado: viram coluna flex e empurram o "Como ler" para
   o fim, alinhando o resumo dos dois painéis na mesma altura (grid já estica ambos
   à altura do mais alto). */
.panel--chart{display:flex;flex-direction:column}
.panel--chart>.legenda{margin-top:auto}

/* Tabela com ordenação por cabeçalho: cabeçalho clicável + seta indicando a coluna
   ativa e a direção. A coluna ativa recebe o acento do produto. */
table.tbl--sortable th[data-key]{cursor:pointer;user-select:none;white-space:nowrap}
table.tbl--sortable th[data-key]:hover{color:var(--text)}
table.tbl--sortable th[data-key]::after{content:"↕";margin-left:5px;font-size:9px;opacity:.35}
table.tbl--sortable th[aria-sort="ascending"]::after{content:"▲";opacity:1}
table.tbl--sortable th[aria-sort="descending"]::after{content:"▼";opacity:1}
table.tbl--sortable th[aria-sort]{color:var(--view-text)}

/* tabelas */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
/* z-index: sem isso, um <td> com filho position:relative (ex. .pctbar) que role
   por baixo do cabeçalho pinta por cima dele — DOM order desempata elementos
   posicionados com mesmo z-index, e o th vem antes do td no documento. */
table.tbl th{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:9px 10px;text-align:right;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1;background:var(--surface)}
table.tbl th:first-child,table.tbl td:first-child{text-align:left}
table.tbl td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--border-soft)}
/* Zebra sutil: ajuda a seguir a linha em tabelas longas (ex.: resumo por rota).
   Tinta neutra com alpha para funcionar igual nos dois temas; hover vem depois e vence. */
table.tbl tbody tr:nth-child(even) td{background:rgba(130,132,158,.06)}
table.tbl tbody tr:hover td{background:var(--surface-2)}
.scroll-y{max-height:420px;overflow:auto}

/* mapa de calor */
table.heat{width:100%;border-collapse:separate;border-spacing:3px;font-size:var(--fs-sm)}
table.heat th{font-size:var(--fs-2xs);color:var(--muted);font-weight:700;padding:3px 6px}
table.heat td{padding:7px 8px;text-align:center;font-weight:800;border-radius:7px;color:var(--text)}
table.heat td.lbl{background:transparent;color:var(--text);text-align:left;font-weight:700;white-space:nowrap}
table.heat thead th:first-child{text-align:left}

/* watchlist */
.watch{display:block;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;transition:.15s}
.watch:hover{border-color:var(--view-text);transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.watch__name{font-size:var(--fs-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.watch__row{display:flex;align-items:baseline;justify-content:space-between;margin-top:3px}
.watch__px{font-size:var(--fs-xs);color:var(--muted)}
.watch__to{color:var(--text)}
.watch__spark{height:30px;margin-top:7px}

/* detalhes / legenda */
details.legenda{margin-top:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-2)}
details.legenda summary{cursor:pointer;padding:9px 13px;font-size:var(--fs-sm);font-weight:700;color:var(--view-text);list-style:none;
  display:flex;align-items:center;gap:8px;border-radius:var(--radius-sm);transition:background .15s ease}
details.legenda summary:hover{background:var(--surface-2)}
details.legenda summary::-webkit-details-marker{display:none}
/* Chevron de "abre/fecha": máscara colorida por currentColor (herda --view-text nos dois
   temas) e gira 180° quando o bloco está aberto — afordância clara de acordeão. */
details.legenda summary::after{content:"";width:15px;height:15px;flex:0 0 15px;margin-left:auto;
  background:currentColor;transition:transform .18s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
details.legenda[open] summary::after{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){details.legenda summary::after{transition:none}}
details.legenda .corpo{padding:0 14px 13px;font-size:var(--fs-sm);color:var(--text-soft);line-height:1.65}
/* Resumo de 1 frase no topo da legenda — leitura rápida p/ quem tem pressa */
.legenda-lead{display:block;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border-soft);
  font-size:var(--fs-sm);font-weight:800;color:var(--text)}

/* Dica de descoberta: pisca o chevron algumas vezes ao carregar a página, só enquanto
   fechado — chama atenção pra "dá pra abrir" sem exigir clique. Para sozinho depois de
   3 ciclos (não fica piscando pra sempre) e some assim que o usuário abre o bloco. */
@keyframes gf-chevron-hint{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.25)}}
details.legenda--hint:not([open]) summary::after{animation:gf-chevron-hint 1.1s ease-in-out 3}
@media(prefers-reduced-motion:reduce){details.legenda--hint:not([open]) summary::after{animation:none}}
.alert{background:var(--view-dim-2);border-left:3px solid var(--view);padding:11px 15px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-soft);margin-bottom:14px}

/* charts */
.chart{width:100%}
.js-plotly-plot,.plot-container{width:100%!important}
/* Cantos arredondados por padrão nas caixas de anotação dos gráficos (chip "hoje",
   callout "Vale sazonal", rótulos de pico/vale, piso ANTT). Plotly não expõe raio de
   borda, então arredonda o <rect> de fundo da anotação via rx/ry do SVG. */
.js-plotly-plot .annotation .bg{rx:6px;ry:6px}
/* "hoje": ponto branco pulsante (glow) sobre o preço atual no gráfico de projeções.
   O template marca o ponto (meta.pulse="hoje") com a classe .hoje-pulse após o plot. */
@keyframes hoje-pulse{
  0%,100%{filter:drop-shadow(0 0 2px rgba(236,236,244,.9));transform:scale(1)}
  50%{filter:drop-shadow(0 0 10px rgba(236,236,244,.5));transform:scale(1.18)}}
.chart path.point.hoje-pulse{transform-box:fill-box;transform-origin:center;
  animation:hoje-pulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.chart path.point.hoje-pulse{animation:none}}

/* Safras — dashboard de cultura única: mapa (2fr) + gráfico (3fr) na mesma linha,
   alturas casadas para o conjunto caber numa tela 1080p sem rolagem. */
.safras-grid{display:grid;grid-template-columns:minmax(320px,2fr) 3fr;gap:14px}
@media(max-width:1100px){.safras-grid{grid-template-columns:1fr}}
.safras-map{width:100%;height:400px;display:flex;align-items:center;justify-content:center}
/* Barra de % inline nas células do ranking (leitura rápida sem varrer números). */
.pctbar{display:inline-block;vertical-align:middle;width:56px;height:5px;margin-right:8px;
  border-radius:3px;background:rgba(130,132,158,.18);position:relative;overflow:hidden}
.pctbar::after{content:"";position:absolute;inset:0;width:var(--w,0%);border-radius:3px}
.pctbar--view::after{background:var(--view)}
.pctbar--muted::after{background:var(--muted)}

/* Projeções — gráfico da projeção à esquerda + mapa-locador da rota (âncora
   espacial) à direita, como referência de "onde" ao lado do "quanto". */
.proj-split{display:grid;grid-template-columns:1fr minmax(280px,340px);gap:16px;align-items:stretch}
.proj-split--nomap{grid-template-columns:1fr}
@media(max-width:1100px){.proj-split{grid-template-columns:1fr}}
.route-card{display:flex;flex-direction:column;gap:12px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px}
.route-card__map{flex:1;min-height:260px;display:flex;align-items:center;justify-content:center}
.route-card__map svg{max-height:400px}
.route-card__cap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.route-card__prod{flex-basis:100%;text-align:center;font-size:var(--fs-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2)}
.route-card__pt{color:var(--text)}
.route-card__pt--dest{color:var(--view-text)}
.route-card__arrow{color:var(--view-text);font-weight:800}
/* fluxo do frete: tracejado curto correndo origem→destino; halo pulsante no destino */
@keyframes route-dash{to{stroke-dashoffset:-120}}
@keyframes route-halo{0%,100%{opacity:.30}50%{opacity:.10}}
.route-flow{animation:route-dash 2.6s linear infinite}
.route-halo{animation:route-halo 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.route-flow,.route-halo{animation:none}}

/* Controles de Sazonalidade: chips de ano (multi-seleção) + segs de modo/tipo */
.seas-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 12px}
.seas-years{display:inline-flex;flex-wrap:wrap;gap:4px;margin-right:auto}
.seas-ctrls .chip{padding:3px 10px;border-radius:9999px;border:1px solid var(--border);
  background:var(--bg-2);color:var(--muted);font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  font-family:inherit;line-height:1.6}
.seas-ctrls .chip:hover{color:var(--text);border-color:var(--muted)}
.seas-ctrls .chip.on{background:var(--view-dim);border-color:var(--view);color:var(--view-text)}

/* Resumo por rota (largura cheia): a coluna Rota nunca quebra linha */
#resumoTable td:first-child,#resumoTable th:first-child{white-space:nowrap}

/* Rotas favoritas — badge no gatilho + conteúdo do drawer (drawer usa .antt-drawer) */
.fav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;padding:0 5px;margin-left:6px;border-radius:9999px;background:var(--view-dim);
  color:var(--view-text);font-size:var(--fs-xs);font-weight:800}
.fav-body{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.fav-current{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg-2);border:1px solid var(--border)}
.fav-current__info{display:flex;flex-direction:column;min-width:0}
.fav-current__label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.fav-current__route{font-size:var(--fs-sm);font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-toggle{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;
  border:1px solid var(--border);border-radius:9999px;padding:6px 12px;background:var(--surface);
  color:var(--muted);font-size:var(--fs-sm);font-weight:700;font-family:inherit}
.fav-toggle svg{width:15px;height:15px}
.fav-toggle:hover:not(:disabled){color:var(--text);border-color:var(--muted)}
.fav-toggle.on{background:var(--view-dim);border-color:var(--view);color:var(--view-text)}
.fav-toggle.on svg{fill:var(--view)}
.fav-toggle:disabled{opacity:.5;cursor:default}
.fav-search{position:relative}
.fav-search .icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--muted)}
.fav-search input{width:100%;padding:8px 10px 8px 30px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-2);color:var(--text);font-size:var(--fs-sm);
  font-family:inherit}
.fav-search input:focus{outline:none;border-color:var(--view);background:var(--surface)}
.fav-list{display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1;min-height:120px}
.fav-empty{padding:20px 8px;color:var(--muted);font-size:var(--fs-sm);text-align:center}
.fav-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;
  padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent}
.fav-item:hover{background:var(--bg-2)}
.fav-item:focus-visible{outline:2px solid var(--view);outline-offset:1px}
.fav-item.active{background:var(--view-dim);border-color:var(--view)}
.fav-item.dragging{opacity:.5}
.fav-item.drag-over{border-color:var(--view);border-style:dashed}
.fav-route{grid-column:1;grid-row:1;font-size:var(--fs-sm);font-weight:600;color:var(--text);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis}
.fav-sub{grid-column:1;grid-row:2;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fav-prod{font-size:var(--fs-xs);color:var(--muted)}
.fav-val{font-size:var(--fs-xs);font-weight:700;color:var(--text-soft);white-space:nowrap}
.fav-val b{font-weight:800}
.fav-del{grid-column:2;grid-row:1/span 2;align-self:center;background:none;border:0;
  color:var(--neg);cursor:pointer;padding:4px;border-radius:8px;opacity:.5;display:inline-flex;
  transition:opacity .15s,background .15s}
.fav-del svg{width:15px;height:15px}
.fav-item:hover .fav-del,.fav-item:focus-within .fav-del{opacity:1}
.fav-del:hover{color:var(--neg);background:rgba(255,93,108,.14)}
.fav-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:8px;border-top:1px solid var(--border-soft);font-size:var(--fs-sm);color:var(--muted)}
.fav-clear{display:inline-flex;align-items:center;gap:5px;background:none;
  border:1px solid var(--border);border-radius:9999px;padding:4px 10px;color:var(--muted);
  cursor:pointer;font-size:var(--fs-sm);font-family:inherit}
.fav-clear svg{width:14px;height:14px}
.fav-clear:hover{color:var(--text);border-color:var(--muted)}
.fav-clear.armed{background:var(--view-dim);border-color:var(--view);color:var(--view-text);font-weight:700}

/* página de título / stub */
.page-head{margin-bottom:18px}
.page-head h1{font-size:var(--fs-xl);font-weight:800}
.page-head p{color:var(--muted);font-size:var(--fs-md);margin-top:4px;max-width:680px}

/* modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(8,8,15,.82);display:none;align-items:flex-start;justify-content:center;padding:34px 18px;overflow:auto}
.modal.open{display:flex}
.modal__card{max-width:760px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}

/* login */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1000px 500px at 80% -10%,var(--view-dim-2),transparent 60%),var(--bg)}
.auth__card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.auth__brand{display:flex;justify-content:center;margin-bottom:6px}
.auth__brand img{height:34px}
.auth__sub{text-align:center;color:var(--muted);font-size:var(--fs-sm);margin-bottom:22px}
.auth__form{display:flex;flex-direction:column;gap:14px}
.auth__err{background:rgba(255,93,108,.1);border:1px solid rgba(255,93,108,.4);color:#ffb3ba;font-size:var(--fs-sm);padding:9px 12px;border-radius:var(--radius-sm)}
.auth__hint{text-align:center;font-size:var(--fs-xs);color:var(--muted-2);margin-top:16px}


/* ---------- sidebar recolhida: rail de ícones (desktop) --------------------
   O pino recolhe/expande a sidebar EM FLUXO (sticky, sem overlay): recolhida
   vira um rail de 64px só com ícones e o conteúdo fica ao lado — nunca é
   coberto/cortado; expandida volta aos 250px. Os ícones mantêm o title como
   tooltip no estado recolhido. Estado em html[data-sidebar="rail"]
   (localStorage, aplicado antes da pintura). Abaixo de 981px vale o off-canvas
   mobile (o pino some — lá o menu é aberto pelo botão do topo). */
@media(min-width:981px){
  html[data-sidebar="rail"] .sidebar{width:64px;flex-basis:64px}
  /* marca: "g" centrada no topo do rail */
  html[data-sidebar="rail"] .sidebar__brand{flex-direction:column;gap:10px;padding:16px 0 12px}
  html[data-sidebar="rail"] .sidebar__home{justify-content:center}
  /* esconde QUALQUER filho da marca que não seja o "g" (a logo <img> ou, se o CDN
     falhar, o <strong> de fallback do onerror, que não tem a classe da img) */
  html[data-sidebar="rail"] .sidebar__home>:not(.sidebar__mark){display:none}
  html[data-sidebar="rail"] .sidebar__mark{display:grid}
  /* nav: só ícones, centrados; sem rótulos, labels de grupo ou roadmap */
  html[data-sidebar="rail"] .sidebar__nav{padding:6px 8px 16px}
  html[data-sidebar="rail"] .nav-item{justify-content:center;padding:9px 0;white-space:nowrap}
  html[data-sidebar="rail"] .nav-item span,
  html[data-sidebar="rail"] .nav-item .beta-tag,
  html[data-sidebar="rail"] .nav-group__label,
  html[data-sidebar="rail"] .nav-group--soon{display:none}
  html[data-sidebar="rail"] .nav-group{margin-top:8px}
  html[data-sidebar="rail"] .nav-item.active::before{left:-8px}
}

/* backdrop p/ sidebar mobile */
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45}
@media(max-width:980px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
  .sidebar.open{transform:translateX(0)}
  .backdrop.open{display:block}
  .menu-toggle{display:grid}
  .content{padding:16px}
  .topbar{padding:0 14px}
  .topbar__tickers{display:none}
}

/* ---------- tema CLARO (data-theme="light") ---------------------------- */
/* Tela e menu lateral acompanham o tema. O menu tem os próprios tokens de
   gradiente (--sidebar-top/--sidebar-bottom) para ficar um tom distinto do
   conteúdo, sem virar um bloco preto ao lado de uma tela branca. */
:root[data-theme="light"]{
  --bg:#f4f5fa; --bg-2:#eceef6;
  --surface:#ffffff; --surface-2:#f4f6fb; --surface-3:#eaedf5;
  --border:#e3e6f0; --border-soft:#edf0f7;
  --text:#1d1d33; --text-soft:#3f3f58; --muted:#5b5b73; --muted-2:#8a8aa3;
  --view-dim:rgba(255,221,0,.20); --view-dim-2:rgba(255,221,0,.10);
  --shadow:0 10px 30px -16px rgba(40,40,80,.25);
  --shadow-soft:0 4px 14px -10px rgba(40,40,80,.2);
  --topbar-bg:rgba(255,255,255,.82);
  /* escurecidas para >=4.5:1 sobre branco — os tokens vívidos ficam ilegíveis aqui */
  --view-text:#7d6e00; --pos-text:#17784c; --neg-text:#c73347;
  --azul-text:#2a63b8; --azul-dim:rgba(86,168,255,.16);
  --piso-text:#b35900;
  /* semânticas: texto escurecido p/ >=4.5:1 sobre branco */
  --success-text:#17784c; --danger-text:#c73347; --warning-text:#b35900; --info-text:#2a63b8;
}
/* O menu lateral acompanha o tema. WHY mudou: antes ele era forçado a ficar
   escuro no tema claro ("mantém o rail escuro"), o que deixava uma faixa preta
   ao lado de uma tela branca. Agora só o gradiente muda de tom; os tokens de
   texto e borda são os do tema, então o contraste vem de graça. */
:root[data-theme="light"]{
  --sidebar-top:#ffffff;
  --sidebar-bottom:#f0f2f9;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:#cbcedd;border-color:var(--bg)}
body{transition:background .18s ease, color .18s ease}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}

/* ── Botão "Piso ANTT" + drawer lateral (tela Projeções) ─────────────────── */
.antt-trigger{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;
  border-radius:99px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--muted);font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.antt-trigger svg{width:14px;height:14px;color:var(--azul-text)}
.antt-trigger:hover{border-color:var(--azul-text);color:var(--text)}
/* Estado SELECIONADO/ativo: drawer aberto (aria-expanded="true"). Combina fundo +
   borda + peso + marca "✓" — >=2 pistas, não depende só de cor (critério de baixa
   visão). Antes o botão não mudava nada ao abrir o drawer. */
.antt-trigger[aria-expanded="true"]{background:var(--view-dim);border-color:var(--view);
  color:var(--view-text);font-weight:800}
.antt-trigger[aria-expanded="true"] svg{color:var(--view-text)}
.antt-trigger[aria-expanded="true"]::after{content:"✓";font-weight:800;margin-left:2px}
.antt-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;
  transition:opacity .2s ease;z-index:2400}
.antt-overlay.open{opacity:1;pointer-events:auto}
.antt-drawer{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;
  background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow);
  z-index:2500;transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;padding:20px;gap:16px}
.antt-drawer.open{transform:translateX(0)}
.antt-head{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.antt-head h3{font-size:var(--fs-md);font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.04em}
.antt-subtitle{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.antt-close{width:28px;height:28px;border-radius:8px;color:var(--muted);font-size:20px;line-height:1;
  display:grid;place-items:center;cursor:pointer;border:none;background:none;flex-shrink:0}
.antt-close:hover{background:var(--surface-2);color:var(--text)}
.antt-content{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;overflow-y:auto}
.antt-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--text);cursor:pointer}
.antt-check input{width:16px;height:16px;accent-color:var(--azul-text);cursor:pointer}
.antt-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.antt-field{display:flex;flex-direction:column;gap:5px}
.antt-field>label{font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.antt-field .antt-auto{text-transform:none;letter-spacing:0;color:var(--azul-text);font-weight:600}
.antt-result{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--azul-dim);
  border:1px solid var(--azul-text);border-radius:var(--radius-sm)}
.antt-result-label{font-size:var(--fs-xs);font-weight:700;color:var(--azul-text);text-transform:uppercase;letter-spacing:.04em}
.antt-value{font-size:var(--fs-3xl);font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.antt-value .antt-unit{font-size:var(--fs-md);font-weight:700;color:var(--muted)}
.antt-meta{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.antt-note{font-size:var(--fs-xs);line-height:1.5;color:var(--muted);font-weight:500}
.antt-table-wrap{display:flex;flex-direction:column;gap:8px}
.antt-table-head{display:flex;align-items:baseline;justify-content:space-between}
.antt-table-head>span:first-child{font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.antt-table-sub{font-size:var(--fs-2xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.antt-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.antt-table th{text-align:right;font-size:var(--fs-2xs);font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.03em;padding:4px 6px;border-bottom:1px solid var(--border)}
.antt-table th:first-child,.antt-table td:first-child{text-align:left}
.antt-table td{text-align:right;padding:6px;color:var(--muted);font-weight:600;
  font-variant-numeric:tabular-nums;border-bottom:1px solid var(--border-soft)}
.antt-table tr.current td{background:var(--azul-dim);color:var(--text);font-weight:800}
.antt-table tr.current td:first-child{box-shadow:inset 2px 0 0 var(--azul-text)}

/* Iconografia (design system): padrão para ÍCONES NOVOS a partir de agora —
   Material Symbols Outlined, peso 400, 20-24px (ver guidelines/iconography no
   Design Sync). Os SVGs de traço já existentes na sidebar/topbar não usam
   esta classe; não foram (re)convertidos. Uso: <span class="icon-msym">nome_do_simbolo</span> */
.icon-msym{
  font-family:'Material Symbols Outlined';
  font-weight:normal;font-style:normal;
  font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}

/* ── Gráfico ampliado em pop-up (tela Analytics) ────────────────────────── */
.chart-expand{flex-shrink:0;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s}
.chart-expand:hover{border-color:var(--view-text);color:var(--view-text)}
.chart-expand .icon-msym{font-size:18px}
/* ícone dentro de botão de texto (ex.: "Limpar") — escala p/ a altura da fonte do botão */
.btn .icon-msym{font-size:17px;margin:-2px 0}
.chart-modal{position:fixed;inset:0;z-index:2600;display:grid;place-items:center;padding:32px}
.chart-modal[hidden]{display:none}
.chart-modal__backdrop{position:absolute;inset:0;background:rgba(8,8,18,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .24s ease}
.chart-modal__box{position:relative;width:min(1100px,94vw);height:min(80vh,760px);
  display:flex;flex-direction:column;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .24s ease,transform .24s cubic-bezier(.16,1,.3,1)}
.chart-modal.open .chart-modal__backdrop{opacity:1}
.chart-modal.open .chart-modal__box{opacity:1;transform:none}
.chart-modal__head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-shrink:0}
.chart-modal__title{font-size:var(--fs-sm);font-weight:800;color:var(--text);
  text-transform:uppercase;letter-spacing:.06em}
.chart-modal__close{width:30px;height:30px;border-radius:8px;border:none;background:none;
  color:var(--muted);font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer}
.chart-modal__close:hover{background:var(--surface-2);color:var(--text)}
.chart-modal__controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex-shrink:0}
.chart-modal__controls:empty{display:none}
.chart-modal__body{flex:1;min-height:0;position:relative}
.chart-modal__body .chart{height:100%}
.chart-modal__body .plotly-graph-div{height:100%!important}
@media(prefers-reduced-motion:reduce){
  .chart-modal__backdrop,.chart-modal__box{transition:none}
}

/* ── Modelos multi-modelo na tela de Projeções (portado do Monitor) ──────────
   Cada modelo é um quadradinho com o "saiba mais" deslizante; o popover #mon-info
   é preenchido por goflux.monInfo. O toggle .mon-band liga a faixa de incerteza no
   histórico. Classes/IDs mantidos idênticos para reusar o JS existente. */
.mon-models{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 10px}
.mon-model-wrap{position:relative;flex:0 1 auto;min-width:112px;max-width:190px;
                border:1px solid var(--border);border-radius:9px}
.mon-model-wrap.on{border-color:var(--view);box-shadow:0 0 0 1px var(--view) inset}
.mon-model-wrap.off{opacity:.42}
/* Chip enxuto: uma linha (ícone + nome), padding curto. A descrição vai no "i". */
.mon-model{display:flex;align-items:center;gap:6px;width:100%;border:0;border-radius:9px;
           padding:4px 24px 4px 9px;background:transparent;text-align:left;cursor:pointer;color:inherit}
.mon-model-wrap.off .mon-model{cursor:not-allowed}
.mon-model__ic{width:14px;height:14px;flex:none;color:var(--view-text,inherit);transform-origin:center}
.mon-model__name{font-weight:600;font-size:12.5px;white-space:nowrap}
.mon-model__tag{display:none}   /* descrição só no "i" (saiba mais), para o card ficar enxuto */
@keyframes monShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}
                    50%{transform:rotate(7deg)}80%{transform:rotate(-4deg)}}
.mon-model-wrap:not(.off):hover .mon-model__ic{animation:monShake .45s ease}
@media(prefers-reduced-motion:reduce){.mon-model-wrap:hover .mon-model__ic{animation:none}}
/* "Saiba mais": um "i" pequeno à direita, que só aparece no hover do card; clicar
   abre o popover. Fica acessível via teclado (:focus-visible) mesmo sem hover. */
.mon-model__more{position:absolute;top:50%;right:5px;transform:translateY(-50%);
                 width:15px;height:15px;padding:0;border-radius:50%;
                 border:1px solid var(--border);background:var(--surface);cursor:pointer;
                 display:flex;align-items:center;justify-content:center;
                 font-size:9.5px;font-weight:700;font-style:italic;line-height:1;
                 color:var(--muted);opacity:0;transition:opacity .12s ease,color .12s ease,border-color .12s ease}
.mon-model-wrap:hover .mon-model__more,
.mon-model__more:focus-visible{opacity:1}
.mon-model__more:hover{color:var(--view-text,inherit);border-color:var(--view)}
@media(prefers-reduced-motion:reduce){.mon-model__more{transition:opacity .01s}}
/* Cabeçalho dos motores de projeção: marca, discreta, que os 4 nomes são engines novos. */
.mon-models__head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:8px 0 6px}
.mon-models__name{font-size:12.5px;font-weight:600;color:var(--muted)}
.mon-info{position:fixed;z-index:2600;max-width:320px;
          background:var(--surface);border:1px solid var(--border);border-radius:12px;
          box-shadow:var(--shadow);padding:14px 16px 16px}
.mon-info__x{position:absolute;top:6px;right:8px;border:0;background:transparent;
             color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.mon-info__x:hover{color:var(--text)}
.mon-info__title{font-weight:700;font-size:14px;margin-bottom:8px;padding-right:16px}
.mon-info__why{font-size:13.5px;line-height:1.5;color:var(--text-soft)}
.mon-info__meta{font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:8px}
.mon-model-select{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 4px}
.mon-model-select label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mon-band{border:0;background:transparent;padding:2px 4px;cursor:pointer;
          font-size:11.5px;color:var(--muted-2);opacity:.45;
          transition:opacity .15s,color .15s}
.mon-band::before{content:"○ ";font-size:10px}
.mon-band:hover{opacity:.9}
.mon-band.on{opacity:.85;color:var(--view-text,inherit)}
.mon-band.on::before{content:"● "}
/* Pílula "Rotas multi-modelo": liga/desliga o painel com as rotas calibradas. */
.mm-row{margin-top:10px}
/* Fica na linha do Produto/Origem/Destino, à direita, alinhada à base dos campos. */
.rs-with-mm{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rs-with-mm .route-search{flex:1 1 auto}
.rs-with-mm .mm-pill{margin-left:auto}
/* Variante minimalista: sem caixa, texto discreto; acende quando ligada. */
.mm-pill--min{border-color:transparent;background:transparent;padding:6px 6px;color:var(--muted-2)}
.mm-pill--min:hover{border-color:transparent;color:var(--view-text,inherit)}
.mm-pill--min .mm-pill__count{border-color:var(--border)}
.mm-pill--min.on{background:transparent;box-shadow:none;border-color:transparent;
                 color:var(--view-text,inherit);font-weight:600}
.mm-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
         border-radius:999px;padding:7px 13px;background:transparent;color:var(--muted);
         font-size:13px;cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s}
.mm-pill:hover{border-color:var(--view)}
.mm-pill.on{border-color:var(--view);color:var(--view-text,inherit);font-weight:600;
            box-shadow:0 0 0 1px var(--view) inset}
.mm-pill__dot{width:8px;height:8px;border-radius:50%;background:var(--view);flex:none}
.mm-pill__count{font-size:11px;color:var(--muted);border:1px solid var(--border);
                border-radius:999px;padding:0 6px;line-height:16px}
.mm-pill.on .mm-pill__count{color:var(--view-text,inherit);border-color:var(--view)}
/* Painel com os chips das rotas calibradas. */
.mm-panel{margin:10px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;
          background:var(--surface-2)}
.mm-panel__lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-2);
               margin-bottom:8px}
.mm-chips{display:flex;flex-wrap:wrap;gap:8px}
.mm-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
         border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--text-soft);
         text-decoration:none;background:var(--surface);transition:border-color .12s,color .12s}
.mm-chip:hover{border-color:var(--view);color:var(--view-text,inherit)}
.mm-chip__prod{font-size:11px;color:var(--muted)}