/* =========================================================
   WMS CORE · Login animado (concepto "cyber")
   Colores en variables: cambie --neon para otra paleta.
   ========================================================= */
:root{
    --fondo: #05070c;
    --neon: #00e5ff;
    --neon-2: #7c4dff;
    --neon-rgb: 0, 229, 255;
    --texto: #d9f6ff;
    --texto-tenue: #7fa3b3;
    --error: #ff4d6d;
    --ok: #2bff88;
    --vidrio: rgba(8, 16, 26, .62);
}

html, body.login-cyber{ height: 100%; }
body.login-cyber *, body.login-cyber *::before, body.login-cyber *::after{ box-sizing: border-box; }

body.login-cyber{
    margin: 0;
    background: radial-gradient(ellipse at 50% 30%, #0b1622 0%, var(--fondo) 70%);
    color: var(--texto);
    font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lienzo animado y líneas de barrido */
#cyberLienzo{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.cyber-scan{
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
.cyber-scan::after{
    content: ""; position: absolute; left: 0; right: 0; height: 120px;
    background: linear-gradient(to bottom, transparent, rgba(var(--neon-rgb), .06), transparent);
    animation: barrido 7s linear infinite;
}
@keyframes barrido{ from{ top: -120px; } to{ top: 100%; } }

/* Controles de esquina */
.cyber-controles{
    position: fixed; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px;
}
.cyber-controles button{
    width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
    background: rgba(var(--neon-rgb), .06); color: var(--neon);
    border: 1px solid rgba(var(--neon-rgb), .35);
    display: grid; place-items: center; font-size: 1rem; transition: .2s;
}
.cyber-controles button:hover{ background: rgba(var(--neon-rgb), .18); box-shadow: 0 0 12px rgba(var(--neon-rgb), .5); }

/* Tarjeta de vidrio */
.cyber-card{
    position: relative; z-index: 2;
    width: min(410px, calc(100vw - 32px));
    padding: 30px 28px 22px;
    background: var(--vidrio);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--neon-rgb), .35);
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(var(--neon-rgb), .05) inset,
                0 0 40px rgba(var(--neon-rgb), .12),
                0 20px 60px rgba(0,0,0,.6);
    animation: aparecer .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes aparecer{ from{ opacity: 0; transform: translateY(18px) scale(.97); } to{ opacity: 1; transform: none; } }

/* Esquinas tipo visor */
.cyber-esq{ position: absolute; width: 18px; height: 18px; border: 2px solid var(--neon); filter: drop-shadow(0 0 4px var(--neon)); }
.cyber-esq.si{ top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.cyber-esq.sd{ top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.cyber-esq.ii{ bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.cyber-esq.id{ bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }

/* Encabezado */
.cyber-logo{
    width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%;
    display: grid; place-items: center; position: relative;
    background: radial-gradient(circle, rgba(var(--neon-rgb), .18), transparent 70%);
    border: 1px solid rgba(var(--neon-rgb), .5);
    animation: latido 2.6s ease-in-out infinite;
}
.cyber-logo::before{
    content: ""; position: absolute; inset: -7px; border-radius: 50%;
    border: 2px dashed rgba(var(--neon-rgb), .45);
    animation: girar 14s linear infinite;
}
.cyber-logo img{ width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(var(--neon-rgb), .7)); }
@keyframes latido{
    0%,100%{ box-shadow: 0 0 10px rgba(var(--neon-rgb), .35); }
    50%    { box-shadow: 0 0 28px rgba(var(--neon-rgb), .75); }
}
@keyframes girar{ to{ transform: rotate(360deg); } }

.cyber-titulo{
    font-family: 'Orbitron', 'Segoe UI', sans-serif; font-weight: 700;
    text-align: center; letter-spacing: 3px; font-size: 1.45rem; margin: 0;
    color: #fff; text-shadow: 0 0 10px rgba(var(--neon-rgb), .8);
}
.cyber-sub{
    font-family: 'Share Tech Mono', Consolas, monospace;
    text-align: center; color: var(--texto-tenue); font-size: .82rem; letter-spacing: 1px; margin: 4px 0 14px;
}

/* Barra de estado */
.cyber-estado{
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Share Tech Mono', Consolas, monospace; font-size: .74rem;
    color: var(--texto-tenue); padding: 6px 10px; margin-bottom: 16px;
    border: 1px solid rgba(var(--neon-rgb), .18); border-radius: 6px; background: rgba(0,0,0,.25);
}
.cyber-punto{
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
    background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: parpadeo 1.4s infinite;
}
.cyber-estado.ocupado .cyber-punto{ background: #ffc400; box-shadow: 0 0 8px #ffc400; animation-duration: .4s; }
.cyber-estado.fallo .cyber-punto{ background: var(--error); box-shadow: 0 0 8px var(--error); }
@keyframes parpadeo{ 50%{ opacity: .25; } }

/* Campos */
.cyber-campo{ margin-bottom: 14px; }
.cyber-campo label{
    display: block; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--texto-tenue); margin-bottom: 5px; font-weight: 600;
}
.cyber-input{ position: relative; }
.cyber-input i{
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: rgba(var(--neon-rgb), .7); font-size: 1rem; pointer-events: none; transition: .2s;
}
.cyber-input input{
    width: 100%; box-sizing: border-box; padding: 11px 12px 11px 38px;
    background: rgba(0, 10, 18, .65); color: #fff;
    border: 1px solid rgba(var(--neon-rgb), .25); border-radius: 8px;
    font-family: 'Share Tech Mono', Consolas, monospace; font-size: 1.02rem; letter-spacing: 1px;
    outline: none; transition: border-color .2s, box-shadow .2s;
}
.cyber-input input::placeholder{ color: rgba(255,255,255,.25); }
.cyber-input input:focus{
    border-color: var(--neon);
    box-shadow: 0 0 0 3px rgba(var(--neon-rgb), .15), 0 0 16px rgba(var(--neon-rgb), .35);
}
.cyber-input input:focus + i, .cyber-input input:focus ~ i{ color: var(--neon); }
.cyber-ojo{
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--texto-tenue); cursor: pointer; padding: 4px 6px;
}
.cyber-ojo:hover{ color: var(--neon); }

/* Botón con destello */
.cyber-btn{
    position: relative; overflow: hidden; width: 100%; margin-top: 4px; padding: 12px;
    font-family: 'Orbitron', 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: 3px; font-size: .9rem;
    color: #001018; cursor: pointer; border: 0; border-radius: 8px;
    background: linear-gradient(90deg, var(--neon), #4fc3ff 55%, var(--neon-2));
    box-shadow: 0 0 18px rgba(var(--neon-rgb), .45);
    transition: transform .15s, box-shadow .2s, filter .2s;
}
.cyber-btn::after{
    content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
    transform: skewX(-20deg); transition: left .6s;
}
.cyber-btn:hover{ box-shadow: 0 0 30px rgba(var(--neon-rgb), .8); }
.cyber-btn:hover::after{ left: 130%; }
.cyber-btn:active{ transform: scale(.98); }
.cyber-btn:disabled{ filter: grayscale(.5) brightness(.8); cursor: wait; }
.cyber-btn .giro{
    display: none; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid rgba(0,16,24,.35); border-top-color: #001018; border-radius: 50%;
    animation: girar .7s linear infinite;
}
.cyber-btn.cargando .giro{ display: inline-block; }

/* Mensaje de respuesta */
.cyber-msg{
    font-family: 'Share Tech Mono', Consolas, monospace; font-size: .86rem;
    padding: 8px 12px; border-radius: 6px; margin-bottom: 14px;
    border-left: 3px solid var(--error); background: rgba(255, 77, 109, .1); color: #ffb3c1;
    animation: temblor .35s;
}
.cyber-msg.ok{ border-left-color: var(--ok); background: rgba(43, 255, 136, .08); color: #b9ffd6; animation: none; }
@keyframes temblor{ 20%,60%{ transform: translateX(-5px); } 40%,80%{ transform: translateX(5px); } }

/* Enlaces y pie */
.cyber-links{ display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: .9rem; gap: 8px; flex-wrap: wrap; }
.cyber-links label{ color: var(--texto-tenue); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cyber-links input[type=checkbox]{ accent-color: var(--neon); width: 15px; height: 15px; }
.cyber-links a{ color: var(--neon); text-decoration: none; }
.cyber-links a:hover{ text-shadow: 0 0 8px var(--neon); }
.cyber-pie{
    margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(var(--neon-rgb), .12);
    text-align: center; font-family: 'Share Tech Mono', Consolas, monospace; font-size: .7rem;
    color: rgba(127, 163, 179, .7); letter-spacing: 1px;
}

.d-none{ display: none !important; }

/* Accesibilidad: sin movimiento si el sistema lo pide */
/* ===== Estado APAGADO (al cargar): gris y sin movimiento hasta tocar el logo ===== */
#cyberLienzo, .cyber-scan, .cyber-card, .cyber-controles{ transition: filter .9s ease, opacity .9s ease; }
body.apagado #cyberLienzo{ filter: grayscale(1) brightness(.55); }
body.apagado .cyber-scan{ opacity: .4; }
body.apagado .cyber-card, body.apagado .cyber-controles{ filter: grayscale(1); }
body.apagado *, body.apagado *::before, body.apagado *::after{ animation-play-state: paused !important; }
body.apagado .cyber-card{ animation: none; }
body.apagado .cyber-estado .cyber-punto{ background: #9ca3af; box-shadow: none; }
body.apagado input, body.apagado .cyber-btn{ cursor: not-allowed; }
/* El logo invita a tocarlo: al pasar el mouse recupera el color */
.cyber-logo{ cursor: pointer; outline: none; }
body.apagado .cyber-logo:hover, body.apagado .cyber-logo:focus-visible{ filter: grayscale(0) drop-shadow(0 0 12px rgba(var(--neon-rgb), .9)); }
.cyber-logo:active{ transform: scale(.95); }

@media (prefers-reduced-motion: reduce){
    .cyber-scan::after, .cyber-logo, .cyber-logo::before, .cyber-punto, .cyber-card{ animation: none !important; }
}
@media (max-height: 560px){ body.login-cyber{ align-items: flex-start; overflow-y: auto; padding: 16px 0; } }