/* ============================================================
   COMPONENTE geral-layout-lateral — painel esquerdo + área principal
   Layout de duas colunas que preenche um corpo "colado":
   um painel fixo à esquerda (cabeçalho + lista + rodapé) e a área
   principal à direita (corpo rolável + rodapé). Cada página preenche
   as partes. Compartilhado (Distribuição e Extrajornada).
   ============================================================ */

.geral-layout-lateral {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* ---- painel esquerdo (300px) ---- */
.geral-painel-esquerdo {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--borda);
  background: var(--fundo-suave);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* cabeçalho do painel (título/colunas); o padrão de alinhamento e o padding
   ficam a cargo de quem usa (título → padding 0 12px; colunas → 0 4px) */
.geral-painel-esquerdo-cabecalho {
  min-height: 32px;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-superficie);
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.geral-painel-esquerdo-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;   /* faixas e itens vão rente às bordas; o respiro é do padding de cada item/faixa (12px) */
}

.geral-painel-esquerdo-rodape {
  border-top: 1px solid var(--borda);
  padding: 8px;
  background: var(--fundo-superficie);
}

/* ---- área principal (à direita): corpo rolável + rodapé ---- */
.geral-corpo-lateral {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.geral-corpo-lateral-rolagem {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  background: var(--fundo-superficie);
}