/* A tela de entrada da intranet: painel de marca a esquerda, formulario a direita.

   Servida pelo app, sem saida para a internet: as duas fontes sao locais
   (/estatico/fonts), nao do Google Fonts. Um @import de CDN aqui nao falharia com erro --
   simplesmente nao carregaria, e a tela chegaria sem tipografia.

   A CSP do app e `style-src 'self' 'nonce-...'`, sem 'unsafe-inline': todo estilo mora neste
   arquivo, nunca em atributo `style=` no markup (que seria descartado em silencio). */

@font-face { font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap;
             src:url('/estatico/fonts/montserrat.woff2') format('woff2'); }
@font-face { font-family:'Syne'; font-style:normal; font-weight:400 800; font-display:swap;
             src:url('/estatico/fonts/syne.woff2') format('woff2'); }

:root{
  --navy:#0a1622; --green:#008f6b; --green-2:#00785a; --green-3:#22b58c;
  --bg:#f4f6f3; --card:#ffffff; --tinta:#1b2621; --suave:#697770; --linha:#e6e9e3; --campo:#ffffff;
  --erro:#c05540; --erro-bg:#f8ece8;
  --fonte:'Montserrat','Open Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Syne','Montserrat',-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
/* O tema padrao da plataforma e o CLARO, e ele NAO segue o sistema operacional -- igual ao
   resto da intranet (app/web/static/css/previa.css nao tem prefers-color-scheme nenhum). Escuro
   so entra quando a pessoa escolhe, e a escolha vira data-theme="dark" no <html>. Um
   @media (prefers-color-scheme:dark) aqui faria a porta da empresa chegar escura para quem tem
   o Windows no escuro, e clara em toda tela seguinte -- a incoerencia apareceria no login. */
:root[data-theme="dark"]{
  --bg:#0b1219; --card:#141f2b; --tinta:#e9edea; --suave:#95a0a8; --linha:#26333f; --campo:#0e1a24;
  --green:#1ec090; --green-2:#46d6a9; --erro:#e88a78; --erro-bg:#382019; color-scheme:dark;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--bg); color:var(--tinta); font:400 15px/1.5 var(--fonte); -webkit-font-smoothing:antialiased;}
.tela{min-height:100%; display:grid; grid-template-columns:.95fr 1.05fr;}
@media(max-width:1080px) and (min-width:861px){ .tela{grid-template-columns:.8fr 1.2fr;} }
@media(max-width:860px){ .tela{grid-template-columns:1fr;} }

/* ---------- painel de marca ---------- */
.marca{position:relative; overflow:hidden; background:radial-gradient(125% 95% at 18% 12%, #17415e 0%, #0e2338 45%, #0a1622 100%); color:#fff; display:flex; flex-direction:column; padding:38px 44px;}
.marca::before{content:""; position:absolute; top:-10%; right:-10%; width:60%; height:55%; background:radial-gradient(circle at 70% 30%, rgba(30,192,144,.16), transparent 65%); pointer-events:none; z-index:0;}
.marca .topo{display:flex; align-items:center; gap:14px;}
.marca .logo{height:30px; width:auto;}
.marca .mid{margin-top:auto; margin-bottom:auto; max-width:440px;}
.marca .eyebrow{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-3); font-weight:700;}
.marca .mh{font-family:var(--display); font-size:2.7rem; font-weight:800; line-height:1.08; letter-spacing:-.035em; margin:14px 0 0; text-wrap:balance;}
.marca .mh .g{color:var(--green-3);}
.marca .tag{margin:18px 0 0; font-size:1.04rem; color:#c2cdd6; max-width:400px; line-height:1.55;}
.pilares{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px;}
.pilares span{display:inline-flex; align-items:center; gap:7px; font-size:.84rem; color:#aeb8c4;}
.pilares span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green-3);}
.marca .rodape{font-size:.78rem; color:#7d8a99; letter-spacing:.02em;}
.serra{position:absolute; left:0; right:0; bottom:0; width:100%; height:42%; z-index:0; opacity:.9;}
.marca .topo,.marca .mid,.marca .rodape{position:relative; z-index:1;}

/* ---------- painel de formulario ---------- */
.form-wrap{display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--bg);}
.form{width:100%; max-width:392px; background:var(--card); border:1px solid var(--linha); border-radius:18px; padding:32px 30px 30px; box-shadow:0 1px 2px rgba(8,17,28,.05), 0 10px 24px -16px rgba(8,17,28,.22);}
.form .logo-mob{display:none;}
.form .titulo{font-family:var(--display); font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin:0 0 4px;}
.form .oi{color:var(--suave); font-size:.95rem; margin:0 0 26px;}
.form > label{display:block; font-weight:600; font-size:.82rem; margin:16px 0 7px;}
.campo{display:flex; align-items:center; gap:10px; border:1px solid var(--linha); border-radius:10px; background:var(--campo); padding:0 12px; transition:border-color .12s, box-shadow .12s;}
.campo:focus-within{border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);}
.campo svg{width:17px; height:17px; color:var(--suave); flex:0 0 auto;}
.campo input{flex:1; min-width:0; border:0; outline:0; background:transparent; color:inherit; font:inherit; padding:13px 0;}
.btn{width:100%; margin-top:24px; padding:14px; font:inherit; font-weight:600; font-size:1rem; color:#fff; background:var(--green); border:0; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .12s;}
.btn:hover{background:var(--green-2);}
.aviso{margin-top:22px; font-size:.85rem; color:var(--suave); line-height:1.5;}
.aviso + .aviso{margin-top:10px;}
.aviso a{color:var(--green-2); font-weight:600; text-decoration:none;}
.aviso a:hover{text-decoration:underline;}
.dica-bloqueio{display:flex; gap:8px; margin-top:20px; padding:10px 12px; font-size:.8rem;
  line-height:1.45; color:var(--suave); background:color-mix(in srgb, var(--green) 7%, transparent);
  border:1px solid var(--linha); border-radius:9px;}
.dica-bloqueio svg{flex:0 0 auto; margin-top:2px; color:var(--green);}
.dica-bloqueio b{color:var(--tinta); font-weight:600;}
.selo{display:inline-flex; align-items:center; gap:7px; margin-top:28px; font-size:.76rem; color:var(--suave);}
.selo svg{width:14px;height:14px;color:var(--green);}
:focus-visible{outline:2px solid var(--green); outline-offset:2px;}

/* A faixa de recado (erro de login, senha trocada, sessao expirada). So existe no markup quando
   ha recado: o erro chega num carregamento NOVO da pagina, depois do POST, e nunca aparece no
   lugar -- entao reservar altura vazia nao evita salto nenhum e deixa um buraco visivel no
   celular, onde o cartao ocupa a tela toda. */
.alerta{margin:0 0 14px; font-size:.84rem; line-height:1.4; color:var(--erro);
        background:var(--erro-bg); border-radius:9px; padding:9px 12px;}
.alerta.ok{color:var(--green-2); background:color-mix(in srgb, var(--green) 12%, transparent);}
.alerta.atencao{color:#8a5a00; background:#fbf1dd;}
:root[data-theme="dark"] .alerta.atencao{color:#e8b866;}
:root[data-theme="dark"] .alerta.atencao:not(:empty){background:#2e2410;}

@media(max-width:860px){
  .marca{display:none;}
  .form .logo-mob{display:flex; align-items:center; gap:12px; justify-content:center; background:var(--navy); width:100vw; margin:-32px calc(50% - 50vw) 30px; padding:22px; border-bottom:2px solid var(--green);}
  .form .logo-mob img{height:26px; width:auto;}
}

/* ---------- as telas IRMAS do login (porta.html): segundo fator, trocar a senha, esqueci a senha,
   convite/primeiro acesso, codigos de recuperacao, confirmar o autenticador ----------
   O CONTEUDO delas e o de sempre (campos soltos dentro do <form>, sem o .campo do login): aqui o mesmo
   visual, escopado em .form.porta -- nada do que o login usa e alterado. Sem `style=` no markup (a CSP). */
.form.porta.larga{max-width:460px;}
.form.porta h1{font-family:var(--display); font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin:0 0 14px; line-height:1.2;}
.form.porta h2{font-size:1.02rem; font-weight:600; margin:22px 0 8px;}
.form.porta p{margin:0 0 12px; font-size:.95rem; line-height:1.55;}
.form.porta .suave{color:var(--suave); font-size:.86rem;}
.form.porta a{color:var(--green-2); font-weight:600; text-decoration:none;}
.form.porta a:hover{text-decoration:underline;}
.form.porta label{display:block; font-weight:600; font-size:.82rem; margin:16px 0 7px;}
.form.porta input[type=text],.form.porta input[type=password],.form.porta input[type=number]{
  display:block; width:100%; padding:13px 12px; font:inherit; color:inherit; background:var(--campo);
  border:1px solid var(--linha); border-radius:10px; transition:border-color .12s, box-shadow .12s;}
.form.porta input[type=text]:focus,.form.porta input[type=password]:focus,.form.porta input[type=number]:focus{
  outline:0; border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);}
.form.porta button{width:100%; margin-top:24px; padding:14px; font:inherit; font-weight:600; font-size:1rem;
  color:#fff; background:var(--green); border:0; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .12s;}
.form.porta button:hover{background:var(--green-2);}
/* o recado das telas irmas vem de _mensagem.html (div.aviso.erro|ok|atencao, o mesmo das outras telas) --
   aqui com a cara do .alerta do login. O .aviso "mudo" do login (paragrafo) nao tem estas classes. */
.form.porta .aviso{margin:0 0 14px; padding:9px 12px; font-size:.84rem; line-height:1.4; border-radius:9px;}
.form.porta .aviso.erro{color:var(--erro); background:var(--erro-bg);}
.form.porta .aviso.ok{color:var(--green-2); background:color-mix(in srgb, var(--green) 12%, transparent);}
.form.porta .aviso.atencao{color:#8a5a00; background:#fbf1dd;}
:root[data-theme="dark"] .form.porta .aviso.atencao{color:#e8b866; background:#2e2410;}
.form.porta code,.form.porta .codigo{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;}
.form.porta .segredo{word-break:break-all;}
.form.porta ol.codigos{columns:2; padding-left:1.4em; font-size:1.02rem; margin:0 0 14px;}
.form.porta .qr{display:block; width:200px; height:200px; margin:14px auto; image-rendering:pixelated;
  background:#fff; padding:8px; border-radius:10px; border:1px solid var(--linha);}
@media(max-width:860px){ .form.porta{max-width:460px;} }
.form.porta form + p{margin-top:18px;}

/* ---------- o hero do painel de marca: video de fundo (quando houver o arquivo) e a palavra que se digita ----------
   Referencia: o hero do site da empresa (video em loop com veu escuro, "Alto" + uma palavra que se digita). */
.marca .fundo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity .9s ease;}
.marca.tocando .fundo{opacity:1;}
.marca .veu{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,20,32,.66) 0%, rgba(8,20,32,.5) 38%, rgba(8,20,32,.82) 100%);
  opacity:0; transition:opacity .9s ease;}
.marca.tocando .veu{opacity:1;}
.marca.tocando .serra{opacity:0; transition:opacity .9s ease;}
.digita-linha{font-family:var(--display); font-size:3.3rem; font-weight:800; line-height:1.05; letter-spacing:-.04em;
  margin:14px 0 0; min-height:1.1em;}
.digita-linha .g{color:var(--green-3);}
.digita-linha .cursor{display:inline-block; width:4px; height:.85em; margin-left:5px; vertical-align:-.06em;
  background:var(--green-3); animation:pisca 1.05s steps(1) infinite;}
@keyframes pisca{50%{opacity:0;}}
.marca .mh.sub{font-size:1.28rem; font-weight:700; letter-spacing:-.02em; margin-top:14px; color:#dfe7ee;}
/* texto para leitor de tela: fora da vista, mas presente */
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
@media (prefers-reduced-motion: reduce){
  .digita-linha .cursor{animation:none;}
  .marca .fundo,.marca .veu,.marca.tocando .serra{transition:none;}
}