/* ============================================================================
   aurora-login.css — Transição LOGIN -> PAINÉIS (#login-splash)

   O splash e filho direto do <body> (fora de qualquer view), por isso o markup
   recebe class="aur": sem ela o kit nao o alcanca. Substitui o <style> inline
   que vivia dentro de auth.js, com hex chapado (#191f0e/#586d34) e !important
   sobrescrevendo o proprio css/06-blocks.css.

   Objetivo da transicao: o splash deve parecer a MESMA superficie que o painel
   de destino — mesma aurora, mesmo vidro, mesma tipografia — para a passagem
   ser continua em vez de um corte entre dois visuais diferentes.
   Carregar por ULTIMO.
   ============================================================================ */

#login-splash{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .42s ease, backdrop-filter .42s ease;
}
#login-splash.is-hidden{ opacity:0; pointer-events:none; visibility:hidden }

/* fundo: a MESMA aurora do app, para o painel surgir por tras sem troca de cena */
#login-splash .login-splash-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 10% -5%, #ebf2e0 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 0%, #edf5e1 0%, transparent 50%),
    linear-gradient(160deg,#f3f7eb 0%, #ebf2e0 45%, #eff2ea 100%);
}
body.theme-dark #login-splash .login-splash-bg{
  background:
    radial-gradient(120% 90% at 8% -5%, #2e3423 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 0%, #2c3221 0%, transparent 50%),
    linear-gradient(160deg,#21261a 0%, #252a1c 48%, #292f1f 100%);
}
/* o pseudo-elemento decorativo do CSS legado nao entra no Aurora */
#login-splash .login-splash-bg::before,
#login-splash .login-splash-bg::after{ content:none }

/* ---------------------------------------------------------------------------
   COREOGRAFIA. A entrada e um ACOLHIMENTO: o brilho abre, o cartao sobe e os
   elementos entram em cascata (selo -> saudacao -> nome -> etapa -> barra).
   A saida e uma PASSAGEM: em vez de sumir, o cartao AVANCA na direcao de quem
   olha e desfoca, enquanto o painel emerge por tras — a sensacao e de atravessar
   uma porta, nao de uma tela apagando.
   --------------------------------------------------------------------------- */

/* brilho que respira atras do cartao */
#login-splash .ls-bloom{
  position:absolute; width:min(620px,80vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(92,111,58,.22), rgba(143,175,87,.1) 45%, transparent 70%);
  filter:blur(30px); animation:lsBloom 3.4s ease-in-out infinite; pointer-events:none;
}
@keyframes lsBloom{ 0%,100%{ transform:scale(1); opacity:.75 } 50%{ transform:scale(1.12); opacity:1 } }

/* cartao central: mesmo vidro do kit */
#login-splash .login-splash-content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:34px 44px 30px; border-radius:24px; text-align:center;
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.5);
  animation:lsIn .6s cubic-bezier(.22,.9,.3,1) both;
}
/* cada filho entra no seu tempo (o --d vem inline no markup) */
#login-splash .login-splash-content > *{ animation:lsUp .5s cubic-bezier(.22,.9,.3,1) both; animation-delay:var(--d,0s) }

/* ---- co-marca: quem opera (AllRegTech) e quem e o orgao (Prefeitura) ----
   As duas logos entram juntas e em pe de igualdade, separadas por um fio: e a
   assinatura institucional da tela. O selo de confirmacao pousa no canto da
   marca do sistema, sinalizando "acesso concedido" sem virar um icone a mais. */
#login-splash .ls-brands{
  display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:4px;
}
#login-splash .ls-brand{
  position:relative; display:grid; place-items:center; background:#fff; border-radius:16px;
  box-shadow:0 12px 30px -12px rgba(46,59,23,.4), inset 0 0 0 1px rgba(255,255,255,.7);
}
#login-splash .ls-brand img{ display:block; object-fit:contain }
/* a marca do sistema e paisagem (319x162); o brasao e quadrado (308x308) */
#login-splash .ls-brand-art{ width:104px; height:56px; padding:9px 12px }
#login-splash .ls-brand-art img{ width:100%; height:100% }
#login-splash .ls-brand-pref{ width:56px; height:56px; padding:7px }
#login-splash .ls-brand-pref img{ width:100%; height:100% }
/* fio entre as marcas */
#login-splash .ls-brand-sep{
  width:1px; height:34px; flex:none;
  background:linear-gradient(180deg,transparent,var(--brand2),transparent); opacity:.5;
}
/* selo de acesso concedido, no canto da marca do sistema */
#login-splash .ls-seal{
  position:absolute; right:-7px; bottom:-7px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:linear-gradient(135deg,var(--ok),#66d69a);
  box-shadow:0 6px 14px -4px rgba(63,157,106,.6); transform:scale(0);
  animation:lsSeal .42s .62s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* linha do orgao, logo abaixo das marcas */
#login-splash .ls-org{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft);
  max-width:330px; line-height:1.45; margin-bottom:6px;
}

/* ---- textos ---- */
#login-splash .ls-hello{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--brand2) }
#login-splash .ls-name{ font-size:21px; font-weight:750; letter-spacing:-.02em; color:var(--ink); line-height:1.2 }

/* ---- etapa: o que esta acontecendo agora ---- */
#login-splash .ls-progress{
  display:flex; align-items:center; gap:9px; margin-top:12px;
  font-size:12px; font-weight:600; color:var(--ink-soft); min-height:20px;
}
#login-splash .ls-dots{ display:inline-flex; gap:4px }
#login-splash .ls-dots i{
  width:5px; height:5px; border-radius:50%; background:var(--brand2); opacity:.35;
  animation:lsDot 1.1s ease-in-out infinite;
}
#login-splash .ls-dots i:nth-child(2){ animation-delay:.15s }
#login-splash .ls-dots i:nth-child(3){ animation-delay:.3s }
/* concluido: os pontos viram um check e param de animar */
#login-splash.is-done .ls-dots{ display:none }
#login-splash.is-done .ls-progress{ color:var(--ok); font-weight:700 }
#login-splash.is-done .ls-progress::before{
  content:""; width:14px; height:8px; flex:none; margin-right:2px;
  border-left:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:rotate(-45deg) translateY(-2px);
}

/* ---- barra: mostra o progresso REAL das 3 etapas ---- */
#login-splash .ls-bar{
  width:190px; height:3px; border-radius:3px; margin-top:14px; overflow:hidden;
  background:rgba(92,111,58,.16);
}
#login-splash .ls-bar > i{
  display:block; height:100%; width:var(--p,33%); border-radius:3px;
  background:linear-gradient(90deg,var(--brand),#7c974d);
  transition:width .5s cubic-bezier(.4,1.1,.4,1);
}
#login-splash.is-done .ls-bar > i{ background:linear-gradient(90deg,var(--ok),#66d69a) }

/* ---- saida: o cartao AVANCA e desfoca; o painel emerge por tras ---- */
#login-splash.is-leaving{ opacity:0; backdrop-filter:blur(0) }
#login-splash.is-leaving .login-splash-content{
  transform:scale(1.08) translateY(-6px); opacity:0; filter:blur(6px);
  transition:transform .44s cubic-bezier(.4,0,.85,.3), opacity .36s ease, filter .44s ease;
}
#login-splash.is-leaving .ls-bloom{ transform:scale(1.5); opacity:0; transition:.44s ease }
#login-splash.is-leaving .login-splash-bg{ opacity:0; transition:opacity .42s ease }

@keyframes lsIn{ from{ opacity:0; transform:translateY(14px) scale(.96); filter:blur(4px) } to{ opacity:1; transform:none; filter:blur(0) } }
@keyframes lsUp{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
@keyframes lsDraw{ to{ stroke-dashoffset:0 } }
@keyframes lsSeal{ to{ transform:scale(1) } }
@keyframes lsRing{ 0%{ transform:scale(1); opacity:.55 } 100%{ transform:scale(1.55); opacity:0 } }
@keyframes lsCheck{ to{ stroke-dashoffset:0 } }
@keyframes lsDot{ 0%,100%{ opacity:.3; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-3px) } }

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
  #login-splash .ls-ring, #login-splash .ls-bloom, #login-splash .login-splash-content > *{ animation:none }
  #login-splash .ls-seal{ animation:none; transform:scale(1) }
  #login-splash .ls-shield{ animation:none; stroke-dashoffset:0 }
  #login-splash.is-leaving .login-splash-content{ filter:none; transform:none }
  #login-splash .ls-check{ animation:none; stroke-dashoffset:0 }
  #login-splash .login-splash-content{ animation:none }
}
body.reduced-motion #login-splash .ls-ring,
body.reduced-motion #login-splash .ls-dots i{ animation:none }

/* ============================================================================
   TELA DE LOGIN (#view-login) — reconstrucao Aurora

   Decisoes de UI:
   1. O login era a UNICA tela do sistema fora da aurora (laje roxa escura).
      Agora usa o mesmo canvas, entao login -> splash -> painel e uma superficie
      continua, sem troca de cena.
   2. Duas colunas: IDENTIDADE (quem e o orgao, o que o portal faz) e ACESSO
      (o formulario em vidro). No mobile a ordem inverte: quem abre no celular
      quer logar, nao ler a proposta.
   3. Os 36 atalhos de homologacao ocupavam metade da tela. Viraram um painel
      RECOLHIDO: a utilidade fica a um clique e o espaco volta pro conteudo.
   ============================================================================ */

/* 04-utils-views-units.css:30 tem `#view-login.view-section{background:linear-gradient(roxo)}`
   com especificidade (1,1,0) — vencia o transparente e deixava a tela num banho
   roxo, com os tokens de texto (que assumem fundo CLARO) ilegiveis por cima.
   Aqui empatamos em (1,1,0) e vencemos por ordem de carga. */
#view-login.view-section{ background:transparent; min-height:100vh }

/* a mesma regra legada troca a view para display:flex quando ativa. Com isso a
   .lg-page vira FLEX ITEM e o `margin:0 auto` dela passa a encolher o conteudo
   em vez de centralizar (mesma armadilha que ja apareceu na Intranet). */
#view-login.view-section.active{ display:block }

/* 04-utils:37-43 impoe var(--font-login) em #view-login input/button/select/a
   com especificidade (1,0,1), derrotando o `.aur *` (0,1,1) do reset. */
#view-login, #view-login input, #view-login button,
#view-login select, #view-login textarea, #view-login a{ font-family:var(--font) }
.lg-page{ max-width:1240px; margin:0 auto; padding:32px 22px 40px }
.lg-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; min-height:76vh }

/* ---------------- IDENTIDADE ---------------- */
.lg-lockup{ display:flex; align-items:center; gap:13px; margin-bottom:26px }
.lg-crest{
  width:52px; height:52px; flex:none; border-radius:14px; background:#fff; padding:6px;
  display:grid; place-items:center; box-shadow:0 10px 26px -10px rgba(46,59,23,.4);
}
.lg-crest img{ width:100%; height:100%; object-fit:contain; display:block }
.lg-org{ display:flex; flex-direction:column; line-height:1.3; min-width:0 }
.lg-org b{ font-size:12px; font-weight:800; letter-spacing:.05em; color:var(--ink) }
.lg-org span{ font-size:10.5px; color:var(--ink-soft); letter-spacing:.03em }

.lg-kicker{
  font-size:10.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand2); margin-bottom:10px;
}
.lg-title{ margin:0; font-size:clamp(30px,3.4vw,44px); font-weight:750; line-height:1.08; letter-spacing:-.03em; color:var(--ink) }
.lg-title::after{
  content:""; display:block; width:58px; height:4px; border-radius:3px; margin:16px 0 0;
  background:linear-gradient(90deg,var(--brand),#7f9b4e);
}
.lg-lead{ margin:16px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:44ch }

.lg-feats{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px }
.lg-feat{ display:flex; align-items:flex-start; gap:11px; min-width:0 }
/* proporcao icone/tile: 17px dentro de 34px com traco 1.8 sumia sobre o
   gradiente. 20px em 38px com traco 2 da presenca sem pesar. */
.lg-feat-ico{
  width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--brand),#64793f); box-shadow:0 8px 18px -8px rgba(78,98,44,.55);
}
/* NAO depender de currentColor aqui: o stroke vai direto no SVG. Se qualquer
   regra externa mexer no `color` do span, o icone sumiria dentro do tile roxo. */
.lg-feat-ico svg{ width:20px; height:20px; display:block; stroke:#fff; stroke-width:2.1; fill:none }
.lg-feat-ico svg *{ stroke:#fff }
/* o icone do campo tambem: precisa ler sobre vidro claro */
.lg-input-ico svg{ width:18px; height:18px; display:block; stroke:var(--brand2); stroke-width:1.9; fill:none }
.lg-eye svg{ width:18px; height:18px; display:block }
.lg-feat div{ display:flex; flex-direction:column; min-width:0 }
.lg-feat b{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.25 }
.lg-feat span{ font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.4 }

.lg-app{ display:flex; align-items:center; gap:16px; padding:16px 18px; margin-top:26px }
.lg-app-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.lg-app-txt b{ font-size:13px; font-weight:700; color:var(--ink) }
.lg-app-txt > span{ font-size:12px; color:var(--ink-soft); line-height:1.45 }
.lg-app-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.lg-qr{ width:82px; height:82px; flex:none; border-radius:12px; background:#fff; padding:5px; box-sizing:border-box }

.lg-sign{ display:flex; align-items:center; gap:10px; margin-top:22px; opacity:.75 }
.lg-sign span{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft) }
.lg-sign img{ height:22px; width:auto; display:block }

/* ---------------- ACESSO ---------------- */
.lg-card{ padding:32px 34px 30px; align-self:center }
.lg-card-head{ margin-bottom:20px }
.lg-card-head h2{ margin:0; font-size:22px; font-weight:750; letter-spacing:-.02em; color:var(--ink) }
.lg-card-head p{ margin:5px 0 0; font-size:13px; color:var(--ink-soft) }

.lg-fld{ margin-bottom:14px }
/* campo com icone: a caixa e o wrapper, o input entra cru (igual .field.search do kit) */
.lg-input{
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,.45); border:1px solid var(--line); transition:.16s;
}
body.theme-dark .lg-input{ background:rgba(255,255,255,.06) }
.lg-input:focus-within{ border-color:var(--brand2); box-shadow:0 0 0 3px rgba(92,111,58,.18) }
.lg-input-ico{ color:var(--ink-soft); display:grid; place-items:center; flex:none }
.lg-input input{
  flex:1; min-width:0; border:none !important; background:transparent !important; box-shadow:none !important;
  outline:none; margin:0; padding:0; font-family:inherit; font-size:14.5px; color:var(--ink);
}
.lg-eye{
  flex:none; border:none; background:transparent; color:var(--ink-soft); cursor:pointer;
  display:grid; place-items:center; padding:2px; border-radius:8px;
}
.lg-eye:hover{ color:var(--brand2) }

.lg-submit{ width:100%; justify-content:center; margin-top:6px; padding:13px; font-size:14.5px }
.lg-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px }

.lg-fieldset{ margin-bottom:18px }
.lg-legend{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand2); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--line);
}

/* ---------------- ACESSOS RAPIDOS (homologacao) ---------------- */
.lg-dev{ margin-top:28px; padding:0; overflow:hidden }
.lg-dev > summary{
  list-style:none; cursor:pointer; user-select:none; padding:14px 20px;
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--ink-soft);
}
.lg-dev > summary::-webkit-details-marker{ display:none }
.lg-dev > summary::after{
  content:""; margin-left:auto; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s;
}
.lg-dev[open] > summary::after{ transform:rotate(-135deg) translateY(-2px) }
.lg-dev > summary:hover{ color:var(--brand2) }
.lg-dev-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--warn); background:rgba(232,134,58,.14); padding:3px 9px; border-radius:20px;
}
.lg-dev-body{ padding:4px 20px 20px; display:flex; flex-direction:column; gap:16px }
.lg-chip-title{
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px;
}
.lg-chip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:8px }
.lg-chip{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  padding:9px 12px; border-radius:11px; cursor:pointer; font-family:inherit; transition:.14s;
  background:rgba(255,255,255,.4); border:1px solid var(--line);
}
body.theme-dark .lg-chip{ background:rgba(255,255,255,.06) }
.lg-chip:hover{ border-color:var(--brand2); transform:translateY(-1px) }
.lg-chip b{ font-size:12px; font-weight:700; color:var(--ink); line-height:1.2 }
.lg-chip i{ font-style:normal; font-size:10.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums }

.lg-foot{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:24px; opacity:.85 }

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:980px){
  /* no celular quem abre quer LOGAR: o formulario vem primeiro */
  .lg-grid{ grid-template-columns:1fr; gap:28px; min-height:0 }
  .lg-card{ order:-1 }
  .lg-feats{ grid-template-columns:1fr }
  .lg-title{ font-size:28px }
}
@media (max-width:560px){
  .lg-page{ padding:20px 14px 32px }
  .lg-card{ padding:24px 20px }
  .lg-app{ flex-direction:column; align-items:flex-start }
  .lg-qr{ align-self:center }
}
