/* styles-mobile.css */

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    /* Estilo para el contenedor de botones */
    .button-container {
        position: fixed;
        bottom: 10px; 
        left: 0; 
        width: 100%;
        background-color: #fff;
        z-index: 999; 
        display: flex; 
        justify-content: space-between; 
        padding: 0 10px; 
    }

    /* Estilo para los botones */
    .button-container button {
        flex-grow: 1; 
        margin: 0 5px; 
    }
}






/*/////////////////////////////////////////////////////////////

    
    /* Establece un ancho mínimo para cada celda en la tabla para evitar la compresión */
    .table-responsive table {
        min-width: 600px; 
    }



/* Añade un scroll a los campos de entrada en dispositivos móviles */
.form-control {
    font-size: 16px;
    padding: 10px;
    overflow: auto; 
    max-height: 100px; 
}




/* Hacer que el formulario ocupe todo el ancho disponible en dispositivos móviles */
.container {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Alinear el texto del encabezado al centro en dispositivos móviles */
h3 {
    text-align: center;
}

/* Añadir un poco de espacio entre los elementos del formulario */
.form-control {
    margin-bottom: 10px;
}

/* Estilo para el botón "Agregar Artículo" */
#agregarFila {
    width: 100%;
}

/* Alinear los botones al centro en dispositivos móviles */
.d-flex.justify-content-between {
    justify-content: center;
    flex-direction: column;
}

/* Aumentar el tamaño de los campos de entrada en dispositivos móviles */
.form-control {
    font-size: 16px;
    padding: 10px;
}

/* Añadir un poco de espacio entre las filas de la tabla */
.table tbody tr {
    margin-bottom: 10px;
}

/* Eliminar el ancho fijo de la tabla en dispositivos móviles */
.table {
    width: auto;
}




/*/////////////////////////////////////////////////////////////