/* Agendamento — Daniele Lopes, Advogada.
   Mesma identidade do site oficial (sites/daniele-lopes): navy + branco +
   dourado, Playfair Display no título/assinatura, Figtree no corpo. Página
   de propósito único (marcar consulta), sem menu nem seções longas. */

:root{
  --paper:       #FFFFFF;
  --bg:          #F5F7FA;
  --espresso:    #1B2A4A;
  --espresso-ink:#0F1B32;
  --espresso-2:  #2A3F68;
  --gold:        #D0AD39;
  --gold-deep:   #7E641B;
  --gold-soft:   #D8BF64;
  --cream-dark:  #D7DEEA;
  --ink:         #1C2536;
  --muted:       #58657A;
  --line:        #DFE4EC;
  --ok:          #2E7D4F;
  --erro:        #B3413A;
  /* Glow radial sutil pra fundo escuro, mesmo padrão do site oficial
     (sites/daniele-lopes/styles.css) — reaproveitado aqui pra página inteira
     em navy, em vez de inventar um novo tratamento visual. */
  --espresso-glow-lg: radial-gradient(900px 520px at 14% -12%, var(--espresso-2), transparent 60%);

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --script:  "Parisienne", "Playfair Display", cursive;
  --body:    "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --radius: 14px;
  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

/* Regra global, não pontual: [hidden] tem a mesma especificidade de qualquer
   classe (.x{display:...}), então sem isso QUALQUER elemento escondido via
   `el.hidden = true` que também tenha um `display` explícito em CSS continua
   aparecendo (aconteceu 3 vezes nesta sessão: .fuso-aviso, .secao-conta, os
   ícones do olhinho de senha). Fechado de vez aqui, com !important, em vez
   de remendar rule por rule cada vez que aparece de novo. */
[hidden]{ display: none !important; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Página de agendamento inteira em navy (a pedido, 09/09/2026): antes só o
   cabeçalho (.topo) era escuro e o resto da página ficava claro (--bg),
   dando um corte visual "metade azul, metade branco". Escopado só no
   index.html (classe no body), o admin.html continua no fundo claro padrão
   pro contraste do formulário de login. */
body.pagina-agendamento{ background: var(--espresso-glow-lg), var(--espresso-ink); }

h1, h2{ font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
p{ margin: 0; }
a{ color: inherit; }
button{ font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px;
}

.wrap{ max-width: 640px; margin-inline: auto; padding: clamp(1.2rem, 0.7rem + 2vw, 2.4rem); }

/* ---------- cabeçalho ---------- */
.topo{
  background: var(--espresso-ink);
  padding: 1.6rem 0 2.2rem;
}
.topo .wrap{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.topo img{ width: 46px; height: 46px; border-radius: 10px; margin-bottom: .3rem; }
.topo .nome{ font-family: var(--script); font-size: 2rem; color: var(--paper); line-height: 1; }
.topo .sub{
  font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold-soft);
}
/* Cabeçalho mais enxuto só na página de agendamento (pedido, 09/09/2026):
   com o calendário grande, o cartão inteiro não cabia na tela sem rolar. */
body.pagina-agendamento .topo{ padding: 1rem 0 1.4rem; }
body.pagina-agendamento .topo img{ width: 38px; height: 38px; margin-bottom: .15rem; }
body.pagina-agendamento .topo .nome{ font-size: 1.6rem; }

/* ---------- cartão principal ---------- */
main{ margin-top: -1.4rem; }
body.pagina-agendamento main{ margin-top: -1.9rem; }
.cartao{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 48px -28px rgba(15,27,50,.35);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}
/* Borda dourada só no cartão da página de agendamento (não no admin.html,
   que também reaproveita .cartao pro card de login). */
body.pagina-agendamento .cartao{ border-width: 2px; border-color: var(--gold); }

.titulo-passo{ font-size: 1.35rem; margin-bottom: .35rem; }
.desc-passo{ color: var(--muted); font-size: .96rem; margin-bottom: 1.1rem; }
.fuso-aviso{
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 8px; padding: .4rem .7rem;
  margin: -.8rem 0 1.2rem;
}

/* ---------- passos (indicador) ---------- */
.passos{ display: flex; align-items: center; gap: .4rem; margin-bottom: 1.2rem; }
.passos .bola{
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 600; font-family: var(--display);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.passos .linha{ flex: 1; height: 1px; background: var(--line); }
.passos .bola.ativa{ background: var(--espresso-ink); color: var(--paper); border-color: var(--espresso-ink); }
.passos .bola.feita{ background: var(--gold); color: var(--paper); border-color: var(--gold); }

/* ---------- calendário ---------- */
.mes-nav{ display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.mes-nav .rotulo{ font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.mes-nav button{
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; display: grid; place-items: center; color: var(--ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.mes-nav button:hover:not(:disabled){ background: var(--bg); border-color: var(--gold-soft); }
.mes-nav button:disabled{ opacity: .35; cursor: default; }

.dias-semana{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-bottom: .5rem;
}
.grade-dias{ display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.grade-dias button{
  aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--ink); font-size: .92rem; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.grade-dias button:disabled{ color: var(--line); cursor: default; }
.grade-dias button.disponivel{ border-color: var(--line); }
.grade-dias button.disponivel:hover{ border-color: var(--gold); background: var(--bg); }
.grade-dias button.selecionado{ background: var(--espresso-ink); color: var(--paper); border-color: var(--espresso-ink); }
.grade-dias .vazio{ visibility: hidden; }

/* ---------- horários ---------- */
.grade-horarios{ display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .55rem; margin-top: .3rem; }
.grade-horarios button{
  padding: .65rem .5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font-weight: 600; cursor: pointer; font-variant-numeric: lining-nums;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.grade-horarios button:hover{ border-color: var(--gold); background: var(--bg); }
.grade-horarios button.selecionado{ background: var(--espresso-ink); color: var(--paper); border-color: var(--espresso-ink); }

.vazio-aviso{ grid-column: 1 / -1; color: var(--muted); font-size: .92rem; padding: 1rem 0; text-align: center; }

/* ---------- formulário ---------- */
.campo{ margin-bottom: 1rem; }
.campo label{ display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.campo input, .campo textarea{
  width: 100%; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--line);
  font-family: inherit; font-size: .98rem; color: var(--ink); background: var(--paper);
}
.campo textarea{ resize: vertical; min-height: 4.5rem; }

.resumo{
  background: var(--bg); border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.2rem;
  font-size: .92rem; color: var(--ink);
}
.resumo strong{ color: var(--espresso-ink); }

.politica{
  display: flex; gap: .55rem; align-items: flex-start; font-size: .84rem; color: var(--muted);
  background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.3rem;
}
.politica svg{ flex-shrink: 0; margin-top: .1rem; color: var(--gold-deep); }

.consentimento{
  display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: var(--muted);
  margin-bottom: 1.3rem; cursor: pointer; line-height: 1.5;
}
.consentimento input{ flex-shrink: 0; margin-top: .2rem; width: 16px; height: 16px; accent-color: var(--espresso-ink); cursor: pointer; }
.consentimento a{ color: var(--gold-deep); font-weight: 600; }

.rodape-legal{ margin-top: .3rem; }
.rodape-legal a{ font-weight: 600; }

/* ---------- botões ---------- */
.acoes{ display: flex; gap: .7rem; justify-content: space-between; align-items: center; margin-top: 1.4rem; }
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-weight: 600; font-size: .96rem; padding: .85rem 1.6rem; border-radius: var(--radius);
  background: var(--espresso-ink); color: var(--paper); border: 1px solid transparent; cursor: pointer;
  transition: background-color .25s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover:not(:disabled){ background: var(--espresso); }
.btn:disabled{ opacity: .45; cursor: default; }
/* svg inline entra como baseline e "sobra" alguns px embaixo, o que faz o
   texto do botão parecer mais alto que o ícone. display:block tira essa folga
   e o align-items:center do .btn alinha os dois de verdade. */
.btn svg{ display: block; flex-shrink: 0; }
.btn-agenda{ text-decoration: none; margin: 1.2rem 0 1rem; background: var(--gold-deep); }
.btn-agenda:hover{ background: var(--gold); }
.btn-voltar{
  background: transparent; color: var(--muted); border: none; font-weight: 600; font-size: .92rem;
  cursor: pointer; padding: .6rem .3rem;
}
.btn-voltar:hover{ color: var(--ink); }

/* No mobile o "Confirmar agendamento" fica centralizado e largo embaixo, em
   vez de empurrado pra direita pelo space-between (que só faz sentido no
   desktop, onde às vezes tem outro botão do lado). */
@media (max-width: 560px){
  .acoes{ justify-content: center; }
  .acoes > span:empty{ display: none; }
  .acoes .btn{ width: 100%; }
}

/* ---------- confirmação ---------- */
.confirmacao{ text-align: center; padding: 1.2rem 0 .4rem; }
.confirmacao .selo{
  width: 4rem; height: 4rem; border-radius: 50%; background: color-mix(in srgb, var(--ok) 12%, transparent);
  display: grid; place-items: center; margin: 0 auto 1.1rem;
}
.confirmacao .selo svg{ color: var(--ok); }
.confirmacao h2{ font-size: 1.5rem; margin-bottom: .5rem; }
.confirmacao p{ color: var(--muted); margin-bottom: .3rem; }
.confirmacao .quando{
  font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--espresso-ink);
  margin: 1rem 0 1.2rem;
}
.aviso-spam{ font-size: .8rem; color: var(--muted); margin-top: .9rem; }

.erro-aviso{
  color: var(--erro); background: color-mix(in srgb, var(--erro) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--erro) 25%, transparent); border-radius: 10px;
  padding: .7rem .9rem; font-size: .88rem; margin-bottom: 1rem;
}

/* ---------- rodapé ---------- */
/* Cores claras (não --muted/--gold-deep, pensados pra fundo branco): o
   rodapé fica direto sobre o body, que agora é navy na página de agendamento. */
.rodape{ text-align: center; color: var(--cream-dark); font-size: .78rem; padding: 1.1rem 0 1.6rem; }
.rodape a{ color: var(--gold-soft); text-decoration: none; font-weight: 600; }
.rodape a:hover{ text-decoration: underline; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; }
}