/* ---------- Calendário de disponibilidade ---------- */
/* Usa os tokens de :root definidos em style.css. Carregado só em agenda.html. */

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.agenda-topo {
  padding-block: clamp(7rem, 12vw, 9.5rem) clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, var(--superficie) 0%, var(--fundo) 100%);
  text-align: center;
}
/* .hero__titulo tem max-width em ch: sem margin-inline a caixa cola na esquerda
   e só o texto centraliza dentro dela, jogando o título fora do eixo da página. */
.agenda-topo .hero__titulo { max-width: 20ch; margin-inline: auto; }
.agenda-topo .hero__sub { margin-inline: auto; }

.agenda { max-width: 760px; margin-inline: auto; }

/* Filtros de espaço */
.agenda__filtros {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.agenda__filtro {
  min-height: 44px; padding: .5rem 1.1rem;
  background: transparent; border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--corpo); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto);
  cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.agenda__filtro:hover { border-color: var(--dourado); color: var(--dourado-escuro); }
.agenda__filtro.ativo { background: var(--preto); border-color: var(--preto); color: #fff; }

/* Painel do mês */
.agenda__painel {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-top: 2px solid var(--dourado);
  box-shadow: var(--sombra);
  padding: clamp(1.1rem, 3vw, 2rem);
}

.agenda__cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.agenda__mes {
  margin: 0; flex: 1 1 auto; min-width: 0; text-align: center;
  font-family: var(--titulo); font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--preto);
}
.agenda__seta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--linha); border-radius: var(--raio);
  color: var(--preto); cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.agenda__seta svg { width: 20px; height: 20px; }
.agenda__seta:hover:not(:disabled) { border-color: var(--dourado); color: var(--dourado-escuro); }
.agenda__seta:disabled { opacity: .3; cursor: default; }

/* Grade */
.agenda__semana,
.agenda__grade {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem;
}
.agenda__semana {
  list-style: none; margin: 0 0 .5rem; padding: 0;
  font-size: .68rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-suave); text-align: center;
}

.agenda__dia {
  min-width: 0; min-height: 44px; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--corpo); font-size: clamp(.85rem, 2.2vw, 1rem);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--texto); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.agenda__dia--vazio { background: transparent; border-color: transparent; }

/* Marcador de estado embaixo do número. Traço cheio = espaço todo livre;
   traço interrompido = só parte dos espaços. A metade em areia usada antes
   sumia no fundo branco e os dois estados ficavam iguais. */
.agenda__dia--livre::after,
.agenda__dia--parcial::after {
  content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 2px;
}
.agenda__dia--livre::after { background: var(--dourado); }
.agenda__dia--parcial::after {
  background: repeating-linear-gradient(90deg, var(--dourado) 0 3px, transparent 3px 6px);
}

.agenda__dia--livre:hover,
.agenda__dia--parcial:hover { border-color: var(--dourado); background: var(--bege); }

.agenda__dia--ocupado,
.agenda__dia--sem-agenda {
  background: var(--areia); border-color: transparent;
  /* --texto-suave sobre --areia dá 3,9:1; este tom escurecido chega a 5,2:1. */
  color: #5C554D; cursor: default;
}
.agenda__dia--passado {
  background: transparent; border-color: transparent;
  color: rgba(107, 99, 90, .35); cursor: default;
}

.agenda__dia.hoje { border-color: var(--dourado); font-weight: 500; }
.agenda__dia.selecionado {
  background: var(--preto); border-color: var(--preto); color: #fff;
}
.agenda__dia.selecionado::after { background: var(--dourado-claro); }
.agenda__dia:focus-visible { outline: 2px solid var(--dourado-escuro); outline-offset: 2px; }

/* Legenda e avisos */
.agenda__legenda {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem;
  list-style: none; margin: 1.4rem 0 0; padding: 1.2rem 0 0;
  border-top: 1px solid var(--linha);
  font-size: .78rem; color: var(--texto-suave);
}
.agenda__legenda li { display: inline-flex; align-items: center; gap: .5rem; }
/* Cada marca é uma miniatura da própria célula, para que a legenda tenha a
   mesma forma que o calendário em vez de misturar traços e quadrados. */
.agenda__marca {
  position: relative; flex: 0 0 auto; width: 18px; height: 18px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.agenda__marca--livre::after,
.agenda__marca--parcial::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 2px;
}
.agenda__marca--livre::after { background: var(--dourado); }
.agenda__marca--parcial::after {
  background: repeating-linear-gradient(90deg, var(--dourado) 0 3px, transparent 3px 6px);
}
.agenda__marca--ocupado { background: var(--areia); border-color: transparent; }

.agenda__estado {
  margin: 1rem 0 0; text-align: center;
  font-size: .88rem; color: var(--texto-suave);
}
.agenda__estado:empty { display: none; }
.agenda__estado--aviso {
  padding: 1.1rem 1.2rem; background: var(--bege);
  border-left: 2px solid var(--dourado); text-align: left; color: var(--texto);
}
/* flex (e não inline-flex) para o botão ocupar a própria linha: dentro do <p> de
   aviso, um botão inline faz o texto escorrer em volta dele. */
.agenda__estado-cta { display: flex; width: fit-content; margin-top: 1.1rem; }

/* Dia escolhido */
.agenda__detalhe { margin-top: 1.5rem; text-align: center; }
.agenda__detalhe:empty { display: none; }
.agenda__detalhe-data {
  margin: 0 0 .3rem; font-family: var(--titulo);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--preto);
}
.agenda__detalhe-texto { margin: 0 0 1.1rem; color: var(--texto-suave); }

.agenda__nota {
  max-width: 52ch; margin: 1.75rem auto 0; text-align: center;
  font-size: .82rem; color: var(--texto-suave);
}

/* Sem grade não faz sentido manter o cabeçalho de mês com as setas mortas. */
.agenda--indisponivel .agenda__cabecalho,
.agenda--indisponivel .agenda__semana,
.agenda--indisponivel .agenda__legenda { display: none; }
.agenda--indisponivel .agenda__estado { margin-top: 0; }
.agenda--sem-dados .agenda__filtros { display: none; }

@media (max-width: 480px) {
  .agenda__painel { padding: 1rem .75rem; }
  .agenda__semana, .agenda__grade { gap: .2rem; }
  .agenda__filtro { padding: .5rem .8rem; font-size: .68rem; }
}