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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --color-primary:#2D4DFF;
    --color-primary-hover:#1F39D6;

    --color-black:#111111;
    --color-text:#444444;

    --color-background:#F7F8FC;

    --color-border:#D9DDE7;

    --color-white:#FFFFFF;

}

/* ===========================
   BODY
=========================== */

body{

    min-height:100vh;

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

    background:var(--color-background);

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color:var(--color-black);

    padding:25px;

}

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

.login-container{

    width:100%;
    max-width:430px;

    background:var(--color-white);

    border-radius:16px;

    padding:45px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.08);

}

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

.logo{

    width:120px;

    margin:auto;

    display:block;

    margin-bottom:25px;

}

/* ===========================
   TITULO
=========================== */

.login-container h2{

    text-align:center;

    font-size:30px;

    font-weight:700;

    margin-bottom:10px;

}

.login-container p{

    text-align:center;

    color:var(--color-text);

    margin-bottom:35px;

}

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

form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

label{

    font-size:14px;

    font-weight:600;

}

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

input{

    height:52px;

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

    border-radius:10px;

    padding:0 16px;

    font-size:17px;

    transition:.25s;

    outline:none;

    background:#fff;

}

input:focus{

    border-color:var(--color-primary);

    box-shadow:
        0 0 0 4px rgba(45,77,255,.15);

}

input::placeholder{

    color:#999;

}

/* ===========================
   BOTON
=========================== */

button{

    height:54px;

    margin-top:10px;

    border:none;

    border-radius:10px;

    background:var(--color-primary);

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    background:var(--color-primary-hover);

    transform:translateY(-2px);

}

button:active{

    transform:scale(.98);

}

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

#error-message{

    margin-top:20px;

    text-align:center;

    color:#D40000;

    font-weight:600;

    display:none;

}
/*======================================
    TOASTS
======================================*/

#toast-container{

    position:fixed;

    top:25px;

    right:25px;

    z-index:99999;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.toast{

    min-width:320px;

    padding:18px 20px;

    border-radius:12px;

    color:#fff;

    font-weight:600;

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

    animation:entrada .35s ease;

}

.toast.success{

    background:#1e8e3e;

}

.toast.error{

    background:#d93025;

}

.toast.info{

    background:#2962ff;

}

@keyframes entrada{

    from{

        transform:translateX(100%);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

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

@media(max-width:500px){

    .login-container{

        padding:30px 25px;

        border-radius:12px;

    }

    .login-container h2{

        font-size:26px;

    }

    input{

        height:50px;

    }

    button{

        height:50px;

    }

}