/* =========================================================================
   TELAS DE CONTA NO APP (PWA, 25/10/2026) — src/shared/app/app-conta.css

   O visual de app de três telas que o app abre a partir da entrada —
   src/pages/client/register-client/register-client.html (Criar conta),
   src/pages/client/forgot-password/forgot-password.html (Esqueci minha senha) e
   src/pages/client/reset-password/reset-password.html (Nova senha, aberta pelo
   link do e-mail). No site elas têm o painel da marca à esquerda, o "Voltar"
   flutuante e, no celular, um cabeçalho com o logo; no app viram TELA DE APP:
     - a BARRA DE APP: o cabeçalho do celular, em todas as larguras, branco
       translúcido, compacto (56px + o topo seguro), só com o "Voltar" de sempre
       (o MESMO link, com data-app-voltar="#entrar": no app ele volta para a
       entrada com a folha de login aberta, pelo histórico quando dá) num alvo de
       44px, e o título da tela no meio. O título da barra aparece quando o
       título grande da tela rola para baixo dela (como o "large title" do
       iPhone), e a linha fina embaixo da barra também; onde o navegador não tem
       animação por rolagem, os dois ficam sempre à vista;
     - sem o painel da marca, sem o logo e sem o "Voltar" flutuante do site;
     - o formulário em tela cheia, com respiro de 20px (mais as bordas seguras),
       campos de 52px com raio 14, o botão em pílula de 54px (o progresso,
       "Enviando...", fica nele, com o giro) e as mensagens das páginas
       (--error, --success) como avisos com ícone;
     - os estados de "E-mail enviado!", "Link inválido" e "Senha atualizada!"
       com a mesma linguagem;
     - no computador (o app instalado no PC), a coluna fica num cartão branco
       centralizado sobre o fundo claro, abaixo da barra.
   Nada de marcação nova: só seletores sobre o HTML de cada página.

   QUEM CARREGA: o <head> dessas três páginas, DEPOIS da folha da própria página
   e de src/shared/app/app.css (é a última folha). O modo-app.js está no <head>
   delas, logo depois da meta viewport. Especificidade: as folhas das páginas
   pintam com uma classe; "html.modo-app" na frente ganha sem !important.

   ⚠ TODA regra daqui fica atrás de html.modo-app. Sem o modo app, esta folha não
     muda um pixel do site (provado com prints contra o main).
   ⚠ As páginas usam html { font-size: 62.5% } (1rem = 10px); os tokens --app-*
     do app.css e as medidas daqui são em px.
   ⚠ Não mude ids nem classes que o JS de cada página lê (register-client.js,
     forgot-password.js, reset-password.js são .js de lógica: não se editam). Os
     três trocam o className das mensagens (component-login-message /
     component-register-message + --error/--success/--loading) e o texto do
     <span> do botão ("Criando conta...", "Enviando...", "Salvando..."), e
     mostram/escondem os estados por style.display: daqui só se desenha.
   ⚠ A meta theme-color #ffffff (media standalone) dessas páginas é da fiação:
     combina com a barra branca daqui. Se a barra virar escura, troque as duas.

   Blocos: [A] base · [B] barra de app · [C] conteúdo · [D] campos ·
   [E] mensagens · [F] botão · [G] links e estados · [H] computador ·
   [I] menos movimento.
   ========================================================================= */

/* [A] Base. O scroll-padding faz o navegador (o foco num campo, o teclado
   subindo) rolar o campo para BAIXO da barra de app, nunca atrás dela. */
html.modo-app {
  --conta-foco: #2563EB;
  --conta-linha: rgba(13, 27, 42, 0.08);
  scroll-padding-top: calc(var(--app-cabecalho-altura) + var(--app-seguro-topo) + 16px);
  scroll-padding-bottom: 24px;
  background: var(--app-branco);
}
html.modo-app body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--app-branco);
  color: var(--app-texto);
}
/* Uma coluna só (no site, o grid é marca | formulário). */
html.modo-app :is(.layout-login, .layout-register) {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--app-branco);
}
/* Sem o painel da marca e sem o "Voltar" flutuante do site. */
html.modo-app :is(.layout-login-brand, .layout-register-brand, .button-login-back, .button-register-back) { display: none; }

/* [B] A barra de app: o cabeçalho do celular, em qualquer largura. */
html.modo-app :is(.layout-login-mobile-header, .layout-register-mobile-header) {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  height: auto;
  min-height: calc(var(--app-cabecalho-altura) + var(--app-seguro-topo));
  padding: var(--app-seguro-topo) calc(16px + var(--app-seguro-dir)) 0 calc(6px + var(--app-seguro-esq));
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  border-bottom: 0;
  background: var(--app-barra-fundo);
  box-shadow: 0 1px 0 var(--conta-linha);
  -webkit-backdrop-filter: var(--app-barra-blur);
  backdrop-filter: var(--app-barra-blur);
}
/* O logo do site sai (no app ele levaria à home, que desvia para a entrada:
   quem sai daqui sai pelo "Voltar"). */
html.modo-app :is(.layout-login-mobile-header__logo, .layout-register-mobile-header__logo) { display: none; }
/* O "Voltar": só a seta, num alvo de 44px; o texto ("Voltar", "Login") fica
   para o leitor de tela, e o aria-label do link continua valendo. */
html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back) {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: var(--app-toque);
  height: var(--app-toque);
  flex: none;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--app-texto);
  transition: background-color 160ms var(--app-curva);
}
html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back) svg { width: 24px; height: 24px; stroke-width: 2.2; }
html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back):hover { background: rgba(13, 27, 42, 0.06); color: var(--app-texto); }
html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back):active { background: rgba(13, 27, 42, 0.1); }
html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back):focus-visible { outline: 3px solid var(--conta-foco); outline-offset: 1px; }

/* O título da tela, no meio da barra. Vem do CSS (a barra não tem um elemento
   para ele; o título de verdade, o <h2>, continua no conteúdo): o "/ ''" tira
   o texto do leitor de tela, que já lê o <h2>. Cada página pelo que só ela tem
   (o formulário pelo id). Sem :has() (navegador antigo), a barra fica só com o
   "Voltar". */
html.modo-app :is(.layout-login-mobile-header, .layout-register-mobile-header)::after {
  position: absolute;
  top: var(--app-seguro-topo);
  left: calc(60px + var(--app-seguro-esq));
  right: calc(60px + var(--app-seguro-dir));
  height: var(--app-cabecalho-altura);
  overflow: hidden;
  color: var(--app-texto);
  font: 600 17px/56px var(--app-fonte);
  letter-spacing: -0.01em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
html.modo-app .layout-register-mobile-header::after { content: "Criar conta"; content: "Criar conta" / ""; }
html.modo-app body:has(#forgotForm) .layout-login-mobile-header::after { content: "Recuperar senha"; content: "Recuperar senha" / ""; }
html.modo-app body:has(#resetForm) .layout-login-mobile-header::after { content: "Nova senha"; content: "Nova senha" / ""; }

/* Onde há animação por rolagem: no topo, a barra sem linha e sem título (o
   título grande está logo abaixo); rolou, a linha e o título aparecem. O
   estado de base é o "escondido": numa tela que não rola (esqueci a senha,
   nova senha), a linha do tempo fica inativa, a animação não vale, e a barra
   continua só com o "Voltar" — como na tela que rola, antes de rolar. */
@supports (animation-timeline: scroll()) {
  html.modo-app :is(.layout-login-mobile-header, .layout-register-mobile-header) {
    box-shadow: 0 1px 0 rgba(13, 27, 42, 0);
    animation: conta-barra-linha linear both;
    animation-timeline: scroll(root);
    animation-range: 0 24px;
  }
  html.modo-app :is(.layout-login-mobile-header, .layout-register-mobile-header)::after {
    opacity: 0;
    animation: conta-barra-titulo linear both;
    animation-timeline: scroll(root);
    animation-range: 40px 88px;
  }
}
@keyframes conta-barra-linha { from { box-shadow: 0 1px 0 rgba(13, 27, 42, 0); } to { box-shadow: 0 1px 0 var(--conta-linha); } }
@keyframes conta-barra-titulo { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* [C] O conteúdo: tela cheia, respiro de 20px + as bordas seguras, e o fim
   acima do indicador de início do iPhone. */
html.modo-app :is(.layout-login-form-area, .layout-register-form-area) {
  display: block;
  min-height: 0;
  padding: 12px calc(var(--app-respiro) + var(--app-seguro-dir)) calc(32px + var(--app-seguro-base)) calc(var(--app-respiro) + var(--app-seguro-esq));
  background: transparent;
}
html.modo-app :is(.layout-login-form-box, .layout-register-form-box) {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.modo-app :is(.layout-login-form-header, .layout-register-form-header) { margin-bottom: 24px; }
html.modo-app :is(.component-login-form-title, .component-register-form-title) {
  margin-bottom: 8px;
  color: var(--app-texto);
  font-size: var(--app-titulo-grande);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--app-tracking-titulo);
}
html.modo-app :is(.component-login-form-subtitle, .component-register-form-subtitle) {
  color: var(--app-texto-2);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* [D] Campos: 52px, raio 14, fundo cinza-claro que fica branco no foco. */
html.modo-app :is(.component-login-field, .component-register-field) { margin-bottom: 16px; }
html.modo-app :is(.component-login-label, .component-register-label) {
  margin-bottom: 8px;
  color: var(--app-texto);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
html.modo-app :is(.component-login-input, .component-register-input) {
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--app-borda-campo);
  border-radius: var(--app-raio-campo);
  background-color: var(--app-superficie);
  color: var(--app-texto);
  font: 500 16px/1.2 var(--app-fonte);
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
html.modo-app :is(.component-login-input, .component-register-input)::placeholder { color: #64748B; font-weight: 400; opacity: 1; }
html.modo-app :is(.component-login-input, .component-register-input):focus {
  border-color: var(--app-azul);
  background-color: var(--app-branco);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}
/* o preenchimento automático não pinta o campo de amarelo/azul */
html.modo-app :is(.component-login-input, .component-register-input):-webkit-autofill {
  -webkit-text-fill-color: var(--app-texto);
  box-shadow: 0 0 0 100px var(--app-branco) inset;
}
/* os selects (sexo, UF, cidade): a seta do site fica (só a cor de fundo muda) */
html.modo-app .component-register-select { padding-right: 44px; background-position: right 16px center; }
/* senha: o "olho" num alvo de 48×52 */
html.modo-app :is(.component-login-input-password, .component-register-input-password) { padding-right: 54px; }
html.modo-app :is(.component-login-password-button, .component-register-password-button) {
  top: 0;
  right: 2px;
  width: 48px;
  height: 52px;
  border-radius: 12px;
  color: var(--app-texto-3);
}
html.modo-app :is(.component-login-password-button, .component-register-password-button) svg { width: 20px; height: 20px; }
html.modo-app :is(.component-login-password-button, .component-register-password-button):focus-visible { outline: 3px solid var(--conta-foco); outline-offset: -3px; }
/* linhas duplas do cadastro (CPF | Telefone, UF | Cidade): o vão é o mesmo dos campos */
html.modo-app .component-register-row { column-gap: 12px; }
/* UF e Cidade um embaixo do outro em qualquer largura: lado a lado, no cartão do
   computador, o "Selecione a UF primeiro" da Cidade sairia cortado */
html.modo-app .component-register-row--uf { grid-template-columns: 1fr; row-gap: 0; }

/* [E] As mensagens das páginas (--error, --success): vazias, não ocupam nada
   (nem a borda); com texto, um aviso com ícone (máscara pintada pelo
   currentColor). O --loading fica fora da tela (ver abaixo). */
html.modo-app :is(.component-login-message, .component-register-message) {
  display: flex;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  gap: 10px;
  border: 0 solid transparent;
  border-radius: var(--app-raio-campo);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
html.modo-app :is(.component-login-message, .component-register-message):not(:empty) { margin: 4px 0 4px; padding: 12px 14px; border-width: 1px; }
html.modo-app :is(.component-login-message, .component-register-message):not(:empty):is([class*="--error"], [class*="--success"])::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--conta-msg-icone) center / contain no-repeat;
  mask: var(--conta-msg-icone) center / contain no-repeat;
}
html.modo-app :is(.component-login-message--error, .component-register-message--error) {
  --conta-msg-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  border-color: #FECACA;
  background: #FEF2F2;
  color: #B91C1C;
}
html.modo-app :is(.component-login-message--success, .component-register-message--success) {
  --conta-msg-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  border-color: #BBF7D0;
  background: #F0FDF4;
  color: #15803D;
}
/* --loading ("Enviando...", "Salvando...", "Verificando seus dados..."): o
   botão logo abaixo já mostra o progresso, com o giro (bloco [F]), e um aviso
   azul com outro giro em cima dele seria ruído. Como na entrada do app: o
   progresso fica no botão, os avisos são para o resultado. O texto continua no
   DOM (recortado, invisível) e o aviso fica NO FLUXO com altura líquida zero
   (1px de altura, -1px de margem): o botão fica onde estava. Fora do fluxo
   (position:absolute), as margens do campo e do botão se juntariam no
   formulário em bloco do esqueci e o botão subiria 16px. */
html.modo-app :is(.component-login-message--loading, .component-register-message--loading):not(:empty) {
  height: 1px;
  margin: -1px 0 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
@keyframes conta-gira { to { transform: rotate(360deg); } }

/* [F] O botão: pílula de 54px, sem o "pulo" do hover do site; enviando
   ("Criando conta...", "Enviando...", "Salvando..."), a seta vira um giro. */
html.modo-app :is(.button-login-submit, .button-register-submit) {
  height: auto;
  min-height: var(--app-botao-altura);
  margin-top: 20px;
  padding: 0 24px;
  border-radius: var(--app-raio-pilula);
  background: var(--app-azul);
  box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.7);
  color: #ffffff;
  font: 600 16px/1.2 var(--app-fonte);
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 200ms var(--app-curva), background-color 200ms var(--app-curva);
}
html.modo-app :is(.button-login-submit, .button-register-submit):hover {
  background: var(--app-azul-700);
  box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.7);
  transform: none;
}
html.modo-app :is(.button-login-submit, .button-register-submit):active { background: var(--app-azul-700); transform: var(--app-pressionado); }
html.modo-app :is(.button-login-submit, .button-register-submit):focus-visible { outline: 3px solid var(--conta-foco); outline-offset: 3px; }
html.modo-app :is(.button-login-submit, .button-register-submit):disabled { cursor: progress; transform: none; }
html.modo-app :is(.button-login-submit, .button-register-submit):disabled svg { display: none; }
html.modo-app :is(.button-login-submit, .button-register-submit):disabled::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2.2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: conta-gira 0.8s linear infinite;
}
/* sem aviso à vista (vazio, ou o --loading fora da tela), o mesmo ar de sempre:
   o botão não se mexe quando o envio começa */
html.modo-app :is(.component-login-message, .component-register-message):is(:empty, [class*="--loading"]) + :is(.button-login-submit, .button-register-submit) { margin-top: 24px; }

/* [G] Os links de baixo ("Lembrou a senha? Entrar", "Já tem uma conta?
   Entrar") com alvo de 44px, e os estados de sucesso / link inválido. */
html.modo-app :is(.component-login-create-account, .component-register-login-link) {
  margin-top: 16px;
  color: var(--app-texto-2);
  font-size: 14.5px;
  line-height: 1.4;
  text-align: center;
}
html.modo-app :is(.component-login-create-account, .component-register-login-link) a {
  display: inline-flex;
  min-height: var(--app-toque);
  padding: 0 4px;
  align-items: center;
  vertical-align: middle;
  color: var(--app-azul);
  font-weight: 700;
}
html.modo-app :is(.component-login-create-account, .component-register-login-link) a:focus-visible { outline: 3px solid var(--conta-foco); outline-offset: 0; border-radius: 8px; }

html.modo-app :is(.forgot-success, .reset-state) { padding-top: 24px; }
html.modo-app :is(.forgot-success-icon, .reset-state-icon) { width: 72px; height: 72px; margin-bottom: 20px; }
html.modo-app :is(.forgot-success-icon, .reset-state-icon) svg { width: 32px; height: 32px; }
html.modo-app :is(.forgot-success-title, .reset-state-title) {
  margin-bottom: 10px;
  color: var(--app-texto);
  font-size: var(--app-titulo);
  letter-spacing: var(--app-tracking-titulo);
}
html.modo-app :is(.forgot-success-text, .reset-state-text) {
  color: var(--app-texto-2);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
html.modo-app :is(.forgot-success-btn, .reset-state-btn) { margin-top: 28px; }

/* [H] Computador (o app instalado no PC, ou uma janela larga): a barra no alto,
   e a coluna num cartão branco centralizado sobre o fundo claro. */
@media (min-width: 769px) {
  html.modo-app,
  html.modo-app body,
  html.modo-app :is(.layout-login, .layout-register) { background: var(--app-superficie); }
  html.modo-app :is(.layout-login-form-area, .layout-register-form-area) { padding-top: 40px; padding-bottom: calc(56px + var(--app-seguro-base)); }
  html.modo-app :is(.layout-login-form-box, .layout-register-form-box) {
    max-width: 480px;
    padding: 36px 36px 28px;
    border: 1px solid var(--conta-linha);
    border-radius: var(--app-raio-cartao);
    background: var(--app-branco);
    box-shadow: var(--app-sombra-cartao);
  }
  /* o "Voltar" ganha o texto de volta: "← Voltar" numa pílula de 44px */
  html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back) {
    width: auto;
    gap: 6px;
    padding: 0 16px 0 12px;
    border-radius: var(--app-raio-pilula);
    font: 600 15px/1 var(--app-fonte);
  }
  html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back) svg { width: 20px; height: 20px; }
  html.modo-app :is(.layout-login-mobile-header__back, .layout-register-mobile-header__back) > span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  html.modo-app :is(.layout-login-mobile-header, .layout-register-mobile-header) { padding-left: calc(12px + var(--app-seguro-esq)); }
  html.modo-app :is(.layout-login-mobile-header, .layout-register-mobile-header)::after { left: 150px; right: 150px; }
  /* no cartão, o campo em branco com o contorno (o cinza fica para o celular) */
  html.modo-app :is(.component-login-input, .component-register-input) { background-color: var(--app-branco); }
}

/* [I] Menos movimento: sem o "afundar" do toque nem as transições. */
@media (prefers-reduced-motion: reduce) {
  html.modo-app :is(.button-login-submit, .button-register-submit, .layout-login-mobile-header__back, .layout-register-mobile-header__back, .component-login-input, .component-register-input) { transition: none; }
  html.modo-app :is(.button-login-submit, .button-register-submit):active { transform: none; }
  @keyframes conta-barra-titulo { from { opacity: 0; } to { opacity: 1; } }
}