/* ============================================================
           CONFIGURACIÓN GENERAL
           ============================================================ */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #080808;
}


body {
    position: relative;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
}


/* ============================================================
           CANVAS PRINCIPAL
           ============================================================ */

#organismoTecnologico {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}


/* ============================================================
           FONDO BASE
           ============================================================ */

.fondo-base {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient( ellipse at center, rgba(255,153,0,0.025) 0%, rgba(255,153,0,0.035) 25%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.88) 100% );*/
 
}


/* ============================================================
           BRILLO NARANJA CENTRAL
           ============================================================ */

.energia-verde {
    position: fixed;
    width: 55vw;
    height: 55vw;
    max-width: 950px;
    max-height: 950px;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255,153,0,0.13) 0%, rgba(255,153,0,0.045) 25%, rgba(255,153,0,0.025) 48%, transparent 70% );
    filter: blur(35px);
    z-index: 2;
    pointer-events: none;
    animation: respirarNaranja 7.5s ease-in-out infinite;
}


/*@keyframes respirarNaranja {

    0%, 100% {
        transform: translate(-50%, -50%) scale(0.82);
        opacity: 0.55;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}*/


/* ============================================================
           BRILLO NARANJA SECUNDARIO
           ============================================================ */

.energia-violeta {
    position: fixed;
    width: 75vw;
    height: 75vw;
    max-width: 1300px;
    max-height: 1300px;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( circle, transparent 20%, rgba(255,153,0,0.035) 42%, rgba(255,153,0,0.055) 58%, transparent 72% );
    filter: blur(40px);
    z-index: 2;
    pointer-events: none;
    animation: respirarNaranjaSecundario 11s ease-in-out infinite;
}


@keyframes respirarNaranjaSecundario {

    0%, 100% {
        transform: translate(-50%, -50%) scale(0.90) rotate(-2deg);
        opacity: 0.55;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.10) rotate(2deg);
        opacity: 1;
    }
}


/* ============================================================
           ATMÓSFERA
           ============================================================ */

.atmosfera {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient( ellipse at center, transparent 0%, rgba(0, 0, 0, 0.10) 42%, rgba(0, 0, 0, 0.65) 82%, rgba(0, 0, 0, 0.92) 100% );
}


/* ============================================================
           VIGNETTE
           ============================================================ */

.vignette {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.92), inset 0 0 60px rgba(0, 0, 0, 0.60);
}


/* ============================================================
           CONTENIDO
           ============================================================ */

.contenido {
    position: relative;
    z-index: 20;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.authentication-wrapper {
    width: 100%;
}


.authentication-inner {
    position: relative;
    z-index: 30;
}


/* ============================================================
           LOGO
           ============================================================ */

.logo-cobra {
    position: relative;
    z-index: 40;
    margin-bottom: 18px;
    animation: respirarLogo 7.5s ease-in-out infinite;
    filter: drop-shadow( 0 0 12px rgba(255,153,0,0.25) );
}


@keyframes respirarLogo {

    0%, 100% {
        transform: scale(0.985);
    }

    50% {
        transform: scale(1.025);
    }
}


.logo-cobra img {
    max-width: 250px;
    height: auto;
}


/* ============================================================
           FORMULARIO
           ============================================================ */

.form-container {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 30px 32px;
    background: linear-gradient( 145deg, rgba(20,18,14,0.92), rgba(10,10,10,0.95) );
    border: 1px solid rgba(255,153,0,0.28);
    border-radius: 16px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.78), 0 0 50px rgba(255,153,0,0.08), 0 0 30px rgba(255,153,0,0.04), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    overflow: hidden;
}


    /* ============================================================
           BORDE SUPERIOR ANIMADO
           ============================================================ */

    .form-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, #FF9900, #FFB84D, #FF9900, transparent );
        animation: lineaEnergia 4s linear infinite;
    }


@keyframes lineaEnergia {

    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}


/* ============================================================
           LABELS
           ============================================================ */

label,
.form-label span,
.form-label a {
    color: #f4f8ff !important;
    font-weight: 500;
}


.form-group {
    margin-bottom: 22px;
}


/* ============================================================
           CAMPOS
           ============================================================ */

.form-control {
    height: 44px;
    color: #ffffff !important;
    background: rgba(12,12,12,0.90) !important;
    border: 1px solid rgba(255,153,0,0.28) !important;
    border-radius: 8px !important;
    transition: all .25s ease;
}


    .form-control:focus {
        background: rgba(22,20,17,0.97) !important;
        border-color: rgba(255,153,0,0.72) !important;
        box-shadow: 0 0 0 2px rgba(255,153,0,0.07), 0 0 20px rgba(255,153,0,0.15) !important;
    }


    .form-control::placeholder {
        color: rgba(220,220,220,0.48) !important;
    }


/* ============================================================
           CLIENTE
           ============================================================ */

#ddlCliente {
    color: #FFB84D !important;
    font-weight: 500;
    background-color: rgba(5, 15, 29, 0.90) !important;
}


    #ddlCliente option {
        background: #07101f;
        color: #ffffff;
    }


/* ============================================================
           USUARIO
           ============================================================ */

#txtuser {
    color: #FFB84D !important;
    font-weight: 500;
}


/* ============================================================
           PASSWORD
           ============================================================ */

#txtpassword {
    color: #FFB84D !important;
    font-weight: 500;
}


/* ============================================================
           RECORDARME
           ============================================================ */

.custom-control-label {
    color: #edf6ff !important;
    font-weight: 400;
    cursor: pointer;
}


.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #FF9900;
    border-color: #FFB84D;
    box-shadow: 0 0 12px rgba(255,153,0,0.40);
}


/* ============================================================
           LINK
           ============================================================ */

.form-label a {
    color: #FFB84D !important;
    text-decoration: none;
    transition: .2s ease;
}


    .form-label a:hover {
        color: #FFD08A !important;
        text-shadow: 0 0 10px rgba(255,153,0,0.60);
    }


/* ============================================================
           BOTÓN
           ============================================================ */

.btn-inicio {
    position: relative;
    overflow: hidden;
    min-width: 125px;
    height: 42px;
    border: 1px solid rgba(255,153,0,0.75);
    border-radius: 8px;
    background: linear-gradient( 135deg, #D97700, #FF9900 );
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.8px;
    box-shadow: 0 8px 25px rgba(255,153,0,0.30);
    transition: all .2s ease;
}


    .btn-inicio:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 30px rgba(255,153,0,0.48);
    }


    .btn-inicio::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.28), transparent );
        transform: skewX(-20deg);
        animation: brilloBoton 4s infinite;
    }


@keyframes brilloBoton {

    0% {
        left: -100%;
    }

    35%, 100% {
        left: 150%;
    }
}


/* ============================================================
           IP
           ============================================================ */

#lblip {
    color: #FFB84D !important;
}


/* ============================================================
           ALERTA
           ============================================================ */

#lblalerta {
    color: #FF9900 !important;
    text-shadow: 0 0 8px rgba(255,153,0,0.30);
}



/* ============================================================
           ESTADO: EL ORGANISMO DESPIERTA
           ------------------------------------------------------------
           Solo se activa brevemente al pulsar Inicio.
        ============================================================ */

.organismo-despertando #organismoTecnologico {
    filter: brightness(1.22) saturate(1.25);
    transition: filter .35s ease;
}

.organismo-despertando .energia-verde {
    animation-duration: 2.2s;
}

.organismo-despertando .energia-violeta {
    animation-duration: 2.8s;
}

/* ============================================================
           RESPONSIVE
           ============================================================ */

@media (max-width: 700px) {

    .form-container {
        max-width: 92%;
        padding: 25px 22px;
    }


    .logo-cobra img {
        max-width: 210px;
    }
}


/* ============================================================
           REDUCIR MOVIMIENTO
           ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* FONDO ESTÁTICO NEGRO: se eliminan únicamente los efectos del fondo.
   El formulario, el logo y las animaciones de sus controles se conservan. */
html,
body {
    background: #000000 !important;
}

#organismoTecnologico,
.fondo-base,
.energia-verde,
.energia-violeta,
.atmosfera,
.vignette {
    display: none !important;
}