/* Marcação passo a passo numa janela.
   No telemóvel ocupa o ecrã todo; no computador fica ao centro. Só se vê o
   passo atual: serviço → barbeiro → dia e hora → dados. */

body:has(.janela-marcar:not([hidden])) { overflow: hidden; }

.janela-marcar { padding: 0; z-index: 40; background: rgba(19,19,19,.76); }

.marcar-caixa {
  background: var(--papel);
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .janela-marcar { padding: 24px; }
  .marcar-caixa {
    margin: auto;
    max-width: 540px;
    min-height: 0;
    height: min(760px, calc(100vh - 48px));
    border-radius: var(--canto);
    overflow: hidden;
    box-shadow: 0 30px 70px -24px rgba(0,0,0,.7);
  }
}

.marcar-topo {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pedra);
  background: var(--papel);
}

.marcar-voltar {
  justify-self: start;
  background: none;
  border: 0;
  padding: 8px 0;
  font-size: 14px;
  color: var(--texto-suave);
}
.marcar-voltar:hover { color: var(--madeira); }

.marcar-progresso { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.marcar-progresso li { flex: 1; height: 4px; border-radius: 2px; background: var(--pedra); transition: background .25s; }
.marcar-progresso li.feito { background: var(--madeira); }

.marcar-fechar {
  justify-self: end;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--pedra);
  border-radius: var(--canto);
  font-size: 16px;
  color: var(--tinta);
}
.marcar-fechar:hover { border-color: var(--tinta); }

.marcar-corpo {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 18px 32px;
}

/* só o passo atual, sem a moldura de lista */
.marcar-corpo .passos { display: block; }
.marcar-corpo .passo:not([data-estado="ativo"]) { display: none; }
.marcar-corpo .passo,
.marcar-corpo .passo[data-estado="ativo"] {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  opacity: 1;
}
.marcar-corpo .passo-topo { display: block; }
.marcar-corpo .passo-num,
.marcar-corpo .passo-resumo,
.marcar-corpo .btn-alterar { display: none; }
.marcar-corpo .passo-titulo { font-size: 30px; }
.marcar-corpo .passo-corpo { padding-top: 16px; animation: entrar-passo .22s ease-out; }
@keyframes entrar-passo { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .marcar-corpo .passo-corpo { animation: none; } }

.marcar-corpo .remarcar-aviso { margin: -6px 0 18px; }

/* a fila de dias, que se desliza com o dedo */
.fila-dias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 0 -18px;
  padding: 2px 18px 10px;
  scrollbar-width: thin;
}
.dia-chip {
  flex: 0 0 auto;
  width: 64px;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 9px 4px 8px;
  background: var(--papel);
  border: 1px solid var(--pedra);
  border-radius: var(--canto);
  scroll-snap-align: start;
}
.dia-chip small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.dia-chip b { font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.1; }
.dia-chip:hover { border-color: var(--madeira); }
.dia-chip[aria-checked="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--gesso); }
.dia-chip[aria-checked="true"] small { color: var(--gesso); opacity: .75; }

#passo-dia .nota { margin-top: 8px; }
#passo-dia #lista-horas { margin-top: 14px; }

/* o resumo por cima dos dados do cliente */
.resumo-final {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--gesso);
  border-radius: var(--canto);
  font-size: 14px;
}
.resumo-final dt { color: var(--texto-suave); }
.resumo-final dd { margin: 0; text-align: right; font-weight: 600; }
.resumo-final dt:last-of-type,
.resumo-final dd:last-of-type { padding-top: 8px; border-top: 1px solid var(--pedra); }
.resumo-final dd:last-of-type b { font-family: var(--display); font-size: 22px; color: var(--madeira); }

/* a lista de serviços na página abre a janela */
.lista-precos { margin-top: 18px; }

/* os barbeiros em linhas largas, fáceis de tocar */
.marcar-corpo #lista-profissionais { display: grid; gap: 8px; }
.marcar-corpo #lista-profissionais .ficha {
  width: 100%;
  border-radius: var(--canto);
  padding: 10px 14px 10px 10px;
  font-size: 17px;
  font-weight: 600;
}
.marcar-corpo #lista-profissionais .inicial { width: 38px; height: 38px; font-size: 20px; }

/* os serviços: nome em destaque, nome em português e a descrição */
.servico-desc { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.servico-nome { font-size: 15px; font-weight: 700; color: var(--madeira); }
.grupo-servicos { margin: 18px 0 8px; }
.grupo-servicos:first-child { margin-top: 0; }
.nota-extras { margin: 0 0 12px; }
#lista-extras + .botao-principal { margin-top: 18px; }