/* Calendário do sistema, no lugar do seletor de data padrão do navegador.
   Dois usos (js/componentes/calendario.js):
   - campo de data: <input type="date" data-calendario> (macro campo_data) vira campo
     "dd/mm/aaaa" + botão + calendário flutuante;
   - calendário embutido: <div data-calendario-embutido> mostra o mês direto na página. */

.campo-data {
  position: relative;
}

.campo-data .campo__entrada {
  padding-right: 48px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.campo-data__botao {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--cor-texto-suave);
  background: transparent;
  border: 0;
  border-radius: var(--raio-2);
  transform: translateY(-50%);
  transition: color var(--duracao-2), background-color var(--duracao-2);
}

.campo-data__botao:hover,
.campo-data[data-aberto] .campo-data__botao {
  color: var(--cor-marca);
  background: var(--cor-marca-suave);
}

.campo-data__botao .icone {
  width: 18px;
  height: 18px;
}

.campo-data__painel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--camada-flutuante);
  animation: abrir-calendario var(--duracao-3) var(--curva-saida);
  transform-origin: top left;
}

.campo-data__painel[hidden] {
  display: none;
}

.campo-data[data-para-cima] .campo-data__painel {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom left;
}

@keyframes abrir-calendario {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}

/* ================================================================ o calendário */
.calendario {
  width: 316px;
  max-width: calc(100vw - 2 * var(--margem-lateral));
  padding: var(--espaco-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-3);
  user-select: none;
}

.calendario--embutido {
  box-shadow: var(--sombra-1);
}

.calendario__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  margin-bottom: var(--espaco-2);
}

.calendario__titulo {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 2px;
}

/* Mês e ano são botões: levam às grades de meses e de anos. */
.calendario__periodo {
  padding: 6px 8px;
  font-size: var(--texto-sm);
  font-weight: 650;
  color: var(--cor-texto);
  text-transform: capitalize;
  background: transparent;
  border: 0;
  border-radius: var(--raio-2);
  transition: background-color var(--duracao-2);
}

.calendario__periodo:hover {
  background: var(--cor-realce);
}

.calendario__navegar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--cor-texto-secundario);
  background: transparent;
  border: 0;
  border-radius: var(--raio-2);
  transition: background-color var(--duracao-2), color var(--duracao-2);
}

.calendario__navegar:hover {
  color: var(--cor-texto);
  background: var(--cor-realce);
}

.calendario__navegar:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendario__navegar .icone {
  width: 18px;
  height: 18px;
}

.calendario__semana,
.calendario__dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendario__dia-da-semana {
  padding: 6px 0;
  text-align: center;
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
}

/* A grade anima ao trocar de mês, no sentido da navegação. */
.calendario__dias[data-direcao="frente"] {
  animation: calendario-frente var(--duracao-3) var(--curva-saida);
}

.calendario__dias[data-direcao="tras"] {
  animation: calendario-tras var(--duracao-3) var(--curva-saida);
}

@keyframes calendario-frente {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

@keyframes calendario-tras {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}

.calendario__dia {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
  background: transparent;
  border: 0;
  border-radius: var(--raio-2);
  transition:
    background-color var(--duracao-1),
    color var(--duracao-1),
    transform var(--duracao-2) var(--curva-mola);
}

.calendario__dia:hover {
  background: var(--cor-realce);
}

.calendario__dia:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cor-marca);
}

.calendario__dia--fora {
  color: var(--cor-texto-suave);
  opacity: 0.45;
}

/* Hoje: um anel. */
.calendario__dia--hoje {
  font-weight: 700;
  color: var(--cor-marca);
  box-shadow: inset 0 0 0 1px var(--cor-marca);
}

.calendario__dia[aria-selected="true"] {
  font-weight: 700;
  color: var(--cor-sobre-marca);
  background: var(--cor-marca);
  box-shadow: none;
  transform: scale(1.04);
}

.calendario__dia:disabled {
  color: var(--cor-texto-suave);
  text-decoration: line-through;
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}

/* Marcação de evento no dia: um ponto embaixo do número. */
.calendario__dia[data-marcado]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  background: var(--cor-ouro);
  border-radius: 50%;
}

.calendario__dia[aria-selected="true"][data-marcado]::after {
  background: var(--cor-sobre-marca);
}

/* Grades de meses e de anos. */
.calendario__grade-grande {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  animation: surgir-de-baixo var(--duracao-3) var(--curva-saida);
}

.calendario__celula-grande {
  padding: 12px 4px;
  font-size: var(--texto-sm);
  text-transform: capitalize;
  color: var(--cor-texto);
  background: transparent;
  border: 0;
  border-radius: var(--raio-2);
}

.calendario__celula-grande:hover {
  background: var(--cor-realce);
}

.calendario__celula-grande[aria-selected="true"] {
  font-weight: 650;
  color: var(--cor-sobre-marca);
  background: var(--cor-marca);
}

.calendario__rodape {
  display: flex;
  justify-content: space-between;
  margin-top: var(--espaco-2);
  padding-top: var(--espaco-2);
  border-top: 1px solid var(--cor-borda);
}