/* ============================================================================
   AgendaAí — onboarding. Depende de tokens.css.

   Layout: uma coluna de DECISÃO à esquerda e o ESPELHO à direita — o espaço da
   pessoa nascendo enquanto ela responde. No celular o espelho vai para baixo da
   decisão (não some: é ele que dá a sensação de progresso real, §17/§18).

   A barra de ação é fixa no rodapé: no celular, o botão que faz a coisa andar
   tem que estar debaixo do polegar, não no fim de uma rolagem.
   ============================================================================ */

.ob { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); }

/* ============================== cabeçalho =============================== */
.ob__topo { border-bottom: 1px solid var(--line); background: var(--surface); }
.ob__topo-in {
  width: 100%; max-width: 1080px; margin-inline: auto; padding: var(--e3) var(--e5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
}
.marca { display: inline-flex; align-items: center; gap: var(--e3); text-decoration: none; font-weight: 680; min-height: 44px; }
.marca__nome { letter-spacing: -.02em; font-size: 1.0625rem; }
.marca__sinal { color: var(--acento-txt); }
.ob__sair { font-size: var(--t-peq); color: var(--muted); text-decoration: none; padding: var(--e3); min-height: 44px; display: inline-flex; align-items: center; }
.ob__sair:hover { color: var(--text); }

/* ============================== progresso ==============================
   §17: nada de "passo 3 de 8". A frase diz o que JÁ EXISTE, e a barra confirma.
   A frase é o que dá sensação de construção; a barra é só o eco visual dela. */
.ob__prog { background: var(--surface); border-bottom: 1px solid var(--line); }
.ob__prog-in { width: 100%; max-width: 1080px; margin-inline: auto; padding: 0 var(--e5) var(--e4); }
.ob__frase {
  font-size: var(--t-peq); font-weight: 620; margin-bottom: var(--e3);
  min-height: 1.4em;
  /* A frase troca a cada etapa: sem transição, ela "pisca" e o olho perde. */
  transition: opacity var(--mo-ui) var(--ease-firme);
}
.ob__frase[data-trocando] { opacity: 0; }
.ob__barra { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ob__enche {
  display: block; height: 100%; width: 0; border-radius: 3px; background: var(--acento);
  transition: width var(--mo-bloco) var(--ease-saida);
}

/* ================================ corpo ================================= */
.ob__corpo { flex: 1; width: 100%; padding-block: var(--e7) calc(var(--e10) + var(--e5)); }
.ob__grade {
  width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--e5);
  display: grid; gap: var(--e7);
}
@media (min-width: 900px) {
  .ob__grade { grid-template-columns: 1fr 20rem; gap: var(--e8); align-items: start; }
}

.passo { display: grid; gap: var(--e4); align-content: start; }
/* Entrada da etapa: sobe 10px e assenta. Curto — é navegação, não espetáculo. */
.passo:not([hidden]) { animation: entraPasso var(--mo-bloco) var(--ease-saida); }
@keyframes entraPasso { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.passo__t { font-size: var(--t-h1); font-weight: 660; letter-spacing: -.022em; line-height: var(--lh-titulo); text-wrap: balance; }
.passo__t--grande { font-size: var(--t-display); letter-spacing: -.03em; line-height: var(--lh-apertado); }
.passo__s { color: var(--muted); font-size: var(--t-peq); max-width: 34rem; margin-bottom: var(--e3); }

/* ---------------------------- cartões de escolha ------------------------ */
.escolhas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.escolhas--duas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cartao {
  display: grid; gap: var(--e2); text-align: start; padding: var(--e5);
  border: 1.5px solid var(--line); border-radius: var(--raio); background: var(--surface);
  min-height: 88px; align-content: center;
  transition: border-color var(--mo-micro) var(--ease-firme),
              background-color var(--mo-micro) var(--ease-firme),
              transform var(--mo-micro) var(--ease-saida);
}
.cartao:hover { border-color: var(--acento); }
.cartao:active { transform: translateY(1px); }
.cartao[aria-pressed='true'] { border-color: var(--acento); background: var(--acento-soft); }
.cartao__t { font-weight: 640; }
.cartao__d { font-size: var(--t-peq); color: var(--muted); }

/* -------------------------------- campos -------------------------------- */
.campo { display: grid; gap: var(--e2); max-width: 30rem; }
.campo--curto { max-width: 12rem; }
.campo__r { font-size: var(--t-peq); font-weight: 620; }
.campo__d { font-size: var(--t-micro); color: var(--muted); min-height: 1.2em; }
.campo input {
  padding: var(--e3) var(--e4); min-height: 48px; border-radius: var(--raio-sm);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  /* 16px é o mínimo que o iOS aceita sem dar zoom sozinho ao focar o campo —
     e o zoom automático desalinha a tela inteira no meio do cadastro. */
  font-size: 16px;
  transition: border-color var(--mo-micro) var(--ease-firme), box-shadow var(--mo-micro) var(--ease-firme);
}
.campo input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-soft); outline: none; }
.campo input[aria-invalid='true'] { border-color: var(--err); }

.campo__url { display: flex; align-items: stretch; }
.campo__url input {
  border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end: 0; flex: 1; min-width: 0;
}
.campo__sufixo {
  display: flex; align-items: center; padding-inline: var(--e3);
  border: 1.5px solid var(--line); border-inline-start: 0;
  border-start-end-radius: var(--raio-sm); border-end-end-radius: var(--raio-sm);
  background: var(--surface-2); color: var(--muted); font-size: var(--t-peq); white-space: nowrap;
}
.campo__d[data-estado='livre'] { color: var(--ok); font-weight: 600; }
.campo__d[data-estado='ocupado'] { color: var(--err); font-weight: 600; }

.sugestoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.sugestoes button {
  padding: var(--e2) var(--e4); min-height: 40px; border-radius: var(--raio-full);
  border: 1px solid var(--line); background: var(--surface); font-size: var(--t-peq);
}
.sugestoes button:hover { border-color: var(--acento); color: var(--acento-txt); }

/* ------------------------------- serviços ------------------------------- */
.servs { display: grid; gap: var(--e2); }
.servs__cab, .serv {
  display: grid; grid-template-columns: 1fr 5.5rem 6.5rem 2.5rem; gap: var(--e2); align-items: center;
}
.servs__cab { font-size: var(--t-micro); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 620; padding-inline: var(--e2); }
.serv input {
  padding: var(--e3); min-height: 48px; border-radius: var(--raio-sm);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 16px; width: 100%; min-width: 0;
}
.serv input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-soft); outline: none; }
.serv__x {
  min-height: 44px; min-width: 44px; border-radius: var(--raio-sm); color: var(--muted);
  display: grid; place-items: center; font-size: 1.25rem; line-height: 1;
}
.serv__x:hover { color: var(--err); background: var(--err-bg); }
/* No celular a linha de 4 colunas fica ilegível: vira nome em cima, e
   duração/preço/remover embaixo. */
@media (max-width: 620px) {
  .servs__cab { display: none; }
  .serv { grid-template-columns: 1fr 1fr 2.5rem; grid-template-areas: 'nome nome nome' 'dur preco x'; }
  .serv__nome { grid-area: nome; } .serv__dur { grid-area: dur; }
  .serv__preco { grid-area: preco; } .serv__x { grid-area: x; }
  .serv { padding-bottom: var(--e3); border-bottom: 1px dashed var(--line); }
}

/* ------------------------------- semana --------------------------------- */
.semana { display: grid; gap: var(--e2); }
.dia-l {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: var(--e4); align-items: center;
  padding: var(--e3); border-radius: var(--raio-sm); border: 1.5px solid var(--line);
  background: var(--surface);
}
.dia-l[data-off] { background: var(--surface-2); border-style: dashed; }
.dia-b {
  min-height: 44px; min-width: 44px; padding-inline: var(--e3); border-radius: var(--raio-sm);
  font-weight: 620; font-size: var(--t-peq); border: 1.5px solid transparent;
  transition: background-color var(--mo-micro) var(--ease-firme), color var(--mo-micro) var(--ease-firme);
}
.dia-b[aria-pressed='true'] { background: var(--acento); color: #fff; }
.dia-b[aria-pressed='false'] { background: var(--surface-2); color: var(--muted); }
.horas { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; font-size: var(--t-peq); color: var(--muted); }
.horas input {
  padding: var(--e2) var(--e3); min-height: 44px; border-radius: var(--raio-sm);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px;
}
.horas input:focus { border-color: var(--acento); outline: none; }
.horas[hidden] { display: none; }
.dia-l__fechado { font-size: var(--t-peq); color: var(--off); }

/* -------------------------------- conta --------------------------------- */
#obForm { display: grid; gap: var(--e4); }
.ob__aceite { max-width: 30rem; }
.ob__aceite a { color: var(--acento-txt); }
.ob__erro {
  background: var(--err-bg); color: var(--err); padding: var(--e3) var(--e4);
  border-radius: var(--raio-sm); font-size: var(--t-peq); max-width: 30rem;
}

/* -------------------------------- pronto -------------------------------- */
.passo--pronto { gap: var(--e5); }
.feito { display: grid; gap: var(--e3); }
.feito li {
  display: flex; align-items: center; gap: var(--e3); font-size: var(--t-peq);
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--mo-bloco) var(--ease-saida), transform var(--mo-bloco) var(--ease-saida);
}
.feito li[data-vis] { opacity: 1; transform: none; }
/* O tique se DESENHA, um por um. É o "antes → depois" do §18 acontecendo à
   vista, em vez de uma lista que já nasce pronta. */
.feito__ok { width: 20px; height: 20px; flex: none; }
.feito__ok path { fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--mo-bloco) var(--ease-saida) 120ms; }
.feito li[data-vis] .feito__ok path { stroke-dashoffset: 0; }

.ob__link { display: grid; gap: var(--e2); }
.ob__link-r { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 620; }
.ob__link-cx {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio-sm);
  padding: var(--e3) var(--e4);
}
.ob__link-cx code { font-family: var(--num); font-size: var(--t-peq); word-break: break-all; }

/* ============================== espelho =================================
   O espaço da pessoa nascendo. Não é decoração: é a prova de que o que ela
   respondeu virou coisa. */
.ob__espelho { display: grid; gap: var(--e5); align-content: start; }
@media (min-width: 900px) { .ob__espelho { position: sticky; top: var(--e5); } }

.mini {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio);
  box-shadow: var(--shadow-sm); padding: var(--e4); display: grid; gap: var(--e4);
  transition: box-shadow var(--mo-ui) var(--ease-saida);
}
.mini__topo { display: flex; align-items: center; gap: var(--e3); }
.mini__logo {
  width: 34px; height: 34px; flex: none; border-radius: var(--raio-sm);
  background: var(--acento-soft); color: var(--acento-txt);
  display: grid; place-items: center; font-weight: 700;
  transition: background-color var(--mo-ui) var(--ease-firme), color var(--mo-ui) var(--ease-firme);
}
.mini__logo[data-cheio] { background: var(--acento); color: #fff; }
.mini__nome { font-weight: 640; font-size: var(--t-peq); letter-spacing: -.01em; }
.mini__nome[data-vazio] { color: var(--off); font-weight: 400; }
.mini__servs { display: grid; gap: var(--e2); }
.mini__servs li {
  display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-micro);
  padding: var(--e3); border-radius: var(--raio-sm); background: var(--surface-2);
}
.mini__vazio { color: var(--off); background: none !important; padding-inline: 0 !important; }
.mini__servs li span:last-child { color: var(--muted); white-space: nowrap; }
.mini__agenda { display: grid; gap: var(--e2); border-top: 1px solid var(--line); padding-top: var(--e4); }
.mini__ag-l { display: flex; gap: var(--e3); font-size: var(--t-micro); color: var(--muted); }
.mini__ag-l b { color: var(--text); font-weight: 620; min-width: 2.4rem; }

.marcos { display: grid; gap: var(--e2); }
.marcos li { display: flex; align-items: center; gap: var(--e3); font-size: var(--t-micro); color: var(--off); }
.marcos li[data-ok] { color: var(--text); }
.marcos__pt {
  width: 8px; height: 8px; flex: none; border-radius: var(--raio-full);
  background: var(--line); transition: background-color var(--mo-ui) var(--ease-firme);
}
.marcos li[data-ok] .marcos__pt { background: var(--ok); }

/* ============================ barra de ação ============================= */
.ob__pe {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top: 1px solid var(--line);
  /* respeita a barra de gestos do iPhone */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@supports (backdrop-filter: blur(1px)) { .ob__pe { backdrop-filter: blur(12px); } }
.ob__pe-in {
  width: 100%; max-width: 1080px; margin-inline: auto; padding: var(--e3) var(--e5);
  display: flex; gap: var(--e3); justify-content: flex-end; align-items: center;
}
@media (max-width: 620px) {
  .ob__pe-in { padding-inline: var(--e4); }
  #obSeguir { flex: 1; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: var(--e3) var(--e5); border-radius: var(--raio-full);
  font-weight: 620; font-size: var(--t-peq); text-decoration: none;
  border: 1px solid transparent; white-space: nowrap; min-height: 44px;
  transition: background-color var(--mo-micro) var(--ease-firme),
              border-color var(--mo-micro) var(--ease-firme),
              transform var(--mo-micro) var(--ease-saida), opacity var(--mo-micro) linear;
}
.btn--primario { background: var(--acento); color: #fff; }
.btn--primario:hover { background: var(--acento-forte); }
.btn--fantasma { border-color: var(--line); color: var(--text); background: var(--surface); }
.btn--fantasma:hover { border-color: var(--acento); color: var(--acento-txt); }
.btn:active { transform: translateY(1px); }
.btn--grande { padding: var(--e4) var(--e6); font-size: var(--t-corpo); min-height: 52px; }
.btn--peq { padding: var(--e2) var(--e4); min-height: 40px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn[data-ocupado] { pointer-events: none; opacity: .7; }

/* ============================== /entrar/ ================================ */
.entrar { display: grid; place-items: center; padding-bottom: var(--e8); }
.entrar__cx { width: min(100%, 30rem); display: grid; gap: var(--e4); padding-inline: var(--e5); }
.entrar #frmEntrar { display: grid; gap: var(--e5); margin-top: var(--e4); }
.entrar .campo { max-width: none; }
.lembrar { display: flex; align-items: center; gap: var(--e3); font-size: var(--t-peq); color: var(--muted); min-height: 44px; cursor: pointer; }
.lembrar input { width: 18px; height: 18px; accent-color: var(--acento); }
.entrar__pe { font-size: var(--t-peq); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--e5); margin-top: var(--e3); }
.entrar__pe a { color: var(--acento-txt); font-weight: 620; }
.campo__d b { color: var(--text); font-weight: 620; }