/* Public booking flow.
 *
 * Colour, typography and geometry come from web/themes/predefinicoes.css, which
 * the establishment picks from a closed set. This file only lays things out and
 * never invents a palette: the :root block below is a fallback, overridden the
 * moment a preset applies. That fallback matters — a tenant whose accent has
 * not yet been migrated to a named token still has to render properly.
 *
 * Mobile first, one decision per screen (dossie 6.2). Tap targets at least 44px
 * (dossie 6.8). Motion is opt-out. No framework and no build step. */

:root {
  --acento: #2563eb;
  --acento-contraste: #ffffff;
  /* Derived, never named --acento-l: the theme already uses that name for
     the lightness channel of hsl(), and reusing it silently breaks every
     tinted surface the moment a preset applies. */
  --acento-suave: color-mix(in srgb, var(--acento) 12%, var(--superficie));
  --superficie: #ffffff;
  --superficie-alt: #f5f7fa;
  --texto: #14181d;
  --texto-suave: #5c6873;
  --borda: #e3e7ec;
  --raio: 12px;
  --raio-grande: 20px;
  --sombra: 0 1px 2px rgb(16 24 40 / 6%), 0 10px 28px -14px rgb(16 24 40 / 20%);
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: var(--fonte-texto);

  --perigo: #d92d20;
  --perigo-texto: #912018;
  --perigo-fundo: #fef3f2;
  --perigo-borda: #f3c4bf;

  --alvo-toque: 44px;
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;

  --largura: 46rem;
  --transicao: 140ms cubic-bezier(0.2, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* The growing bottom bar is fixed; this keeps the last control clear of it. */
  padding: 0 0 var(--espaco-7);
  font-family: var(--fonte-texto);
  line-height: 1.5;
  color: var(--texto);
  background: var(--superficie-alt);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--espaco-5) var(--espaco-4) var(--espaco-6);
}

/* --------------------------------------------------------------- cabeçalho */

.cabecalho {
  padding: var(--espaco-5) var(--espaco-4);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.ligacao-area-cliente { padding: 8px 12px; font-size: .86rem; font-weight: 650; color: var(--acento); text-decoration: none; background: var(--acento-suave); border-radius: 999px; }
.ligacao-area-cliente:hover { text-decoration: underline; }

.area-cliente-autenticacao, .area-cliente { max-width: 56rem; margin: 0 auto; }
.ligacao-voltar-publica { display: inline-block; margin-top: var(--espaco-4); color: var(--acento); }
.topo-area-cliente, .titulo-area-cliente { display: flex; flex-wrap: wrap; gap: var(--espaco-4); align-items: center; justify-content: space-between; }
.topo-area-cliente { padding-bottom: var(--espaco-5); border-bottom: 1px solid var(--borda); }
.topo-area-cliente h1, .topo-area-cliente p, .titulo-area-cliente h2, .titulo-area-cliente p { margin: 0; }
.topo-area-cliente > div > p:last-child, .titulo-area-cliente p, .historico-cliente > p { color: var(--texto-suave); }
.seccao-marcacoes-cliente { margin-top: var(--espaco-6); }
.lista-marcacoes-cliente { display: grid; gap: var(--espaco-3); margin-top: var(--espaco-4); }
.marcacao-cliente { display: grid; grid-template-columns: minmax(10rem,.7fr) minmax(13rem,1.3fr) auto; gap: var(--espaco-4); align-items: center; padding: var(--espaco-4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.marcacao-cliente-quando { display: grid; gap: var(--espaco-1); }
.marcacao-cliente-quando span { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 700; }
.marcacao-cliente-corpo h3, .marcacao-cliente-corpo p { margin: var(--espaco-1) 0 0; }
.marcacao-cliente-corpo p { font-size: .88rem; color: var(--texto-suave); }
.estado-cliente { display: inline-block; padding: 4px 9px; font-size: .72rem; font-weight: 750; border-radius: 999px; }
.estado-cliente--bom { color: #087443; background: #e8f8ef; }
.estado-cliente--aviso { color: #8a5200; background: #fff4d6; }
.estado-cliente--mau { color: var(--perigo-texto); background: var(--perigo-fundo); }
.estado-cliente--neutro { color: var(--texto-suave); background: var(--superficie-alt); }
.acoes-marcacao-cliente { display: grid; gap: var(--espaco-2); justify-items: end; font-size: .86rem; }
.acoes-marcacao-cliente a { color: var(--acento); }
.acoes-marcacao-cliente .acao-cancelar-cliente { color: var(--perigo-texto); }
.estado-vazio-cliente { display: grid; gap: var(--espaco-2); justify-items: center; padding: var(--espaco-6); margin-top: var(--espaco-4); text-align: center; background: var(--superficie); border: 1px dashed var(--borda-forte); border-radius: var(--raio-grande); }
.estado-vazio-cliente span { font-size: 2rem; }
@media (max-width: 640px) {
  .cabecalho { gap: var(--espaco-2); }
  .ligacao-area-cliente { padding: 7px 9px; font-size: .76rem; }
  .marcacao-cliente { grid-template-columns: 1fr; }
  .acoes-marcacao-cliente { grid-template-columns: repeat(2,minmax(0,1fr)); justify-items: start; }
  .titulo-area-cliente .botao { width: 100%; }
}

.cabecalho-nome {
  max-width: var(--largura);
  margin: 0 auto;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.titulo-pagina {
  margin: 0 0 var(--espaco-2);
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.titulo-seccao {
  margin: var(--espaco-6) 0 var(--espaco-3);
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

.passo-legenda { margin: 0 0 var(--espaco-5); color: var(--texto-suave); }
.cartao-fidelizacao-cliente { display: grid; gap: var(--espaco-3); padding: var(--espaco-5); margin-bottom: var(--espaco-5); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.cartao-fidelizacao-cliente h2, .cartao-fidelizacao-cliente p { margin: 0; }
.cartao-fidelizacao-cliente > strong { font-size: 1.4rem; }
.cartao-fidelizacao-cliente progress { width: 100%; height: 1rem; accent-color: var(--acento); }
.nota-discreta { margin-top: var(--espaco-4); font-size: 0.85rem; color: var(--texto-suave); }

/* -------------------------------------------------- progresso e cabeçalho */

.passo-publico { animation: entrada-passo 220ms ease-out; }
@keyframes entrada-passo {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.progresso-marcacao {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-2);
  padding: 0;
  margin: 0 0 var(--espaco-6);
  list-style: none;
}
.progresso-marcacao::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: var(--borda);
}
.progresso-marcacao li {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--espaco-1);
  justify-items: center;
  font-size: 0.72rem;
  color: var(--texto-suave);
  text-align: center;
}
.progresso-marcacao li span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  font-weight: 650;
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: 50%;
}
.progresso-marcacao .passo-concluido span,
.progresso-marcacao .passo-atual span {
  color: var(--acento-contraste);
  background: var(--acento);
  border-color: var(--acento);
}
.progresso-marcacao .passo-atual { color: var(--texto); font-weight: 650; }

.cabecalho-passo { margin-bottom: var(--espaco-5); }
.sobretitulo {
  margin: 0 0 var(--espaco-2);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acento);
}

.resumo-escolha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espaco-3) var(--espaco-5);
  align-items: start;
  padding: var(--espaco-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--acento);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.resumo-etiqueta {
  margin: 0 0 var(--espaco-1);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}
.resumo-servicos-publico {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.resumo-servicos-publico li:not(:last-child)::after { content: " ·"; color: var(--texto-suave); }
.resumo-totais { display: grid; justify-items: end; margin: 0; font-variant-numeric: tabular-nums; }
.resumo-totais strong { font-size: 1.2rem; }
.resumo-totais span { font-size: 0.82rem; color: var(--texto-suave); }
.alterar-escolha { grid-column: 1 / -1; width: fit-content; color: var(--acento); font-size: 0.85rem; }
.titulo-com-ajuda { display: flex; align-items: baseline; justify-content: space-between; }
.titulo-com-ajuda > span { font-size: 0.75rem; color: var(--texto-suave); }

/* ------------------------------------------------------------- localização */

.localizacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  align-items: baseline;
  padding: var(--espaco-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.endereco { margin: 0; color: var(--texto-suave); }

.link-mapa {
  color: var(--acento);
  font-weight: 550;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
}
.link-mapa:hover { border-bottom-color: var(--acento); }

/* ---------------------------------------------------------------- serviços */

.lista-servicos {
  display: grid;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aviso-selecionar-servico {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--acento) 38%, var(--borda));
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--acento) 9%, var(--superficie));
  color: var(--texto);
  font-weight: 650;
}
.aviso-selecionar-servico--feito { color: #086b4c; border-color: #8bd8bd; background: #edfdf6; }
.aviso-selecionar-servico--feito span { font-size: 0; }
.aviso-selecionar-servico--feito span::after { content: "✓"; font-size: 1rem; }
.barra-total .botao-avancar:disabled { opacity: .48; cursor: not-allowed; filter: grayscale(.25); }
.escolha-colaborador { margin: 0 0 1.5rem; padding: 0; border: 0; }
.grelha-colaboradores-publica { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .65rem; }
.grelha-colaboradores-publica label { display: flex; align-items: center; gap: .55rem; min-height: var(--alvo-toque); padding: .9rem; color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); cursor: pointer; }
.grelha-colaboradores-publica label:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 20%, transparent); background: var(--acento-suave); }

.servico-rotulo {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--espaco-4);
  align-items: center;
  min-height: 64px;
  padding: var(--espaco-3) var(--espaco-4) var(--espaco-3) var(--espaco-5);
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}

/* The colour the barber assigned to the service (F19, E1/R3) reads as a spine
   down the left edge: present enough to scan by, quiet enough not to shout. */
.servico-rotulo::before {
  content: "";
  position: absolute;
  inset: var(--espaco-2) auto var(--espaco-2) 0;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--servico-cor, var(--borda));
}

.servico-rotulo:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--borda)); }

.servico-caixa {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--acento);
  cursor: pointer;
}

/* Selection is carried by border, tint and the checkbox itself, never by
   colour alone (dossie 6.8). */
.servico-rotulo:has(.servico-caixa:checked) {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.servico-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.servico-nome { font-weight: 550; }
.servico-duracao { font-size: 0.85rem; color: var(--texto-suave); }
.servico-preco { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------- barra total */

/* Grows with the accumulated duration, making the shrinking availability
   visible rather than merely stated (dossie 7.3). */
.barra-total {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: flex;
  gap: var(--espaco-4);
  align-items: center;
  justify-content: space-between;
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--espaco-3) var(--espaco-4);
  padding-bottom: calc(var(--espaco-3) + env(safe-area-inset-bottom, 0px));
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  border-radius: var(--raio-grande) var(--raio-grande) 0 0;
  box-shadow: 0 -6px 28px -14px rgb(16 24 40 / 30%);
}

/* A hairline that fills as services accumulate. marcar.js sets the custom
   property; with no script it stays at zero and nothing looks broken. */
.barra-total::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: var(--duracao-percentual, 0%);
  background: var(--acento);
  border-radius: 0 3px 3px 0;
  transition: width var(--transicao);
}

.barra-resumo {
  display: flex;
  gap: var(--espaco-2);
  align-items: baseline;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.barra-duracao { color: var(--texto-suave); }
.barra-preco { font-weight: 650; font-size: 1.1rem; }
.barra-separador { color: var(--borda); }

/* ----------------------------------------------------------- faixa de dias */

.tira-dias {
  display: flex;
  gap: var(--espaco-2);
  overflow-x: auto;
  padding-bottom: var(--espaco-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.dia {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 68px;
  padding: var(--espaco-2);
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.dia:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--borda)); }

.dia-semana {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.dia-numero { font-size: 1.25rem; font-weight: 620; font-variant-numeric: tabular-nums; }
.dia-mes { font-size: 0.66rem; text-transform: uppercase; color: var(--texto-suave); }

.dia-atual {
  color: var(--acento);
  border-color: var(--acento);
  background: var(--acento-suave);
  box-shadow: 0 0 0 1px var(--acento);
}
.dia-hoje {
  padding: 1px var(--espaco-1);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--acento-contraste);
  background: var(--acento);
  border-radius: 999px;
}

/* A day with no vacancy is shut, not merely greyed: it carries a word as well
   as a shade, and it cannot be pressed (F04). */
.dia-fechada {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--superficie-alt);
}
.dia-estado {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

.navegacao-semana {
  display: flex;
  gap: var(--espaco-3);
  justify-content: space-between;
  margin-top: var(--espaco-4);
}

/* ------------------------------------------------------------ grelha horas */

.faixa-horas { margin-top: var(--espaco-5); }

.cabecalho-horas {
  display: flex;
  gap: var(--espaco-4);
  align-items: end;
  justify-content: space-between;
  padding-top: var(--espaco-6);
  margin-top: var(--espaco-5);
  border-top: 1px solid var(--borda);
}
.cabecalho-horas h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 1.25rem; }
.cabecalho-horas p { margin: var(--espaco-1) 0 0; color: var(--texto-suave); }
.indicador-disponivel { display: inline-flex; gap: var(--espaco-2); align-items: center; font-size: 0.75rem; color: var(--texto-suave); }
.indicador-disponivel > span { width: 8px; height: 8px; background: var(--acento); border-radius: 50%; }

.grelha-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--espaco-2);
}

.hora {
  min-height: var(--alvo-toque);
  padding: var(--espaco-3) var(--espaco-2);
  font: inherit;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.hora { display: flex; align-items: center; justify-content: space-between; }
.hora-seta { opacity: 0; transform: translateX(-4px); transition: opacity var(--transicao), transform var(--transicao); }
.hora:hover {
  color: var(--acento);
  border-color: var(--acento);
  background: var(--acento-suave);
}
.hora:hover .hora-seta, .hora:focus-visible .hora-seta { opacity: 1; transform: translateX(0); }

/* Horas indisponíveis.
   São <span> e não <button>: nada há para carregar, e um botão morto convida a
   tentar. Ficam legíveis de propósito — o que se quer é que o cliente leia o
   dia, veja que está cheio e perceba que a hora livre que sobra é a última.
   Contraste suficiente para se ler, fraco de mais para chamar o dedo. */
.hora--ocupada, .hora--sem_espaco, .hora--passada {
  cursor: default;
  justify-content: center;
  font-weight: 500;
}
.hora--ocupada {
  color: var(--perigo, #b3261e);
  border-color: color-mix(in srgb, var(--perigo, #b3261e) 35%, transparent);
  background: color-mix(in srgb, var(--perigo, #b3261e) 10%, var(--superficie));
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.hora--sem_espaco, .hora--passada {
  color: var(--texto-suave);
  border-style: dashed;
  background: var(--superficie-alt, var(--superficie));
}

.legenda-horas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2);
  margin: 0; font-size: .8rem; color: var(--texto-suave);
}
.chave-hora {
  width: .7rem; height: .7rem; border-radius: 3px; border: 1.5px solid var(--borda);
  display: inline-block; margin-left: var(--espaco-3);
}
.chave-hora--livre { background: var(--superficie); border-color: var(--acento); }
.chave-hora--ocupada {
  background: color-mix(in srgb, var(--perigo, #b3261e) 25%, var(--superficie));
  border-color: color-mix(in srgb, var(--perigo, #b3261e) 45%, transparent);
}
.chave-hora--sem_espaco { border-style: dashed; background: var(--superficie-alt, var(--superficie)); }

.sem-vagas {
  padding: var(--espaco-5);
  margin-top: var(--espaco-5);
  background: var(--superficie);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-grande);
}
.sem-vagas .titulo-seccao { margin-top: 0; }

.resumo-selecao {
  margin: 0 0 var(--espaco-4);
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------------ campos */

.campo { margin-bottom: var(--espaco-4); }

.rotulo-campo {
  display: block;
  margin-bottom: var(--espaco-2);
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--texto-suave);
}

.entrada {
  width: 100%;
  min-height: 52px;
  padding: var(--espaco-3) var(--espaco-4);
  font: inherit;
  font-size: 1.05rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.entrada::placeholder { color: color-mix(in srgb, var(--texto-suave) 60%, transparent); }
.entrada:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* Six digits, read one glance at a time. */
.entrada-codigo {
  font-size: 1.9rem;
  font-weight: 620;
  letter-spacing: 0.5em;
  text-align: center;
  text-indent: 0.5em;
}

.ajuda-campo {
  margin: calc(var(--espaco-2) * -1) 0 var(--espaco-4);
  font-size: 0.82rem;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------------ botões */

.botao {
  display: inline-flex;
  gap: var(--espaco-2);
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--espaco-3) var(--espaco-5);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  transition: filter var(--transicao), border-color var(--transicao), background var(--transicao);
}

.botao-avancar { color: var(--acento-contraste); background: var(--acento); }
.botao-avancar:hover { filter: brightness(1.07); }

.botao-secundario {
  color: var(--texto);
  background: var(--superficie);
  border-color: var(--borda);
}
.botao-secundario:hover { border-color: var(--texto-suave); }

.botao-perigo {
  color: var(--perigo-texto);
  background: var(--superficie);
  border-color: var(--perigo-borda);
}
.botao-perigo:hover { background: var(--perigo-fundo); }

.botao:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

.formulario-identificar .botao-avancar,
.formulario-codigo .botao-avancar,
.formulario-espera .botao-avancar { width: 100%; }
.formulario-reenviar { margin-top: var(--espaco-3); }
.formulario-reenviar .botao { width: 100%; }

/* --------------------------------------------------------------- mensagens */

.erro {
  padding: var(--espaco-3) var(--espaco-4);
  margin: 0 0 var(--espaco-4);
  color: var(--perigo-texto);
  background: var(--perigo-fundo);
  border: 1px solid var(--perigo-borda);
  border-left: 3px solid var(--perigo);
  border-radius: var(--raio);
}

/* ----------------------------------------------------- cartão de marcação */

/* The confirmation is a card, echoing the handwritten one the barber used to
   hand over (dossie 6.3). It is meant to be screenshotted and kept, so it
   carries everything on its own. */
.cartao-marcacao {
  position: relative;
  padding: var(--espaco-6) var(--espaco-5);
  margin: var(--espaco-4) 0 var(--espaco-5);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
}
.cartao-marcacao::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--acento);
}

.cartao-estabelecimento {
  margin: 0 0 var(--espaco-5);
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}

.cartao-quando {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  align-items: baseline;
  margin: 0 0 var(--espaco-4);
}
.cartao-data { font-size: 1.15rem; font-weight: 550; }
.cartao-hora {
  font-family: var(--fonte-titulo);
  font-size: 2.6rem;
  font-weight: 680;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cartao-cliente { margin: 0 0 var(--espaco-4); color: var(--texto-suave); }

.aviso-numero-validado {
  display: flex;
  gap: var(--espaco-2);
  align-items: center;
  padding: var(--espaco-3) var(--espaco-4);
  margin: 0 0 var(--espaco-4);
  font-size: 0.9rem;
  font-weight: 650;
  color: #087443;
  background: #e8f8ef;
  border: 1px solid #b8e8cd;
  border-radius: var(--raio);
}
.aviso-numero-validado span {
  display: inline-grid;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  color: #fff;
  background: #0b8f55;
  border-radius: 50%;
}

.confirmacao-sucesso {
  display: flex;
  gap: var(--espaco-4);
  align-items: center;
  padding: var(--espaco-4);
  margin: 0 0 var(--espaco-4);
  color: #075c38;
  background: #e8f8ef;
  border: 1px solid #9edbb9;
  border-radius: var(--raio-grande);
}
.confirmacao-sucesso-icone {
  display: inline-grid;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 750;
  color: #fff;
  background: #0b8f55;
  border-radius: 50%;
}
.confirmacao-sucesso strong { display: block; font-size: 1.05rem; }
.confirmacao-sucesso p { margin: var(--espaco-1) 0 0; font-size: 0.9rem; }

.cartao-servicos {
  display: grid;
  gap: var(--espaco-1);
  padding: 0;
  margin: 0 0 var(--espaco-4);
  list-style: none;
}
.cartao-servicos li { position: relative; padding-left: var(--espaco-4); }
.cartao-servicos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
}

.cartao-totais {
  display: flex;
  gap: var(--espaco-4);
  justify-content: space-between;
  padding-top: var(--espaco-4);
  margin: 0 0 var(--espaco-4);
  border-top: 1px solid var(--borda);
  font-variant-numeric: tabular-nums;
}
.cartao-duracao { color: var(--texto-suave); }
.cartao-preco { font-weight: 650; }

.cartao-morada, .cartao-endereco { margin: 0; font-size: 0.9rem; color: var(--texto-suave); }

.repetir-caixa, .cancelar-caixa { margin-top: var(--espaco-5); }
.aviso-repeticao { margin: 0 0 var(--espaco-3); font-size: 0.85rem; color: var(--texto-suave); }
.cancelar-caixa h2 { margin: 0 0 var(--espaco-1); font-size: 1rem; }
.cancelar-ajuda { margin: 0 0 var(--espaco-3); font-size: 0.85rem; color: var(--texto-suave); }
.cancelar-alternativa {
  padding: 0;
  margin-top: var(--espaco-3);
  color: var(--perigo-texto);
  background: transparent;
  border: 0;
  text-decoration: underline;
}

/* ------------------------------------------------ deslizar para confirmar */

/* Cancelling sends a message to the establishment, the one case where the
   product asks for confirmation instead of an undo (dossie 7.1). */
.deslizar-cancelar {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 5px;
  overflow: hidden;
  background: var(--superficie-alt);
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  user-select: none;
  touch-action: pan-y;
}

.deslizar-alca {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  color: #ffffff;
  background: var(--perigo);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgb(16 24 40 / 22%);
  cursor: grab;
  touch-action: none;
}
.deslizar-alca:active { cursor: grabbing; }

.deslizar-rotulo, .deslizar-legenda {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--texto-suave);
  pointer-events: none;
}
.deslizar-cancelar[data-arrastando] .deslizar-rotulo { opacity: 0.35; }

.botao-alternativa-deslize { width: 100%; margin-top: var(--espaco-3); }

/* ------------------------------------------------------------- utilidades */

/* ------------------------------------------------------ montra de produtos */

.abas-publicas {
  position: sticky;
  top: var(--espaco-2);
  z-index: 9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-1);
  padding: var(--espaco-1);
  margin: var(--espaco-5) 0;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  border: 1px solid var(--borda);
  border-radius: 999px;
  box-shadow: var(--sombra);
  backdrop-filter: blur(12px);
}
.abas-publicas a { display:grid; place-items:center; min-height:44px; padding:0 var(--espaco-4); font-weight:650; color:var(--texto-suave); text-decoration:none; border-radius:999px; }
.abas-publicas a[aria-selected="true"] { color:var(--acento-contraste); background:var(--acento); }

.galeria-publica { padding: var(--espaco-5); background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio-grande); box-shadow:var(--sombra); }
.galeria-publica-cabecalho h2 { margin:0; font-family:var(--fonte-titulo); font-size:1.6rem; }
.galeria-publica-cabecalho > p:last-child { margin:var(--espaco-2) 0 var(--espaco-5); color:var(--texto-suave); }
.grelha-galeria-publica { display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:13rem; gap:var(--espaco-3); }
.foto-galeria-publica { position:relative; min-width:0; padding:0; overflow:hidden; background:var(--superficie-alt); border:0; border-radius:var(--raio); cursor:zoom-in; }
.foto-galeria-publica:first-child { grid-row:span 2; }
.foto-galeria-publica img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 300ms ease; }
.foto-galeria-publica:hover img { transform:scale(1.025); }
.foto-galeria-publica span { position:absolute; inset:auto 0 0; padding:var(--espaco-5) var(--espaco-3) var(--espaco-3); color:#fff; font-size:.82rem; font-weight:650; text-align:left; background:linear-gradient(transparent,rgb(0 0 0 / 72%)); }
.galeria-voltar { margin:var(--espaco-5) 0 0; }
.galeria-voltar a { font-weight:650; color:var(--acento); }
.dialogo-foto { width:min(62rem,calc(100vw - 2 * var(--espaco-4))); padding:0; overflow:visible; background:#111; border:0; border-radius:var(--raio-grande); box-shadow:0 24px 80px rgb(0 0 0 / 55%); }
.dialogo-foto::backdrop { background:rgb(7 12 18 / 82%); backdrop-filter:blur(5px); }
.dialogo-foto img { display:block; width:100%; max-height:78vh; object-fit:contain; border-radius:var(--raio-grande) var(--raio-grande) 0 0; }
.dialogo-foto p { min-height:1.5em; margin:0; padding:var(--espaco-3) var(--espaco-4); color:#fff; }
.dialogo-foto-fechar { position:absolute; top:-14px; right:-14px; z-index:2; width:44px; height:44px; padding:0; color:#111; background:#fff; border:0; border-radius:50%; font-size:1.5rem; cursor:pointer; }

.montra-publica {
  margin: var(--espaco-6) 0;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
}
.montra-cabecalho {
  display: flex;
  gap: var(--espaco-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-4) var(--espaco-5);
  border-bottom: 1px solid var(--borda);
}
.montra-sobretitulo, .anuncio-etiqueta {
  margin: 0 0 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acento);
}
.montra-cabecalho h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 1.15rem; }
.montra-controlos { display: flex; gap: var(--espaco-2); }
.montra-controlos button {
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  padding: 0;
  font-size: 1.1rem;
  color: var(--texto);
  background: var(--superficie-alt);
  border: 1px solid var(--borda);
  border-radius: 50%;
  cursor: pointer;
}
.montra-janela { overflow: hidden; }
.montra-faixa { display: flex; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.anuncio-produto {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(15rem, 0.92fr);
  flex: 0 0 100%;
  min-width: 100%;
  background: linear-gradient(135deg, var(--superficie), var(--acento-suave));
}
.anuncio-produto > img { display: block; width: 100%; height: 100%; min-height: 17rem; object-fit: cover; background: var(--superficie-alt); }
.anuncio-produto-corpo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--espaco-6); }
.anuncio-produto h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 1.55rem; line-height: 1.15; letter-spacing: -0.02em; }
.anuncio-descricao { margin: var(--espaco-3) 0 var(--espaco-4); color: var(--texto-suave); }
.anuncio-preco { font-size: 1.45rem; color: var(--texto); }
.anuncio-produto small { margin-top: var(--espaco-1); color: var(--texto-suave); }
.montra-pontos { display: flex; gap: var(--espaco-2); justify-content: center; padding: var(--espaco-3); border-top: 1px solid var(--borda); }
.montra-pontos button { width: 8px; height: 8px; padding: 0; background: var(--borda); border: 0; border-radius: 999px; cursor: pointer; transition: width var(--transicao), background var(--transicao); }
.montra-pontos button[aria-current="true"] { width: 24px; background: var(--acento); }

@media (max-width: 36rem) {
  .montra-cabecalho { padding: var(--espaco-4); }
  .anuncio-produto { grid-template-columns: 1fr; }
  .anuncio-produto > img { min-height: 0; aspect-ratio: 16 / 9; }
  .anuncio-produto-corpo { padding: var(--espaco-5); }
  .anuncio-produto h3 { font-size: 1.35rem; }
  .galeria-publica { padding:var(--espaco-4); }
  .grelha-galeria-publica { grid-auto-rows:9rem; gap:var(--espaco-2); }
  .foto-galeria-publica:first-child { grid-column:1 / -1; grid-row:auto; }
}

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (min-width: 40rem) {
  .titulo-pagina { font-size: 1.9rem; }
  .cartao-hora { font-size: 3rem; }
  body { padding-bottom: calc(var(--espaco-7) + var(--espaco-4)); }
  .barra-total { bottom: var(--espaco-4); border-radius: var(--raio-grande); }
}

@media (max-width: 32rem) {
  main { padding-top: var(--espaco-4); }
  .progresso-marcacao { margin-bottom: var(--espaco-5); }
  .progresso-marcacao li { font-size: 0.62rem; }
  .progresso-marcacao li span { width: 28px; height: 28px; }
  .progresso-marcacao::before { top: 13px; }
  .resumo-escolha { grid-template-columns: 1fr; }
  .resumo-totais { justify-items: start; grid-auto-flow: column; justify-content: start; gap: var(--espaco-2); align-items: baseline; }
  .navegacao-semana .botao { min-height: 44px; padding: var(--espaco-2) var(--espaco-3); font-size: 0.78rem; }
  .cabecalho-horas { align-items: start; }
  .grelha-horas { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------- botão da área do cliente */

.cabecalho {
  display: flex;
  gap: var(--espaco-4);
  align-items: center;
  justify-content: space-between;
}
.cabecalho-nome { flex: 1 1 auto; min-width: 0; }
.acessos-cabecalho { display: flex; gap: var(--espaco-1); align-items: center; flex: 0 0 auto; }

/* Placed opposite the establishment's name rather than before it: the header
   belongs to the establishment (dossie 6.1), and an account control in front of
   the name would push aside the one thing the client came to recognise. It is
   also where every hand already reaches for an account. */
.botao-area-cliente, .botao-area-profissional {
  display: inline-flex;
  gap: var(--espaco-2);
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--alvo-toque);
  padding: 4px 4px 4px 4px;
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--texto-suave);
  text-decoration: none;
  border-radius: 999px;
  transition: color var(--transicao), background var(--transicao);
}
.botao-area-cliente:hover, .botao-area-profissional:hover { color: var(--acento); background: var(--acento-suave); }

.avatar-cliente, .avatar-profissional {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  color: var(--acento);
  background: var(--acento-suave);
  border: 1px solid color-mix(in srgb, var(--acento) 20%, transparent);
  border-radius: 50%;
  flex: 0 0 auto;
  transition: background var(--transicao), color var(--transicao);
}
/* The bust is nudged down and scaled up so the shoulders meet the rim of the
   circle, the way a portrait sits in a frame. Centred at its natural size it
   floats, and floating reads as an icon rather than as a person. */
.avatar-cliente svg {
  margin-top: 5px;
  width: 24px;
  height: 24px;
}
.avatar-profissional svg { width: 21px; height: 21px; }
.botao-area-cliente:hover .avatar-cliente,
.botao-area-profissional:hover .avatar-profissional {
  background: var(--acento);
  color: var(--acento-contraste);
}

/* On a phone the icon carries the meaning on its own; spelling it out would
   crowd out the establishment's name, which matters more. */
.rotulo-area-cliente, .rotulo-area-profissional { display: none; }
@media (min-width: 30rem) {
  .rotulo-area-cliente, .rotulo-area-profissional { display: inline; padding-right: var(--espaco-2); }
}
/* Assinatura da plataforma: discreta, nunca sobre o conteúdo, e legível em
   qualquer um dos temas — herda a cor suave em vez de a fixar. */
.rodape-plataforma { padding: 1.5rem 1rem 2rem; text-align: center; font-size: .8rem; opacity: .55; }
.rodape-plataforma a { color: inherit; text-decoration: none; }
.rodape-plataforma a:hover { opacity: 1; text-decoration: underline; }