/* --- Estilos Generales y Reseteo --- */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa toda la altura de la vista */
}

h1 {
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

/* --- Contenedor Principal (Escritorio) --- */
.login-container {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px; /* Ancho máximo para escritorio */
}

/* --- Estilos del Formulario --- */
.login-form p {
    margin-bottom: 15px;
    /* Esto es importante si Django renderiza 'as_p' */
}

/* Estilo para los campos de entrada */
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"] { /* Puedes agregar más tipos si es necesario */
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho total */
    margin-top: 5px; /* Espacio entre la etiqueta y el campo */
}

/* Estilo para el botón */
.login-form button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #007bff; /* Color principal */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.login-form button[type="submit"]:hover {
    background-color: #0056b3;
}

/* --- Media Query para Móviles (Diseño Responsivo) --- */
@media (max-width: 600px) {
    /* En pantallas pequeñas (móviles), la tarjeta del formulario 
       ocupa casi todo el ancho para una mejor experiencia táctil. */
    .login-container {
        margin: 20px;
        padding: 30px 20px; /* Menos padding en móviles */
        max-width: 90%; /* Asegura que no se pegue a los bordes */
    }

    /* Opcional: Aumentar el tamaño del texto para mayor legibilidad en móviles */
    .login-form input[type="text"],
    .login-form input[type="password"] {
        font-size: 16px;
    }

    .login-form button[type="submit"] {
        padding: 15px; /* Botón más grande y fácil de pulsar */
        font-size: 18px;
    }
}