/* ============================================================
   COMPONENTE geral-calendario-mes — grade de mês (calendário)
   7 dias da semana nas colunas, semanas nas linhas. Cabeçalho
   dos dias fixo no topo. Célula = um dia, com o número no topo
   esquerdo; o conteúdo dentro de cada dia é de quem usa.
   Variante --continuo (diasPorLinha): N colunas (custom property
   --calendario-colunas), sem cabeçalho, sigla + número em cada dia.
   Variante --unidades (unidadesPorDia): o dia em bloco cinza e as
   unidades alinhadas por linha (custom property --calendario-unidades).
   Componente compartilhado (Escala e Extrajornada).
   O z-index 2 é o empilhamento interno do sticky (exceção à
   escala 10/20/30/40; ver MANUAL §8). Montagem:
   componentes/js/geral-calendario-mes.js
   ============================================================ */

/* container que rola nas duas direções (as colunas têm largura mínima) */
.geral-calendario-mes {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  position: relative;
}

/* ---------- cabeçalho dos dias da semana (7 colunas, fixo no topo) ---------- */
.geral-calendario-mes-cabecalho {
  display: grid;
  grid-template-columns: repeat(var(--calendario-colunas, 7), minmax(200px, 1fr));
  position: sticky;
  top: 0;
  min-height: 32px;
  z-index: 2;
}

/* sigla do dia da semana: caixa alta em 11px. O fundo branco e a borda
   inferior ficam na célula (não no container) para cobrirem toda a
   largura ao rolar na horizontal */
.geral-calendario-mes-cabecalho-dia {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fundo-superficie);
  border-bottom: 1px solid var(--borda);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* ---------- grade de semanas ---------- */
.geral-calendario-mes-grade {
  display: flex;
  flex-direction: column;
}

/* cada semana: 7 colunas (ou N, na variante contínua) de no mínimo 200px que crescem
   para preencher; quando não cabem, a grade rola na horizontal */
.geral-calendario-mes-semana {
  display: grid;
  grid-template-columns: repeat(var(--calendario-colunas, 7), minmax(200px, 1fr));
}

/* ---------- célula de um dia ---------- */
.geral-calendario-mes-dia {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  padding: 4px;
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  background-color: var(--fundo-superficie);
}

/* dia de outro mês: célula e número apagados */
.geral-calendario-mes-dia--fora {
  background-color: var(--fundo-suave);
}

.geral-calendario-mes-dia--fora .geral-calendario-mes-numero {
  color: var(--texto-debil);
}

/* número do dia, no canto superior esquerdo, SEMPRE no mesmo slot (24px, redondo):
   assim ele não se move ao virar o círculo de "hoje" — só o fundo muda */
.geral-calendario-mes-numero {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--texto-forte);
}

/* hoje: o mesmo slot, agora preenchido (o número fica no lugar) */
.geral-calendario-mes-dia--hoje .geral-calendario-mes-numero {
  background-color: var(--fundo-contraste);
  color: var(--texto-invertido);
}

/* faixa do topo do dia (número): GRUDA logo abaixo do cabeçalho dos dias (32px) e, com fundo opaco,
   cobre o conteúdo que rola por baixo — o número da data fica visível enquanto a semana está na tela e as
   unidades passam por trás, sem os textos se sobreporem. Confinada ao dia (grade iguala a altura das 7
   células), então solta na virada da semana. z-index 1 = faixa interna do sticky, abaixo do cabeçalho (z 2; MANUAL §8) */
.geral-calendario-mes-dia-topo {
  position: sticky;
  top: 32px;
  z-index: 1;
  padding-bottom: 4px;
  background-color: var(--fundo-superficie);
  border-bottom: 1px solid var(--borda);   /* a divisória do número mora aqui: acompanha o sticky */
}
.geral-calendario-mes-dia--fora .geral-calendario-mes-dia-topo {
  background-color: var(--fundo-suave);
  border-bottom: none;   /* dia de outro mês não tem conteúdo abaixo, então sem linha solta */
}

/* sigla do dia da semana ao lado do número: só existe na variante contínua (abaixo) */
.geral-calendario-mes-sigla {
  display: none;
}

/* ---------- variante contínua (diasPorLinha): N colunas, sem cabeçalho dom…sáb ---------- */
/* o dia da semana muda a cada linha, então não há cabeçalho fixo: cada dia traz a sigla */
.geral-calendario-mes--continuo .geral-calendario-mes-cabecalho {
  display: none;
}

/* sem cabeçalho, a faixa do número gruda no topo; sigla e número lado a lado ("SÁB 3") */
.geral-calendario-mes--continuo .geral-calendario-mes-dia-topo {
  top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.geral-calendario-mes--continuo .geral-calendario-mes-sigla {
  display: inline;
  font-size: 9px;   /* microetiqueta: rótulo não-textual em caixa alta (MANUAL §5) */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.geral-calendario-mes--continuo .geral-calendario-mes-dia--fora .geral-calendario-mes-sigla {
  color: var(--texto-debil);
}

/* ---------- variante com unidades (unidadesPorDia): padrão de blocos (MANUAL §11) ---------- */
/* o cabeçalho segue as colunas dos dias (mesmo vão e margem); o fundo fica no container, que cresce
   até a largura mínima das colunas para cobrir também os vãos ao rolar na horizontal */
.geral-calendario-mes--unidades .geral-calendario-mes-cabecalho {
  column-gap: 8px;
  min-width: min-content;
  padding: 0 8px;
  background-color: var(--fundo-superficie);
}

.geral-calendario-mes--unidades .geral-calendario-mes-cabecalho-dia {
  border-bottom: none;
}

.geral-calendario-mes--unidades .geral-calendario-mes-grade {
  gap: 8px;
  padding: 0 8px 8px;
}

.geral-calendario-mes--continuo.geral-calendario-mes--unidades .geral-calendario-mes-grade {
  padding-top: 8px;
}

/* cada linha do calendário = a faixa do número + uma linha por unidade; cada dia ocupa todas elas como
   subgrade, então o bloco de cada unidade começa na mesma altura nos dias da linha e o mais alto define
   a altura dos outros (cada linha se ajusta sozinha) */
.geral-calendario-mes--unidades .geral-calendario-mes-semana {
  grid-template-rows: auto repeat(var(--calendario-unidades, 1), auto);
  column-gap: 8px;
  row-gap: 4px;
}

/* o dia = bloco cinza arredondado; quem usa pinta cada unidade como um bloquinho branco dentro dele */
.geral-calendario-mes--unidades .geral-calendario-mes-dia {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  padding: 4px;
  border: none;
  border-radius: var(--raio-medio);
  background-color: var(--fundo-pagina);
}

.geral-calendario-mes--unidades .geral-calendario-mes-dia--fora {
  background-color: var(--fundo-suave);
}

/* a faixa do número continua grudando no topo, agora no cinza do bloco e sem a linha embaixo */
.geral-calendario-mes--unidades .geral-calendario-mes-dia-topo {
  padding: 0 4px;
  background-color: var(--fundo-pagina);
  border-bottom: none;
}

.geral-calendario-mes--unidades .geral-calendario-mes-dia--fora .geral-calendario-mes-dia-topo {
  background-color: var(--fundo-suave);
}