/* =========================================
   RESET
========================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

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

/* =========================================
   BODY
========================================= */
body{
    min-height:100vh;
    min-height:100dvh;

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

    position:relative;

    overflow:hidden;

    background:#111827;

    padding:14px;
}

/* =========================================
   FONDO ORIGINAL
========================================= */
body::before{
    content:"";

    position:fixed;
    inset:0;

    background:
        linear-gradient(
            rgba(15,23,42,0.48),
            rgba(15,23,42,0.68)
        ),
        url("../img/fondo.png") center/cover no-repeat;

    transform:scale(1.08);

    filter:blur(8px);

    z-index:0;
}

/* =========================================
   LUCES
========================================= */
.light{
    position:fixed;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(59,130,246,0.24);

    filter:blur(120px);

    top:-130px;
    left:-100px;

    z-index:1;

    pointer-events:none;

    animation:moveLight 10s ease-in-out infinite alternate;
}

.light2{
    position:fixed;

    width:380px;
    height:380px;

    border-radius:50%;

    background:rgba(168,85,247,0.18);

    filter:blur(120px);

    bottom:-130px;
    right:-100px;

    z-index:1;

    pointer-events:none;

    animation:moveLight2 12s ease-in-out infinite alternate;
}

@keyframes moveLight{
    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(35px,25px);
    }
}

@keyframes moveLight2{
    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-30px,-20px);
    }
}

/* =========================================
   FONDO ANIMADO
========================================= */
.bg-anim{
    position:fixed;

    width:120%;
    height:120%;

    background:url("../img/fondo.png") center/cover no-repeat;

    opacity:0.045;

    mix-blend-mode:soft-light;

    animation:mover 30s linear infinite;

    z-index:1;
}

@keyframes mover{
    0%{
        transform:translate(0,0) scale(1.18);
    }

    50%{
        transform:translate(-35px,-35px) scale(1.22);
    }

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

/* =========================================
   CONTENEDOR
========================================= */
.login-container{
    width:100%;

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

    position:relative;

    z-index:5;
}

/* =========================================
   CARD
========================================= */
.card{
    width:100%;
    max-width:410px;

    padding:24px 24px;

    border-radius:28px;

    background:rgba(255,255,255,0.115);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.12);

    box-shadow:
        0 10px 40px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.08);

    text-align:center;

    position:relative;

    animation:fadeUp .75s ease;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(22px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================
   LOGOS LINEALES PRO
========================================= */
.logos-lineales{
    width:100%;

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

    gap:22px;

    margin-bottom:24px;

    position:relative;
}

.logos-lineales::after{
    content:"";

    position:absolute;

    width:76%;
    height:1px;

    left:12%;
    bottom:-12px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );
}

.logo-item{
    width:78px;
    height:78px;

    border-radius:24px;

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.035)
        );

    border:1px solid rgba(255,255,255,.09);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    transition:.28s ease;

    position:relative;

    overflow:hidden;
}

.logo-item::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent 60%
    );

    pointer-events:none;
}

.logo-item:hover{
    transform:translateY(-5px) scale(1.04);

    border-color:rgba(255,255,255,.18);

    box-shadow:
        0 10px 30px rgba(0,0,0,.28);
}

.logo-item img{
    width:58px;
    height:58px;

    object-fit:contain;

    position:relative;
    z-index:2;

    filter:drop-shadow(0 8px 16px rgba(0,0,0,.22));
}

/* =========================================
   TITULO LOGIN
========================================= */
.card h3{
    color:#fff;

    font-size:27px;
    font-weight:800;

    margin-bottom:6px;
}

/* =========================================
   SUBTITULO
========================================= */
.subtitle{
    color:rgba(255,255,255,0.72);

    font-size:13px;

    margin-bottom:17px;
}

/* =========================================
   INPUTS
========================================= */
.input-group{
    margin-bottom:12px;
}

input{
    width:100%;

    padding:13px 15px;

    border:none;
    outline:none;

    border-radius:15px;

    background:rgba(255,255,255,0.085);

    border:1px solid rgba(255,255,255,0.09);

    color:#fff;

    font-size:14px;

    transition:.25s;
}

input::placeholder{
    color:rgba(255,255,255,0.55);
}

input:focus{
    border:1px solid rgba(96,165,250,0.75);

    background:rgba(255,255,255,0.12);

    box-shadow:
        0 0 0 4px rgba(59,130,246,0.12),
        0 0 25px rgba(59,130,246,0.20);
}

/* =========================================
   BOTÓN
========================================= */
button{
    width:100%;

    padding:13px;

    border:none;
    border-radius:15px;

    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );

    color:#fff;

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

    cursor:pointer;

    transition:.25s;

    box-shadow:
        0 10px 25px rgba(37,99,235,0.35);
}

button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(37,99,235,0.45);
}

/* =========================================
   ERROR
========================================= */
.error{
    background:rgba(239,68,68,0.15);

    border:1px solid rgba(239,68,68,0.25);

    color:#fff;

    padding:11px;

    border-radius:13px;

    margin-bottom:13px;

    font-size:13px;
}

/* =========================================
   FOOTER
========================================= */
.footer{
    margin-top:14px;

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

    font-size:12px;
}

/* =========================================
   TABLET HORIZONTAL / PANTALLAS BAJAS
========================================= */
@media(max-height:720px){

    body{
        padding:10px;
    }

    .card{
        max-width:390px;

        padding:18px 22px;

        border-radius:26px;
    }

    .logos-lineales{
        gap:18px;

        margin-bottom:20px;
    }

    .logo-item{
        width:66px;
        height:66px;

        border-radius:20px;
    }

    .logo-item img{
        width:48px;
        height:48px;
    }

    .card h3{
        font-size:24px;
    }

    .subtitle{
        margin-bottom:12px;
    }

    .input-group{
        margin-bottom:10px;
    }

    input,
    button{
        padding:12px 14px;
    }

    .footer{
        margin-top:11px;
    }
}

/* =========================================
   TABLET VERTICAL
========================================= */
@media(min-width:600px) and (max-width:900px) and (min-height:721px){

    .card{
        max-width:390px;

        padding:22px 24px;
    }

    .logos-lineales{
        gap:18px;
    }

    .logo-item{
        width:68px;
        height:68px;

        border-radius:21px;
    }

    .logo-item img{
        width:50px;
        height:50px;
    }
}

/* =========================================
   CELULAR
========================================= */
@media(max-width:520px){

    body{
        padding:12px;
        overflow:hidden;
    }

    .card{
        max-width:360px;

        padding:20px 16px;

        border-radius:25px;
    }

    .logos-lineales{
        gap:12px;

        margin-bottom:20px;
    }

    .logos-lineales::after{
        bottom:-10px;
    }

    .logo-item{
        width:60px;
        height:60px;

        border-radius:18px;
    }

    .logo-item img{
        width:42px;
        height:42px;
    }

    .card h3{
        font-size:24px;
    }

    .subtitle{
        font-size:13px;
        margin-bottom:15px;
    }
}

/* =========================================
   CELULAR PEQUEÑO
========================================= */
@media(max-width:360px){

    body{
        padding:8px;
    }

    .card{
        max-width:330px;

        padding:18px 13px;
    }

    .logos-lineales{
        gap:10px;
    }

    .logo-item{
        width:54px;
        height:54px;

        border-radius:16px;
    }

    .logo-item img{
        width:38px;
        height:38px;
    }

    .card h3{
        font-size:22px;
    }
}