/* ================================================================
   CALENDARIO.CSS
   O campo de data NÃO usa o <input type="date"> nativo do navegador
   (aquele calendário feio e diferente em cada aparelho) — é um
   componente construído do zero: um botão (.date-trigger) que abre
   um popup (.cal-popup) com um calendário desenhado em HTML/CSS puro.
   A lógica de qual mês mostrar, quais dias travar etc. está em
   js/calendario.js.
   ================================================================ */

.date-box{width:100%;display:flex;justify-content:center;position:relative;}
/* position:relative existe pra servir de referência a QUALQUER
   elemento position:absolute dentro dele — hoje o popup usa
   position:fixed (não depende disso), mas é uma boa prática manter
   esse "ponto de ancoragem" caso o popup mude de estratégia no futuro */

/* o "campo" que fica sempre visível na tela — na verdade é um <button>,
   não um <input>, porque ele só abre o popup, não recebe digitação */
.date-trigger{
  width:auto;min-width:172px;max-width:220px;
  position:relative;
  background:#0b0b0b;border:1px solid var(--line);border-radius:6px;
  padding:13px 12px;font-size:15px;text-align:center;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  color:var(--bone);letter-spacing:0.02em;
  transition:border-color .2s ease;
}
.date-trigger:focus,.date-trigger.open{border-color:var(--acid);outline:none;}
/* fica com a borda verde tanto quando está focado via teclado quanto
   quando o popup está aberto (classe .open, adicionada pelo JS) */
.date-trigger .placeholder{color:#bcb8ad;}
.date-trigger-icon{
  width:16px;height:16px;flex:0 0 16px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  color:var(--acid);pointer-events:none;
}
.date-trigger.open .date-trigger-icon,.date-trigger:focus .date-trigger-icon{color:var(--acid);}
/* texto "Escolher data" enquanto nenhuma data foi selecionada ainda —
   mesma cor apagada usada nos outros placeholders do site */

/* o popup do calendário em si */
.cal-popup{
  /* position:fixed + inset:0 + margin:auto = truque de centralização
     que funciona nos 4 lados da tela ao mesmo tempo, sem precisar medir
     via JavaScript a posição exata do botão que abriu o popup — o
     navegador centraliza sozinho, como um modal comum. */
  position:fixed;inset:0;margin:auto;
  z-index:10;
  width:260px;height:max-content;max-height:calc(100dvh - 24px);overflow-y:auto;
  /* overflow-y:auto garante que, em telas bem baixas (celular deitado,
     por exemplo), o calendário ganhe uma rolagem interna em vez de
     estourar pra fora da tela */
  background:#0b0b0b;border:1px solid var(--line);border-radius:8px;padding:16px;
  box-shadow:0 8px 40px rgba(0, 0, 0, 0.85);
  display:none; /* escondido até o JS adicionar a classe .open */
}
.cal-popup.open{display:block;animation:calIn .18s ease both;}
@keyframes calIn{from{opacity:0;transform:scale(0.96);}to{opacity:1;transform:scale(1);}}
/* animação própria do calendário: fade + leve zoom, sem "subir de
   baixo" como a animação genérica .enter usada no resto do site — como
   o popup nasce centralizado na tela, subir de baixo pra cima dava a
   sensação errada de que ele "abria de baixo" em vez de "aparecer
   no lugar" */

.cal-popup.open::before{
  /* fundo escurecido atrás do popup, criado via ::before pra não
     precisar de uma <div> extra só pra isso no HTML */
  content:"";position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,0.6);
}

.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
/* linha com: seta-esquerda ← / "MÊS ANO" / seta-direita → */
.cal-head button{
  /* estas SÃO botões, mas ficam aqui (e não em botoes.css) porque só
     fazem sentido dentro do calendário — não são reaproveitáveis */
  background:transparent;border:1px solid var(--line);border-radius:6px;
  width:28px;height:28px;color:var(--bone);cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,color .2s ease;
}
.cal-head button:hover{border-color:var(--acid);color:var(--acid);}
.cal-head button:disabled{opacity:0.25;cursor:not-allowed;}
/* a seta "←" recebe disabled via JS quando o mês visível já é o mês
   atual — regra de negócio: não deixar navegar pra meses no passado */
.cal-title{font-size:11px;letter-spacing:0.14em;color:var(--bone);text-transform:uppercase;}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
/* 7 colunas fixas = 7 dias da semana (D S T Q Q S S) */
.cal-dow{font-size:9px;letter-spacing:0.08em;color:rgba(238,233,220,0.4);text-align:center;padding-bottom:6px;}
.cal-day{
  aspect-ratio:1; /* célula sempre quadrada, não importa a largura da tela */
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--bone);background:transparent;border:1px solid transparent;
  border-radius:5px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.cal-day:hover:not(:disabled){border-color:rgba(92,255,110,0.5);}
.cal-day:disabled{color:rgba(238,233,220,0.18);cursor:not-allowed;}
/* dias PASSADOS ficam apagados e travados — o JS decide isso comparando
   cada dia com a data de hoje */
.cal-day.today{color:var(--acid);} /* destaca o dia de hoje mesmo quando ele não está selecionado */
.cal-day.selected{background:var(--acid-dim);border-color:var(--acid);color:var(--acid);font-weight:700;}
.cal-day.occupied:disabled{
  color:rgba(255,77,77,0.72);background:rgba(180,20,20,0.12);
  border-color:rgba(255,77,77,0.22);text-decoration:line-through;
}
.cal-day.empty{visibility:hidden;cursor:default;}
/* preenche os espaços vazios antes do dia 1 do mês, só pra manter o
   grid alinhado (ex: se o mês começa numa quinta, os espaços de
   domingo/segunda/terça/quarta ficam "vazios" mas ocupando lugar) */

.cal-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);text-align:center;}
.cal-clear{
  background:none;border:none;color:rgba(238,233,220,0.5);font-size:11px;
  letter-spacing:0.06em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.cal-clear:hover{color:var(--blood);}
.cal-status{min-height:14px;margin:8px 0 0;color:rgba(238,233,220,0.48);font-size:9px;letter-spacing:.04em;line-height:1.4;}
.cal-status.error{color:rgba(255,90,90,.82);}