/* Design system do painel, herdado do painel-rotasertoes (HOUER) via mdfe-cargas / painel-ferrovia.
   Núcleo fixo (cores, tipografia, cards, filtros, tabelas) + semânticos do domínio de pedágio.
   Regras herdadas: a página NUNCA rola (body 100vh em coluna, cada aba é um grid que preenche o
   resto e o que rola são os miolos dos cards); card = borda 1px, raio 10, cabeçalho com gradiente
   claro e título 12,5px caixa alta; número é herói (tabular-nums, unidade discreta ao lado). */
: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);
  /* semânticos do domínio */
  --passeio:var(--azul-70);    /* azul    = veículos de passeio */
  --comercial:var(--vermelho-60);  /* laranja = veículos comerciais */
  --moto:var(--verde-70);       /* verde   = motos */
  --outros:var(--borda-forte);     /* cinza   = especiais e outros */
  --equiv:var(--ameixa-90);      /* roxo    = eixos equivalentes */
  --sobe:var(--verde-70); --desce:var(--vermelho-70);
  --ano-a:var(--borda-forte); --ano-b:var(--azul-80);
}
*{margin:0;padding:0;box-sizing:border-box}
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;display:flex;flex-direction:column}
.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)}
.header-top{display:flex;align-items:center;gap:40px;height:64px}
.logo{height:58px;object-fit:contain}
.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}
.header-nome{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-primary);white-space:nowrap}
.header-sub{font-size:10.5px;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}
/* 7 abas: o menu nunca encolhe; título e subtítulo cedem com reticências em vez de passar por baixo do menu */
.header-top .main-nav{flex-shrink:0}
.header-nome,.header-sub{overflow:hidden;text-overflow:ellipsis}
.header-top .nav-btn{padding:22px 2px}
.main-nav{display:flex;gap:32px}
.nav-btn{background:none;border:none;padding:12px 4px;font-size:11.5px;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;font-family:inherit}
.nav-btn:hover{color:var(--primary-color)}
.nav-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);font-weight:700}
.sair{margin-left:18px;font-size:10px;font-weight:700;color:var(--texto-3);cursor:pointer;
     text-transform:uppercase;letter-spacing:.08em;background:none;border:none;font-family:inherit}
.sair:hover{color:var(--desce)}

/* ---------- 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:18px;padding:12px 16px 13px;
     background:var(--superficie);border-bottom:1px solid var(--border-color);flex-wrap:nowrap}
.grupo{display:flex;flex-direction:column;flex-shrink:0}
.grupo-campos{display:flex;gap:12px;align-items:flex-end}
.divisor{width:1px;height:34px;align-self:flex-end;background:var(--border-color);flex-shrink:0}
.campo{display:flex;flex-direction:column;gap:5px}
.campo>span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
     color:var(--texto-3);line-height:1}
select{font-family:var(--fonte);font-size:12px;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:96px;cursor:pointer;transition:all .2s}
.par-periodo{display:flex;align-items:center;gap:7px}
.par-periodo select{min-width:82px}
.par-periodo .ate{font-size:10.5px;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(--azul-80) 10%, transparent)}

/* combo com busca (concessão, praça) */
.combo{position:relative}
.combo-gatilho{display:flex;align-items:center;justify-content:space-between;gap:10px;
     height:34px;font-size:12px;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(--azul-80) 10%, transparent)}
.combo-gatilho .txt{overflow:hidden;text-overflow:ellipsis}
.combo-gatilho .seta{font-size:8px;color:var(--texto-3);flex-shrink:0}
.combo-painel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:2000;
     width:330px;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:12px;outline:none}
.combo-lista{max-height:300px;overflow-y:auto;padding:5px}
.combo-item{padding:7px 10px;border-radius:7px;font-size:12px;cursor:pointer;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:space-between;gap:8px}
.combo-item:hover{background:var(--azul-10)}
.combo-item.sel{background:var(--azul-10);color:var(--primary-color);font-weight:700}
.combo-item .uf{font-size:9px;font-weight:800;color:var(--texto-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.combo-item.grupo-tit{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
     color:var(--texto-3);cursor:default;padding-top:9px}
.combo-item.grupo-tit:hover{background:none}
.combo-vazio{padding:14px;text-align:center;font-size:11px;color:var(--texto-3)}
/* concessão e praça são elásticas: ficam com a sobra da barra e cedem primeiro quando falta largura,
   para que nenhum segmentador seja cortado nem desça para uma segunda linha */
.barra-filtros>.grupo:first-child{flex:1 1 0;min-width:0;max-width:452px}
.barra-filtros>.grupo:first-child .campo{min-width:0}
.barra-filtros>.grupo:first-child .campo:first-child{flex:1.4 1 140px}
.barra-filtros>.grupo:first-child .campo:last-child{flex:1 1 100px}
#c-conc .combo-gatilho,#c-praca .combo-gatilho{width:100%}
.combo.desligado{opacity:.45;pointer-events:none}

.chips{display:flex;gap:6px}
.chip{font-size:11px;font-weight:700;height:34px;padding:0 13px;border-radius:8px;cursor:pointer;
     background:var(--superficie);border:1.5px solid var(--border-color);color:var(--text-secondary);
     transition:all .2s;font-family:inherit;white-space:nowrap}
.chip:hover{border-color:var(--primary-color);color:var(--primary-color);background:var(--azul-10)}
.chip.active{background:var(--primary-color);color:var(--superficie);border-color:var(--primary-color);
     box-shadow:0 2px 8px color-mix(in srgb, var(--primary-color) 30%, transparent)}
.chip.active[data-tipo=Passeio]{background:var(--passeio);border-color:var(--passeio)}
.chip.active[data-tipo=Comercial]{background:var(--comercial);border-color:var(--comercial);box-shadow:0 2px 8px color-mix(in srgb, var(--vermelho-60) 30%, transparent)}
.chip.active[data-tipo=Moto]{background:var(--moto);border-color:var(--moto);box-shadow:0 2px 8px color-mix(in srgb, var(--verde-70) 30%, transparent)}
.chip.active[data-metrica=eq]{background:var(--equiv);border-color:var(--equiv);box-shadow:0 2px 8px color-mix(in srgb, var(--ameixa-90) 30%, transparent)}
.btn-limpar{margin-left:auto;align-self:flex-end;font-size:10.5px;font-weight:700;height:34px;padding:0 12px;
     border-radius:8px;border:1.5px solid var(--border-color);background:var(--superficie);color:var(--text-secondary);
     cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-limpar:hover{border-color:var(--desce);color:var(--desce)}

/* faixa de contexto abaixo dos filtros: o recorte ativo em uma frase */
.contexto{font-size:11px;color:var(--text-secondary);background:var(--superficie);border-bottom:1px solid var(--border-color);
     padding:5px 16px;flex:0 0 auto;display:flex;gap:18px;align-items:center;white-space:nowrap;overflow:hidden}
.contexto b{color:var(--text-primary);font-weight:700}
.contexto .aviso{color:var(--vermelho-80);background:var(--ambar-10);border:1px solid var(--ambar-20);border-radius:6px;padding:1px 8px;font-weight:600}

/* ---------- abas e layout ---------- */
.aba{display:none;flex:1 1 auto;min-height:0;padding:12px 16px;gap:12px;overflow:hidden;transition:opacity .15s}
.aba.on{display:grid}
.aba.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;min-height:0;min-width:0}
.card .panel-header{position:relative}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;
     border-bottom:1px solid var(--border-color);
     background:linear-gradient(135deg,var(--superficie) 0%,var(--azul-10) 100%);flex-shrink:0}
.panel-header h3{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
     display:flex;align-items:center;gap:7px;white-space:nowrap}
.panel-header .aux{font-size:11px;font-weight:700;color:var(--primary-color);white-space:nowrap}
.panel-header .dir{display:flex;align-items:center;gap:8px;margin-left:auto}
.corpo{flex:1;min-height:0;position:relative;padding:10px 14px 8px}
.corpo.rola{overflow-y:auto;padding:0}
.corpo canvas{width:100%!important;height:100%!important}
.rodape-card{font-size:9.5px;color:var(--texto-3);padding:5px 14px;border-top:1px solid var(--border-color);
     background:var(--superficie);flex-shrink:0;display:flex;justify-content:space-between;gap:12px;white-space:nowrap;overflow:hidden}
.rodape-card span{overflow:hidden;text-overflow:ellipsis}
.rodape-card b{color:var(--text-secondary)}
/* Composição: a frase da cobrança acima da categoria cede espaço (versão curta, longa no title); o aviso de ano parcial não */
#co-acima:empty{display:none}
#co-rodape{flex-shrink:0}

/* grades por aba */
#aba-evolucao{grid-template-columns:63% 1fr;grid-template-rows:1fr}
#aba-evolucao .col-dir{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
#aba-evolucao .col-dir .card:last-child{flex:1 1 0}
#aba-anoano{grid-template-columns:60% 1fr;grid-template-rows:auto minmax(0,1fr)}
#aba-anoano .card-meses{grid-row:1 / span 2}
#aba-composicao{grid-template-columns:58% 1fr;grid-template-rows:56% 1fr}
#aba-composicao .card-classes{grid-row:1 / span 2}
/* eixos equivalentes por veículo no cabeçalho: cede espaço ao título (min-width 0) para a frase mais longa que couber
   ser medida (aba_composicao.js, ajustaAux); a explicação inteira fica no title */
#co-aux{min-width:0;overflow:hidden}
#aba-ranking{grid-template-columns:52% 1fr;grid-template-rows:1fr}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:10px 14px 12px}
.kpis.tres{grid-template-columns:repeat(3,1fr)}
.kpis .kpi.largo{grid-column:1/-1}   /* card ímpar no fim ocupa a linha: rótulo longo sem corte */
.kpi{background:var(--superficie);border:1px solid var(--border-color);border-radius:8px;padding:8px 10px;min-width:0}
.kpi .v{font-size:17px;font-weight:800;color:var(--azul-95);line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .v .u{font-size:9.5px;font-weight:600;color:var(--text-secondary);margin-left:3px;letter-spacing:0}
.kpi .l{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-3);margin-top:2px;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d{font-size:10.5px;font-weight:700;margin-top:3px;white-space:nowrap}
.sobe{color:var(--sobe)}.desce{color:var(--desce)}.neutro{color:var(--text-secondary)}
.kpi .d.sobe::before{content:"▲ "}.kpi .d.desce::before{content:"▼ "}

/* ---------- tabelas ---------- */
.tab-scroll{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--borda) var(--azul-10)}
.tab-scroll::-webkit-scrollbar{width:9px}
.tab-scroll::-webkit-scrollbar-track{background:var(--azul-10)}
.tab-scroll::-webkit-scrollbar-thumb{background:var(--borda);border-radius:5px;border:2px solid var(--azul-10)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
thead th{position:sticky;top:0;z-index:5;background:var(--azul-10);color:var(--primary-color);
     font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
     padding:7px 9px;text-align:left;border-bottom:2px solid var(--border-color);
     white-space:nowrap;user-select:none}
thead th.num{text-align:right}
th[data-o]{cursor:pointer}
th[data-o]:hover{background:var(--superficie-2)}
th.on{color:var(--azul-95)}
tbody td{padding:5px 9px;border-bottom:1px solid var(--azul-10);white-space:nowrap}
tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
tbody td.sec{color:var(--text-secondary);font-weight:600}
tbody tr.clicavel{cursor:pointer}
tbody tr.clicavel:hover td{background:var(--azul-10)}
tbody tr.sel td{background:var(--azul-20)}
tbody tr.parcial td{color:var(--text-secondary)}
tbody td .tag,.kpi .tag{font-size:8.5px;font-weight:800;color:var(--vermelho-80);background:var(--ambar-10);border:1px solid var(--ambar-20);
     padding:0 5px;border-radius:4px;margin-left:5px;vertical-align:middle}
.rodape-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;
     background:var(--azul-10);border-top:2px solid var(--border-color);font-size:10.5px;font-weight:800;
     flex-shrink:0;white-space:nowrap;overflow:hidden}
.rodape-tab .sec{font-weight:600;color:var(--text-secondary)}
.busca{font-size:11px;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:10px;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;font-family:inherit;white-space:nowrap}
.btn-csv:hover{border-color:var(--verde-80);color:var(--verde-80)}
.minibarra{width:54px;height:8px;border-radius:2px;background:var(--azul-10);overflow:hidden;display:inline-block;vertical-align:middle}
.minibarra div{height:100%}
.pos{font-size:9.5px;font-weight:800;color:var(--texto-3);width:22px;display:inline-block}
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* botões de modo no cabeçalho dos cards */
.modos{display:flex;gap:4px}
.modo{font-size:9.5px;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;font-family:inherit}
.modo:hover{border-color:var(--primary-color);color:var(--primary-color)}
.modo.active{background:var(--primary-color);color:var(--superficie);border-color:var(--primary-color)}
.sel-mini{height:24px;font-size:10.5px;padding:0 6px;min-width:70px;border-radius:6px;font-weight:600}

/* legenda de séries (cores distintas por item) */
.legenda{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:0 14px 8px;font-size:10px;color:var(--text-secondary);flex-shrink:0}
.legenda span{display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.legenda span.off{opacity:.35;text-decoration:line-through}
.legenda i{width:10px;height:10px;border-radius:2px;flex-shrink:0}

/* rosca com número no centro */
.rosca-wrap{position:relative;flex:0 0 150px;width:150px;height:150px}
.rosca-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.rosca-centro .v{font-size:13px;font-weight:800;line-height:1;white-space:nowrap;color:var(--azul-95)}
.rosca-centro .l{font-size:7.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3);margin-top:3px}
.lado{display:flex;align-items:center;gap:14px;padding:10px 14px;flex:1;min-height:0}
.lista{flex:1;min-width:0;overflow-y:auto;max-height:100%}
.pl{display:grid;grid-template-columns:minmax(96px,150px) 1fr 74px;align-items:center;gap:8px;font-size:11px;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(--azul-10);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:10.5px}
.pl .val small{color:var(--texto-3);font-weight:600;margin-left:3px}

/* heatmap em tabela (matriz ano × mês) */
.heat td{padding:3px 4px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;font-size:10px;border-radius:3px}
.heat td.ano{text-align:left;font-weight:800;color:var(--text-secondary)}
.heat thead th{text-align:center;padding:5px 4px}

/* ---------- ajuda e tooltip ---------- */
.panel-header .ajuda{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--borda);background:var(--superficie);
     color:var(--texto-3);font-size:10px;font-weight:800;line-height:1;cursor:help;flex-shrink:0;transition:all .15s;padding:0;font-family:inherit}
.panel-header .ajuda:hover,.panel-header .ajuda.on{border-color:var(--primary-color);color:var(--superficie);background:var(--primary-color)}
.popover{display:none;position:absolute;z-index:3000;top:34px;left:14px;width:420px;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:11.5px;line-height:1.5;color:var(--text-primary);font-weight:400;
     text-transform:none;letter-spacing:0;white-space:normal;max-height:60vh;overflow-y:auto}
.popover.on{display:block}
.popover h5{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3);margin-bottom:6px}
.popover p+p{margin-top:6px}
.popover table{font-size:10.5px;margin:7px 0}
.popover td,.popover th{padding:2px 8px 2px 0;border:none;white-space:nowrap;position:static;background:none}
.popover .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
/* Composição: a tabela do "?" tem seis colunas (categoria, tipo, multiplicador, as duas classes e veículos) e pede
   mais que os 420 px do popover; fica dentro do card */
#co-pop{width:min(600px, calc(100% - 28px))}
#co-taxonomia th{text-align:left}

/* tooltip único: cabeçalho (nome + pílula do período), valor grande com legenda, linhas de leitura em frases */
#tt{position:fixed;z-index:9000;display:none;background:var(--superficie);border:1px solid var(--border-color);border-radius:8px;
     box-shadow:0 6px 22px color-mix(in srgb, var(--texto) 17%, transparent);padding:0;font-size:12px;line-height:1.45;pointer-events:none;max-width:360px;min-width:220px}
#tt .cab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 11px;border-bottom:1px solid var(--superficie-2)}
#tt .cab b{font-size:12px;font-weight:800}
#tt .pil{font-size:9.5px;font-weight:800;color:var(--primary-color);background:var(--azul-10);border:1px solid var(--azul-30);border-radius:99px;padding:1px 8px;white-space:nowrap}
#tt .val{padding:8px 11px 4px}
#tt .val .n{font-size:20px;font-weight:800;color:var(--texto);line-height:1;font-variant-numeric:tabular-nums}
#tt .val .n .u{font-size:10px;font-weight:600;color:var(--text-secondary);margin-left:4px}
#tt .val .l{font-size:10px;color:var(--text-secondary);margin-top:2px}
#tt .leit{padding:4px 11px 8px;border-top:1px solid var(--superficie-2);color:var(--texto-2)}
#tt .leit p{margin:3px 0}
#tt .leit b{font-weight:800}
#tt .leit .sobe{color:var(--sobe)}#tt .leit .desce{color:var(--desce)}
#tt .leit .sobe::before{content:"▲ "}#tt .leit .desce::before{content:"▼ "}

.vazio{display:flex;align-items:center;justify-content:center;height:100%;padding:24px;text-align:center;
     font-size:11.5px;color:var(--texto-3);line-height:1.5}
.carregando-tela{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--fundo) 85%, transparent);
     z-index:5000;font-size:12px;font-weight:700;color:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase}
.carregando-tela.some{display:none}

/* ---------- aba Número N ---------- */
#aba-numeron{grid-template-columns:57% 1fr;grid-template-rows:1fr}
#aba-numeron .col-dir{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
#aba-numeron .col-dir .card:first-child{flex:1.15 1 0}
#aba-numeron .col-dir .card:last-child{flex:1 1 0}
/* filtros de série não valem nesta aba: ficam esmaecidos e inertes */
body[data-aba=numeron] .barra-filtros .so-series{opacity:.35;pointer-events:none}
/* Número N: pagamento travado em Ambos (o pavimento não distingue quem paga), legível mas sem clique */
body[data-aba=numeron] .barra-filtros .so-pag .chips{opacity:.7;pointer-events:none}
.barra-filtros .ct{display:none}
.barra-n{position:relative;display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 14px;padding:7px 14px 8px;
     border-bottom:1px solid var(--border-color);flex-shrink:0}
.barra-n .gr{display:flex;flex-direction:column;gap:3px}
.barra-n .gr>span{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3)}
.btn-hip{font-size:10px;font-weight:800;padding:4px 10px;border-radius:6px;border:1.5px solid var(--primary-color);
     background:var(--azul-10);color:var(--primary-color);cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-hip.on,.btn-hip:hover{background:var(--primary-color);color:var(--superficie)}
.pop-hip{top:40px;left:auto;right:10px;width:560px;max-height:min(70vh,560px)}
.pop-hip h5{margin-top:10px}
.pop-hip h5:first-child{margin-top:0}
.pop-hip table{width:100%}
.pop-hip td{vertical-align:middle}
.pop-hip select,.pop-hip input{font-family:inherit;font-size:10.5px;border:1.5px solid var(--border-color);border-radius:5px;padding:2px 4px;height:22px}
.pop-hip input[type=number]{width:62px;text-align:right}
.pop-hip select{max-width:300px}
.pop-hip .linha{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:10.5px}
.pop-hip .linha label{display:flex;align-items:center;gap:6px}
.pop-hip .nota{font-size:10px;color:var(--text-secondary);margin-top:6px}
.pop-hip .rodape-hip{display:flex;justify-content:flex-end;margin-top:10px}
td .nexp{font-variant-numeric:tabular-nums}
td .nexp sup{font-size:.72em;margin-left:1px}
.minipilha{display:inline-flex;width:74px;height:8px;border-radius:2px;overflow:hidden;background:var(--azul-10);vertical-align:middle}
.minipilha i{height:100%}
.pista{font-size:8.5px;font-weight:800;padding:0 5px;border-radius:4px;border:1px solid var(--border-color);color:var(--text-secondary)}
.pista.dup{color:var(--azul-95);border-color:var(--azul-30);background:var(--azul-10)}
.mem{padding:0}
.mem table td:first-child{color:var(--text-secondary);font-weight:600;white-space:normal}
.mem .form{padding:8px 12px;font-size:10.5px;color:var(--texto-2);border-bottom:1px solid var(--azul-10);background:var(--superficie)}
.mem .form b{color:var(--azul-95)}
.mem .rev{padding:7px 12px;font-size:10.5px;color:var(--texto-2);white-space:normal}
.mem .rev b{color:var(--azul-95)}
td.praca-n{white-space:normal;min-width:0}
td.praca-n .sec{font-size:9.5px;color:var(--text-secondary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}
.main-nav .nav-btn{white-space:nowrap}
tbody td .sub{font-size:9.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.heat tr.sel td.ano{background:var(--primary-color);color:var(--superficie);border-radius:3px}

/* abas Isenção e Evasão: gráfico à esquerda, KPIs e tabela à direita (mesmo arranjo da Evolução) */
#aba-isencao,#aba-evasao{grid-template-columns:60% 1fr;grid-template-rows:1fr}
#aba-isencao .col-dir,#aba-evasao .col-dir{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
#aba-isencao .col-dir .card:last-child,#aba-evasao .col-dir .card:last-child{flex:1 1 0}
.perfil{padding:0 14px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;font-size:10.5px}
.perfil .rot{color:var(--texto-3);white-space:nowrap}
.perfil .bar{height:8px;border-radius:4px;background:var(--superficie-2);overflow:hidden}
.perfil .bar div{height:100%;border-radius:4px}
.perfil .n{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.perfil .tit{grid-column:1/-1;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3);margin-top:2px}
/* filtros que não se aplicam à aba: legíveis, sem clique (a aba mostra qual vale) */
body[data-aba=isencao] #ch-metrica,body[data-aba=isencao] #ch-pag,
body[data-aba=evasao] #ch-metrica,body[data-aba=evasao] #ch-tipo,body[data-aba=evasao] #ch-pag,body[data-aba=evasao] #ch-sent,
body[data-aba=isencao] #ch-medida,body[data-aba=evasao] #ch-medida,body[data-aba=ranking] #ch-medida{opacity:.45;pointer-events:none}
/* média diária (VMD, VMDeq): só pagantes, então o segmentador de pagamento fica legível e sem clique */
body[data-vmd="1"] #ch-pag{opacity:.7;pointer-events:none}
.chip.active[data-medida=vmd]{background:var(--teal-70);border-color:var(--teal-70);box-shadow:0 2px 8px color-mix(in srgb, var(--teal-70) 30%, transparent)}
/* Chips e botões ATIVOS: a cor do texto segue o FUNDO do chip, em hsl, que a pele Atlas não troca por token (Erros 25 e
   33). A pele põe no escuro `.chip.active{color:var(--texto-invertido)}` (quase preto) e deixava texto escuro sobre azul,
   verde, roxo e teal (1,66:1 nos Eixos eq.); no claro, branco sobre o cobre do acento dá 4,10:1 e sobre o laranja do
   comercial 3,74:1. Especificidade (0,5,0) para vencer a regra gerada `:root:not([data-tema="claro"]) .chip.active`.
   Fundo de rampa fixa, escuro nos dois temas: texto branco (5,0 a 12,0:1) */
.barra-filtros .chips .chip.active[data-tipo=Passeio],.barra-filtros .chips .chip.active[data-tipo=Moto],
.barra-filtros .chips .chip.active[data-metrica=eq],.barra-filtros .chips .chip.active[data-medida=vmd]{color:hsl(0,0%,100%)}
/* laranja do comercial, claro nos dois temas: texto quase preto (5,3:1) */
.barra-filtros .chips .chip.active[data-tipo=Comercial]{color:hsl(220,43%,4%)}
/* pele Atlas (só ela escreve data-tema), tema claro: cobre do acento com texto quase preto (4,9:1), como já é no escuro */
[data-tema="claro"] .chip.active,[data-tema="claro"] .modo.active,[data-tema="claro"] .panel-header .ajuda.on{color:hsl(220,43%,4%)}
/* "Hipóteses" aberto: no escuro a regra gerada `[data-tema="escuro"] .btn-hip` apagava o fundo do estado ligado */
[data-tema] .dir .btn-hip.on{background:var(--primary-color);border-color:var(--primary-color);color:hsl(220,43%,4%)}

/* ---------- a marca, dimensionada pela TINTA (pele Atlas v2) ----------
   A régua é a mesma aprovada nos painéis de concessão, com UMA medida declarada
   (`--altura-do-A`) e todo o resto derivado das métricas da peça ativa
   (identidade/marca-metricas.css). Medido contra o 2 de Julho:

                        cabeçalho   caixa    A     centro do A
     2 de Julho (ok)       80 px   71,7   48,0   11,9 px acima
     ferrovia (antes)      64 px   56,8   38,0    6,3 px acima   <- desalinhado
     ferrovia (agora)      64 px   54,7   46,0    centrado

   A peça do cabeçalho aqui é a SEM DESCRITOR, recortada na tinta
   (identidade/gerar_marca_cabecalho.py): a oficial gasta 33% da caixa em respiro
   e no descritor, que neste cabeçalho de 64 px sairia com menos de 4 px de
   altura, ilegível. Sem esse peso morto o A vai de 38 para 46 px, quase o
   tamanho aprovado no 2 de Julho (48), e o respiro da régua passa a vir do
   layout, que é onde ele deve estar.

   A proporção do A já estava certa (48/80 = 0,60; 38/64 = 0,59). O que faltava
   era o translateY: as peças oficiais são assimétricas (28 unidades de respiro
   acima do A, 14 abaixo), então centrar a CAIXA deixa a TINTA baixa. O fator vem
   do arquivo de métricas, não de ajuste a olho, e por isso vale para qualquer
   versão da peça. */
:root{
  --altura-do-A: 46px;
  --h-logo: calc(var(--altura-do-A) / var(--marca-fracao-a, 0.6693));
  /* calha fixa, proporcional à dos painéis de concessão (200px para A de 48):
     sem ela o título muda de posição a cada troca de peça */
  /* 158 px: no 2 de Julho o título começa 240 px depois da marca, com A de 48
     (razão 5,0). Com A de 38 aqui a mesma razão pede 190 px, dos quais 15 são o
     gap do cabeçalho e 15 o recuo do próprio bloco de título. */
  --largura-marca: 158px;
}
.logo{
  height: var(--h-logo);
  width: auto; object-fit: contain;
  /* centra a TINTA e não a caixa */
  transform: translateY(calc(-1 * var(--marca-desvio, 0.0551) * var(--h-logo)));
}
/* A CALHA É DA MARCA, não do bloco. `min-width` no .header-marca não reserva
   nada, porque esse bloco contém a marca E o título: o título continuava
   colando na peça. A calha vai na própria imagem, com a tinta ancorada à
   esquerda, e é o que faz o título começar sempre no mesmo x, qualquer que seja
   a versão da peça. */
.logo{ width: var(--largura-marca); object-position: left center; }
/* center, e não stretch: com stretch a imagem para de centralizar e a marca
   sobe mais alguns pixels, defeito já registrado no painel de concessões */
.header-marca{ align-items: center; }
/* o SVG da assinatura é desenhado em midnight: no tema escuro ele desapareceria */
[data-tema="escuro"] img.logo{ filter: invert(1) hue-rotate(180deg) saturate(1.15); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) img.logo{ filter: invert(1) hue-rotate(180deg) saturate(1.15); }
}