:root {
  --e2go-green: #66AE3D;
  --e2go-cyan: #00AFC6;
  --e2go-blue: #4463AE;
  --e2go-navy: #001E42;
  --terminal-bg: #05080A;
  --panel-bg: #020A14;
}

body {
  margin: 0;
  background: #05080A !important;
  overflow: hidden;
  font-family: "Courier New", monospace;
}

.login-os-page {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(rgba(2, 10, 20, .15), rgba(2, 10, 20, .45)),
    url("../img/login_warehouse_pixel.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.login-os-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.025) 0px,
    rgba(255,255,255,.025) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity: .35;
  z-index: 10;
}

/* Robots animados sobre el fondo */
.bg-robot {
  position: absolute;
  width: 70px;
  height: 70px;
  background-image: url("../img/robot_pixel.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 6;
  opacity: .9;
  filter: drop-shadow(0 0 8px rgba(0,175,198,.45));
}

.bg-robot::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 22px;
  left: 45px;
  top: 34px;
  border: 2px solid var(--e2go-green);
  background: rgba(102,174,61,.25);
  box-shadow: 0 0 8px rgba(102,174,61,.35);
}

.bg-robot-1 {
  left: 9%;
  bottom: 24%;
  animation: robotWalkLeft 8s linear infinite, robotBob 1.1s steps(2) infinite;
}

.bg-robot-2 {
  right: 12%;
  bottom: 31%;
  animation: robotWork 1.8s steps(2) infinite;
}

.bg-robot-3 {
  left: 42%;
  bottom: 9%;
  animation: robotCarryToTruck 6s linear infinite, robotBob 1s steps(2) infinite;
}

.bg-robot-4 {
  right: 31%;
  bottom: 15%;
  animation: robotCarryShort 5s linear infinite, robotBob 1s steps(2) infinite;
}

@keyframes robotBob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -5px; }
}

@keyframes robotWalkLeft {
  0% { transform: translateX(0) scale(1); opacity: .55; }
  20% { opacity: .9; }
  50% { transform: translateX(90px) scale(1); opacity: .9; }
  100% { transform: translateX(180px) scale(1); opacity: .55; }
}

@keyframes robotCarryToTruck {
  0% { transform: translateX(-70px); opacity: 0; }
  15% { opacity: .95; }
  70% { transform: translateX(170px); opacity: .95; }
  100% { transform: translateX(230px); opacity: 0; }
}

@keyframes robotCarryShort {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(55px); }
}

@keyframes robotWork {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

/* Cajas luminosas extras */
.floating-box {
  position: absolute;
  width: 28px;
  height: 22px;
  border: 2px solid var(--e2go-green);
  background: rgba(102,174,61,.18);
  box-shadow: 0 0 10px rgba(102,174,61,.35);
  z-index: 5;
  pointer-events: none;
}

.floating-box-1 {
  left: 31%;
  bottom: 22%;
  animation: boxSlide 6s linear infinite;
}

.floating-box-2 {
  right: 21%;
  bottom: 23%;
  animation: boxSlideSmall 4s linear infinite;
}

@keyframes boxSlide {
  from { transform: translateX(0); opacity: .2; }
  20% { opacity: .9; }
  to { transform: translateX(240px); opacity: .2; }
}

@keyframes boxSlideSmall {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(80px); opacity: 1; }
}

/* Efecto brillo ambiente */
.neon-pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(circle at 20% 70%, rgba(102,174,61,.12), transparent 18%),
    radial-gradient(circle at 78% 45%, rgba(0,175,198,.12), transparent 20%),
    radial-gradient(circle at 55% 88%, rgba(102,174,61,.10), transparent 18%);
  animation: neonPulse 4s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}

/* Mundo pixel art */
.pixel-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .75;
}

/* Chrome / Edge / Opera autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #66AE3D !important;
  caret-color: #66AE3D !important;
  box-shadow: 0 0 0px 1000px #020712 inset !important;
  -webkit-box-shadow: 0 0 0px 1000px #020712 inset !important;
  border: 1px solid #00AFC6 !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Firefox */
input:-moz-autofill {
  box-shadow: 0 0 0px 1000px #020712 inset !important;
  color: #66AE3D !important;
}

/* Inputs terminal */
.terminal-input,
.terminal-input:focus,
.terminal-input:active {
  background: #020712 !important;
  color: #66AE3D !important;
  -webkit-text-fill-color: #66AE3D !important;
  caret-color: #66AE3D !important;
}

/* Texto sugerido/autocomplete */
input:-internal-autofill-selected {
  background-color: #020712 !important;
  color: #66AE3D !important;
  -webkit-text-fill-color: #66AE3D !important;
}

/* Placeholder */
.terminal-input::placeholder {
  color: rgba(102,174,61,.45) !important;
}

.grid-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background:
    linear-gradient(rgba(0,175,198,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,175,198,.18) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: bottom;
  opacity: .35;
}

.conveyor {
  position: absolute;
  bottom: 22%;
  left: 10%;
  width: 80%;
  height: 34px;
  border: 1px solid var(--e2go-cyan);
  background: rgba(0,30,66,.45);
  box-shadow: 0 0 18px rgba(0,175,198,.25);
}


/* Robots pixelados originales */
.robot {
  position: absolute;
  width: 80px;
  height: 120px;
  filter: drop-shadow(0 0 8px rgba(0,175,198,.45));
  animation: robotBob 1.4s steps(2) infinite;
}

.robot-1 {
  left: 18%;
  bottom: 26%;
}

.robot-2 {
  right: 18%;
  bottom: 28%;
  animation-delay: .4s;
}

.robot-head {
  width: 54px;
  height: 42px;
  background: #020712;
  border: 2px solid var(--e2go-cyan);
  margin: 0 auto;
  position: relative;
}

.robot-head::before,
.robot-head::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 7px;
  height: 7px;
  background: var(--e2go-green);
  box-shadow: 0 0 8px var(--e2go-green);
}

.robot-head::before { left: 13px; }
.robot-head::after { right: 13px; }

.robot-body {
  width: 64px;
  height: 48px;
  background: rgba(0,30,66,.85);
  border: 2px solid var(--e2go-green);
  margin: 6px auto 0;
}

.robot-arm {
  position: absolute;
  width: 18px;
  height: 46px;
  border: 2px solid var(--e2go-cyan);
  top: 50px;
  animation: armMove 1.2s steps(2) infinite;
}

.robot-arm.left {
  left: 0;
}

.robot-arm.right {
  right: 0;
}

.robot .box {
  position: absolute;
  width: 30px;
  height: 26px;
  background: rgba(102,174,61,.22);
  border: 2px solid var(--e2go-green);
  bottom: 0;
  left: 25px;
  animation: boxLift 1.8s steps(3) infinite;
}

@keyframes armMove {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(14deg); }
}

@keyframes boxLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Terminal login */
.login-terminal {
  width: min(440px, 92vw);
  background: rgba(2,10,20,.96);
  border: 1px solid var(--e2go-cyan);
  box-shadow:
    0 0 34px rgba(0,175,198,.28),
    inset 0 0 28px rgba(0,175,198,.05);
  z-index: 20;
}

.terminal-header {
  height: 38px;
  background: #020712;
  border-bottom: 1px solid var(--e2go-cyan);
  color: var(--e2go-cyan);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .9rem;
  font-size: .82rem;
  letter-spacing: .05em;
}

.terminal-body {
  padding: 2rem;
}

.login-logo-terminal {
  max-width: 150px;
  filter: drop-shadow(0 0 10px rgba(68,99,174,.85));
}

.login-terminal h1 {
  color: var(--e2go-green);
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: .08em;

}

.terminal-subtitle {
  color: var(--e2go-green);
  text-align: center;
  margin: .4rem 0 1.5rem;
  font-size: .95rem;
}

.terminal-line {
  border: 1px solid var(--e2go-green);
  color: var(--e2go-green);
  padding: .5rem;
  margin-bottom: 1.3rem;
  text-align: center;
  background: rgba(102,174,61,.06);
}

.login-form-terminal label {
  color: var(--e2go-cyan);
  display: block;
  margin-bottom: .35rem;
  font-size: .82rem;
}

.terminal-input {
  width: 100%;
  background: #020712 !important;
  border: 1px solid rgba(0,175,198,.75);
  color: var(--e2go-green) !important;
  padding: .75rem;
  margin-bottom: 1rem;
  outline: none;
  font-family: "Courier New", monospace;
}

.terminal-input:focus {
  border-color: var(--e2go-green);
  box-shadow: 0 0 14px rgba(102,174,61,.35);
}

.terminal-login-btn {
  width: 100%;
  background: transparent;
  color: var(--e2go-green);
  border: 1px solid var(--e2go-green);
  padding: .85rem;
  font-family: "Courier New", monospace;
  font-weight: bold;
  letter-spacing: .08em;
  transition: .2s ease;
}

.terminal-login-btn:hover {
  background: var(--e2go-green);
  color: #020712;
  box-shadow: 0 0 18px rgba(102,174,61,.6);
}

.terminal-error {
  margin-top: 1rem;
  color: #ff4d6d;
  border: 1px solid #ff4d6d;
  padding: .75rem;
  text-align: center;
}

.terminal-line-error {
  border-color: #ff4d6d;
  color: #ff4d6d;
  background: rgba(255, 77, 109, .08);
  box-shadow: 0 0 14px rgba(255, 77, 109, .22);
}

/* Responsive */
@media (max-width: 768px) {
  .robot,
  .bg-robot,
  .floating-box {
    opacity: .35;
  }

  .robot-1 {
    left: 6%;
  }

  .robot-2 {
    right: 6%;
  }

  .bg-robot-1 {
    left: 4%;
  }

  .bg-robot-2 {
    right: 4%;
  }

  .bg-robot-3,
  .bg-robot-4 {
    display: none;
  }

  .terminal-body {
    padding: 1.5rem;
  }
  
}


/* ===============================
   MEJORAS VISUALES LOGIN E2GO
   quitar barra azul + partículas + cursor neon
================================= */

/* Quitar barra azul horizontal */
.login-os-page::before{
  display:none !important;
}

/* Cursor global personalizado */
html,
body,
.login-os-page,
button,
input,
a,
label{
  cursor:none;
}

/* Cursor principal */
.cursor-dot{
  position:fixed;
  width:18px;
  height:18px;
  border:2px solid #66AE3D;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:99999;
  box-shadow:
    0 0 6px rgba(102,174,61,.9),
    0 0 14px rgba(102,174,61,.55);
  transition:
    width .12s ease,
    height .12s ease,
    border-color .12s ease;
}

/* centro del cursor */
.cursor-dot::after{
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  background:#66AE3D;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* al pasar por botones o inputs */
.cursor-hover{
  width:28px;
  height:28px;
  border-color:#00AFC6;
}

/* Partículas verdes */
.matrix-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:3;
}

.particle{
  position:absolute;
  width:3px;
  height:3px;
  background:#66AE3D;
  border-radius:50%;
  opacity:.8;
  box-shadow:
    0 0 6px #66AE3D,
    0 0 12px rgba(102,174,61,.8);
  animation:floatParticle linear infinite;
}

/* Variaciones */
.particle:nth-child(1){left:5%;top:80%;animation-duration:8s;}
.particle:nth-child(2){left:15%;top:60%;animation-duration:12s;}
.particle:nth-child(3){left:25%;top:72%;animation-duration:10s;}
.particle:nth-child(4){left:38%;top:90%;animation-duration:14s;}
.particle:nth-child(5){left:47%;top:65%;animation-duration:9s;}
.particle:nth-child(6){left:56%;top:88%;animation-duration:13s;}
.particle:nth-child(7){left:66%;top:75%;animation-duration:11s;}
.particle:nth-child(8){left:75%;top:84%;animation-duration:15s;}
.particle:nth-child(9){left:85%;top:68%;animation-duration:9s;}
.particle:nth-child(10){left:93%;top:92%;animation-duration:12s;}
.particle:nth-child(11){left:12%;top:30%;animation-duration:10s;}
.particle:nth-child(12){left:82%;top:25%;animation-duration:14s;}

@keyframes floatParticle{
  0%{
    transform:translateY(0) scale(1);
    opacity:0;
  }
  10%{
    opacity:.8;
  }
  50%{
    opacity:1;
  }
  100%{
    transform:translateY(-220px) translateX(40px) scale(.4);
    opacity:0;
  }
}