/* --------------------
   Estilos Generales y Fondo
   -------------------- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex; /* Para centrar el formulario */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    min-height: 100vh; /* Asegura que ocupe toda la altura de la pantalla */
    background-image: url('fondo.png'); /* **Reemplaza con tu imagen** */
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center;
    /* Opcional: Un overlay oscuro para que el texto resalte */
    background-color: rgba(0, 0, 0, 0.6); 
    background-blend-mode: overlay; /* Mezcla el color de fondo con la imagen */
}
/* Estilos adicionales para la sección del logo */
.logo-section {
    text-align: center; /* Centra la imagen dentro de su contenedor */
    margin-bottom: 20px; /* Espacio entre el logo y el título H1 */
}

.logo-img {
    /* Define el tamaño del logo para que no sea demasiado grande */
    width: 80px;  /* Ancho fijo, ajusta según tu logo */
    height: auto; /* Mantiene la proporción de la imagen */
    max-width: 100%; /* Medida de seguridad para que sea responsive */
}

/* El resto de estilos del login-header */
.login-header {
    text-align: center; 
    /* Hemos movido el margin-bottom al logo-section */
    color: #004d99;
}
/* ... el resto de tu CSS ... */

/* --------------------
   Contenedor del Login
   -------------------- */
.login-container {
    background-color: rgba(255, 255, 255); /* Fondo blanco semitransparente */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra elegante */
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 400px; /* Limita el ancho máximo en pantallas grandes */
    box-sizing: border-box; /* Incluye padding y borde en el ancho/alto */
}

/* --------------------
   Estilos de los elementos del Formulario
   -------------------- */
.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Fundamental para que el padding no desborde el ancho */
}

.login-button {
    width: 100%;
    padding: 12px;
    background-color: #007bff; /* Un azul estándar */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.login-button:hover {
    background-color: #0056b3;
}

.forgot-password {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #007bff;
    text-decoration: none;
}

@media (max-width: 600px) {
    .login-container {
        /* En pantallas pequeñas, podemos reducir el padding del contenedor */
        padding: 20px; 
        /* Y eliminar la sombra para una apariencia más limpia si es necesario */
        box-shadow: none;
        /* Ocupar un poco más de ancho de la pantalla */
        max-width: 90%; 
    }
    
    body {
        /* En móviles, podrías alinear el contenido arriba si prefieres */
        align-items: flex-start;
        padding-top: 5vh;
    }
}