/* ==========================================================================
   Namos Barber — a folha inteira.
   Sem framework: o que esta tela faz cabe em CSS escrito à mão, e toda
   biblioteca aqui seria peso baixado por um cliente no 4G da rua.

   As armadilhas de telefone estão resolvidas em cima, onde se vê:
   `dvh` (o Safari não conta a barra de endereço), campo com 16px (abaixo
   disso o iPhone dá zoom ao focar e a tela não volta), `safe-area` (o notch
   e a barra inferior), e alvo de toque de 44px.
   ========================================================================== */

:root {
  --papel:#eff1f2; --superficie:#fff; --superficie-2:#e6e9eb; --realce:#fafbfb;
  --tinta:#13171a; --tinta-2:#38424a; --aco:#65717b; --linha:#d2d7db; --linha-forte:#b7bfc5;
  --latao:#8f6318; --latao-claro:#f3e7d0; --tonico:#186257; --tonico-claro:#ddede9;
  --risco:#9c3226; --risco-claro:#f7e4e1; --ok:#2a6e50; --atencao:#8a5a10;
  --sombra:0 1px 2px rgba(19,23,26,.06), 0 8px 24px -12px rgba(19,23,26,.18);
  --raio:10px; --toque:44px;
  --fonte:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:#0e1215; --superficie:#151a1e; --superficie-2:#1e252b; --realce:#1a2126;
    --tinta:#e8ecee; --tinta-2:#bac4cb; --aco:#8a98a2; --linha:#29323a; --linha-forte:#3a454e;
    --latao:#d3a257; --latao-claro:#2e2515; --tonico:#4fab99; --tonico-claro:#122b29;
    --risco:#d8796e; --risco-claro:#2c1a18; --ok:#5fb68c; --atencao:#c99a3e;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-tema="escuro"] {
  --papel:#0e1215; --superficie:#151a1e; --superficie-2:#1e252b; --realce:#1a2126;
  --tinta:#e8ecee; --tinta-2:#bac4cb; --aco:#8a98a2; --linha:#29323a; --linha-forte:#3a454e;
  --latao:#d3a257; --latao-claro:#2e2515; --tonico:#4fab99; --tonico-claro:#122b29;
  --risco:#d8796e; --risco-claro:#2c1a18; --ok:#5fb68c; --atencao:#c99a3e;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta-2);
  font-family: var(--fonte); font-size: 16px; line-height: 1.55;
  min-height: 100dvh;                    /* não `100vh`: o Safari corta */
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { color: var(--tinta); margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.5rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--latao); }
.num { font-variant-numeric: tabular-nums; }
.etiqueta {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--aco);
}
.silencio { color: var(--aco); font-size: .9rem; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- controles */
button, .botao {
  font: inherit; font-weight: 600; min-height: var(--toque);
  padding: .6rem 1.1rem; border-radius: var(--raio); border: 1px solid var(--linha-forte);
  background: var(--superficie); color: var(--tinta); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  text-decoration: none; transition: background .12s, border-color .12s;
}
button:hover, .botao:hover { background: var(--superficie-2); }
button:focus-visible, .botao:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--latao); outline-offset: 2px;
}
button[disabled] { opacity: .5; cursor: not-allowed; }
.botao--forte { background: var(--latao); border-color: var(--latao); color: #fff; }
.botao--forte:hover { filter: brightness(1.08); background: var(--latao); }
.botao--risco { color: var(--risco); border-color: var(--risco); background: transparent; }
.botao--mudo { border-color: transparent; background: transparent; color: var(--aco); }

label { display: block; font-size: .8rem; font-weight: 600; color: var(--tinta-2); margin-bottom: .3rem; }
input, select, textarea {
  font: inherit;
  font-size: 16px;            /* NUNCA menor: abaixo de 16px o iPhone dá zoom ao focar */
  width: 100%; min-height: var(--toque); padding: .55rem .7rem;
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta);
}

/*
 * CAIXINHA NÃO É CAMPO DE TEXTO.
 *
 * A regra acima vale para o que a pessoa DIGITA — e pegava também os
 * `type="checkbox"`, que herdavam largura de 100%, 44px de altura, borda e
 * padding. Toda caixa de seleção do sistema virava um retângulo do tamanho da
 * tela ao lado do próprio rótulo. Apareceu primeiro na escolha de serviços do
 * "Marcar horário", que é onde há três delas lado a lado, mas estava em todas.
 *
 * O alvo de toque continua existindo: ele mora no RÓTULO em volta
 * (`.escolha__item`, `.caixinha`), que é clicável e tem a altura mínima. O
 * quadradinho volta a ser um quadradinho.
 */
input[type="checkbox"], input[type="radio"] {
  width: 1.15rem; height: 1.15rem; min-height: 0; flex: none;
  padding: 0; border: 0; border-radius: 0; background: none;
  accent-color: var(--latao); cursor: pointer;
}

/* O mesmo motivo: a barra de zoom do recorte não é caixa de texto. */
input[type="range"] {
  min-height: 0; padding: 0; border: 0; background: none;
  accent-color: var(--latao);
}
.campo + .campo { margin-top: .9rem; }
.linha-campos { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .linha-campos { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ cartões */
.cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1rem;
}
.pilha { display: flex; flex-direction: column; gap: .75rem; }
.envelope { max-width: 1240px; margin-inline: auto; padding: 1rem; }
@media (min-width: 900px) { .envelope { padding: 1.5rem 2rem; } }

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap;
}
.chip--ok { background: var(--tonico-claro); color: var(--tonico); }
.chip--atencao { background: var(--latao-claro); color: var(--latao); }
.chip--risco { background: var(--risco-claro); color: var(--risco); }

/* ------------------------------------------------------------------ avisos */
.aviso { padding: .7rem .9rem; border-radius: var(--raio); font-size: .92rem; border: 1px solid; }
.aviso--erro { background: var(--risco-claro); border-color: var(--risco); color: var(--risco); }
.aviso--ok { background: var(--tonico-claro); border-color: var(--tonico); color: var(--tonico); }

/* ===================================================== canal do cliente ====
   A vitrine. É o que o cliente final vê antes de qualquer coisa, e ela tem de
   parecer a barbearia — não um formulário. Fundo escuro sempre, nos dois temas:
   barbearia é lugar de luz baixa e madeira, e a tela puxa disso.
   ========================================================================== */
.canal {
  --c-fundo:#101418; --c-alto:#171d23; --c-linha:#232c34; --c-linha-forte:#33404b;
  --c-tinta:#f2f5f6; --c-apoio:#9aa8b3; --c-latao:#d3a257; --c-latao-fundo:#2a2214;
  --c-tonico:#4fab99;
  background: var(--c-fundo); color: var(--c-apoio);
  min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom);
}
.canal h1, .canal h2, .canal h3 { color: var(--c-tinta); }
.canal__dentro { max-width: 620px; margin-inline: auto; padding: 0 1rem 7.5rem; }

/* ------------------------------------------------------------------- capa */
.capa-canal {
  position: relative; padding: 2.5rem 1rem 1.75rem; text-align: center; overflow: hidden;
}
.capa-canal::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(211,162,87,.18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(211,162,87,.045) 0 3px, transparent 3px 9px);
  pointer-events: none;
}
.capa-canal > * { position: relative; }
.poste {
  width: 8px; height: 52px; border-radius: 5px; margin: 0 auto 1.1rem;
  background: repeating-linear-gradient(135deg, var(--c-latao) 0 6px, #e9edef 6px 12px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px -10px rgba(211,162,87,.7);
}
.capa-canal h1 {
  font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1;
}
.capa-canal .sub {
  margin-top: .45rem; color: var(--c-apoio); font-size: .96rem;
  display: inline-flex; align-items: center; gap: .4rem;
}
.capa-canal .sub b { color: var(--c-latao); font-weight: 600; }

/* ------------------------------------------------------------- o emblema
   O nome sozinho podia ser de qualquer software de agenda. O POSTE listrado
   e o simbolo mais antigo do oficio — e o unico que se reconhece a 20 px,
   sem legenda e em qualquer idioma. Aqui ele gira de verdade: a mesma
   ilusao da calcada, listras subindo sem fim num cilindro que so roda.
   Tudo em CSS de proposito — simbolo que depende de arquivo e simbolo que
   um dia nao carrega. */
.emblema {
  --em-tam: 46px; --em-faixa: 5px; --em-latao: var(--latao, #d3a257);
  position: relative; flex: none; display: grid; place-items: center;
  width: var(--em-tam); height: var(--em-tam); border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #2c343e, #161c23 74%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.2);
}
.emblema--pequeno { --em-tam: 26px; --em-faixa: 3px; }
.emblema__poste {
  position: relative; overflow: hidden;
  width: 28%; height: 60%; border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5);
}
/* As listras moram num bloco MAIOR que a capsula e deslizam dentro dela.
   Animar `background-position` de um gradiente repetido escorrega uma fracao
   de pixel por volta, e a emenda aparece. */
.emblema__poste::before {
  content: ''; position: absolute; left: -60%; right: -60%; top: -120%; bottom: -120%;
  background: repeating-linear-gradient(-58deg,
    var(--em-latao) 0 var(--em-faixa), #eef1f3 var(--em-faixa) calc(var(--em-faixa) * 2));
  animation: emblema-girar 1.5s linear infinite;
}
/* O volume do cilindro: escuro nas duas bordas, claro no terco da esquerda. */
.emblema__poste::after {
  content: ''; position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,.24) 32%, rgba(0,0,0,.44));
}
/* Uma volta inteira de listra: duas faixas medidas na PERPENDICULAR,
   projetadas no eixo Y (cos 58° = 0,53 — dai o 3,774). Errar esta conta faz
   o poste dar um solavanco a cada ciclo, que e pior que nao girar. */
@keyframes emblema-girar { to { transform: translateY(calc(var(--em-faixa) * -3.774)); } }
@media (prefers-reduced-motion: reduce) { .emblema__poste::before { animation: none; } }

/* ---------------------------------------------------------------- passos */
.passos {
  display: flex; gap: .4rem; justify-content: center; align-items: center;
  margin: 0 auto 1.5rem; max-width: 420px;
}
.passos span {
  height: 3px; flex: 1; border-radius: 2px; background: var(--c-linha);
  transition: background .25s;
}
.passos span.feito { background: var(--c-latao); }
.passo-nome {
  text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-apoio); margin-bottom: .5rem;
}

/* ---------------------------------------------------------------- opções */
.canal h2 {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .2rem;
}
.canal .dica { color: var(--c-apoio); font-size: .92rem; margin-bottom: 1rem; }

.opcoes { display: grid; gap: .6rem; }
.opcao {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  min-height: 68px; padding: .85rem 1rem; text-align: left;
  background: var(--c-alto); border: 1px solid var(--c-linha); border-radius: 14px;
  color: var(--c-apoio); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s;
}
.opcao:hover { border-color: var(--c-linha-forte); background: #1b2229; }
.opcao:active { transform: scale(.995); }
.opcao:focus-visible { outline: 2px solid var(--c-latao); outline-offset: 2px; }
.opcao[aria-pressed="true"], .opcao.marcado {
  border-color: var(--c-latao); background: var(--c-latao-fundo);
}
.opcao__nome { color: var(--c-tinta); font-weight: 650; font-size: 1.02rem; display: block; }
.opcao__apoio { display: block; font-size: .85rem; color: var(--c-apoio); margin-top: .1rem; }
.opcao__direita { margin-left: auto; text-align: right; flex-shrink: 0; }
.opcao__preco { color: var(--c-tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.opcao__marca {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-left: auto;
  border: 2px solid var(--c-linha-forte); display: grid; place-items: center;
  color: var(--c-fundo); font-weight: 900; font-size: .85rem;
}
.opcao.marcado .opcao__marca { background: var(--c-latao); border-color: var(--c-latao); }
.opcao.marcado .opcao__marca::after { content: "✓"; }

/* avatar do barbeiro: inicial na cor dele, que é a mesma da agenda por dentro */
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  color: #0e1215; letter-spacing: -.02em;
}

/* ------------------------------------------------------------------- dias */
/*
 * A PASTILHA DE DIA DO CANAL — e ela mora DENTRO de `.dias`, sempre.
 *
 * O prefixo `.dias ` não é enfeite: `.dia` sozinho também é o nome do bloco do
 * dia no painel (a grade do modal, lá embaixo), e esta folha serve as duas
 * telas. Sem o prefixo, `width: 62px`, `align-items: center` e
 * `justify-content: center` vazavam para o painel — e como a regra de lá só
 * redeclara `display`, `flex-direction`, `gap`, `flex` e `min-height`, o que
 * ela NÃO redeclara continuava valendo. Resultado: a grade do dia inteira
 * espremida numa tira de 62px, centralizada, com a barra do dia empilhada em
 * coluna. O modal abria do tamanho certo e o conteúdo não.
 *
 * Duas telas, um nome, uma folha: ou o nome é único, ou o seletor diz onde
 * mora. Aqui diz — o canal já constrói `#dias .dia` e nada mais.
 */
.dias {
  display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem .6rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dias::-webkit-scrollbar { display: none; }
.dias .dia {
  flex: 0 0 auto; scroll-snap-align: start; width: 62px; min-height: 74px;
  border-radius: 12px; border: 1px solid var(--c-linha); background: var(--c-alto);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; cursor: pointer; font: inherit; color: var(--c-apoio); padding: .5rem 0;
}
.dias .dia__semana { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dias .dia__num { font-size: 1.3rem; font-weight: 800; color: var(--c-tinta); font-variant-numeric: tabular-nums; }
.dias .dia__mes { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.dias .dia.marcado { background: var(--c-latao); border-color: var(--c-latao); color: #2a2214; }
.dias .dia.marcado .dia__num { color: #1a1408; }
.dias .dia.vazio { opacity: .38; }

/* ---------------------------------------------------------------- horários */
.turno { margin-top: 1.1rem; }
.turno__nome {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-apoio); margin-bottom: .5rem;
}
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .5rem; }
.hora {
  min-height: 46px; border-radius: 10px; border: 1px solid var(--c-linha);
  background: var(--c-alto); color: var(--c-tinta); font: inherit; font-weight: 650;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.hora:hover { border-color: var(--c-linha-forte); }
.hora.marcado { background: var(--c-latao); border-color: var(--c-latao); color: #1a1408; }
.hora:focus-visible { outline: 2px solid var(--c-latao); outline-offset: 2px; }

/* ------------------------------------------------------------------ resumo */
.recibo {
  background: var(--c-alto); border: 1px solid var(--c-linha); border-radius: 16px;
  padding: 1.1rem 1.2rem; display: grid; gap: .75rem;
}
.recibo__linha { display: flex; gap: 1rem; align-items: baseline; }
.recibo__rotulo {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-apoio); width: 5.6rem; flex-shrink: 0;
}
.recibo__valor { color: var(--c-tinta); font-weight: 600; }
.recibo__corte { border-top: 1px dashed var(--c-linha-forte); margin: .2rem -1.2rem; }
.recibo__total { display: flex; justify-content: space-between; align-items: baseline; }
.recibo__total b { color: var(--c-latao); font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ campos */
.canal label { color: var(--c-apoio); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.canal input {
  background: var(--c-alto); border: 1px solid var(--c-linha); color: var(--c-tinta);
  border-radius: 12px; min-height: 52px; font-size: 16px;
}
.canal input::placeholder { color: #6a7782; }
.canal input:focus-visible { outline: 2px solid var(--c-latao); outline-offset: 1px; }

/* -------------------------------------------------------------- barra fixa */
.barra-acao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--c-fundo) 68%, rgba(16,20,24,0));
}
.barra-acao__dentro { max-width: 620px; margin-inline: auto; }
.canal .botao-grande {
  width: 100%; min-height: 54px; border-radius: 14px; border: 0;
  background: var(--c-latao); color: #191306; font-weight: 800; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer;
}
.canal .botao-grande:disabled { opacity: .45; }
.canal .botao-grande small { font-weight: 600; opacity: .72; }
.canal .botao-fantasma {
  width: 100%; min-height: 48px; border-radius: 14px; background: transparent;
  border: 1px solid var(--c-linha-forte); color: var(--c-apoio); font-weight: 650; cursor: pointer;
}

.voltar {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0;
  color: var(--c-apoio); font: inherit; font-size: .88rem; cursor: pointer;
  padding: .4rem .2rem; margin-bottom: .5rem; min-height: 40px;
}
.voltar:hover { color: var(--c-tinta); }

/* ------------------------------------------------------------- esqueletos */
/* Tela que diz "Carregando…" em texto parece travada; o esqueleto diz que
   algo está vindo e já mostra o formato do que vem. */
.esqueleto { display: grid; gap: .6rem; }
.esqueleto i {
  display: block; height: 68px; border-radius: 14px;
  background: linear-gradient(90deg, var(--c-alto) 25%, #1e262e 50%, var(--c-alto) 75%);
  background-size: 200% 100%; animation: brilho 1.3s linear infinite;
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto i { animation: none; } }

.canal .aviso--erro { background: #2c1a18; border-color: #7d4238; color: #f0b3a8; }
.canal .aviso--ok { background: #12241f; border-color: #2f6d5e; color: #8fd9c6; }

/* ------------------------------------------------------------------ pronto */
.pronto { text-align: center; padding: 1rem 0; }
.pronto__selo {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1rem;
  background: var(--c-latao-fundo); border: 2px solid var(--c-latao);
  display: grid; place-items: center; font-size: 2rem; color: var(--c-latao);
}

/* =========================================================== painel ======== */
/*
 * TRÊS ZONAS, e uma regra: a lateral é fixa, o conteúdo rola.
 *
 * A versão anterior punha a marca, a loja, o usuário e o Sair no cabeçalho e
 * as abas numa coluna de 210px — o conteúdo ficava num tubo de 1240px no meio
 * de uma tela de 1920, e o Luiz disse o que era: "tudo muito espremido na tela
 * central". Agora a lateral carrega identidade, navegação agrupada e o rodapé
 * de sessão (usuário, Sair, versão); o cabeçalho carrega só o nome da tela e a
 * ação da tela; e o conteúdo usa a largura que existe.
 */
.painel { display: grid; min-height: 100dvh; grid-template-rows: auto 1fr; }

.cabecalho {
  display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem;
  background: var(--superficie); border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 30;
  padding-top: calc(.7rem + env(safe-area-inset-top));
}
.cabecalho__titulo { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--tinta); }
.cabecalho .empurra { margin-left: auto; }
.cabecalho svg { width: 18px; height: 18px; }
.cabecalho button { gap: .45rem; }

.conteudo { padding: 1rem; overflow-x: hidden; }

/* --------------------------------------------------------------- lateral */
.lateral { display: contents; }               /* no telefone ela não existe */
.lateral__marca, .lateral__loja, .lateral__rodape, .navegacao__titulo { display: none; }

/* Barra do polegar: só o que se usa todo dia; o resto entra por "Mais". */
.rodape-telefone {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--superficie); border-top: 1px solid var(--linha);
}
.rodape-telefone button {
  flex: 1; flex-direction: column; gap: .15rem; min-height: 58px; border: 0; border-radius: 0;
  font-size: .68rem; font-weight: 700; color: var(--aco); background: transparent;
  padding-bottom: calc(.4rem + env(safe-area-inset-bottom));
}
.rodape-telefone button.ativo { color: var(--latao); box-shadow: inset 0 2px 0 var(--latao); }
.rodape-telefone svg { width: 20px; height: 20px; }
.navegacao { display: none; }
@media (max-width: 899px) { .conteudo { padding-bottom: 82px; } }
.so-computador { display: none; }

@media (min-width: 900px) {
  .so-telefone { display: none; }
  .so-computador { display: inline; }
  .rodape-telefone { display: none; }
  .painel { grid-template-columns: 248px 1fr; grid-template-rows: auto 1fr; }

  .lateral {
    display: flex; flex-direction: column; grid-row: 1 / -1;
    background: var(--superficie); border-right: 1px solid var(--linha);
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  }
  .lateral__marca {
    display: flex; align-items: center; gap: .55rem; padding: 1rem 1.1rem .8rem;
    font-weight: 800; color: var(--tinta); letter-spacing: -.01em;
  }
  .lateral__loja {
    display: flex; flex-direction: column; gap: .25rem; padding: 0 1.1rem .9rem;
    border-bottom: 1px solid var(--linha);
  }
  .lateral__loja > span {
    font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--aco); font-weight: 700;
  }
  .lateral__loja > b { color: var(--tinta); font-size: .9rem; }
  .lateral__loja select { width: 100%; min-height: 38px; }

  .navegacao { display: flex; flex-direction: column; padding: .7rem .6rem; gap: 1px; }
  .navegacao__titulo {
    display: block; padding: .8rem .5rem .3rem; font-size: .62rem; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase; color: var(--aco); opacity: .75;
  }
  .navegacao button {
    display: flex; align-items: center; gap: .6rem; justify-content: flex-start;
    border: 0; background: transparent; border-radius: 9px;
    font-size: .9rem; font-weight: 650; color: var(--tinta-2);
    min-height: 38px; padding: .4rem .55rem; text-align: left;
  }
  .navegacao button:hover { background: var(--realce); color: var(--tinta); }
  .navegacao button.ativo { color: var(--latao); background: var(--latao-claro); font-weight: 750; }
  .navegacao svg { width: 18px; height: 18px; flex: none; opacity: .85; }

  /* O rodapé GRUDA embaixo: `margin-top:auto` empurra, e o sticky segura
     quando a lista de abas é maior que a janela. */
  .lateral__rodape {
    display: grid; gap: .5rem; margin-top: auto; padding: .9rem 1.1rem;
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linha); background: var(--superficie);
    position: sticky; bottom: 0;
  }
  .conteudo { padding: 1.5rem 2rem 3rem; }
}
@media (min-width: 1500px) { .conteudo { padding: 1.75rem 2.75rem 3.5rem; } }

.usuario { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.usuario__inicial {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--latao-claro); color: var(--latao); font-weight: 800; font-size: .92rem;
}
.usuario__quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.usuario__quem b { font-size: .85rem; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario__quem small { font-size: .7rem; color: var(--aco); text-transform: capitalize; }
.sair { justify-content: flex-start; gap: .5rem; width: 100%; }
.sair svg { width: 16px; height: 16px; }
.versao { font-size: .68rem; color: var(--aco); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.menu-folha__titulo {
  display: block; margin: 1rem 0 .4rem; font-size: .64rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--aco);
}
.menu-folha__rodape {
  display: grid; gap: .6rem; margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px solid var(--linha);
}
.menu-folha .escolha button svg { width: 18px; height: 18px; flex: none; }
.menu-folha .escolha button.ativo { border-color: var(--latao); color: var(--latao); }

/* ------------------------------------------------------------- calendário */
.barra-mes { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.barra-mes h2 { font-size: 1.15rem; min-width: 10rem; }
.barra-mes .empurra { margin-left: auto; }

.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.mes .dia-semana {
  text-align: center; font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aco); padding: .2rem 0 .45rem;
}
.mes .vazio { visibility: hidden; }
.dia-celula {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  min-height: 74px; padding: .45rem .5rem; border-radius: 10px; font-weight: 600;
  border: 1px solid var(--linha); background: var(--superficie); position: relative;
}
.dia-celula:hover { border-color: var(--latao); }
.dia-celula .num { font-size: 1rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.dia-celula.hoje { border-color: var(--latao); box-shadow: inset 0 0 0 1px var(--latao); }
.dia-celula.hoje .num { color: var(--latao); font-weight: 800; }
.dia-celula.tem { background: var(--superficie); }
.dia-celula.fechado { background: var(--realce); opacity: .6; }
.dia-celula .conta { font-size: .72rem; font-weight: 800; color: var(--latao); }
.dia-celula .conta--mudo { color: var(--aco); font-weight: 600; }
/* A barra de ocupação é a informação do mês: número sozinho não diz se o dia
   estava cheio para AQUELA loja — dez horários numa loja de três cadeiras é
   uma coisa, numa de uma é outra. */
.dia-celula .peso {
  display: block; width: 100%; height: 4px; border-radius: 99px;
  background: var(--linha); margin-top: auto;
}
.dia-celula .peso i { display: block; height: 100%; border-radius: 99px; background: var(--latao); }
@media (min-width: 900px) { .dia-celula { min-height: 92px; } }

/* -------------------------------------------------------- o dia, em grade */
/*
 * A grade do dia é a tela mais parecida com o que a pessoa já sabe usar —
 * hora na lateral, uma coluna por profissional, o atendimento ocupando o
 * espaço da sua duração. É isso que mostra BURACO, e buraco é o que o dono
 * olha de manhã.
 *
 * TRÊS REGRAS DE ALTURA, e a terceira só apareceu depois que as duas
 * primeiras foram corrigidas:
 *
 * 1. A altura vem DO ESPAÇO QUE SOBRA, não de uma fatia da janela. Havia um
 *    `max-height: 62dvh` na grade somado ao cabeçalho do modal, à barra do dia
 *    e ao painel de detalhe — o total passava da tela e o modal estourava.
 *    Agora o modal tem altura fixa, e cada pedaço ou é `flex:1` ou tem
 *    `min-height:0`. Sem `min-height:0` um filho de flex/grid se recusa a
 *    encolher abaixo do conteúdo, e o estouro volta por outro caminho.
 *
 * 2. Cabeçalho e colunas são O MESMO GRID, dentro do MESMO rolador. Eram dois
 *    grids irmãos: a barra de rolagem comia largura de um e não do outro, e
 *    rolar de lado movia a grade sem mover os nomes.
 */
.dia { display: flex; flex-direction: column; gap: .7rem; flex: 1; min-height: 0; }
.dia__barra { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; flex: none; }
.dia__barra .empurra { margin-left: auto; }
.dia__corpo { display: grid; gap: .8rem; flex: 1; min-height: 0; }
/*
 * REGRA 3 — a LINHA do grid diz, por escrito, que tem teto.
 *
 * `flex: 1` + `min-height: 0` dá altura ao `.dia__corpo`; dentro dele a linha
 * seria implícita e `auto`. Pela letra da especificação, faixa `auto` se mede
 * pelo conteúdo (a grade inteira, 11h × 1,25px/min ≈ 825px) e
 * `align-content: stretch` só reparte SOBRA — nunca encolhe faixa maior que o
 * espaço; com `overflow: hidden` no corpo do modal, o excesso não viraria
 * rolagem, sumiria.
 *
 * MEDIDO: no Chrome isto não acontece — com a `.grade` sendo rolador
 * (`overflow: auto`) e `min-height: 0`, ele já prende a faixa na altura do
 * contêiner, e a folha se comporta igual com e sem esta linha. Ela fica como
 * garantia escrita, não como conserto de sintoma: é a forma canônica de dizer
 * "esta faixa não passa daqui", e não depende de o próximo motor ser tão
 * generoso quanto o Chrome.
 */
@media (min-width: 1100px) {
  .dia__corpo { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); }
}

.grade {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie);
}
.grade__tabela {
  display: grid;
  grid-template-columns: 54px repeat(var(--colunas), minmax(132px, 1fr));
  grid-auto-rows: min-content;
  min-width: min-content;      /* colunas estreitas rolam de lado em vez de espremer */
}
/* O canto e os nomes grudam no topo; o canto também gruda à esquerda, senão
   ele desaparece quando se rola de lado e a coluna de horas fica sem tampa. */
.grade__canto {
  position: sticky; top: 0; left: 0; z-index: 4;
  background: var(--superficie); border-bottom: 1px solid var(--linha-forte);
}
.grade__pessoa {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: .4rem; padding: .5rem .55rem;
  font-size: .78rem; font-weight: 700; color: var(--tinta);
  background: var(--superficie); border-bottom: 1px solid var(--linha-forte);
  border-left: 1px solid var(--linha); min-width: 0;
}
.grade__pessoa i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.grade__pessoa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grade__horas { position: sticky; left: 0; z-index: 2; background: var(--superficie); }
.grade__hora { position: relative; border-bottom: 1px solid var(--linha); }
.grade__hora:last-child { border-bottom: 0; }
.grade__hora span {
  position: absolute; top: -.55em; right: .4rem; font-size: .68rem;
  color: var(--aco); font-variant-numeric: tabular-nums;
  background: var(--superficie); padding: 0 .15rem;
}
.grade__coluna { position: relative; border-left: 1px solid var(--linha); min-width: 0; }
.grade__faixa { border-bottom: 1px solid var(--linha); }

.bloco {
  position: absolute; left: 3px; right: 3px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 0; overflow: hidden; text-align: left;
  padding: .2rem .35rem; border-radius: 6px; min-height: 0; border: 0;
  border-left: 3px solid var(--cor); background: var(--latao-claro); color: var(--tinta);
  font-size: .72rem; line-height: 1.22; cursor: pointer;
}
.bloco:hover { filter: brightness(.97); }
.bloco.escolhido { outline: 2px solid var(--latao); outline-offset: -1px; z-index: 2; }
.bloco__hora { font-weight: 800; font-variant-numeric: tabular-nums; }
.bloco__quem { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bloco__oque { color: var(--aco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* A situação é COR e é forma: só cor não sobrevive a quem não distingue cor. */
.bloco--atendido { background: var(--tonico-claro); }
.bloco--confirmado { background: var(--latao-claro); }
.bloco--marcado { background: var(--realce); }
.bloco--faltou { background: var(--risco-claro, #f7e4e0); }
.bloco--faltou .bloco__quem { text-decoration: line-through; }
.bloco--cancelado { background: repeating-linear-gradient(45deg, var(--realce) 0 6px, transparent 6px 12px); opacity: .6; }
.bloco--cancelado .bloco__quem { text-decoration: line-through; }

.agora { position: absolute; left: 0; right: 0; height: 2px; background: #c9705f; z-index: 2; pointer-events: none; }
.agora::before {
  content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: #c9705f;
}

.dia__detalhe { min-width: 0; min-height: 0; overflow-y: auto; }
.detalhe { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 1rem; }
.detalhe__topo { display: flex; align-items: center; gap: .5rem; justify-content: space-between; margin-bottom: .8rem; }
.detalhe__topo b { font-size: 1.02rem; color: var(--tinta); }
.acoes-linha { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.acoes-linha button { flex: 1 1 auto; min-height: 38px; font-size: .84rem; }

/* No telefone não há espaço para grade e detalhe lado a lado: a grade ganha
   uma altura própria e o detalhe vem abaixo, rolando com a folha. */
@media (max-width: 1099px) {
  .dia__corpo { display: block; overflow-y: auto; }
  .grade { height: 58dvh; }
  .dia__detalhe { overflow: visible; margin-top: .8rem; }
}

.vagas { display: flex; flex-wrap: wrap; gap: .4rem; }
.vaga { min-height: 40px; padding: .35rem .8rem; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ----------------------------------------------------------------- modal */
/* No telefone é FOLHA de tela cheia; no computador, diálogo centralizado.
   Diálogo centralizado em 390px é o erro que todo sistema de agenda comete. */
.modal { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100%; }
.modal::backdrop { background: rgba(10,14,17,.55); }
.modal__caixa {
  background: var(--superficie); display: flex; flex-direction: column;
  width: 100vw; height: 100dvh; border-radius: 0;
}
.modal__topo {
  display: flex; align-items: center; gap: .5rem; padding: 1rem; flex: none;
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: var(--superficie);
  padding-top: calc(1rem + env(safe-area-inset-top));
}
.modal__corpo { padding: 1rem; overflow-y: auto; flex: 1; }
@media (min-width: 720px) {
  .modal { margin: auto; }
  .modal__caixa {
    width: min(680px, 92vw); height: auto; max-height: 86dvh;
    border-radius: 14px; box-shadow: var(--sombra);
  }
  /* A grade do dia e a nota do fornecedor não cabem em 680px — e espremê-las
     é o defeito que esta tela existe para corrigir. */
  .modal--largo .modal__caixa { width: min(1480px, 96vw); max-height: 92dvh; }
  /*
   * Só a GRADE DO DIA recebe altura fixa e corpo em coluna: ela rola por
   * dentro, então precisa de um chão. Os outros modais largos (a nota do
   * fornecedor, a ficha do produto) continuam rolando inteiros e crescendo
   * com o conteúdo — dar altura fixa a eles deixaria meia tela vazia, e
   * `overflow:hidden` cortaria a nota abaixo da dobra.
   */
  .modal--largo .modal__caixa:has(.dia) { height: 92dvh; }
  .modal--largo .modal__corpo:has(> .dia) {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }
  .modal__topo { padding-top: 1rem; border-radius: 14px 14px 0 0; }
}

.horario-linha {
  display: grid; grid-template-columns: 4.2rem 4px 1fr auto; gap: .7rem;
  align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--linha);
}
.horario-linha:last-child { border-bottom: 0; }
.horario-linha .hora { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta); }
.horario-linha .barra { align-self: stretch; border-radius: 2px; }
.horario-linha .quem { font-weight: 600; color: var(--tinta); }
.horario-linha .oque { font-size: .85rem; color: var(--aco); }
.horario-linha[data-situacao="cancelado"] .quem { text-decoration: line-through; color: var(--aco); }

/* ----------------------------------------------------------------- tabela */
.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th {
  text-align: left; padding: .6rem .75rem; white-space: nowrap;
  border-bottom: 1px solid var(--linha-forte); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aco); position: sticky; top: 0; background: var(--superficie);
}
td { padding: .6rem .75rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--realce); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* No telefone a tabela vira cartão: 18 colunas em 390px não se lê. */
@media (max-width: 719px) {
  .lista-cartoes { display: grid; gap: .6rem; }
  .lista-cartoes .rolagem { display: none; }
}
@media (min-width: 720px) { .lista-cartoes .cartoes { display: none; } }

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.filtros input[type="search"] { flex: 1 1 200px; width: auto; }
.filtros .chip-botao { min-height: 38px; padding: .3rem .8rem; font-size: .85rem; }
.filtros .chip-botao.ativo { background: var(--latao); border-color: var(--latao); color: #fff; }

.colunas-menu { position: relative; }
.colunas-menu__lista {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 40;
  background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: .6rem;
  max-height: 60dvh; overflow-y: auto; min-width: 220px;
}
.colunas-menu__lista label {
  display: flex; align-items: center; gap: .5rem; font-weight: 500; margin: 0;
  padding: .35rem .2rem; min-height: 36px; cursor: pointer;
}
.colunas-menu__lista input { width: auto; min-height: 0; }

.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--aco); }
.carregando { text-align: center; padding: 2rem; color: var(--aco); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ----------------------------------------------------------- formulários */
/* Um sistema só para todo cadastro do painel: mesmo espaçamento, mesmo erro
   embaixo do campo, mesmo botão. Seis formulários improvisados seriam seis
   jeitos de errar. */
.form { display: grid; gap: 1rem; }
.form__grupo { display: grid; gap: .3rem; }
.form__grupo > label { margin: 0; }
.form__ajuda { font-size: .8rem; color: var(--aco); }
.form__erro { font-size: .82rem; color: var(--risco); font-weight: 600; }
.form__grupo.com-erro input, .form__grupo.com-erro select { border-color: var(--risco); }
.form__linha { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__linha { grid-template-columns: 1fr 1fr; } }
.form__linha--3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__linha--3 { grid-template-columns: 1fr 1fr 1fr; } }
.form__acoes { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .4rem; }
.form__acoes button { min-width: 8rem; }
.form fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem 1rem; margin: 0; }
.form legend { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aco); padding: 0 .4rem; }
.form .caixinha { display: flex; align-items: center; gap: .55rem; min-height: var(--toque); font-weight: 500; cursor: pointer; }
.form .caixinha input { width: 20px; height: 20px; min-height: 0; accent-color: var(--latao); }
.form input[type="color"] { width: 56px; height: var(--toque); padding: .2rem; cursor: pointer; }
.cor-amostras { display: flex; gap: .4rem; flex-wrap: wrap; }
.cor-amostras button { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid transparent; }
.cor-amostras button.marcado { border-color: var(--tinta); }

/* a grade da semana */
.semana { display: grid; gap: .5rem; }
.semana__dia {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: .6rem; align-items: center;
  padding: .55rem .7rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
}
.semana__dia.folga { opacity: .55; }
.semana__nome { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--tinta); }
.semana__nome input { width: 18px; height: 18px; min-height: 0; accent-color: var(--latao); }
.semana__turnos { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.semana__turno { display: inline-flex; align-items: center; gap: .35rem; }
.semana__turno input[type="time"] { width: 6.4rem; min-height: 40px; padding: .3rem .5rem; }
.semana__turno .ate { color: var(--aco); font-size: .85rem; }
.semana__copiar { font-size: .8rem; }
@media (max-width: 560px) {
  .semana__dia { grid-template-columns: 1fr; }
}

.cabecalho-tela { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabecalho-tela h1 { flex: 1; }
.linha-item { display: flex; gap: .8rem; align-items: center; }
.linha-item .acoes { display: flex; gap: .3rem; margin-left: auto; }
.linha-item .acoes button { min-height: 38px; padding: .3rem .7rem; font-size: .85rem; }

/* ================================================== a tela de entrada ======
   Acesso à ESQUERDA, maquete 3D à DIREITA — a folha de login do hub, trazida
   para cá. UMA composição, não dois widgets: nada de caixa em volta do
   formulário nem moldura em volta da cena; o que separa as metades é espaço,
   e o que as costura é uma atmosfera só, com a luz do LATÃO vazando da
   maquete para o lado do formulário. O canvas é transparente e a neblina do
   próprio 3D dissolve a base da maquete no escuro.

   900px é o mesmo LARGURA_CELULAR de cena/entrada.js — é o breakpoint que
   decide "é celular?" para o enquadramento. Mudar aqui é mudar lá.
   ========================================================================= */
.entrada {
  --acento: #d3a257; --acento-rgb: 211,162,87;
  --acento-quente: #e9b76b; --acento-quente-rgb: 233,183,107;
  --saida-cor: #eff1f2;
  --e-tinta: #f2efe6; --e-cinza: #8a96a4; --e-borda: #2b343e;
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; position: relative; overflow: hidden; color: var(--e-cinza);
  padding: 1.5rem clamp(0.75rem, 1.4vw, 1.5rem) 1.5rem clamp(1.5rem, 5vw, 5.5rem);
  background-image:
    radial-gradient(1150px 820px at 70% 46%, rgba(var(--acento-rgb), .11), transparent 68%),
    radial-gradient(620px 460px at 66% 60%, rgba(var(--acento-quente-rgb), .05), transparent 72%),
    radial-gradient(820px 620px at 4% 8%, rgba(120,150,190, .07), transparent 64%),
    linear-gradient(155deg, #1c2229 0%, #171c22 48%, #10151a 100%);
}
/* Dissolução do ato final: lava a tela NA COR DO DESTINO (o painel abre em
   `--papel` claro). Só no fim do mergulho — por isso o atraso. */
.entrada::after {
  content: ''; position: fixed; inset: 0; z-index: 50; background: var(--saida-cor);
  opacity: 0; pointer-events: none; transition: opacity 560ms ease-in;
}
.entrada[data-saindo="sim"]::after { opacity: 1; transition-delay: 600ms; }
.entrada__coluna { transition: opacity 460ms ease-out, transform 620ms cubic-bezier(.4,0,.2,1); }
.entrada[data-saindo="sim"] .entrada__coluna { opacity: 0; transform: translateX(-26px); }

.entrada__grade {
  width: 100%; max-width: 1620px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
}
.entrada__coluna { display: flex; flex-direction: column; gap: 3.1rem; width: 100%; }

.entrada .marca-texto { display: flex; align-items: center; gap: .75rem; }
.entrada .marca-texto span:last-child { font-weight: 800; font-size: 1.5rem; color: var(--e-tinta); letter-spacing: -.02em; }
.entrada .emblema {
  --em-latao: var(--acento);
  box-shadow: inset 0 0 0 1px rgba(var(--acento-rgb), .38), 0 12px 30px -16px rgba(var(--acento-rgb), .95);
}
.entrada__sub { margin-top: 1.35rem; color: var(--e-cinza); font-size: .8rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.entrada__tagline { margin-top: 1.05rem; font-size: 1.06rem; line-height: 1.45; color: var(--e-tinta); opacity: .84; max-width: 24ch; }

/* --- Acesso: sem caixa ------------------------------------------------- */
.acesso { width: 100%; --campo-fundo: #232a33; }
.acesso .campo { display: block; margin-bottom: 1.3rem; }
.acesso .campo:last-of-type { margin-bottom: 1.8rem; }
.campo__rotulo { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--e-cinza); margin-bottom: .4rem; }
.acesso .campo__entrada {
  width: 100%; min-height: 52px; padding: .6rem .9rem; font: inherit; font-size: 16px;
  background: var(--campo-fundo); border: 1px solid #38424e; border-radius: 12px; color: var(--e-tinta);
}
.acesso .campo__entrada:hover { border-color: #47535f; }
/* O foco acende no ÂMBAR QUENTE, e não no latão cheio: o latão fica onde é
   afirmação — o botão Entrar. */
.acesso .campo__entrada:focus {
  outline: none; background: #262e38; border-color: var(--acento-quente);
  box-shadow: 0 0 0 3px rgba(var(--acento-quente-rgb), .16);
}
.acesso .campo__entrada:-webkit-autofill,
.acesso .campo__entrada:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--campo-fundo) inset; -webkit-text-fill-color: var(--e-tinta);
}
.campo__senha { position: relative; display: block; }
.campo__senha .campo__entrada { padding-right: 5.2rem; }
.campo__revelar {
  position: absolute; inset-block: 0; right: 0; padding: 0 .9rem; border: 0; background: none;
  color: var(--e-cinza); font: inherit; font-size: .82rem; cursor: pointer; min-height: 0;
}
.campo__revelar:hover { color: #d6dce3; }
.campo__revelar:focus-visible { outline: 2px solid var(--acento-quente); outline-offset: -2px; border-radius: .35rem; }
.botao-entrar {
  width: 100%; min-height: 54px; border-radius: 13px; border: 0;
  background: var(--acento); color: #191306; font-weight: 800; font-size: 1.02rem; cursor: pointer;
}
.botao-entrar:hover { filter: brightness(1.06); }
.botao-entrar:disabled { opacity: .5; cursor: wait; }
.entrada .aviso--erro { background: #2c1a18; border-color: #7d4238; color: #f0b3a8; margin-bottom: 1rem; }

.entrada__rodape { margin-top: -.8rem; }
.assinatura-namos { font-size: .72rem; letter-spacing: .04em; color: #8a8f95; opacity: .9; }
.assinatura-namos .ponto { color: #f59e0b; }

/* --- A maquete: sem moldura -------------------------------------------- */
.cena {
  position: relative; width: 100%;
  /* 1,12:1 é a proporção do ENVELOPE da maquete girando, medida no hub —
     não gosto. Em outra proporção sobra ar num dos eixos. */
  aspect-ratio: 1.12 / 1; max-height: min(90vh, 920px);
  touch-action: pan-y; cursor: crosshair;
}
/* A AURA: a luz da maquete acendendo o ambiente. Atrás do canvas,
   transborda o painel e esmaece em direção ao formulário. */
.cena::before {
  content: ''; position: absolute; inset: -22% -14% -26% -30%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 52% 52%, rgba(var(--acento-rgb), .13), transparent 76%),
    radial-gradient(closest-side at 58% 60%, rgba(var(--acento-quente-rgb), .06), transparent 70%);
  filter: blur(18px);
}
.cena__tela { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.cena__rotulo, .cena__legenda, .cena__recurso { z-index: 2; }
.cena__rotulo {
  position: absolute; top: 0; left: 0;
  transform: translate(calc(var(--x, 0px) + 14px), calc(var(--y, 0px) - 10px));
  padding: .3rem .6rem; border: 1px solid rgba(var(--acento-rgb), .5); border-radius: 999px;
  background: rgba(18,23,28,.88); color: var(--e-tinta); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 140ms linear;
}
.cena__rotulo[data-visivel="sim"] { opacity: var(--forca, 1); }
.cena__legenda {
  position: absolute; right: .25rem; bottom: 1.4rem; margin: 0;
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .22em;
  color: var(--e-cinza); opacity: .75; pointer-events: none;
}
.cena__recurso {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.2rem; padding: 2rem; text-align: center;
}
.cena__recurso[hidden] { display: none; }
.cena__recurso svg { width: min(360px, 84%); height: auto; }
.cena__recurso p { color: var(--e-cinza); font-size: .8rem; max-width: 32ch; }

/* --- Retrato / celular: a maquete vai para CIMA do formulário ----------- */
@media (max-width: 900px) {
  .entrada { padding: 1.25rem 1.35rem 2.25rem; align-items: flex-start; justify-content: flex-start; }
  .entrada__grade { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; max-width: 520px; }
  .cena { order: -1; max-height: 38vh; }
  .entrada__coluna { gap: 1.7rem; }
  .entrada__sub { margin-top: .85rem; }
  .entrada__tagline { max-width: none; font-size: .98rem; }
  .cena__legenda { right: .5rem; bottom: 1.1rem; font-size: .58rem; letter-spacing: .16em; }
}
@media (max-height: 720px) and (min-width: 901px) {
  .entrada { padding-block: 1.25rem; } .cena { max-height: 82vh; } .entrada__coluna { gap: 1.7rem; }
}
/* Movimento reduzido: o ato final vira CORTE SIMPLES. */
@media (prefers-reduced-motion: reduce) {
  .cena__rotulo { transition: none; }
  .entrada__coluna { transition: none; }
  .entrada::after { transition: none; }
  .entrada[data-saindo="sim"]::after { opacity: 0; }
  .entrada[data-saindo="sim"] .entrada__coluna { opacity: 1; transform: none; }
}

/* ===================================================== números e tabelas === */
/*
 * A faixa de números responde "como foi o mês?" antes de qualquer gráfico.
 * Ela é um GRID que se preenche, não uma fileira fixa: com quatro cartões numa
 * tela larga sobrava buraco, e com seis numa estreita o último ficava sozinho
 * numa linha.
 */
.faixa-numeros {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.faixa-numeros--modal { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: .8rem; }
.numerao {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .85rem 1rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
}
.numerao b { font-size: 1.45rem; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.numerao b small { font-size: .8rem; font-weight: 600; color: var(--aco); }
.numerao small { font-size: .74rem; color: var(--aco); }
/* O destaque é UM. Dois destaques não destacam nada. */
.numerao--destaque { border-color: var(--latao); background: var(--latao-claro); }
.numerao--destaque b { color: var(--latao); }
.numerao--alerta { border-color: var(--risco); }
.numerao--largo { grid-column: span 2; }
@media (max-width: 719px) { .numerao--largo { grid-column: span 1; } }
.minilista { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; color: var(--tinta-2); }
.minilista b { font-size: .8rem; font-variant-numeric: tabular-nums; }

.positivo { color: var(--tonico); }
.negativo { color: var(--risco); }
.forte { font-weight: 750; color: var(--tinta); }
.mudo { color: var(--aco); }
.quebra { white-space: normal; }
.dir { text-align: right; }
.meio { text-anchor: middle; }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }

.tabela-rola {
  overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
}
.tabela { border-collapse: collapse; width: 100%; font-size: .875rem; }
.tabela th {
  text-align: left; padding: .55rem .8rem; white-space: nowrap;
  border-bottom: 1px solid var(--linha-forte); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aco); position: sticky; top: 0; background: var(--superficie); z-index: 1;
}
.tabela td { padding: .55rem .8rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--realce); }
.tabela td.num, .tabela th.dir, .tabela td.dir { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td small { color: var(--aco); font-size: .75rem; }
.tabela .linha--alerta td:first-child { box-shadow: inset 3px 0 0 var(--risco); }
.tabela--form td { padding: .35rem .5rem; }
.tabela--form input { min-height: 36px; width: 6.5rem; text-align: right; }
.tabela .linha--ativa { background: var(--latao-claro); }

.abas-linha { display: flex; gap: .3rem; flex-wrap: wrap; }
.abas-linha button {
  min-height: 34px; padding: .25rem .75rem; font-size: .82rem; font-weight: 650;
  border-radius: 999px;
}
.abas-linha button.ativo { background: var(--latao); border-color: var(--latao); color: #fff; }
.busca { max-width: 18rem; min-height: 38px; }

.grade-cartoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cartao--largo { grid-column: 1 / -1; }
.cartao__topo { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.cartao__topo h2 { font-size: 1rem; margin-right: auto; }

.ficha { display: grid; gap: .55rem; }
.ficha > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.ficha dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--aco); font-weight: 700; }
.ficha dd { color: var(--tinta); text-align: right; font-weight: 600; }

.semana-loja { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.semana-loja__dia {
  display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem;
  border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie);
}
.semana-loja__dia b { font-size: .8rem; color: var(--tinta); }
.semana-loja__dia span { font-size: .82rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.semana-loja__dia.fechado { background: var(--realce); }
.semana-loja__dia.fechado span { color: var(--aco); }
.semana__linha { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; }
.semana__dia { display: flex; align-items: center; gap: .4rem; min-width: 8.5rem; font-size: .88rem; }
.semana__linha input[type="time"] { min-height: 38px; width: auto; }
.semana .ate { color: var(--aco); font-size: .8rem; }

.acoes-modal { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.acoes-modal .botao--forte { margin-left: auto; }
.escolha--grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .4rem; }
.escolha__item { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem;
  border: 1px solid var(--linha); border-radius: 10px; font-size: .86rem; cursor: pointer; }
.escolha__item small { display: block; color: var(--aco); font-size: .74rem; }
.escolha__item:has(input:checked) { border-color: var(--latao); background: var(--latao-claro); }

/* ============================================================== gráficos === */
/*
 * SVG escrito à mão. Regra única: uma escala coloca marca, grade e rótulo, e o
 * viewBox já reserva a margem dos rótulos externos — rótulo que vaza da caixa
 * é o defeito clássico de SVG feito assim.
 */
.grade-graficos {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.cartao--grafico { display: flex; flex-direction: column; gap: .3rem; }
.cartao--grafico h3 { font-size: .95rem; color: var(--tinta); }
.cartao--grafico .silencio { margin-bottom: .5rem; }
.gr svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-eixo { fill: var(--aco); font-size: 11px; font-family: inherit; }
.g-eixo.dir { text-anchor: end; }
.g-centro { fill: var(--tinta); font-size: 17px; font-weight: 800; font-family: inherit; }
.g-linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-legenda {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .6rem;
  font-size: .76rem; color: var(--tinta-2);
}
.g-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.g-legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.g-legenda b { font-variant-numeric: tabular-nums; }
.g-legenda small { color: var(--aco); font-variant-numeric: tabular-nums; }
.g-legenda--coluna { flex-direction: column; gap: .3rem; }
.gr--rosca { display: grid; gap: .8rem; align-items: center; grid-template-columns: 180px 1fr; }
@media (max-width: 480px) { .gr--rosca { grid-template-columns: 1fr; } }

.ranking { display: grid; gap: .45rem; }
.ranking__linha { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: .6rem; align-items: center; font-size: .84rem; }
.ranking__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.ranking__barra { display: block; height: 7px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.ranking__barra i { display: block; height: 100%; border-radius: 99px; background: var(--latao); }
.ranking__valor { color: var(--tinta); font-weight: 700; }

.placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin: .4rem 0; }
.placar > div { display: flex; flex-direction: column; gap: .1rem; }
.placar b { font-size: 1.05rem; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }

.chip--mudo { background: transparent; border: 1px solid var(--linha-forte); color: var(--aco); }

/* O horário da loja, no canal do cliente: informação, não decoração — é o que
   separa "a agenda encheu" de "a loja está fechada". */
.canal .dica--horario {
  margin-top: .5rem; padding: .5rem .7rem; border-radius: 10px;
  background: var(--c-alto); border: 1px solid var(--c-linha);
  color: var(--c-apoio); font-size: .82rem; font-variant-numeric: tabular-nums;
}

/* ================================================================ mestre === */
/*
 * O guia. Duas telas: o índice (guias agrupados por assunto, com busca) e o
 * guia aberto (passos numerados). Cada cartão tem DOIS botões — ler e "me
 * mostra" — porque são duas intenções diferentes: entender antes, ou fazer
 * agora com o sistema conduzindo.
 */
.mestre { max-width: 1100px; }
.mestre__capa {
  display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
  border: 1px solid var(--latao); border-radius: var(--raio); background: var(--latao-claro);
}
.mestre__capa h2 { font-size: 1.45rem; color: var(--latao); letter-spacing: -.02em; margin-top: .2rem; }
.mestre__capa p { margin-top: .4rem; max-width: 62ch; color: var(--tinta-2); font-size: .92rem; line-height: 1.55; }
.mestre__selo {
  display: inline-block; padding: .05rem .4rem; border-radius: 6px; font-size: .78rem;
  border: 1px solid var(--latao); color: var(--latao); background: var(--superficie);
}
.mestre__conta { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.mestre__conta b { font-size: 2rem; font-weight: 800; color: var(--latao); font-variant-numeric: tabular-nums; }
.mestre__conta span { font-size: .75rem; color: var(--tinta-2); line-height: 1.3; }

.mestre__modulo { margin-top: 1.5rem; }
.mestre__modulo h3 {
  display: flex; align-items: baseline; gap: .6rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--aco); margin-bottom: .6rem;
}
.mestre__modulo h3 small { font-size: .72rem; letter-spacing: 0; text-transform: none; font-weight: 600; }

.guias { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.guia {
  display: flex; align-items: stretch; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); overflow: hidden;
}
.guia:hover { border-color: var(--latao); }
.guia.lido { border-left: 3px solid var(--tonico); }
.guia__abrir {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  text-align: left; padding: .8rem .9rem; border: 0; background: transparent; min-height: 0; font: inherit;
}
.guia__abrir b { font-size: .95rem; color: var(--tinta); }
.guia__abrir > span { font-size: .84rem; color: var(--tinta-2); line-height: 1.45; white-space: normal; }
.guia__pe { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .2rem; }
/* O "me mostra" é o botão mais importante da tela e mora na borda direita do
   cartão: perto do título, longe do clique de leitura. */
.guia__mostrar {
  flex: none; width: 5.2rem; border: 0; border-left: 1px solid var(--linha);
  background: var(--realce); color: var(--latao); font-size: .78rem; font-weight: 750;
  border-radius: 0; min-height: 0; white-space: normal; line-height: 1.2; padding: .3rem;
}
.guia__mostrar:hover { background: var(--latao); color: #fff; }

.mestre__navegador { margin-bottom: .6rem; }
.mestre__guia { max-width: 74ch; }
.mestre__guia h2 { font-size: 1.55rem; letter-spacing: -.02em; color: var(--tinta); margin: .15rem 0 .4rem; }
.mestre__resumo { font-size: 1rem; color: var(--tinta-2); line-height: 1.55; }
.mestre__acoes { display: flex; gap: .5rem; margin: 1rem 0 1.2rem; flex-wrap: wrap; }
/* O "por quê" é o parágrafo mais importante: regra sem razão é regra ignorada
   na primeira semana. Por isso tem peso, e não vira nota de rodapé cinza. */
.mestre__porque {
  font-size: .95rem; line-height: 1.6; color: var(--tinta-2);
  border-left: 3px solid var(--latao); padding-left: .9rem; margin-bottom: 1.3rem;
}
.mestre__porque b { color: var(--latao); }

.mestre__passos { display: grid; gap: 1.3rem; list-style: none; counter-reset: passo; }
.mestre__passos > li { position: relative; padding-left: 2.6rem; counter-increment: passo; }
.mestre__passos > li::before {
  content: counter(passo); position: absolute; left: 0; top: -.1rem;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--latao); color: #fff; font-size: .8rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* O trilho ligando os passos: mostra que é uma sequência, não uma lista. */
.mestre__passos > li:not(:last-child)::after {
  content: ''; position: absolute; left: 12px; top: 30px; bottom: -1.3rem; width: 2px;
  background: var(--linha);
}
.mestre__faca { font-size: .97rem; line-height: 1.55; color: var(--tinta); }
.mestre__faca b { font-weight: 750; }
.mestre__espere {
  margin-top: .35rem; padding-left: .8rem; border-left: 2px solid var(--linha-forte);
  font-size: .87rem; line-height: 1.5; color: var(--aco);
}
.mestre__atencao {
  font-size: .9rem; line-height: 1.55; color: var(--tinta-2);
  padding: .8rem 1rem; border-radius: 10px; margin: 1.4rem 0;
  background: var(--risco-claro, #f7e4e0);
}
.mestre__atencao b { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--risco); margin-bottom: .25rem; }
.mestre__tela { margin: .7rem 0 0; }
.mestre__tela figcaption { margin-top: .45rem; font-size: .76rem; color: var(--aco); }
.mestre__vizinhos { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1.6rem;
  padding-top: 1rem; border-top: 1px solid var(--linha); }
.mestre__vizinhos button { font-size: .82rem; min-height: 34px; }

.glossario { display: grid; gap: .1rem; margin-top: 1rem; }
.glossario > div { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--linha); }
.glossario dt { font-weight: 750; color: var(--tinta); font-size: .92rem; }
.glossario dd { font-size: .88rem; color: var(--tinta-2); line-height: 1.5; }
@media (min-width: 760px) {
  .glossario > div { grid-template-columns: 210px minmax(0, 1fr); gap: 1rem; align-items: baseline; }
}

/* ------------------------------------------------------------------ tour */
/*
 * O guia acontecendo na tela de verdade: escurece tudo, menos o elemento.
 *
 * O buraco é feito com `box-shadow` gigante em vez de quatro divs — uma caixa
 * só para medir e posicionar, e o canto arredondado acompanha. E ele DEIXA
 * PASSAR O CLIQUE: a pessoa faz o passo com o tour aberto. Tour que bloqueia a
 * tela é demonstração, não ajuda.
 */
.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tour__buraco {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(10, 14, 17, .62), 0 0 0 2px var(--latao);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
/* Alvo não encontrado: escurece a tela inteira e o cartão explica, em vez de
   acender um retângulo no canto superior esquerdo. */
.tour__buraco[data-perdido] { top: 50%; left: 50%; width: 0; height: 0; box-shadow: 0 0 0 9999px rgba(10,14,17,.62); }
.tour__cartao {
  position: fixed; width: 340px; max-width: calc(100vw - 28px); pointer-events: auto;
  padding: .9rem 1rem; border-radius: 12px; background: var(--superficie);
  border: 1px solid var(--latao); box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
}
.tour__topo { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.tour__topo .etiqueta { flex: 1; }
.tour__x { border: 0; background: transparent; color: var(--aco); min-height: 28px; padding: 0 .3rem; }
.tour__faca { font-size: .95rem; line-height: 1.5; color: var(--tinta); }
.tour__faca b { font-weight: 750; }
.tour__espere { margin-top: .4rem; font-size: .84rem; line-height: 1.45; color: var(--aco); }
.tour__perdido { display: none; margin-top: .5rem; font-size: .84rem; line-height: 1.45; color: var(--risco); }
.tour:has(.tour__buraco[data-perdido]) .tour__perdido { display: block; }
.tour__pe { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; }
.tour__conta { flex: 1; font-size: .76rem; color: var(--aco); font-variant-numeric: tabular-nums; }
.tour__ant, .tour__prox { min-height: 34px; font-size: .84rem; }
body.com-tour { overflow: hidden; }

/* ------------------------------------------------------------- a maquete */
/*
 * A "tela" do guia: HTML de mentira com o CSS de verdade. Ela não precisa ser
 * fiel ao pixel — precisa ser fiel à FORMA: onde está a lateral, onde está a
 * ação, o que é tabela e o que é cartão. É isso que localiza a pessoa. E, por
 * ser desenhada, ela acompanha o tema e nunca fica velha como um print fica.
 */
.mq {
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  border: 1px solid var(--linha-forte); border-radius: 12px; overflow: hidden;
  background: var(--superficie); font-size: 11px; line-height: 1.35;
  box-shadow: var(--sombra);
}
.mq__lateral { background: var(--realce); border-right: 1px solid var(--linha); padding: .5rem .45rem; }
.mq__marca { display: flex; align-items: center; gap: .3rem; font-weight: 800; color: var(--tinta);
  font-size: 11px; padding: .2rem .3rem .5rem; }
.mq__marca i { width: 8px; height: 13px; border-radius: 4px; flex: none;
  background: repeating-linear-gradient(135deg, var(--latao) 0 3px, #eef1f3 3px 6px); }
.mq__grupo { display: block; font-size: 8px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--aco); padding: .45rem .3rem .15rem; }
.mq__aba { display: block; position: relative; padding: .2rem .35rem; border-radius: 5px;
  color: var(--tinta-2); }
.mq__aba.ativa { background: var(--latao-claro); color: var(--latao); font-weight: 750; }
.mq__rodape { display: flex; align-items: center; gap: .3rem; margin-top: .6rem; padding: .45rem .3rem 0;
  border-top: 1px solid var(--linha); color: var(--aco); font-size: 9px; }
.mq__rodape i { width: 14px; height: 14px; border-radius: 50%; background: var(--latao-claro); flex: none; }

.mq__tela { display: flex; flex-direction: column; min-width: 0; }
.mq__topo { padding: .45rem .6rem; border-bottom: 1px solid var(--linha); font-weight: 800; color: var(--tinta); }
.mq__corpo { padding: .6rem; display: grid; gap: .5rem; }

.mq__barra { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.mq__barra b { color: var(--tinta); }
.mq__empurra { margin-left: auto; }
.mq__pilula { padding: .1rem .4rem; border-radius: 99px; border: 1px solid var(--linha-forte); color: var(--aco); }
.mq__pilula.ativa { background: var(--latao); border-color: var(--latao); color: #fff; }
.mq__botao { position: relative; padding: .15rem .45rem; border-radius: 6px;
  border: 1px solid var(--linha-forte); color: var(--tinta-2); white-space: nowrap; }
.mq__botao.forte { background: var(--latao); border-color: var(--latao); color: #fff; }

.mq__numeros { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.mq__numero { position: relative; display: grid; gap: .05rem; padding: .35rem .45rem;
  border: 1px solid var(--linha); border-radius: 7px; }
.mq__numero span { font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--aco); }
.mq__numero b { color: var(--tinta); font-size: 12px; font-variant-numeric: tabular-nums; }
.mq__numero.forte { border-color: var(--latao); background: var(--latao-claro); }

.mq__tabela { border: 1px solid var(--linha); border-radius: 7px; overflow: hidden; }
.mq__tr { display: flex; position: relative; border-bottom: 1px solid var(--linha); }
.mq__tr:last-child { border-bottom: 0; }
.mq__tr span { flex: 1; padding: .28rem .45rem; color: var(--tinta-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq__tr span:first-child { flex: 1.6; color: var(--tinta); }
.mq__tr--cabeca span { font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--aco); }
.mq__tr.forte { background: var(--latao-claro); }

.mq__form { display: grid; gap: .3rem; }
.mq__form label { position: relative; display: grid; gap: .1rem; }
.mq__form label span { font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--aco); }
.mq__form label i { display: block; min-height: 20px; padding: .2rem .4rem; border-radius: 6px;
  border: 1px solid var(--linha-forte); background: var(--fundo); font-style: normal; color: var(--tinta); }
.mq__form label.forte i { border-color: var(--latao); box-shadow: 0 0 0 2px var(--latao-claro); }
.mq__enviar { justify-self: start; margin-top: .2rem; }

.mq__cartoes { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.mq__cartao { position: relative; display: grid; gap: .1rem; padding: .35rem .45rem;
  border: 1px solid var(--linha); border-radius: 7px; }
.mq__cartao b { color: var(--tinta); }
.mq__cartao span { color: var(--aco); }
.mq__cartao.forte { border-color: var(--latao); background: var(--latao-claro); }

.mq__agenda {
  display: grid; grid-template-columns: 22px repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: auto 118px; border: 1px solid var(--linha); border-radius: 7px; overflow: hidden;
}
.mq__canto { border-bottom: 1px solid var(--linha); }
.mq__cabeca-col { display: flex; align-items: center; gap: .2rem; padding: .2rem .3rem;
  border-bottom: 1px solid var(--linha); border-left: 1px solid var(--linha); color: var(--tinta);
  font-weight: 700; font-size: 9px; overflow: hidden; white-space: nowrap; }
.mq__cabeca-col i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.mq__horas { display: flex; flex-direction: column; justify-content: space-between; padding: .1rem .15rem;
  font-size: 8px; color: var(--aco); font-style: normal; }
.mq__horas i { font-style: normal; }
.mq__col { position: relative; border-left: 1px solid var(--linha);
  background: repeating-linear-gradient(to bottom, transparent 0 28px, var(--linha) 28px 29px); }
.mq__bloco { position: absolute; left: 2px; right: 2px; border-radius: 4px; padding: .1rem .2rem;
  font-style: normal; font-size: 8px; color: var(--tinta); overflow: hidden; white-space: nowrap;
  border-left: 2px solid var(--latao); background: var(--realce); }
.mq__bloco--atendido { background: var(--tonico-claro); }
.mq__bloco--confirmado { background: var(--latao-claro); }
.mq__bloco--faltou { background: var(--risco-claro, #f7e4e0); text-decoration: line-through; }
.mq__nota { font-size: 10px; color: var(--aco); line-height: 1.45; }

/* O pino liga a maquete ao passo escrito. Fica no canto do elemento a que ele
   se refere — sem cálculo de posição, que é o que quebra quando a caixa muda. */
.mq__pino {
  position: absolute; top: -7px; right: -7px; z-index: 2;
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--latao); color: #fff; font-size: 10px; font-weight: 800;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--superficie);
}
.mq__aba .mq__pino { top: -3px; right: 2px; }
.mq__bloco .mq__pino { top: -6px; right: -4px; width: 14px; height: 14px; font-size: 9px; }

/* ================================================================ início === */
/*
 * A ordem visual é a da decisão, não a do organograma: o que PEDE AÇÃO hoje em
 * cima, a situação embaixo. E bloco sem problema fica discreto — tela em que
 * tudo grita é tela em que nada é urgente.
 */
.inicio__capa {
  display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--linha);
}
.inicio__capa h2 { font-size: 1.5rem; letter-spacing: -.02em; color: var(--tinta); margin: .15rem 0 .3rem; }
.inicio__capa .silencio { max-width: 58ch; }
.inicio__capa .etiqueta::first-letter { text-transform: uppercase; }
.inicio__mes {
  display: flex; flex-direction: column; gap: .1rem; margin-left: auto; text-align: right;
  padding: .6rem 1rem; border-radius: var(--raio); background: var(--latao-claro);
}
.inicio__mes b { font-size: 1.5rem; font-weight: 800; color: var(--latao); font-variant-numeric: tabular-nums; }
.inicio__mes small { font-size: .74rem; }

.pendencias { display: grid; gap: .35rem; }
.pendencias .etiqueta { margin-bottom: .1rem; }
.pendencia {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  padding: .6rem .85rem; border-radius: 10px; min-height: 44px;
  border: 1px solid var(--linha); background: var(--superficie);
  font-size: .9rem; color: var(--tinta-2); white-space: normal; line-height: 1.4;
}
.pendencia b { color: var(--tinta); }
.pendencia i { margin-left: auto; font-style: normal; color: var(--aco); font-size: 1.1rem; }
.pendencia:hover { border-color: var(--latao); }
/* Grave é a que trava o dia; boa é oportunidade, não problema. Duas cores, e
   só duas: três níveis de urgência ninguém distingue no susto da manhã. */
.pendencia.grave { border-left: 3px solid var(--risco); background: var(--risco-claro, #f7e4e0); }
.pendencia.boa { border-left: 3px solid var(--tonico); background: var(--tonico-claro); }
.tudo-certo {
  padding: .8rem 1rem; border-radius: 10px; font-size: .9rem;
  border: 1px solid var(--tonico); background: var(--tonico-claro); color: var(--tonico);
}

.bloco-inicio .cartao__topo button { font-size: .8rem; min-height: 32px; }
.bloco-inicio .placar { margin: .2rem 0 .4rem; }
.proximos { display: grid; gap: .25rem; }
.proximo {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .4rem .5rem; border: 0; background: transparent; border-radius: 8px; min-height: 42px;
}
.proximo:hover { background: var(--realce); }
.proximo__hora { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta); font-size: .86rem; }
.proximo__barra { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.proximo__quem { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.proximo__quem b { font-size: .86rem; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proximo__quem small { font-size: .74rem; color: var(--aco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A marca da lateral virou botão — precisa parecer clicável sem parecer botão. */
.lateral__marca {
  border: 0; background: transparent; font: inherit; cursor: pointer; width: 100%;
  border-radius: 9px; text-align: left;
}
.lateral__marca:hover { background: var(--realce); }

/* ---------------------------------------------------------------- carteira */
/*
 * Dinheiro na tela obedece a duas regras que não são estéticas:
 *
 * 1. O SALDO É O MAIOR NÚMERO DA PÁGINA. Quem abre esta tela abre por uma
 *    pergunta só — "dá para disparar?" —, e ela se responde de longe.
 * 2. O PREÇO VEM ABERTO, E SÃO DUAS CONTAS. Da carteira sai só o serviço da
 *    Namos (5 centavos); a mensagem a Meta cobra direto no cartão do dono (4
 *    ou 32). Mostrar só o que passa por nós esconderia o número grande —
 *    marketing para mil clientes são R$ 320 no cartão dele contra R$ 50 aqui.
 */
.saldo {
  font-size: 2.6rem; font-weight: 800; line-height: 1.1; color: var(--tinta);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.saldo--baixo { color: #a8402c; }

.preco-linha {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem;
  padding: .55rem 0; border-bottom: 1px solid var(--linha);
}
.preco-linha:last-of-type { border-bottom: 0; }
.preco-linha__nome { font-weight: 600; color: var(--tinta); }
.preco-linha .silencio { grid-column: 1 / -1; font-size: .78rem; }

/* O copia-e-cola VEM ANTES do QR: quem está no celular não lê o próprio QR, e
   é no celular que a maioria paga. O código quebra em qualquer lugar porque é
   uma linha só de 200 e poucos caracteres — sem `break-all` ele estoura a
   caixa e leva a página junto. */
.pix { margin-top: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.pix__topo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pix__topo b { font-size: 1.2rem; color: var(--tinta); }
.pix__codigo {
  border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem;
  background: var(--realce); max-height: 8rem; overflow-y: auto;
}
.pix__codigo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem;
  word-break: break-all; color: var(--tinta); line-height: 1.5;
}
.pix__qr { width: 220px; height: 220px; align-self: center; image-rendering: pixelated; }

/* ---------------------------------------------------------------- escolha */
/*
 * Lista de escolhas em botão largo — usada para achar cliente, escolher o
 * público de um disparo, escolher a origem da lista.
 *
 * Botão largo e não `<select>` porque cada opção carrega um NÚMERO ("atrasados
 * na cadência · 38"), e esse número é metade da decisão: num select ele só
 * aparece depois de escolher, que é tarde.
 */
.escolha { display: flex; flex-direction: column; gap: .35rem; }
.escolha > button {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .6rem .7rem; min-height: 44px;
}
.escolha > button .principal { font-weight: 650; color: var(--tinta); }
.escolha > button .num { margin-left: auto; color: var(--aco); font-variant-numeric: tabular-nums; }
.escolha > button.marcado { border-color: var(--latao); background: var(--latao-claro); }
.escolha > button.marcado .num { color: var(--latao); font-weight: 700; }
/* Duas opções lado a lado quando a escolha é binária: empilhadas, elas parecem
   mais dois itens da lista de baixo — foi o que aconteceu com "da base" e
   "colar lista" encostados no seletor de filtro. */
.escolha--par { flex-direction: row; }
.escolha--par > button { justify-content: center; }

/* Ações de topo de tela: lado a lado, do tamanho do texto. `.acoes-linha` faz
   os botões esticarem para caber num painel estreito — aqui isso vira dois
   botões gigantes ocupando a largura da tela. */
.acoes-topo { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 1rem; }

/* ---------------------------------------------------------------- disparos */
/* O texto do disparo é lido em voz alta antes de ir para mil pessoas: o corpo
   da mensagem aparece como MENSAGEM, não como campo de formulário. */
.disparo-previa {
  border-left: 3px solid var(--latao); padding: .6rem .8rem;
  background: var(--realce); border-radius: 0 var(--raio) var(--raio) 0;
}

/* ------------------------------------------------------- a primeira loja */
/*
 * O assistente de primeiro acesso usa a mesma moldura da tela de entrada —
 * mesma marca, mesmo respiro —, só que SEM a maquete: aqui não há nada a
 * contemplar, há uma pergunta a responder. A coluna vai ao centro e ganha
 * largura de formulário, não de cartão de login.
 */
.entrada__grade--sozinha {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.entrada__grade--sozinha .entrada__coluna { gap: 2rem; }

/* O link nasce do nome enquanto se digita, e vê-lo nascer é o que explica, sem
   texto nenhum, o que a pessoa está criando. */
.link-loja { display: flex; align-items: stretch; }
.link-loja__fixo {
  display: flex; align-items: center; padding: 0 .1rem 0 .7rem;
  border: 1px solid var(--linha); border-right: 0; border-radius: var(--raio) 0 0 var(--raio);
  background: var(--realce); color: var(--aco); font-size: .92rem; white-space: nowrap;
}
.link-loja .campo__entrada { border-radius: 0 var(--raio) var(--raio) 0; min-width: 0; }

/* ------------------------------------------------- passo a passo em lista */
/* Diferente de `.passos`, que é a barra de progresso do assistente. Aqui é a
   receita escrita: onde achar cada credencial da Meta, na ordem em que elas
   aparecem na tela de lá. */
.passo-a-passo { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.passo-a-passo li { line-height: 1.5; }

/* ------------------------------------------------------ a logo da barbearia */
/* Ao lado do nome, na entrada e na lateral. `contain` e nao `cover`: logo
   cortada e logo errada, e o dono percebe na hora. A altura manda, a largura
   acompanha — logotipo horizontal e vertical convivem sem cada um precisar de
   uma regra sua. */
.marca-logo {
  height: 2.4rem; width: auto; max-width: 11rem;
  object-fit: contain; object-position: left center;
  display: block; flex: none;
}
.marca-logo--pequena { height: 1.9rem; max-width: 8.5rem; }

/* ------------------------------------------- retrato de gente, e foto da loja */
.retrato {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover;
  background: var(--superficie-2); flex: none;
}
.retrato--grande { width: 5rem; height: 5rem; }
.foto-loja {
  width: 100%; max-height: 14rem; object-fit: cover;
  border-radius: var(--raio); display: block;
}

/* As cores sugeridas a partir da logo. Quadrados grandes o bastante para a
   pessoa julgar a cor, e nao uma bolinha que so diz "e meio marrom". */
.cores-sugeridas { display: flex; flex-wrap: wrap; gap: .5rem; }
.cor-sugerida {
  width: 3rem; height: 3rem; border-radius: var(--raio);
  border: 2px solid var(--linha); cursor: pointer; padding: 0;
}
.cor-sugerida[aria-pressed="true"] { border-color: var(--tinta); box-shadow: var(--sombra); }

/* ------------------------------------------------ a marca no telefone */
/*
 * `.so-telefone` mora dentro do media query de 900px, e `.marca-logo` foi
 * escrita depois dele: com a mesma especificidade, a última vence e a logo
 * apareceria também no computador — duplicada, ao lado da que já está na
 * lateral. Duas classes ganham de uma, e a regra fica ao lado do problema.
 */
@media (min-width: 900px) { .marca-logo.so-telefone { display: none; } }

/* No cabeçalho do telefone ela divide espaço com o título da aba: teto baixo
   para a logo, e o título encolhe com reticências em vez de empurrar. */
.cabecalho .marca-logo { height: 1.7rem; max-width: 6.5rem; }
.cabecalho__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------- a barra que não corta */
/*
 * Cinco botões cabem em qualquer telefone; o código já limita a isso. Estas
 * regras são a rede de segurança para o dia em que alguém acrescentar o sexto:
 * o texto encolhe com reticências, e a barra rola em vez de esconder o último
 * — que é sempre o "Mais", a saída para o resto do sistema.
 */
.rodape-telefone { overflow-x: auto; scrollbar-width: none; }
.rodape-telefone::-webkit-scrollbar { display: none; }
.rodape-telefone button { min-width: 0; }
.rodape-telefone button span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------- recortar a imagem */
/* O quadro mostra EXATAMENTE o que vai ser salvo. Redondo quando o resultado
   aparece redondo: mostrar quadrado e entregar círculo corta a orelha de quem
   centralizou pelo quadrado. */
.recorte .modal__caixa { max-width: 22rem; }
.recorte__quadro {
  position: relative; overflow: hidden; margin: .6rem auto;
  border-radius: var(--raio); background: var(--superficie-2);
  border: 1px solid var(--linha-forte);
  cursor: grab; touch-action: none;   /* o arrasto é nosso, não da página */
  user-select: none;
}
.recorte__quadro:active { cursor: grabbing; }
.recorte__quadro--redondo { border-radius: 50%; }
/* Xadrez para a logo: é como se vê que o fundo é transparente de verdade, e
   não branco — a diferença aparece sobre o cabeçalho escuro. */
.recorte__quadro--xadrez {
  background-image:
    linear-gradient(45deg, var(--linha) 25%, transparent 25%, transparent 75%, var(--linha) 75%),
    linear-gradient(45deg, var(--linha) 25%, transparent 25%, transparent 75%, var(--linha) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
.recorte__quadro img {
  position: absolute; top: 50%; left: 50%; transform-origin: center;
  max-width: none; pointer-events: none;
}
.recorte input[type="range"] { width: 100%; }

/* A foto do barbeiro no canal do cliente. `cover` porque o quadro é redondo e
   fixo: `contain` deixaria faixa dentro do círculo. O recorte já foi feito por
   quem subiu a imagem — aqui só se preenche. */
.avatar--foto { object-fit: cover; }

/* A logo da barbearia na capa do canal do cliente — no lugar do poste. Teto
   generoso porque aqui ela é a marca, não um ícone de cabeçalho; `contain`
   porque logo cortada é logo errada. */
.capa-canal__logo {
  display: block; margin: 0 auto 1.1rem;
  max-height: 84px; max-width: min(78%, 320px); width: auto;
  object-fit: contain;
}

/* ================================================= marcar horário ==========
   A tela do balcão: quase sempre no celular, quase sempre com o cliente
   esperando na frente. Tudo aqui é dimensionado para o POLEGAR — 48px é o alvo
   confortável, acima dos 44 do mínimo, porque quem usa está de pé e com pressa.
   ========================================================================= */
.marcar { display: grid; gap: 1.1rem; }
.marcar__bloco { display: grid; gap: .45rem; }

/* Quem atende se escolhe pelo ROSTO. Um <select> com três nomes parecidos não
   ajuda quem começou ontem — e a foto já está cadastrada. Rola na horizontal
   para caber seis barbeiros num celular sem empurrar o resto da tela. */
.fila-profs {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem;
  scrollbar-width: none; scroll-snap-type: x proximate;
}
.fila-profs::-webkit-scrollbar { display: none; }
.prof-cartao {
  flex: none; scroll-snap-align: start; width: 5.2rem; min-height: auto;
  display: grid; justify-items: center; gap: .35rem; padding: .6rem .3rem;
  border: 2px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); font-size: .74rem; font-weight: 700;
  line-height: 1.15; text-align: center; color: var(--tinta-2);
}
.prof-cartao span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.prof-cartao .retrato { width: 3rem; height: 3rem; }
.prof-cartao.ativo { border-color: var(--latao); background: var(--latao-claro); color: var(--tinta); }

/*
 * Serviço: cartão COMPACTO, e a compactação tem limite — o alvo de toque fica.
 *
 * 9,5rem é escolhido para caber DOIS por linha num celular de 360px e três ou
 * quatro no cartão de 680px do computador. Com uma coluna só, três serviços já
 * empurravam o dia e os horários para fora da tela, e quem marca precisa ver os
 * três ao mesmo tempo para escolher.
 *
 * A altura mínima continua sendo `--toque`: o que encolheu foi a moldura, não
 * o alvo. O rótulo inteiro é clicável, então o dedo acerta o cartão, não o
 * quadradinho.
 */
#m-servicos { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .4rem; }
#m-servicos .escolha__item {
  min-height: var(--toque); padding: .45rem .55rem; gap: .45rem;
  font-size: .86rem; line-height: 1.25; align-items: center;
}
#m-servicos .escolha__item small { font-size: .73rem; margin-top: .05rem; }
#m-servicos .escolha__item span { min-width: 0; }

/*
 * OS HORÁRIOS, agrupados por período e por hora.
 *
 * Em lista corrida, 34 vagas são 34 retângulos iguais e o olho não tem onde se
 * apoiar. Com a hora como rótulo da linha, achar "por volta das 15h" é pousar o
 * olho numa linha — e o período elimina dois terços da lista de cara.
 *
 * O chip mostra só os MINUTOS: a hora já está à esquerda, e repeti-la em cada
 * um era o ruído que fazia a lista parecer maior do que é.
 */
.periodo { display: grid; gap: .3rem; margin-top: .7rem; }
.periodo__nome {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--aco); display: flex; align-items: baseline; gap: .4rem;
}
.periodo__nome small { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .72rem; }

/*
 * Uma linha por hora, e o chip diz a hora INTEIRA.
 *
 * O rótulo "09h" à esquerda saiu: "9" de um lado e "15" do outro obriga quem lê
 * a montar o horário na cabeça, e ninguém lê um horário em duas partes. A
 * largura que ele ocupava voltou para os chips, que agora precisam dela.
 *
 * A linha continua sendo por hora — é ela que dá o ritmo da lista, mesmo sem
 * legenda: cada quebra é uma virada de hora.
 */
.hora-linha { display: flex; flex-wrap: wrap; gap: .35rem; }
.hora-linha .vaga {
  flex: none; min-width: 4.2rem; min-height: 48px; padding: .4rem .55rem;
  font-size: .95rem; font-variant-numeric: tabular-nums;
}

/* O calendário do mês num celular: sete colunas não cabem com 74px de altura.
   A célula encolhe e o número cresce — o que se procura ali é o DIA. */
@media (max-width: 560px) {
  .mes { gap: .2rem; }
  .dia-celula { min-height: 54px; padding: .3rem .25rem; font-size: .82rem; align-items: center; }
  .dia-celula .num { font-size: .95rem; }
  .prof-cartao { width: 4.6rem; }
  .hora-linha .vaga { min-width: 3.9rem; font-size: .9rem; padding: .4rem .35rem; }
}

/* A faixa do portal Namos (aviso de cobrança / modo restrito). Fica no topo do
   body, fora do #raiz, em fluxo normal: empurra o painel para baixo em vez de
   cobrir a barra dele. É estado excepcional; não precisa ser bonita, precisa
   ser lida. */
.namos-faixa { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; padding:.65rem .9rem; font-size:.92rem;
  background:var(--latao-claro); color:var(--tinta); border-bottom:1px solid var(--linha-forte); }
.namos-faixa--urgente, .namos-faixa--bloqueio { background:var(--risco-claro); color:var(--risco); border-color:var(--risco); }
.namos-faixa a { color:inherit; font-weight:600; margin-left:auto; text-decoration:underline; min-height:var(--toque); display:inline-flex; align-items:center; }

/* --- A faixa do teste e o aviso de assinatura ---------------------------
   Mesma faixa do portal (fora do #raiz, em fluxo), com o botão de assinar.
   Em teste é latão — informação; na véspera e vencida vira a cor do risco. */
.namos-faixa--teste { justify-content: flex-start; }
.namos-faixa__acao { margin-left: auto; min-height: var(--toque); padding: .35rem .9rem; border-radius: 9px;
  border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.namos-faixa__acao:hover { background: rgba(0,0,0,.06); }
.preco-assinatura { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-top: .6rem; }
.preco-assinatura > div { display: flex; flex-direction: column; gap: .15rem; }
.preco-assinatura b { font-size: 1.5rem; letter-spacing: -.02em; color: var(--tinta); }
.preco-assinatura span { color: var(--aco); font-size: .85rem; }
.escolha--formas > button { flex-direction: column; align-items: flex-start; gap: .15rem; }
.escolha--formas small { color: var(--aco); font-size: .78rem; white-space: normal; text-align: left; }
.acoes-modal a.botao--forte { display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  padding: .55rem 1rem; border-radius: 10px; min-height: var(--toque); }

/* --- Os primeiros passos, no Início ------------------------------------- */
.pp { margin-bottom: 1.2rem; }
.pp__topo { display: flex; align-items: flex-start; gap: 1rem; }
.pp__topo > div { flex: 1; }
.pp__topo h2 { font-size: 1.25rem; letter-spacing: -.02em; color: var(--tinta); margin: .1rem 0 .2rem; }
.pp__barra { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; margin: .8rem 0 .4rem; }
.pp__barra i { display: block; height: 100%; background: var(--latao); border-radius: 99px; transition: width 400ms ease-out; }
.pp__grupo { margin: .9rem 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aco); }
.pp__grupo small { font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: .4rem; }
.pp__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pp-passo { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--superficie); }
.pp-passo.feito { opacity: .62; border-color: transparent; background: transparent; }
.pp-passo__marca { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--linha-forte);
  display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: #fff; }
.pp-passo.feito .pp-passo__marca { background: var(--tonico); border-color: var(--tonico); }
.pp-passo__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pp-passo__texto b { color: var(--tinta); font-size: .92rem; }
.pp-passo__texto small { color: var(--aco); font-size: .8rem; line-height: 1.35; }
.pp-passo.feito .pp-passo__texto b { text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.pp-passo__ir { flex: 0 0 auto; white-space: nowrap; }
.pp__atalho { margin-bottom: .8rem; }

/* --- O hub: começar ----------------------------------------------------- */
.entrada__troca { margin-top: 1.1rem; font-size: .9rem; color: var(--e-cinza); }
.entrada__troca a, .entrada__link { color: var(--acento-quente); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.acesso--comecar .campo { margin-bottom: 1rem; }
.hub-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.endereco-vivo { display: flex; align-items: center; border-radius: 12px; border: 1px solid #38424e; background: var(--campo-fundo); }
.endereco-vivo .campo__entrada { border: 0; background: transparent; min-width: 0; flex: 1; }
.endereco-vivo .campo__entrada:focus { box-shadow: none; background: transparent; }
.endereco-vivo:focus-within { border-color: var(--acento-quente); box-shadow: 0 0 0 3px rgba(var(--acento-quente-rgb), .16); }
.endereco-vivo__fixo { padding: 0 .9rem 0 .2rem; color: var(--e-cinza); font-size: .95rem; white-space: nowrap; }
.endereco-vivo[data-estado="livre"] { border-color: #3f8f6f; }
.endereco-vivo[data-estado="ocupado"] { border-color: #a9463a; }
.endereco-vivo__estado { display: block; margin-top: .35rem; font-size: .8rem; color: var(--e-cinza); min-height: 1.2em; }
.endereco-vivo[data-estado="livre"] + .endereco-vivo__estado { color: #7fcf9f; }
.endereco-vivo[data-estado="ocupado"] + .endereco-vivo__estado { color: #f0b3a8; }
.senha-dica { margin: -.4rem 0 1.2rem; font-size: .8rem; color: var(--e-cinza); }
.entrada .aviso--ok { background: #16302a; border-color: #2d6b58; color: #9fdcc4; margin-bottom: 1rem; }
.entrada .escolha > button { background: var(--campo-fundo); border-color: #38424e; color: var(--e-tinta); }
.entrada .escolha > button .principal { color: var(--e-tinta); }
@media (max-width: 480px) { .hub-campos { grid-template-columns: 1fr; } }

/* --- A assinatura: fatura, arrependimento ------------------------------- */
.assinatura__fatura { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; margin-top: .6rem; }
.assinatura__fatura > div { display: flex; flex-direction: column; gap: .15rem; }
.assinatura__fatura b { font-size: 1.15rem; color: var(--tinta); }
.assinatura__fatura b.positivo { color: var(--tonico); }
.assinatura__fatura b.negativo { color: var(--risco); }
.assinatura__legal { margin-top: .9rem; font-size: .8rem; line-height: 1.45; }
.assinatura__cancelar { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--linha); }
.assinatura__cancelar p { font-size: .9rem; color: var(--tinta-2); margin-bottom: .5rem; line-height: 1.45; }
.acoes-modal > a:not(.botao--forte) { display: inline-flex; align-items: center; min-height: var(--toque); padding: .5rem .9rem;
  border: 1px solid var(--linha-forte); border-radius: 10px; color: var(--tinta); text-decoration: none; }
.botao--perigo { background: var(--risco); border-color: var(--risco); color: #fff; }
.botao--perigo:hover { filter: brightness(1.08); background: var(--risco); }
.lateral__rodape .assinatura-atalho { width: 100%; justify-content: flex-start; margin-bottom: .2rem; }
.assinatura__disparador { margin-top: .9rem; align-items: flex-start }
.assinatura__disparador small { margin-top: .2rem; line-height: 1.4 }