html{
    overflow-x:hidden;
}

:root{
    --azul-principal:#1e3a8a;
    --azul-secundario:#2563eb;
    --azul-claro:#60a5fa;
    --gris-oscuro:#1f2937;
    --gris-claro:#f3f4f6;
    --blanco:#ffffff;
    --verde:#22c55e;
    --rojo:#ef4444;
}

*{
    box-sizing:border-box;
}

/* BODY */
body{
    margin:0;
    padding:0;
    font-family:'Segoe UI',sans-serif;
    background: linear-gradient(140deg,#020024,#090979,#00D4FF);
    min-height:100vh;
    position:relative;
}

/* CENTRAR FORMULARIO */
.center-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:120px 20px 40px 20px; /* espacio para el logo */
}

/* LOGO SUPERIOR IZQUIERDO */
.logo{
    width:180px;
    display:block;
}

.logo-container{
    position:fixed;
    top:20px;
    left:30px;

    padding:18px 22px;
    border-radius:18px;

    background:rgba(255, 255, 255, 0.322);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

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

    box-shadow:
        0 8px 32px rgba(0,0,0,0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.493);

    z-index:9999;
    transition:0.3s;
}

.logo-container:hover{
    transform:scale(1.05);
}

.logo-container img{
    width:180px;
    display:block;
}

/* CONTENEDOR FORM */
.form-box{
    background:var(--blanco);
    padding:40px;
    border-radius:15px;
    width:100%;
    max-width:700px;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    text-align:left;
}

/* FORM */
form{
    width:100%;

}

/* TITULO */
.form-box h2{
    color:var(--azul-principal);
    margin-bottom:20px;
    text-align: center;
}

/* INPUTS */
input{
    width:100%;
    padding:12px;
    margin:10px 0;
    border-radius:8px;
    border:1px solid #d1d5db;
    outline:none;
    transition:0.3s;
    font-size:15px;
}

/* INPUT FOCUS */
input:focus{
    border-color:var(--azul-secundario);
    box-shadow:0 0 5px var(--azul-claro);
}

/* BOTON */
button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    background:linear-gradient(90deg,var(--azul-principal),var(--azul-secundario));
    color:var(--blanco);
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
}

button:hover{
    background:linear-gradient(90deg,var(--azul-secundario),var(--azul-claro));
}

.text-danger {
    color: #dc3545 !important
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
}

.alert-success hr {
    border-top-color: #b1dfbb
}

.alert-success .alert-link {
    color: #0b2e13
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb
}

.alert-danger hr {
    border-top-color: #f1b0b7
}

.alert-danger .alert-link {
    color: #491217
}

select.form-control {
    width:100%;
    padding:12px;
    margin:10px 0;
    border-radius:8px;
    border:1px solid #d1d5db;
    outline:none;
    transition:0.3s;
    font-size:15px;
}

select.form-control option {
    border-color:var(--azul-secundario);
    box-shadow:0 0 5px var(--azul-claro);
}