/* =====================================
   RESET
===================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Rajdhani', sans-serif;
    background: #050b16;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =====================================
   GRID DE FONDO
===================================== */
.grid-bg {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,180,255,.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,180,255,.15) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
}

/* =====================================
   GLOWS
===================================== */
.glow-blue, .glow-orange {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(180px);
    opacity: .35;
    z-index: 2;
    top: 50%;
}
.glow-blue { left: -250px; background: #00bfff; }
.glow-orange { right: -250px; background: #ff6a00; }

/* =====================================
   LOGIN PANEL
===================================== */
.login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.logo-container {
    position: relative;
    z-index: 30;
    margin-bottom: -90px;
}
.logo-container img {
    width: 190px;
    filter: drop-shadow(0 0 10px #4400ff) drop-shadow(0 0 20px #00d9ff) drop-shadow(0 0 15px #ff6a00) drop-shadow(0 0 30px #ff6a00);
}

.frame {
    width: 100%;
    position: relative;
    padding: 90px 60px 30px;
    border-radius: 25px;
    background: linear-gradient(180deg, rgba(120,130,140,.90), rgba(70,80,90,.90));
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 30px rgba(55,0,255,.8), 10px 0 30px rgba(255,106,0,.8);
    overflow: hidden;
}
.frame::before { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 3px solid rgba(255,255,255,.15); border-radius: 18px; }
.frame::after { content: ""; position: absolute; inset: 0; border-left: 4px solid #00d9ff; border-right: 4px solid #ff6a00; border-radius: 25px; pointer-events: none; }

/* =====================================
   CONTENIDO Y INPUTS
===================================== */
.content { position: relative; z-index: 10; }
h1 { text-align: center; color: #d9e6ef; font-size: 36px; letter-spacing: 2px; margin-bottom: 25px; text-shadow: 0 0 10px rgba(255,255,255,.4); }
label { display: block; color: #d7e3ed; font-size: 22px; margin-top: 18px; margin-bottom: 8px; }

/* Input grupal para el prefijo fijo */
.input-group {
    display: flex;
    align-items: center;
    background: #111a25;
    border: 2px solid rgba(255, 255, 255, 0.20);
    border-radius: 8px;
    height: 55px;
    padding: 0 20px;
    margin-top: 8px;
    transition: .3s;
}
.input-group:focus-within { border-color: #00d9ff; box-shadow: 0 0 15px rgba(0, 217, 255, 0.6); }
.prefix { color: #00d9ff; font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; margin-right: 5px; white-space: nowrap; }
.input-group input { border: none !important; background: transparent !important; width: 100%; height: 100%; padding: 0; outline: none; color: white; font-size: 20px; }

input[type="password"] { width: 100%; height: 55px; border: 2px solid rgba(255,255,255,.20); border-radius: 8px; background: #111a25; color: white; font-size: 20px; padding: 0 20px; margin-top: 8px; transition: .3s; }
input[type="password"]:focus { outline: none; border-color: #00d9ff; box-shadow: 0 0 15px rgba(0,217,255,.6); }

button { width: 100%; height: 70px; margin-top: 25px; border: none; cursor: pointer; background: #ff6a00; color: #111; font-size: 28px; font-weight: 700; border-radius: 10px; transition: .3s; box-shadow: 0 0 20px rgba(255,106,0,.8); }
button:hover { transform: translateY(-3px); box-shadow: 0 0 25px rgba(255,106,0,1); }
button:active { transform: scale(.98); }

/* =====================================
   STATUS & CIRCUITOS
===================================== */
.status { margin-top: 20px; background: rgba(0,0,0,.45); padding: 15px; border-radius: 8px; color: #c0ced9; font-size: 16px; font-family: Consolas,monospace; border: 1px solid rgba(255,255,255,.10); }
.circuit-left, .circuit-right { position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 200px; }
.circuit-left { left: 5px; } .circuit-right { right: 5px; }
.circuit-left span, .circuit-right span { position: absolute; width: 40px; height: 3px; background: #00e1ff; box-shadow: 0 0 8px #00e1ff; }
.circuit-left span:nth-child(1){top:20px;} .circuit-left span:nth-child(2){top:60px;} .circuit-left span:nth-child(3){top:100px;} .circuit-left span:nth-child(4){top:140px;} .circuit-left span:nth-child(5){top:180px;}
.circuit-right span{right:0;} .circuit-right span:nth-child(1){top:20px;} .circuit-right span:nth-child(2){top:60px;} .circuit-right span:nth-child(3){top:100px;} .circuit-right span:nth-child(4){top:140px;} .circuit-right span:nth-child(5){top:180px;}

/* =====================================
   AJUSTE DE ESCALA
===================================== */
@media(max-height: 800px) { .login-panel { transform: scale(0.9); } }
@media(max-height: 700px) { .login-panel { transform: scale(0.8); } }
@media(max-height: 600px) { .login-panel { transform: scale(0.7); } }