/* Dra. Patricia Barros — agendar.css
 * A janela de agendamento (<dialog id="agendar">): abre por cima da página, sem sair dela.
 * No celular é uma folha que sobe de baixo; a partir de 40rem, um cartão no centro.
 * As cores são as da paleta e ficam aqui mesmo, para o arquivo servir nas duas versões do site.
 * Movimento: o fundo escurece, a caixa entra, a flor gira até parar e as duas opções sobem
 * uma depois da outra. Ao fechar, a caixa desce e o fundo clareia.
 * ========================================================================================== */

.agendar {
  --ag-creme: #FFF5E3;
  --ag-vermelho: #D5384F;   /* o vermelho da marca um tom abaixo: branco em cima dá 4,7:1 */
  --ag-vermelho-fundo: #A82A3F;
  --ag-vinho: #912535;
  --ag-rosa: #F68D9C;
  --ag-salvia: #D5DDCA;
  --ag-verde: #394B3D;
  --ag-tinta: #0D0900;
  --ag-apoio: #4B564C;
  --ag-ease: cubic-bezier(.16, 1, .3, 1);
  --ag-mola: cubic-bezier(.34, 1.4, .64, 1);

  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ag-tinta);
  overflow: hidden;
}
.agendar[open] { display: grid; align-items: end; justify-items: center; }
.agendar::backdrop {
  background: rgb(28 38 30 / .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: ag-fundo 320ms ease-out both;
}
html:has(.agendar[open]) { overflow: hidden; }

.agendar__caixa {
  position: relative; overflow: hidden auto; overscroll-behavior: contain;
  width: min(100%, 35rem); max-height: 100dvh;
  padding: 1.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0; background: var(--ag-creme);
  box-shadow: 0 -18px 60px -20px rgb(28 38 30 / .55);
  animation: ag-sobe 520ms var(--ag-ease) both;
}
/* Puxador da folha, só no celular. */
.agendar__caixa::before {
  content: ""; position: absolute; left: 50%; top: .6rem; width: 2.75rem; height: 4px;
  translate: -50% 0; border-radius: 4px; background: rgb(57 75 61 / .28);
}

/* A flor em traço, grande, no canto: enfeite. */
.agendar__halo {
  position: absolute; right: -4.5rem; top: -4.5rem; width: 15rem; aspect-ratio: 1;
  background-color: var(--ag-salvia); pointer-events: none;
  -webkit-mask: var(--petala-linha) center / contain no-repeat; mask: var(--petala-linha) center / contain no-repeat;
  animation: ag-halo 1.4s var(--ag-ease) both;
}

.agendar__fechar {
  position: absolute; right: .9rem; top: .9rem; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--ag-creme); color: var(--ag-verde); cursor: pointer;
  box-shadow: 0 1px 2px rgb(57 75 61 / .12), 0 6px 16px -6px rgb(57 75 61 / .35);
  transition: rotate 300ms var(--ag-ease), background-color 160ms ease-out, color 160ms ease-out;
}
.agendar__fechar:hover { rotate: 90deg; background: var(--ag-verde); color: var(--ag-creme); }
.agendar__fechar .ico { width: 20px; height: 20px; }

.agendar__topo { position: relative; display: grid; justify-items: start; gap: .6rem; padding-right: 3rem; }
.agendar__flor {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px;
  background: var(--ag-salvia);
  animation: ag-pousa 620ms var(--ag-mola) 80ms both;
}
.agendar__flor img { width: 42px; height: 42px; animation: ag-gira 1.1s var(--ag-ease) 80ms both; }
.agendar__rotulo {
  margin: .35rem 0 0; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ag-vinho);
}
.agendar__titulo {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  line-height: 1.04; letter-spacing: -.025em; color: var(--ag-verde); text-wrap: balance;
}
.agendar__sub { margin: 0; max-width: 38ch; font-size: 1rem; line-height: 1.5; color: var(--ag-apoio); }

.agendar__opcoes { display: grid; gap: .7rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.agendar__opcao {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  min-height: 5.5rem; padding: 1rem; border-radius: 22px; text-decoration: none; cursor: pointer;
  background: var(--ag-salvia); color: var(--ag-tinta);
  transition: translate 220ms var(--ag-ease), box-shadow 220ms var(--ag-ease), background-color 160ms ease-out;
  animation: ag-opcao 560ms var(--ag-ease) both;
}
.agendar__opcoes li:nth-child(1) .agendar__opcao { animation-delay: 160ms; }
.agendar__opcoes li:nth-child(2) .agendar__opcao { animation-delay: 250ms; }
.agendar__opcao--dra {
  background: linear-gradient(150deg, var(--ag-vermelho) 0%, var(--ag-vermelho-fundo) 100%); color: #FFFFFF;
}
.agendar__opcao:hover { color: var(--ag-tinta); translate: 0 -3px; box-shadow: 0 18px 30px -18px rgb(57 75 61 / .7); }
.agendar__opcao--dra:hover { color: #FFFFFF; box-shadow: 0 18px 30px -16px rgb(168 42 63 / .85); }
.agendar__opcao:focus-visible { outline: 3px solid var(--ag-tinta); outline-offset: 3px; border-radius: 22px; }

.agendar__icone {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--ag-verde); color: var(--ag-creme);
}
.agendar__opcao--dra .agendar__icone { background: var(--ag-creme); color: var(--ag-vinho); }
.agendar__icone .ico { width: 26px; height: 26px; }
.agendar__texto { display: grid; gap: .15rem; }
.agendar__texto strong {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3125rem; line-height: 1.1; letter-spacing: -.015em;
  color: var(--ag-verde);
}
.agendar__opcao--dra .agendar__texto strong { color: #FFFFFF; }
.agendar__texto span { font-size: .9375rem; line-height: 1.4; }
.agendar__seta {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ag-creme); color: var(--ag-verde);
  transition: translate 220ms var(--ag-ease);
}
.agendar__opcao--dra .agendar__seta { color: var(--ag-vinho); }
.agendar__seta .ico { width: 20px; height: 20px; }
.agendar__opcao:hover .agendar__seta { translate: 4px 0; }

/* Quando o botão de origem já diz qual é o atendimento, a opção certa pulsa uma vez. */
.agendar[data-destaque="consulta"] .agendar__opcao[data-opcao="consulta"],
.agendar[data-destaque="orientacao"] .agendar__opcao[data-opcao="orientacao"] {
  animation: ag-opcao 560ms var(--ag-ease) both, ag-pulso 1.5s ease-out 700ms 2;
}

/* Opção ainda sem número: aparece, mas avisa que falta confirmar. */
.agendar__pendente {
  display: none; justify-self: start; margin-top: .3rem; padding: .2rem .6rem; border-radius: 999px; font-style: normal;
  background: var(--ag-creme); color: var(--ag-vinho); font-size: .75rem; font-weight: 800; letter-spacing: .02em;
}
.agendar__opcao.is-pendente { cursor: not-allowed; }
.agendar__opcao.is-pendente .agendar__pendente { display: inline-block; }
.agendar__opcao.is-pendente .agendar__seta { opacity: .45; }
.agendar__opcao.is-pendente:hover { translate: none; box-shadow: none; }
.agendar__opcao.is-pendente:hover .agendar__seta { translate: none; }
.agendar__opcao.is-negado { animation: ag-nega 420ms ease-in-out; }

.agendar__nota {
  display: flex; gap: .5rem; align-items: flex-start; margin: 1.1rem 0 0; max-width: none;
  font-size: .8125rem; line-height: 1.5; color: var(--ag-apoio);
}
.agendar__nota .ico { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1em; color: var(--ag-vermelho); }

/* Saída */
.agendar.is-saindo .agendar__caixa { animation: ag-desce 260ms ease-in both; }
.agendar.is-saindo::backdrop { animation: ag-fundo-sai 260ms ease-in both; }

@media (min-width: 40rem) {
  .agendar[open] { align-items: center; padding: 1.5rem; }
  .agendar__caixa {
    max-height: calc(100dvh - 3rem); padding: 2.25rem 2.25rem 1.75rem; border-radius: 34px;
    box-shadow: 0 40px 90px -30px rgb(28 38 30 / .7);
    animation-name: ag-abre;
  }
  .agendar__caixa::before { display: none; }
  .agendar__fechar { right: 1.1rem; top: 1.1rem; }
  .agendar__opcao { padding: 1.15rem 1.25rem; }
  .agendar.is-saindo .agendar__caixa { animation-name: ag-fecha; }
}

@keyframes ag-fundo     { from { opacity: 0; } to { opacity: 1; } }
@keyframes ag-fundo-sai { from { opacity: 1; } to { opacity: 0; } }
@keyframes ag-sobe  { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes ag-desce { from { translate: 0 0; } to { translate: 0 100%; } }
@keyframes ag-abre  { from { opacity: 0; translate: 0 28px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ag-fecha { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: 0 18px; scale: .96; } }
@keyframes ag-pousa { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes ag-gira  { from { rotate: -200deg; } to { rotate: 0deg; } }
@keyframes ag-halo  { from { opacity: 0; rotate: -50deg; scale: .8; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes ag-opcao { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes ag-pulso {
  0%   { box-shadow: 0 0 0 0 rgb(217 59 82 / .5); }
  100% { box-shadow: 0 0 0 16px rgb(217 59 82 / 0); }
}
@keyframes ag-nega {
  0%, 100% { translate: 0 0; }
  20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; }
}

@media (hover: none) {
  .agendar__opcao:hover { translate: none; box-shadow: none; }
  .agendar__opcao:hover .agendar__seta { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .agendar::backdrop, .agendar__caixa, .agendar__halo, .agendar__flor, .agendar__flor img, .agendar__opcao {
    animation: none !important;
  }
}

@media print { .agendar { display: none !important; } }