body {
    flex-direction: column;
    width: 100%;
}

/* Lógica do Menu Hamburger Aberto */

/* Esconde itens de navegação e perfil por padrão no mobile */

/* No mobile quem abre/fecha o menu é o hamburguer, então o botão de colapso do
   desktop some. E como styles.css é servido sem media query, .nav-mini (que lá
   fixa max-width: 72px) chegaria até aqui e espremeria o header — o reset
   abaixo garante que um estado salvo no localStorage não vaze para o mobile. */
/* O botão mora dentro do .logo, que segue visível no mobile (é onde fica o
   hamburguer), então precisa ser escondido explicitamente aqui. */

/* Restaura o .logo aos valores da folha base: sem isso, um navMini salvo no
   localStorage deixaria a linha do logo centralizada e sem padding lateral
   também no mobile, mudando a altura/alinhamento do cabeçalho. */

/* Ajustes de Espaçamento e Fontes Mobile */

.content-header {
    padding: 0.84rem 0.8rem;
}

.container-1700 {
    padding: 1.6rem 0.8rem;
}

/* Sub-Header (Cabeçalho dos Relatórios) */
.sub-header {
    padding-bottom: 1.2rem;
    gap: 0.2px;
}

.sub-header-text h2 {
    font-size: 28.8px;
}

.sub-header-text p {
    font-size: 14.4px;
}

#close-btn {
    width: 31.2px;
    height: 31.2px;
}

.relatorios-content {
    padding-top: 0;
    gap: 36px;
}

/* =========================
   Reports - <= 992px
   ========================= */

/* 3 colunas -> 1 coluna */
.space-btw.gapl-30 {
  flex-direction: column;
  gap: 19.2px;
}

/* cada card fica com "cara" de seção */
.classificacao-reports {
  padding: 21.6px;
  border-radius: 19.2px;
}

/* header do card mais compacto */
.classificacao-reports-header {
  width: calc(100% + 43.2px);
  margin-left: -21.6px;
  padding: 21.6px;
  padding-top: 0;
}

.classificacao-reports-header h2 {
  font-size: 24px;
}

/* se você renderiza listas dentro (lista-reports), deixa mais confortável */
.lista-reports {
  padding-top: 21.6px;
}

.lista-reports li {
  padding: 16.8px;
  border-radius: 14.4px;
}

/* =========================
   Pop-up Report - <= 992px
   ========================= */

.pop-ups {
  padding: 19.2px;
}

.pop-up {
  max-width: 100%;
  padding: 21.6px;
  border-radius: 19.2px;
  max-height: calc(100vh - 38.4px);
  overflow: auto;
}

/* botões em coluna no mobile */
.buttons-options {
  flex-direction: column;
  align-items: stretch;
}

.buttons-options button {
  padding: 19.2px;
}

/* =========================
   Statistics / Comparar - <= 992px
   Header já é hamburger aqui (mais espaço horizontal sobrando), mas os
   inputs de data ainda merecem folga para não comprimir "2026-06-24".
   ========================= */

.prazosDiv {
    flex-wrap: wrap;
    gap: 16px;
}

.selecionar-prazo {
    max-width: none;
    min-width: 260px;
    flex: 1 1 260px;
}

.periodos-navegacao.space-btw {
    flex-wrap: wrap;
    gap: 12px;
}