:root {
    --primary-color: #007bff;
    --primary-dark: #0056b3;
    --success-color:rgb(29, 159, 23);
    --success-dark: #218838;
    --danger-color: #dc3545;
    --danger-dark: #c82333;
    --info-color: #17a2b8;
    --info-dark: #138496;
    --warning-color: #ffc107; /* Added for 'Parcial' status */
    --warning-dark: #e0a800; /* Added for 'Parcial' status */
    --secondary-color: #6c757d;
    --secondary-dark: #5a6268;
    --light-bg: #f8f9fa;
    --dark-bg: #e9ecef;
    --text-color: #343a40;
    --border-color: #dee2e6;
    --white: #ffffff;
    --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --border-radius: 0.3rem;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-bg);
    color: var(--text-color);
    line-height: 1.2;
}

h1, h2 {
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: 12px;
    font-weight: 800;
}

.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

.card {
    background-color: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}

/* --- Formulario de Filtros --- */
.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 10px;
    align-items: flex-end;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(26, 38, 51, 0.12);
}

.form-group {
    min-width: 0;
    margin-bottom: 0; /* Remove default margin-bottom */
}

.form-group label {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.78rem;
    letter-spacing: 0.2px;
}

.form-control {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    font-size: 0.86rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

.btn {
    display: inline-block;
    padding: 5px 10px;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none; /* Ensure no underline for button-like links */
}

.btn-primary {
    color: var(--white);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-success {
    color: var(--white);
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-success:hover {
    background-color: var(--success-dark);
    border-color: var(--success-dark);
}

.btn-danger { /* For 'Pendiente' status */
    color: var(--white);
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-danger:hover {
    background-color: var(--danger-dark);
    border-color: var(--danger-dark);
}

.btn-warning { /* For 'Parcial' status */
    color: var(--text-color); /* Text color for warning to be readable */
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}

.btn-warning:hover {
    background-color: var(--warning-dark);
    border-color: var(--warning-dark);
}

.btn-info {
    color: var(--white);
    background-color: var(--info-color);
    border-color: var(--info-color);
}

.btn-info:hover {
    background-color: var(--info-dark);
    border-color: var(--info-dark);
}

.btn-secondary {
    color: var(--white);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

.btn-block {
    width: 100%;
    grid-column: span 1 / auto; /* Para que el botón ocupe su propia columna en el grid */
}

.btn-sm {
    padding: 4px 8px;
    font-size: 0.78rem;
}

.filter-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    grid-column: 1 / -1;
    padding-top: 4px;
}

.filter-actions .btn {
    min-width: 96px;
}
@media (min-width: 768px) {
    .filter-form .btn-block {
        grid-column: span 1 / auto; /* Ocupa una columna completa en pantallas grandes */
    }
    .filter-form {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
    .filter-form div:last-child {
        grid-column: span 1; /* Asegura que el botón ocupe una columna al final */
    }
}
@media (max-width: 767px) {
    .filter-form {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
    }
    .filter-form .btn-block {
        grid-column: auto;
    }
    .filter-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .filter-actions .btn {
        min-width: 0;
        flex: 1 1 160px;
    }
}
/* --- Contenedor Responsivo con Scrolls --- */
.table-responsive {
    overflow: visible; /* Evita doble scroll con DataTables */
    max-height: none;
    max-width: 100%;   /* Asegura que no desborde horizontalmente */
    border: 1px solid #d7dde5; /* Borde para visualizar el contenedor de scroll */
    border-radius: calc(var(--border-radius) + 2px);
}

/* --- Estilos Generales de la Tabla --- */
.data-table {
    width: 100%; /* Este ancho del 300% es el que probablemente causa el scroll horizontal */
    border-collapse: collapse;
    font-size: 0.82rem;
    /* margin-top ya no es necesario aquí si el div .table-responsive ya tiene espacio */
}

/* --- Estilos de Todas las Celdas (TH y TD) --- */
.data-table th,
.data-table td {
    border: 1px solid var(--border-color, #eee); /* Usa var() con un fallback por si no existe --border-color */
    padding: 7px 9px;
    text-align: center; /* Alinea el texto de todas las celdas al centro */
    vertical-align: top; /* Alinea el contenido a la parte superior de la celda. Esto permite que la celda se amplíe a lo alto según el contenido. */
    white-space: normal; /* Asegura que el texto se ajuste a la celda y permita que esta crezca en alto. */
}

/* --- Encabezados de la Tabla (TH en THEAD) - Fijos Verticalmente --- */
.data-table thead th {
    background: linear-gradient(120deg, var(--header-bg, #1a2633), var(--header-bg-alt, #1f3247));
    font-weight: 700;
    color: var(--header-text, #f3f6fb); /* Color de texto blanco/claro */
    position: sticky; /* HACE QUE SE PEGUE */
    text-align: center;
    top: 0;           /* SE PEGA EN LA PARTE SUPERIOR DEL CONTENEDOR DE SCROLL */
    z-index: 20;      /* Un z-index más alto para que estén por encima de las celdas fijas */
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.7rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}

.dataTables_wrapper .dataTable thead th,
.dataTables_wrapper .dataTable thead td,
table.dataTable.fixedHeader-floating thead th,
table.dataTable.fixedHeader-locked thead th {
    background: linear-gradient(120deg, var(--header-bg, #1a2633), var(--header-bg-alt, #1f3247)) !important;
    color: var(--header-text, #f3f6fb) !important;
}

/* --- Columna "Acciones" (y su Encabezado) - Fija Horizontalmente --- */
/* Para el ENCABEZADO de la columna "Acciones" */
.data-table th.acciones-col {
    position: sticky; /* HACE QUE SE PEGUE HORIZONTALMENTE */
    right: 0;         /* SE PEGA AL LADO DERECHO DEL CONTENEDOR DE SCROLL */
    background: linear-gradient(120deg, var(--header-bg, #1a2633), var(--header-bg-alt, #1f3247));
    color: var(--header-text, #f3f6fb);
    z-index: 30;      /* ¡Más alto que los encabezados horizontales y las celdas de acciones! */
}

/* Para las CELDAS de la columna "Acciones" */
.data-table td.acciones-col {
    position: sticky; /* HACE QUE SE PEGUE HORIZONTALMENTE */
    right: 0;         /* SE PEGA AL LADO DERECHO DEL CONTENEDOR DE SCROLL */
    background-color: var(--light-bg, #f8f9fa); /* Un color de fondo para que no se vea a través */
    z-index: 15;      /* Más alto que el contenido normal de la tabla, pero menos que el encabezado fijo */
}

.data-table tbody tr:nth-child(even) {
    background-color: #f2f5f9;
}

.data-table tbody tr:hover {
    background-color: #e8f0fb; /* Fondo al pasar el ratón */
    cursor: pointer;
}
.no-results {
    text-align: center;
    color: var(--secondary-color);
    padding: 20px;
    font-size: 1.1rem;
}

/* --- Mensajes de feedback (éxito/error) --- */
.message {
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-align: center;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.info {
    background-color: #e8f4ff;
    color: #0b4f7a;
    border: 1px solid #b9ddff;
}

/* Styles for status buttons */
.status-button {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.85rem;
    text-align: center;
    min-width: 80px; /* Give a consistent width */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.status-button.status-Pendiente {
    background-color: var(--danger-color);
    color: var(--white);
}
.status-button.status-Parcial {
    background-color: var(--warning-color);
    color: var(--text-color);
}
.status-button.status-Completado {
    background-color: var(--success-color);
    color: var(--white);
}

/* Styles for quantity buttons/badges */
.quantity-display {
    display: inline-block;
    padding: 5px 10px;
    border-radius: var(--border-radius);
    font-weight: 600;
    background-color: var(--dark-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.quantity-display:hover {
    background-color: var(--border-color);
}

/* --- Modal Styles --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Fondo un poco más oscuro para mejor contraste */
    padding-top: 20px; /* Reducir el padding superior para acercar la modal al centro */
    animation: fadeIn 0.3s forwards;
}

.modal-content {
    background-color: var(--white);
    margin: 15px auto; /* Reducir el margen vertical para que la modal aparezca más arriba */
    padding: 20px; /* Reducir el padding general del contenido de la modal */
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0,0,0,0.4); /* Sombra ligeramente más pronunciada para pop-up */
    width: 90%; /* Mantener el ancho responsivo */
    /* !!!!!!!! CAMBIO CLAVE AQUÍ !!!!!!!! */
    /* Aumenta el ancho máximo para que el modal se vea más grande en pantalla SIN la escala distorsionante.
    Puedes ajustar este valor (ej. 600px, 700px, 800px) según cómo quieras que se vea. */
    max-width: 700px; /* Se ha aumentado de 500px a 700px como un buen punto de partida */
    position: relative;
    animation: slideIn 0.3s forwards;
}

#updateModal .modal-content {
    /* !!!!!!!! CAMBIO CLAVE AQUÍ !!!!!!!! */
    /* Se ha ELIMINADO la línea 'transform: scale(1.85);' que causaba el problema de tamaño.
    Ahora el tamaño del modal se controla por 'max-width' en .modal-content y por los font-size de sus elementos. */
    transform-origin: center center !important; /* Mantenemos este por si se usa alguna otra transformación */
    /* Si no hay otras transformaciones, esta línea también se podría eliminar. */
}


.close-button {
    color: var(--secondary-color);
    position: absolute;
    top: 10px; /* Acercar el botón de cierre a la esquina */
    right: 15px; /* Acercar el botón de cierre a la esquina */
    font-size: 28px; /* Tamaño de fuente ligeramente menor */
    font-weight: bold;
    transition: color 0.2s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px; /* Reducir margen inferior del título */
    color: var(--primary-dark);
    text-align: center;
    /* !!!!!!!! AJUSTE DE TAMAÑO DE FUENTE !!!!!!!! */
    /* Aumenta el font-size para que el título se vea bien en pantalla, ahora que no hay escala. */
    font-size: 2rem; /* Se ha aumentado para compensar la eliminación de la escala. Ajusta si es necesario. */
}

/* Modificaciones para un modal más compacto */
.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 10px 20px; /* Reducir el gap para más compacidad */
    margin-bottom: 15px; /* Reducir margen inferior */
}

.modal-form-grid .modal-form-row {
    margin-bottom: 0;
}

.modal-form-grid .modal-form-row.full-width {
    grid-column: span 2;
}

.modal-form-row label {
    font-weight: 600;
    margin-bottom: 4px; /* Menos espacio debajo de la etiqueta */
    display: block;
    color: var(--text-color);
    /* !!!!!!!! AJUSTE DE TAMAÑO DE FUENTE !!!!!!!! */
    /* Aumenta el font-size para que las etiquetas se vean bien en pantalla. */
    font-size: 1rem; /* Se ha ajustado. Puedes probar 0.95rem, 1rem, 1.05rem. */
}

.modal-form-row input[type="text"],
.modal-form-row input[type="number"],
.modal-form-row textarea, /* ¡Importante! Asegúrate que textarea está aquí */
.modal-form-row select {
    width: 100%;
    padding: 7px 9px; /* Reducir aún más el padding para mayor compacidad */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    /* !!!!!!!! AJUSTE DE TAMAÑO DE FUENTE !!!!!!!! */
    /* Aumenta el font-size para que el texto de los campos se vea bien en pantalla. */
    font-size: 1rem; /* Se ha ajustado. Puedes probar 0.95rem, 1rem, 1.05rem. */
}

.modal-form-row input[readonly] {
    background-color: var(--dark-bg);
    opacity: 0.8; /* Ligeramente más opaco para mejor legibilidad */
}

/* Ajustes específicos para el textarea en PANTALLA (NO en @media print) */
.modal-form-row textarea {
    resize: vertical; /* Permite redimensionar verticalmente en pantalla (útil) */
    min-height: 80px; /* Una altura mínima razonable para pantalla */
    /* Asegúrate de que no haya un 'height: auto' aquí, eso es solo para impresión */
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 15px 0; /* Menos espacio alrededor del separador */
}

.modal-buttons {
    text-align: right;
    margin-top: 20px; /* Reducir margen superior */
    display: flex;
    justify-content: flex-end;
    gap: 8px; /* Reducir el espacio entre botones */
}
/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-30px); opacity: 0; } /* Animación más sutil */
    to { transform: translateY(0); opacity: 1; }
}

/* Media queries para responsividad del modal */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 15px; /* Reducir padding en móviles */
    }
    .modal-form-grid {
        grid-template-columns: 1fr;
        gap: 8px; /* Reducir gap en móviles */
    }
    .modal-form-grid .modal-form-row.full-width {
        grid-column: span 1;
    }
    .modal-content h2 {
        font-size: 1.4rem;
    }
    .modal-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .modal-buttons .btn {
        width: 100%;
    }



}


#barcodeRow {
    display: none !important;
}

/* --- Estilos para el Menú Desplegable Principal --- */
.main-dropdown {
    position: relative;
    display: inline-block;
}

.main-dropdown-btn {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 10px 15px;
    font-size: 1rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.15s ease;
}

.main-dropdown-btn:hover {
    background-color: var(--primary-dark);
}

.main-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 220px; /* Ancho suficiente para los textos */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100; /* Asegura que esté por encima de otros elementos */
    border-radius: var(--border-radius);
    overflow: hidden;
    right: 100%; /* Alinea a la derecha del botón */


    /* --- CAMBIOS CLAVE PARA DESPLEGAR A LA DERECHA --- */
    top: 100%; /* Alinea con la parte superior del botón */
    left: 100%; /* Se posiciona justo a la derecha del botón */
    margin-left: 5px; /* Pequeño espacio entre botón y menú */
    /* ------------------------------------------------ */
}
        


.main-dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: flex; /* Para alinear icono y texto */
    align-items: center;
    gap: 10px; /* Espacio entre icono y texto */
    text-align: left;
    transition: background-color 0.15s ease;
    font-size: 0.95rem; /* Tamaño de fuente ligeramente menor para ítems */
}

.main-dropdown-content a:hover {
    background-color: #ddd;
}

/* Mostrar el menú al pasar el ratón o en foco */
.main-dropdown:hover .main-dropdown-content,
.main-dropdown-btn:focus + .main-dropdown-content { /* Esto funciona si el botón tiene foco */
    display: block;
}

/* Estilos generales para otros elementos (para que no haya errores) */
h2 {
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: 2px;
    font-weight: 800;
}
.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}


/* --- ESTILOS ESPECÍFICOS PARA LA IMPRESIÓN --- */
@media print {
    /* 1. Configuración de la Página */
    @page {
        margin: 0.5cm; /* Márgenes pequeños para maximizar el área de contenido. Ajusta si necesitas más espacio. */
        size: A4 portrait; /* Define el tamaño de la página y la orientación (portrait = vertical). Puedes cambiar a 'landscape' si el contenido es más ancho. */
    }

    /* 2. Oculta todo el cuerpo por defecto, EXCEPTO el modal que queremos imprimir */
    body {
        visibility: hidden !important; /* Hace que todo el contenido del body sea invisible */
        overflow: hidden !important; /* Evita barras de desplazamiento en la vista de impresión */
        margin: 0 !important;
        padding: 0 !important;
        /* Aseguramos que el body no ocupe más espacio del necesario en la impresión */
        width: 100vw !important; /* Asegura el ancho del viewport */
        height: 100vh !important; /* Asegura el alto del viewport */
        position: fixed !important; /* Fija el body para que solo lo que se muestre en él se imprima */
        top: 0 !important;
        left: 0 !important;
    }

    /* 3. Hace visible el modal contenedor de impresión y lo ajusta para ocupar la página */
    #updateModal {
        visibility: visible !important;
        position: fixed !important; /* Cambiado a fixed para que se posicione sobre el body oculto */
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important; /* Asegura que ocupe todo el ancho del viewport */
        height: 100vh !important; /* Asegura que ocupe todo el alto del viewport */
        margin: 0 !important; /* Elimina cualquier margen residual */
        padding: 0 !important; /* Elimina cualquier padding residual */
        
        display: flex !important; /* Habilitamos flexbox para centrar su contenido */
        flex-direction: column !important; /* Alineamos los elementos verticalmente */
        justify-content: center !important; /* Centra el contenido verticalmente */
        align-items: center !important; /* Centra el contenido horizontalmente */

        transform: none !important; /* Resetea cualquier transformación previa */
        background: none !important; /* Elimina el fondo oscuro/overlay del modal */
        overflow: visible !important; /* Permite que el contenido interno sea visible */
        box-shadow: none !important; /* Elimina sombras del modal principal */
        border: none !important; /* Elimina bordes del modal principal */
    }

    /* 4. Ajusta el contenido interno del modal (la caja blanca) */
    #updateModal .modal-content {
        visibility: visible !important; /* Corregido: antes estaba incompleto */
        
        /* Ajustamos el ancho para que siempre quede dentro de la página */
        width: 90% !important; /* Puedes probar 95% o 85% si necesitas más o menos espacio */
        max-width: 90% !important; /* Asegura que no se desborde */
        
        margin: 0 auto !important; /* Centra horizontalmente el contenido */
        
        padding: 1.5cm 1cm !important; /* Ajusta el padding interno. Considera los márgenes de la página. */
        border: none !important;    /* Elimina bordes */
        border-radius: 0 !important;  /* Elimina bordes redondeados */
        box-shadow: none !important;  /* Elimina sombras */
        background-color: white !important; /* Fondo blanco para una impresión limpia */
        overflow: visible !important; /* Esencial para que el contenido se vea */

        /* --- CONTROL DE ESCALA PARA UNA SOLA HOJA --- */
        /* CORRECCIÓN CLAVE: El valor de 'scale' no puede ser 0, porque haría el contenido invisible.
        Ajusta este valor para que todo quepa en una página. Empieza probando 0.75 o 0.8. */
        transform: scale(0.85); /* ¡AJUSTA ESTE VALOR! Si se sale, REDÚCELO. Si queda muy pequeño, AUMÉNTALO. */
        transform-origin: center center !important; /* La escala se aplica desde el centro */
        
        page-break-inside: avoid !important; /* Asegura que no haya saltos de página no deseados dentro del contenido */
    }

    /* Oculta los h2/h1 originales del modal que no quieres imprimir (Ya estaban bien) */
    #updateModal .modal-content > h2,
    #updateModal .modal-content > h1 { /* Este selector cubre tu <h1> si lo tenías dentro del modal-content */
        display: none !important;
        visibility: hidden !important;
    }

    /* 5. Título de la Impresión (visible solo aquí) */
    #printHeaderTitle {
        display: block !important;
        visibility: visible !important;
        margin-bottom: 20px;
        padding-top: 10px;
    }

    #printHeaderTitle h1 {
        color: black !important;
        font-size: 26px !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
    }

    #printHeaderTitle hr {
        border-top: 1px solid #ccc !important;
        margin-bottom: 20px !important;
    }

    /* 6. Oculta elementos NO deseados en la impresión (incluyendo los campos específicos) */
    #printContainer .modal-buttons, /* Botones del formulario */
    #updateModal .close-button,     /* Botón de cerrar (X) del modal */
    .modal-backdrop /* Fondo oscuro/overlay del modal */
    {
        display: none !important;
        visibility: hidden !important;
    }

    /* --- INICIA AQUÍ TUS REGLAS PARA OCULTAR CAMPOS ESPECÍFICOS --- */
    label[for="recordId"], #recordId,
    label[for="operarioId"], #operarioId,
    label[for="cantidadDescarga"], #cantidadDescarga,
    label[for="pedidoModal"], #pedidoModal /* Agregado observación también como ejemplo */
    {
        display: none !important;
    }
    /* --- TERMINA AQUÍ TUS REGLAS PARA OCULTAR CAMPOS ESPECÍFICOS --- */

    /* 7. Asegura que el contenedor de impresión #printContainer sea solo una envoltura sin estilos de layout propios */
    #printContainer {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 8px !important;
        background-color: white !important;
        overflow: visible !important;
    }

    /* 8. Mejoras de diseño y layout para los campos del formulario en impresión */
    .modal-form-grid {
        display: block !important; /* Desactiva el grid para una estructura más lineal */
        width: 100% !important;
        padding: 0 !important;
    }
    .modal-form-row {
        margin-bottom: 8px !important;
        width: 100% !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 10px !important;
        page-break-inside: avoid !important;
    }
    .modal-form-row label {
        flex-shrink: 0 !important;
        width: 150px !important;
        text-align: right !important;
        padding-right: 5px !important;
        font-weight: bold !important;
        color: #333 !important;
    }
    .modal-form-row input,
    .modal-form-row select,
    .modal-form-row textarea {
        flex-grow: 1 !important;
        width: auto !important;
        display: block !important;
        box-sizing: border-box !important;
        border: 1px solid #ccc !important;
        padding: 4px 6px !important;
        background-color: white !important;
        color: black !important;
        font-size: 1em !important;
        line-height: 1.2 !important;
    }
    input[readonly], textarea[readonly], select[readonly] {
        border: none !important;
        background-color: transparent !important;
        padding-left: 0 !important;
        font-weight: normal !important;
        color: #000 !important;
    }
    textarea {
        min-height: 50px !important;
        resize: none !important;
    }


    /* --- CORRECCIÓN PARA EL CÓDIGO DE BARRAS --- */
    #barcodeRow {
        display: block !important; /* Aseguramos que sea un bloque para el centrado */
        width: 100% !important; /* Ocupa el 100% del espacio disponible para el centrado */
 
    }

    #barcode {
        display: block !important; /* Necesita ser display block para margin: auto */
        margin: 0 auto !important; /* Esto lo centrará horizontalmente dentro de #barcodeRow */
        width: 100% !important; /* Ajusta este porcentaje. No uses 100% si lo quieres más pequeño. */
        max-width: 900px !important; /* Un ancho máximo puede ser útil para que no sea demasiado grande */
        height: 140px !important; /* Ajusta la altura del código de barras si no es la ideal */
    }
}