/* Camada responsiva: carregada como ÚLTIMO link do head para vencer empates sem !important.
   Regra: largura decide o arranjo, altura decide o cabeçalho. Alvo desktop 1366×768 a 1920×1080
   sem rolagem de página; abaixo de 1100px a grade empilha e a página volta a rolar. */
@media (max-height: 800px){
  .header-top{height:56px}
  .logo{height:var(--h-logo)}
  .header-top .nav-btn{padding:18px 2px}
  .barra-filtros{padding:9px 16px 10px}
  .aba{padding:9px 12px;gap:9px}
  .kpi .v{font-size:15px}
}
/* Barra de filtros em UMA linha de 1366 a 3840 px. Com seis segmentadores a barra só cabe inteira com rótulos
   longos a partir de 1920; abaixo disso, rótulos curtos e chips mais justos. Concessão e praça são elásticas
   (estilo.css) e ficam com a sobra. Medido em 1366, 1440, 1536, 1600 e 1920 (LEARNINGS, Erro 19). */
@media (max-width: 1919px){
  .chip{padding:0 9px;font-size:10.5px}
  .chips{gap:4px}
  .grupo-campos{gap:9px}
  .barra-filtros{gap:10px;padding-left:12px;padding-right:12px}
  .par-periodo select{min-width:66px;padding:0 6px}
  .btn-limpar{padding:0 9px;font-size:10px}
  .barra-filtros .lg{display:none}
  .barra-filtros .ct{display:inline}
}
@media (max-width: 1535px){
  .main-header{padding:0 24px}
  .header-top{gap:24px}
  .header-top .main-nav{gap:18px}
  .nav-btn{font-size:10.5px;letter-spacing:.06em}
  .chip{padding:0 7px}
  .chips{gap:3px}
  .grupo-campos{gap:8px}
  .barra-filtros{gap:8px}
  .barra-filtros .divisor{display:none}
  .par-periodo{gap:5px}
  .par-periodo select{min-width:62px;padding:0 4px}
}
@media (max-width: 1365px){
  .header-sub{display:none}
  .chip{font-size:10px}
  /* abaixo de 1366 a barra não cabe numa linha: melhor quebrar do que cortar um segmentador */
  .barra-filtros{flex-wrap:wrap;row-gap:8px}
  #aba-evolucao{grid-template-columns:62% 1fr}
  #aba-composicao{grid-template-columns:55% 1fr}
}
@media (min-width: 1920px){
  .aba{padding:14px 20px;gap:14px}
  table{font-size:12px}
  .kpi .v{font-size:19px}
}
@media (min-width: 2560px){
  html{font-size:18px}
  table{font-size:13px}
  .kpi .v{font-size:22px}
  .panel-header h3{font-size:14px}
}
/* celular e tablet: empilhar, devolver rolagem e deslizar as abas e os filtros */
@media (max-width: 1100px){
  body{overflow:auto;height:auto;min-height:100vh}
  .main-header{padding:0 14px}
  .header-top{height:auto;flex-wrap:wrap;gap:8px 14px;padding:8px 0}
  .header-top .main-nav{margin-left:0;width:100%;overflow-x:auto;gap:14px}
  .header-top .nav-btn{padding:8px 2px;white-space:nowrap}
  .header-sub{display:none}
  .barra-filtros{flex-wrap:wrap;overflow-x:auto;gap:10px}
  .divisor{display:none}
  .grupo{flex-shrink:1;min-width:0;max-width:100%}
  .barra-filtros>.grupo:first-child{flex:1 1 100%;max-width:100%}
  .grupo-campos{flex-wrap:wrap;row-gap:10px}
  .btn-limpar{margin-left:0}
  .contexto{white-space:normal}
  .aba.on{display:flex;flex-direction:column;overflow:visible}
  .aba .card{min-height:320px;flex:0 0 auto}
  #aba-evolucao .col-dir,#aba-numeron .col-dir,#aba-isencao .col-dir,#aba-evasao .col-dir{display:contents}
  .pop-hip{width:min(560px,92vw);right:4px}
  .panel-header{flex-wrap:wrap}
  .panel-header .dir{margin-left:0;flex-wrap:wrap}
  #aba-numeron .busca{width:120px}
  #aba-numeron .tab-scroll{overflow-x:auto;min-height:320px}
  #aba-numeron .rodape-tab{flex-wrap:wrap;white-space:normal}
  .corpo{min-height:260px}
  .popover{width:min(420px,92vw)}
  /* Composição: título, tabela do "?" e rodapé do gráfico quebram linha, para nada sair do card nem cortar a frase */
  #aba-composicao .card-classes .panel-header h3{white-space:normal}
  #co-pop{top:100%;max-height:290px}   /* abaixo do título em duas linhas e dentro do card, que corta o que passa */
  #co-taxonomia table{font-size:9.5px}
  #co-taxonomia td,#co-taxonomia th{white-space:normal;padding-right:5px}
  #aba-composicao .card-classes .rodape-card{white-space:normal;flex-wrap:wrap}
  #co-aux{white-space:normal}      /* no celular a frase dos eixos equivalentes quebra linha, inteira */
  /* lista do período: ao lado da rosca de 150 px sobravam 164 px para uma linha de 186 (nome, barra e valor), e o valor
     ficava cortado na borda do card; no celular a rosca vai acima e a lista ocupa a largura */
  #aba-composicao .lado{flex-direction:column;align-items:stretch}
  #aba-composicao .rosca-wrap{align-self:center}
}