/* =========================================================
   AUTOFIX LOGIN
   Diseño: Automotive / Premium / Futuristic
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --blue: #008cff;
    --cyan: #00d9ff;
    --green: #00ff9d;

    --bg-dark: #020b16;
    --bg-blue: #041b31;

    --text: #ffffff;
    --text-soft: rgba(255, 255, 255, 0.58);

    --card: rgba(5, 23, 40, 0.82);

    --border: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;
}


body {
    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;

    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;

    color: var(--text);

    overflow: hidden;

    /* Fondo principal */
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 140, 255, 0.25),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(0, 255, 157, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 110, 255, 0.08),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #010914 0%,
            #03182b 45%,
            #042d4e 100%
        );
}


/* =========================================================
   EFECTO DE CUADRÍCULA TECNOLÓGICA
   ========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(0, 217, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 217, 255, 0.08) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );

    animation: gridMove 20s linear infinite;
}


@keyframes gridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(45px);
    }
}


/* =========================================================
   LUZ AMBIENTAL
   ========================================================= */

body::after {
    content: "";

    position: fixed;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(0, 140, 255, 0.16) 0%,
            rgba(0, 140, 255, 0.05) 35%,
            transparent 70%
        );

    filter: blur(20px);

    animation: ambientGlow 5s ease-in-out infinite alternate;
}


@keyframes ambientGlow {

    from {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.login-container {

    position: relative;

    width: 420px;
    max-width: calc(100% - 40px);

    padding: 48px 42px 38px;

    text-align: center;

    border-radius: 22px;

    /*
       Borde premium.
       La primera capa es el interior.
       La segunda capa es el borde animado.
    */
    border: 1px solid transparent;

    background:
        linear-gradient(
            145deg,
            rgba(8, 29, 49, 0.94),
            rgba(2, 15, 28, 0.97)
        ) padding-box,

        conic-gradient(
            from var(--angle),
            #006eff,
            #00d9ff,
            #00ff9d,
            #006eff,
            #006eff
        ) border-box;

    /*
       Iluminación exterior
    */
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 50px rgba(0, 140, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    /*
       Entrada elegante
    */
    animation:
        cardAppear 0.8s cubic-bezier(.16, 1, .3, 1),
        borderRotate 6s linear infinite;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* =========================================================
   ANIMACIÓN DEL BORDE
   ========================================================= */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}


@keyframes borderRotate {

    to {
        --angle: 360deg;
    }
}


@keyframes cardAppear {

    0% {
        opacity: 0;
        transform:
            translateY(30px)
            scale(0.94);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   BRILLO SUPERIOR DE LA TARJETA
   ========================================================= */

.login-container::before {

    content: "";

    position: absolute;

    top: 0;
    left: 12%;

    width: 76%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 217, 255, 0.8),
        rgba(0, 255, 157, 0.8),
        transparent
    );

    box-shadow:
        0 0 15px rgba(0, 217, 255, 0.7);

    pointer-events: none;
}


/* =========================================================
   TÍTULO AUTOFIX
   ========================================================= */

.login-container h2 {

    position: relative;

    margin: 0 0 8px;

    font-size: 38px;

    font-weight: 800;

    letter-spacing: -1.5px;

    /*
       Texto con degradado
    */
    background: linear-gradient(
        90deg,
        #ffffff,
        #9eeaff,
        #00d9ff
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    /*
       Brillo
    */
    filter:
        drop-shadow(
            0 0 15px rgba(0, 217, 255, 0.20)
        );

    animation: titleGlow 3s ease-in-out infinite alternate;
}


@keyframes titleGlow {

    from {
        filter:
            drop-shadow(
                0 0 8px rgba(0, 217, 255, 0.15)
            );
    }

    to {
        filter:
            drop-shadow(
                0 0 20px rgba(0, 217, 255, 0.35)
            );
    }
}


/* Línea debajo del título */

.login-container h2::after {

    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin: 12px auto 30px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        var(--blue),
        var(--cyan),
        var(--green)
    );

    box-shadow:
        0 0 12px rgba(0, 217, 255, 0.5);
}


/* =========================================================
   INPUTS
   ========================================================= */

.login-container input {

    display: block;

    width: 100%;

    height: 52px;

    margin: 0 0 16px;

    padding: 0 17px;

    border: 1px solid var(--border);

    border-radius: 11px;

    outline: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;
    font-weight: 500;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}


/* Placeholder */

.login-container input::placeholder {

    color: rgba(255, 255, 255, 0.42);

    transition: color 0.3s ease;
}


/* Hover */

.login-container input:hover {

    border-color:
        rgba(0, 217, 255, 0.35);

    background:
        rgba(255, 255, 255, 0.075);
}


/* Focus */

.login-container input:focus {

    border-color: var(--cyan);

    background:
        rgba(0, 140, 255, 0.08);

    box-shadow:
        0 0 0 3px rgba(0, 217, 255, 0.08),
        0 0 25px rgba(0, 140, 255, 0.12);

    transform: translateY(-1px);
}


.login-container input:focus::placeholder {

    color:
        rgba(255, 255, 255, 0.25);
}


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

.login-container button {

    position: relative;

    width: 100%;

    height: 52px;

    margin-top: 8px;

    border: none;

    border-radius: 11px;

    overflow: hidden;

    cursor: pointer;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.3px;

    background:
        linear-gradient(
            110deg,
            #006eff,
            #009fff,
            #00c8ff
        );

    box-shadow:
        0 10px 25px rgba(0, 140, 255, 0.28);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}


/*
   Brillo que atraviesa el botón
*/

.login-container button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}


.login-container button:hover::before {

    left: 140%;
}


/* Hover */

.login-container button:hover {

    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 14px 35px rgba(0, 160, 255, 0.40),
        0 0 25px rgba(0, 217, 255, 0.12);
}


/* Click */

.login-container button:active {

    transform: translateY(1px);

    box-shadow:
        0 5px 15px rgba(0, 140, 255, 0.25);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-text {

    margin: 22px 0 0;

    color:
        rgba(255, 255, 255, 0.42);

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.3px;
}


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

@media (max-width: 600px) {

    body {
        padding: 20px;
    }


    .login-container {

        width: 100%;

        max-width: 400px;

        padding: 40px 28px 32px;

        border-radius: 19px;
    }


    .login-container h2 {

        font-size: 32px;
    }
}


@media (max-width: 380px) {

    .login-container {

        padding: 34px 22px 28px;
    }


    .login-container h2 {

        font-size: 29px;
    }


    .login-container input,
    .login-container button {

        height: 49px;
    }
}


/* =========================================================
   REDUCCIÓN DE ANIMACIONES
   Para usuarios que lo tienen activado en el sistema
   ========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }
}