@font-face {
    font-family: 'Codec Pro';
    src: url('../fonts/codec-pro.regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Codec Pro',sans-serif;
}

:root{
    --dark-gray:#4d4d4d;
    --main-blue:#045280;
    --main-green:#39b54a;
    --bg-light:#f4f4f4;
}

body,
html{
    min-height:100vh;
    background:var(--bg-light);
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-container{
    width:90%;
    max-width:420px;
    background:#fff;
    padding:2rem;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
    text-align:center;
    margin:20px auto;
}

.logo-login{
    width:180px;
    margin-bottom:20px;
}

h2{
    color:var(--dark-gray);
    margin-bottom:25px;
}

.form-group{
    margin-bottom:15px;
    text-align:left;
}

.form-group label{
    display:block;
    margin-bottom:6px;
    color:var(--dark-gray);
    font-size:14px;
    font-weight:600;
}

/* INPUTS */

.form-group input{
    width:100%;
    padding:12px 14px;
    border:1.5px solid #e0e0e0;
    border-radius:10px;
    font-size:15px;
    background:#fafafa;
    outline:none;
    transition:.25s;
}

.form-group input:focus{
    border-color:var(--main-blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(4,82,128,.12);
}

/* COMBOBOX */

.form-group select{
    width:100%;
    padding:12px 42px 12px 14px;

    border:1.5px solid #e0e0e0;
    border-radius:10px;

    font-size:15px;
    color:var(--dark-gray);

    background-color:#fafafa;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    cursor:pointer;
    outline:none;

    transition:.25s;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23045280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:18px;
}

.form-group select:hover{
    border-color:#b5c7d4;
    background-color:#fff;
}

.form-group select:focus{
    border-color:var(--main-blue);
    background-color:#fff;
    box-shadow:0 0 0 4px rgba(4,82,128,.12);
}

.form-group select option{
    background:#fff;
    color:var(--dark-gray);
    padding:10px;
}

/* BOTON */

.btn-login{
    width:100%;
    padding:13px;
    border:none;
    border-radius:10px;

    background:var(--main-blue);
    color:white;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;
    transition:.3s;
}

.btn-login:hover{
    background:#033d5e;
}

.btn-login:active{
    transform:scale(.98);
}

.forgot-password{
    display:block;
    margin-top:20px;
    margin-bottom: 15px;
    text-decoration:none;
    color:var(--main-blue);
    font-size:14px;
}

.forgot-password:hover{
    text-decoration:underline;
}

.register-box p{
    margin-bottom: 10px;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px; /* Mismo ancho máximo que tu login */
    margin: 20px auto;
}

/* Forzar que el contenedor de login ocupe el 100% del wrapper */
.login-container {
    width: 100% !important;
    margin: 0 !important; /* Reseteamos el margen para que no desfase */
}

/* Estilos base para los mensajes de alerta superiores */
.alert-message {
    width: 65%;
    height: 60px;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 15px; /* Separación respecto al recuadro blanco */
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,.05);
}

/* Variante Rojo/Error */
.error-box {
    color: #ca0519;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

/* Variante Amarillo/Advertencia */
.warning-box {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
}
/* RESPONSIVO */

@media(max-width:480px){

    body,
    html{
        align-items:flex-start;
        padding:15px 0;
    }

    .login-container{
        width:92%;
        padding:1.5rem;
    }

    .logo-login{
        width:140px;
    }
}