/* Cadastro self-service de usuário/empresa (item 19, 2026-08-22) — reusa os
   tokens/paleta já definidos em css/styles.css (:root com --hd/--or/--bl/
   --line/--muted/--ink/--navy). Este arquivo NÃO redefine :root — só
   acrescenta o que styles.css ainda não cobre: passos do cadastro público,
   layout UF+cidade lado a lado, cartão de "empresa encontrada" e a tela de
   espera de aprovação. Usado tanto por cadastro.html (fora do app) quanto
   pelo sheet "Cadastrar/vincular minha empresa" dentro do app (index.html). */

/* cadastro.html é uma página PÚBLICA, respondida em qualquer navegador —
   inclusive desktop, sem estar instalada como PWA (diferente de index.html,
   que sempre roda como app). Por isso NÃO reusa .app/.screen de styles.css:
   aquele padrão vira uma "moldura de celular" com altura travada em telas
   largas (media query min-width:460px — bordas pretas, 860px fixos), o que
   fica estranho pra um formulário de cadastro acessado do computador. Aqui é
   layout normal, responsivo, com scroll de página de verdade. */
.cad-page{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:#fff;position:relative;}
.cad-step{display:none;}
.cad-step.active{display:block;}

/* 2026-08-23 (item 24, pedido do Edmar): mesmo depois do fix da moldura de
   celular (v48, acima), a página em telas largas (desktop) continuava com
   "cara de app" — fundo branco esticado até a borda do navegador, com o
   formulário perdido numa coluna estreita e sem nenhum tratamento visual no
   meio do vazio. Um formulário não deveria ocupar a largura toda de um
   monitor grande (os campos ficariam enormes e feios) — o ajuste certo é dar
   ao CARTÃO um tratamento de página de verdade (cantos arredondados, sombra,
   respiro vertical) só a partir de telas largas, deixando o celular
   (a maioria do uso real) exatamente como já estava, edge-to-edge. */
@media (min-width:640px){
  .cad-page{max-width:520px;margin:40px auto;min-height:auto;border-radius:16px;box-shadow:0 8px 40px rgba(15,41,76,.14);}
}

/* olhinho de mostrar/esconder senha (item 24) */
/* >>> AJUSTE (2026-08-23, item 28): faltava width:100% aqui. No cadastro
   (fluxo normal de bloco) não fazia falta, o <div> já ocupava a largura
   toda por padrão — mas no login (index.html #loginScreen), que é uma
   coluna flex com align-items:center pra centralizar o cartão, um filho
   flex sem width explícita encolhe pro tamanho do próprio conteúdo (o
   input, sem o width:100% herdado, volta pro tamanho padrão do navegador)
   em vez de esticar igual o campo de usuário ao lado. Resultado: o campo
   de senha ficava visivelmente menor que o de usuário, só depois de
   colocar o input dentro deste wrapper (item 28). */
.pwd-wrap{position:relative;width:100%;}
.pwd-wrap .fld{padding-right:40px;}
.pwd-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:17px;cursor:pointer;}
.pwd-toggle:hover{color:var(--ink);}

.cad-wrap{padding:24px 20px 30px;}
.cad-logo{width:120px;display:block;margin:0 auto 18px;}
.cad-steps{display:flex;justify-content:center;gap:8px;margin-bottom:22px;}
.cad-step-dot{width:8px;height:8px;border-radius:50%;background:var(--line);}
.cad-step-dot.on{background:var(--or);}
.cad-title{font-size:19px;font-weight:700;margin:0 0 4px;color:var(--ink);}
.cad-sub{font-size:13px;color:var(--muted);margin:0 0 20px;}

.step-row{align-items:flex-end;}

.emp-erro{background:#FCEBEB;color:#A32D2D;font-size:12px;padding:9px 12px;border-radius:10px;margin-bottom:14px;}

.emp-found{display:flex;align-items:center;gap:12px;background:#F4F4F1;border:.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;}
.emp-found i{font-size:26px;color:var(--hd);flex:none;}
.emp-found-nome{margin:0;font-size:14px;font-weight:600;color:var(--ink);}

.wait-box{text-align:center;padding:30px 10px 10px;}
.wait-box i{font-size:46px;color:var(--or);}
.wait-box h3{margin:14px 0 6px;font-size:17px;}
.wait-box p{font-size:13px;color:var(--muted);margin:0 0 20px;}