/* Configuración general para el cuerpo de la página */
body {
    font-family: Arial; /* Fuente legible para ingeniería */
    margin: 20px; /* Margen para que el contenido no pegue a las orillas */
    background-color: #f4f4f4; /* Fondo gris claro para no cansar la vista */
}

/* Estilos para el encabezado */
h1 {
    text-align: center; /* Centra el título principal */
}

/* Centrado del formulario de entrada */
.formulario {
    text-align: center;
}

/* Estilo para todos los cuadros de texto */
input {
    padding: 8px; /* Espacio interno para que el texto no esté pegado al borde */
    margin: 5px; /* Separación entre cada input */
}

/* Diseño del botón de acción */
button {
    padding: 8px 12px; /* Tamaño del botón */
    cursor: pointer; /* Cambia el cursor a una 'mano' al pasar el mouse */
    border: none; /* Quita el borde por defecto */
    background-color: #007BFF; /* Color azul para destacar */
    color: white; /* Texto en blanco para contraste */
}

/* Cambio de color cuando el usuario pasa el mouse sobre el botón */
button:hover {
    background-color: #0056b3; /* Un azul más oscuro */
}

/* Configuración de la tabla de datos */
table {
    width: 100%; /* La tabla ocupa todo el ancho disponible */
    border-collapse: collapse; /* Une los bordes de las celdas para que se vea limpio */
    background-color: white; /* Fondo blanco para las filas */
}

/* Estilo para las celdas de datos y encabezados */
th, td {
    padding: 10px; /* Espacio dentro de las celdas */
    border: 1px solid #ccc; /* Línea gris delgada para dividir la tabla */
    text-align: center; /* Centra el texto de los productos */
}

/* Estilo específico para los títulos de la tabla */
th {
    background-color: #333; /* Fondo oscuro */
    color: white; /* Texto blanco */
}