/* ==========================================================================
   A PORTA · entrar, primeiro acesso, esqueci, nova senha, exclusão de conta
   direção 7 "Clean" (dono, 06/10/2026) — fase 3b
   --------------------------------------------------------------------------
   Folha de tela, ligada pelo `{% block folhas %}` de entrar, definir_senha,
   esqueci_senha, nova_senha, trocar_senha e excluir_conta. Carrega DEPOIS de
   estilo.css e reveste a porta que já existia (`.entrada`, `.porta-*`,
   `.chave-porta`, `.app-legal`) sem tocar as seções de base.

   A tese: a porta é a mesma folha do resto da ferramenta — fundo claro, o
   formulário num papel branco com UMA sombra, logotipo em tinta. A senoide
   continua coral aqui, e só aqui (DESIGN.md: "na porta de entrada continua
   coral"): é a assinatura da marca na soleira, não um alarme. O botão Entrar
   é o único primário; o erro é palavra, sem caixa vermelha.
   Classe nova com prefixo `porta-`; tempo só --t1/--t2/--t3 com --curva.
   ========================================================================== */

/* ---------- a caixa: papel sobre a folha ---------------------------------- */
.entrada{background:var(--fundo)}
.entrada .caixa{width:min(420px,100%);background:var(--painel);border:0;border-radius:var(--r4);
  padding:var(--e6);box-shadow:var(--sombra)}
:root[data-tema="escuro"] .entrada .caixa{box-shadow:var(--sombra-alta)}
.entrada .marca{padding:0 0 var(--e5)}
.entrada .sub{font-size:var(--letra-corpo);color:var(--tinta2);margin:0 0 var(--e2)}
/* o rótulo visível acima do campo cheio é o que o identifica */
.entrada label{display:block;font-size:var(--letra-nota);font-weight:500;color:var(--tinta2);
  margin:var(--e4) 0 var(--e2)}
.entrada input[type=text],.entrada input[type=email],.entrada input[type=password]{
  font-size:var(--letra-corpo)}
/* o único primário: tinta, largura toda, 48 px; 56 no toque */
.entrada button[type=submit]{width:100%;min-height:48px;margin-top:var(--e5);justify-content:center;
  font-size:var(--letra-corpo)}
.entrada button.leve{margin-top:var(--e3)}
/* o erro é palavra: coral no texto, nada de caixa */
.entrada .erro{background:none;padding:0;margin:var(--e3) 0 0;border-radius:0;
  color:var(--critico);font-size:var(--letra-nota);font-weight:500;line-height:1.45}
.entrada .rodape{color:var(--tinta3);line-height:1.5}
.entrada .rodape a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

/* ---------- a porta com a marca (Placa & Prancha, dono, 02/11/2026) --------
   "Algo fininho, elegante, que passe a melhor credibilidade na primeira vista."
   À esquerda, o marinho do trilho em tela cheia: o INDU Intelligence se
   escreve (as ranhuras sobem quando a onda passa, a senoide se desenha), a
   frase em Archivo leve e o sinal do estator atravessando embaixo. À direita,
   a folha branca sem caixa: o formulário mora no papel, em traço fino. */
.entrada.com-marca{background:var(--painel)}
.entrada.com-marca > .caixa{background:transparent;box-shadow:none;border-radius:0;
  padding:var(--e7) var(--e6);width:min(400px,100%)}
.entrada-marca{background:var(--trilho);color:var(--trilho-tinta);padding:var(--e7) var(--e7) var(--e6)}
.entrada-marca .logo-indu{max-width:260px}
.entrada-marca .logo-tinta{fill:var(--trilho-marca)}
.entrada-marca .logo-apoio{display:none}
.entrada-marca .logo-ranhura{opacity:.64}
/* a senoide do logotipo é o salmão da marca na porta (assinatura) */
.entrada-marca .logo-senoide{stroke:var(--senoide)}
.entrada-marca-logo{display:flex;flex-direction:column;gap:var(--e2)}
.porta-nome{font-size:var(--letra-nota);font-weight:500;letter-spacing:.38em;text-transform:uppercase;
  color:var(--trilho-tinta2);margin-top:calc(-1 * var(--e6))}
.entrada-marca-frase{font-family:var(--fonte-titulo);font-size:var(--letra-placar);font-weight:300;
  letter-spacing:-.03em;line-height:1.08;color:var(--trilho-marca);max-width:16ch;
  animation:porta-surge calc(2 * var(--t3)) var(--curva) calc(2 * var(--t3)) backwards}
.entrada-marca-apoio{color:var(--trilho-tinta);max-width:38ch;
  animation:porta-surge calc(2 * var(--t3)) var(--curva) calc(3 * var(--t3)) backwards}
/* o sinal: as ranhuras do estator acendem quando a onda salmão passa e
   descansam um degrau acima do marinho */
.entrada-sinal-ranhuras rect{fill:var(--trilho-linha)}
.entrada-sinal-onda{stroke:var(--senoide)}
@keyframes entrada-ranhura{0%{fill:var(--trilho-linha)}45%{fill:var(--trilho-aceso)}100%{fill:var(--trilho2)}}
@media (prefers-reduced-motion:reduce){
  .entrada-sinal-ranhuras rect{fill:var(--trilho2)}
}
/* a marca se escreve ao abrir a porta: o gesto da partida, em escala de porta */
.entrada-marca .logo-ranhura rect{transform-box:fill-box;transform-origin:50% 100%;
  animation:porta-barra var(--t3) var(--curva) backwards}
.entrada-marca .logo-ranhura rect:nth-child(2){animation-delay:90ms}.entrada-marca .logo-ranhura rect:nth-child(3){animation-delay:180ms}
.entrada-marca .logo-ranhura rect:nth-child(4){animation-delay:270ms}.entrada-marca .logo-ranhura rect:nth-child(5){animation-delay:360ms}
.entrada-marca .logo-ranhura rect:nth-child(6){animation-delay:450ms}.entrada-marca .logo-ranhura rect:nth-child(7){animation-delay:540ms}
.entrada-marca .logo-ranhura rect:nth-child(8){animation-delay:630ms}.entrada-marca .logo-ranhura rect:nth-child(9){animation-delay:720ms}

@keyframes porta-barra{from{opacity:0;transform:scaleY(.25)}}
@keyframes porta-surge{from{opacity:0;transform:translateY(var(--e2))}}
/* a folha do formulário: título leve, rótulo fino, campo de 48 px em traço */
.porta-ola{margin:0 0 var(--e1);font-family:var(--fonte-titulo);font-size:var(--letra-numero);font-weight:300;
  letter-spacing:-.025em;line-height:1.1;color:var(--tinta)}
.porta-caixa .sub{color:var(--tinta3);margin:0 0 var(--e5)}
.porta-caixa input[type=text],.porta-caixa input[type=password]{min-height:48px;background-color:var(--painel2);
  border:1px solid var(--painel2);border-radius:var(--r2);transition:border-color var(--t1) var(--curva),box-shadow var(--t1) var(--curva)}
.porta-caixa input[type=text]:hover,.porta-caixa input[type=password]:hover{background-color:var(--painel3);border-color:var(--painel3)}
.porta-caixa input[type=text]:focus,.porta-caixa input[type=password]:focus{border-color:var(--tinta);
  box-shadow:0 0 0 3px var(--painel2);outline:none}
.porta-caixa label{font-weight:400;color:var(--tinta3)}
.porta-rodape{margin:var(--e6) 0 0;padding-top:var(--e4);border-top:1px solid var(--linha);font-size:var(--letra-nota);
  color:var(--tinta3);display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap}

/* ---------- "sou do time" / "sou cliente": texto; o aceso vira pílula ------ */
.porta-escolha{gap:var(--e1);margin:var(--e1) 0 var(--e5)}
.porta-caixa .porta-opcao{border:0;background:transparent;border-radius:var(--r2);
  min-height:64px;padding:var(--e3);
  transition:background var(--t1) var(--curva)}
.porta-caixa .porta-opcao:hover{background:var(--painel2)}
.porta-caixa .porta-opcao b{color:var(--tinta2);font-weight:500}
.porta-caixa .porta-opcao span{color:var(--tinta3)}
#quem-time:checked ~ .porta-escolha [for=quem-time],
#quem-cliente:checked ~ .porta-escolha [for=quem-cliente]{border:0;background:var(--painel2)}
#quem-time:checked ~ .porta-escolha [for=quem-time] b,
#quem-cliente:checked ~ .porta-escolha [for=quem-cliente] b{color:var(--tinta);font-weight:600}
/* o Portal do Cliente: sem degradê; a senoide coral continua se desenhando */
.porta-caixa .porta-portal{background:transparent}
.porta-caixa .porta-portal:hover{border-color:transparent;background:var(--painel2)}
#quem-cliente:checked ~ .porta-escolha .porta-portal{background:var(--painel2)}
.porta-portal-ranhura rect{fill:var(--tinta3)}
.porta-texto{color:var(--tinta2)}
.porta-titulo{font-family:var(--fonte-titulo);font-size:var(--letra-forte);font-weight:600;
  letter-spacing:-.01em}
/* "Esqueci minha senha": link em tinta, com alvo de 44 px */
.porta-ajuda{color:var(--tinta);font-weight:500;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linha);transition:text-decoration-color var(--t1) var(--curva)}
.porta-ajuda:hover{color:var(--tinta);text-decoration:underline;text-decoration-color:currentColor}
.porta-ajuda-nota{font-size:var(--letra-nota);color:var(--tinta3)}
/* "Criar meu acesso": o primário do lado do cliente, em tinta */
.porta-botao{background:var(--tinta);color:var(--painel);border-radius:var(--r2);min-height:48px;
  line-height:48px;font-weight:500;transition:background var(--t1) var(--curva)}
.porta-botao:hover{background:var(--tinta2)}
.porta-caminho{border-bottom:1px solid var(--linha)}
.porta-socorro{border-top:1px solid var(--linha)}
.porta-socorro summary{color:var(--tinta2)}
.porta-socorro summary::before{content:none}
/* passkey: secundário em campo cheio; "ou entre sem senha" em caixa normal */
.chave-porta{margin-top:var(--e5)}
.chave-ou{text-transform:none;letter-spacing:0;font-size:var(--letra-nota);color:var(--tinta3)}
.chave-entrar{background:var(--painel2);color:var(--tinta);border:0;border-radius:var(--r2);
  min-height:48px;font-weight:500;transition:background var(--t1) var(--curva)}
.chave-entrar:hover{background:var(--painel3)}
.chave-nota{color:var(--tinta3)}
.chave-nota a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

/* ---------- exclusão de conta: tipografia de leitura ---------------------- */
.app-legal{max-width:68ch;color:var(--tinta);line-height:1.6}
.app-legal h1{font-family:var(--fonte-titulo);font-size:var(--letra-numero);font-weight:400;
  letter-spacing:-.02em;line-height:1.15}
.app-legal h2{font-family:var(--fonte-titulo);font-size:var(--letra-forte);font-weight:600;
  letter-spacing:-.01em}
.app-legal a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.app-legal-data{color:var(--tinta3)}

/* ---------- respostas ---------------------------------------------------- */
@media (max-width:900px){
  .entrada.com-marca{background:var(--fundo)}
  .entrada-marca{padding:var(--e5) var(--e4) var(--e4)}
  .entrada-marca-frase{font-size:var(--letra-secao)}
  /* o logotipo encolhe para 180 px e o "INTELLIGENCE" subia até encostar no
     INDU: no celular o recuo é de 12 px, não 32 */
  .porta-nome{margin-top:calc(-1 * var(--e3))}
  .entrada.com-marca > .caixa{width:min(420px,calc(100% - 2 * var(--e4)));margin:0 auto var(--e5);
    padding:var(--e5) var(--e4) var(--e6)}
}
@media (max-width:700px){
  .entrada{padding:var(--e4)}
  .entrada .caixa{padding:var(--e5) var(--e4) var(--e6)}
  /* no celular o botão tem 56 px: polegar, não cursor */
  .entrada button[type=submit],.porta-botao,.chave-entrar{min-height:var(--toque-luva)}
  .porta-botao{line-height:var(--toque-luva)}
  .app-legal h1{font-size:var(--letra-secao)}
}