/* =====================================================================
   Telas de entrada (login.php e login_empresas.php).
   Elas não carregam o layout do painel: o pouco que precisam fica aqui,
   reaproveitando as variáveis do painel.css. Mesmo desenho do login do
   destaque, com a marca do cliente (logo, nome e imagem de Configurações).
   ===================================================================== */
.entrar { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--c-superficie); }

/* ---------- lado esquerdo: a imagem do cliente ---------- */
.entrar__arte { position:relative; overflow:hidden; background:#0F172A center/cover no-repeat; }
.entrar__arte::after {
  content:""; position:absolute; inset:0;
  /* acompanha a paleta escolhida (topo escuro → cor principal) */
  background:linear-gradient(200deg, color-mix(in srgb, var(--c-topo, #0F172A) 78%, transparent), color-mix(in srgb, var(--c-primaria, #2264D1) 64%, transparent));
}
.entrar__frase { position:absolute; inset:auto 0 0 0; z-index:1; padding:var(--s-7) var(--s-7) calc(var(--s-7) + 8px); color:#fff; }
.entrar__frase h2 { margin:0 0 var(--s-3); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.25; max-width:16em; }
.entrar__frase p  { margin:0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.85); max-width:32em; }
.entrar__marcas { display:flex; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-5); }
.entrar__marca { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(255,255,255,.92); }

/* ---------- lado direito: o formulário ---------- */
.entrar__lado { display:flex; flex-direction:column; justify-content:center; padding:var(--s-7); min-width:0; }
.entrar__caixa { width:100%; max-width:400px; margin:0 auto; }
.entrar__caixa--largo { max-width:520px; }
.entrar__logo { display:block; height:48px; width:auto; max-width:100%; object-fit:contain; margin-bottom:var(--s-6); }
.entrar__logo--texto { height:auto; font-size:24px; font-weight:700; color:var(--c-texto); }
.entrar__titulo { margin:0 0 6px; font-size:24px; font-weight:700; letter-spacing:-.02em; }
.entrar__sub { margin:0 0 var(--s-5); font-size:14px; color:var(--c-texto-medio); }
.entrar__campo { margin-bottom:var(--s-4); }
.entrar__campo label { display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--c-texto-medio); }
.entrar__campo .entrada.invalido { border-color:var(--c-erro); }
.entrar__erro { display:block; margin-top:5px; font-size:12px; color:var(--c-erro); }
.entrar__ajuda { display:block; margin-top:5px; font-size:12px; color:var(--c-texto-fraco); }
.entrar__duas { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 var(--s-3); }
.entrar__enviar { width:100%; justify-content:center; margin-top:var(--s-2); }
.entrar__enviar:disabled { opacity:.55; cursor:not-allowed; }

.entrar__ou { display:flex; align-items:center; gap:var(--s-3); margin:var(--s-6) 0 var(--s-4); font-size:12px; color:var(--c-texto-fraco); }
.entrar__ou::before, .entrar__ou::after { content:""; height:1px; flex:1; background:var(--c-borda); }
.entrar__dica { margin:var(--s-2) 0 0; text-align:center; font-size:13px; color:var(--c-texto-medio); line-height:1.45; }
.entrar__portais { display:grid; gap:var(--s-2); }
.entrar__portais .btn { width:100%; justify-content:flex-start; }
.entrar__rodape { margin-top:var(--s-7); font-size:12px; color:var(--c-texto-fraco); text-align:center; }
.entrar__rodape a { color:var(--c-texto-medio); }

/* abas Entrar / Cadastrar (login_empresas) */
/* Entrar | Criar conta: seletor em pílula (não usa o visual de pasta das abas do painel) */
.abas.entrar__abas { display:flex; gap:4px; padding:4px; margin-bottom:var(--s-5); background:var(--c-fundo); border:1px solid var(--c-borda); border-radius:var(--r-full); }
.abas.entrar__abas button, .abas.entrar__abas a {
  flex:1; justify-content:center; margin:0; padding:10px 14px; border:0; border-radius:var(--r-full);
  background:transparent; box-shadow:none; font-size:14.5px; font-weight:600; color:var(--c-texto-medio);
}
.abas.entrar__abas button:hover, .abas.entrar__abas a:hover { background:transparent; color:var(--c-texto); }
.abas.entrar__abas [aria-selected=true], .abas.entrar__abas [aria-selected=true]:hover {
  background:var(--c-superficie); color:var(--c-primaria); box-shadow:0 1px 3px rgba(15,23,42,.12), 0 0 0 1px var(--c-borda);
}
.abas.entrar__abas [aria-selected=true]::after { content:none; }

/* senha com olho, para conferir o que foi digitado */
.entrar__senha { position:relative; }
.entrar__senha .entrada { padding-right:44px; }
.entrar__olho {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  border:0; background:transparent; color:var(--c-texto-fraco); cursor:pointer; border-radius:var(--r-sm);
}
.entrar__olho:hover { color:var(--c-texto); background:var(--c-fundo); }
.entrar__olho svg { width:18px; height:18px; }

/* Em telas menores a arte sai de cena: o que importa é entrar. */
@media (max-width:900px) {
  .entrar { grid-template-columns:1fr; }
  .entrar__arte { display:none; }
  .entrar__lado { padding:var(--s-6) var(--s-4); min-height:100vh; justify-content:flex-start; }
}
@media (max-width:480px) {
  .entrar__duas { grid-template-columns:1fr; }
}

/* =====================================================================
   Entrada do trabalhador (portal/login.php): código de acesso, senha e
   cadastro em etapas. Pensado para quem tem pouca familiaridade com
   tecnologia: campos e botões maiores, um objetivo por tela.
   ===================================================================== */
.pular-conteudo { position:absolute; left:-9999px; top:8px; z-index:20; background:var(--c-primaria); color:#fff;
  padding:10px 16px; border-radius:var(--r-md); font-weight:600; }
.pular-conteudo:focus { left:8px; }

.entrar__topo { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-5); }
.entrar__topo .entrar__logo { margin-bottom:0; }

.entrada--grande { min-height:46px; font-size:15.5px; }
.btn--grande { min-height:46px; font-size:15px; padding:0 22px; }
.entrar__enviar.btn--grande { margin-top:var(--s-3); }

.entrar__etapa { border:0; padding:0; margin:0; min-width:0; }
.entrar__etapa > legend.entrar__titulo { padding:0; float:left; width:100%; }
.entrar__etapa > legend + .entrar__sub { clear:both; }
.entrar__alternativa { text-align:center; margin:var(--s-4) 0 0; }
.entrar__linha-acoes { display:flex; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; margin-top:var(--s-4); }
.entrar__ajuda--centro { text-align:center; margin-top:var(--s-3); }

/* opções "receber por WhatsApp / e-mail" em cartões grandes */
.entrar__opcoes { border:0; padding:0; margin:0 0 var(--s-2); display:grid; gap:var(--s-3); }
.opcao-canal { display:flex; align-items:center; gap:var(--s-3); padding:14px 16px; border:1.5px solid var(--c-borda-forte);
  border-radius:var(--r-lg); cursor:pointer; background:var(--c-superficie); transition:border-color .12s, background .12s; }
.opcao-canal:hover { border-color:var(--c-primaria); }
.opcao-canal input { width:20px; height:20px; accent-color:var(--c-primaria); flex:none; margin:0; }
.opcao-canal:has(input:checked) { border-color:var(--c-primaria); background:var(--c-primaria-fraca); }
.opcao-canal:has(input:focus-visible) { outline:3px solid var(--c-primaria-clara); outline-offset:2px; }
.opcao-canal__icone { width:40px; height:40px; border-radius:var(--r-full); display:grid; place-items:center; flex:none;
  background:var(--c-primaria-clara); color:var(--c-primaria-escura); }
.opcao-canal__icone--zap { background:#E7F6EC; color:#1F8A4C; }
.opcao-canal__texto { display:flex; flex-direction:column; min-width:0; }
.opcao-canal__texto strong { font-size:15px; }
.opcao-canal__texto span { font-size:13.5px; color:var(--c-texto-medio); overflow-wrap:anywhere; }

/* código de 6 números: grande e espaçado, fácil de conferir */
.entrada--codigo { min-height:58px; font-size:28px; font-weight:700; letter-spacing:.5em; text-align:center;
  padding-left:.5em; font-variant-numeric:tabular-nums; }

/* etapas do cadastro */
.passos { list-style:none; margin:0 0 var(--s-5); padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-2); counter-reset:none; }
.passos__item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--c-texto-fraco); font-weight:500;
  padding-bottom:10px; border-bottom:3px solid var(--c-borda); }
.passos__num { width:26px; height:26px; border-radius:var(--r-full); display:grid; place-items:center; flex:none;
  border:2px solid var(--c-borda-forte); font-size:12.5px; font-weight:700; background:var(--c-superficie); }
.passos__item[aria-current="step"] { color:var(--c-primaria-escura); border-bottom-color:var(--c-primaria); font-weight:600; }
.passos__item[aria-current="step"] .passos__num { border-color:var(--c-primaria); background:var(--c-primaria); color:#fff; }
.passos__item.feito { color:var(--c-sucesso); border-bottom-color:var(--c-sucesso); }
.passos__item.feito .passos__num { border-color:var(--c-sucesso); background:var(--c-sucesso); color:#fff; }

.entrar__marcar { display:flex; align-items:flex-start; gap:10px; margin:0 0 var(--s-4); font-size:14px; line-height:1.45; cursor:pointer; }
.entrar__marcar input { width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--c-primaria); }
.entrar__duas--cep { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }

.termo { background:var(--c-fundo); border:1px solid var(--c-borda); border-radius:var(--r-lg); padding:var(--s-4); margin-bottom:var(--s-2); }
.termo__resumo { display:flex; gap:10px; margin:0 0 var(--s-3); font-size:13.5px; color:var(--c-texto-medio); line-height:1.5; }
.termo__resumo .ico { flex:none; margin-top:2px; color:var(--c-primaria); }
.termo .entrar__marcar { margin:0; }
.termo__texto { white-space:normal; font-size:14px; line-height:1.65; max-height:60vh; overflow:auto; }
.link-botao { border:0; background:none; padding:0; font:inherit; color:var(--c-primaria); text-decoration:underline; cursor:pointer; }

.entrar__navegacao { display:flex; gap:var(--s-3); margin-top:var(--s-4); }
.entrar__navegacao .btn { flex:1; }
.entrar__navegacao .btn[hidden] { display:none; }

.entrada.valido { border-color:var(--c-sucesso); }
.entrar__campo .entrada.invalido:focus { box-shadow:0 0 0 3px var(--c-erro-bg); }

@media (max-width:480px) {
  .passos__nome { display:none; }
  .passos__item { justify-content:center; }
  .entrar__duas--cep { grid-template-columns:1fr; }
  .entrada--codigo { font-size:24px; letter-spacing:.35em; }
}

/* "Não lembra a senha?" — saída clara para quem esqueceu (trabalhador e empresa) */
.entrar__esqueci { display:flex; flex-direction:column; align-items:center; gap:var(--s-2); margin-top:var(--s-5);
  padding-top:var(--s-4); border-top:1px solid var(--c-borda); font-size:14px; color:var(--c-texto-medio); }
.entrar__esqueci .btn { width:100%; justify-content:center; min-height:44px; }