/* ui/login.css — a portaria do painel: a Recepção (spec
   docs/superpowers/specs/2026-10-04-robo-e-portaria-design.md, Parte 2; o desenho aprovado é
   marca/propostas/robo-casa/portaria/index.html).
   Mesmo regime CLARO e mesmos tokens do style.css, mas em arquivo à parte de propósito: a
   tela de login é a única página pública do Balcão, e ela não precisa carregar o CSS do
   painel inteiro pra desenhar um cartão.
   O cartão fica no centro exato da tela; o robô recepcionista é ancorado nele (fora do fluxo),
   de pé à esquerda, com a mão que acena NA FRENTE do cartão. Abaixo de 960 px ele vira a cabeça
   que espia por cima da borda do cartão. Os robôs entram SÓ por <img> no login.html, nunca por
   imagem de fundo aqui: o guarda do UI_PUBLICO (_analise/test_marca.py) só lê o HTML. */
:root{
  --papel:#F5F8FB; --branco:#FFFFFF; --tinta:#0E2233; --apoio:#42586B; --linha:#DCE7F1;
  --linha-campo:#7A8EA1;   /* 3,38:1 sobre o branco: a borda do campo passa o WCAG 1.4.11 (3:1) */
  --acento:#2F6FED; --acento-escuro:#2560D8; --erro:#B4231D;
  --erro-fundo:rgba(180,35,29,.06); --anel:rgba(47,111,237,.22);
  --d:'Bricolage Grotesque',system-ui,sans-serif; --b:'Inter',system-ui,sans-serif;
  --m:'JetBrains Mono',ui-monospace,monospace;
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px;
  --r:16px;                /* o raio de antes da Recepção: sem uso, fica como os outros de hoje */
  --r-md:12px; --r-xl:24px;
  --sombra-cartao:0 1px 2px rgba(14,34,51,.06),0 24px 56px rgba(14,34,51,.10);
  --ease:cubic-bezier(.16,1,.3,1);
  /* o robô: lado do quadro 640 do SVG. A caixa visível dele é 189–473 × 89–551 (da antena à sola),
     então a 576 ele fica com 256 × 416 — secundário ao cartão, que tem 512 de altura */
  --robo:576px;
}
*{box-sizing:border-box}
html{background:var(--papel)}
body{margin:0;min-height:100vh;min-height:100dvh;padding:var(--e5) var(--e3);background:var(--papel);
  color:var(--tinta);font-family:var(--b);font-size:16px;line-height:1.5;
  display:flex;-webkit-font-smoothing:antialiased}

/* o palco é do tamanho do cartão: margin:auto centraliza o CARTÃO na tela (não o par robô +
   cartão) e, quando não cabe (formulário do primeiro administrador), encosta no topo e rola —
   a regra do flexbox zera a margem automática quando o espaço é negativo, então o topo do
   cartão nunca some fora do alcance da rolagem */
.palco{position:relative;margin:auto;width:440px}

/* ---------- o recepcionista (computador) ---------- */
/* ancorado no canto inferior esquerdo do cartão: right:100% põe ele do lado de fora, a margem
   negativa traz 32 px pra dentro (a mão que acena passa na frente da borda) e bottom:0 põe a sola
   dos pés na mesma linha da base do cartão. O aceno não anima (decisão J de 04/10): só a entrada */
.recepcionista{position:absolute;right:100%;bottom:0;margin-right:-32px;z-index:2;
  width:calc(var(--robo) * .4438);              /* 284/640 */
  height:calc(var(--robo) * .7219);             /* 462/640 */
  pointer-events:none;
  animation:entrar .9s var(--ease) .15s both}
/* a sombra tingida na tinta descola o corpo branco do papel e a mão branca do cartão branco */
.recepcionista img{position:absolute;display:block;width:var(--robo);height:var(--robo);
  max-width:none;left:calc(var(--robo) * -.2953);top:calc(var(--robo) * -.1391);
  filter:drop-shadow(0 4px 8px rgba(14,34,51,.12))}
.espia{display:none}

/* ---------- o cartão ---------- */
/* superfície por FILL + SHADOW, sem borda */
.cartao{position:relative;z-index:1;width:100%;background:var(--branco);
  border-radius:var(--r-xl);box-shadow:var(--sombra-cartao);padding:var(--e5);
  animation:entrar .7s var(--ease) both}

.nome{margin:0;display:flex;align-items:center;gap:var(--e1);
  font-family:var(--d);font-weight:800;font-size:40px;line-height:40px;letter-spacing:-1.4px}
/* a comanda é o /ui/comanda.svg de sempre, no quadro de 64 (o mesmo do topo do painel). O
   recorte é daqui: a 22×32 o cover escala o quadro a 32 px e corta 5 px de cada lado — os 10 u
   de folga em volta do desenho —, então o desenho começa no eixo do texto */
.nome .simbolo{width:22px;height:32px;flex:none;object-fit:cover}
.sub{margin:var(--e1) 0 0;font-size:16px;line-height:24px;color:var(--apoio)}

.forma{display:flex;flex-direction:column;gap:var(--e3);margin-top:var(--e5)}
.forma[hidden]{display:none}   /* sem isto o display:flex ganharia do [hidden] do navegador */
label[hidden]{display:none}   /* idem: o label é flex, e o campo da provisória some e volta */
.forma h2{margin:0;font-family:var(--d);font-weight:600;font-size:22px;line-height:32px;letter-spacing:-.3px}
.aviso{margin:calc(var(--e2) * -1) 0 0;font-size:15px;line-height:24px;color:var(--apoio);max-width:60ch}

label{display:flex;flex-direction:column;gap:var(--e1);
  font-family:var(--m);font-weight:600;font-size:12px;line-height:16px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--apoio)}
/* a dica de onde achar o código de adoção, embaixo do campo */
.ajuda{font-family:var(--b);font-weight:400;font-size:13px;line-height:16px;letter-spacing:0;
  text-transform:none}
.ajuda code{font-family:var(--m);font-size:12px}

/* campo: branco como o cartão e separado só pela borda (nunca fundo + borda).
   5 estados: repouso, hover, foco, inválido (depois de mexer) e desabilitado */
input{font:inherit;font-family:var(--b);font-size:16px;font-weight:400;letter-spacing:0;
  text-transform:none;width:100%;height:48px;padding:0 var(--e2);
  color:var(--tinta);background:var(--branco);border:1px solid var(--linha-campo);
  border-radius:var(--r-md);outline:0 solid transparent;
  transition:border-color .25s var(--ease),outline-width .25s var(--ease)}
input:hover{border-color:var(--apoio)}
input:user-invalid{border-color:var(--erro)}
input:focus{border-color:var(--acento);outline:3px solid var(--anel)}
input:disabled{color:var(--apoio);border-color:var(--linha);cursor:not-allowed}

/* botão: 5 estados — repouso, hover, foco, pressionado e trabalhando.
   Repouso é branco sobre #2F6FED (4,55:1, no limite do AA): nada de opacidade nem gradiente nele */
.btn{position:relative;overflow:hidden;margin-top:var(--e1);height:48px;width:100%;
  font:inherit;font-weight:600;font-size:16px;color:var(--branco);background:var(--acento);
  border:0;border-radius:var(--r-md);cursor:pointer;
  transition:background-color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:var(--acento-escuro)}
.btn:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.btn:active{transform:scale(.97)}
/* V6 do briefing: "Entrando…" fica branco sobre o acento-escuro, 5,61:1 (era 2,04:1, o azul
   lavado de antes). O botão continua azul — trabalhando, não desligado — e a barrinha que corre
   embaixo diz que o servidor está pensando */
.btn:disabled{background:var(--acento-escuro);color:var(--branco);cursor:progress;transform:none}
.btn:disabled::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:40%;
  background:rgba(255,255,255,.55);animation:correr 1.2s var(--ease) infinite}

.erro{margin:0;padding:var(--e1) var(--e2);font-size:14px;line-height:20px;color:var(--erro);
  background:var(--erro-fundo);border-radius:var(--r-md)}
.erro[hidden]{display:none}

.rodape{margin:var(--e3) 0 0;font-size:14px;line-height:20px;color:var(--apoio)}

@keyframes entrar{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes correr{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* ---------- até 960: a cabeça espia por cima do cartão ---------- */
/* 960 ≈ (220 + 256) × 2: metade do cartão mais o robô inteiro, dos dois lados do centro. O
   --robo não encolhe: abaixo daqui o robô de corpo inteiro some de vez */
@media (max-width:960px){
  body{padding:var(--e3) var(--e2) var(--e4)}
  .palco{width:100%;max-width:440px;display:flex;flex-direction:column}
  .recepcionista{display:none}
  /* sem disco e sem sombra (o disco lia como "foto de perfil"); alinhada à direita pra não
     disputar com o nome; metade sobre o cartão, na frente dele */
  .espia{display:block;position:relative;z-index:2;align-self:flex-end;
    width:72px;height:64px;margin:0 var(--e4) -32px 0;
    animation:entrar .9s var(--ease) .15s both}
  .espia img{display:block;width:100%;height:100%}
  .cartao{padding:var(--e4)}
  .nome{font-size:32px;line-height:32px}
  /* a comanda acompanha o nome (32/40): 26 de altura, ~10% acima das maiúsculas, como no
     computador. O aspect-ratio é o que mantém o recorte: com width:auto e só a proporção do
     quadro (1:1), a caixa sairia 26×26 e o cover não cortaria nada */
  .nome .simbolo{width:auto;height:26px;aspect-ratio:22/32}
  .forma{margin-top:var(--e4)}
}
/* celular: o cartão encosta no topo em vez de centralizar — com o teclado aberto (~336 px) o
   "Entrar" continua à vista enquanto a pessoa digita a senha */
@media (max-width:600px){
  .palco{margin:0 auto}
}
/* "Esqueci minha senha" (spec 2026-10-06): um <details> discreto embaixo do Entrar. O resumo é
   texto no acento (é um caminho, não uma ação); o que ele abre é texto de apoio, no tamanho do
   .aviso. Sem transição: a portaria só move a entrada e a barrinha. */
.esqueci{margin-top:var(--e3);font-size:15px;line-height:24px;color:var(--apoio)}
.esqueci summary{width:max-content;cursor:pointer;font-weight:500;color:var(--acento)}
.esqueci summary:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:var(--r-md)}
.esqueci p{margin:var(--e1) 0 0;max-width:60ch}
/* o "Sair" do passo da troca: botão de texto — o azul cheio é só do "Criar minha senha" */
.link{align-self:center;padding:var(--e1);background:none;border:0;font:inherit;font-size:15px;
  color:var(--apoio);text-decoration:underline;cursor:pointer}
.link:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:var(--r-md)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}