/* =====================================================================
   ADL CALENDÁRIO 1.0 — calendário padrão do @arraialdajuda
   Preto e branco, números grandes, estilo Apple. Mobile primeiro:
   no celular abre em TELA CHEIA (meses em rolagem vertical, rodapé fixo
   com Limpar e Confirmar); a partir de 760px, janela central com 2 meses.
   Enquanto está aberto, os elementos flutuantes da página ficam ocultos.
   Usar junto com /includes/adl-calendario.js. Tudo tem prefixo adl-cal,
   para não conflitar com o tema nem com outras páginas.
   ===================================================================== */

/* Campo que abre o calendário (botão com a data escolhida) */
.adl-cal-campo{
  display:flex; align-items:center; gap:12px; width:100%; min-width:0; height:56px; padding:0 16px; margin:0;
  background:#fff; border:1.5px solid #d9dde3; border-radius:14px; cursor:pointer; text-align:left;
  font-family:var(--fonte-base,'Quicksand',sans-serif); font-size:16.5px; font-weight:700; line-height:1.2; color:#161616;
  transition:border-color .2s ease;
}
.adl-cal-campo:hover, .adl-cal-campo[aria-expanded="true"]{ border-color:#161616; }
.adl-cal-campo:focus-visible{ outline:2px solid #161616; outline-offset:2px; }
.adl-cal-campo svg{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:#161616; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.adl-cal-campo span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adl-cal-campo[data-vazio="1"] span{ color:#6b6f73; font-weight:600; }

/* Fundo escurecido */
.adl-cal-fundo{
  position:fixed; inset:0; z-index:10040; background:rgba(22,22,22,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .22s ease;
}
.adl-cal-fundo.aberto{ opacity:1; }
.adl-cal-fundo[hidden], .adl-cal[hidden]{ display:none; }
html.adl-cal-travado, html.adl-cal-travado body{ overflow:hidden; }

/* =====================================================================
   CELULAR (até 759px): TELA CHEIA, estilo Apple
   Cabeçalho fixo (título, resumo, X em degradê e dias da semana), meses em
   rolagem vertical com o nome do mês fixo durante a rolagem, e rodapé fixo
   com Limpar e Confirmar sempre visíveis. Respeita as áreas seguras do iPhone.
   A altura é a da área VISÍVEL da tela (100dvh e, via JS, visualViewport):
   as barras do Safari/Chrome nunca cobrem o rodapé.
   ===================================================================== */
.adl-cal{
  box-sizing:border-box; position:fixed; inset:0; z-index:10050;
  display:flex; flex-direction:column; width:100%; height:100%; height:100dvh;
  padding:0; background:#fff; color:#161616; border-radius:0;
  font-family:var(--fonte-base,'Quicksand',sans-serif); font-style:normal; text-align:left;
  transform:translateY(32px); opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.adl-cal.aberto{ transform:none; opacity:1; }
.adl-cal *, .adl-cal *::before, .adl-cal *::after{ box-sizing:border-box; }
.adl-cal p{ margin:0; }
.adl-cal button{ font-family:inherit; -webkit-tap-highlight-color:transparent; }

.adl-cal-cabeca{
  flex:0 0 auto; padding:calc(14px + env(safe-area-inset-top,0px)) 20px 0;
  background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid #eceef0;
}
.adl-cal-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-height:48px; }
.adl-cal-titulo{ font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.4px; color:#161616; }
.adl-cal-resumo{ margin-top:6px !important; font-size:15px; font-weight:600; line-height:1.4; color:#6b6f73; min-height:21px; }

/* Fechar: X grande e extra negrito, em degradê (cores do site), sem círculo, alinhado ao título */
.adl-cal-fechar{
  flex:0 0 auto; width:52px; height:52px; margin:-12px -12px 0 0; padding:0; border:0; background:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, opacity .2s ease;
}
.adl-cal-fechar:hover{ opacity:.75; }
/* Blindagem: nenhum estilo de botão do tema desenha círculo, fundo, borda ou sombra no X */
.adl-cal .adl-cal-fechar, .adl-cal .adl-cal-fechar:hover, .adl-cal .adl-cal-fechar:focus, .adl-cal .adl-cal-fechar:active{
  background:none !important; background-color:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
.adl-cal-fechar:active{ transform:scale(.9); }
.adl-cal-fechar svg{ width:32px; height:32px; fill:none; stroke-width:3.6; stroke-linecap:round; }

/* Dias da semana: uma linha só, fixa no cabeçalho (no celular) */
.adl-cal-semana{ display:grid; grid-template-columns:repeat(7,1fr); margin:14px -2px 0; padding:0 0 10px; }
.adl-cal-semana span{ text-align:center; font-size:13px; font-weight:700; line-height:1; color:#6b6f73; }

/* Setas de mês: só no computador (no celular, a rolagem substitui as setas) */
.adl-cal-nav{ display:none; }
.adl-cal-seta{
  width:44px; height:44px; padding:0; border-radius:50%; border:1.5px solid #d8d8d8; background:#fff; color:#161616;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, border-color .2s ease;
}
.adl-cal-seta svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.adl-cal-seta:hover{ background:#f5f6f7; border-color:#161616; }
.adl-cal-seta:disabled{ opacity:.3; cursor:default; }
.adl-cal-seta:disabled:hover{ background:#fff; border-color:#d8d8d8; }

/* Meses: rolagem vertical, nome do mês fixo enquanto rola */
.adl-cal-meses{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:8px; padding:0 18px 24px; scroll-padding-top:0;
}
.adl-cal-mes{ flex:0 0 auto; min-width:0; }
.adl-cal-mes-titulo{
  position:sticky; top:0; z-index:1; margin:0 -18px 6px !important; padding:16px 20px 10px;
  background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-size:19px; font-weight:800; line-height:1.2; letter-spacing:-.2px; text-transform:capitalize; color:#161616;
}
.adl-cal-grade{ width:100%; border-collapse:collapse; table-layout:fixed; }
.adl-cal-grade thead{ display:none; }
.adl-cal-grade th{ padding:0 0 8px; font-size:13px; font-weight:700; line-height:1; text-align:center; color:#6b6f73; }
.adl-cal-grade td{ padding:2px 0; text-align:center; }
.adl-cal-dia{
  position:relative; display:flex; align-items:center; justify-content:center; width:100%; max-width:52px; aspect-ratio:1/1; height:auto;
  margin:0 auto; padding:0; border:0; border-radius:50%; background:none; cursor:pointer;
  font-size:18px; font-weight:700; line-height:1; color:#161616; font-variant-numeric:tabular-nums;
  transition:background-color .15s ease, color .15s ease, transform .12s ease;
}
.adl-cal-dia:hover{ background:#f0f1f2; }
.adl-cal-dia:active{ transform:scale(.94); }
.adl-cal-dia:focus-visible{ outline:2px solid #161616; outline-offset:1px; }
.adl-cal-dia:disabled{ color:#c4c7cb; cursor:default; background:none; transform:none; }
/* Hoje: um ponto discreto embaixo do número */
.adl-cal-dia.e-hoje::after{ content:''; position:absolute; bottom:6px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor; }
/* Faixa entre as datas (inclui a prévia ao passar o mouse) */
.adl-cal-grade td.e-faixa{ background:#f0f1f2; }
.adl-cal-grade td.e-inicio.com-faixa{ background:linear-gradient(to right, transparent 50%, #f0f1f2 50%); }
.adl-cal-grade td.e-fim.com-faixa{ background:linear-gradient(to left, transparent 50%, #f0f1f2 50%); }
.adl-cal-grade td.e-faixa .adl-cal-dia:hover{ background:#e2e4e7; }
/* Datas escolhidas: círculo preto, número branco */
.adl-cal-grade td.e-inicio .adl-cal-dia, .adl-cal-grade td.e-fim .adl-cal-dia{ background:#161616; color:#fff; }

/* Rodapé fixo: Limpar e Confirmar sempre visíveis */
.adl-cal-rodape{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px max(14px, calc(10px + env(safe-area-inset-bottom,0px)), calc(10px + var(--adl-cal-barra, 0px)));
  background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid #eceef0;
}
.adl-cal-limpar{
  min-height:48px; padding:0 4px; background:none; border:0; cursor:pointer; font-size:16px; font-weight:700; color:#161616;
  text-decoration:underline; text-underline-offset:4px;
}
.adl-cal-limpar:disabled{ opacity:.35; cursor:default; }
.adl-cal-confirmar{
  flex:0 1 220px; height:54px; padding:0 28px; border:0; border-radius:999px; background:#161616; color:#fff; cursor:pointer;
  font-size:16.5px; font-weight:800; white-space:nowrap; transition:transform .2s ease, opacity .2s ease;
}
.adl-cal-confirmar:hover{ transform:translateY(-1px); }
.adl-cal-confirmar:active{ transform:scale(.98); }
.adl-cal-confirmar:disabled{ opacity:.3; cursor:default; transform:none; }
.adl-cal-confirmar:focus-visible, .adl-cal-limpar:focus-visible, .adl-cal-seta:focus-visible, .adl-cal-fechar:focus-visible{ outline:2px solid #161616; outline-offset:2px; }

/* Telas muito estreitas ou baixas */
@media(max-width:359px){
  .adl-cal-cabeca{ padding-left:14px; padding-right:14px; }
  .adl-cal-meses{ padding-left:12px; padding-right:12px; }
  .adl-cal-mes-titulo{ margin-left:-12px !important; margin-right:-12px !important; padding-left:14px; padding-right:14px; }
  .adl-cal-dia{ font-size:16.5px; }
  .adl-cal-rodape{ padding-left:14px; padding-right:14px; }
  .adl-cal-titulo{ font-size:21px; }
}
@media(max-height:600px){ .adl-cal-titulo{ font-size:20px; } .adl-cal-resumo{ margin-top:2px !important; } .adl-cal-semana{ margin-top:8px; } }

/* A partir de 760px: janela central, dois meses lado a lado, com setas */
@media(min-width:760px){
  /* Centralizado com inset + margin:auto (sem left:50% + transform, que falha no WebKit) */
  .adl-cal{
    inset:0; margin:auto; width:min(780px, calc(100vw - 48px)); height:fit-content; max-height:calc(100vh - 48px);
    padding:28px 32px 24px; border-radius:28px; transform:translateY(16px);
  }
  .adl-cal.aberto{ transform:none; }
  .adl-cal-cabeca{ padding:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:0; }
  .adl-cal-topo{ align-items:flex-start; }
  .adl-cal-titulo{ font-size:22px; }
  .adl-cal-fechar{ width:52px; height:52px; margin:-12px -12px 0 0; }
  .adl-cal-fechar svg{ width:32px; height:32px; }
  .adl-cal-semana{ display:none; }
  .adl-cal-nav{ display:flex; justify-content:flex-end; gap:10px; margin-top:-4px; }
  .adl-cal-meses{ flex:0 0 auto; flex-direction:row; gap:40px; overflow:visible; padding:0; margin-top:4px; }
  .adl-cal-mes{ flex:1 1 0; }
  .adl-cal-mes-titulo{ position:static; margin:0 0 10px !important; padding:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .adl-cal-grade thead{ display:table-header-group; }
  .adl-cal-dia{ max-width:48px; aspect-ratio:auto; height:44px; font-size:17px; }
  .adl-cal-rodape{ margin-top:16px; padding:16px 0 0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid #e6e8ea; }
  .adl-cal-confirmar{ flex:0 0 auto; height:52px; padding:0 30px; font-size:16px; }
  .adl-cal-limpar{ font-size:15.5px; }
}

@media(prefers-reduced-motion:reduce){
  .adl-cal, .adl-cal-fundo, .adl-cal-dia, .adl-cal-confirmar{ transition:none !important; }
}