/* Página de acesso do BGS OS (entrar.html) — etapa "login" da entrega
   "entrega-bgs-os" (2026-10-07). As etapas de abertura e inicialização vêm de
   css/entrada.css (as mesmas da tela de entrada do sistema). */
body.entrar-pagina{margin:0; background:var(--ent-bg-2)}
.entrada[data-etapa="login"] .ent-login{display:flex}
.entrada[data-etapa="login"] .ent-pular{display:none}

.ent-login{padding:32px 44px 28px; flex-direction:column; gap:32px; animation:ent-in .7s ease-out both; color:var(--ent-ink)}
.lg-topo{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.lg-rede{display:flex; align-items:center; gap:18px; font-family:var(--ent-mono); font-size:11px; letter-spacing:.12em; color:var(--ent-ink-3)}
.lg-rede-ponto{width:8px; height:8px; border-radius:50%; background:#3fbf7f}

.lg-meio{flex:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items:center; gap:40px}
.lg-esq{display:flex; flex-direction:column; gap:28px}
.lg-relogio{display:flex; flex-direction:column; gap:4px}
.lg-hora{font-size:clamp(72px, 10vw, 128px); font-weight:800; line-height:.92; letter-spacing:-.04em}
.lg-data{font-size:18px; color:var(--ent-ink-2)}
.lg-cartao{display:flex; flex-direction:column; gap:18px; max-width:400px; padding:28px;
  background:rgba(14,42,68,.72); border:1px solid rgba(255,255,255,.1); border-radius:14px}
.lg-ola{display:flex; flex-direction:column; gap:6px}
.lg-ola h1{margin:0; font-size:22px; font-weight:600}
.lg-ola p{margin:0; font-size:14px; line-height:1.5; color:var(--ent-ink-2)}
.lg-google{height:52px; display:flex; align-items:center; justify-content:center; gap:12px; background:#fff; border-radius:8px;
  color:#1f1f1f; font-family:var(--ent-fonte); font-size:15px; font-weight:600; text-decoration:none; transition:background .15s ease}
.lg-google:hover{background:#f1f3f4}
.lg-google:focus-visible{outline:3px solid var(--ent-orange); outline-offset:3px}
.lg-restrito{font-family:var(--ent-mono); font-size:10px; letter-spacing:.12em; color:var(--ent-ink-3)}
.lg-aviso{margin:0; padding:10px 12px; border-radius:8px; background:rgba(238,125,35,.14); border:1px solid rgba(238,125,35,.45); font-size:13px; color:#ffd6b5}

.lg-dir{display:flex; justify-content:center; align-items:flex-end}
.lg-brax{position:relative; width:min(100%, 380px); aspect-ratio:380/520; animation:ent-rise .8s cubic-bezier(.22,.9,.24,1) .2s both}
.lg-sombra{position:absolute; left:18%; right:18%; bottom:0; height:5%; border-radius:50%; background:rgba(238,125,35,.85); animation:lg-sombra 1.8s ease-in-out infinite}
.lg-brax-bob{position:absolute; inset:0 0 2.5% 0; transform-origin:50% 100%; animation:ent-bob 1.8s ease-in-out infinite}
.lg-brax-onda{position:absolute; inset:0; transform-origin:50% 100%; animation:lg-onda 3.6s ease-in-out infinite}
/* Três poses que se revezam a cada 4s (ciclo de 12s). */
.lg-pose{position:absolute; left:0; right:0; bottom:0; margin:0 auto; max-width:100%; max-height:100%; display:block; animation:lg-pose 12s ease-in-out infinite both}
.lg-pose-2{animation-delay:4s}
.lg-pose-3{animation-delay:8s}

.lg-rodape{display:flex; align-items:center; gap:32px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.12)}
.lg-rodape span{font-family:var(--ent-mono); font-size:10px; letter-spacing:.2em; color:var(--ent-ink-4)}
.lg-rodape img{opacity:.68; display:block}
.lg-g-bgs{width:110px} .lg-g-csi{width:120px} .lg-g-grimp{width:108px} .lg-g-brasimpex{width:104px}

@media (max-width:560px){
  .ent-login{padding:24px 20px}
  .lg-dir{display:none}
  .lg-rodape{gap:18px}
}

@keyframes lg-onda{0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-4deg)} 75%{transform:rotate(3deg)}}
@keyframes lg-pose{0%{opacity:0; transform:translateY(14px) scale(.97)} 4%,30%{opacity:1; transform:translateY(0) scale(1)} 34%,100%{opacity:0; transform:translateY(-6px) scale(1)}}
@keyframes lg-sombra{0%,100%{transform:scaleX(1); opacity:.9} 50%{transform:scaleX(.88); opacity:.7}}
@media (prefers-reduced-motion:reduce){
  .lg-pose-2, .lg-pose-3{display:none}
  .lg-pose-1{opacity:1}
}