/* Design system do painel, herdado do painel-rotasertoes (HOUER). */
:root{
  --primary-color:var(--acento); --accent-color:var(--acento); --bg-light:var(--fundo); --card-bg:var(--superficie);
  --text-primary:var(--texto); --text-secondary:var(--texto-2); --border-color:var(--borda);
  --shadow-sm:0 1px 2px 0 var(--sombra); --neutral-bar:var(--azul-90);
  --ambos:var(--azul);      /* azul    = os dois sentidos */
  --envia:var(--acento);      /* laranja = o lugar como ORIGEM */
  --recebe:var(--ameixa);     /* roxo    = o lugar como DESTINO */
}
*{margin:0;padding:0;box-sizing:border-box}
/* coluna flex: o mapa e a tabela preenchem o que sobrar da altura da janela, sem
   depender de subtrair pixels do header e da barra de filtros na mão */
body{font-family:var(--fonte),sans-serif;background:var(--bg-light);color:var(--text-primary);
     line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;
     height:100vh;height:100dvh;display:flex;flex-direction:column}   /* dvh: a barra do navegador móvel não transborda (18/09) */
.main-header,.barra-filtros{flex:0 0 auto}

/* ---------- header ---------- */
.main-header{background:var(--superficie);padding:0 40px;border-bottom:1px solid var(--border-color);
     box-shadow:var(--shadow-sm)}
/* a navegação vive na MESMA linha do logo: custo vertical zero */
.header-top{display:flex;align-items:center;gap:40px;height:64px}
.logo{height:58px;object-fit:contain}
/* nome do painel ao lado do logo, ocupa o espaço vertical que já sobrava no header (não o cresce) */
.header-marca{display:flex;align-items:center;gap:15px;min-width:0}
.header-titulo{display:flex;flex-direction:column;justify-content:center;gap:1px;
  border-left:2px solid var(--border-color);padding-left:15px;min-width:0}
/* nome com a MESMA fonte dos títulos de card (.panel-header h3): 12,5px, 700, caixa alta, escuro */
.header-nome{font-size:clamp(max(12.5px, var(--piso-tela, 0px)), 1.51px + 0.7630vw, 17.62px);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-primary);white-space:nowrap}
/* subtítulo no cinza pequeno original */
.header-sub{font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap}
.header-top .main-nav{margin-left:auto;gap:28px}
.header-top .nav-btn{padding:22px 2px}
.title-container h1{font-size:clamp(max(19px, var(--piso-tela, 0px)), 1.52px + 1.2140vw, 27.05px);font-weight:800;letter-spacing:-.025em;
     text-transform:uppercase;line-height:1}
.title-container p{text-transform:uppercase;font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);color:var(--text-secondary);
     font-weight:700;letter-spacing:.1em;margin-top:4px}
.header-bottom{display:flex;align-items:center;justify-content:space-between}
.main-nav{display:flex;gap:32px}
.nav-btn{background:none;border:none;padding:12px 4px;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);font-weight:600;
     color:var(--text-secondary);cursor:pointer;text-transform:uppercase;letter-spacing:.1em;
     border-bottom:2px solid transparent;text-decoration:none;transition:all .2s}
.nav-btn:hover{color:var(--primary-color)}
.nav-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);
     font-weight:700}
.nav-btn.futura{opacity:.35;cursor:not-allowed}
.nav-btn.futura:hover{color:var(--text-secondary)}
.tempo{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:700;color:var(--texto-3);font-variant-numeric:tabular-nums}

/* ---------- filtros ---------- */
/* Todos os campos têm a mesma altura (34px) e a mesma distância do rótulo, para a
   barra ler como uma linha só e não como um amontoado de controles soltos. */
.barra-filtros{display:flex;align-items:flex-end;gap:22px;padding:12px 16px 13px;
     background:var(--superficie);border-bottom:1px solid var(--border-color);flex-wrap:wrap}
.grupo{display:flex;flex-direction:column}
.grupo-campos{display:flex;gap:12px;align-items:flex-end}
.divisor{width:1px;height:34px;align-self:flex-end;background:var(--border-color)}
.campo{display:flex;flex-direction:column;gap:5px}
.campo>span{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
     color:var(--texto-3);line-height:1}
select{font-family:var(--fonte),sans-serif;font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px);font-weight:600;height:34px;
     color:var(--text-primary);background:var(--superficie);border:1.5px solid var(--border-color);
     border-radius:8px;padding:0 10px;min-width:120px;cursor:pointer;transition:all .2s}
/* período: um rótulo só, dois seletores e o "até" entre eles */
.par-periodo{display:flex;align-items:center;gap:7px}
.par-periodo select{min-width:96px}
.par-periodo .ate{font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);font-weight:600;color:var(--texto-3)}
select:hover,select:focus{border-color:var(--primary-color);outline:none;
     box-shadow:0 0 0 3px color-mix(in srgb, var(--acento-forte) 10%, transparent)}

/* combo com busca (município e produto) */
.combo{position:relative;min-height:34px;min-width:150px}
.combo-gatilho{display:flex;align-items:center;justify-content:space-between;gap:10px;
     height:34px;font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px);font-weight:600;background:var(--superficie);
     border:1.5px solid var(--border-color);
     border-radius:8px;padding:0 10px;cursor:pointer;transition:all .2s;
     white-space:nowrap;overflow:hidden}
.combo-gatilho:hover{border-color:var(--primary-color)}
.combo.aberto .combo-gatilho{border-color:var(--primary-color);
     box-shadow:0 0 0 3px color-mix(in srgb, var(--acento-forte) 10%, transparent)}
.combo-gatilho .txt{overflow:hidden;text-overflow:ellipsis}
.combo-gatilho .seta{font-size:clamp(max(8px, var(--piso-tela, 0px)), 1.51px + 0.4508vw, 11.1px);color:var(--texto-3);flex-shrink:0}
.combo-painel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:2000;
     width:300px;background:var(--superficie);border:1px solid var(--border-color);border-radius:12px;
     box-shadow:0 8px 28px color-mix(in srgb, var(--texto) 13%, transparent);overflow:hidden}
.combo.aberto .combo-painel{display:block}
.combo-busca{width:100%;border:none;border-bottom:1px solid var(--border-color);
     padding:9px 12px;font-family:var(--fonte),sans-serif;font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px);outline:none}
.combo-lista{max-height:280px;overflow-y:auto;padding:5px}
.combo-item{padding:7px 10px;border-radius:7px;font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px);cursor:pointer;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-item:hover{background:var(--fundo)}
.combo-item.sel{background:var(--acento-sutil);color:var(--primary-color);font-weight:700}
.combo-item .uf{font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);font-weight:800;color:var(--texto-3);margin-left:5px}
.combo-vazio{padding:14px;text-align:center;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);color:var(--texto-3)}

.chips{display:flex;gap:6px;min-height:34px}   /* reserva a altura dos chips que o JS monta (CLS, 18/09) */
.chip{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:700;height:34px;padding:0 14px;border-radius:8px;
     cursor:pointer;background:var(--superficie);border:1.5px solid var(--border-color);
     color:var(--text-secondary);transition:all .2s}
.chip:hover{border-color:var(--primary-color);color:var(--primary-color);background:var(--acento-sutil)}
/* seletor de distância mínima: um <select> com a mesma pegada dos chips */
.chip-sel{height:34px;padding:0 26px 0 12px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2364748b'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.chip-sel.active{background-color:var(--primary-color);color:var(--texto-invertido);border-color:var(--primary-color);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23FFFFFF'/></svg>")}
/* O PAR DAS SETAS. Data URI nao le var() nem herda currentColor, e <select> nao
   renderiza ::after: nao ha como pedir a cor por token. Entao declara-se a peca
   dos DOIS temas, que e o mesmo contrato de um par fundo/texto. */
[data-tema="escuro"] .chip-sel{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2394A3B8'/></svg>")}
[data-tema="escuro"] .chip-sel.active{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%230F172A'/></svg>")}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .chip-sel{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2394A3B8'/></svg>")}
  :root:not([data-tema="claro"]) .chip-sel.active{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%230F172A'/></svg>")}
}   /* fecha o bloco escuro (18/09): sem esta chave, TUDO daqui para baixo só valia em prefers-color-scheme: dark */

.chip-sel.active option{color:var(--text-primary);background:var(--superficie)}
/* o seletor de distância e o botão de vazio não podem encolher no flex: cortava
   "Todas as distâncias" e quebrava "Retorno vazio" em duas linhas */
#sel-dist{flex-shrink:0;min-width:186px}
/* cabeçalho ordenável (todas as tabelas que usam data-o) */
th[data-o]{cursor:pointer;user-select:none}
th[data-o]:hover{color:var(--primary-color)}

/* ---------- aba Alocação (MDF-e × PNCT) ---------- */
.aloc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 14px 12px}
.aloc-kpis .k{background:var(--superficie);border:1px solid var(--border-color);border-radius:8px;
  padding:7px 9px}
.aloc-kpis .k .v{font-size:clamp(max(16px, var(--piso-tela, 0px)), 1.52px + 1.0058vw, 22.7px);font-weight:800;color:var(--acento-texto);line-height:1.15}
.aloc-kpis .k .l{font-size:clamp(max(8.5px, var(--piso-tela, 0px)), 1.51px + 0.4855vw, 11.82px);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--texto-3);margin-top:2px}
.aloc-trecho{padding:8px 14px 12px;overflow-y:auto;max-height:290px;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px)}
.aloc-trecho .linha-cat{display:grid;grid-template-columns:64px 1fr 58px;gap:8px;
  align-items:center;margin:2px 0}
.aloc-trecho .linha-cat .barra{height:9px;background:var(--superficie-2);border-radius:4px;overflow:hidden}
.aloc-trecho .linha-cat .barra i{display:block;height:100%;background:var(--acento-forte)}
.aloc-trecho .linha-cat.ctx .barra i{background:var(--condicao-sem-medicao)}
.aloc-trecho .num{font-variant-numeric:tabular-nums;text-align:right}
.aloc-trecho h5{font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);text-transform:uppercase;letter-spacing:.05em;
  color:var(--texto-3);margin:9px 0 4px}
.chip-vazio{flex-shrink:0;white-space:nowrap}
.chip.active{background:var(--primary-color);color:var(--texto-invertido);border-color:var(--primary-color);
     box-shadow:0 2px 8px color-mix(in srgb, var(--acento-forte) 30%, transparent)}
.chip.active[data-sentido=envia]{background:var(--envia);border-color:var(--envia);
     box-shadow:0 2px 8px color-mix(in srgb, var(--cobre-70) 30%, transparent)}
.chip.active[data-sentido=recebe]{background:var(--recebe);border-color:var(--recebe);
     box-shadow:0 2px 8px color-mix(in srgb, var(--ameixa-90) 30%, transparent)}
/* D2 (14/09): o chip ativo é cobre em todo o painel, como no vídeo; o azul de
   --ambos fica para onde ele codifica dado */
.chip.active[data-sentido=ambos]{background:var(--primary-color);border-color:var(--primary-color);
     box-shadow:0 2px 8px color-mix(in srgb, var(--acento-forte) 30%, transparent)}
.combo-item .uf{font-variant-numeric:tabular-nums;float:right}

.range{display:flex;flex-direction:column;gap:2px;width:230px}
.range-track{position:relative;height:22px}
.range-track .linha{position:absolute;top:50%;left:0;right:0;height:4px;border-radius:2px;
     transform:translateY(-50%);background:var(--superficie-2)}
.range input[type=range]{position:absolute;top:0;left:0;width:100%;height:22px;
     -webkit-appearance:none;background:transparent;pointer-events:none;margin:0}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
     border-radius:50%;background:var(--primary-color);border:2px solid var(--superficie);
     box-shadow:0 1px 3px color-mix(in srgb, var(--texto) 30%, transparent);pointer-events:all;cursor:grab}
.range-rot{display:flex;justify-content:space-between;font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);font-weight:700;
     color:var(--text-secondary)}
.aviso-ncm{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);
     font-weight:600;color:var(--vermelho-texto);background:color-mix(in srgb, var(--ambar) 30%, var(--superficie));border:1px solid var(--ambar);
     border-radius:8px;padding:6px 10px;max-width:300px;line-height:1.35}

/* ---------- layout ---------- */
.layout{display:flex;flex:1 1 auto;min-height:0;padding:12px 16px;gap:12px;
     overflow:hidden;transition:opacity .15s}
.layout.carregando{opacity:.55;pointer-events:none}
.card{background:var(--card-bg);border-radius:10px;border:1px solid var(--border-color);
     box-shadow:0 1px 3px color-mix(in srgb, var(--texto) 6%, transparent);overflow:hidden;display:flex;flex-direction:column}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;
     border-bottom:1px solid var(--border-color);
     background:linear-gradient(135deg,var(--superficie) 0%,var(--fundo) 100%);flex-shrink:0}
.panel-header h3{font-size:clamp(max(12.5px, var(--piso-tela, 0px)), 1.51px + 0.7630vw, 17.62px);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.panel-header .aux{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:700;color:var(--primary-color)}
.col-mapa{flex:0 0 58%;display:flex;flex-direction:column}
.col-dir{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---------- mapa ---------- */
#mapa{flex:1;background:var(--superficie)}
.migalha{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:700;color:var(--text-secondary)}
.migalha b{color:var(--primary-color);cursor:pointer}
.migalha b:hover{text-decoration:underline}
.rodape-mapa{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);color:var(--texto-3);padding:5px 14px;
     border-top:1px solid var(--border-color);background:var(--superficie);flex-shrink:0}
.leaflet-tooltip.tt{font-family:var(--fonte),sans-serif;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);border-radius:7px;
     border:1px solid var(--border-color);box-shadow:0 3px 12px color-mix(in srgb, var(--texto) 14%, transparent);padding:7px 10px}
.legenda{background:color-mix(in srgb, var(--superficie) 94%, transparent);padding:8px 11px;border-radius:8px;
     box-shadow:0 2px 15px color-mix(in srgb, var(--texto) 15%, transparent);border:1px solid var(--border-color);
     font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);line-height:1.7;color:var(--text-primary)}
.legenda .tit{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);
     color:var(--text-secondary);margin-bottom:4px}
.legenda i{display:inline-block;width:14px;height:11px;margin-right:6px;border-radius:2px;
     vertical-align:-1px;border:1px solid color-mix(in srgb, var(--texto) 12%, transparent)}
.legenda .nota{margin-top:5px;padding-top:5px;border-top:1px solid var(--border-color);
     font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);color:var(--texto-3);line-height:1.5}

/* ---------- perfil ---------- */
/* Identidade e KPIs ocupam a largura toda (é o que se lê primeiro); embaixo, a rosca
   ao lado da composição por produto, que precisa de largura para os nomes. */
.perfil{flex:0 0 auto}
.perfil-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;
     padding:11px 14px 9px}
.lugar{font-size:clamp(max(17px, var(--piso-tela, 0px)), 1.52px + 1.0752vw, 24.15px);font-weight:800;letter-spacing:-.015em;white-space:nowrap}
.lugar small{font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);font-weight:700;color:var(--text-secondary);
     text-transform:uppercase;letter-spacing:.06em;margin-left:5px}
.kpis{display:flex;gap:20px}
.kpi{text-align:right}
.kpi .v{font-size:clamp(max(16px, var(--piso-tela, 0px)), 1.52px + 1.0058vw, 22.7px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;
     white-space:nowrap}
.kpi .l{font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
     color:var(--texto-3);margin-top:1px}
/* dentro da barra só cabe a porcentagem; os valores vão na legenda abaixo */
.balanco{display:flex;height:16px;border-radius:5px;overflow:hidden;gap:2px;margin:0 14px}
.balanco div{display:flex;align-items:center;justify-content:center;color:var(--texto-invertido);
     font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:800;white-space:nowrap;overflow:hidden;
     transition:opacity .2s}
.b-envia{background:var(--envia)}
.b-recebe{background:var(--recebe)}
.balanco-leg{display:flex;gap:16px;padding:5px 14px 0;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);
     color:var(--text-secondary)}
.balanco-leg span{display:flex;align-items:center;gap:5px;transition:opacity .2s}
.balanco-leg i{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.balanco-leg b{color:var(--text-primary);font-weight:800;font-variant-numeric:tabular-nums}

.perfil-baixo{display:flex;align-items:center;gap:16px;padding:10px 14px 12px}
/* furo grande o bastante para o número caber inteiro dentro dele: com recorte de 46%
   o texto transbordava para cima do anel */
.rosca-wrap{position:relative;flex:0 0 146px;width:146px;height:146px}
.rosca-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
     justify-content:center;pointer-events:none}
.rosca-centro .saldo{font-size:clamp(max(13px, var(--piso-tela, 0px)), 1.51px + 0.7977vw, 18.35px);font-weight:800;line-height:1;white-space:nowrap}
.rosca-centro .rot{font-size:clamp(max(7.5px, var(--piso-tela, 0px)), 1.51px + 0.4161vw, 10.38px);font-weight:700;text-transform:uppercase;
     letter-spacing:.06em;color:var(--texto-3);margin-top:3px}
.produtos{flex:1;min-width:0}
.produtos h4{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
     color:var(--texto-3);margin-bottom:7px}
.pl{display:grid;grid-template-columns:minmax(90px,132px) 1fr 66px;align-items:center;
     gap:8px;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);margin-bottom:3px}
.pl .nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.pl .barra{height:7px;border-radius:2px;background:var(--fundo);overflow:hidden}
.pl .barra div{height:100%;border-radius:2px}
.pl .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px)}
.pl.ni .nome{color:var(--texto-3);font-style:italic}
.pl.ni .barra div{background:repeating-linear-gradient(45deg,var(--condicao-sem-medicao),var(--condicao-sem-medicao) 4px,
     var(--superficie-2) 4px,var(--superficie-2) 8px)}

/* ---------- tabela ---------- */
.col-tabela{flex:1;min-height:0}
.tab-scroll{flex:1;overflow-y:auto;min-height:0}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px)}
/* aba de sazonalidade: largura de coluna FIXA (em %), para a tabela não "pular" quando
   muda só o que está sendo mostrado (mês travado, ordenação). As larguras vêm dos <th>
   no JS. Como são percentuais, somam 100% e nunca estouram a coluna estreita. */
.layout-saz table{table-layout:fixed}
.layout-saz thead th{white-space:normal}
/* A barra de rolagem tem que ser FIXA (nunca aparecer/sumir), senão a largura "dança".
   overflow-y:scroll reserva o espaço, mas no macOS a barra é overlay (some sozinha); então
   estiliza-se a ::-webkit-scrollbar, o que troca a overlay por uma barra permanente. */
.layout-saz .tab-scroll{overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;
     scrollbar-width:thin;scrollbar-color:var(--condicao-sem-medicao) var(--texto-invertido)}
.layout-saz .tab-scroll::-webkit-scrollbar{width:10px;-webkit-appearance:none}
.layout-saz .tab-scroll::-webkit-scrollbar-track{background:var(--fundo)}
.layout-saz .tab-scroll::-webkit-scrollbar-thumb{background:var(--condicao-sem-medicao);border-radius:5px;
     border:2px solid var(--superficie)}
/* alinha o conteúdo de todas as células pelo TOPO: senão uma célula de 1 linha (Carga) e
   uma de 2 linhas (Tipo) na mesma linha ficam desencontradas na vertical */
.layout-saz tbody td,.flx-dir tbody td{vertical-align:top}
.layout-saz tbody tr.clicavel{cursor:pointer}
.layout-saz tbody tr.clicavel:hover{background:var(--acento-sutil)}
.layout-saz .cel-carga,.flx-dir .cel-carga{font-weight:600}
.layout-saz .cel-tipo,.flx-dir .cel-tipo{font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);color:var(--text-secondary);font-weight:600}
/* Carga e Tipo: o texto já vem curto do backend; este clamp de 2 linhas é rede de
   segurança. Fica num DIV INTERNO, não no <td>: -webkit-box no próprio <td> tira dele o
   comportamento de table-cell e desalinha a linha. */
.layout-saz .cl2,.flx-dir .cl2{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
     -webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.2;
     word-break:break-word}   /* palavra larga quebra em vez de sumir cortada ("Oleagino") */
/* o mini-gráfico de 12 meses acompanha a largura da sua coluna */
.layout-saz .spark{width:100%}

/* aba de logística: barras horizontais (mix de frota por eixos) */
.faixas-corpo{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;
     padding:14px 18px;min-height:0;overflow-y:auto}
.faixa{display:flex;align-items:center;gap:10px}
.faixa-rot{width:88px;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);font-weight:700;color:var(--text-secondary);
     text-align:right;flex-shrink:0}
.faixa-barra{flex:1;height:15px;background:var(--fundo);border-radius:5px;overflow:hidden}
.faixa-barra div{height:100%;background:var(--primary-color);border-radius:5px;min-width:2px}
.faixa-val{width:34px;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:800;color:var(--text-primary);flex-shrink:0}
.veic-nota{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:700;color:var(--texto-3);text-transform:uppercase;letter-spacing:.03em}
.veic-vazio{margin:auto;text-align:center;font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px);color:var(--text-secondary);line-height:1.5}

/* aba mapa de fluxos: mapa grande (68%) + tabela de corredores */
.layout-flx{display:grid;grid-template-columns:68% 1fr;grid-template-rows:1fr;
     flex:1 1 auto;min-height:0;padding:12px 16px;gap:12px;overflow:hidden;
     transition:opacity .15s}
.layout-flx.carregando{opacity:.55;pointer-events:none}
.layout-flx .card{min-height:0}
/* coluna direita: corredores (mais baixa) em cima, principais cargas embaixo.
   min-width:0 é OBRIGATÓRIO: sem ele o item de grid cresce além da coluna e as
   colunas numéricas das tabelas somem da tela */
.flx-dir{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;overflow:hidden}
.flx-dir .card{flex:1 1 0;min-height:0;min-width:0}
.flx-dir table{table-layout:fixed}
.flx-dir .tab-scroll{overflow-x:hidden}
/* botão de retorno vazio: âmbar quando ativo */
.chip-vazio.active{background:var(--cobre-70);border-color:var(--acento);color:var(--neutro-10)}
.chip-vazio:not(.active):hover{border-color:var(--acento);color:var(--acento-texto)}
/* aviso de traçados aproximados (canto do mapa) */
.aviso-aprox{background:var(--superficie);border:1px solid var(--border-color);border-radius:7px;
     padding:5px 10px;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);font-weight:700;color:var(--texto-3);
     box-shadow:0 1px 3px color-mix(in srgb, var(--texto) 12%, transparent)}
/* chip do filtro de trecho: card flutuante no canto superior direito do mapa */
#trecho-ctrl{display:flex;align-items:center;gap:8px;padding:7px 10px;max-width:300px;
  background:var(--superficie);border:1px solid var(--acento);border-radius:9px;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);
  font-weight:600;color:var(--primary-color);box-shadow:0 1px 6px color-mix(in srgb, var(--texto) 20%, transparent)}
#trecho-ctrl .tc-x{cursor:pointer;font-weight:800;padding:1px 7px;white-space:nowrap;
  border-radius:6px;background:var(--acento-sutil);color:var(--primary-color)}
#trecho-ctrl .tc-x:hover{background:var(--acento-sutil)}
.uf-filtro{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:700;color:var(--primary-color);background:var(--acento-sutil);
  border:1px solid var(--acento);border-radius:6px;padding:1px 8px;white-space:nowrap;vertical-align:middle}
.uf-filtro b{cursor:pointer;margin-left:3px;color:var(--texto-3)}
.uf-filtro b:hover{color:var(--vermelho-texto)}
.flx-seta{color:var(--texto-3);font-weight:800;padding:0 2px}
.flx-aprox{color:var(--acento-texto);font-weight:800;cursor:help}
/* tooltip da malha: lista dos principais pares que passam no trecho */
.tt-lista{margin-top:5px;border-top:1px solid var(--borda);padding-top:4px;max-width:320px}
.tt-par{display:flex;justify-content:space-between;gap:14px;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);line-height:1.55}
.tt-par b{font-variant-numeric:tabular-nums}
.tt-par.sec{color:var(--texto-3)}
.tt-dica{display:block;margin-top:5px;font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-style:italic;color:var(--acento-texto)}
thead th{position:sticky;top:0;z-index:5;background:var(--fundo);color:var(--primary-color);
     font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
     padding:8px 10px;text-align:left;border-bottom:2px solid var(--border-color);
     cursor:pointer;white-space:nowrap;user-select:none}
thead th.num{text-align:right}
thead th:hover{background:var(--superficie-2)}
tbody td{padding:5px 7px;border-bottom:1px solid var(--superficie);white-space:nowrap}
tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
tbody tr:hover td{background:var(--acento-sutil);cursor:pointer}
tbody tr.sel td{background:var(--acento-sutil)}
/* nome do parceiro: coluna estreita, quebrando em duas linhas quando preciso, para
   liberar largura às colunas de número (Envio, Recebe, Total, % e % acumulado) */
th.cel-nome{white-space:normal}
td.cel-nome{white-space:normal;line-height:1.2;max-width:104px}
/* Corredor em DUAS linhas: origem em cima, destino embaixo (mais legível que inline) */
td.cel-corr .corr-o,td.cel-corr .corr-d{display:block}
td.cel-corr .corr-d{color:var(--text-secondary)}
td.cel-corr .corr-d b{color:var(--text-primary)}
tbody td.sec{color:var(--text-secondary);font-weight:600}
tbody td.ac{color:var(--texto-3);font-weight:700}
thead th.num{padding-left:5px;padding-right:7px}
.uf-tag{font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);font-weight:800;color:var(--text-secondary);background:var(--fundo);
     padding:1px 5px;border-radius:4px}
.minibarra{width:44px;height:8px;border-radius:2px;background:var(--fundo);overflow:hidden;
     display:inline-block}
.minibarra div{height:100%}
/* uma linha, sempre: nada aqui pode quebrar em duas */
.rodape-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;
     padding:6px 12px;background:var(--fundo);border-top:2px solid var(--border-color);
     font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);font-weight:800;flex-shrink:0;white-space:nowrap;overflow:hidden}
.rodape-tab span{overflow:hidden;text-overflow:ellipsis}
.rodape-tab .sec{font-weight:600;color:var(--text-secondary);flex-shrink:0}
.busca{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:500;padding:4px 8px;width:130px;border-radius:6px;
     border:1.5px solid var(--border-color);font-family:var(--fonte),sans-serif;outline:none}
.busca:focus{border-color:var(--primary-color)}
.btn-csv{font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);font-weight:700;padding:4px 9px;border-radius:6px;
     border:1.5px solid var(--border-color);background:var(--superficie);color:var(--text-secondary);
     cursor:pointer}
.btn-csv:hover{border-color:#217346;color:#217346}

/* ================= ABA 2: SAZONALIDADE ================= */
/* duas linhas, duas colunas: gráfico + mapa em cima, as duas tabelas embaixo */
.layout-saz{display:grid;grid-template-columns:65% 1fr;grid-template-rows:1fr 1fr;
     flex:1 1 auto;min-height:0;padding:12px 16px;gap:12px;overflow:hidden;
     transition:opacity .15s}
.layout-saz.carregando{opacity:.55;pointer-events:none}

/* Heatmap sazonal: carga (linha, por produção) × mês (coluna). Cor = perfil/volume. */
#det-reservado{display:flex;flex-direction:column;min-height:0}
/* padding-top ZERO: o cabeçalho sticky (.hs-head) gruda no topo do container. Com qualquer
   padding-top, sobrava um vão por onde as células roláveis vazavam por cima da linha 1. */
.heat-saz{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 14px 4px;
  scrollbar-width:thin;scrollbar-color:var(--condicao-sem-medicao) var(--texto-invertido)}
.heat-saz::-webkit-scrollbar{width:9px}
.heat-saz::-webkit-scrollbar-thumb{background:var(--condicao-sem-medicao);border-radius:5px;border:2px solid var(--superficie)}
.hs-row{display:grid;grid-template-columns:182px repeat(12,1fr);gap:2px;align-items:stretch}
.hs-nome-h{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:700;color:var(--text-secondary);text-transform:uppercase;
     letter-spacing:.04em;justify-content:center}
.hs-row[data-cod]{cursor:pointer;border-radius:4px}
.hs-row[data-cod] .hs-cel{cursor:pointer}
.hs-row[data-cod]:hover .hs-nome b{color:var(--primary-color)}
.hs-row.sel .hs-nome b{color:var(--primary-color);font-weight:700}
.hs-row.sel .hs-nome{border-left:3px solid var(--primary-color);padding-left:6px;margin-left:-9px}
.hs-head{position:sticky;top:0;z-index:2;background:var(--superficie);padding-bottom:3px}
.hs-mh{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:700;color:var(--text-secondary);text-transform:uppercase;
  text-align:center;letter-spacing:.02em;align-self:end}
.hs-nome{display:flex;flex-direction:column;justify-content:center;line-height:1.15;
  padding-right:8px;overflow:hidden}
.hs-nome b{font-size:clamp(max(14px, var(--piso-tela, 0px)), 1.51px + 0.8671vw, 19.8px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-cel{height:22px;border-radius:3px;cursor:default}
.hs-row + .hs-row{margin-top:2px}
.hs-pico{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--texto) 55%, transparent)}   /* marca o mês de PICO da carga */
.heat-nota{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);color:var(--texto-3);padding:4px 14px 8px;flex-shrink:0}
.grafico-corpo{flex:1;min-height:0;padding:10px 14px 6px;position:relative}
/* Ranking por produto: dois gráficos lado a lado (barras por volume + lollipop por distância) */
.rank-duplo{flex:1;display:flex;gap:14px;min-height:0;padding:12px 10px 8px}
.rank-metade{flex:1;min-width:0;display:flex;flex-direction:column}
/* sub-títulos viraram os TÍTULOS do card (o "Ranking por produto" saiu): mais destaque */
.rank-sub{font-size:clamp(max(13px, var(--piso-tela, 0px)), 1.51px + 0.7977vw, 18.35px);font-weight:800;letter-spacing:.01em;color:var(--text-primary);
     text-align:center;margin:0;display:flex;align-items:center;justify-content:center;gap:6px;
     position:relative}
.rank-sub .ajuda{position:static}
.rank-metade .grafico-corpo{padding:6px 2px 2px}
/* cada ranking rola verticalmente para ver TODOS os produtos (não só o top 10) */
.rank-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 4px 2px;
     scrollbar-width:thin;scrollbar-color:var(--condicao-sem-medicao) var(--texto-invertido)}
.rank-scroll::-webkit-scrollbar{width:9px}
.rank-scroll::-webkit-scrollbar-track{background:var(--fundo)}
.rank-scroll::-webkit-scrollbar-thumb{background:var(--condicao-sem-medicao);border-radius:5px;border:2px solid var(--superficie)}
.rank-tall{position:relative;width:100%}   /* altura definida no JS ∝ nº de itens */

/* ranking unificado: nome (1x) + barra de volume + barra de distância, MESMOS itens por linha */
.ru-wrap{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 4px 3px;
  scrollbar-width:thin;scrollbar-color:var(--condicao-sem-medicao) var(--texto-invertido)}
.ru-wrap::-webkit-scrollbar{width:9px}
.ru-wrap::-webkit-scrollbar-track{background:var(--fundo)}
.ru-wrap::-webkit-scrollbar-thumb{background:var(--condicao-sem-medicao);border-radius:5px;border:2px solid var(--superficie)}
.ru-head,.ru-row{display:grid;grid-template-columns:140px 1fr 1fr;gap:12px;align-items:center;padding:0 8px}
/* cabeçalho grudado no topo do próprio container (padding-top ZERO evita o vazamento por cima) */
.ru-head{position:sticky;top:0;z-index:2;background:var(--superficie);padding-top:5px;padding-bottom:6px;
  font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:700;color:var(--text-secondary);text-transform:uppercase;
  letter-spacing:.03em;border-bottom:1px solid var(--borda)}
.ru-head .ru-col{cursor:pointer;user-select:none;white-space:nowrap}
.ru-head .ru-col.on{color:var(--primary-color)}
.ru-row{padding-top:4px;padding-bottom:4px;border-radius:4px;cursor:pointer}
.ru-row:hover{background:var(--fundo)}
.ru-row.sel{background:var(--acento-sutil)}
.ru-row.sel .ru-nome{color:var(--primary-color);font-weight:700}
.ru-nome{font-size:clamp(max(12.5px, var(--piso-tela, 0px)), 1.51px + 0.7630vw, 17.62px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ru-metrica{display:grid;grid-template-columns:1fr 72px;gap:10px;align-items:center;min-width:0}
.ru-track{height:10px;background:var(--superficie-2);border-radius:3px;overflow:hidden}
.ru-bar{height:100%;border-radius:3px}
/* o VALOR é o herói: número escuro e forte (tabular); a unidade fica discreta ao lado */
.ru-val{font-size:clamp(max(12.5px, var(--piso-tela, 0px)), 1.51px + 0.7630vw, 17.62px);font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right;letter-spacing:-.01em}
.ru-val .ru-unid{font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);font-weight:600;color:var(--text-secondary);margin-left:3px;letter-spacing:0}
.dica-grafico{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);color:var(--texto-3);padding:0 14px 7px;flex-shrink:0}

/* botões de modo no cabeçalho dos cards */
.modos{display:flex;gap:4px}
.modo{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:700;padding:3px 9px;border-radius:6px;cursor:pointer;
     background:var(--superficie);border:1.5px solid var(--border-color);color:var(--text-secondary);
     transition:all .15s}
.modo:hover{border-color:var(--primary-color);color:var(--primary-color)}
.modo.active{background:var(--primary-color);color:var(--texto-invertido);border-color:var(--primary-color)}

/* legenda cíclica do mapa (mês é variável circular: dez está tão perto de jan
   quanto de nov, então a escala tem que fechar o círculo) */
.legenda-ciclo{display:flex;flex-direction:column;gap:3px;background:color-mix(in srgb, var(--superficie) 94%, transparent);
     padding:7px 9px;border-radius:8px;box-shadow:0 2px 15px color-mix(in srgb, var(--texto) 15%, transparent);
     border:1px solid var(--border-color)}
.legenda-ciclo .tit{font-weight:800;text-transform:uppercase;letter-spacing:.06em;
     font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);color:var(--text-secondary)}
.legenda-ciclo .tiras{display:flex}
.legenda-ciclo .tiras i{width:15px;height:11px;display:block}
.legenda-ciclo .tiras i:first-child{border-radius:2px 0 0 2px}
.legenda-ciclo .tiras i:last-child{border-radius:0 2px 2px 0}
.legenda-ciclo .rot{display:flex;justify-content:space-between;font-size:clamp(max(8px, var(--piso-tela, 0px)), 1.51px + 0.4508vw, 11.1px);
     font-weight:700;color:var(--texto-3)}

/* mini-gráfico de 12 meses dentro da linha da tabela */
.spark{display:flex;align-items:flex-end;gap:1px;height:16px;width:74px}
.spark div{flex:1;border-radius:1px 1px 0 0;min-height:1px}
.pico-tag{font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);font-weight:800;padding:1px 6px;border-radius:4px;color:var(--texto-invertido)}

.vazio-card{display:flex;align-items:center;justify-content:center;height:100%;
     padding:24px;text-align:center;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);color:var(--texto-3);line-height:1.5}

/* botão de ajuda: o aviso longo saiu da tela e virou um "?" com popover */
.panel-header .ajuda{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--condicao-sem-medicao);
     background:var(--superficie);color:var(--texto-3);font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);font-weight:800;line-height:1;
     cursor:help;flex-shrink:0;transition:all .15s;padding:0}
.panel-header .ajuda:hover,.panel-header .ajuda.on{border-color:var(--primary-color);
     color:var(--texto-invertido);background:var(--primary-color)}
.popover{display:none;position:absolute;z-index:3000;top:34px;left:14px;width:390px;
     background:var(--superficie);border:1px solid var(--border-color);border-radius:10px;
     box-shadow:0 10px 30px color-mix(in srgb, var(--texto) 16%, transparent);padding:12px 14px;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);
     line-height:1.5;color:var(--text-primary);font-weight:400;text-transform:none;
     letter-spacing:0}
.popover.on{display:block}
.popover h5{font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
     color:var(--texto-3);margin-bottom:6px}
.popover b{font-weight:700}
.popover table{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);margin:7px 0}
.popover td{padding:2px 8px 2px 0;border:none;white-space:nowrap}
.popover .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.card .panel-header{position:relative}

/* seletores compactos de mês no cabeçalho do gráfico */
.sel-mini{height:24px;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);padding:0 6px;min-width:76px;border-radius:6px}
.panel-header .par-periodo{gap:5px}
.panel-header .par-periodo .ate{font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px)}

/* ============================== ferrovia ==============================
   Complementos do painel ferroviário (aba Produção). As variáveis de cor
   e todo o design system acima vêm intactos do mdfe-cargas. */
.aviso-gran{
  padding:3px 18px; font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px); color:var(--texto-3); background:var(--fundo);
  border-bottom:1px solid var(--border-color); letter-spacing:.2px;
}
.col-mapa{position:relative}
.badge-semgeo{
  position:absolute; top:46px; right:10px; z-index:900; cursor:pointer;
  background:color-mix(in srgb, var(--ambar) 30%, var(--superficie)); border:1px solid var(--ambar); color:var(--ambar-texto);
  font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px); font-weight:600; padding:4px 10px; border-radius:8px;
  box-shadow:var(--shadow-sm);
}
.badge-semgeo:hover{background:color-mix(in srgb, var(--ambar) 30%, var(--superficie))}
.semgeo-lista{
  position:absolute; top:78px; right:10px; z-index:901; width:290px;
  max-height:55%; overflow:auto; background:var(--superficie);
  border:1px solid var(--border-color); border-radius:10px;
  box-shadow:0 8px 24px color-mix(in srgb, var(--texto) 14%, transparent); padding:8px 10px; font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);
}
.semgeo-lista .sg-tit{font-weight:700; font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px); color:var(--texto-2); margin:2px 0 6px}
.semgeo-lista .sg-item{display:flex; justify-content:space-between; gap:8px;
  padding:2.5px 0; border-bottom:1px dashed var(--superficie)}
.semgeo-lista .sg-item b{font-variant-numeric:tabular-nums; white-space:nowrap}
.semgeo-lista .sg-fecha{margin-top:6px; text-align:center; color:var(--texto-3);
  cursor:pointer; font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px)}
.semgeo-lista .sg-fecha:hover{color:var(--texto-2)}

/* ================= ferrovia-sazonalidade ================= */
/* série larga em cima (os 216 meses pedem largura); heatmap e assinatura embaixo */
.layout-saz-fer{display:grid;grid-template-columns:54% 1fr;grid-template-rows:44% 1fr;
  flex:1 1 auto;min-height:0;padding:12px 16px;gap:12px;overflow:hidden;
  transition:opacity .15s}
.layout-saz-fer.carregando{opacity:.55;pointer-events:none}
.layout-saz-fer .saz-serie{grid-column:1 / -1}
.layout-saz-fer table{table-layout:fixed}
.layout-saz-fer thead th{white-space:normal}
.layout-saz-fer .tab-scroll{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}
.layout-saz-fer .spark{width:100%}
.sel-mini{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:600;padding:3px 6px;border-radius:6px;
  border:1.5px solid var(--border-color);font-family:var(--fonte),sans-serif;
  color:var(--text-primary);background:var(--superficie);outline:none}
.sel-mini:focus{border-color:var(--primary-color)}

/* ================= ferrovia-rede ================= */
/* a foto da Declaração de Rede 2019: aviso destacado + faixa de cards +
   grade de 6 tabelas com rolagem interna (identidade de viewport fixa) */
.aviso-rede{
  padding:6px 18px; font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px); color:var(--acento-texto); background:color-mix(in srgb, var(--acento) 30%, var(--superficie));
  border-bottom:1px solid var(--acento); letter-spacing:.1px;
}
.aviso-rede b{font-weight:800}
.layout-rede{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
  padding:12px 16px; gap:12px; overflow:hidden; transition:opacity .15s}
.layout-rede.carregando{opacity:.55; pointer-events:none}
.rede-cards{display:flex; gap:10px; overflow-x:auto; flex:0 0 auto;
  padding-bottom:2px; scrollbar-width:thin}
.rede-card{flex:0 0 168px; background:var(--card-bg); cursor:pointer;
  border:1.5px solid var(--border-color); border-radius:10px; padding:9px 11px;
  box-shadow:var(--shadow-sm)}
.rede-card:hover{border-color:var(--acento)}
.rede-card.sel{border-color:var(--primary-color);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--acento-forte) 12%, transparent)}
.rc-sigla{font-size:clamp(max(13px, var(--piso-tela, 0px)), 1.51px + 0.7977vw, 18.35px); font-weight:800; color:var(--primary-color)}
.rc-km{font-size:clamp(max(12.5px, var(--piso-tela, 0px)), 1.51px + 0.7630vw, 17.62px); font-weight:700; margin-top:3px;
  font-variant-numeric:tabular-nums}
.rc-km span,.rc-tu span{font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px); font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.04em; display:block}
.rc-linhas{display:flex; flex-wrap:wrap; gap:2px 8px; font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);
  color:var(--text-secondary); margin:4px 0}
.rc-tu{font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px); font-weight:700; font-variant-numeric:tabular-nums}
.rede-card.rc-desc{flex:0 0 250px; background:color-mix(in srgb, var(--ambar) 30%, var(--superficie)); border-color:var(--ambar);
  cursor:default}
.rc-desc .rc-sigla{color:var(--ambar-texto)}
.rc-desc-txt{font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px); color:var(--acento-texto); margin-top:4px; line-height:1.45}
.rc-desc-txt .rc-link{cursor:pointer; text-decoration:underline dotted}
.rede-grid{display:grid; grid-template-columns:38% 1fr 1fr;
  grid-template-rows:1fr 1fr; gap:12px; flex:1 1 auto; min-height:0}
.rede-grid .card{min-height:0}
.rede-grid table{font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px)}
.rede-grid th.num,.rede-grid td.num{text-align:right;
  font-variant-numeric:tabular-nums}
.rede-grid .td-eixo{font-weight:800; color:var(--primary-color)}
.nota-fonte{padding:4px 14px; font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px); color:var(--ambar-texto); background:color-mix(in srgb, var(--ambar) 30%, var(--superficie));
  border-bottom:1px solid var(--ambar)}
.rede-semfoto{flex:1 1 auto; display:flex; align-items:center;
  justify-content:center}
.rs-box{max-width:520px; background:color-mix(in srgb, var(--acento) 30%, var(--superficie)); border:1px solid var(--acento);
  border-radius:12px; padding:22px 26px; font-size:clamp(max(13px, var(--piso-tela, 0px)), 1.51px + 0.7977vw, 18.35px); color:var(--acento-texto);
  line-height:1.55}
.rs-box h4{font-size:clamp(max(14px, var(--piso-tela, 0px)), 1.51px + 0.8671vw, 19.8px); font-weight:800; margin-bottom:8px}

/* ---- ferrovia-selecao: box da UF selecionada na visão Brasil ---- */
#sel-uf-box{position:absolute; right:10px; top:44px; z-index:900; background:var(--superficie);
  border:1px solid var(--border-color); border-radius:8px; padding:10px 12px;
  font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px); box-shadow:0 2px 8px color-mix(in srgb, var(--texto) 12%, transparent); min-width:210px; max-width:240px;}
#sel-uf-box .t{font-size:clamp(max(12.5px, var(--piso-tela, 0px)), 1.51px + 0.7630vw, 17.62px); font-weight:700; margin-bottom:6px;
  display:flex; justify-content:space-between; gap:8px; align-items:center;}
#sel-uf-box .x{cursor:pointer; color:var(--texto-3); font-weight:700; padding:0 2px;}
#sel-uf-box .x:hover{color:var(--text-primary);}
#sel-uf-box .lin{display:flex; justify-content:space-between; gap:10px; margin:2px 0;}
#sel-uf-box .lin b{font-variant-numeric:tabular-nums;}
#sel-uf-box .acao{margin-top:8px; text-align:center; border:1px solid var(--border-color);
  border-radius:6px; padding:4px 6px; cursor:pointer; font-weight:600;
  color:var(--primary-color); font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);}
#sel-uf-box .acao:hover{background:var(--bg-light);}

/* ---- ferrovia: aviso de falha de carga (autocura) ---- */
#aviso-erro{position:absolute; left:50%; top:12px; transform:translateX(-50%);
  z-index:950; background:color-mix(in srgb, var(--ambar) 30%, var(--superficie)); border:1px solid var(--ambar); color:var(--ambar-texto);
  border-radius:8px; padding:7px 14px; font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px); font-weight:600;
  box-shadow:0 2px 8px color-mix(in srgb, var(--texto) 12%, transparent);}

/* ---- ferrovia-fluxos: coluna direita dividida (corredores + mercadorias) */
.flx-dir{display:flex; flex-direction:column; gap:14px;}
.flx-dir .card{flex:1 1 0; min-height:0;}
.flx-dir .card:first-child{flex:1.45 1 0;}     /* corredores maiores */
#merc-corpo tr{cursor:pointer;}
#merc-corpo tr:hover td{background:var(--acento-sutil);}
#merc-corpo tr.sel-merc td{background:var(--acento-sutil); font-weight:600;}

/* ================================================================
   iri-celular: acréscimos específicos do painel de rugosidade
   ================================================================ */
.badge-estimado{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--vermelho-texto);background:color-mix(in srgb, var(--ambar) 30%, var(--superficie));border:1px solid var(--ambar);
  border-radius:6px;padding:4px 9px;line-height:1.3;align-self:flex-end;height:34px;
  display:flex;align-items:center;max-width:300px}
.classe-chip{display:inline-block;width:11px;height:11px;border-radius:2px;
  margin-right:5px;vertical-align:-1px;border:1px solid color-mix(in srgb, var(--texto) 12%, transparent)}
.dist-classes{display:flex;height:12px;border-radius:4px;overflow:hidden;
  margin:8px 14px 2px;border:1px solid var(--border-color)}
.dist-classes>div{height:100%}
.dist-legenda{display:flex;flex-wrap:wrap;gap:4px 14px;padding:5px 14px 9px;
  font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:600;color:var(--text-secondary)}
.dist-legenda b{font-variant-numeric:tabular-nums;color:var(--text-primary)}
/* chips de classe: toggle por esmaecimento, sem o azul cheio dos chips comuns
   (o azul brigaria com a cor semântica de cada classe) */
.chip-classe{padding:0 10px;display:flex;align-items:center}
.chip-classe.active{background:var(--acento-sutil);color:var(--primary-color);
  border-color:var(--primary-color);box-shadow:none}
/* segmentador em bloco do indicador (card Indicador ao longo do km) */
.seg-bloco{display:flex;flex-wrap:wrap;gap:5px;padding:8px 14px 2px}
.seg-bloco .chip{height:26px;padding:0 10px;font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px)}
/* ranking dos segmentos (card da direita) */
.ranking-lista{flex:1;min-height:0;overflow:auto;padding:6px 10px 10px}
.ranking-lista .ru-row{grid-template-columns:176px 1fr 92px;gap:10px}
.ru-nome{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:600;color:var(--text-primary);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ru-nome .pos{display:inline-block;min-width:26px;font-weight:800;color:var(--texto-3);
  font-variant-numeric:tabular-nums}
/* botão que expande os demais sensores em bloco no cabeçalho */
.chip.abre.aberto{border-color:var(--primary-color);color:var(--primary-color)}
/* segmentadores suspensos do cabeçalho (Rodovia e Qualidade): gatilho com
   cara de chip; fora do padrão ("Todas") fica azul */
.header-filtros .combo-gatilho{height:26px;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:700;
  padding:0 9px;min-width:96px}
.header-filtros .combo-gatilho .txt{display:flex;align-items:center}
.header-filtros .combo-gatilho.ativo{background:var(--primary-color);
  border-color:var(--primary-color);color:var(--texto-invertido);box-shadow:0 2px 8px color-mix(in srgb, var(--acento-forte) 30%, transparent)}
.header-filtros .combo-gatilho.ativo .seta{color:color-mix(in srgb, var(--superficie) 80%, transparent)}
.header-filtros .combo-gatilho.ativo .classe-chip{border-color:color-mix(in srgb, var(--superficie) 60%, transparent)}
.header-filtros .combo-painel{width:230px}
.combo-item .classe-chip{margin-right:7px}
/* margem lateral direita reduzida para o bloco de sensores caber em linha */
.main-header{padding-left:24px;padding-right:12px}
/* segmentadores no cabeçalho (a barra de filtros foi absorvida pelo header
   para ganhar espaço vertical no mapa e nos gráficos) */
.header-top{height:auto;min-height:64px;gap:24px;align-items:center}
/* marca maior, proporcional à altura das duas faixas de filtros (14/08) */
.header-marca .logo{height:72px}
/* a barra vertical entre logo e nome acompanha a altura da marca */
.header-marca .header-titulo{min-height:62px;justify-content:center}
/* duas FAIXAS alinhadas (14/08): linha 1 = recortes (rodovia/sentido/
   qualidade/agregação), linha 2 = indicador; larguras parecidas, sem o
   serrilhado do flex-wrap */
.header-filtros{display:flex;flex-direction:column;gap:8px;margin-left:0;
  flex:1;min-width:0;padding:8px 0}
/* duas linhas harmônicas (14/08): controles um ponto menores que a marca,
   blocos pareados por largura: L1 Qualidade|Rodovia|Sentido, L2 Agregação|
   Indicador */
.filtros-linha{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.header-filtros .campo>span{font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px)}
.header-filtros .chips{display:flex;gap:8px;flex-wrap:wrap}
.header-filtros .chips-indicador{gap:12px}
.header-filtros .chip{height:26px;padding:0 8px;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px)}
.header-filtros .chip-classe{padding:0 8px}
.header-filtros .divisor{height:26px}
.header-filtros .combo-gatilho{height:26px;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);padding:0 10px;min-width:96px}
/* título e subtítulo proporcionais à área do cabeçalho (14/08) */
.header-nome{font-size:clamp(max(16.5px, var(--piso-tela, 0px)), 1.52px + 1.0405vw, 23.43px)}
.header-sub{font-size:clamp(max(13px, var(--piso-tela, 0px)), 1.51px + 0.7977vw, 18.35px)}
.sm-grid{flex:1;min-height:0;overflow:auto;display:grid;
  grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px}
.sm-card{background:var(--card-bg);border:1px solid var(--border-color);
  border-radius:10px;box-shadow:0 1px 3px color-mix(in srgb, var(--texto) 6%, transparent);display:flex;
  flex-direction:column;min-height:190px}
.sm-corpo{flex:1;min-height:0;position:relative;padding:6px 10px 8px}
.diag-grid{flex:1;min-height:0;overflow:auto;display:grid;
  grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px;align-content:start}
.diag-grid .card{max-height:420px}
.metodo{font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);line-height:1.6;padding:12px 14px;color:var(--text-primary)}
.metodo b{color:var(--primary-color)}
.metodo ol{margin:6px 0 0 18px}
.metodo li{margin-bottom:4px}



/* ---------- segmentador de PORTAS do projeto (18/08): à direita do head,
   centrado na vertical, atravessando as duas faixas de filtros; separa os
   painéis irmãos INDICADORES | VÍDEO (local: 8104 x 8105; publicado:
   Pages campo x Pages vídeo). Especificação PADRONIZADA com o projeto de
   vídeo: pílula cinza, item ativo azul, 9,5px/800 caixa alta ---------- */
.seg-portas{display:inline-flex;align-self:center;margin-left:auto;flex-shrink:0;
  background:var(--fundo);border:1px solid var(--border-color);border-radius:999px;
  padding:3px;gap:2px}
.seg-portas a{display:flex;align-items:center;padding:4px 12px;border-radius:999px;
  font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;white-space:nowrap;line-height:1.4}
.seg-portas a:hover{color:var(--primary-color)}
.seg-portas a.ativa{background:var(--primary-color);color:var(--texto-invertido);
  box-shadow:0 1px 5px color-mix(in srgb, var(--acento-forte) 35%, transparent)}
/* compactação do head para o segmentador caber SEM quebrar as duas faixas
   (este head não tem largura sobrando; precedente do Erro 10) */
.main-header{padding-left:16px;padding-right:10px}
.header-top{gap:14px}
.header-marca{gap:10px}
.filtros-linha{gap:12px}
.header-filtros .chips{gap:6px}
.header-filtros .chips-indicador{gap:8px}
.header-filtros .chip{padding:0 7px}
.header-filtros .combo-gatilho{min-width:88px}
/* compactação 2 (18/08): a marca cede largura (subtítulo volta ao corpo
   original) e os chips apertam, para as DUAS faixas + segmentador caberem */
.header-marca .logo{height:58px}
.header-nome{font-size:clamp(max(14px, var(--piso-tela, 0px)), 1.51px + 0.8671vw, 19.8px)}
.header-sub{font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px)}
.header-marca .header-titulo{min-height:48px}
.header-top{gap:12px}
.filtros-linha{gap:10px}
.header-filtros .chip{padding:0 6px;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px)}
.header-filtros .chip-classe{padding:0 6px}
.header-filtros .combo-gatilho{min-width:82px;padding:0 8px}
.header-filtros .divisor{display:none}
.seg-portas a{padding:4px 10px}
/* segmentador de portas, escala do HEAD DE CAMPO (18/08): o head tem duas
   faixas de altura, então o controle cresce junto; cantos pouco
   arredondados e fonte maior (pedido do usuário) */
.seg-portas{border-radius:9px;padding:4px}
.seg-portas a{padding:10px 16px;border-radius:6px;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px)}

/* ---------- versão MOBILE (18/08) ----------
   Detecção automática de celular/tablet: media query por LARGURA (≤840 px)
   + classe body.mobile aplicada por matchMedia no aba_iri.js (o mapa
   re-mede o contêiner na virada). Sem farejar user-agent: vale igual para
   o Flask local e para o Pages publicado. No celular o painel EMPILHA
   (header → mapa → gráfico → ranking) com rolagem vertical, e os filtros
   viram faixas deslizáveis na horizontal. */
@media (max-width: 840px){
  body{height:auto;min-height:100vh;min-height:100svh;overflow:auto;overflow-x:hidden}
  /* header: 1ª linha = marca + segmentador de portas; faixas de filtro abaixo */
  .main-header{padding:0 10px}
  .header-top{height:auto;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0}
  .header-marca{order:1;flex:1 1 auto;gap:8px}
  .header-marca .logo{height:38px}
  .header-marca .header-titulo{min-height:0;padding-left:10px}
  .header-nome{font-size:11.5px;white-space:normal;line-height:1.25}
  .header-sub{font-size:8.5px;white-space:normal}
  /* o segmentador de portas vira uma LINHA INTEIRA (no cabeçalho de 390 px
     ele não cabe ao lado da marca): dois botões de meia largura */
  .seg-portas{order:2;flex:1 1 100%;margin-left:0;padding:3px}
  .seg-portas a{flex:1;justify-content:center;padding:8px 0;font-size:10.5px}
  .header-filtros{order:3;flex:1 1 100%;min-width:0;gap:7px}
  /* cada faixa desliza na horizontal, sem quebrar linha e sem barra à vista */
  .filtros-linha{flex-wrap:nowrap;overflow-x:auto;gap:12px;padding-bottom:3px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filtros-linha::-webkit-scrollbar{display:none}
  .filtros-linha .campo{flex-shrink:0}
  .chips{flex-wrap:nowrap}
  .chip{flex-shrink:0}
  .combo-painel{width:min(300px,88vw)}
  /* pilha vertical com rolagem; alturas explícitas vencem o flex inline
     dos cards (style="flex:1"), por isso o !important. min-width:0 em toda
     a pilha: sem ele o canvas do Chart.js impõe largura mínima maior que a
     tela, o layout alarga além do viewport e a legenda do mapa sai do
     enquadramento (o overflow-x esconde o estouro) */
  .layout{flex-direction:column;flex:0 0 auto;overflow:visible;padding:10px;gap:10px}
  .layout .card{flex:0 0 auto !important;min-width:0;max-width:100%}
  .col-mapa,.col-dir{min-width:0;width:100%}
  .grafico-corpo canvas{max-width:100%}
  .col-mapa{flex:0 0 auto}
  .col-mapa .card{height:52vh;height:52svh;min-height:300px}
  .col-dir{flex:0 0 auto;gap:10px}
  .col-dir .card:nth-child(1){height:440px}
  .col-dir .card:nth-child(2){height:60vh;height:60svh;min-height:340px}
  /* KPIs em LINHA PRÓPRIA sob o título do gráfico, espalhados na largura */
  .panel-header{flex-wrap:wrap;gap:6px 10px}
  .kpis{flex:1 1 100%;flex-wrap:wrap;gap:8px 14px;justify-content:space-between}
  .kpi .v{font-size:14px}
  /* o mapa ganha o espaço da nota de rodapé (o conteúdo vive nas tooltips) */
  .rodape-mapa{display:none}
  .legenda{font-size:10px;line-height:1.55;padding:6px 9px;max-width:46vw}
}


/* avatar do usuário logado (18/08): círculo no EXTREMO direito do head,
   lido da identidade compartilhada com o painel de vídeo (mesma origem);
   tooltip = só o e-mail; desktop apenas */
.avatar-usuario{width:34px;height:34px;border-radius:50%;object-fit:cover;
  align-self:center;flex-shrink:0;margin-left:12px;border:2px solid var(--superficie);
  box-shadow:0 0 0 1.5px var(--border-color),0 1px 4px color-mix(in srgb, var(--texto) 12%, transparent)}
.avatar-usuario.inicial{display:flex;align-items:center;justify-content:center;
  background:var(--primary-color);color:var(--texto-invertido);font:800 14px 'Inter',sans-serif}
@media (max-width: 900px){
  .avatar-usuario{display:none}
}
/* tooltip do avatar (18/08): só o e-mail de login, no azul padrão */
.avatar-wrap{position:relative;align-self:center;margin-left:12px;flex-shrink:0;display:flex}
.avatar-wrap .avatar-usuario{margin-left:0}
.avatar-wrap[data-email]:hover::after{content:"email de login: " attr(data-email);
  position:absolute;top:calc(100% + 7px);right:0;background:var(--superficie);
  border:1px solid var(--border-color);border-radius:7px;padding:5px 10px;
  font:600 11px 'Inter',sans-serif;color:var(--primary-color);
  white-space:nowrap;box-shadow:0 3px 12px color-mix(in srgb, var(--texto) 14%, transparent);z-index:5000}
@media (max-width: 900px){
  .avatar-wrap{display:none}
}

/* ===== degraus DESKTOP de responsividade (18/08, auditoria em 10
   resoluções): em 1280 px úteis o head caía para 3 linhas e em 1024 para
   4. Degrau compacto (<=1365) aperta chips/combos para as 2 faixas
   voltarem; degrau estreito (<=1080) põe as faixas em rolagem horizontal,
   garantindo 2 faixas SEMPRE, sem cascata ===== */
@media (min-width: 841px) and (max-width: 1365px){
  .header-sub{display:none}
  .header-filtros .chip{font-size:10px;padding:0 5px}
  .header-filtros .chip-classe{padding:0 5px}
  .header-filtros .combo-gatilho{min-width:76px;padding:0 7px}
  .filtros-linha{gap:8px}
  .header-top{gap:10px}
  .seg-portas a{padding:4px 8px;font-size:10.5px}
}
@media (min-width: 841px) and (max-width: 1080px){
  .filtros-linha{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filtros-linha::-webkit-scrollbar{display:none}
  .filtros-linha .campo{flex-shrink:0}
  .header-filtros .chips{flex-wrap:nowrap}
  .header-filtros .chip{flex-shrink:0}
}

/* ===== CABEÇALHO EM DUAS FAIXAS, NO PADRÃO DO VÍDEO (14/09/2026) =====
   A 1ª faixa é a linha de filtros do vídeo, na mesma ordem (Rodovia ·
   Agregação · Indicador); a 2ª traz o que só os Indicadores têm (Sentido ·
   Qualidade). A divisão antiga (Rodovia · Sentido · Qualidade em cima) pedia
   707 px na 1ª faixa e caía para TRÊS linhas em 1280 e 1366. Entre 1081 e
   1365 px o respiro entre os chips aperta, como no cabeçalho do vídeo, para
   cada faixa caber numa linha. Sem rolagem horizontal aqui: a lista suspensa
   da Rodovia é absoluta dentro da faixa, e o overflow a cortaria.
   testar_familia.mjs (G8) mede as linhas de 1280 a 1920 px. */
@media (min-width: 1081px) and (max-width: 1365px){
  .header-filtros .chips,
  .header-filtros .chips-indicador{gap:4px}
  .header-filtros .chip,
  .header-filtros .chip-classe{padding:0 4px}
  .header-filtros .combo-gatilho{min-width:70px}
  .filtros-linha{gap:6px}
}
/* Abaixo de 1366 px a marca e o título ainda tomavam 500 px, e as faixas
   caíam para quatro e cinco linhas. O padrão do vídeo resolve: a marca na
   régua da família (A de 36 px), sem o filete, centrada na altura do
   cabeçalho, e o título em duas linhas. */
@media (min-width: 1081px) and (max-width: 1365px){
  .header-marca{--altura-do-A:36px;--marca-fracao-a:0.8416;
    --h-logo:calc(var(--altura-do-A) / var(--marca-fracao-a));gap:8px;
    align-self:center;margin-top:0;margin-bottom:0}
  .header-marca .logo{height:var(--h-logo)}
  .header-marca .header-titulo{min-height:0;border-left:none;padding-left:0}
  .header-nome{font-size:14.5px}
}
@media (min-width: 1081px) and (max-width: 1279px){
  .header-nome{white-space:normal;max-width:190px;line-height:1.2}
}
/* e no fim da faixa (até 1149 px) o título pode ir a três linhas, que ainda
   cabem na altura das duas faixas, e os chips cedem mais um pixel de respiro */
@media (min-width: 1081px) and (max-width: 1149px){
  .header-nome{max-width:150px}
  .header-filtros .chips,
  .header-filtros .chips-indicador{gap:3px}
  .filtros-linha{gap:4px}
}

/* o botão de tema (.btn-tema) é vestido pelo próprio tema.js: só ícone, 30 px, redondo */
/* ATLAS: daqui para baixo, bloco gerado pelo aplicador */
/* ---------- A ESCALA DE CONDIÇÃO DO PAVIMENTO ----------
   Verde é bom e vermelho é ruim: isto não é estilo, é convenção de domínio, e
   quem lê o painel a decodifica sem legenda. A pele Atlas veste a MOLDURA; ela
   não redesenha o que codifica o dado, do mesmo modo que não mexe em eixo nem
   em total.

   Vira TOKEN, e não fica solta em hexadecimal, por duas razões: para estar
   dentro do sistema (a conferência cobra que nenhuma cor fique fora) e para
   haver UM lugar onde mudá-la, se um dia a decisão for outra. E NÃO é
   redefinida nos blocos de tema: escala de condição que muda de cor entre o
   claro e o escuro deixa de ser a mesma escala.

   O bloco é ACRESCENTADO PELO APLICADOR, no fim, e não escrito à mão na folha.
   Escrito à mão, ele é alcançado pela própria tradução que o cria: cada
   `--condicao-x: #hex` virava `--condicao-x: var(--condicao-x)`, uma referência
   circular que o navegador descarta em silêncio, e as cores sumiam da faixa e do
   ranking sem erro nenhum no console. */
:root{
  --condicao-excelente: #15803d;
  --condicao-bom: #65a30d;
  --condicao-regular: #d97706;
  --condicao-ruim: #ea580c;
  --condicao-pessimo: #b91c1c;
  --condicao-sem-medicao: #cbd5e1;
  --condicao-urbano: #9ca3af;
  --condicao-estrutura: #78716c;
  --condicao-obras: #6b7280;
  --condicao-fora: #b6c2d1;

}
/* ATLAS: daqui para baixo, bloco gerado pelo aplicador */
/* ---------- a marca, dimensionada pela TINTA (pele Atlas v2) ----------
   UMA medida declarada (`--altura-do-A`); o resto sai das métricas da peça.

   AQUI A PEÇA É A OFICIAL, COM O DESCRITOR "RODOVIAS". Este cabeçalho tem 64 px
   e divide a largura com a linha de filtros, então o A é menor que o dos painéis
   de concessão: com A de 32 px a assinatura ocupa ~108 px de largura, contra os
   84 px do logotipo antigo, e o cabeçalho continua numa linha só.

   A fração é declarada aqui porque MUDA COM A PEÇA: a oficial gasta 33% da
   própria caixa em respiro e descritor (0,6693); a recortada, 16% (0,8416). */
:root{
  --altura-do-A: 32px;
  --marca-fracao-a: 0.6693;   /* peça OFICIAL, com descritor */
  --marca-desvio: 0;
  --h-logo: calc(var(--altura-do-A) / var(--marca-fracao-a));
}
.logo{
  height: var(--h-logo);
  width: auto; object-fit: contain;
  transform: translateY(calc(-1 * var(--marca-desvio, 0) * var(--h-logo)));
}
.header-marca{ align-items: center; }

/* [familia-agrocentral] A MOLDURA DO CABEÇALHO DA FAMÍLIA (14/09/2026)
   Vídeo e Indicadores são painéis irmãos: quem troca de um para o outro pelo
   seletor não pode ver a marca, o título, o seletor e o tema mudarem de lugar
   ou de tamanho. Este bloco é SÓ layout, sem nenhuma cor, e é IDÊNTICO nos
   quatro estilos (vídeo e indicadores, pele Atlas e pele Houer); o
   testar_familia.mjs compara o bloco com o do irmão (G7) e mede a moldura
   renderizada nos dois painéis (G2): mesma posição horizontal e mesmo tamanho
   nos dois, e CENTRADA na altura do cabeçalho de cada um (14/09: presa ao topo,
   ela ficava alta no cabeçalho de duas faixas dos Indicadores). Abaixo de
   1366 px valem os degraus próprios de cada painel.
   Editar aqui é editar nos quatro.

   A RÉGUA DA MARCA É UMA SÓ NA FAMÍLIA. Os dois painéis usam a peça recortada
   sem descritor (a do cabeçalho do vídeo), e o A mede 36 px: a altura sai da
   régua, var(--h-logo), e não de um pixel escrito à mão. Antes, cada painel
   declarava a sua régua (36 px no vídeo, 32 px com a peça oficial nos
   indicadores) e depois a vencia com um pixel fixo (42 e 58 px). Na pele
   Houer, a mesma régua dimensiona o logo.png. */
button,input,select,textarea{font-family:inherit}
@media (min-width: 1366px){
  .main-header{padding-left:16px;padding-right:16px}
  .header-top{gap:14px}
  /* margem de baixo = o que o subtítulo desce além do logo: o conjunto logo,
     título e subtítulo fica no meio do cabeçalho */
  .header-marca{align-self:center;margin-top:0;margin-bottom:8px;gap:8px;
    --altura-do-A:36px;--marca-fracao-a:0.8416;
    --h-logo:calc(var(--altura-do-A) / var(--marca-fracao-a))}
  body.somente-video.video-expandido .header-marca .logo,
  .header-marca .logo{height:var(--h-logo)}
  .header-marca .header-titulo{min-height:0;border-left:none;padding-left:0}
  .header-nome{font-size:14.5px}
  /* O SUBTÍTULO NÃO ENTRA NA CENTRALIZAÇÃO: com ele no cálculo, as duas linhas
     do título subiam ~10 px acima do centro do logo (medido pela tinta, nas
     duas peles). A margem negativa de uma linha tira a altura dele e deixa a
     largura: o título fica centrado no logo, e o subtítulo logo abaixo. */
  .header-sub{font-size:10.5px;line-height:1.1;margin-bottom:-1.1em}
  body.somente-video.video-expandido .header-sub{display:block}
  .seg-portas{align-self:center;margin-top:0;margin-bottom:0;
    border-radius:9px;padding:4px;gap:2px}
  .seg-portas a{padding:6px 14px;border-radius:6px;font-size:11.5px;line-height:1.4}
  .btn-tema{align-self:center;margin-top:0;margin-bottom:0}
}
/* O TÍTULO EM DUAS LINHAS (14/09/2026, pedido do usuário): "Painel Agro
   Central" em cima e o nome do painel embaixo, sem o hífen. O cabeçalho ganha
   cerca de 130 px na horizontal para os segmentadores, que deixam de quebrar.
   E eles se alinham pelo TOPO: pela base, quando um campo quebrava, a Rodovia
   descia e os rótulos saíam em alturas diferentes. */
@media (min-width: 901px){
  .header-nome .nome-painel{display:block}
  .header-nome .nome-sep{display:none}
  /* maiúscula não tem descendente: a tinta das duas linhas fica 2 px acima do
     centro da caixa, e o nome desce esses 2 px para centrar pela TINTA */
  .header-nome{line-height:1.15;position:relative;top:2px}
  body.somente-video.video-expandido .header-filtros,
  .header-filtros .filtros-linha{align-items:flex-start}
}
/* [/familia-agrocentral] */

/* ===== TRÊS PORTAS no segmentador (17/09: Indicadores · Vídeo · Estruturas) =====
   Com o terceiro botão o segmentador cresce ~100 px e, na moldura de 1366+
   (acima), as duas faixas de filtros voltavam a cair em quatro linhas entre
   1366 e 1499 px. Neste degrau os chips, os combos e o próprio segmentador
   apertam um pouco (a fonte dos filtros cai meio ponto), e o cabeçalho
   fica em duas faixas outra vez. A partir de 1500 px a moldura vale inteira. */
@media (min-width: 1366px) and (max-width: 1499px){
  .header-marca .logo{height:50px}
  .header-nome{font-size:13px}
  .header-top{gap:10px}
  .filtros-linha{gap:7px}
  .header-filtros .campo>span{font-size:9.5px}
  .header-filtros .chips,
  .header-filtros .chips-indicador{gap:4px}
  .header-filtros .chip,
  .header-filtros .chip-classe{padding:0 5px;font-size:10px}
  .header-filtros .combo-gatilho{min-width:72px;padding:0 7px}
  .seg-portas{padding:3px}
  .seg-portas a{padding:7px 10px;font-size:10.5px}
}