/* 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);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);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);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 ainda vai montar (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)}
.chip.active[data-sentido=ambos]{background:var(--ambos);border-color:var(--ambos);
     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}
/* O CABEÇALHO DO CARTÃO SÃO DUAS FRASES, e elas se tocavam.
   Título e auxiliar dividiam uma linha só, sem respiro entre eles: no cartão
   dos piores segmentos as duas somam 561 px numa caixa de 270, então as duas
   quebravam ao mesmo tempo e as linhas de uma encostavam nas da outra.
   Com `flex-wrap`, quem não cabe ao lado desce para a linha de baixo, alinhado
   à ESQUERDA com o título (uma linha só, num flex `space-between`, encosta no
   início). Onde as duas cabem, nada muda; onde não cabem, elas se empilham em
   vez de se espremer. Vale para qualquer indicador, que é o que muda o texto
   auxiliar. `column-gap` é o respiro entre elas lado a lado, `row-gap` o
   respiro quando empilham, e `baseline` alinha as duas pela linha do texto,
   não pela altura da caixa, que é o que fazia a menor flutuar. */
.panel-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
     column-gap:16px;row-gap:6px;padding:11px 16px;
     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;
     line-height:1.35}
.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);
     line-height:1.35}
.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);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);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:var(--verde);color:var(--verde-texto)}

/* ================= 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);
  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}

/* ---------- aba Vídeo-registro (PLANO_ABA_VIDEO.md) ---------- */
/* navegação entre as abas: 3 VERSÕES DE TESTE montadas pelo nav_abas.js
   (decisão pendente); o cabeçalho não tem largura sobrando (Erro 10), então
   nenhuma versão disputa a linha dos filtros.
   N1: seletor segmentado no lugar do subtítulo */
.seg-abas{display:inline-flex;align-self:flex-start;background:var(--fundo);
  border:1px solid var(--border-color);border-radius:999px;padding:2px;gap:2px;margin-top:4px}
.seg-abas a{display:flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;
  font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);font-weight:700;color:var(--text-secondary);text-decoration:none;
  white-space:nowrap;line-height:1.6}
.seg-abas a:hover{color:var(--primary-color)}
.seg-abas a.ativa{background:var(--primary-color);color:var(--texto-invertido);
  box-shadow:0 1px 5px color-mix(in srgb, var(--acento-forte) 35%, transparent)}
.seg-abas svg{flex-shrink:0}
/* N2: barra de seções em faixa própria, sob o cabeçalho */
.barra-abas{flex:0 0 auto;display:flex;align-items:stretch;gap:4px;padding:0 24px;
  background:var(--superficie);border-bottom:1px solid var(--border-color)}
.barra-abas a{display:flex;align-items:center;gap:7px;padding:9px 16px;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);
  font-weight:700;color:var(--text-secondary);text-decoration:none;
  border-bottom:3px solid transparent}
.barra-abas a:hover{color:var(--primary-color)}
.barra-abas a.ativa{color:var(--primary-color);border-bottom-color:var(--primary-color);
  background:linear-gradient(180deg,color-mix(in srgb, var(--acento-forte) 0%, transparent) 55%,color-mix(in srgb, var(--acento-forte) 7%, transparent))}
.barra-abas .contexto{margin-left:auto;align-self:center;font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--texto-3)}
/* N3: trilho lateral de ícones, azul HOUER */
.rail-abas{position:fixed;left:0;top:0;bottom:0;width:60px;z-index:4000;
  background:linear-gradient(180deg,var(--texto),var(--texto));display:flex;flex-direction:column;
  align-items:stretch;padding-top:10px;gap:4px}
.rail-abas a{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 0 10px;color:color-mix(in srgb, var(--superficie) 55%, transparent);text-decoration:none;
  border-left:3px solid transparent}
.rail-abas a span{font-size:clamp(max(7.5px, var(--piso-tela, 0px)), 1.51px + 0.4161vw, 10.38px);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.rail-abas a:hover{color:var(--texto-invertido)}
.rail-abas a.ativa{color:var(--texto-invertido);border-left-color:var(--acento);background:color-mix(in srgb, var(--superficie) 8%, transparent)}
body.com-rail{padding-left:60px}
/* N4/N5: o trilho no cabeçalho (N4 junto ao nome do painel, N5 no extremo
   direito), VERTICAL e de ponta a ponta do head (ajuste de 17/08: itens um
   abaixo do outro, cantos pouco arredondados, altura total). Compacto na
   largura: a linha dos filtros não tem folga (Erro 10) */
.trilho-head{display:flex;flex-direction:column;align-self:stretch;flex-shrink:0;
  gap:2px;padding:3px;border-radius:5px;
  background:linear-gradient(180deg,var(--texto),var(--texto));
  box-shadow:0 2px 8px color-mix(in srgb, var(--texto) 28%, transparent)}
.trilho-head a{position:relative;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;width:64px;border-radius:3px;
  color:color-mix(in srgb, var(--superficie) 55%, transparent);text-decoration:none}
.trilho-head a span{font-size:clamp(max(7.5px, var(--piso-tela, 0px)), 1.51px + 0.4161vw, 10.38px);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.trilho-head a:hover{color:var(--texto-invertido)}
.trilho-head a.ativa{color:var(--texto-invertido);background:color-mix(in srgb, var(--superficie) 12%, transparent)}
.trilho-head a.ativa::after{content:'';position:absolute;left:3px;top:18%;bottom:18%;
  width:2.5px;border-radius:2px;background:var(--acento-forte)}
.trilho-head.extremo{margin-left:10px}
/* modo COMPACTO do cabeçalho, ligado junto com o trilho (N4/N5): recupera
   por gaps e paddings os ~130 px que o trilho ocupa, sem mexer no tamanho
   dos chips; sem isso as faixas de filtros quebram em cascata (Erro 10) */
body.com-trilho .main-header{padding-left:14px;padding-right:6px}
body.com-trilho .header-top{gap:12px}
body.com-trilho .header-marca{gap:10px}
body.com-trilho .filtros-linha{gap:10px}
body.com-trilho .header-filtros .chips{gap:5px}
body.com-trilho .header-filtros .chips-indicador{gap:7px}
body.com-trilho .header-filtros .chip{padding:0 6px}
body.com-trilho .header-filtros .combo-gatilho{min-width:82px}
body.com-trilho .divisor{display:none}
/* pílula flutuante que chaveia as versões durante o teste */
.nav-teste{position:fixed;right:14px;bottom:14px;z-index:5000;display:flex;gap:5px;
  align-items:center;background:color-mix(in srgb, var(--superficie) 97%, transparent);border:1px solid var(--border-color);
  border-radius:999px;box-shadow:0 4px 18px color-mix(in srgb, var(--texto) 18%, transparent);padding:5px 7px 5px 12px;
  font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3)}
.nav-teste button{height:20px;padding:0 9px;font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:800;border-radius:999px;
  border:1px solid var(--border-color);background:var(--superficie);cursor:pointer;color:var(--text-secondary)}
.nav-teste button.active{background:var(--primary-color);border-color:var(--primary-color);color:var(--texto-invertido)}
/* campo "Ir ao km" do cabeçalho */
.ir-km{display:flex;gap:6px;align-items:center}
.ir-km input{height:26px;width:88px;border:1px solid var(--border-color);border-radius:8px;
  padding:0 9px;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);font-family:var(--fonte);
  font-variant-numeric:tabular-nums;outline:none;background:var(--superficie)}
.ir-km input:focus{border-color:var(--primary-color)}

/* layout definitivo (V2 "Painel", escolhida em 17/08): player à esquerda,
   coluna condição/mapa/ranking à direita, o perfil da aba de indicadores */
.layout-video{display:grid;gap:12px;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);
  /* A ALTURA DO CARTÃO DE CONDIÇÃO É FIXA porque o conteúdo dele é fixo (o km,
     a classe e os seis mini-cards). Só que 196 px não davam conta: o corpo
     escondia 10 px antes desta rodada, e o cabeçalho com respiro somou mais 5.
     Conteúdo cortado é pior que conteúdo que rola, porque some sem avisar.

     A conta: o corpo pede ~168 px (o km, a classe e as duas fileiras de
     mini-cards) e o cabeçalho ocupa 61, o que dá 229 mais as bordas. Chegar lá
     tentando não funciona: `.cond-corpo` centraliza com `justify-content`, o
     conteúdo transborda pelos DOIS lados e `scrollHeight` só enxerga a metade
     de baixo, então cada aumento parecia resolver metade do que faltava. A
     sobra sai das linhas de baixo, que são fr e absorvem. */
  grid-template-rows:227px minmax(0,1fr) minmax(0,1.15fr);
  grid-template-areas:"player cond" "player mapa" "player rank"}
.layout-video .card{min-height:0;min-width:0}
#card-player{grid-area:player}
#card-cond{grid-area:cond}
#card-mapa{grid-area:mapa}
#card-rank{grid-area:rank}

/* palco 16:9 SEM molduras pretas (17/08): o vídeo ocupa a LARGURA inteira
   do card e a sobra vertical vai para a faixa linear, que cresce; se a
   janela for baixa demais, o palco encolhe centrado sobre fundo claro */
.palco-wrap{flex:0 0 auto;min-height:120px;display:flex;align-items:center;justify-content:center;
  background:var(--card-bg);overflow:hidden}
.palco{position:relative;background:var(--marca-tinta);overflow:hidden;width:100%;aspect-ratio:16/9}   /* tamanho inicial 16:9 na largura da coluna; o JS afina em px (CLS, 18/09) */
.pal-fundo{position:absolute;inset:0;width:100%;height:100%}
/* fundo BRANCO (20/08): o pôster das trocas é a marca HOUER Investimentos
   em PNG transparente; na reprodução o vídeo cobre o palco inteiro e o
   fundo nunca aparece */
.palco video{display:none;position:absolute;inset:0;width:100%;height:100%;background:var(--marca-tinta)}
.palco.modo-real video{display:block}
.palco.modo-real .pal-fundo,.palco.modo-real .ov{display:none}
/* o aviso de trecho SEM VÍDEO (17/09) é o único overlay que vale sobre o vídeo real;
   o JS só limpa o inline display:none, e a regra acima o esconderia junto */
.palco.modo-real .ov-semvideo{display:block;bottom:auto;top:44%;background:color-mix(in srgb, var(--texto) 62%, transparent);
  color:var(--texto-invertido);padding:6px 12px;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);letter-spacing:.06em}
.palco.tocando .faixa-central{animation:vr-anda var(--dash-dur,1s) linear infinite}
@keyframes vr-anda{to{stroke-dashoffset:-10}}
/* botão de PLAY central quando o vídeo está parado (18/08): deixa claro
   que é preciso dar play; some durante a reprodução */
.pal-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:76px;height:76px;border-radius:50%;border:2px solid color-mix(in srgb, var(--superficie) 85%, transparent);
  background:color-mix(in srgb, var(--texto) 55%, transparent);color:var(--texto-invertido);font-size:clamp(max(26px, var(--piso-tela, 0px)), 1.53px + 1.6996vw, 37.2px);cursor:pointer;display:none;
  align-items:center;justify-content:center;padding-left:7px;
  transition:transform .12s,background .12s}
.pal-play:hover{background:color-mix(in srgb, var(--acento-forte) 88%, transparent);transform:translate(-50%,-50%) scale(1.07)}
.palco:not(.tocando) .pal-play{display:flex}
/* aviso de rebuffer: a rede não acompanhou o bitrate naquele instante
   (abaixo do centro, para não disputar com o botão de play) */
.pal-buffer{display:none;position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);
  background:color-mix(in srgb, var(--texto) 80%, transparent);color:var(--texto-invertido);font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);font-weight:700;
  letter-spacing:.05em;padding:7px 14px;border-radius:8px;
  border:1px solid color-mix(in srgb, var(--neutro-80) 35%, transparent);animation:vr-pulsa 1s ease-in-out infinite alternate}
.palco.carregando-trecho .pal-buffer{display:block}
@keyframes vr-pulsa{from{opacity:.55}to{opacity:1}}
/* seletor de QUALIDADE no canto superior direito do vídeo (18/08, no lugar
   do maximizar: o expandido virou o modo único da aba): 1080p master por
   padrão | 720p cópia leve */
.pal-qual{position:absolute;top:8px;right:10px;z-index:6;display:flex;gap:0;
  border:1px solid color-mix(in srgb, var(--neutro-80) 45%, transparent);border-radius:7px;overflow:hidden;
  opacity:.7;transition:opacity .15s}
.palco:hover .pal-qual,.pal-qual:hover{opacity:1}
.pal-qual button{height:26px;padding:0 9px;font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);font-weight:800;border:none;
  background:color-mix(in srgb, var(--texto) 55%, transparent);color:color-mix(in srgb, var(--superficie-2) 75%, transparent);cursor:pointer;
  font-variant-numeric:tabular-nums}
.pal-qual button:hover{color:var(--texto-invertido)}
.pal-qual button.active{background:var(--primary-color);color:var(--texto-invertido)}
/* o layout maximizado é o modo ÚNICO da aba de vídeo (18/08): no 8104 o
   cabeçalho completo permanece (navegação!); no fork vale o head simples */
/* FORK somente-vídeo (8105) expandido: head SIMPLES com só o nome da
   concessão + Rodovia + Agregação + Indicador (pedido de 18/08) */
body.somente-video.video-expandido .header-marca .logo{height:42px}
body.somente-video.video-expandido .header-marca{gap:10px}
body.somente-video.video-expandido .header-sub{display:none}
body.somente-video.video-expandido .header-marca .header-titulo{min-height:0;border-left:none;padding-left:0}
body.somente-video.video-expandido .campo-irkm,
body.somente-video.video-expandido .campo-qualidade{display:none}
body.somente-video.video-expandido .main-header .divisor{display:none}
body.somente-video.video-expandido .main-header{padding:0 16px}
body.somente-video.video-expandido .header-top{min-height:0;gap:20px}
/* segmentadores TODOS numa linha só (pedido de 18/08): as duas faixas do
   head viram uma corrente única de campos */
body.somente-video.video-expandido .header-filtros{flex-direction:row;
  align-items:flex-end;gap:18px;padding:8px 0}
body.somente-video.video-expandido .filtros-linha{display:contents}
/* comuns ao expandido (navegação de teste e trilho lateral, quando houver) */
body.video-expandido #rail-abas{display:none}
body.video-expandido.com-rail{padding-left:0}
body.video-expandido .nav-teste{display:none}
/* no expandido SÓ o vídeo cresce (18/08): a faixa fica fixa e compacta, o
   cabeçalho do card sai, e a coluna da direita encolhe para dar largura */
body.video-expandido .layout{padding:8px;gap:8px}
/* a coluna do vídeo é a LARGURA do vídeo (var vinda do dimensionaPalco);
   a direita fica com toda a sobra e os indicadores crescem */
body.video-expandido .layout-video{gap:8px;
  /* valor de partida da coluna = a conta do dimensionaPalco (altura disponível × 16/9 + borda,
     limitada pela largura menos a direita mínima); o JS afina em px logo depois (CLS, 18/09) */
  --col-video:min(calc(100% - 326px), calc((100dvh - 216px) * 1.7778 + 2px));
  grid-template-columns:var(--col-video,minmax(0,1fr)) minmax(300px,1fr);
  /* +15 px pelo mesmo motivo da regra base: é ESTA que vale no painel
     expandido, que é como ele abre. Mudar só a base não muda nada na tela. */
  grid-template-rows:231px minmax(0,1fr) minmax(0,1fr)}
body.video-expandido #card-player .panel-header{display:none}
body.video-expandido #card-player{justify-content:center}
body.video-expandido .strip-wrap{flex:0 0 64px}
/* controles do player enxutos no expandido */
body.video-expandido .pl-controles{padding:3px 10px;gap:8px}
body.video-expandido .pl-bt{height:24px;width:28px}
body.video-expandido #pl-seek{height:16px}
/* sobreposição mock, no espírito da queimada nos vídeos reais (SEM hora) */
.ov{position:absolute;color:var(--texto-invertido);pointer-events:none}
.ov-tit{top:10px;left:12px;font-weight:800;letter-spacing:.09em;font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);color:var(--texto-3)}
.ov-tit #ov-rod{display:block;font-size:clamp(max(14px, var(--piso-tela, 0px)), 1.51px + 0.8671vw, 19.8px);font-weight:800;letter-spacing:.02em;
  color:var(--texto-invertido);margin-top:2px}
.ov-latlon{top:12px;right:12px;font-family:ui-monospace,Menlo,monospace;
  font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);color:var(--texto-3)}
.ov-selo{left:0;right:0;bottom:36%;text-align:center;font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:800;
  letter-spacing:.24em;color:color-mix(in srgb, var(--superficie-2) 45%, transparent)}
.ov-km{right:12px;bottom:10px;font-family:ui-monospace,Menlo,monospace;font-size:clamp(max(15px, var(--piso-tela, 0px)), 1.51px + 0.9365vw, 21.25px);
  font-weight:700;background:color-mix(in srgb, var(--texto) 72%, transparent);border:1px solid color-mix(in srgb, var(--neutro-80) 35%, transparent);
  border-radius:6px;padding:4px 10px;font-variant-numeric:tabular-nums}

/* controles do player */
.pl-controles{display:flex;align-items:center;gap:9px;padding:5px 12px;
  border-top:1px solid var(--border-color);flex-shrink:0}
.pl-bt{width:32px;height:26px;border:1px solid var(--border-color);border-radius:7px;
  background:var(--superficie);cursor:pointer;font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);color:var(--primary-color)}
.pl-bt:hover{border-color:var(--primary-color);background:var(--acento-sutil)}
.pl-tempo{font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);font-weight:700;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;white-space:nowrap}
#pl-seek{flex:1;accent-color:var(--primary-color);height:20px;min-width:60px}
/* velocidades como BLOCO à vista (18/08, no lugar do suspenso) */
.pl-vel{display:flex;gap:4px;flex-shrink:0}
.pl-rate{height:24px;padding:0 9px;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);font-weight:700;border-radius:7px;
  border:1px solid var(--border-color);background:var(--superficie);cursor:pointer;
  color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-rate:hover{border-color:var(--primary-color);color:var(--primary-color)}
.pl-rate.active{background:var(--primary-color);border-color:var(--primary-color);color:var(--texto-invertido)}
.pl-kmatual{font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);font-weight:800;font-variant-numeric:tabular-nums;
  white-space:nowrap;min-width:78px;text-align:right}
.strip-wrap{flex:1 1 auto;min-height:64px;padding:6px 12px 8px;display:flex}
#strip{display:block;flex:1;width:100%;height:100%;cursor:pointer}
/* tooltip da faixa linear (mesma cara das tooltips do mapa) */
.strip-tt{position:fixed;z-index:3000;pointer-events:none;display:none;background:var(--superficie);
  border:1px solid var(--border-color);border-radius:7px;box-shadow:0 3px 12px color-mix(in srgb, var(--texto) 14%, transparent);
  padding:6px 10px;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);line-height:1.5;max-width:300px;
  font-family:var(--fonte)}
.strip-tt .dica{display:block;font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);color:var(--texto-3);margin-top:2px}

/* card de condição do km em exibição */
.cond-corpo{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:4px;padding:10px 16px;overflow:hidden}
.cond-km{font-size:clamp(max(23px, var(--piso-tela, 0px)), 1.52px + 1.4915vw, 32.85px);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;line-height:1.1}
.cond-classe{display:flex;align-items:center;gap:7px;font-size:clamp(max(12.5px, var(--piso-tela, 0px)), 1.51px + 0.7630vw, 17.62px);font-weight:600}
.cond-classe b{font-variant-numeric:tabular-nums}
.cond-classe .classe-chip{width:12px;height:12px;flex-shrink:0}
/* mini-cards dos DEMAIS indicadores no trecho em exibição (17/08): valor
   grande, rótulo pequeno, borda UNIFORME (sem cor por tile); a leitura
   qualitativa é o selinho positiva/neutra/negativa; o hover explica o
   critério e a classe */
.cond-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:3px}
.ck{background:var(--superficie);border:1px solid var(--border-color);
  border-radius:7px;padding:4px 8px 5px;display:flex;flex-direction:column;gap:1px;min-width:0}
.ck-topo{display:flex;justify-content:space-between;align-items:baseline;gap:6px;min-width:0}
.ck .l{font-size:clamp(max(8px, var(--piso-tela, 0px)), 1.51px + 0.4508vw, 11.1px);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck .vd{font-size:clamp(max(7.5px, var(--piso-tela, 0px)), 1.51px + 0.4161vw, 10.38px);font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  flex-shrink:0}
.ck .v{font-size:clamp(max(12.5px, var(--piso-tela, 0px)), 1.51px + 0.7630vw, 17.62px);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ck .v small{font-size:clamp(max(8px, var(--piso-tela, 0px)), 1.51px + 0.4508vw, 11.1px);font-weight:700;color:var(--text-secondary);margin-left:3px}

/* CONDIÇÃO MAIS BAIXA (14/09/2026, pedido do usuário): menos respiro vertical
   no cabeçalho, no corpo e nos mini-cards do cartão, sem mexer em nenhuma
   fonte. A linha do cartão na grade passa a ser `auto` (a altura é a do
   conteúdo, que assim nunca sai cortado) e o mapa conserva a altura que tinha:
   todo o espaço ganho vai para o ranking dos piores segmentos, qualquer que
   seja o indicador. */
@media (min-width: 901px){
  #card-cond .panel-header{padding-top:7px;padding-bottom:6px;row-gap:1px}
  #card-cond .cond-corpo{gap:3px;padding:5px 14px 7px}
  #card-cond .cond-grade{gap:4px;margin-top:2px}
  #card-cond .ck{padding:2px 8px 3px;gap:0}
  body.video-expandido .layout-video{
    grid-template-rows:auto minmax(0,calc(50% - 123.5px)) minmax(0,1fr)}
}

/* minimapa e ranking da aba */
#minimapa{flex:1;min-height:0;background:var(--superficie)}
.layout-video .ranking-lista .ru-row{grid-template-columns:150px 1fr 74px}

/* atalho "ver no vídeo" no ranking da aba de indicadores */
.ranking-lista .ru-row{grid-template-columns:176px 1fr 92px 20px}
.layout-video .ranking-lista .ru-row{grid-template-columns:150px 1fr 74px}
.ru-video{opacity:.3;font-size:clamp(max(9px, var(--piso-tela, 0px)), 1.51px + 0.5202vw, 12.55px);color:var(--primary-color);text-decoration:none;
  text-align:center;border:1px solid transparent;border-radius:5px;line-height:16px}
.ru-row:hover .ru-video{opacity:1}
.ru-video:hover{border-color:var(--primary-color);background:var(--acento-sutil)}


/* ---------- segmentador de PORTAS do projeto (18/08): à direita do head,
   centrado na vertical; separa os dois painéis irmãos INDICADORES | VÍDEO
   (local: 8104 x 8105; publicado: Pages campo x Pages vídeo) ---------- */
.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:9px;
  padding:4px;gap:2px}
.seg-portas a{display:flex;align-items:center;padding:6px 14px;border-radius:6px;
  font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);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)}
/* visível também no head simples do modo único */
body.somente-video.video-expandido .seg-portas{margin-left:auto}
/* compactação do head simples para o segmentador de portas caber na linha */
body.somente-video.video-expandido .header-top{gap:14px}
body.somente-video.video-expandido .header-marca{gap:8px}
body.somente-video.video-expandido .header-filtros{gap:10px}
body.somente-video.video-expandido .header-filtros .chips{gap:4px}
body.somente-video.video-expandido .header-filtros .chip{padding:0 7px;font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px)}
body.somente-video.video-expandido .header-filtros .combo-gatilho{min-width:82px}
body.somente-video.video-expandido .header-nome{font-size:clamp(max(14.5px, var(--piso-tela, 0px)), 1.51px + 0.9018vw, 20.52px)}


/* ================= VERSÃO MOBILE do painel de vídeo (18/08) =================
   Detecção AUTOMÁTICA pela largura da tela (celular/retrato): o layout de
   duas colunas vira COLUNA ÚNICA rolável: player, faixa, condição, mapa e
   ranking empilhados; alvos de toque maiores. Nada muda no desktop. */
/* ------------------------------------------------ página ESTRUTURAS (17/09)
   Divisão FIXA 70 % vídeo / 30 % direita (a pedido), SEM bordas pretas
   laterais: a altura da 1ª linha do grid é calculada da largura da coluna do
   vídeo (16:9 + controles + faixa), então o palco preenche a coluna inteira;
   o dimensionaPalco (bloco copiado da página Vídeo) ainda escreve px inline,
   que o CSS sobrepõe. Numa janela baixa a página rola em vez de encolher o
   vídeo. A coluna da direita empilha a TABELA (em cima, com rolagem) e o
   mapa. A --lado-video vem em px do JS (clientWidth do layout, sem a barra de
   rolagem, que o 100vw incluía e gerava rolagem horizontal); o calc é só o
   primeiro quadro. Não toca a .layout-video. */
.layout-estruturas{display:grid;gap:12px;overflow-y:auto;overflow-x:hidden;align-content:start;
  --lado-video:calc((100vw - 32px - 12px - 15px) * 0.7);
  --extras-player:108px;                      /* controles + faixa + bordas do card */
  grid-template-columns:minmax(0,7fr) minmax(0,3fr);
  grid-template-rows:calc(var(--lado-video) * 9 / 16 + var(--extras-player));
  grid-template-areas:"player direita"}
.layout-estruturas .card{min-height:0;min-width:0}
.layout-estruturas #card-player{grid-area:player;flex:0 0 auto}
.layout-estruturas .coluna-direita{grid-area:direita;display:flex;flex-direction:column;gap:12px;min-height:0}
.layout-estruturas #card-tabela{flex:1 1 auto;min-height:0}
.layout-estruturas #card-mapa{flex:0 0 42%;min-height:0}
body.video-expandido .layout-estruturas{gap:8px;--lado-video:calc((100vw - 16px - 8px - 15px) * 0.7);
  grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
body.video-expandido .layout-estruturas .coluna-direita{gap:8px}
.layout-estruturas #palco-wrap{flex:0 0 auto;min-height:0;height:auto !important}
.layout-estruturas #palco{width:100% !important;height:auto !important;aspect-ratio:16/9}
/* tabela na coluna de 30 %: todas as colunas, fonte menor, nome quebra */
.layout-estruturas #tab-estruturas{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px)}
.layout-estruturas #tab-estruturas td:nth-child(3){white-space:normal}   /* Nome (a coluna # vem antes, 18/09) */
.layout-estruturas #tab-estruturas td:nth-child(2){white-space:nowrap}
.layout-estruturas #card-tabela .panel-header{flex-wrap:wrap;row-gap:6px}
.layout-estruturas #in-filtro-e{width:min(150px,100%)}
/* botão do palco (a pedido, 2ª rodada): tocando, NENHUM botão sobre a imagem (pausa
   pelo clique no vídeo ou pela barra de espaço); parado, o play volta ao centro da
   tela, como na regra base (.palco:not(.tocando) .pal-play) */
.layout-estruturas .pal-play::before{content:"▶"}
@media (min-width: 901px){
  #card-estrutura .panel-header{padding-top:7px;padding-bottom:6px}
}
.est-corpo{padding:8px 16px 10px;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.est-corpo:hover{background:var(--hover)}
.est-tipo{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(--texto-3)}
.est-chip{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.est-nome{font-size:clamp(max(17px, var(--piso-tela, 0px)), 1.52px + 1.0752vw, 24.15px);font-weight:800;line-height:1.15}
.est-km{font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px);font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.est-dist{font-size:clamp(max(11px, var(--piso-tela, 0px)), 1.51px + 0.6590vw, 15.45px);color:var(--texto-3)}
.est-pista{font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);color:var(--texto-3);font-weight:700}
#card-tabela .panel-header{gap:10px}
#card-tabela .panel-header .aux{margin-left:auto}
#chips-modo-e .chip{white-space:nowrap}
#in-filtro-e{height:26px;padding:0 10px;border:1px solid var(--border-color);border-radius:6px;
  background:var(--superficie);color:var(--text-primary);font:inherit;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);width:220px}
/* filtros da tabela de estruturas (18/09): texto, km e extensão numa linha própria abaixo
   do cabeçalho do card; valem para a tabela e para a sequência do percurso */
.filtros-tab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:6px 16px;
  border-bottom:1px solid var(--border-color);background:var(--superficie);flex-shrink:0}
.filtros-tab label{display:inline-flex;align-items:center;gap:5px;font-size:clamp(max(10px, var(--piso-tela, 0px)), 1.51px + 0.5896vw, 14px);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);white-space:nowrap}
.filtros-tab .fx-a{text-transform:none;letter-spacing:0;font-weight:600}
.filtros-tab input[type=number]{width:62px;height:24px;padding:0 6px;border:1px solid var(--border-color);
  border-radius:6px;background:var(--fundo);color:var(--text-primary);font:inherit;font-size:clamp(max(11.5px, var(--piso-tela, 0px)), 1.51px + 0.6936vw, 16.18px);
  font-variant-numeric:tabular-nums}
.filtros-tab input[type=number]::-webkit-inner-spin-button{opacity:.5}
.filtros-tab #in-filtro-e{width:150px;height:24px}
.filtros-tab .chip{height:24px;padding:0 10px}
#tab-estruturas td.seq{color:var(--text-secondary);font-weight:700;width:1%}
/* a tabela tem de caber em 30 % da tela a partir de 1366 px (18/09): células
   mais justas, faixa de km das 3ªs faixas em duas linhas, sentido abreviado */
.layout-estruturas #tab-estruturas th,.layout-estruturas #tab-estruturas td{padding:4px 6px}
.layout-estruturas #tab-estruturas td.km{white-space:normal;line-height:1.25}
.layout-estruturas #tab-estruturas td.sent{white-space:nowrap}
@media (max-width: 1500px){
  /* até 1500 px o Tipo é só a cor (a legenda está nos chips do cabeçalho e no title da
     célula); o Nome ganha a largura e para de quebrar em três linhas */
  .layout-estruturas #tab-estruturas td.tipo .tipo-txt{display:none}
  .layout-estruturas #tab-estruturas td.tipo .est-chip{margin-right:0}
}
@media (max-width: 1400px){
  .layout-estruturas #tab-estruturas{font-size:10.5px}
  .layout-estruturas #tab-estruturas th,.layout-estruturas #tab-estruturas td{padding:4px 5px}
  .filtros-tab #in-filtro-e{width:120px}
  .filtros-tab input[type=number]{width:54px}
}
#tab-estruturas tbody tr.sel td.seq{color:var(--primary-color)}
#card-tabela .tab-scroll{flex:1;min-height:0;overflow:auto}
#tab-estruturas{width:100%;border-collapse:collapse;font-size:clamp(max(12px, var(--piso-tela, 0px)), 1.51px + 0.7283vw, 16.9px)}
#tab-estruturas th{cursor:pointer;user-select:none;white-space:nowrap}
#tab-estruturas th.ord{color:var(--primary-color)}
#tab-estruturas th.num,#tab-estruturas td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#tab-estruturas tbody tr.sel td{background:var(--acento-sutil);font-weight:700}
#chips-tipo-e .est-chip{margin-right:5px}
#tab-estruturas tbody tr.semvideo td{color:var(--texto-3)}
#tab-estruturas tbody tr[aria-disabled] td{cursor:default;background:none}
#tab-estruturas tbody tr.fora td{color:var(--texto-3);font-style:italic}
#tab-estruturas tbody tr.sel-grupo td{background:color-mix(in srgb, var(--acento-sutil) 55%, transparent)}
#tab-estruturas tbody tr.vista td{opacity:.55}
#tab-estruturas tbody tr.vista td:first-child::after{content:" ✓";color:var(--verde);font-weight:800}
#tab-estruturas tbody tr.vista.sel td{opacity:1}
#bt-limpar-vistas{height:24px;padding:0 8px;font-size:clamp(max(10.5px, var(--piso-tela, 0px)), 1.51px + 0.6243vw, 14.72px);white-space:nowrap}
.est-semvideo{font-size:clamp(max(9.5px, var(--piso-tela, 0px)), 1.51px + 0.5549vw, 13.28px);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-3);
  border:1px solid var(--border-color);border-radius:4px;padding:0 4px;margin-left:6px;vertical-align:1px}

@media (max-width: 900px){
  .layout-estruturas{display:flex;flex-direction:column;overflow-y:auto}
  .layout-estruturas .coluna-direita{display:contents}
  .layout-estruturas #palco{width:100% !important}
  #card-tabela{order:2}
  #card-mapa{order:3}
  #card-tabela .tab-scroll{max-height:340px}

  html,body{max-width:100vw;overflow-x:hidden}
  body{height:auto;min-height:100vh;min-height:100svh;overflow-y:auto}
  /* head mobile no PADRÃO do painel de indicadores: 1ª linha = marca;
     segmentador em linha inteira (2 botões de meia largura); filtros numa
     FAIXA ROLÁVEL horizontal, sem quebras em cascata */
  .main-header{padding:0 10px}
  .header-top{flex-wrap:wrap;align-items:center;gap:8px;min-height:0;padding:8px 0}
  .header-marca{order:1;flex:1 1 auto;gap:8px;max-width:100%;min-width:0}
  .header-marca .logo{height:38px}
  body.somente-video.video-expandido .header-marca .logo{height:38px}
  .header-marca .header-titulo{min-width:0;padding-left:10px}
  body.somente-video.video-expandido .header-nome,
  .header-nome{font-size:11.5px;white-space:normal;line-height:1.25;max-width:none}
  .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}
  body.somente-video.video-expandido .header-filtros,
  .header-filtros{order:3;flex:1 1 100%;min-width:0;flex-wrap:nowrap;
    overflow-x:auto;gap:12px;padding:2px 0 6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .header-filtros::-webkit-scrollbar{display:none}
  .header-filtros .campo{flex-shrink:0}
  body.somente-video.video-expandido .header-filtros .chips,
  .header-filtros .chips{flex-wrap:nowrap}
  .header-filtros .chip{flex-shrink:0}
  .combo-painel{width:min(300px,88vw)}
  #strip{max-width:100%}
  /* no celular o CSS manda no tamanho do palco (16:9 pela largura do
     card), imune às medidas inline do dimensionaPalco */
  .layout-video .card{min-width:0;width:100%;max-width:100%}
  .palco-wrap{width:100% !important;height:auto !important;max-width:100%}
  .palco{width:100% !important;height:auto !important;aspect-ratio:16/9;max-width:100%}

  body.video-expandido .layout,
  .layout{display:flex;flex-direction:column;gap:10px;padding:8px;overflow:visible}
  body.video-expandido .layout-video,
  .layout-video{display:flex;flex-direction:column}
  .layout-video .card{min-height:0}
  #card-player{order:1}
  #card-cond{order:2}
  #card-mapa{order:3}
  #card-rank{order:4}
  .palco-wrap{min-height:0}
  body.video-expandido .strip-wrap,
  .strip-wrap{flex:0 0 64px;padding:4px 8px 6px}
  .pl-controles{flex-wrap:wrap;row-gap:6px;padding:6px 8px}
  #pl-seek{flex:1 1 100%;order:9;height:26px}
  .pl-bt{width:40px;height:32px;font-size:13px}
  .pl-rate{height:30px;padding:0 11px;font-size:11px}
  .pal-qual button{height:30px;padding:0 11px;font-size:11px}
  .pal-play{width:64px;height:64px;font-size:22px}
  #minimapa{height:250px;flex:none}
  .layout-video .ranking-lista{max-height:340px}
  .cond-grade{grid-template-columns:repeat(3,1fr);gap:5px}
  .cond-km{font-size:19px}
}


/* avatar do usuário logado (18/08): círculo no EXTREMO direito do head,
   como no Gmail; injetado pelo porteiro_cliente só no site publicado */
.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}
}

/* ===== degrau DESKTOP estreito (18/08, auditoria): em 1024 px o head
   caía para 4 linhas; a faixa de filtros vira rolagem horizontal e o head
   volta à linha única ===== */
@media (min-width: 901px) and (max-width: 1080px){
  .header-sub{display:none}
  body.somente-video.video-expandido .header-filtros,
  .header-filtros{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .header-filtros::-webkit-scrollbar{display:none}
  .header-filtros .campo{flex-shrink:0}
  .header-filtros .chips{flex-wrap:nowrap}
  .header-filtros .chip{flex-shrink:0}
  .seg-portas a{padding:4px 8px;font-size:10px}
}

/* ATLAS: daqui para baixo, bloco gerado pelo aplicador */
/* o botão de tema (.btn-tema) é vestido pelo próprio tema.js: só ícone, 30 px, redondo */

/* ---------- 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-fora: #b6c2d1;

/* ---------- A CENA DO PALCO ----------
   O desenho da estrada que aparece enquanto o vídeo não toca é uma
   ILUSTRAÇÃO NOTURNA, e um vídeo tem moldura escura nos dois temas. Pela
   regra geral o céu e o asfalto viraram papéis do tema, e no escuro a cena
   INVERTEU: estrada clara dentro de um painel escuro. É a mesma decisão do
   palco e da capa do login, superfície fixa e não superfície do tema. */
  --cena-ceu-alto: #1e293b;
  --cena-ceu-baixo: #33415c;
  --cena-asfalto: #141c2b;
  --cena-pista: #1f2a3d;
  --cena-bordo: #5b6b82;
  --cena-faixa: #94a3b8;
  --cena-horizonte: #475569;
}

/* ---------- a marca, dimensionada pela TINTA (pele Atlas v2) ----------
   UMA medida declarada (`--altura-do-A`); o resto sai das métricas da peça ativa
   (identidade/marca-metricas.css), que aqui é a SEM DESCRITOR recortada na tinta,
   porque o cabeçalho tem 58 px e o descritor sairia com 4 px de altura.

   A ALTURA AQUI É MENOR QUE A DOS OUTROS PAINÉIS, e a razão é medida. Este
   cabeçalho não tem só marca e título: tem a linha de FILTROS inteira, que pede
   713 px. Com a régua de 46 px de A, a assinatura ocupa 155 px de largura contra
   os 84 px do logotipo antigo, os filtros ficam com 681 px, quebram para uma
   segunda linha e o cabeçalho passa de 58 para 88 px — trinta pixels tirados do
   vídeo, que é o conteúdo. Com A de 36 px a assinatura ocupa 122 px, sobra o que
   os filtros pedem e o cabeçalho continua numa linha só.

   Régua não é dogma: o que não muda é a marca ser medida pela TINTA e a medida
   ser UMA. Quanto ela vale depende do que mais divide aquele cabeçalho. */
:root{
  --altura-do-A: 36px;
  --h-logo: calc(var(--altura-do-A) / var(--marca-fracao-a, 0.8416));
}
/* SEM calha fixa aqui: reservar largura para o título faz sentido onde o
   cabeçalho é marca + título; onde ele é marca + título + filtros, a calha sai
   do orçamento de quem tem função. */
.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; }

/* SEGMENTADORES DO VÍDEO ENTRE 1081 E 1365 PX (14/09/2026): o mesmo aperto
   de respiro dos Indicadores, para Rodovia, Agregação e Indicador caberem numa
   linha sem quebrar os chips dentro do campo. */
@media (min-width: 1081px) and (max-width: 1365px){
  body.somente-video.video-expandido .header-filtros .chips,
  body.somente-video.video-expandido .header-filtros .chips-indicador{gap:4px}
  body.somente-video.video-expandido .header-filtros .chip{padding:0 4px}
  body.somente-video.video-expandido .header-filtros .combo-gatilho{min-width:70px}
  body.somente-video.video-expandido .header-filtros{gap:10px}
}

/* [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] */
/* cabeçalho até 1600 px (18/09): chips mais justos para a linha "Estruturas + Reprodução" caber numa
   linha só; assim a altura do cabeçalho não muda quando o JS monta os chips (CLS) */
@media (max-width: 1600px){
  .header-filtros .chip{padding:0 10px}
  .header-filtros .chips-indicador{gap:6px}
}
/* no cabeçalho compacto (vídeo expandido) os chips de cada campo cabem em duas linhas; reservar as
   duas linhas antes de o JS montar os chips mantém a altura do cabeçalho desde a 1ª pintura (CLS, 18/09) */
@media (max-width: 1600px){
  body.video-expandido .header-filtros .chips{min-height:56px}
}