* {
    box-sizing: border-box;
}


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

    margin: 0;
    padding: 0;
}


body {
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1f2937 50%,
            #111827 100%
        );

    color: #ffffff;
}


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

.login-page {

    width: 100%;
    min-height: 100vh;

    display: flex;

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

    padding:
        5vh
        5vw;
}


/* ==================================================
   TARJETA
   ================================================== */

.login-card {

    width: min(
        92vw,
        500px
    );

    min-height: 520px;

    padding:
        clamp(2rem, 5vw, 3.5rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    background: rgba(
        17,
        24,
        39,
        0.96
    );

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

    border-radius: clamp(
        1rem,
        2vw,
        1.5rem
    );

    box-shadow:
        0 2rem 5rem
        rgba(
            0,
            0,
            0,
            0.35
        );
}


/* ==================================================
   ENCABEZADO
   ================================================== */

.login-header {

    text-align: center;

    margin-bottom:
        clamp(
            1.5rem,
            4vh,
            2.5rem
        );
}


.login-logo {

    width: min(100%, 300px);

    margin:
        0 auto
        1.5rem;

    display: flex;

    align-items: center;
    justify-content: center;
}


.login-logo img {

    display: block;

    width: 100%;

    height: auto;

    max-height: 86px;

    object-fit: contain;

    border-radius: 0.15rem;
}


.login-header h1 {

    margin: 0;

    font-size: clamp(
        1.45rem,
        3.8vw,
        1.95rem
    );

    line-height: 1.2;
}


.login-header p {

    margin:
        0.7rem
        0
        0;

    color: #9ca3af;

    font-size: clamp(
        0.85rem,
        2vw,
        1rem
    );
}


/* ==================================================
   MENSAJES
   ================================================== */

.messages {

    margin-bottom: 1rem;
}


.alert {

    padding:
        0.75rem
        1rem;

    border-radius: 0.6rem;

    font-size: 0.9rem;

    line-height: 1.4;
}


.alert-danger {

    background:
        rgba(
            220,
            38,
            38,
            0.15
        );

    border:
        1px solid
        rgba(
            248,
            113,
            113,
            0.35
        );

    color: #fca5a5;
}


.alert-warning {

    background:
        rgba(
            245,
            158,
            11,
            0.15
        );

    border:
        1px solid
        rgba(
            251,
            191,
            36,
            0.35
        );

    color: #fcd34d;
}


.alert-success {

    background:
        rgba(
            34,
            197,
            94,
            0.15
        );

    border:
        1px solid
        rgba(
            74,
            222,
            128,
            0.35
        );

    color: #86efac;
}


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

.login-form {

    width: 100%;
}


.form-group {

    width: 100%;

    margin-bottom:
        clamp(
            1rem,
            2.5vh,
            1.4rem
        );
}


.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    color: #d1d5db;

    font-size: clamp(
        0.85rem,
        2vw,
        0.95rem
    );

    font-weight: 600;
}


.form-group input {

    width: 100%;

    height: clamp(
        3rem,
        7vh,
        3.5rem
    );

    padding:
        0
        1rem;

    border:
        1px solid
        #374151;

    border-radius: 0.7rem;

    outline: none;

    background: #1f2937;

    color: #ffffff;

    font-size: clamp(
        0.9rem,
        2vw,
        1rem
    );

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


.form-group input::placeholder {

    color: #6b7280;
}


.form-group input:focus {

    border-color: #60a5fa;

    box-shadow:
        0 0 0 3px
        rgba(
            96,
            165,
            250,
            0.15
        );
}


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

.login-button {

    width: 100%;

    min-height: clamp(
        3rem,
        7vh,
        3.5rem
    );

    margin-top: 0.5rem;

    border: none;

    border-radius: 0.7rem;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: #ffffff;

    font-size: clamp(
        0.95rem,
        2vw,
        1.05rem
    );

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}


.login-button:hover {

    filter: brightness(1.12);

    transform:
        translateY(-1px);
}


.login-button:active {

    transform:
        translateY(0);
}


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

.login-footer {

    margin-top:
        clamp(
            1.5rem,
            4vh,
            2rem
        );

    text-align: center;

    color: #6b7280;

    font-size: 0.78rem;
}


/* ==================================================
   PANTALLAS PEQUEÑAS
   ================================================== */

@media (
    max-width: 480px
) {

    .login-page {

        padding:
            1rem;
    }


    .login-card {

        width: 100%;

        min-height: auto;

        padding:
            2rem
            1.4rem;
    }
}


/* ==================================================
   PANTALLAS CON POCA ALTURA
   ================================================== */

@media (
    max-height: 650px
) {

    .login-page {

        align-items: flex-start;

        padding-top: 2rem;
        padding-bottom: 2rem;
    }


    .login-card {

        min-height: auto;

        padding:
            1.75rem;
    }


    .login-header {

        margin-bottom: 1.25rem;
    }


    .login-logo {

        width: min(100%, 260px);

        margin-bottom: 0.9rem;
    }
}