/* =========================================================================
   SUAVE — design do app (pedido do dono, 2026-07-31)
   -------------------------------------------------------------------------
   Substitui o "Turno 6" (editorial, canto vivo, tipografia gigante). É outra
   linguagem, não uma variação: cartão arredondado com sombra suave, pílulas,
   avatares e tipografia de tamanho normal. O Turno 6 fica preservado na
   branch `design/turno6`.

     superfície da página  #F2F2F2      cartão            #FFFFFF
     tinta                 #191919      tinta secundária  #393939
     apoio                 #6B6B6B      apoio claro       #9C9C9C
     fio                   #E0E0E0      fio claro         #EBEBEB

   Escala tipográfica pequena (11.5 / 12.5 / 15px carregam a interface) — o
   oposto do tema anterior, onde o peso vinha de números de 50-80px.
   ========================================================================= */

/* A fonte que o design foi desenhado para usar. Veio no pacote que o dono
   mandou; antes o app caía em Inter porque o arquivo não existia. Variável
   (300-900), então um arquivo só cobre todos os pesos. */
@font-face {
  font-family: 'Overused Grotesk';
  src: url('/fonts/OverusedGrotesk-VF.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}

/* A transição entre telas (deslizar) fica toda no bloco "TRANSIÇÃO ENTRE
   TELAS", mais abaixo neste arquivo — um lugar só, para não duplicar/conflitar
   as regras de `::view-transition`. */

/* O overscroll do app mostrava o fundo preto do WKWebView nas bordas. O fundo
   no <html> (styles.css) ja pinta esse vao; aqui o html das telas do painel
   recebe a cor CINZA da pagina. Valor LITERAL de propósito: --sv-bg e definido
   em .pg-sv (o body), e variavel CSS nao sobe para o html (pai). Manter igual
   ao --sv-bg (#f2f2f2). */
html:has(> body.pg-sv) {
  background: #f2f2f2;
}

.pg-sv {
  /* Página CINZA, cartão BRANCO.
     A referência faz o inverso (contêiner #FFFFFF e blocos rebaixados em
     #F2F2F2) — as duas leituras dão o mesmo contraste, e as telas deste app
     foram todas escritas para esta aqui. Cheguei a virar o token para branco
     por fidelidade à referência, mas aí os cartões brancos ficaram sobre
     fundo branco, separados só por uma sombra fraca demais (o dono viu e
     apontou). Trocar de volta é uma linha; converter bloco a bloco nas 11
     telas seria reescrever cor em 8 arquivos por ganho visual nenhum. */
  --sv-bg: #f2f2f2;
  --sv-surface: #ffffff;
  --sv-ink: #191919;
  --sv-ink-2: #393939;
  --sv-muted: #6b6b6b;
  --sv-muted-2: #9c9c9c;
  --sv-line: #e0e0e0;
  --sv-line-2: #ebebeb;
  /* Bloco REBAIXADO (campo, pílula inativa, ladrilho) — não é a cor da
     página: a referência usa contêiner branco em todas as telas. */
  --sv-bloco: #f2f2f2;

  --sv-sombra-cartao: 0 1px 2px rgba(25, 25, 25, 0.04), 0 4px 12px rgba(25, 25, 25, 0.05);
  --sv-sombra-leve: 0 1px 2px rgba(25, 25, 25, 0.06);
  --sv-sombra-alta: 0 10px 28px rgba(25, 25, 25, 0.22);
  --sv-sombra-barra: 0 1px 3px rgba(25, 25, 25, 0.08), 0 14px 34px rgba(25, 25, 25, 0.14);
  --sv-sombra-folha: 0 -8px 32px rgba(25, 25, 25, 0.16);

  --sv-fonte: 'Overused Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  background: var(--sv-bg);
  color: var(--sv-ink);
  font-family: var(--sv-fonte);
  -webkit-font-smoothing: antialiased;
  /* Mata o retangulo cinza que o iOS pinta ao TOCAR num botao/label (o realce
     de toque padrao). Aparecia ao tocar "atras" dos icones no Perfil/Mais,
     porque este arquivo — o unico CSS das telas novas — nao zerava isso (so o
     CSS antigo, que estas telas nao carregam). Herda para os descendentes. */
  -webkit-tap-highlight-color: transparent;
}

/* O cabeçalho fixo antigo não existe: cada tela traz o próprio topo. */
.pg-sv .app-topo-fixo { display: none; }

.pg-sv .conteudo,
.pg-sv .container.conteudo {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--sv-bg);
  color: var(--sv-ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  animation: none;
}

.pg-sv * { box-sizing: border-box; }
.pg-sv a { color: inherit; text-decoration: none; }

/* Sem barra de rolagem em NENHUM canto do painel (2026-09-03): a barrinha cinza
   na lateral dava cara de navegador. Antes só o .sv-tela/.sv-rolagem a escondiam;
   o próprio documento (html/body) e as folhas roláveis ainda a mostravam. Aqui
   some em tudo — o conteúdo continua rolando, só sem a barra visível. */
html:has(> body.pg-sv),
.pg-sv,
.pg-sv * { scrollbar-width: none; -ms-overflow-style: none; }
html:has(> body.pg-sv)::-webkit-scrollbar,
.pg-sv::-webkit-scrollbar,
.pg-sv *::-webkit-scrollbar { display: none; width: 0; height: 0; }

.pg-sv .conteudo > .alerta {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  z-index: 50;
  background: var(--sv-ink);
  color: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: var(--sv-sombra-alta);
}

/* Entrada dos blocos: sobe E cresce um tico, com a curva de leve overshoot
   (0.2,0.9,0.25,1.05) da tela de agendamento — é o "movimento esculpido" que o
   dono quis trazer do fluxo público pro app (2026-09-03). O `scale(0.98)` é
   sutil de propósito: cartão grande escalando demais parece elástico barato. */
@keyframes svRevealUp {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes svFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes svSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* =========================================================================
   Tela e blocos base
   ========================================================================= */
.sv-tela {
  position: relative;
  flex: 1;
  /* Reserva pra barra inferior flutuante, que passa por cima do conteúdo.
     106px, era 118px: acompanha a descida da barra (bottom 26px -> 14px) pra
     manter o MESMO respiro de 34px entre a última linha e a barra —
     14 (vão) + 58 (altura da barra) + 34 (respiro) = 106.
     O `env(safe-area-inset-bottom)` entrou junto porque a barra também soma
     esse inset: sem ele, no iPhone com barra de gestos a reserva ficava curta
     e a última linha da lista sumia atrás da barra. */
  padding: 0 0 calc(106px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  background: var(--sv-bg);
  overflow-y: auto;
  animation: svFade 0.36s ease both;
}
/* `backwards`, não `both`: com `both` o transform do último quadro CONTINUA
   aplicado depois da animação e anula o `transform:scale()` do :active — todo
   cartão clicável que também entra com .sv-reveal perdia o toque. */
/* Curva assinatura das ENTRADAS (2026-09-04): easeOutCubic — desacelera suave e
   espalha o movimento (dá pra VER o card subir, não estala e para). Sem balanço
   de brinquedo; a vida vem do movimento gradual + da cascata. Mesma curva nas
   cascatas de lista dos sv-*.css. */
.sv-reveal { animation: svRevealUp 1s cubic-bezier(0.33, 1, 0.68, 1) backwards; }

/* TOQUE VIVO (2026-09-03): a tela de agendamento cede suave no toque porque
   cada clicável tem `transition: transform` na BASE — os :active espalhados
   pelos sv-*.css só declaram o scale, e sem transição na base o toque "estala"
   seco. Esta regra dá a transição de uma vez a todo clicável do app (botões,
   links, cartões com onclick), então o afundar E o voltar ficam macios, no
   mesmo tempo (0.18s) do fluxo público. Não conflita com as animações de
   entrada (essas rodam por `animation`, não por `transition`). */
.pg-sv a,
.pg-sv button,
.pg-sv [role="button"],
.pg-sv [onclick] {
  transition: transform 0.18s ease;
}

/* Topo padrão: avatar + saudação/nome + ação à direita. */
/* 34px, era 54px: o dono reclamou de "espaço muito grande em branco" acima do
   título de cada tela. Medido no celular (375x812), o título assentava a 54px
   do topo — quase 7% da altura da tela em branco antes de qualquer conteúdo.
   34px encurta esse vão em 20px e ainda deixa uma faixa de respiro clara.
   O `env(safe-area-inset-top)` CONTINUA somando: é ele que desvia do notch no
   iPhone em tela cheia (lá o total vira ~34+47px). Mexer só no valor fixo.
   Este é o valor de referência do topo — as telas com CSS próprio
   (sv-agenda, sv-caixa, sv-catalogo, sv-clientes-equipe, sv-planos-perfil,
   sv-relatorios) repetem os mesmos 34px e devem mudar junto. */
.sv-topo {
  padding: calc(34px + env(safe-area-inset-top, 0px)) 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--sv-ink);
  color: var(--sv-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  overflow: hidden;
}
.sv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-topo-texto { flex: 1; min-width: 0; }
.sv-topo-saudacao { font-size: 12px; font-weight: 500; color: var(--sv-muted); }
.sv-topo-nome {
  font-size: 17px;
  font-weight: 600;
  color: var(--sv-ink);
  letter-spacing: -0.3px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Botão redondo do topo (sino, ajustes...). */
.pg-sv .sv-topo-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--sv-line);
  border: none;
  color: var(--sv-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  padding: 0;
}
.pg-sv .sv-topo-btn:active { transform: scale(0.94); }
/* Bolinha de "tem novidade" — a borda casa com o fundo do botão. */
.sv-topo-btn-ponto {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--sv-ink);
  border: 1.5px solid var(--sv-line);
}

/* Título de tela (quando não é o topo com avatar). */
.sv-titulo {
  font-size: 26px;
  font-weight: 600;
  color: var(--sv-ink);
  letter-spacing: -0.6px;
}
.sv-secao-rot {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sv-muted);
  letter-spacing: 0.2px;
}

/* Cartão branco padrão. */
.sv-cartao {
  background: var(--sv-surface);
  border-radius: 24px;
  box-shadow: var(--sv-sombra-cartao);
  padding: 16px;
}
.sv-cartao--escuro {
  background: var(--sv-ink);
  color: var(--sv-line);
  box-shadow: var(--sv-sombra-alta);
}

/* Selo-pílula. */
.sv-pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: var(--sv-line);
  color: var(--sv-ink-2);
}
.sv-cartao--escuro .sv-pilula { background: rgba(224, 224, 224, 0.16); color: var(--sv-line); }
.sv-pilula-ponto { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Grade de atalhos (Agendar / Lançar / Clientes / Produtos). */
.sv-atalhos { display: flex; gap: 10px; padding: 16px 20px 0; }
.pg-sv .sv-atalho {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.pg-sv .sv-atalho:active { transform: scale(0.94); }
.sv-atalho-caixa {
  width: 100%;
  height: 56px;
  border-radius: 18px;
  background: var(--sv-surface);
  box-shadow: var(--sv-sombra-cartao);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sv-muted);
}
.sv-atalho-rot { font-size: 11px; font-weight: 500; color: var(--sv-ink-2); }

/* Botão primário. */
.pg-sv .sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--sv-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pg-sv .sv-btn--claro { background: var(--sv-line); color: var(--sv-ink); }
.pg-sv .sv-btn:active { opacity: 0.8; }

/* Lista de itens dentro de cartão, separada por fio claro. */
.sv-linha {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.sv-linha + .sv-linha { border-top: 1px solid var(--sv-line-2); }
.sv-linha-corpo { flex: 1; min-width: 0; }
.sv-linha-titulo {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-ink);
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-linha-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sv-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-vazio {
  padding: 26px 20px;
  font-size: 13px;
  color: var(--sv-muted);
  text-align: center;
}

/* =========================================================================
   BARRA INFERIOR — pílula branca FLUTUANTE (não encosta nas bordas).
   A aba ativa ganha fundo cinza e mostra o rótulo AO LADO do ícone.
   ========================================================================= */
.sv-nav {
  /* FLUTUANTE de novo (dono, 2026-09-02): a barra colada em bottom:0 deixava
     aparecer a faixa da safe-area embaixo (limitação do webview no build atual).
     Flutuando acima da borda, a faixa some. Largura quase total (recuo de 14px
     nas laterais), cantos arredondados, mesmo material fosco. */
  position: fixed;
  left: 14px;
  right: 14px;
  /* Centralizada com teto de ~358px (design do dono, 2026-09-02): num celular
     largo a barra não estica de ponta a ponta, fica um cartão flutuante. Com
     left/right:14px o box disponível é (viewport − 28px); o max-width corta em
     358px e a margem automática centraliza o que sobrar. No PC (sv-desktop.css)
     estes três são reescritos para a coluna lateral, então isto é só do celular. */
  /* Barra de abas NATIVA (referência do dono: a barra da App Store):
     largura total, colada nas bordas — sem teto/centralização de pílula. */
  /* 14px, era 26px: o dono achou a barra "muito pra cima". 14px é o MESMO
     recuo do `left`/`right` logo acima, então a barra flutua com folga igual
     nos três lados em vez de sobrar um vão maior embaixo.
     O `env(safe-area-inset-bottom)` continua somando: no iPhone com barra de
     gestos ela sobe os ~34px do indicador e não encosta nele. */
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  /* "Liquid glass" CLARO (estilo Apple, referência do dono 2026-09-02).
     Histórico: vidro claro sumiu ("branco no branco"); vidro escuro ficou
     pesado. A referência é vidro claro que FUNCIONA porque a borda do painel é
     DEFINIDA por sombra + brilho, não pelo preenchimento. Então:
     - fundo branco translúcido + blur/saturate fortes (o frost de verdade);
     - borda de brilho (rgba branca) — o realce de vidro;
     - sombra ampla + um filete escuro de 0.5px: é isso que destaca o painel
       mesmo sobre um cartão branco (sem eles, dissolvia no fundo);
     - brilho interno no topo (sheen de vidro).
     Ícones ESCUROS (regra abaixo), legíveis sobre o frost claro.
     `-webkit-backdrop-filter` é o que vale no iOS (WKWebView). */
  /* Vidro cinza-FUMÊ (referência do dono, 2026-09-02): nem branco (sumia no
     app claro), nem preto (ficava pesado) — um cinza médio translúcido com
     ícones/texto BRANCOS. Sobre o app claro, o tom cinza (60,60,67) a 55% se
     mistura com o branco de trás e assenta num cinza médio bem visível; o blur
     forte dá o frost. Ícones brancos e a pílula do item ativo (regras abaixo). */
  /* Material fosco CLARO da barra nativa (a App Store no modo claro): frost
     translúcido que borra o conteúdo por trás, e um FILETE fino no topo que a
     separa da tela — é o filete + a largura total que a fazem "aparecer" (não
     depende de flutuar). Sem cantos, sem sombra de flutuar. */
  /* 0.88 (era 0.72): as 7 telas do "Mais" têm container de altura fixa (100dvh)
     que não cobre a faixa da safe-area atrás da barra — a barra translúcida
     mostrava dois fundos (conteúdo x faixa vazia) e sobrava um "pedaço" de cor
     diferente embaixo. Como cada tela tem um fundo (cinza/branco), não há uma
     cor única para igualar; deixar o frost mais opaco cobre a diferença — e é
     como a barra da App Store é de fato (bem fosca, quase sólida). */
  background: rgba(250, 250, 250, 0.6);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  /* Colada em baixo: o padding-bottom inclui a safe-area (barra de gestos). */
  padding: 8px 6px;
  box-shadow: 0 8px 30px rgba(14, 14, 14, 0.14);
}
/* Cada aba é uma COLUNA: ícone em cima, rótulo embaixo, ambos SEMPRE visíveis
   (design novo). flex:1 divide a largura igualmente — adapta-se a 3 itens
   (funcionário: Início/Agenda/Mais) ou 4 (admin: + Caixa) sem gap fixo que
   estoure a largura. */
.pg-sv .sv-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 14px;
  background: transparent;
  /* Barra clara nativa: ícone/rótulo CINZA quando inativo, ESCURO quando ativo
     (como a App Store no modo claro). Sem pílula/fundo no ativo. */
  color: #8e8e93;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
/* Ativo: tinta escura (a App Store usa a cor de destaque; este app é
   monocromático, então quase-preto), distinguido por cor, peso e "pop". */
.pg-sv .sv-nav-item.ativo { color: #1a1a1a; }
.pg-sv .sv-nav-item:active { opacity: 0.75; }
/* Barra clara nativa: ícones chapados, sem sombra (a sombra era do ícone branco
   sobre vidro transparente). */
.sv-nav-ic { display: block; }
/* "Pop" no ícone da aba ATIVA — cada página é um carregamento novo, então a
   animação toca uma vez ao abrir a tela. */
.pg-sv .sv-nav-item.ativo .sv-nav-ic {
  animation: ctPop 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Pop mais contido (2026-09-04): antes ia de 0.72 a 1.16 (balanço de brinquedo).
   Agora um leve respiro (0.85 -> 1.04 -> 1) — presente, mas premium. */
@keyframes ctPop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-sv .sv-nav-item.ativo .sv-nav-ic { animation: none; }
}
/* Rótulo SEMPRE visível (10px, design Glass), mais forte quando ativo. */
.sv-nav-label { font-size: 10px; font-weight: 500; letter-spacing: -0.1px; color: inherit; }
.pg-sv .sv-nav-item.ativo .sv-nav-label { font-weight: 600; }

/* =========================================================================
   FOLHA INFERIOR (bottom sheet) — o pop-up deste design. Sobe de baixo, com
   canto arredondado só no topo.
   ========================================================================= */
.pg-sv .sv-folha-fundo {
  position: fixed;
  /* Antes: `inset: 0`. No iOS, o viewport de `vh`/inset e o "grande" (como se a
     barra do sistema estivesse escondida), entao o fundo — e a folha alinhada
     nele por `flex-end` — terminava ABAIXO da area visivel, cortando o pe do
     pop-up. `dvh` (viewport dinamico) usa o que esta de fato visivel, e encolhe
     quando o teclado abre. `vh` fica de fallback p/ iOS < 15.4. */
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 60;
  background: rgba(25, 25, 25, 0.35);
  display: flex;
  align-items: flex-end;
  animation: svFade 0.28s ease both;
}
.pg-sv .sv-folha-fundo[hidden] { display: none; }

/* Enquanto QUALQUER pop-up está aberto, some com a barra inferior. Ela é
   position:fixed e tem view-transition-name próprio (sv-barra), o que cria um
   contexto de empilhamento — por isso o z-index maior da folha nem sempre a
   cobria, e a barra aparecia por cima/ao lado do pop-up atrapalhando o uso
   (dono, 2026-09-02). Com um pop-up aberto a barra não serve para nada.
   DOIS mecanismos de pop-up no app:
   - folha do menu e afins: overlay `.sv-folha-fundo` (alterna [hidden]);
   - modais da agenda/caixa/comissões/etc.: o script põe `modal-aberto` no body.
   Cobrir os dois pega TODOS os pop-ups (o do agendamento usava `.ag-overlay`,
   fora do seletor antigo — por isso a barra ainda aparecia nele). */
.pg-sv:has(.sv-folha-fundo:not([hidden])) .sv-nav,
.pg-sv.modal-aberto .sv-nav { display: none; }
.sv-folha {
  width: 100%;
  /* dvh pelo mesmo motivo do fundo: 88vh media o viewport "grande" e deixava a
     folha alta passar do fim da tela. */
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--sv-surface);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--sv-sombra-folha);
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: svSheetUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Vidro fosco SÓ na folha do menu "Mais" (pedido do dono, 2026-09-03: o mesmo
   efeito da barra). As outras folhas (.sv-folha em caixa/clientes/equipe/
   estoque/planos) seguem brancas sólidas — por isso o alvo é o #id, não a
   classe. O frost claro sobre o escurecido do fundo deixa o miolo do menu
   (texto/ícones escuros) legível. */
/* O menu "Mais" NÃO leva vidro (backdrop-filter): numa folha que anima ao abrir,
   blur + animação engasgam no iOS (trava/pisca), não importa se desliza ou faz
   fade. Como a folha desliza (svSheetUp), fica sólida e lisa. O vidro segue só
   na barra, que é fixa e não anima. (dono, 2026-09-03: "ficou zuado / quero mais
   suave e rápido".) */
/* Puxador — a alcinha cinza que indica "arraste pra fechar". */
.sv-folha-puxador {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--sv-line);
  margin: 0 auto 14px;
}
.sv-folha-titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--sv-ink);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
/* Cabeçalho da folha com botão de fechar redondo à direita. */
.sv-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv-folha-topo .sv-folha-titulo { font-size: 19px; letter-spacing: -0.4px; margin-bottom: 0; }
.pg-sv .sv-folha-x {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--sv-bloco);
  border: none;
  color: var(--sv-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  padding: 0;
}
.pg-sv .sv-folha-x:active { transform: scale(0.94); }

/* Grade de atalhos da folha "Menu": 4 colunas de ladrilho, como na
   referência — não é lista vertical. */
.sv-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.pg-sv .sv-grade-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.pg-sv .sv-grade-item:active { transform: scale(0.94); }
.sv-grade-caixa {
  width: 100%;
  height: 60px;
  border-radius: 18px;
  background: var(--sv-bloco);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sv-ink);
}
.sv-grade-rot { font-size: 11px; font-weight: 500; color: var(--sv-ink-2); }

/* Cartão escuro de perfil no pé da folha "Menu". */
.pg-sv .sv-folha-perfil {
  margin-top: 20px;
  background: var(--sv-ink);
  border-radius: 22px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  font-family: inherit;
}
.pg-sv .sv-folha-perfil:active { transform: scale(0.985); }
.sv-folha-perfil-av {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(224, 224, 224, 0.16);
  color: var(--sv-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex: none;
  overflow: hidden;
}
.sv-folha-perfil-av img { width: 100%; height: 100%; object-fit: cover; }
.sv-folha-perfil-corpo { flex: 1; min-width: 0; }
/* `display:block` porque o cartão é um <a> e os filhos são <span>: inline,
   nome e legenda cairiam na mesma linha. */
.sv-folha-perfil-nome { display: block; font-size: 14.5px; font-weight: 600; color: var(--sv-line); }
.sv-folha-perfil-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--sv-muted-2); margin-top: 3px; }

/* Campo de formulário. */
.sv-campo { margin-top: 14px; }
.sv-campo-rot {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sv-muted);
  margin-bottom: 6px;
}
.pg-sv .sv-campo-input {
  width: 100%;
  background: var(--sv-bg);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--sv-ink);
  outline: none;
}
.pg-sv .sv-campo-input:focus { border-color: var(--sv-line); background: var(--sv-surface); }
.pg-sv .sv-campo-input::placeholder { color: var(--sv-muted-2); }

/* Pílulas de escolha. Mantém `.pill-group`/`.pill-opcao` porque há script que
   cria e marca essas classes na mão (horários carregados por fetch). */
.pg-sv .pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-sv .pill-opcao {
  border-radius: 999px;
  border: none;
  background: var(--sv-bg);
  color: var(--sv-ink-2);
  padding: 9px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.pg-sv .pill-opcao.ativo { background: var(--sv-ink); color: #fff; }
.pg-sv .pill-opcao.indisponivel {
  color: var(--sv-muted-2);
  text-decoration: line-through;
  cursor: default;
}

/* =========================================================================
   Keyframes do motor de animação (public/js/suave-anim.js)
   -------------------------------------------------------------------------
   Portadas do HTML de referência. Elas não são aplicadas por CSS: quem as
   dispara é o runtime, quando o elemento entra na tela — por isso ficam aqui
   soltas, sem seletor.
   ========================================================================= */
@keyframes mosWipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes mosGrow {
  from { transform: scaleX(0.06); }
  to { transform: scaleX(1); }
}
@keyframes barRise {
  from { transform: scaleY(0.12); opacity: 0.15; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes agendaIn {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes ledgerIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes svcIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes teamIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes planIn {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes prodIn {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes stockIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pagIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.7); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes fadeScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* =========================================================================
   TRANSIÇÃO ENTRE TELAS (pedido do dono, 2026-08-01)
   -------------------------------------------------------------------------
   Cada toque na barra é uma navegação de verdade (o app é renderizado no
   servidor), e o padrão do navegador é o corte seco: branco e a tela nova.
   `@view-transition` faz o próprio navegador tirar um retrato da tela antiga
   e cruzar com a nova — é o mecanismo NATIVO para isso, sem virar SPA e sem
   JS de roteamento.

   Onde não houver suporte, a navegação acontece como sempre: nada quebra,
   só não há transição. Por isso não há fallback em JS aqui.

   A barra inferior fica FORA da transição (view-transition-name próprio):
   ela é a mesma em todas as telas, e deixá-la cruzar junto faria o elemento
   fixo piscar a cada toque — o oposto de app nativo.
   ========================================================================= */
@view-transition { navigation: auto; }

/* FADE-UP IGUAL AO AGENDAMENTO (2026-09-03). Antes era um slide horizontal
   ("rolar pro lado", 2026-09-01), mas o dono achou que não batia com o fluxo
   público — lá a tela nova SOBE e aparece (svAgFadeUp), não desliza. Trocado
   pelo mesmo movimento vertical suave: a tela nova entra subindo de baixo e a
   antiga só some por cima (cruzam, então não há corte seco/flash branco).
   Sem overshoot: num bloco de tela inteira ele abriria um vão na borda.
   Anima o `.conteudo`, NÃO a `root`: a barra inferior é `position: fixed`, e
   mover a página inteira fazia o iOS reposicionar a barra fixa. Nomeando só o
   conteúdo, a barra (sv-barra, logo abaixo) fica de fora e parada. */
.pg-sv .conteudo { view-transition-name: sv-conteudo; }
@keyframes sv-vt-sai {
  to { opacity: 0; }
}
@keyframes sv-vt-entra {
  from { opacity: 0; }
}
/* Troca de seção = crossfade CURTÍSSIMO (dono, 2026-09-04). Antes era um
   fade-up de ~0,3s que tirava o "retrato" da tela nova e ENGOLIA o começo das
   animações dos cards — o dono só via o finalzinho. Agora a troca some quase na
   hora (sem deslocamento próprio), e são as ENTRADAS DOS CARDS (.sv-reveal,
   mais lentas) que fazem o movimento, visíveis do início ao fim. */
::view-transition-old(sv-conteudo) {
  animation: sv-vt-sai 0.13s ease both;
}
::view-transition-new(sv-conteudo) {
  animation: sv-vt-entra 0.15s ease both;
}

/* A barra some da transição e é desenhada só uma vez, por cima. */
.sv-nav { view-transition-name: sv-barra; }
::view-transition-group(sv-barra) { animation: none; }
::view-transition-old(sv-barra),
::view-transition-new(sv-barra) { animation: none; mix-blend-mode: normal; }

/* Quem pediu menos movimento navega sem o deslize, sem a entrada em cascata e
   sem o afundar do toque. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(sv-conteudo),
  ::view-transition-new(sv-conteudo) { animation: none; }
  .pg-sv .sv-reveal { animation: none; }
  .pg-sv a,
  .pg-sv button,
  .pg-sv [role="button"],
  .pg-sv [onclick] { transition: none; }
}

/* Sem barra de navegação: telas cheias (Assistente, Conversas, Perfil) e a
   página do barbeiro aberta na Equipe (pedido do dono, 2026-09-30). */
.sem-nav .sv-nav,
.pg-sv:has(.sv-eq-pg:not([hidden])) .sv-nav { display: none !important; }