/* LOGIN */
.error {
    background-color: #f8d7da; /* Color de fondo rojo claro */
    color: #721c24; /* Color de texto rojo oscuro */
    padding: 10px; /* Espaciado interno */
    border: 1px solid #f5c6cb; /* Borde rojo */
    border-radius: 5px; /* Bordes redondeados */
    margin-top: 20px; /* Margen superior para separación */
    text-align: center; /* Centrar el texto */
}

/* Estilo para mensajes de éxito */
.success {
    background-color: #d4edda; /* Color de fondo verde claro */
    color: #155724; /* Color de texto verde oscuro */
    padding: 10px; /* Espaciado interno */
    border: 1px solid #c3e6cb; /* Borde verde */
    border-radius: 5px; /* Bordes redondeados */
    margin-top: 20px; /* Margen superior para separación */
    text-align: center; /* Centrar el texto */
}

/* Centrar el contenedor del login */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffffff; /* Color de fondo blanco para que coincida con el contenedor */
}

/* Caja del formulario */
.login-box {
    background-color: #ffffff; /* Fondo blanco */
    padding: 40px; /* Ajustar padding si es necesario */
    border-radius: 0; /* Sin bordes redondeados */
    box-shadow: none; /* Sin sombra */
    width: 500px; /* Ancho del formulario */
    text-align: center;
}

/* Estilo del logo */
.login-logo img {
    max-width: 400px; /* Tamaño máximo para el logo */
    margin-bottom: 30px; /* Margen inferior */
}

/* Grupo de entradas (input y label) */
.login-input-group {
    margin-bottom: 30px; /* Margen inferior */
    text-align: left; /* Alineación del texto */
}

.login-input-group label {
    font-size: 18px; /* Tamaño de la fuente */
    color: #333; /* Color del texto */
    margin-bottom: 5px; /* Margen inferior */
    display: block; /* Mostrar como bloque */
}

.login-input-group input {
    width: 100%; /* Ancho completo */
    padding: 15px; /* Espaciado interno */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 0; /* Sin bordes redondeados */
    font-size: 18px; /* Tamaño de la fuente */
    transition: border-color 0.3s; /* Transición suave para el color del borde */
}

.login-input-group input:focus {
    border-color: #007bff; /* Color del borde al hacer foco */
    outline: none; /* Sin contorno */
}

/* Botón de ingresar */
.login-botn {
    width: 100%; /* Ancho completo */
    padding: 15px; /* Espaciado interno */
    background-color: #7d69ab; /* Color del botón */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 0; /* Sin bordes redondeados */
    font-size: 20px; /* Tamaño de la fuente */
    cursor: pointer; /* Cambia el cursor al pasar */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    text-align: center; /* Asegura que el texto esté centrado */
}

.login-botn:hover {
    background-color: #0056b3; /* Color al pasar el mouse */
}

/* Ajustes de pantalla pequeña */
@media (max-width: 600px) {
    .login-box {
        width: 90%; /* Se adapta a pantallas más pequeñas */
        padding: 30px; /* Ajusta el padding para pantallas pequeñas */
    }
}