/* ============================================================================
   LINHA · Entrar (#view-login) e splash de entrada (#login-splash)
   Uma coluna central, sem cartão: marca no topo, formulário no meio, aplicativo
   e assinatura no rodapé.
   ============================================================================ */
#view-login.view-section.active{ display:block }
.ent{ flex:1; width:100%; min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; background:var(--l-sup) }

.ent-topo{ display:flex; align-items:center; gap:var(--l-e3); padding:var(--l-e6) var(--l-e8) }
.ent-topo img{ width:40px; height:40px; object-fit:contain }
.ent-topo b{ display:block; font-size:var(--l-t-med); font-weight:600 }
.ent-topo span{ font-size:var(--l-t-peq); color:var(--l-texto-3) }

.ent-meio{ display:flex; justify-content:center; align-items:flex-start; padding:8vh var(--l-e4) var(--l-e10) }
.ent-form{ width:min(400px,100%); display:flex; flex-direction:column; gap:var(--l-e4) }
.ent-form.hidden{ display:none !important }
.ent-form-largo{ width:min(760px,100%) }
.ent-cab{ margin-bottom:var(--l-e2) }
.ent-cab h1{ font-size:32px; font-weight:600; letter-spacing:-.03em; line-height:1.1 }
.ent-cab p{ margin-top:6px; color:var(--l-texto-2) }
.ent-form input:not([type=checkbox]){ min-height:44px; font-size:var(--l-t-med) }
.ent-senha{ position:relative }
.ent-senha input{ padding-right:44px }
.ent-senha .icon-btn{ position:absolute; right:4px; top:50%; transform:translateY(-50%) }
.ent-senha .icon-btn.on{ color:var(--l-marca) }
.ent-botao{ height:46px; font-size:var(--l-t-med); margin-top:var(--l-e2) }
.ent-links{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--l-e2); font-size:var(--l-t-peq); color:var(--l-texto-3) }
.ent-links .l-link{ font-size:var(--l-t-peq) }

.ent-grupo{ display:flex; flex-direction:column; gap:var(--l-e3); padding-top:var(--l-e4); border-top:1px solid var(--l-fio) }
.ent-grupo legend{ float:left; width:100%; margin-bottom:var(--l-e3); font-size:var(--l-t-peq); font-weight:600; color:var(--l-texto) }

/* gov.br (componente br-sign-in do governo, montado por app.auth.montarBotaoGovbr) */
.ent-govbr{ display:flex; flex-direction:column; gap:var(--l-e2) }
.br-sign-in{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:46px;
  border:1px solid var(--l-borda-forte); border-radius:var(--l-raio-pilula); background:var(--l-sup);
  font-size:var(--l-t-med); font-weight:500; color:#1351b4;
}
.br-sign-in img{ height:22px; width:auto }
.br-sign-in:hover{ background:#f0f5fc }
.ent-govbr-espera .br-sign-in{ opacity:.6; cursor:not-allowed }
.ent-govbr-selo{ align-self:center; font-size:var(--l-t-mini); color:var(--l-texto-3) }
.ent-govbr-dica{ font-size:var(--l-t-mini); color:var(--l-texto-3); text-align:center }
.ent-ou{ display:flex; align-items:center; gap:var(--l-e3); margin:var(--l-e2) 0; font-size:var(--l-t-mini); color:var(--l-texto-3) }
.ent-ou::before, .ent-ou::after{ content:""; flex:1; height:1px; background:var(--l-fio) }

/* usuários de teste (só no homolog; o servidor injeta) */
.hml-testusers{ margin-top:var(--l-e8); padding-top:var(--l-e4); border-top:1px dashed var(--l-borda); font-size:var(--l-t-peq) }
.hml-testusers-cols{ display:flex; gap:var(--l-e4); flex-wrap:wrap }
.hml-testusers-list{ display:flex; flex-wrap:wrap; gap:6px }
.hml-testuser{ display:flex; flex-direction:column; padding:6px 10px; border:1px solid var(--l-borda); border-radius:var(--l-raio-2); cursor:pointer; background:var(--l-sup) }
.hml-testuser:hover{ border-color:var(--l-marca) }
.hml-testuser-cpf{ font-size:var(--l-t-mini); color:var(--l-texto-3) }

/* rodapé: aplicativo e assinatura */
.ent-pe{ display:flex; align-items:center; justify-content:space-between; gap:var(--l-e4); padding:var(--l-e5) var(--l-e8); border-top:1px solid var(--l-fio); font-size:var(--l-t-peq); color:var(--l-texto-3) }
.ent-app{ position:relative }
.ent-app summary{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--l-texto-2); font-weight:500 }
.ent-app summary:hover{ color:var(--l-marca-tinta) }
.ent-app summary svg{ width:16px; height:16px }
.ent-app-caixa{
  position:absolute; left:0; bottom:calc(100% + 10px); z-index:10; display:flex; gap:var(--l-e4); width:420px; padding:var(--l-e4);
  background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-3); box-shadow:var(--l-sombra-flutua);
}
.ent-app-caixa img{ width:120px; height:120px; border-radius:var(--l-raio-2) }
.ent-app-caixa div{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; color:var(--l-texto-2) }
.ent-app-caixa small{ color:var(--l-texto-3) }
.ent-assina{ display:inline-flex; align-items:center; gap:var(--l-e2) }
.ent-assina img{ height:20px; width:auto; opacity:.8 }

@media (max-width:640px){
  .ent-topo, .ent-pe{ padding-left:var(--l-e4); padding-right:var(--l-e4) }
  .ent-meio{ padding-top:var(--l-e6) }
  .ent-cab h1{ font-size:26px }
  .ent-pe{ flex-direction:column; align-items:flex-start }
  .ent-app-caixa{ width:calc(100vw - 32px) }
}

/* ================================================================ splash de entrada */
#login-splash{ position:fixed; inset:0; z-index:5000; display:grid; place-items:center; background:var(--l-sup); transition:opacity .35s var(--l-curva) }
#login-splash.is-leaving{ opacity:0 }
#login-splash.is-hidden{ display:none }
.ent-splash-meio{ display:flex; flex-direction:column; align-items:center; gap:var(--l-e3); animation:l-entra .5s var(--l-curva) both }
.ent-splash-meio img{ width:56px; height:56px; object-fit:contain; margin-bottom:var(--l-e2) }
.ent-splash-ola{ font-size:28px; font-weight:600; letter-spacing:-.02em }
.ent-splash-passo{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
.ent-splash-barra{ width:160px; height:3px; margin-top:var(--l-e2); border-radius:3px; background:var(--l-fio); overflow:hidden }
.ent-splash-barra i{ display:block; height:100%; width:40%; border-radius:3px; background:var(--l-marca); animation:ent-corre 1.1s ease-in-out infinite }
@keyframes ent-corre{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(260%) } }
/* gov.br em espera: só o botão com o selo; o clique explica */
.ent-govbr-espera{ position:relative }
.ent-govbr-espera .ent-govbr-dica{ display:none }
.ent-govbr-espera .ent-govbr-selo{ position:absolute; right:16px; top:14px; height:18px; padding:0 8px; border-radius:var(--l-raio-pilula); background:var(--l-sup-3); line-height:18px; font-size:11px }

/* ================================================================ duas colunas (01/10): marca à esquerda, cartão à direita */
.ent{ grid-template-columns:minmax(380px, 42%) minmax(0,1fr); grid-template-rows:auto 1fr auto; grid-template-areas:"marca topo" "marca meio" "marca pe"; background:var(--l-fundo) }
.ent-marca{ grid-area:marca }
.ent-topo{ grid-area:topo }
.ent-meio{ grid-area:meio; align-items:center; padding:var(--l-e6) var(--l-e6) var(--l-e8) }
.ent-pe{ grid-area:pe; border-top:0 }
.ent-marca{
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:var(--l-e8);
  padding:var(--l-e8) var(--l-e10); background:var(--l-verde); color:var(--l-verde-texto);
}
/* textura leve: dois brilhos radiais na cor do portal */
.ent-marca::before, .ent-marca::after{ content:""; position:absolute; border-radius:50%; pointer-events:none }
.ent-marca::before{ width:520px; height:520px; right:-200px; top:-160px; background:radial-gradient(circle, rgba(255,255,255,.12), transparent 65%) }
.ent-marca::after{ width:420px; height:420px; left:-160px; bottom:-180px; background:radial-gradient(circle, rgba(255,255,255,.08), transparent 65%) }
.ent-marca > *{ position:relative; z-index:1 }
.ent-marca-topo{ display:flex; align-items:center; gap:var(--l-e4) }
.ent-brasao{ display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.4) }
.ent-brasao img{ width:40px; height:40px; object-fit:contain }
.ent-marca-topo b{ display:block; font-size:var(--l-t-titulo, 18px); font-weight:600 }
.ent-marca-topo span{ font-size:var(--l-t-peq); color:var(--l-verde-texto-2); line-height:1.4 }
.ent-marca-meio h2{ margin:0; max-width:15ch; font-size:clamp(30px, 3vw, 42px); font-weight:600; line-height:1.12; letter-spacing:-.03em; text-wrap:balance }
.ent-marca-meio > p{ margin:var(--l-e4) 0 0; max-width:42ch; font-size:var(--l-t-med); line-height:1.55; color:var(--l-verde-texto-2) }
.ent-marca-lista{ list-style:none; display:flex; flex-direction:column; gap:var(--l-e4); margin:var(--l-e8) 0 0; padding:0 }
.ent-marca-lista li{ display:flex; align-items:flex-start; gap:var(--l-e3) }
.ent-marca-lista li > svg, .ent-marca-lista li > i{ flex:none; width:38px; height:38px; padding:9px; border-radius:11px; background:rgba(255,255,255,.12); color:var(--l-verde-texto) }
.ent-marca-lista span{ display:flex; flex-direction:column; gap:1px; font-size:var(--l-t-peq); color:var(--l-verde-texto-2); line-height:1.45 }
.ent-marca-lista b{ font-size:var(--l-t-corpo); font-weight:600; color:var(--l-verde-texto) }
.ent-marca-pe{ margin:0; font-size:var(--l-t-peq); color:var(--l-verde-texto-2) }

/* cartão do formulário */
.ent-form{
  width:min(440px, 100%); padding:var(--l-e8) var(--l-e8) var(--l-e6);
  border:1px solid var(--l-borda); border-radius:20px; background:var(--l-sup); box-shadow:var(--l-sombra-bloco-alto, var(--l-sombra-bloco));
}
.ent-form-largo{ width:min(820px, 100%) }
.ent-cab h1{ font-size:28px }
.ent-botao{ border-radius:var(--l-raio-2) }
/* no computador a marca já está à esquerda: o topo some */
@media (min-width:961px){ .ent-topo{ visibility:hidden; padding-top:var(--l-e4); padding-bottom:0 } .ent-topo *{ display:none } }
@media (max-width:960px){
  .ent{ grid-template-columns:1fr; grid-template-areas:"topo" "meio" "pe" }
  .ent-marca{ display:none }
  .ent-meio{ align-items:flex-start }
}
@media (max-width:640px){
  .ent-form{ padding:var(--l-e6) var(--l-e5); border-radius:16px }
}
.ent-marca .ent-marca-meio h2{ color:var(--l-verde-texto) }
@media (max-width:640px){ .ent-govbr-espera .ent-govbr-selo{ position:static; align-self:center; margin-top:-2px } }

/* ================================================================ versão viva (01/10, 2ª): rede, vitrine e batimento */
.ent-marca{ position:sticky; top:0; align-self:start; height:100dvh; justify-content:flex-start;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--l-verde) 70%, #fff 30%) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--l-verde) 75%, #000 25%) 0%, transparent 60%),
    var(--l-verde) }
.ent-marca::before, .ent-marca::after{ display:none }
.ent-marca-topo span{ max-width:30ch }
.ent-marca-meio{ margin-top:auto }
.ent-marca-meio h2{ max-width:13ch; font-size:clamp(34px, 3.4vw, 50px) }
.ent-marca-meio h2 em{ font-style:normal; position:relative; white-space:nowrap; z-index:0 }
.ent-marca-meio h2 em::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:.08em; height:.36em; border-radius:6px; background:rgba(255,255,255,.22); z-index:-1;
  transform-origin:left; animation:ent-grifo .9s .3s cubic-bezier(.2,.8,.2,1) both }
@keyframes ent-grifo{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* rede de unidades ao fundo */
.ent-rede{ position:absolute !important; inset:0; width:100%; height:100%; z-index:0 !important; opacity:.55 }
.ent-rede-linhas path{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.2; stroke-dasharray:6 8; animation:ent-fluxo 18s linear infinite }
@keyframes ent-fluxo{ to{ stroke-dashoffset:-280 } }
.ent-rede-nos circle{ fill:rgba(255,255,255,.55) }
.ent-rede-pulsos circle{ fill:none; stroke:rgba(255,255,255,.6); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:ent-pulso 3.2s ease-out infinite }
.ent-rede-pulsos circle:nth-child(2){ animation-delay:1.1s }
.ent-rede-pulsos circle:nth-child(3){ animation-delay:2.2s }
@keyframes ent-pulso{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(5); opacity:0 } }

/* vitrine: cartões de vidro flutuando */
.ent-vitrine{ position:relative; height:190px; margin:var(--l-e8) 0 var(--l-e10) }
.ent-flut{
  position:absolute; display:flex; align-items:center; gap:var(--l-e3); padding:12px 16px 12px 12px; border-radius:16px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:var(--l-verde-texto);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 14px 34px -16px rgba(0,0,0,.55);
  animation:ent-flutua 6s ease-in-out infinite;
}
.ent-flut > svg, .ent-flut > i{ flex:none; width:36px; height:36px; padding:8px; border-radius:10px; background:#fff; color:var(--l-verde) }
.ent-flut span{ display:flex; flex-direction:column; gap:1px }
.ent-flut small{ font-size:11px; color:var(--l-verde-texto-2) }
.ent-flut b{ font-size:var(--l-t-corpo); font-weight:600; white-space:nowrap; transition:opacity .28s, transform .28s }
.ent-flut b.is-saindo{ opacity:0; transform:translateY(-6px) }
.ent-flut-1{ left:0; top:0 }
.ent-flut-2{ left:22%; top:66px; animation-delay:-2s }
.ent-flut-3{ left:6%; top:132px; animation-delay:-4s }
@keyframes ent-flutua{ 0%, 100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* batimento atravessando o rodapé do painel */
.ent-ecg{ position:absolute !important; left:0; right:0; bottom:56px; width:100%; height:70px; z-index:0 !important; overflow:visible }
.ent-ecg path{ fill:none; stroke:rgba(255,255,255,.55); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1200; stroke-dashoffset:1200; animation:ent-bate 4.5s ease-in-out infinite }
@keyframes ent-bate{ 0%{ stroke-dashoffset:1200 } 55%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:-1200 } }

/* cartão: faixa na cor do portal e saudação */
.ent-form{ position:relative; overflow:hidden }
.ent-form::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg, var(--l-verde), var(--l-aba-ativa, var(--l-marca-media))) }
.ent-ola{ margin:0 0 4px !important; font-size:var(--l-t-peq); font-weight:600; color:var(--l-aba-ativa, var(--l-marca-tinta)) !important; letter-spacing:.02em }
.ent-meio{ background-image:radial-gradient(color-mix(in srgb, var(--l-texto) 9%, transparent) 1px, transparent 1px); background-size:22px 22px }
.ent-form{ animation:ent-sobe .55s cubic-bezier(.2,.8,.2,1) both }
@keyframes ent-sobe{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  .ent-rede-linhas path, .ent-rede-pulsos circle, .ent-flut, .ent-ecg path, .ent-form, .ent-marca-meio h2 em::after{ animation:none !important }
  .ent-ecg path{ stroke-dashoffset:0 }
}
body.reduced-motion :is(.ent-rede-linhas path, .ent-rede-pulsos circle, .ent-flut, .ent-ecg path, .ent-form){ animation:none !important }
body.reduced-motion .ent-ecg path{ stroke-dashoffset:0 }
@media (max-height:760px){ .ent-vitrine{ display:none } }
.ent-vitrine{ height:236px }
.ent-flut-2{ left:24%; top:80px }
.ent-flut-3{ left:8%; top:160px }

/* texto do painel (01/10, ajuste): bloco centrado na altura, título que acompanha a
   altura da tela, grifo fino sob a palavra e cartões que encolhem em tela baixa */
.ent-marca{ display:grid !important; grid-template-rows:auto minmax(0,1fr); gap:0 }
.ent-marca-centro{ display:flex; flex-direction:column; justify-content:center; gap:var(--l-e8); min-height:0; padding:var(--l-e6) 0 90px }
.ent-marca-meio{ margin-top:0 }
.ent-marca-meio h2{ max-width:14ch; font-size:clamp(30px, min(3.2vw, 5.2vh), 48px); line-height:1.1 }
.ent-marca-meio h2 em::after{ left:0; right:0; bottom:-.06em; height:.09em; border-radius:2px; background:color-mix(in srgb, var(--l-verde-texto) 70%, transparent) }
.ent-marca-meio > p{ margin-top:var(--l-e3); font-size:clamp(14px, 1.9vh, 16px) }
.ent-vitrine{ margin:0; flex:none }
@media (max-height:760px){ .ent-vitrine{ display:block; transform:scale(.82); transform-origin:left top; height:200px; margin-bottom:-30px } }
@media (max-height:620px){ .ent-vitrine{ display:none } }

/* ================================================================ transição de entrada (01/10) */
#login-splash.ent-splash{
  position:fixed; inset:0; z-index:5000; display:grid; place-items:center; overflow:hidden; opacity:1; transition:none;
  background:
    radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--l-verde) 70%, #fff 30%) 0%, transparent 70%),
    var(--l-verde);
  color:var(--l-verde-texto);
  clip-path:circle(0 at var(--ox, 50%) var(--oy, 50%));
}
#login-splash.ent-splash.is-hidden{ display:none }
/* ato 1: o círculo nasce do botão Entrar */
#login-splash.is-entrando{ animation:ent-abre .75s cubic-bezier(.7,0,.2,1) forwards }
@keyframes ent-abre{ to{ clip-path:circle(150vmax at var(--ox, 50%) var(--oy, 50%)) } }

/* ato 2: a rede se conecta */
.ent-splash-rede{ position:absolute; inset:0; width:100%; height:100% }
.ent-splash-rede line{ stroke:rgba(255,255,255,.28); stroke-width:.12; stroke-dasharray:1; stroke-dashoffset:1; animation:ent-traca .9s var(--d) cubic-bezier(.3,.7,.2,1) forwards }
.ent-splash-rede circle{ fill:#fff; opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(0); animation:ent-acende .5s var(--d) cubic-bezier(.3,1.6,.5,1) forwards }
@keyframes ent-traca{ to{ stroke-dashoffset:0 } }
@keyframes ent-acende{ to{ opacity:.75; transform:scale(1) } }
.ent-splash-ecg{ position:absolute; left:0; right:0; top:50%; width:100%; height:120px; transform:translateY(120px); overflow:visible }
.ent-splash-ecg path{ fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:ent-traca 1.4s .5s ease-in-out forwards }

.ent-splash-meio{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:var(--l-e3); text-align:center; animation:none }
.ent-splash-selo{ position:relative; width:132px; height:132px; display:grid; place-items:center; margin-bottom:var(--l-e3);
  opacity:0; transform:scale(.6); animation:ent-selo .7s .45s cubic-bezier(.3,1.5,.5,1) forwards }
@keyframes ent-selo{ to{ opacity:1; transform:scale(1) } }
.ent-splash-anel{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.ent-splash-anel circle{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:4 }
.ent-splash-anel circle.is-vai{ stroke:#fff; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--pn, 33)); transition:stroke-dashoffset .6s cubic-bezier(.3,.7,.2,1) }
#login-splash[data-step="1"]{ --pn:33 } #login-splash[data-step="2"]{ --pn:66 } #login-splash[data-step="3"]{ --pn:100 }
.ent-splash-brasao{ display:grid; place-items:center; width:88px; height:88px; border-radius:26px; background:#fff; box-shadow:0 18px 40px -16px rgba(0,0,0,.55); transition:transform .5s cubic-bezier(.3,1.5,.5,1) }
.ent-splash-brasao img{ width:60px; height:60px; object-fit:contain }
.ent-splash-ok{ position:absolute; right:6px; bottom:6px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--l-verde); box-shadow:0 6px 16px -6px rgba(0,0,0,.5); opacity:0; transform:scale(0) }
.ent-splash-ok svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round }
.ent-splash-ok path{ stroke-dasharray:1; stroke-dashoffset:1 }
#login-splash.is-done .ent-splash-ok{ animation:ent-acende-ok .45s cubic-bezier(.3,1.6,.5,1) forwards }
#login-splash.is-done .ent-splash-ok path{ animation:ent-traca .35s .2s ease-out forwards }
#login-splash.is-done .ent-splash-brasao{ transform:scale(1.04) }
@keyframes ent-acende-ok{ to{ opacity:1; transform:scale(1) } }

#login-splash .ent-splash-ola{ margin:0; font-size:clamp(28px, 4vw, 44px); font-weight:500; letter-spacing:-.02em; color:var(--l-verde-texto);
  opacity:0; transform:translateY(16px); animation:ent-sobe-txt .7s .75s cubic-bezier(.2,.8,.2,1) forwards }
#login-splash .ent-splash-ola b{ font-weight:700 }
#login-splash .ent-splash-passo{ margin:0; font-size:var(--l-t-corpo); color:var(--l-verde-texto-2); opacity:0; animation:ent-sobe-txt .6s .95s cubic-bezier(.2,.8,.2,1) forwards }
@keyframes ent-sobe-txt{ to{ opacity:1; transform:none } }

/* ato 3: a cortina sobe com borda curva e o painel pousa */
#login-splash.is-leaving{ animation:ent-cortina .8s cubic-bezier(.7,0,.25,1) forwards; clip-path:circle(150vmax at var(--ox, 50%) var(--oy, 50%)) }
@keyframes ent-cortina{
  0%{ clip-path:ellipse(150vmax 150vmax at 50% 0%) }
  100%{ clip-path:ellipse(150vmax 0 at 50% 0%) }
}
#login-splash.is-leaving .ent-splash-meio{ transition:transform .6s cubic-bezier(.7,0,.25,1), opacity .4s; transform:translateY(-40px); opacity:0 }
body.ent-chegando .view-section.active{ animation:ent-pousa 1s cubic-bezier(.2,.8,.2,1) both }
@keyframes ent-pousa{ from{ transform:scale(.97) translateY(18px); opacity:.4 } to{ transform:none; opacity:1 } }

/* reduzir movimento: só esmaece */
@media (prefers-reduced-motion:reduce){
  #login-splash.ent-splash, #login-splash.is-entrando{ clip-path:none; animation:none }
  #login-splash.is-leaving{ animation:none; clip-path:none; opacity:0; transition:opacity .12s }
  #login-splash *, body.ent-chegando .view-section.active{ animation:none !important; opacity:1; transform:none }
  .ent-splash-rede line, .ent-splash-ecg path{ stroke-dashoffset:0 }
}
body.reduced-motion #login-splash.ent-splash{ clip-path:none !important; animation:none !important }
body.reduced-motion #login-splash *, body.reduced-motion.ent-chegando .view-section.active{ animation:none !important; opacity:1; transform:none }
body.reduced-motion .ent-splash-rede line, body.reduced-motion .ent-splash-ecg path{ stroke-dashoffset:0 }

/* transição sem espera (01/10): abre no clique, nome entra quando chega, erro volta */
#login-splash .ent-splash-ola.is-espera{ animation:none; opacity:0 }
#login-splash .ent-splash-ola.is-chegou{ animation:ent-sobe-txt .55s 0s cubic-bezier(.2,.8,.2,1) forwards }
#login-splash.is-entrando{ animation-duration:.6s }
#login-splash.is-voltando{ animation:ent-fecha .45s cubic-bezier(.6,0,.4,1) forwards !important }
@keyframes ent-fecha{ from{ clip-path:circle(150vmax at var(--ox, 50%) var(--oy, 50%)) } to{ clip-path:circle(0 at var(--ox, 50%) var(--oy, 50%)) } }
.ent-erro{ margin:0; padding:10px 12px; border-radius:var(--l-raio-2); background:var(--l-erro-fundo); color:var(--l-erro); font-size:var(--l-t-peq); font-weight:500 }
.ent-form.is-sacode{ animation:ent-sacode .42s cubic-bezier(.36,.07,.19,.97) both }
@keyframes ent-sacode{ 10%, 90%{ transform:translateX(-2px) } 20%, 80%{ transform:translateX(4px) } 30%, 50%, 70%{ transform:translateX(-6px) } 40%, 60%{ transform:translateX(6px) } }
@media (prefers-reduced-motion:reduce){ #login-splash.is-voltando{ animation:none !important } .ent-form.is-sacode{ animation:none } }

/* ================================================================ transição 2ª versão: o painel vira o portal */
#login-splash.ent-trans{
  position:fixed; inset:0 auto 0 0; z-index:5000; display:block; width:var(--w0, 0px); height:100dvh; overflow:hidden;
  background:none; clip-path:none; opacity:1; animation:none; pointer-events:auto;
  transition:width .62s cubic-bezier(.7,0,.2,1);
}
#login-splash.ent-trans.is-hidden{ display:none }
#login-splash.ent-trans.tr-abre{ width:100vw }
#login-splash.ent-trans.tr-volta{ width:var(--w0, 0px); transition-duration:.5s }
#login-splash.ent-trans.tr-sai{ width:var(--w1, 0px); transition:width .7s cubic-bezier(.7,0,.25,1), opacity .25s .62s; opacity:0 }

.tr-painel{
  position:absolute; inset:0 auto 0 0; width:100vw; height:100%; color:var(--l-verde-texto);
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--l-verde) 70%, #fff 30%) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--l-verde) 75%, #000 25%) 0%, transparent 60%),
    var(--l-verde);
}
.tr-rede{ position:absolute; inset:0; width:100%; height:100%; opacity:.5 }
.tr-rede path{ fill:none; stroke:rgba(255,255,255,.2); stroke-width:1.2; stroke-dasharray:6 8; animation:ent-fluxo 14s linear infinite }
.tr-topo{ position:absolute; left:40px; top:32px; display:flex; align-items:center; gap:var(--l-e4); font-size:var(--l-t-titulo, 18px) }
.tr-brasao{ display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.4) }
.tr-brasao img{ width:40px; height:40px; object-fit:contain }

/* o conteúdo fica num quadro à esquerda-centro e só aparece quando o painel já abriu */
.tr-meio{ position:absolute; left:clamp(40px, 10vw, 180px); top:50%; width:min(640px, 80vw); transform:translateY(-50%);
  opacity:0; transition:opacity .35s .45s }
#login-splash.tr-abre .tr-meio{ opacity:1 }
#login-splash.tr-sai .tr-meio{ opacity:0; transition-delay:0s; transition-duration:.2s }
.tr-rotulo{ margin:0 0 var(--l-e3); font-size:var(--l-t-corpo); font-weight:500; letter-spacing:.02em; color:var(--l-verde-texto-2) }
.tr-ola{ margin:0; min-height:2.2em; font-size:clamp(40px, 5.4vw, 76px); font-weight:500; line-height:1.04; letter-spacing:-.035em; color:var(--l-verde-texto) }
.tr-ola b{ font-weight:700 }
.tr-ola.is-chegou{ animation:tr-sobe .6s cubic-bezier(.2,.8,.2,1) both }
@keyframes tr-sobe{ from{ opacity:0; transform:translateY(22px); filter:blur(4px) } to{ opacity:1; transform:none; filter:none } }

.tr-lista{ list-style:none; display:flex; flex-direction:column; gap:var(--l-e3); margin:var(--l-e8) 0 0; padding:0 }
.tr-lista li{ display:flex; align-items:center; gap:var(--l-e3); font-size:var(--l-t-med); color:var(--l-verde-texto-2); opacity:.45; transition:opacity .3s, color .3s }
.tr-marca{ position:relative; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,.35); transition:background .3s, border-color .3s }
.tr-marca svg{ width:15px; height:15px; fill:none; stroke:var(--l-verde); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round }
.tr-marca path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .35s .1s ease-out }
/* item em andamento: anel girando */
.tr-marca::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent; border-top-color:#fff; opacity:0 }
#login-splash[data-step="1"] li[data-k="1"], #login-splash[data-step="2"] li[data-k="2"], #login-splash[data-step="3"] li[data-k="3"]{ opacity:1; color:var(--l-verde-texto) }
#login-splash[data-step="1"] li[data-k="1"] .tr-marca::after, #login-splash[data-step="2"] li[data-k="2"] .tr-marca::after, #login-splash[data-step="3"] li[data-k="3"] .tr-marca::after{ opacity:1; animation:tr-gira .8s linear infinite }
@keyframes tr-gira{ to{ transform:rotate(360deg) } }
/* item feito */
#login-splash[data-step="2"] li[data-k="1"], #login-splash[data-step="3"] li:is([data-k="1"], [data-k="2"]), #login-splash[data-step="4"] li{ opacity:1; color:var(--l-verde-texto) }
#login-splash[data-step="2"] li[data-k="1"] .tr-marca, #login-splash[data-step="3"] li:is([data-k="1"], [data-k="2"]) .tr-marca, #login-splash[data-step="4"] li .tr-marca{ background:#fff; border-color:#fff }
#login-splash[data-step="2"] li[data-k="1"] path, #login-splash[data-step="3"] li:is([data-k="1"], [data-k="2"]) path, #login-splash[data-step="4"] li path{ stroke-dashoffset:0 }

.tr-barra{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.12) }
.tr-barra i{ display:block; height:100%; width:0; background:#fff; transition:width .6s cubic-bezier(.3,.7,.2,1) }
#login-splash[data-step="1"] .tr-barra i{ width:22% } #login-splash[data-step="2"] .tr-barra i{ width:48% }
#login-splash[data-step="3"] .tr-barra i{ width:76% } #login-splash[data-step="4"] .tr-barra i{ width:100% }

/* a tela de entrar reage: o cartão sai pela direita enquanto o painel avança */
body.tr-ativa #view-login .ent-form{ animation:none; transition:transform .55s cubic-bezier(.7,0,.2,1), opacity .4s; transform:translateX(60px); opacity:0 }

@media (prefers-reduced-motion:reduce){
  #login-splash.ent-trans{ transition:opacity .15s !important; width:100vw }
  #login-splash.ent-trans.tr-sai, #login-splash.ent-trans.tr-volta{ opacity:0 }
  #login-splash.ent-trans *{ animation:none !important; transition:none !important }
  .tr-meio{ opacity:1 }
}
body.reduced-motion #login-splash.ent-trans{ transition:opacity .15s !important; width:100vw }
body.reduced-motion #login-splash.ent-trans.tr-sai, body.reduced-motion #login-splash.ent-trans.tr-volta{ opacity:0 }
body.reduced-motion #login-splash.ent-trans *{ animation:none !important; transition:none !important }
body.reduced-motion .tr-meio{ opacity:1 }

/* abertura sem travar (01/10): o painel desliza com transform (camada da placa de
   vídeo) em vez de animar a largura, que redesenhava a tela inteira a cada quadro */
#login-splash.ent-trans{
  width:100vw !important; transform:translate3d(calc(var(--w0, 0px) - 100vw), 0, 0);
  transition:transform .6s cubic-bezier(.65,0,.25,1) !important; will-change:transform; contain:layout paint;
}
#login-splash.ent-trans.tr-abre{ transform:translate3d(0, 0, 0) }
#login-splash.ent-trans.tr-volta{ transform:translate3d(calc(var(--w0, 0px) - 100vw), 0, 0); transition-duration:.45s !important }
#login-splash.ent-trans.tr-sai{ transform:translate3d(calc(var(--w1, 0px) - 100vw), 0, 0); opacity:0;
  transition:transform .7s cubic-bezier(.7,0,.25,1), opacity .25s .6s !important }
/* durante a abertura a rede fica parada (menos trabalho por quadro) */
#login-splash.ent-trans .tr-rede path{ animation-play-state:paused }
#login-splash.ent-trans.is-done .tr-rede path{ animation-play-state:running }
.tr-ola.is-chegou{ animation-name:tr-sobe2 }
@keyframes tr-sobe2{ from{ opacity:0; transform:translate3d(0, 22px, 0) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ #login-splash.ent-trans{ transform:none !important; transition:opacity .15s !important } }
body.reduced-motion #login-splash.ent-trans{ transform:none !important; transition:opacity .15s !important }

/* acima de qualquer véu (o auth-pending usa 9999/10000) */
#login-splash.ent-trans{ z-index:10050 }
/* linha de progresso por transform (não redesenha enquanto os painéis montam) */
.tr-barra i{ width:100% !important; transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.3,.7,.2,1) }
#login-splash[data-step="1"] .tr-barra i{ transform:scaleX(.22) } #login-splash[data-step="2"] .tr-barra i{ transform:scaleX(.48) }
#login-splash[data-step="3"] .tr-barra i{ transform:scaleX(.76) } #login-splash[data-step="4"] .tr-barra i{ transform:scaleX(1) }

/* ================================================================ acessos rápidos de teste (só homologação)
   Bloco injetado pelo servidor (partials/homolog/logins.html) logo após os formulários:
   vai abaixo do cartão, recolhível, com os perfis em botões de duas colunas. */
.ent-meio{ flex-direction:column; align-items:center; justify-content:center; gap:var(--l-e4) }
.lg-dev{ width:min(440px, 100%); padding:0; border:1px dashed var(--l-borda-forte) !important; border-radius:16px; background:color-mix(in srgb, var(--l-sup) 85%, transparent) !important; box-shadow:none !important }
.lg-dev > summary{ display:flex; align-items:center; gap:var(--l-e2); padding:10px 14px; list-style:none; cursor:pointer; font-size:var(--l-t-peq); color:var(--l-texto-2) }
.lg-dev > summary::-webkit-details-marker{ display:none }
.lg-dev > summary::after{ content:""; width:7px; height:7px; margin-left:auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.6; transition:transform var(--l-rapido) }
.lg-dev[open] > summary::after{ transform:rotate(-135deg) }
.lg-dev-tag{ padding:2px 8px; border-radius:999px; background:var(--l-atencao-fundo); color:var(--l-atencao); font-size:11px; font-weight:600 }
.lg-dev-body{ display:flex; flex-direction:column; gap:var(--l-e4); max-height:min(46vh, 420px); overflow-y:auto; padding:4px 14px 14px; border-top:1px solid var(--l-fio) }
.lg-chip-title{ margin:var(--l-e2) 0 6px; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--l-texto-3) }
.lg-chip-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px }
.lg-chip{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; padding:7px 10px; border:1px solid var(--l-borda); border-radius:10px; background:var(--l-sup); font:inherit; text-align:left; cursor:pointer; transition:border-color var(--l-rapido), background var(--l-rapido) }
.lg-chip:hover{ border-color:var(--l-aba-ativa, var(--l-marca)); background:var(--l-marca-suave) }
.lg-chip b{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--l-t-peq); font-weight:600; color:var(--l-texto) }
.lg-chip i{ font-style:normal; font-size:11px; color:var(--l-texto-3); font-variant-numeric:tabular-nums }
@media (max-width:640px){ .lg-chip-grid{ grid-template-columns:1fr } }

/* painel da marca encostado nas bordas, com a divisão em curva suave (01/10): o
   recorte é uma elipse muito maior que o painel, centrada à esquerda dele, então
   só o lado direito aparece arqueado. No meio da altura o painel tem a largura
   inteira; nos cantos de cima e de baixo recua cerca de 7%. */
@media (min-width:961px){
  .ent-marca{ clip-path:ellipse(300% 233% at -200% 50%) }
}