/* SteelControl — acesso 3D. Somente apresentação; autenticação permanece intacta. */
:root {
  --auth-orange: #ff7900;
  --auth-black: #070707;
  --auth-line: rgba(255, 255, 255, 0.11);
}

.login-page {
  grid-template-columns: minmax(520px, 42%) 1fr;
}

.login-panel {
  border-radius: 0;
  box-shadow: 24px 0 80px rgba(0, 0, 0, 0.24);
}

.top-login .brand {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.brand-mascot {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #d9dee5;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 15px 35px rgba(17, 24, 39, 0.12);
  animation: authMascotFloat 4.2s ease-in-out infinite;
}

.brand-mascot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255, 121, 0, 0.24);
  border-radius: 21px;
  animation: authMascotPulse 2.6s ease-in-out infinite;
}

.brand-mascot .logo-img {
  position: relative;
  z-index: 3;
  width: 34px !important;
  height: 34px !important;
  max-height: none;
  object-fit: contain;
  filter: brightness(0);
}

.brand-mascot-ring {
  position: absolute;
  z-index: 1;
  inset: 8px;
  border: 1px dashed rgba(255, 121, 0, 0.44);
  border-radius: 50%;
  animation: authSpin 8s linear infinite;
}

.brand-mascot-ring::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--auth-orange);
  box-shadow: 0 0 10px var(--auth-orange);
}

.brand-mascot-scan {
  position: absolute;
  z-index: 4;
  left: 10px;
  right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--auth-orange), transparent);
  box-shadow: 0 0 8px var(--auth-orange);
  animation: authMascotScan 2.8s ease-in-out infinite;
}

body.cadastro-ativo .brand-mascot {
  border-color: rgba(255, 121, 0, 0.46);
  box-shadow: 0 16px 40px rgba(255, 121, 0, 0.2);
}

body.cadastro-ativo .brand-mascot-ring {
  animation-duration: 4.5s;
}

body.cadastro-ativo .auth-core {
  border-radius: 50%;
}

.image-area {
  isolation: isolate;
  background:
    radial-gradient(circle at 58% 53%, rgba(255, 111, 0, 0.17), transparent 25%),
    radial-gradient(circle at 90% 10%, rgba(255, 121, 0, 0.08), transparent 30%),
    linear-gradient(145deg, #050505 0%, #0a0a0a 55%, #100b07 100%);
}

.image-area::before {
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.036) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 58% 53%, #000, transparent 75%);
}

.image-area::after {
  content: "STEELCONTROL";
  position: absolute;
  right: -44px;
  bottom: 70px;
  z-index: -1;
  color: rgba(255, 255, 255, 0.018);
  font-size: clamp(70px, 8vw, 150px);
  font-weight: 950;
  letter-spacing: -8px;
  transform: rotate(-90deg) translateX(35%);
}

.auth-3d-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 58% 54%, rgba(255, 121, 0, 0.08), transparent 37%);
}

.auth-3d-scene {
  position: absolute;
  z-index: 1;
  left: 53%;
  top: 56%;
  width: min(49vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.auth-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 34px;
  background: radial-gradient(circle at 34% 28%, #ffbb78, var(--auth-orange) 34%, #682500 78%, #180800);
  box-shadow: 0 0 48px rgba(255, 121, 0, 0.45), 0 0 120px rgba(255, 121, 0, 0.16);
  animation: authCoreFloat 5s ease-in-out infinite;
}

.auth-core::before,
.auth-core::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 27px;
}

.auth-core::after {
  inset: -17px;
  border-color: rgba(255, 121, 0, 0.25);
  border-style: dashed;
  border-radius: 43px;
  animation: authSpin 13s linear infinite;
}

.auth-core img {
  position: relative;
  z-index: 2;
  width: 49px;
  filter: brightness(0);
}

.auth-orbit {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.auth-orbit i {
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px var(--auth-orange);
}

.auth-orbit-one {
  width: 400px;
  height: 400px;
  margin: -200px;
  transform: rotateX(67deg) rotateZ(15deg);
  animation: authOrbitOne 14s linear infinite;
}

.auth-orbit-two {
  width: 330px;
  height: 330px;
  margin: -165px;
  border-color: rgba(255, 121, 0, 0.34);
  transform: rotateY(65deg) rotateZ(-25deg);
  animation: authOrbitTwo 10s linear infinite reverse;
}

.auth-orbit-three {
  width: 480px;
  height: 180px;
  margin: -90px -240px;
  transform: rotateZ(-12deg);
  animation: authSpin 19s linear infinite;
}

.auth-data {
  position: absolute;
  z-index: 5;
  min-width: 135px;
  padding: 13px 14px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(7, 7, 7, 0.76);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.auth-data small { color: #757575; font-size: 7px; font-weight: 850; letter-spacing: 1px; }
.auth-data strong { color: #fff; font-size: 15px; }
.auth-data span { color: #ff9d2e; font-size: 7px; }
.auth-data-one { right: 2%; top: 13%; }
.auth-data-two { right: 4%; bottom: 14%; }
.auth-data-three { left: 1%; bottom: 19%; }

.industrial-message {
  top: 7%;
  left: 7%;
  width: min(520px, 66%);
}

.industrial-message h2 {
  font-size: clamp(34px, 3.3vw, 54px);
  line-height: 0.98;
}

.industrial-message h2 span { color: var(--auth-orange); }
.industrial-message > p { color: rgba(255, 255, 255, 0.58); }
.industrial-badge { border-color: rgba(255, 121, 0, 0.25); color: #ffae62; }
.industrial-badge span { background: var(--auth-orange); box-shadow: 0 0 12px var(--auth-orange); }
.image-bottom { color: rgba(255, 255, 255, 0.56); letter-spacing: 1.3px; }
.image-bottom i { color: var(--auth-orange); }

.access-welcome-overlay {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    rgba(4, 6, 9, 0.82);
  background-size: 48px 48px;
  backdrop-filter: blur(16px);
}

.access-welcome-card {
  width: min(480px, 100%);
  padding: 32px 34px 29px;
  border-color: rgba(255, 121, 0, 0.22);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 121, 0, 0.14), transparent 38%),
    #fff;
}

.access-welcome-brand {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border: 1px solid #dde2e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
  animation: authMascotFloat 4.2s ease-in-out infinite;
}

.access-welcome-brand img {
  position: relative;
  z-index: 2;
  width: 35px;
  height: 35px;
  filter: brightness(0);
}

.welcome-mascot-orbit {
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(255, 121, 0, 0.45);
  border-radius: 22px;
  animation: authSpin 8s linear infinite;
}

.welcome-mascot-orbit::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auth-orange);
  box-shadow: 0 0 12px var(--auth-orange);
}

.access-welcome-check {
  width: 58px;
  height: 58px;
  margin-bottom: 19px;
  border-width: 6px;
}

@keyframes authMascotFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes authMascotPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes authMascotScan {
  0%, 100% { top: 15px; opacity: 0.25; }
  50% { top: 42px; opacity: 1; }
}

@keyframes authSpin { to { transform: rotate(360deg); } }
@keyframes authOrbitOne { to { transform: rotateX(67deg) rotateZ(375deg); } }
@keyframes authOrbitTwo { to { transform: rotateY(65deg) rotateZ(335deg); } }
@keyframes authCoreFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(-6px) rotate(-2deg); }
  50% { transform: translate(-50%, -50%) translateY(8px) rotate(2deg); }
}

@media (max-width: 1200px) {
  .login-page { grid-template-columns: 48% 52%; }
  .auth-3d-scene { transform: translate(-50%, -50%) scale(0.78); }
  .industrial-message { width: 78%; }
}

@media (max-width: 1000px) {
  .login-page { display: block; }
  .image-area { display: none; }
  .login-panel { width: 100%; min-height: 100vh; }
}

@media (max-width: 650px) {
  .top-login .brand { width: 58px; height: 58px; }
  .brand-mascot { width: 50px; height: 50px; border-radius: 15px; }
  .brand-mascot .logo-img { width: 29px !important; height: 29px !important; }
}

/* 3.6.3 — montagem real do mascote: corpo fixo + capacete independente. */
.top-login .brand { min-width:64px !important; width:64px !important; }
.brand-assembly { position:relative; display:block; width:58px; height:62px; }
.brand-mascot-body { position:absolute; left:5px; bottom:1px; width:48px; height:48px; z-index:2; }
.brand-hardhat { position:absolute; left:7px; top:0; width:44px; height:28px; z-index:4; animation:headerHardhatDrop 3.6s cubic-bezier(.2,.86,.2,1) infinite; }
.brand-word,.brand-helmet-drop { display:none !important; }

.access-welcome-brand { width:110px; height:112px; margin:0 auto 16px; }
.welcome-logo-assembly { position:relative; display:block; width:100px; height:108px; }
.access-welcome-brand .welcome-mascot-body { position:absolute !important; z-index:2; left:13px; bottom:3px; width:74px !important; height:74px !important; margin:0 !important; filter:none !important; }
.access-welcome-brand .welcome-hardhat { position:absolute !important; z-index:5; left:17px; top:5px; width:66px !important; height:42px !important; margin:0 !important; filter:none !important; opacity:0; }
.welcome-impact { position:absolute; z-index:1; left:50%; bottom:12px; width:96px; height:96px; border:1px solid rgba(255,121,0,.42); border-radius:50%; opacity:0; transform:translateX(-50%) scale(.35); }
.access-welcome-overlay.sequence-running .welcome-hardhat { animation:hardhatHitsHead 1.75s cubic-bezier(.18,.88,.22,1) both; }
.access-welcome-overlay.sequence-running .welcome-impact { animation:hardhatImpact 1s 1.12s ease-out both; }

@keyframes headerHardhatDrop {
  0%,8% { transform:translateY(-42px) rotate(-9deg); opacity:0; }
  30% { transform:translateY(17px) rotate(3deg) scaleY(.9); opacity:1; }
  39%,78% { transform:translateY(14px) rotate(0) scaleY(1); opacity:1; }
  92%,100% { transform:translateY(-42px) rotate(8deg); opacity:0; }
}
@keyframes hardhatHitsHead {
  0% { transform:translateY(-120px) rotate(-14deg); opacity:0; }
  18% { opacity:1; }
  67% { transform:translateY(17px) rotate(4deg) scaleY(.88); opacity:1; }
  80% { transform:translateY(11px) rotate(-2deg) scaleY(1.04); }
  100% { transform:translateY(14px) rotate(0) scaleY(1); opacity:1; }
}
@keyframes hardhatImpact {
  0% { opacity:0; transform:translateX(-50%) scale(.35); }
  32% { opacity:.8; }
  100% { opacity:0; transform:translateX(-50%) scale(1.35); }
}

/* Logo inicial limpa; a montagem animada existe apenas após autenticação. */
.top-login .brand { width:62px !important; min-width:62px !important; height:62px; }
.brand-static { display:grid; place-items:center; width:54px; height:54px; border:1px solid #dce1e5; border-radius:14px; background:#fff; box-shadow:0 10px 28px rgba(15,23,42,.1); }
.brand-static-icon { width:34px; height:34px; filter:brightness(0); }
.brand-assembly { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  .brand-mascot,
  .brand-mascot::after,
  .brand-mascot-ring,
  .brand-mascot-scan,
  .auth-core,
  .auth-core::after,
  .auth-orbit,
  .access-welcome-brand,
  .welcome-mascot-orbit { animation: none !important; }
}

/* Sobrescreve o branding legado que ainda forçava a fotografia industrial. */
.login-shell .login-page,
html[data-theme="escuro"] .login-shell .login-page {
  background-image: none !important;
  background-color: #070707 !important;
}

.login-shell .image-area,
html[data-theme="escuro"] .login-shell .image-area {
  background:
    radial-gradient(circle at 68% 62%, rgba(255, 111, 0, 0.22), transparent 22%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.055), transparent 28%),
    linear-gradient(145deg, #050505 0%, #090909 50%, #120b06 100%) !important;
}

.login-shell .image-area::before,
html[data-theme="escuro"] .login-shell .image-area::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  mask-image: radial-gradient(circle at 60% 58%, #000 5%, transparent 76%);
}

.login-shell .industrial-message {
  top: 10% !important;
  left: clamp(34px, 5vw, 78px) !important;
  right: auto !important;
  width: min(80%, 560px) !important;
  transform: none !important;
}

.login-shell .industrial-message h2 span {
  color: #ff7900 !important;
}

.login-shell .industrial-badge span {
  background: #ff7900 !important;
  box-shadow: 0 0 14px #ff7900 !important;
}

.login-shell .auth-3d-scene {
  left: 62%;
  top: 64%;
  width: min(44vw, 580px);
}

.auth-core span {
  position: relative;
  z-index: 3;
  color: #070707;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -2px;
}

.top-login {
  position: relative;
  z-index: 20;
  min-height: 82px;
}

.login-shell .brand-mascot {
  z-index: 30;
  animation: authMascotFloatStrong 2.8s ease-in-out infinite !important;
  will-change: transform;
}

.login-shell .brand-mascot-ring {
  animation: authSpin 4.8s linear infinite !important;
}

.login-shell .brand-mascot-scan {
  animation: authMascotScan 1.9s ease-in-out infinite !important;
}

.login-shell .steel-language-switcher {
  display: none !important;
}

@keyframes authMascotFloatStrong {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(-3deg) scale(1); }
  50% { transform: translate3d(0, -10px, 0) rotate(3deg) scale(1.04); }
}

@media (max-width: 1200px) {
  .login-shell .auth-3d-scene {
    left: 61%;
    top: 66%;
    transform: translate(-50%, -50%) scale(0.72);
  }
}

/* Marca em movimento: o capacete desce e encaixa na assinatura SteelControl. */
.top-login .brand {
  width: auto !important;
  min-width: 210px;
  height: 72px;
  justify-content: flex-start;
  overflow: visible;
}

.brand-lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.brand-helmet-drop {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid #d9dee5;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

.brand-helmet-drop::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  height: 2px;
  border-radius: 99px;
  background: var(--auth-orange);
  transform: scaleX(0);
  animation: brandImpactLine 3.2s cubic-bezier(.2,.8,.2,1) infinite;
}

.brand-helmet-drop .logo-img {
  width: 31px !important;
  height: 31px !important;
  filter: brightness(0);
  animation: brandHelmetLanding 3.2s cubic-bezier(.22,.85,.24,1) infinite;
  transform-origin: 50% 100%;
}

.brand-word { display: grid; gap: 2px; text-align: left; }
.brand-word strong { color: #111820; font-size: 18px; font-weight: 900; letter-spacing: -.55px; }
.brand-word small { color: #687586; font-size: 7px; font-weight: 850; letter-spacing: 1.55px; }

.auth-identity-core {
  width: 142px;
  height: 142px;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 25%, #fff 0 2%, #ffb866 8%, #ff7900 30%, #6b2500 72%, #140700 100%);
}
.auth-identity-core::before { border-radius: 50%; }
.auth-identity-core::after { border-radius: 50%; }
.auth-identity-core i { position: relative; z-index: 3; color: #090909; font-size: 31px; }
.auth-identity-core span { font-size: 12px; letter-spacing: 1.4px; }
.auth-identity-core small { position: relative; z-index: 3; color: rgba(0,0,0,.72); font-size: 5px; font-weight: 950; letter-spacing: .65px; }

/* Estação biométrica sóbria, desenhada como equipamento de chão de fábrica. */
.face-command-modal { background: rgba(3, 5, 7, .82) !important; backdrop-filter: blur(16px); }
.face-command-card { border: 1px solid #39434d !important; background: #0d1318 !important; box-shadow: 0 32px 100px rgba(0,0,0,.58) !important; }
.face-command-topbar { border-bottom-color: #2b343d !important; background: linear-gradient(90deg,#111820,#0a0f14) !important; }
.face-command-brand-icon { border-radius: 10px !important; background: #ff7900 !important; color: #0a0d10 !important; }
.face-command-brand small { color: #7d8995 !important; letter-spacing: 1.35px; }
.face-command-heading .face-flutter-kicker { color: #ff970f !important; letter-spacing: 1.5px; }
.face-command-camera-shell,
.face-oval-camera {
  border-radius: 14px !important;
  clip-path: polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
.face-tech-camera { border: 1px solid rgba(255,121,0,.48) !important; background: #05080a !important; }
.face-tech-guide::before {
  content: "+";
  position: absolute;
  left: 50%; top: 50%;
  color: rgba(255,145,30,.7);
  font: 300 26px/1 monospace;
  transform: translate(-50%,-50%);
}
.face-sensor-item { border-radius: 8px !important; }

.access-welcome-brand {
  width: 238px;
  height: 82px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: none;
  background: transparent;
  animation: none;
}
.welcome-brand-word { position: relative; z-index: 2; color: #151b21; font-size: 29px; font-weight: 950; letter-spacing: -1.2px; }
.access-welcome-brand > small { position: absolute; left: 67px; bottom: 8px; color: #6b7785; font-size: 7px; font-weight: 900; letter-spacing: 2px; }
.welcome-helmet-drop {
  position: absolute;
  z-index: 3;
  left: 35px;
  top: 3px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  opacity: 0;
  transform-origin: 50% 100%;
}
.welcome-helmet-drop img { width: 31px; height: 31px; filter: brightness(0); }
.access-welcome-overlay.sequence-running .welcome-helmet-drop {
  animation: welcomeHelmetLanding 1.75s cubic-bezier(.2,.9,.25,1) both;
}

.access-welcome-overlay.is-visible .access-welcome-check {
  animation: welcomeCheckReveal .58s 1.65s cubic-bezier(.18,.9,.22,1.25) both;
}
.access-welcome-overlay.is-visible .access-welcome-card h2 {
  animation: welcomeContentReveal .5s 1.9s ease-out both;
}
.access-welcome-overlay.is-visible .access-welcome-card > p {
  animation: welcomeContentReveal .5s 2.08s ease-out both;
}
.access-welcome-overlay.is-visible .access-welcome-loading {
  animation: welcomeContentReveal .45s 2.28s ease-out both;
}
.access-welcome-loading > span::after {
  animation: steelWelcomeProgress 2s 2.35s ease-out both !important;
}

@keyframes brandHelmetLanding {
  0%, 8% { transform: translateY(-38px) rotate(-10deg); opacity: 0; }
  28% { transform: translateY(3px) rotate(3deg) scaleY(.9); opacity: 1; }
  36%, 78% { transform: translateY(0) rotate(0) scaleY(1); opacity: 1; }
  92%, 100% { transform: translateY(-38px) rotate(8deg); opacity: 0; }
}
@keyframes brandImpactLine {
  0%, 25%, 76%, 100% { transform: scaleX(0); opacity: 0; }
  33%, 54% { transform: scaleX(1); opacity: 1; }
}
@keyframes welcomeHelmetLanding {
  0% { transform: translateY(-80px) rotate(-16deg); opacity: 0; }
  62% { transform: translateY(4px) rotate(3deg) scaleY(.88); opacity: 1; }
  78% { transform: translateY(-3px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0) scaleY(1); opacity: 1; }
}
@keyframes welcomeCheckReveal {
  0% { opacity:0; transform:scale(.25) rotate(-18deg); }
  72% { opacity:1; transform:scale(1.12) rotate(3deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes welcomeContentReveal {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}

@media (max-width: 650px) {
  .top-login .brand { min-width: 172px; }
  .brand-helmet-drop { width: 46px; height: 46px; }
  .brand-word strong { font-size: 16px; }
  .brand-word small { font-size: 6px; }
}