/* ==================== */
/* ESTILOS GENERALES */
/* ==================== */

/* Estilo general del body */
body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    overflow-x: hidden;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* =========================================== */
/* ------ FORMULARIO DE INICIO DE SESION ----- */
/* =========================================== */

/* Estilo del contenedor */
.login-contenedor {
    position: relative;
    background-color: #234798;
    border-radius: 2vh;
    max-width: 40vh;
    width: 40vh;
    max-height: 50vh;
    height: 50vh;
    padding: 5vh 3vh;
    color: white; /* Texto blanco para contrastar con fondo oscuro */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* ============================================= */
/* ------------- CONTENEDOR GENERAL ------------ */
/* ============================================= */

/* --------- CONTENEDOR DEL LOGO -------- */
#contenedor-logo {
    height: 30%;
    width: 100%;
}

#logo-LosPortales {
    height: 100%;
    width: auto;
}

#logo-LosPortales:hover {
    transform: scale(1.05);
}

/* --------- CONTENEDOR DEL AVISO -------- */
#contenedor-aviso {
    display: flex;
    height: 10%;
    width: 100%;
    text-align: center; /* alinea horizontalmente */
    justify-content: center;
    align-items: center; /* alinea verticalmente */
    margin-bottom: 1vh;
    background-color: #2D609E;
    border-radius: 1vh;
}

#contenedor-aviso > h2 {
    margin: 0;
    font-size: 2vh;
    color: white;
}

/* --------- CONTENEDOR DE CREDENCIALES -------- */
#contenedor-credenciales {
    height: 60%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Formulario */
form {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

form label {
    font-size: 2vh;
    font-weight: bold;
    margin-bottom: 1vh;
    margin-right: 2vh;
    margin-left: 2vh;
}

form input {
    padding: 1.8vh;
    background-color: #F4F4F4;
    color: black;
    font-size: 2vh;
    border-radius: 1vh;
    margin-bottom: 1vh;
    margin-right: 2vh;
    margin-left: 2vh;
}

form button {
    padding: 1.8vh;
    background-color: #F4F4F4;
    color: #234798;
    font-size: 2vh;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 1vh;
    margin-right: 2vh;
    margin-left: 2vh;
}

form button:hover {
    background-color: #2E8B57;
    color: #F4F4F4;
}