/* Agendamento — Ryan Schmidt (demo de prospecção, identidade pessoal:
   Assinatura Meia-Noite, ver marca/pessoal/DESIGN.md). Dark-first: preto de
   base, azul-marinho profundo como único destaque, Libre Caslon Text
   itálico na assinatura, Onest no resto. Página de propósito único (marcar
   diagnóstico), sem menu nem seções longas — mesmo molde estrutural do
   produto pros clientes (agendamento/daniele-lopes/frontend/styles.css),
   só reskinada pra essa identidade. */

:root{
  --bg:            #0A0A0E;
  --primary:       #191970;
  --primary-bright:#7A7AE1;
  --text:          #F5F5F7;
  --surface:       #15151C;
  --border:        #26262F;
  --text-muted:    #A0A0AB;
  --ok:            #3FA66B;
  --erro:          #E0645A;

  --wordmark: "Libre Caslon Text", Georgia, serif;
  --body:     "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;

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

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

[hidden]{ display: none !important; }

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

h1, h2{ font-family: var(--body); 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(--primary-bright); 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{ padding: 1rem 0 1.4rem; }
.topo .wrap{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.topo img{ width: 38px; height: 38px; border-radius: 10px; margin-bottom: .2rem; }
.topo .nome{ font-family: var(--wordmark); font-style: italic; font-size: 1.6rem; line-height: 1; }
.topo .nome b{ font-weight: 400; color: var(--text); }
.topo .nome em{ font-style: italic; color: var(--primary-bright); }
.topo .sub{
  font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ---------- cartão principal ---------- */
main{ margin-top: -.6rem; }
.cartao{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}

.titulo-passo{ font-size: 1.35rem; margin-bottom: .35rem; }
.desc-passo{ color: var(--text-muted); font-size: .96rem; margin-bottom: 1.1rem; }
.fuso-aviso{
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--primary-bright);
  background: color-mix(in srgb, var(--primary) 20%, 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(--body);
  background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.passos .linha{ flex: 1; height: 1px; background: var(--border); }
.passos .bola.ativa{ background: var(--primary); color: var(--text); border-color: var(--primary); }
.passos .bola.feita{ background: var(--primary-bright); color: var(--bg); border-color: var(--primary-bright); }

/* ---------- calendário ---------- */
.mes-nav{ display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.mes-nav .rotulo{ font-weight: 600; font-size: 1.05rem; }
.mes-nav button{
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--border); background: transparent;
  cursor: pointer; display: grid; place-items: center; color: var(--text);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.mes-nav button:hover:not(:disabled){ background: var(--bg); border-color: var(--primary-bright); }
.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(--text-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(--text); 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(--border); cursor: default; }
.grade-dias button.disponivel{ border-color: var(--border); }
.grade-dias button.disponivel:hover{ border-color: var(--primary-bright); background: var(--bg); }
.grade-dias button.selecionado{ background: var(--primary); color: var(--text); border-color: var(--primary); }
.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(--border); background: transparent;
  color: var(--text); font-weight: 600; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.grade-horarios button:hover{ border-color: var(--primary-bright); background: var(--bg); }
.grade-horarios button.selecionado{ background: var(--primary); color: var(--text); border-color: var(--primary); }

.vazio-aviso{ grid-column: 1 / -1; color: var(--text-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(--text-muted); margin-bottom: .35rem; }
.campo input, .campo textarea{
  width: 100%; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--border);
  font-family: inherit; font-size: .98rem; color: var(--text); background: var(--bg);
}
.campo textarea{ resize: vertical; min-height: 4.5rem; }

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

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

.consentimento{
  display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: var(--text-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(--primary-bright); cursor: pointer; }
.consentimento a{ color: var(--primary-bright); 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(--primary); color: var(--text); 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(--primary-bright); color: var(--bg); }
.btn:disabled{ opacity: .45; cursor: default; }
.btn svg{ display: block; flex-shrink: 0; }
.btn-agenda{ text-decoration: none; margin: 1.2rem 0 1rem; }
.btn-voltar{
  background: transparent; color: var(--text-muted); border: none; font-weight: 600; font-size: .92rem;
  cursor: pointer; padding: .6rem .3rem;
}
.btn-voltar:hover{ color: var(--text); }

@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) 16%, 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(--text-muted); margin-bottom: .3rem; }
.confirmacao .quando{
  font-weight: 600; font-size: 1.3rem; color: var(--primary-bright);
  margin: 1rem 0 1.2rem;
}
.aviso-spam{ font-size: .8rem; color: var(--text-muted); margin-top: .9rem; }

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

/* ---------- rodapé ---------- */
.rodape{ text-align: center; color: var(--text-muted); font-size: .78rem; padding: 1.1rem 0 1.6rem; }
.rodape a{ color: var(--primary-bright); text-decoration: none; font-weight: 600; }
.rodape a:hover{ text-decoration: underline; }

/* ---------- aviso de demo (topo e rodapé) ---------- */
.demo-aviso{
  background: color-mix(in srgb, var(--primary) 30%, var(--bg)); color: var(--text-muted);
  font-size: .76rem; line-height: 1.4; text-align: center; padding: 9px 1.2rem;
}
.demo-aviso strong{ color: var(--primary-bright); font-weight: 600; }

/* ---------- auth (login do painel, só na versão PT) ---------- */
.auth-wrap{ max-width: 400px; margin: 2.4rem auto 0; }
.auth-wrap .cartao{ text-align: left; }
.auth-wrap h1{ font-size: 1.35rem; margin-bottom: .35rem; }
.auth-wrap .desc-passo{ margin-bottom: 1.5rem; }
.campo-rodape{ display: flex; justify-content: flex-end; margin-top: .5rem; }
.link-simples{
  background: none; border: none; color: var(--primary-bright); font-size: .82rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0; line-height: 1.3;
  white-space: nowrap;
}
.link-simples:hover{ color: var(--text); }
.auth-wrap .btn{ width: 100%; margin-top: .4rem; }
.auth-rodape{ text-align: center; margin-top: 1.3rem; }
.auth-erro{ color: var(--erro); font-size: .85rem; min-height: 1.2em; margin-top: .7rem; }
.auth-ok{ color: var(--primary-bright); font-size: .85rem; min-height: 1.2em; margin-top: .7rem; }

.campo-senha{ position: relative; }
.campo-senha input{ width: 100%; padding-right: 2.6rem; }
.form-inline .campo-senha{ flex: 1; min-width: 140px; }
.toggle-senha{
  position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
  background: none; border: none; padding: .35rem; margin: 0; cursor: pointer;
  color: var(--text-muted); display: flex; align-items: center; line-height: 0;
}
.toggle-senha:hover{ color: var(--text); }
.toggle-senha svg{ width: 18px; height: 18px; display: block; }

.regras-senha{
  list-style: none; margin: .6rem 0 0; padding: 0; width: 100%;
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem;
}
.regras-senha li{ display: flex; align-items: center; gap: .4rem; color: var(--erro); transition: color .15s var(--ease); }
.regras-senha li::before{ content: "✕"; font-size: .72rem; width: .9em; text-align: center; flex-shrink: 0; }
.regras-senha li.ok{ color: var(--primary-bright); }
.regras-senha li.ok::before{ content: "✓"; }

.campo-lembrar{
  display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted);
  margin: .9rem 0 0; cursor: pointer;
}
.campo-lembrar input{ width: 15px; height: 15px; accent-color: var(--primary-bright); cursor: pointer; }

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