/* =====================================================================
 *  Calendario do RH - grade mensal, semanal, legenda e bloco do painel.
 *
 *  Arquivo proprio porque a grade nao tem precedente no sistema (decisao
 *  do diretor de produto). COR SO POR VARIAVEL DE TEMA: as mesmas
 *  variaveis de selo que o resto do K-RH usa, que ja tem par no tema
 *  escuro em krigs-tokens.css. Nenhuma cor literal aqui.
 *
 *   aniversario  -> amarelo   (festa, e nao alerta)
 *   feriado      -> vermelho  (o dia que para a obra, como no calendario de parede)
 *   facultativo  -> neutro    (pode parar, nao obriga)
 *   comemorativa -> verde
 *   evento       -> azul
 * ===================================================================== */

.cal-t-aniversario  { --cal-fundo: var(--krh-selo-amarelo-fundo);  --cal-tinta: var(--krh-selo-amarelo-texto);  --cal-marca: var(--amarelo); }
.cal-t-feriado      { --cal-fundo: var(--krh-selo-vermelho-fundo); --cal-tinta: var(--krh-selo-vermelho-texto); --cal-marca: var(--vermelho); }
.cal-t-facultativo  { --cal-fundo: var(--krh-selo-neutro-fundo);   --cal-tinta: var(--krh-selo-neutro-texto);   --cal-marca: var(--cinza); }
.cal-t-comemorativa { --cal-fundo: var(--krh-selo-verde-fundo);    --cal-tinta: var(--krh-selo-verde-texto);    --cal-marca: var(--verde); }
.cal-t-evento       { --cal-fundo: var(--krh-selo-azul-fundo);     --cal-tinta: var(--krh-selo-azul-texto);     --cal-marca: var(--azul); }

.cal-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.cal-nav { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.cal-periodo { font-size: 1.1rem; margin: 0 0 0 8px; }
.cal-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-filtros { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.cal-filtro { min-width: 200px; margin: 0; }

.cal-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 12px; font-size: .85rem; }
.cal-leg { display: inline-flex; align-items: center; gap: 6px; }
.cal-bolinha { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cal-marca); vertical-align: middle; flex: 0 0 auto; }

/* Grade: sete colunas iguais, sem tabela, para cada dia poder crescer. */
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--linha); border-radius: var(--raio-sm); overflow: hidden; background: var(--krh-papel, var(--branco)); }
.cal-cab { padding: 6px 8px; font-size: .8rem; text-transform: uppercase; color: var(--cinza);
  border-bottom: 1px solid var(--linha); background: var(--krh-superficie-2); }
.cal-dia { min-height: 104px; padding: 4px 6px 6px; border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia.fora { background: var(--krh-superficie-2); }
.cal-dia.fora .cal-num { color: var(--cinza-2, var(--cinza)); }
.cal-dia.hoje { box-shadow: inset 0 0 0 2px var(--krh-foco, var(--azul)); }
.cal-num { align-self: flex-start; background: none; border: 0; padding: 2px 4px; font: inherit;
  font-weight: 600; color: var(--texto); cursor: pointer; border-radius: var(--raio-sm); }
.cal-num:hover, .cal-num:focus-visible { background: var(--krh-hover); }

.cal-chip { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit;
  font-size: .8rem; line-height: 1.25; padding: 2px 6px; border-radius: var(--raio-sm);
  background: var(--cal-fundo); color: var(--cal-tinta); border-left: 3px solid var(--cal-marca);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip:focus-visible { outline: 2px solid var(--krh-foco, var(--azul)); outline-offset: 1px; }
/* O nome do tipo vai escrito para leitor de tela e para quem nao distingue
 * cor; na grade apertada ele fica escondido visualmente, e aparece na
 * gaveta do dia e na lista. */
.cal-grade .cal-chip-tipo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cal-mais { background: none; border: 0; padding: 0 4px; font: inherit; font-size: .78rem;
  color: var(--azul); cursor: pointer; text-align: left; }

.cal-semana .cal-dia-semana { min-height: 240px; border-right: 1px solid var(--linha); }
.cal-semana .cal-dia-semana:last-child { border-right: 0; }
.cal-semana .cal-chip { white-space: normal; }
.cal-livre { padding: 2px 6px; }

.cal-dia-lista { display: flex; flex-direction: column; gap: 6px; }
.cal-dia-lista .cal-chip { white-space: normal; font-size: .9rem; padding: 6px 8px; }
.cal-descricao { white-space: pre-wrap; }
.cal-sub { margin: 18px 0 8px; font-size: 1rem; }
.cal-pv-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--linha); }

/* Bloco do painel inicial. */
.cal-prox-lista { list-style: none; margin: 0 0 12px; padding: 0; }
.cal-prox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--krh-linha-suave, var(--linha)); }
.cal-prox-dia { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 44px; }
.cal-prox-tipo { font-size: .8rem; color: var(--cinza); min-width: 118px; }

/* Celular: a grade do mes vira coluna de dias com itens (a tela ja abre em
 * lista abaixo de 720px; isto cobre quem escolhe o mes mesmo assim). */
@media (max-width: 720px) {
  .cal-grade { grid-template-columns: 1fr; }
  .cal-cab { display: none; }
  .cal-dia { min-height: 0; border-right: 0; }
  .cal-dia.fora { display: none; }
  .cal-semana .cal-dia-semana { min-height: 0; }
  .cal-filtro { min-width: 0; flex: 1 1 140px; }
}

/* `.sub` e bloco com margem no resto do sistema; dentro da linha do painel
 * ela tem de ficar na mesma altura do nome. */
.cal-prox .sub, .cal-pv-linha .sub { margin: 0; display: inline; }