body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('../imagenes/fondo2.avif'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajusta la imagen para cubrir toda el área */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}
.container {
    background: #ffffff;
    padding: 3em; /* Aumenta el padding */
    border-radius: 12px; /* Aumenta el radio de borde */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Aumenta el tamaño de la sombra */
    max-width: 500px; /* Aumenta el ancho máximo del contenedor */
    width: 100%;
    text-align: center;
    margin: 1em; /* Añade margen para mejor separación */
}
.container img {
    width: 180px; /* Aumenta el tamaño del logotipo */
    margin-bottom: 1.5em; /* Aumenta el espacio debajo del logotipo */
}
.form-group {
    margin-bottom: 1.5em; /* Aumenta el margen inferior */
    text-align: left;
}
.form-group label {
    display: block;
    margin-bottom: 0.5em;
}
.form-group input {
    width: 100%;
    padding: 1em; /* Aumenta el padding del input */
    border: 1px solid #ddd;
    border-radius: 6px; /* Aumenta el radio de borde */
    font-size: 1em; /* Aumenta el tamaño de fuente */
}
.button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 1em 2em; /* Aumenta el padding del botón */
    border-radius: 6px; /* Aumenta el radio de borde */
    cursor: pointer;
    font-size: 1.1em; /* Aumenta el tamaño de fuente */
}
.button:hover {
    background-color: #0056b3;
}
.error {
    color: #d9534f;
    margin-top: 1em;
    font-size: 1.1em; /* Aumenta el tamaño de fuente del mensaje de error */
}

/* Media Queries para dispositivos más pequeños */
@media (max-width: 600px) {
    .container {
        padding: 1.5em; /* Ajuste para pantallas pequeñas */
        max-width: 95%; /* Ajusta el ancho máximo */
    }
    .container img {
        width: 80%; /* Ajuste del tamaño de la imagen */
    }
    .button {
        padding: 0.8em 1.5em; /* Reduce el tamaño del botón */
        font-size: 1em; /* Ajusta el tamaño de fuente */
    }
    .form-group input {
        padding: 0.8em; /* Reduce el padding del input */
    }
}

/* Media Queries para tabletas */
@media (min-width: 601px) and (max-width: 900px) {
    .container {
        padding: 2em; /* Mantiene el padding en tabletas */
    }
}