/* ═══════════════════════════════════════════════════════════════════════════
   Totem Online : a tela do cliente
   Cores do tema padrão: #1D1A9B (azul) e #B2DF20 (verde). Fontes Anton + Archivo.
   Tudo dimensionado para toque de dedo em pé, a ~70cm da tela: nenhum alvo
   clicável abaixo de 90px de altura.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Cores da MARCA. O totem sobrescreve estas seis em tempo de execucao com o
     tema da unidade (ver aplicarAparencia em totem.js) — por isso tudo no resto
     do arquivo usa var(), e nao cor literal. Os valores aqui sao o tema padrao,
     e valem enquanto /api/aparencia nao responde. */
  --azul: #1d1a9b;
  --azul-fundo: #14127a;
  --azul-claro: #2f2bc4;
  --verde: #b2df20;
  --branco: #ffffff;
  --erro: #ff6b5e;
  /* Cor do texto ESCRITO EM CIMA do destaque (botao preenchido). Sem ela, um
     tema de destaque escuro ficaria com texto escuro sobre fundo escuro. */
  --texto-destaque: #16143f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* `hidden` TEM de esconder, sempre.
   O `[hidden] { display: none }` vem do navegador, e qualquer regra de autor que
   defina `display` ganha dele — não por especificidade, mas porque folha de autor
   vence folha do navegador. Resultado: `.cartao { display: flex }` deixava na tela
   um cartão que o JS achava ter escondido com `el.hidden = true`. Foi o retângulo
   vermelho vazio (com os "—" de placeholder) que apareceu na tela "Passe na
   recepção" para todo assinante barrado, visto em 05/08/2026.
   O `!important` é proposital: é o que faz a regra valer também para as classes
   que ainda não existem, em vez de exigir um remendo por elemento novo. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--azul-fundo);
  color: var(--branco);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  /* Totem: nada de seleção de texto, menu de contexto ou zoom por toque. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: default;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, var(--azul-claro) 0%, var(--azul-fundo) 62%);
}

/* ── Telas ────────────────────────────────────────────────────────────────── */
/* Tudo aqui é dimensionado pela ALTURA (vh), não pela largura: num totem em pé a
   altura é o que falta, e conteúdo cortado é inacessível (a página não rola). */
.tela {
  display: none;
  /* Notebook deitado: a tela é larga, então as telas de escolha podem usar mais
     espaço horizontal. As de digitação seguem estreitas, para o dedo não ter de
     atravessar a tela toda. */
  width: min(100%, 1100px);
  max-height: 100vh;
  padding: 2.5vh 40px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8vh;
}
#tela-telefone, #tela-nome, #tela-email, #tela-nascimento, #tela-pin { width: min(100%, 860px); }
.tela.ativa { display: flex; animation: entrar .28s ease-out; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.cabecalho h1 {
  font-family: "Anton", "Archivo Black", Impact, sans-serif;
  font-size: min(6.4vw, 7.4vh, 76px);
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.02;
}
.cabecalho p {
  margin-top: 1vh;
  font-size: min(2.4vw, 3vh, 26px);
  opacity: .85;
  max-width: 760px;
  margin-inline: auto;
  line-height: 1.35;
}

/* O atalho da equipe é `fixed` e passaria POR CIMA da segunda fila, que vai até
   perto da borda direita. Reservar a faixa de baixo é mais robusto do que
   estreitar os cartões: funciona em qualquer altura de tela. */
#tela-inicio { padding-bottom: 92px; }

/* A tela inicial é a única lida de LONGE, antes de o cliente se aproximar do
   totem: tudo aqui é propositalmente maior que no resto do fluxo. */
#tela-inicio .cabecalho h1 { font-size: min(13vw, 15vh, 150px); }
#tela-inicio .cabecalho p { font-size: min(4.6vw, 5vh, 46px); }
#tela-inicio .cartao-escolha { min-height: min(38vh, 300px); gap: 1.6vh; }
#tela-inicio .cartao-escolha .icone { font-size: min(9vh, 78px); }
#tela-inicio .cartao-escolha strong { font-size: min(5.4vw, 6.4vh, 62px); }
#tela-inicio .cartao-escolha small { font-size: min(3.4vh, 28px); }

/* ── Visor do telefone ────────────────────────────────────────────────────── */
.visor {
  font-family: "Anton", monospace;
  font-size: min(7vw, 6.4vh, 62px);
  letter-spacing: 3px;
  background: rgba(0, 0, 0, .26);
  border: 3px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  padding: 1.6vh 28px;
  min-width: min(100%, 520px);
  color: var(--branco);
}
.visor.preenchido { border-color: var(--verde); }

.visor-texto {
  font-family: "Archivo", sans-serif;
  font-size: min(4.4vw, 4.6vh, 42px);
  letter-spacing: 1px;
  min-height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  word-break: break-all;
  line-height: 1.15;
}

.aviso { min-height: 3vh; color: var(--erro); font-size: min(2.2vh, 19px); font-weight: 600; }

/* ── Teclado numérico ─────────────────────────────────────────────────────── */
.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4vh;
  /* 520px era largura de celular num notebook deitado. O totem tem tela sobrando
     e o dedo do cliente nao. */
  width: min(100%, 780px);
}
.tecla {
  font-family: "Anton", sans-serif;
  font-size: min(5vw, 5.8vh, 54px);
  /* 4 linhas de teclado + cabeçalho + visor têm de caber em 100vh — por isso a
     altura cresce em vh e nao em px fixo. */
  height: min(13vh, 132px);
  min-height: 84px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
  color: var(--branco);
  cursor: pointer;
  transition: transform .06s ease, background .16s ease;
}
.tecla:active { transform: scale(.94); background: rgba(255, 255, 255, .26); }
.tecla.apagar { font-size: min(2.6vw, 3vh, 28px); background: rgba(255, 255, 255, .07); }
.tecla.ok { background: var(--verde); color: var(--texto-destaque); }
.tecla.ok:disabled { background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .3); cursor: default; }
.tecla.ok:disabled:active { transform: none; }

/* ── Teclado de letras ────────────────────────────────────────────────────── */
/* Teclado em LINHAS de verdade (não wrap): com wrap, uma tela mais estreita
   quebrava o QWERTY em lugares aleatórios e o teclado ficava irreconhecível. */
.teclado-letras {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.linha-teclado { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.tecla-letra {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: min(3vw, 3.6vh, 32px);
  /* 11 teclas na linha mais longa do teclado de e-mail (ZXCVBNM@.-_) precisam
     caber sem quebrar: por isso a largura cede antes da altura, e o termo em vw
     e o que segura tela estreita. So o TETO em px subiu — em tela larga era ele
     que limitava, nao o vw. */
  width: min(7.8vw, 92px);
  min-width: 52px;
  height: min(9.4vh, 92px);
  min-height: 62px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  color: var(--branco);
  cursor: pointer;
  transition: transform .06s ease, background .16s ease;
}
.tecla-letra:active { transform: scale(.93); background: rgba(255, 255, 255, .28); }
.tecla-letra.larga { width: clamp(150px, 19vw, 232px); font-size: min(2.4vw, 2.8vh, 25px); }

.acoes-nome { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

/* ── Cartão do agendamento ────────────────────────────────────────────────── */
.cartao {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(178, 223, 32, .45);
  border-radius: 22px;
  padding: 2.4vh 32px;
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
}
.cartao-hora {
  font-family: "Anton", sans-serif;
  font-size: min(9vw, 9.5vh, 88px);
  color: var(--verde);
  line-height: 1;
}
.cartao-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: min(2vw, 2.4vh, 21px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 1.1vh;
  text-align: left;
}
.cartao-linha span { opacity: .7; flex-shrink: 0; }
.cartao-linha strong { text-align: right; font-weight: 700; }

/* ── Botões ───────────────────────────────────────────────────────────────── */
.botao-grande {
  font-family: "Anton", sans-serif;
  font-size: min(3.4vw, 4vh, 36px);
  text-transform: uppercase;
  letter-spacing: .6px;
  background: var(--verde);
  color: var(--texto-destaque);
  border: none;
  border-radius: 18px;
  padding: 2.4vh 40px;
  width: min(100%, 560px);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(178, 223, 32, .22);
  transition: transform .07s ease, opacity .16s ease;
}
.botao-grande:active { transform: scale(.97); }
.botao-grande:disabled { opacity: .34; box-shadow: none; cursor: default; }
.botao-grande:disabled:active { transform: none; }

/* Voltar é a saída de TODA tela do fluxo. Como link sublinhado a 62% de opacidade
   ele desaparecia no azul — e um cliente que não acha a saída fica travado ou
   chama a recepção. Botão de verdade, contornado: visível sem roubar o destaque
   da ação principal, que é preenchida. */
.botao-texto {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .42);
  border-radius: 14px;
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: min(2.5vh, 21px);
  padding: 1.4vh 30px;
  min-height: 62px;
  cursor: pointer;
  paint-order: stroke fill;
  -webkit-text-stroke: .04em var(--contorno);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
}
.botao-texto:active { transform: scale(.97); }
.botao-texto:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .8); }

/* Recusar tem de ser tão fácil quanto aceitar. Como link apagado (`botao-texto`)
   o "Não, obrigado" da tela de adicionais sumia no fundo azul, e o cliente que
   não quer o extra ficava sem saída visível — o que transforma uma oferta em
   armadilha. Botão de verdade, contornado, sem roubar o destaque dos adicionais
   (que são preenchidos). */
.botao-recusar {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 16px;
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: min(2.7vh, 23px);
  padding: 1.7vh 34px;
  min-height: 74px;
  width: min(100%, 560px);
  cursor: pointer;
  paint-order: stroke fill;
  -webkit-text-stroke: .04em var(--contorno);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
}
.botao-recusar:active { transform: scale(.97); }
.botao-recusar:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .75); }

/* ── Sucesso / erro ───────────────────────────────────────────────────────── */
.selo {
  width: clamp(120px, 17vh, 158px);
  height: clamp(120px, 17vh, 158px);
  border-radius: 50%;
  background: var(--verde);
  color: var(--texto-destaque);
  font-size: clamp(64px, 9vh, 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulo .45s cubic-bezier(.2, 1.5, .5, 1);
}
.selo-erro { background: var(--erro); color: #fff; }

@keyframes pulo {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.titulo-sucesso {
  font-family: "Anton", sans-serif;
  font-size: min(5.6vw, 6vh, 58px);
  text-transform: uppercase;
}
.subtitulo-sucesso {
  font-size: min(2.3vw, 2.7vh, 24px);
  opacity: .85;
  max-width: 560px;
  line-height: 1.4;
}

/* ── Escolha em cartões (início / quando / esperar / pergunta do extra) ───── */
/* Lado a lado porque o notebook fica deitado: na horizontal sobra largura e falta
   altura, então empilhar cartões estouraria a tela.

   🔴 ESTA REGRA ESTAVA ESCRITA DUAS VEZES no arquivo (aqui com `width: 100%` e
   de novo lá embaixo, na seção da pergunta do extra, com `min(100%, 620px)`).
   Mesma especificidade: quem valia era a DE BAIXO, então editar esta aqui não
   mudava nada na tela — o tipo de armadilha que faz alguém mexer, não ver
   efeito, e concluir que o CSS "não pega". Juntadas em 10/09/2026, com o valor
   que já estava valendo na prática.

   O teto de 620px é o que dá o alinhamento das duas filas da tela inicial: a
   `.escolha-secundaria` usa o MESMO teto, senão a fila de baixo fica mais larga
   que a de cima e as bordas não se encontram. */
.escolha-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: min(100%, 620px);
}
@media (max-width: 700px) { .escolha-dupla { grid-template-columns: 1fr; } }

.cartao-escolha {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  padding: 3vh 24px;
  /* Na tela deitada sobra altura: alvos grandes são mais fáceis de acertar em pé
     e deixam claro que são os dois caminhos principais. */
  min-height: min(32vh, 240px);
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vh;
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
}
.cartao-escolha:active { transform: scale(.97); }
.cartao-escolha .icone { font-size: min(7vh, 60px); line-height: 1; }
.cartao-escolha strong {
  font-family: "Anton", sans-serif;
  /* Grande de propósito: é a primeira coisa que o cliente lê, de pé e a distância. */
  font-size: min(3.6vw, 4.6vh, 44px);
  text-transform: uppercase;
  line-height: 1.1;
}
.cartao-escolha small { font-size: min(2.8vh, 22px); opacity: .78; line-height: 1.3; }
.cartao-escolha.destaque {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--texto-destaque);
}
.cartao-escolha.destaque small { opacity: .78; }

/* ── Lista de serviços ────────────────────────────────────────────────────── */
.lista-servicos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
@media (max-width: 760px) { .lista-servicos { grid-template-columns: 1fr; } }

.servico {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  padding: 3vh 18px;
  min-height: min(26vh, 190px);
  color: var(--branco);
  cursor: pointer;
  font-family: "Archivo", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8vh;
  transition: transform .08s ease, border-color .18s ease, background .18s ease;
}
.servico:active { transform: scale(.97); }
.servico:hover { border-color: var(--verde); }
.servico-nome {
  font-family: "Anton", sans-serif;
  font-size: min(3vw, 3.6vh, 34px);
  text-transform: uppercase;
  line-height: 1.05;
}
.servico-preco { font-size: min(2.4vh, 20px); color: var(--verde); font-weight: 700; }

/* ── Listas roláveis (dias, barbeiros) ────────────────────────────────────── */
/* A lista rola, não a página: o cabeçalho e o botão de voltar têm de ficar
   sempre visíveis, senão o cliente se perde sem saída. */
.lista-rolavel {
  width: 100%;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px;
  -webkit-overflow-scrolling: touch;
}

.item-lista {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  padding: 2.2vh 22px;
  color: var(--branco);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: "Archivo", sans-serif;
  text-align: left;
  transition: transform .08s ease, border-color .18s ease;
  flex-shrink: 0;
}
.item-lista:active { transform: scale(.98); }
.item-lista:hover { border-color: var(--verde); }
/* Blocos, não inline: como <span>, o nome e o detalhe saíam grudados na mesma
   linha ("Carlos Moura último horário de hoje"). */
.item-lista > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.item-nome {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: min(2.6vw, 3.2vh, 30px);
  line-height: 1.1;
}
.item-detalhe { display: block; font-size: min(2vh, 16px); opacity: .7; }
.item-hora {
  font-family: "Anton", sans-serif;
  font-size: min(3.2vw, 4vh, 38px);
  color: var(--verde);
  flex-shrink: 0;
}
.etiqueta-cedo {
  background: var(--verde);
  color: var(--texto-destaque);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: middle;
  font-family: "Archivo", sans-serif;
}

/* ── Barbeiros com horários no mesmo card ─────────────────────────────────── */
/* Três por linha, com os horários já visíveis: o cliente toca direto na hora que
   quer, sem passar por uma tela intermediária só para escolher a pessoa. */
.tela-larga { width: min(100%, 1500px) !important; }

.grade-barbeiros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-height: 62vh;
  overflow-y: auto;
  padding: 2px;
  align-items: start;
}
@media (max-width: 1100px) { .grade-barbeiros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grade-barbeiros { grid-template-columns: 1fr; } }

.card-barbeiro {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.card-barbeiro.primeiro { border-color: rgba(178, 223, 32, .55); }

.barbeiro-topo { display: flex; align-items: center; gap: 12px; }

.avatar {
  width: min(9vh, 74px);
  height: min(9vh, 74px);
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--azul-claro);
  border: 2px solid rgba(178, 223, 32, .5);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Anton", sans-serif;
  font-size: min(3.4vh, 28px);
  color: var(--verde);
}

.barbeiro-textos { min-width: 0; flex: 1; }
.barbeiro-apelido {
  font-family: "Anton", sans-serif;
  font-size: min(2.4vw, 3.4vh, 32px);
  line-height: 1.05;
}
.barbeiro-nome {
  font-size: min(1.9vh, 15px);
  opacity: .62;
  line-height: 1.2;
  margin-top: 3px;
}

.horarios-barbeiro { display: flex; flex-wrap: wrap; gap: 8px; }

.chip-hora {
  font-family: "Anton", sans-serif;
  font-size: min(2.8vh, 24px);
  padding: 1.2vh 12px;
  min-width: 78px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 11px;
  background: rgba(255, 255, 255, .09);
  color: var(--branco);
  cursor: pointer;
  transition: transform .07s ease, background .16s ease;
}
.chip-hora:active { transform: scale(.94); }
.chip-hora:hover { background: var(--verde); color: var(--texto-destaque); border-color: var(--verde); }
.chip-hora.destaque { background: var(--verde); color: var(--texto-destaque); border-color: var(--verde); }

.mais-horarios {
  background: none;
  border: none;
  color: var(--verde);
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: min(2vh, 16px);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 2px 0;
  text-align: left;
}

/* ── Segunda fila do cliente (assinante | planos) ─────────────────────────── */
/* Meia largura cada, alinhadas com os cartões de cima. Dourado: lê como
   benefício de plano sem competir com o verde da marca, e separa num relance
   dos dois caminhos principais. */
/* 🔴 O MESMO TETO DA FILA DE CIMA (`.escolha-dupla`), e é isso que faz as duas
   filas terminarem na mesma borda. Aqui era `width: 100%`, ou seja, a largura
   inteira da `.tela` (até 1100px) contra os 620px dos cartões de cima — a fila
   de baixo passava dos lados da de cima. Com três cartões estreitos isso quase
   não aparecia; com dois, em 10/09/2026, ficou evidente: dois botões compridos,
   desalinhados dos dois principais. */
.escolha-secundaria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: min(100%, 620px);
}
/* Sempre DOIS cartões desde 10/09/2026 — "Checkout" e "Conhecer os planos".
   Havia uma regra de três colunas para quando o pagamento pelo totem estava
   ligado (eram "Sou assinante" + "Pagar" + "Planos"), ligada pelo JS conforme
   /api/checkout/ativo. Os dois primeiros viraram um só, então a terceira coluna
   não existe mais e a classe que a ligava saiu junto do JS. */
@media (max-width: 700px) {
  .escolha-secundaria { grid-template-columns: 1fr; }
}

/* ── A tela inicial usa a LARGURA INTEIRA ─────────────────────────────────────
   Os quatro cartões da entrada crescem juntos até o limite da `.tela` (1100px),
   em vez dos 620px que valem nas outras telas de escolha.

   🔴 AS DUAS FILAS JUNTAS, e é isso que importa. A primeira versão desta tela
   tinha a fila de baixo em `100%` e a de cima em `620px`: a de baixo passava dos
   lados da de cima e parecia comprida demais. O conserto de 10/09 alinhou as
   duas — mas alinhou pelo MENOR, e aí os quatro cartões ficaram apertados no
   meio de uma tela larga, com margem sobrando dos dois lados. Alinhar pelo MAIOR
   é o que o Daniel pediu olhando o totem: mesma borda, largura inteira.

   Escopo na tela inicial de propósito. `.escolha-dupla` também desenha o "agora
   ou mais tarde", o "vou esperar aqui" e a pergunta do extra — telas de UMA
   decisão, onde o cartão largo demais faz o olho atravessar a tela para ler dois
   botões. Aqui é diferente: é a vitrine, o cliente está a metros de distância e
   os quatro alvos precisam ser o maior possível.

   Só mexe na LARGURA: a altura continua vindo de `.cartao-escolha` e
   `.cartao-secundario`, então nenhuma tela passa a cortar por causa disto — o
   que é o risco de verdade num tablet deitado, onde a altura é o que falta. */
#tela-inicio .escolha-dupla,
#tela-inicio .escolha-secundaria {
  width: 100%;
}

.cartao-secundario {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 1.4vh 22px;
  border: 2px solid rgba(240, 200, 90, .55);
  border-radius: 20px;
  background: rgba(240, 200, 90, .13);
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
}
.cartao-secundario:active { transform: scale(.98); }
.cartao-secundario:hover { background: rgba(240, 200, 90, .22); border-color: #f0c85a; }
.secundario-icone { font-size: min(5vh, 40px); line-height: 1; flex-shrink: 0; }
.secundario-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.secundario-textos strong {
  font-family: "Anton", sans-serif;
  font-size: min(2.2vw, 3vh, 28px);
  text-transform: uppercase;
  line-height: 1.1;
  paint-order: stroke fill;
  -webkit-text-stroke: .05em var(--contorno);
  text-shadow: 0 2px 7px rgba(0, 0, 0, .6);
}
.secundario-textos small {
  font-size: min(2.1vh, 17px);
  opacity: .88;
  line-height: 1.25;
  paint-order: stroke fill;
  -webkit-text-stroke: .045em var(--contorno);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}

/* A tela dos planos é a única que ocupa a janela inteira: o site precisa de
   espaço, e o cliente já sabe onde está pela barra de cima. */
.tela-planos {
  width: 100% !important;
  max-width: none;
  height: 100vh;
  padding: 0 !important;
  gap: 0;
  justify-content: flex-start;
}
.planos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 12px 20px;
  background: var(--azul-fundo);
  border-bottom: 2px solid rgba(240, 200, 90, .45);
  flex-shrink: 0;
}
.planos-titulo { display: flex; flex-direction: column; text-align: left; }
.planos-titulo strong {
  font-family: "Anton", sans-serif;
  font-size: min(3.4vh, 27px);
  text-transform: uppercase;
  line-height: 1.1;
}
.planos-titulo span { font-size: min(2vh, 15px); opacity: .7; }

/* Alvo grande: é a ÚNICA saída desta tela, já que o site embutido não tem
   nenhum controle do totem. */
.botao-fechar-planos {
  background: rgba(240, 200, 90, .18);
  border: 2px solid rgba(240, 200, 90, .65);
  color: #f6d87e;
  border-radius: 13px;
  padding: 14px 24px;
  min-height: 60px;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: min(2.4vh, 19px);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.botao-fechar-planos:active { transform: scale(.97); }
.botao-fechar-planos:hover { background: #f0c85a; color: var(--texto-destaque); }

.quadro-planos {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}

/* Plano do assinante, no topo do cartão de finalização. */
.selo-plano {
  background: rgba(240, 200, 90, .2);
  border: 1px solid rgba(240, 200, 90, .55);
  color: #f6d87e;
  border-radius: 10px;
  padding: .9vh 14px;
  font-weight: 700;
  font-size: min(2.4vh, 20px);
  text-align: center;
}

.cartao-alerta { border-color: rgba(255, 107, 94, .6); }
.cartao-alerta .cartao-hora { color: var(--erro); }

/* Assinatura em atraso: aviso no check-in, sem impedir a chegada. */
.alerta-assinatura {
  background: rgba(255, 107, 94, .16);
  border: 2px solid rgba(255, 107, 94, .55);
  border-radius: 14px;
  padding: 1.4vh 20px;
  color: #ffb3ab;
  font-weight: 700;
  font-size: min(2.3vh, 19px);
  line-height: 1.35;
  max-width: min(100%, 620px);
}

/* ── Pagamento pelo totem ─────────────────────────────────────────────────── */
/* A conta é a única tela do totem que mostra dinheiro item a item. Ela herda o
   .cartao para não inventar uma caixa nova, e só acrescenta a lista e o total. */
.cartao-conta { gap: .8vh; }

.conta-itens { display: flex; flex-direction: column; gap: .8vh; }
.conta-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: min(2vw, 2.4vh, 21px);
  text-align: left;
}
.conta-item span { opacity: .85; }
.conta-item strong { flex-shrink: 0; font-weight: 700; }

/* O total é o número que o cliente confere antes de tocar em pagar: tem de ser
   o maior da tela, com a mesma cor de destaque das horas. */
.conta-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 2px solid rgba(255, 255, 255, .2);
  padding-top: 1.2vh;
  margin-top: .6vh;
  font-size: min(2.2vw, 2.6vh, 23px);
  text-transform: uppercase;
}
.conta-total strong {
  font-family: "Anton", sans-serif;
  font-size: min(6vw, 6.5vh, 58px);
  color: var(--verde);
  line-height: 1;
}

/* Formas de pagamento: alvos grandes, uma coluna por linha em tela estreita.
   Mesma linguagem dos cartões de escolha — quem está de pé toca melhor em
   retângulo largo do que em botão pequeno. */
.formas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: min(100%, 620px);
}

/* 🔴 O NÚMERO DE COLUNAS SEGUE A QUANTIDADE (22/09/2026), e quem conta é o JS
   (`ajustarColunas`), não o CSS: duas colunas fixas com TRÊS formas de pagamento
   deixavam o Pix sozinho na segunda linha, com meia largura e encostado à
   esquerda. Foi o que o Daniel viu na loja.

   Vale também para a lista de BANDEIRAS, que usa o mesmo container. */
.formas[data-colunas="1"] { grid-template-columns: 1fr; }
.formas[data-colunas="3"] { grid-template-columns: repeat(3, 1fr); }

/* Com 2 colunas e um total ÍMPAR, o último estica em vez de sobrar torto. Pega
   5 bandeiras, 7 bandeiras — o mesmo defeito, só que mais raro. */
#lista-formas[data-colunas="2"] > .forma:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Quanto ele vai pagar, na tela em que ele escolhe COMO pagar. Menor que o
   número da tela de confirmação (aquele é o último toque antes do cartão), e
   maior que qualquer outra coisa desta tela. */
.forma-valor {
  font-family: "Anton", sans-serif;
  font-size: min(7vw, 7vh, 64px);
  color: var(--verde);
  line-height: 1;
  margin-bottom: 2.2vh;
}
@media (max-width: 700px) { .formas { grid-template-columns: 1fr; } }

/* ── A lista de extras do assinante ROLA ──────────────────────────────────────
   🔴 Ela é a única `.formas` de tamanho IMPREVISÍVEL: as formas de pagamento são
   três (crédito, débito, Pix), mas os extras vêm do ranking de vendas da unidade
   e hoje passam de vinte. Sem teto de altura a grade cresce além da janela e,
   como `.tela` centraliza com `overflow: hidden`, o excesso é cortado METADE EM
   CIMA E METADE EMBAIXO — o mesmo sintoma que o bloco "Tela BAIXA" lá embaixo
   descreve para as telas de digitação.

   O estrago não era só estético: o "Confirmar" fica DEPOIS da lista, então ele
   saía da tela junto. O cliente marcava o extra, o botão acendia fora do campo
   de visão, e o caminho simplesmente não tinha saída — relatado em 10/09/2026.

   Rola a LISTA, nunca a página (`html, body` são `overflow: hidden` de
   propósito num totem): assim o cabeçalho, o "Confirmar" e o "Voltar" ficam
   sempre visíveis. Mesmo padrão de `.lista-adicionais` e `.grade-barbeiros`.

   `52vh` é o teto: com o cabeçalho (~12vh), o botão grande (~9vh), o "Voltar"
   (~6vh) e os respiros, a tela fecha em ~84vh e sobra folga na mais apertada.
   O `padding: 2px` existe para a borda do item marcado não ser comida pela
   janela de rolagem.

   Sem `align-items: start` de propósito, ao contrário de `.lista-adicionais`:
   lá os cartões têm alturas muito diferentes e esticar criaria caixas enormes;
   aqui a diferença é de uma linha (o extra com preço contra o sem preço), e
   esticar é o que mantém a fila alinhada. Era o comportamento antes deste
   conserto, e ele não tinha nada de errado — o que faltava era só o teto. */
.lista-extras {
  max-height: 52vh;
  overflow-y: auto;
  padding: 2px;
  -webkit-overflow-scrolling: touch;
}

/* Num totem ninguém arrasta barra de rolagem, mas ela é o ÚNICO sinal de que a
   lista continua embaixo. A padrão do Chrome é fina e quase invisível sobre o
   fundo escuro, então aqui ela é larga e clara de propósito: é o que impede o
   cliente de achar que a lista acabou onde a tela acabou. */
.lista-extras::-webkit-scrollbar { width: 10px; }
.lista-extras::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); border-radius: 8px; }
.lista-extras::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .32);
  border-radius: 8px;
}
.lista-extras { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .32) rgba(255, 255, 255, .06); }

.forma {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 16px;
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: min(2.6vh, 22px);
  min-height: 84px;
  padding: 1.6vh 20px;
  cursor: pointer;
  transition: transform .07s ease, background .16s ease;
}
/* 🔴 ALVO MAIOR NA TELA DE PAGAMENTO. Com três colunas cada botão perde
   largura (de ~300px para ~195px), e sem compensar na altura o alvo encolheria
   um terço — em cima do toque que move dinheiro, com o cliente de pé. A altura
   sobrando é de graça: uma linha de 132px ocupa MENOS que as duas de 84 + 16 de
   intervalo que havia antes.

   Escopo em `#lista-formas` de propósito: a lista de extras usa a mesma classe
   `.forma` e rola dentro de uma altura fixa — engordar lá mostraria menos
   extras por tela. */
#lista-formas > .forma {
  min-height: min(15vh, 132px);
  font-size: min(3vh, 26px);
}

.forma:active { transform: scale(.97); }
.forma:hover { background: rgba(255, 255, 255, .18); border-color: var(--verde); }

/* ── A pergunta do extra (assinante) ──────────────────────────────────────── */
/* Dois botões do MESMO tamanho e da MESMA cor. O "não" é o que fecha a comanda
   sozinho, então destacá-lo seria empurrar o cliente para a resposta que custa
   dinheiro quando está errada. Quem decide aqui é ele, não o layout.
   (A grade `.escolha-dupla` que esta tela usa está lá em cima, definida uma vez
   só — ver o comentário dela.) */

.opcao-grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 140px;
  padding: 1.8vh 20px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  cursor: pointer;
  transition: transform .07s ease, background .16s ease, border-color .16s ease;
}
.opcao-grande:active { transform: scale(.97); }
/* Só a tela de produto usa (26/09/2026): o "Levei" fica apagado até o cliente
   marcar algo na lista, igual ao "Confirmar" dos extras. */
.opcao-grande:disabled { opacity: .4; cursor: default; }
.opcao-grande:disabled:active { transform: none; }
.opcao-grande:hover { background: rgba(255, 255, 255, .18); border-color: var(--verde); }
.opcao-titulo { font-weight: 800; font-size: min(3vh, 26px); }
.opcao-detalhe { font-weight: 600; font-size: min(2vh, 17px); opacity: .72; text-align: center; }

/* Extra escolhido. Verde cheio porque o cliente precisa ver de longe o que já
   marcou — ele confere a lista inteira antes de confirmar. */
.forma.marcado {
  background: rgba(178, 223, 32, .2);
  border-color: var(--verde);
}
.forma .extra-preco {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  font-size: min(2vh, 17px);
  opacity: .78;
}

/* Esta linha muda de texto conforme a unidade tenha ou não maquininha ligada
   (ver carregarCheckout em totem.js). Sem maquininha, ela é o que impede o
   cliente de ir embora achando que já pagou; com maquininha, ela diz onde
   passar o cartão. Amarela nos dois casos: é instrução, não confirmação. */
.aviso-maquininha {
  background: rgba(240, 200, 90, .16);
  border: 2px solid rgba(240, 200, 90, .55);
  border-radius: 14px;
  padding: 1.3vh 20px;
  color: #ffe6a8;
  font-weight: 700;
  font-size: min(2.2vh, 18px);
  line-height: 1.35;
  max-width: min(100%, 620px);
}

/* ── Cobrança na maquininha ───────────────────────────────────────────────────
   Tela de espera com o cliente de pé e o cartão na mão. Precisa dizer duas
   coisas de longe: quanto vai ser cobrado e que a máquina está trabalhando —
   sem barra de progresso, porque não existe progresso real para mostrar (quem
   controla o tempo é o cliente digitando a senha). */
.passo-maquininha {
  color: var(--texto);
  font-weight: 700;
  font-size: min(2.6vh, 22px);
  opacity: .92;
  margin-top: .6vh;
}

/* Três pontos pulsando, em vez de giro contínuo: um movimento lento e calmo
   comunica "espere" sem sugerir pressa em quem está digitando senha. */
.pulso-maquininha {
  display: flex;
  gap: 12px;
  margin-top: 1.6vh;
}
.pulso-maquininha span {
  width: min(1.6vh, 14px);
  height: min(1.6vh, 14px);
  border-radius: 50%;
  background: var(--verde);
  animation: pulso-maquininha 1.4s ease-in-out infinite;
}
.pulso-maquininha span:nth-child(2) { animation-delay: .18s; }
.pulso-maquininha span:nth-child(3) { animation-delay: .36s; }

@keyframes pulso-maquininha {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* Quem pediu menos movimento não perde informação: os pontos ficam visíveis e
   parados, e o texto acima continua dizendo o que está acontecendo. */
@media (prefers-reduced-motion: reduce) {
  .pulso-maquininha span { animation: none; opacity: .8; }
}

/* ── Atalhos de canto (tela inicial) ──────────────────────────────────────── */
/* Assinante e equipe, empilhados no canto inferior direito. Fora do fluxo: a
   tela inicial é do cliente e estes dois não podem disputar com os dois caminhos
   dele.
   A discrição vem do TAMANHO e da POSIÇÃO, nunca de apagar a letra — uma versão
   anterior usava opacity no botão inteiro e o texto ficou ilegível. Fundo bem
   escuro faz o branco descolar sem precisar crescer.
   `align-items: stretch` deixa os dois com a mesma largura, senão viram uma
   escadinha torta no canto. */
.canto-acoes {
  position: fixed;
  right: 20px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  z-index: 5;
}

.botao-canto {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  border: 2px solid rgba(255, 255, 255, .34);
  border-radius: 14px;
  background: rgba(3, 2, 18, .62);
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  transition: transform .08s ease, border-color .18s ease, background .18s ease;
}
.botao-canto:active { transform: scale(.96); }
.botao-canto:hover { border-color: var(--verde); background: rgba(3, 2, 18, .8); }

/* Dourado no do assinante: lê como benefício de plano sem brigar com o verde da
   marca, e separa os dois atalhos num relance. */
.botao-canto-assinante { border-color: rgba(240, 200, 90, .55); }
.botao-canto-assinante:hover { border-color: #f0c85a; background: rgba(3, 2, 18, .8); }

.canto-icone { font-size: 24px; line-height: 1; }
.canto-textos { display: flex; flex-direction: column; gap: 1px; }
.canto-textos strong {
  font-family: "Anton", sans-serif;
  font-size: 19px;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.15;
}
.canto-textos small { font-size: 13px; opacity: .88; }

/* ── PIN da equipe ────────────────────────────────────────────────────────── */
/* Bolinhas em vez de dígitos: o totem fica na recepção, com gente em volta. */
.bolinhas-pin { display: flex; gap: 22px; justify-content: center; padding: 1.4vh 0; }
.bolinha {
  width: min(4.4vh, 40px);
  height: min(4.4vh, 40px);
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .3);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.bolinha.cheia { background: var(--verde); border-color: var(--verde); transform: scale(1.08); }

.bolinhas-pin.erro .bolinha { border-color: var(--erro); background: none; }
.bolinhas-pin.erro { animation: tremer .34s ease-in-out; }
@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-11px); }
  40% { transform: translateX(11px); }
  60% { transform: translateX(-7px); }
  80% { transform: translateX(7px); }
}

/* ── Escolha do barbeiro ──────────────────────────────────────────────────── */
.grade-equipe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  max-height: 62vh;
  overflow-y: auto;
  padding: 2px;
  align-items: start;
}
@media (max-width: 1100px) { .grade-equipe { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grade-equipe { grid-template-columns: 1fr; } }

.card-equipe {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  padding: 16px;
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, border-color .18s ease;
}
.card-equipe:active { transform: scale(.97); }
.card-equipe:hover { border-color: var(--verde); }
/* Quem não tem nada hoje continua na lista (a API não distingue folga de dia
   finalizado), só recuado: o barbeiro do dia acha o próprio nome primeiro. */
.card-equipe.ausente { opacity: .45; }

.equipe-estado { font-size: min(2vh, 16px); opacity: .72; margin-top: 4px; line-height: 1.25; }

/* ── Agenda do barbeiro ───────────────────────────────────────────────────── */
/* Duas colunas: à esquerda o que ele quer saber em 1 segundo (agora / a seguir),
   à direita o dia inteiro para conferir com calma. */
#tela-agenda { justify-content: flex-start; gap: 1.4vh; padding-top: 2vh; }

.agenda-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding-bottom: 1.4vh;
  border-bottom: 2px solid rgba(255, 255, 255, .14);
}
.agenda-quem { display: flex; align-items: center; gap: 14px; text-align: left; }
.agenda-dia { display: flex; flex-direction: column; align-items: flex-end; }
.agenda-dia strong {
  font-family: "Anton", sans-serif;
  font-size: min(5vh, 46px);
  color: var(--verde);
  line-height: 1;
}
.agenda-dia span { font-size: min(2.1vh, 17px); opacity: .7; text-transform: capitalize; }

.agenda-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  width: 100%;
  align-items: start;
}
@media (max-width: 900px) { .agenda-corpo { grid-template-columns: 1fr; } }

.agenda-lado { display: flex; flex-direction: column; gap: 12px; }

.painel-estado {
  border-radius: 18px;
  padding: 2vh 22px;
  text-align: left;
  border: 2px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
}
/* Verde = livre, e não "tudo certo": num relance o barbeiro lê a cor antes do
   texto, e o que ele procura é justamente onde tem espaço. */
.painel-estado.livre { border-color: rgba(178, 223, 32, .55); background: rgba(178, 223, 32, .1); }
.painel-estado.ocupado { border-color: rgba(255, 255, 255, .22); }

.painel-rotulo {
  font-size: min(1.9vh, 15px);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .6;
  font-weight: 700;
}
.painel-forte {
  font-family: "Anton", sans-serif;
  font-size: min(2.8vw, 4vh, 38px);
  line-height: 1.1;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.painel-estado.livre .painel-forte { color: var(--verde); }
.painel-fraco { font-size: min(2.2vh, 18px); opacity: .75; margin-top: 4px; line-height: 1.3; }

.agenda-resumo {
  font-size: min(2vh, 16px);
  opacity: .65;
  text-align: left;
  padding: 0 4px;
}

.agenda-tempo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.agenda-tempo-titulo {
  font-size: min(1.9vh, 15px);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .6;
  font-weight: 700;
  text-align: left;
}

.lista-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Alta o bastante para o dia caber quase inteiro sem rolar: o barbeiro quer
     bater o olho e ver o resto do dia, não navegar por uma janelinha. */
  max-height: 58vh;
  overflow-y: auto;
  padding: 2px;
  -webkit-overflow-scrolling: touch;
}

/* Cada linha é um <div>: esta tela mostra a agenda, não marca horário. */
.slot {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .12);
  border-left-width: 6px;
  border-radius: 14px;
  padding: 1.3vh 16px;
  text-align: left;
  flex-shrink: 0;
}
.slot-hora {
  font-family: "Anton", sans-serif;
  font-size: min(3vh, 27px);
  min-width: 80px;
  flex-shrink: 0;
}
.slot-info { min-width: 0; flex: 1; }
.slot-cliente {
  font-size: min(2.5vh, 21px);
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.slot-servico { font-size: min(2vh, 16px); opacity: .65; margin-top: 2px; line-height: 1.2; }

.slot-livre { border-left-color: rgba(178, 223, 32, .7); background: rgba(178, 223, 32, .07); }
.slot-livre .slot-cliente { color: var(--verde); font-weight: 700; }
.slot-passou { opacity: .4; }
.slot-agora {
  border-color: var(--verde);
  border-left-color: var(--verde);
  background: rgba(178, 223, 32, .16);
}

.slot-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .6;
  flex-shrink: 0;
}
.slot-tag.tag-agora {
  background: var(--verde);
  color: var(--texto-destaque);
  opacity: 1;
  border-radius: 6px;
  padding: 3px 9px;
}

.slots-vazio { font-size: min(2.3vh, 19px); opacity: .7; padding: 3vh 4px; text-align: left; }

.agenda-rodape { display: flex; gap: 24px; align-items: center; justify-content: center; }

/* ── Atalhos de domínio de e-mail ─────────────────────────────────────────── */
/* Quase todo cliente usa um destes. Sem os atalhos, digitar "@gmail.com" letra
   por letra num totem é onde a pessoa desiste e chama a recepção. */
.atalhos-dominio { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.atalho-dominio {
  background: rgba(178, 223, 32, .16);
  border: 1px solid rgba(178, 223, 32, .5);
  color: var(--verde);
  border-radius: 10px;
  padding: 1.1vh 14px;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: min(2.1vh, 17px);
  cursor: pointer;
}
.atalho-dominio:active { transform: scale(.95); }

.visor-email { text-transform: lowercase; font-size: min(3.6vw, 4vh, 38px); }

/* ── Lista de adicionais ──────────────────────────────────────────────────── */
/* Preço em duas linhas: o "+ R$ 20" é a decisão (quanto custa dizer sim) e o
   total é a conferência. Trocado de lugar, o cliente lê o total e acha caro. */
/* Duas colunas: os 6 adicionais do Cabelo têm de caber SEM rolagem. Numa lista
   única eles não cabiam, e o que fica abaixo da dobra num totem simplesmente não
   é visto — o cliente decide com o que está na tela. */
.lista-adicionais {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-height: 56vh;
  overflow-y: auto;
  padding: 2px;
  align-items: start;
}
@media (max-width: 760px) { .lista-adicionais { grid-template-columns: 1fr; } }

.adicional {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  padding: 1.4vh 18px;
  min-height: 84px;
  color: var(--branco);
  font-family: "Archivo", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, border-color .18s ease;
}
.adicional:active { transform: scale(.98); }
.adicional:hover { border-color: var(--verde); }

.adicional-nome {
  font-family: "Anton", sans-serif;
  font-size: min(2vw, 2.7vh, 25px);
  line-height: 1.1;
  min-width: 0;
}
.adicional-precos { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.adicional-extra {
  font-family: "Anton", sans-serif;
  font-size: min(3vh, 27px);
  color: var(--verde);
  line-height: 1.1;
}
.adicional-total { font-size: min(1.9vh, 15px); opacity: .6; }

/* ── Contorno do texto branco ─────────────────────────────────────────────── */
/* O branco fino sobre o azul lavava e ficava apagado. O contorno PRETO separa a
   letra do fundo e ela acende. `paint-order: stroke fill` pinta o traço ATRÁS do
   preenchimento — sem isso o contorno come o miolo da letra e o texto embola,
   que é o defeito clássico de text-stroke. Como só metade da espessura sobra
   para fora do glifo, o traço aqui é o dobro do contorno que aparece.

   Só onde o texto é BRANCO: no cartão verde a letra já é escura, e contornar
   escuro com escuro só engrossaria o borrão.

   Espessura em `em`, nunca em px: as fontes daqui variam de 12px a 150px na
   mesma tela. Com px fixo, o que era sutil no "BEM-VINDO" fechava o miolo das
   letras em "QUERO AGENDAR UM HORÁRIO" e transformava "Sou barbeiro" em borrão.
   Anton é condensada e de miolo apertado, por isso leva menos traço que a
   Archivo do texto corrido. */
:root { --contorno: #05041c; }

/* Anton (títulos, números): condensada e de miolo apertado, leva menos traço. */
.cabecalho h1,
.titulo-sucesso,
.servico-nome,
.adicional-nome,
.item-nome,
.barbeiro-apelido,
.painel-forte,
.slot-hora,
.visor,
.cartao-escolha:not(.destaque) strong,
.canto-textos strong {
  paint-order: stroke fill;
  -webkit-text-stroke: .028em var(--contorno);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* Archivo (texto corrido): miolo aberto, aguenta mais traço. */
.cabecalho p,
.subtitulo-sucesso,
.item-detalhe,
.slot-cliente,
.cartao-linha strong,
.agenda-tempo-titulo,
.equipe-estado,
.cartao-escolha:not(.destaque) small,
.canto-textos small {
  paint-order: stroke fill;
  -webkit-text-stroke: .038em var(--contorno);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.tecla:not(.ok),
.tecla-letra,
.chip-hora {
  paint-order: stroke fill;
  -webkit-text-stroke: .03em var(--contorno);
}

/* ── Reforço das telas lidas de longe ─────────────────────────────────────── */
/* POR ÚLTIMO de propósito: sobrescreve as espessuras acima.
   Espessura em `em` mantém a proporção matemática, mas o olho não lê proporção.
   No "BEM-VINDO" (150px) .028em dá 4px e salta; no "QUERO AGENDAR UM HORÁRIO"
   (~33px) os mesmos .028em dão 0,9px e somem. Aqui a compensação é na mão,
   junto com uma sombra mais forte para a letra descolar do azul. */
#tela-inicio .cabecalho h1 { text-shadow: 0 5px 18px rgba(0, 0, 0, .5); }

#tela-inicio .cabecalho p,
#tela-servico .cabecalho h1,
#tela-servico .cabecalho p,
.cartao-escolha:not(.destaque) strong,
.cartao-escolha:not(.destaque) small,
.servico-nome,
.canto-textos strong,
.canto-textos small {
  -webkit-text-stroke-width: .06em;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .62);
}

/* ── Carregando ───────────────────────────────────────────────────────────── */
.carregador {
  width: 76px;
  height: 76px;
  border: 7px solid rgba(255, 255, 255, .18);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: girar .85s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.carregando-texto { font-size: 22px; opacity: .8; }

/* Totem em pé (tela alta e estreita): aproveita a altura sobrando. */
@media (min-aspect-ratio: 9/16) and (max-width: 900px) {
  .tela { gap: 2.4vh; }
}

/* ── Tela BAIXA: monitor deitado e janela de navegador ────────────────────────
   O totem foi desenhado para tela EM PÉ (1080x1920), onde quem manda são os
   TETOS em px destas regras — tecla de 132px, título de 76px — e sobra altura.
   Numa tela deitada acontece o contrário: os termos em vh encolhem tudo, mas os
   PISOS em px (`min-height: 84px` da tecla, 62px do "Voltar") não encolhem
   junto. A coluna fica mais alta que a janela e, como `.tela` centraliza com
   `overflow: hidden`, o que sobra é cortado METADE EM CIMA E METADE EMBAIXO —
   some o título e some o "Voltar".

   Medido em 14/08/2026, com o Chrome maximizado num 1920x1080 a 150% (janela de
   1280x585 CSS), antes desta regra:
     e-mail       52px cortados em cima e 52 embaixo (o título sumia inteiro)
     telefone     19 / 20
     nascimento   19 / 20
     PIN           7 / 7
   A mesma tela de e-mail já cortava 30px em qualquer monitor deitado (720p,
   768p), não só em janela pequena.

   Por isso o corte de tamanho entra por ALTURA da janela, e não por largura:
   abaixo de 1200px de altura tudo encolhe um pouco — letra, tecla e respiro —
   até a tela mais cheia caber inteira. O totem em pé passa longe deste limite e
   continua pixel por pixel como está. Conferido cabendo em 800x480, 1024x600,
   1280x585, 1280x672, 1280x720, 1366x768 e 768x1024.

   LUGAR NO ARQUIVO É DE PROPÓSITO: vem DEPOIS do bloco do totem em pé (senão o
   `gap` folgado de lá venceria num tablet deitado e a tela voltaria a cortar) e
   ANTES do bloco de 540px, que é o aperto final e tem de continuar com a última
   palavra.

   Mexeu em tamanho aqui em cima? Confira que a tela de e-mail (a mais cheia:
   cabeçalho + visor + atalhos de domínio + 5 filas de teclado + 2 botões) ainda
   cabe — é ela que estoura primeiro. */
@media (max-height: 1200px) {
  .tela { padding: 1.6vh 32px; gap: 1.1vh; }

  .cabecalho h1 { font-size: min(6.4vw, 6.2vh, 76px); }
  .cabecalho p { margin-top: .6vh; font-size: min(2.4vw, 2.5vh, 26px); }

  .visor { font-size: min(7vw, 5.6vh, 62px); padding: 1.1vh 24px; }
  .visor-texto { font-size: min(4.4vw, 4vh, 42px); min-height: 6.2vh; }
  .aviso { min-height: 2.4vh; }

  /* O piso da tecla cede junto: é ele que empurrava a coluna para fora. */
  .teclado { gap: 1.1vh; }
  .tecla { height: min(11.6vh, 132px); min-height: 56px; font-size: min(5vw, 5.2vh, 54px); }

  .teclado-letras { gap: 6px; }
  .linha-teclado { gap: 6px; }
  .tecla-letra { height: min(8.2vh, 92px); min-height: 46px; }

  .botao-grande { padding: 1.6vh 40px; font-size: min(3.4vw, 3.4vh, 36px); }
  .botao-texto { min-height: 48px; padding: 1vh 26px; font-size: min(2.2vh, 21px); }
}

/* Só em tela MUITO baixa some o subtítulo: ele é a instrução que ensina o
   cliente a usar o totem, então é o último a sair. */
@media (max-height: 540px) {
  .tela { gap: 1vh; padding: 1.5vh 24px; }
  .cabecalho p { display: none; }
  .aviso { min-height: 2.2vh; }
  /* Cinco filas de teclado de letra não cabem nem com o subtítulo fora: o piso
     da tecla tem de ceder mais um pouco, senão a tela de e-mail volta a cortar
     (16px de cada lado, medidos numa janela de 720x400). */
  .tecla-letra { height: min(7.4vh, 92px); min-height: 38px; }
}

/* ── Login da unidade ────────────────────────────────────────────────────────
   Tela de INSTALAÇÃO, não de atendimento: aparece uma vez por aparelho. Por isso
   não segue o visual de cartão grande do fluxo do cliente — é uma lista sóbria,
   para quem está configurando não confundir com uma escolha do cliente. */
.lista-unidades {
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  width: min(100%, 640px);
}

.unidade-opcao {
  font-family: "Archivo", sans-serif;
  font-size: min(2.6vh, 24px);
  font-weight: 600;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 16px;
  padding: 2.2vh 26px;
  cursor: pointer;
  transition: transform .07s ease, border-color .16s ease, background .16s ease;
}
.unidade-opcao:active { transform: scale(.98); }
.unidade-opcao[aria-pressed="true"] {
  border-color: var(--verde);
  background: rgba(178, 223, 32, .16);
}

/* Ir para outra loja da rede.

   Deliberadamente MENOS chamativo que a escolha da unidade: quem instala o
   aparelho na loja certa (o caso comum) não pode confundir isto com o caminho
   normal. É a saída para o dia em que um totem cobre a loja vizinha. */
.outras-lojas {
  width: min(100%, 640px);
  margin-top: 2.4vh;
  padding-top: 2.4vh;
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
}
.outras-lojas p {
  font-size: min(2vh, 17px);
  opacity: .7;
  margin: 0 0 1.2vh;
}
.lista-lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.loja-opcao {
  font-family: "Archivo", sans-serif;
  font-size: min(2.1vh, 19px);
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  padding: 1.4vh 20px;
  cursor: pointer;
  transition: transform .07s ease, border-color .16s ease, background .16s ease;
}
.loja-opcao:active { transform: scale(.98); }
.loja-opcao:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); }

.campo-senha {
  display: flex;
  flex-direction: column;
  gap: .8vh;
  width: min(100%, 640px);
  text-align: left;
}
.campo-senha label { font-size: min(2.1vh, 18px); opacity: .78; }
.campo-senha input {
  font-family: "Archivo", sans-serif;
  font-size: min(2.8vh, 26px);
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  padding: 1.8vh 20px;
}
.campo-senha input:focus { outline: none; border-color: var(--verde); }

/* Até a sessão responder, nenhuma tela aparece: sem isto o totem já logado
   piscaria a tela de login (ou o contrário) a cada carregamento. */
body.iniciando .tela { display: none !important; }

/* ── Repouso (stand-by) ──────────────────────────────────────────────────────
   Cortina por cima de tudo. `object-fit: cover` porque o vídeo da barbearia
   raramente vai ter a proporção exata da tela do totem — melhor preencher e
   cortar as bordas do que deixar tarja preta. */
.repouso {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.repouso[hidden] { display: none; }

.repouso-midia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.repouso-midia[hidden] { display: none; }

/* Sem esta chamada, um totem em repouso parece um aparelho desligado ou quebrado
   e o cliente vai direto na recepção — que é justamente o que o totem evita. */
.repouso-chamada {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Anton", sans-serif;
  font-size: min(4.4vh, 40px);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 1.4vh 34px;
  border-radius: 999px;
  animation: respirar 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes respirar { 50% { opacity: .45; } }

/* Foto de fundo da unidade: entra atrás de tudo, com um véu escuro por cima para
   o texto continuar legível. Sem o véu, foto clara apaga a tela inteira. */
body.com-fundo::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--fundo-imagem);
  background-size: cover;
  background-position: center;
  z-index: -2;
}
body.com-fundo::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: -1;
}
body.com-fundo { background: #000; }

/* Logo da unidade na tela inicial. */
.logo-unidade {
  max-height: min(14vh, 120px);
  max-width: min(72vw, 460px);
  object-fit: contain;
  margin-bottom: 1vh;
}

/* ── Reconhecimento facial (módulo pago) ──────────────────────────────────── */
/* O consentimento é o miúdo da pergunta: pequeno, mas legível de pé. */
.rosto-aceite {
  max-width: min(100%, 720px);
  font-size: min(2.1vh, 18px);
  line-height: 1.4;
  opacity: .78;
}

/* Como foi o cadastro, no cartão do horário logo depois. */
.rosto-nota {
  max-width: min(100%, 620px);
  font-weight: 700;
  font-size: min(2.3vh, 19px);
  color: var(--verde);
}

/* A câmera: vídeo espelhado SÓ na exibição (a pessoa espera ver um espelho) e
   um oval para dizer onde pôr o rosto. O que vai para o reconhecimento é o quadro
   original, sem espelho (public/rosto.js). */
.camera-moldura {
  position: relative;
  width: min(80vw, 52vh, 520px);
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  border: 3px solid rgba(255, 255, 255, .2);
}
.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.camera-oval {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 78%;
  transform: translate(-50%, -50%);
  border: 4px dashed var(--verde);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.camera-progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: rgba(255, 255, 255, .15);
}
.camera-progresso-barra {
  width: 0;
  height: 100%;
  background: var(--verde);
  transition: width .2s ease;
}
.camera-status {
  min-height: 3.4vh;
  font-weight: 700;
  font-size: min(2.8vh, 24px);
}

/* "Reconhecemos você": fora das telas, presa no alto, acima de tudo. */
.faixa-rosto {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(100% - 32px);
  padding: 10px 12px 10px 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  border: 2px solid var(--verde);
  font-size: min(2.4vh, 20px);
}
.faixa-rosto strong { color: var(--verde); }
.faixa-rosto-botao {
  min-height: 52px;
  padding: 0 20px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: transparent;
  color: var(--branco);
  font: 700 min(2.2vh, 18px) "Archivo", sans-serif;
  cursor: pointer;
}
.faixa-rosto-botao:active { transform: scale(.97); }