/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    background-image: url(fondo.webp);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-size: cover;
}

/* Contenedor del formulario */
.login-container {
    background-color: #fff; /* Fondo blanco para el formulario */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    padding: 20px; /* Espaciado interno */
    width: 300px; /* Ancho fijo para el formulario */
}

/* Logo del formulario */
.logo-container {
    text-align: center; /* Centramos el logo */
    margin-bottom: 20px; /* Espacio debajo del logo */
}

.logo {
    max-width: 30%;
    width: 30%;
    height: 100px;
}

/* Título del formulario */
h2 {
    text-align: center; /* Centramos el texto */
    color: #8B4996; /* Color púrpura para el título */
    margin-bottom: 20px; /* Espacio debajo del título */
}

/* Grupos de entrada */
.input-group {
    margin-bottom: 15px; /* Espacio entre grupos de entrada */
}

/* Etiquetas */
label {
    display: block; /* Hacemos que la etiqueta ocupe todo el ancho */
    margin-bottom: 5px; /* Espacio entre la etiqueta y el input */
    color: #555; /* Color de la etiqueta */
}

/* Inputs */
input[type="text"],
input[type="password"] {
    width: 100%; /* El input ocupa todo el ancho del contenedor */
    padding: 10px; /* Espaciado interno del input */
    border: 1px solid #ccc; /* Bordes del input */
    border-radius: 4px; /* Bordes redondeados */
    box-sizing: border-box; /* Incluimos el padding en el ancho total */
    transition: border-color 0.3s; /* Transición suave al cambiar el borde */
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: #8B4996; /* Color del borde al enfocar (púrpura) */
    outline: none; /* Quitamos el contorno predeterminado */
}

/* Botón de ingreso */
.nueva-venta-btn {
    width: 100%; /* Botón ocupa todo el ancho */
    padding: 10px; /* Espaciado interno del botón */
    background-color: #C8D52C; /* Color de fondo del botón (verde lima) */
    color: white; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambiamos el cursor al pasar por encima */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
}

.nueva-venta-btn:hover {
    background-color: #A8B02D; /* Color del botón al pasar el mouse (verde más oscuro) */
}

/* Mensaje de error */
#error-message {
    margin-top: 10px; /* Espacio encima del mensaje de error */
    font-size: 14px; /* Tamaño de fuente para el mensaje */
    color: red; /* Color rojo para el mensaje de error */
}