/* assets/css/app.css
 * Estilos simples, modernos y limpios con MENÚ LATERAL.
 */
:root {
  --bg: #0f172a;
  --card: #111827;
  --muted: #94a3b8;
  --accent: #22c55e;
  --danger: #ef4444;
  --text: #e5e7eb;
  --line: #1f2937;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, Arial;
  display: flex; /* Usamos flexbox para el layout principal */
}
a {
  color: #93c5fd;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ============================================== */
/* === ESTILOS PARA EL NUEVO MENÚ LATERAL ======= */
/* ============================================== */

/* 1. Contenedor principal */
.main-layout {
    display: flex;
    width: 100%;
}

/* 2. Estilos de la barra lateral (sidebar) */
.sidebar {
    width: 240px; /* Ancho del menú */
    flex-shrink: 0; /* Evita que el menú se encoja */
    background-color: #1e293b;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Estilo personalizado de barra de desplazamiento para Chrome/Safari/Edge */
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.sidebar-header {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    position: relative;
}

/* Ocultar botón de cerrar sidebar en PC por defecto */
.close-drawer-btn {
    display: none;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-link:hover {
    background-color: #334155;
    color: #ffffff;
}

.sidebar-link.active {
    background-color: var(--accent);
    color: #ffffff;
    font-weight: 600;
}

.sidebar-link i {
    width: 20px;
    text-align: center;
}

/* 3. Contenedor del contenido */
.content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - 240px);
}

/* 4. Barra superior (ahora más simple) */
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Alinea los elementos a la derecha */
  padding: 12px 16px;
  background: #111827;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-info {
    color: var(--muted);
}

/* ============================================== */
/* === ESTILOS GENERALES (Tus estilos originales) == */
/* ============================================== */

.container {
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 0 #0005;
}
.grid {
  display: grid;
  gap: 16px;
}
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid.cols-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0b1220;
  color: #e5e7eb;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: #052e12; border: none; }
.btn.danger { background: var(--danger); border: none; }
.input, select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0b1220;
  color: #e5e7eb;
}
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; }
.table th { color: var(--muted); font-weight: 600; }
.badge { padding: 2.5px 9px; border-radius: 999px; background: #1f2937; color: #d1d5db; font-size: 12px; display: inline-block; border: 1px solid transparent; }
.badge-success { background: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; }
.badge-warning { background: rgba(245, 158, 11, 0.15) !important; color: #facc15 !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; }
.badge-info { background: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; }
.badge-danger { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; }
.badge-muted { background: rgba(107, 114, 128, 0.15) !important; color: #9ca3af !important; border: 1px solid rgba(107, 114, 128, 0.3) !important; }
.r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.right { margin-left: auto; }
.footer { padding: 24px; color: var(--muted); text-align: center; }
form.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
h1, h2 { margin: 6px 0 12px; }
.small { font-size: 12px; color: var(--muted); }

/* ============================================== */
/* === ESTILOS PARA DESPLEGABLES (Búsquedas) === */
/* ============================================== */
/* TomSelect overrides for dark theme */
.ts-wrapper .ts-control {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    box-shadow: none !important;
}
.ts-wrapper .ts-control > input {
    color: #e5e7eb !important;
}
.ts-dropdown {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    color: #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
.ts-dropdown .option {
    padding: 8px 10px;
    cursor: pointer;
    background-color: transparent !important;
    color: #e5e7eb !important;
}
.ts-dropdown .active, .ts-dropdown .option:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.supplier-lookup { position: relative; }
#supplier_results, #tablaResultados, #product-results {
    position: absolute;
    width: 100%;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 0;
    list-style: none;
}
#product_search_area { position: relative; }

/* ======================================================= */
/* === CORRECCIÓN PARA CONTROLES Y CABECERAS FIJAS (STICKY) === */
/* ======================================================= */

/* Contenedor para los controles (búsqueda, botones, etc.) */
.sticky-controls {
    position: -webkit-sticky;
    position: sticky;
    /* CAMBIO: Dejamos 50px de espacio para la barra superior (topbar) que ahora está arriba */
    top: 20px; 
    background-color: var(--card); 
    padding: 1rem 0;
    z-index: 10;
}

/* Celdas de la cabecera de la tabla */
.table thead th {
    position: static;
    background-color: var(--card);
    border-bottom: 1px solid var(--line) !important;
}

/* ============================================== */
/* === ESTILOS PARA FIJAR EL FOOTER AL FONDO ==== */
/* ============================================== */

/* CORRECCIÓN: Hacemos que el body ocupe toda la altura de la ventana del navegador.
   Esto es necesario para que el layout con menú lateral funcione correctamente. */
body {
    min-height: 100vh;
    display: flex; /* Añadido para consistencia con el layout principal */
}

/* Hacemos que el contenedor del contenido principal sea una
   columna flexible y que ocupe, como mínimo, toda la altura disponible. */
.content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%; /* Asegura que ocupe el ancho disponible */
}

/* Hacemos que el área de contenido (<main>) crezca para
   ocupar todo el espacio sobrante, empujando el footer hacia abajo. */
.container {
    flex-grow: 1;
}

/* Estilos básicos para el footer (asegura que no se encoja) */
.footer {
    flex-shrink: 0;
}

/* --- Estilos para los resultados de búsqueda mejorados --- */
.dropdown-item {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
}
.result-main {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.result-sku {
    color: #38bdf8; /* Azul claro para el SKU */
}
.result-sub {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #9ca3af; /* Gris para info secundaria */
}
.result-unit strong {
    color: #f3f4f6; /* Blanco para la unidad */
}

/* Estilo para el input de descripción de ítems temporales */
.input-desc {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0.25rem 0;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #374151; /* Línea inferior */
    color: #f3f4f6;
    padding: 4px 0;
    border-radius: 0;
}
.input-desc:focus {
    outline: none;
    border-bottom-color: #38bdf8; /* Línea azul al enfocar */
}

/* --- ESTILOS PARA LA VISTA RESPONSIVA DE REQUISICIÓN --- */

/* Contenedor principal de 2 columnas para PC */
.view-container {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.main-details {
    flex: 0 0 400px; /* Ancho fijo para la columna de detalles */
}
.items-list {
    flex-grow: 1; /* La lista de ítems ocupa el resto del espacio */
}
.main-details .folio {
    background-color: #111827;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #f3f4f6;
}

/* Tabla responsiva: magia para celulares */
.responsive-table {
    width: 100%;
}

/* Media Query: Reglas que se aplican solo en pantallas pequeñas (celulares) */
@media (max-width: 900px) {
    /* Convertimos el layout a 1 sola columna */
    .view-container {
        flex-direction: column;
    }
    .main-details {
        flex: 1 1 auto; /* La columna ocupa todo el ancho */
        width: 100%;
    }

    /* Ocultamos la cabecera de la tabla tradicional */
    .responsive-table thead {
        display: none;
    }
    /* Convertimos cada fila en una "tarjeta" premium */
    .responsive-table tr {
        display: block !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        padding: 12px 16px !important;
        margin-bottom: 12px !important;
        background-color: rgba(255, 255, 255, 0.01) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
    }
    .responsive-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        padding: 8px 0 !important;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.05) !important;
        font-size: 0.9rem !important;
        white-space: normal !important;
    }
    .responsive-table td:last-child {
        border-bottom: none !important;
    }
    /* Agregamos la etiqueta de la columna (ej. "SKU:") antes del dato */
    .responsive-table td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        text-align: left !important;
        margin-right: 15px !important;
        color: var(--muted) !important;
        font-size: 0.85rem !important;
    }
} /* Cierre de @media (max-width: 900px) */

/* ============================================== */
/* === ADECUACIONES PARA SMARTPHONES Y TABLETS === */
/* ============================================== */

/* 1. Scroll Horizontal general para TODAS las tablas con sombras indicadoras */
.table-responsive-md, .table-responsive {
    width: 100%;
    margin-bottom: 1rem; /* Espaciado debajo de la tabla */
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto; /* Permite deslizar horizontalmente */
    -webkit-overflow-scrolling: touch;
    
    /* Gradiente premium para scroll shadow dinámico */
    background: 
        linear-gradient(to right, var(--card) 30%, rgba(17, 24, 39, 0)),
        linear-gradient(to right, rgba(17, 24, 39, 0), var(--card) 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--card);
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Scrollbar premium delgado y oscuro */
.table-responsive-md::-webkit-scrollbar, .table-responsive::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.table-responsive-md::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}
.table-responsive-md::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}
.table-responsive-md::-webkit-scrollbar-thumb:hover, .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

@media (max-width: 1024px) {
    .table th, .table td {
        white-space: nowrap;
    }
}

/* 2. Barra Superior Mobile (oculta en escritorio) */
.mobile-topbar {
    display: none; /* Oculto por defecto */
}

/* 3. Media Query para tablets y móviles (menores a 1024px de ancho) - Menú colapsable */
@media (max-width: 1024px) {
    body {
        flex-direction: column !important;
    }

    .main-layout {
        margin-top: 56px;
    }

    /* Mostrar la barra superior mobile y ocultar la de escritorio */
    .mobile-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--card);
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999 !important;
        height: 56px;
        box-sizing: border-box;
    }
    
    .desktop-topbar {
        display: none !important;
    }

    .mobile-topbar-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .hamburger-btn {
        background: transparent;
        border: none;
        color: var(--text);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 4px;
    }

    /* ---- SIDEBAR TRANSFORMADA EN DRAWER LATERAL ---- */
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px; /* Oculta a la izquierda */
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease; /* Animación de apertura */
        border-right: 1px solid var(--line);
        overflow-y: auto;
    }

    .sidebar.open {
        left: 0; /* Aparece */
    }

    /* Botón de cerrar (X) dentro del menú */
    .close-drawer-btn {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        background: transparent;
        border: none;
        color: var(--text);
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* Sombra de fondo oscura cuando el menú está abierto */
    .drawer-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999; /* Por debajo del menú (1000) pero encima de todo lo demás */
        backdrop-filter: blur(4px);
    }

    /* El contenedor de contenido ahora abarca todo el espacio, no se empuja por el menú */
    .content-wrapper {
        width: 100%; 
    }

    /* Optimización de Touch Targets y prevención de zoom en iOS */
    .input, select, .ts-wrapper .ts-control {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
    
    .btn {
        padding: 10px 14px !important;
    }
}

/* 4. Media Query para grillas en Tablets (entre 769px y 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid.cols-3 {
        grid-template-columns: 1fr 1fr !important; /* 2 columnas en tablets */
    }
    .grid.cols-4 {
        grid-template-columns: 1fr 1fr !important; /* 2 columnas en tablets */
    }
    .grid.cols-5 {
        grid-template-columns: 1fr 1fr !important; /* 2 columnas en tablets */
    }
}

/* 5. Media Query para pantallas de celular y tablets pequeñas (hasta 768px de ancho) */
@media (max-width: 768px) {
    /* Colapsamos las cuadrículas a una sola columna */
    .grid.cols-2, 
    .grid.cols-3,
    .grid.cols-4,
    .grid.cols-5,
    .metrics-grid {
        grid-template-columns: 1fr !important; /* 1 sola columna hacia abajo */
    }

    /* Apilamos los formularios inline */
    form.inline {
        flex-direction: column; 
        align-items: stretch; 
        gap: 10px;
    }
    
    /* Ajustes a los botones en celular para facilitar el toque y ocupen el ancho por defecto */
    .btn, form.inline .btn, form.inline .input {
        width: 100%; 
        text-align: center; 
        margin-left: 0 !important;
        justify-content: center;
    }

    /* EVITAR envoltura total en botones pequeños (sm), botones-icono y botones dentro de celdas */
    .btn.sm, .btn-icon, td .btn, td a.btn, .table-recent-logs .btn, .badge, .badge-status-glow {
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 2px !important;
        text-align: center !important;
    }
    
    /* Desactivamos sticky en el control de tabla en celulares para no robar espacio */
    .sticky-controls {
        position: relative; 
        top: 0;
        padding-top: 0;
    }
    
    .table thead th {
        position: relative !important; 
        top: 0 !important;
    }

    /* Ajuste para contenedor general para darle menos margen en móvil */
    .container {
        padding: 10px 8px;
    }
    
    .card {
        padding: 14px 12px;
        margin-bottom: 12px;
    }

    /* Apilamiento limpio para headers con botones en listados */
    .container > .r:first-child,
    .card > .r:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .container > .r:first-child .btn,
    .card > .r:first-child .btn {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* 6. Media Query exclusivo para móviles pequeños (< 480px) */
@media (max-width: 480px) {
    .container {
        padding: 8px 4px !important;
    }
    .card {
        padding: 12px 10px !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
    }
    h1 {
        font-size: 1.5rem !important;
    }
    h2 {
        font-size: 1.25rem !important;
    }
    .grid {
        gap: 10px !important;
    }
}

/* ============================================================== */
/* === OPTIMIZACIONES EXCLUSIVAS PARA MÓVIL Y TABLET (OC) ====== */
/* ============================================================== */

@media (max-width: 900px) {
    /* 1. Transformación de tabla interactiva de edición (#tablaItems) a tarjetas */
    #tablaItems thead {
        display: none !important;
    }
    
    #tablaItems, #tablaItems tbody {
        display: block !important;
        width: 100% !important;
    }
    
    #tablaItems tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 14px !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
        position: relative !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Botón de eliminar (X) flotando en la esquina superior derecha */
    #tablaItems tbody td:nth-child(7) {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }
    
    #tablaItems tbody td:nth-child(7) .btn {
        padding: 6px 10px !important;
        background-color: rgba(239, 68, 68, 0.15) !important;
        color: #f87171 !important;
        border: 1px solid rgba(239, 68, 68, 0.3) !important;
    }
    
    /* Insignia de origen (MANUAL / Folio) */
    #tablaItems tbody td:nth-child(1) {
        grid-column: span 2 !important;
        padding: 0 0 6px 0 !important;
        border-bottom: 1px dashed var(--line) !important;
        margin-bottom: 4px !important;
    }
    
    /* Descripción del producto */
    #tablaItems tbody td:nth-child(2) {
        grid-column: span 2 !important;
        padding: 0 0 8px 0 !important;
        font-weight: 500 !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }
    
    /* Cantidad */
    #tablaItems tbody td:nth-child(3) {
        grid-column: 1 !important;
        padding: 0 !important;
        border: none !important;
    }
    #tablaItems tbody td:nth-child(3)::before {
        content: "Cantidad:" !important;
        display: block !important;
        font-size: 0.75rem !important;
        color: var(--muted) !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
    }
    
    /* Precio Unitario */
    #tablaItems tbody td:nth-child(4) {
        grid-column: 2 !important;
        padding: 0 !important;
        border: none !important;
    }
    #tablaItems tbody td:nth-child(4)::before {
        content: "Precio Unit.:" !important;
        display: block !important;
        font-size: 0.75rem !important;
        color: var(--muted) !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
    }
    
    /* Checkbox de IVA */
    #tablaItems tbody td:nth-child(5) {
        grid-column: 1 !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    #tablaItems tbody td:nth-child(5)::before {
        content: "Lleva IVA:" !important;
        font-size: 0.75rem !important;
        color: var(--muted) !important;
        font-weight: 600 !important;
    }
    
    /* Importe calculado */
    #tablaItems tbody td:nth-child(6) {
        grid-column: 2 !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        font-weight: bold !important;
        color: var(--accent) !important;
        font-size: 0.95rem !important;
    }
    #tablaItems tbody td:nth-child(6)::before {
        content: "Importe:" !important;
        font-size: 0.75rem !important;
        color: var(--muted) !important;
        font-weight: normal !important;
    }

    /* 2. Reestructurar el pie de página (tfoot) para los totales */
    #tablaItems tfoot {
        display: block !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    #tablaItems tfoot tr {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--line) !important;
    }
    #tablaItems tfoot tr:last-child {
        border-bottom: 2px solid var(--line) !important;
    }
    #tablaItems tfoot td {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }
    #tablaItems tfoot td[colspan="5"] {
        text-align: left !important;
        font-size: 0.9rem !important;
        color: var(--muted) !important;
    }
    #tablaItems tfoot td:nth-child(2) {
        font-size: 1rem !important;
    }
    #tablaItems tfoot td:last-child {
        display: none !important; /* Ocultar celda vacía de la acción */
    }

    /* Transformación de tabla interactiva de insumos a cotizar (#items_table) a tarjetas */
    #items_table thead {
        display: none !important;
    }
    
    #items_table, #items_table tbody {
        display: block !important;
        width: 100% !important;
    }
    
    #items_table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 14px !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
        position: relative !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Checkbox de cotizar */
    #items_table tbody td:nth-child(1) {
        grid-column: 1 !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    #items_table tbody td:nth-child(1)::before {
        content: "Cotizar:" !important;
        font-size: 0.75rem !important;
        color: var(--muted) !important;
        font-weight: 600 !important;
    }
    
    /* Botones de Acción (Quitar / Asociar / Crear) */
    #items_table tbody td:nth-child(5) {
        grid-column: 2 !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    /* Descripción del Insumo */
    #items_table tbody td:nth-child(2) {
        grid-column: span 2 !important;
        padding: 8px 0 !important;
        border-top: 1px dashed var(--line) !important;
        border-bottom: 1px dashed var(--line) !important;
        font-weight: 500 !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }
    
    /* Cantidad */
    #items_table tbody td:nth-child(3) {
        grid-column: 1 !important;
        padding: 0 !important;
        border: none !important;
    }
    #items_table tbody td:nth-child(3)::before {
        content: "Cantidad:" !important;
        display: block !important;
        font-size: 0.75rem !important;
        color: var(--muted) !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
    }
    
    /* Unidad */
    #items_table tbody td:nth-child(4) {
        grid-column: 2 !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    #items_table tbody td:nth-child(4)::before {
        content: "Unidad:" !important;
        font-size: 0.75rem !important;
        color: var(--muted) !important;
        font-weight: 600 !important;
    }

    /* Estilos responsivos de pie de página para reportes (.responsive-table tfoot) */
    .responsive-table tfoot {
        display: block !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    
    .responsive-table tfoot tr {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid var(--line) !important;
        border-radius: 8px !important;
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }
    
    .responsive-table tfoot td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.05) !important;
        font-size: 0.9rem !important;
        text-align: right !important;
    }
    
    .responsive-table tfoot td:last-child {
        border-bottom: none !important;
        font-weight: bold !important;
    }
    
    .responsive-table tfoot td[colspan] {
        text-align: right !important;
        display: flex !important;
    }
    
    /* Agregamos el label responsivo si existe */
    .responsive-table tfoot td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        text-align: left !important;
        margin-right: 15px !important;
        color: var(--muted) !important;
        font-size: 0.85rem !important;
    }
    
    /* Ocultar celdas td vacías en tfoot en responsive-table */
    .responsive-table tfoot td:empty,
    .responsive-table tfoot td[colspan]:empty {
        display: none !important;
    }

    /* Alinear al centro las celdas responsivas sin data-label (ej. mensajes de no registros) */
    .responsive-table td:not([data-label]) {
        justify-content: center !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
}

/* 3. Panel de firmas responsivo / adaptable */
.signatures-grid {
    display: grid !important;
    gap: 16px !important;
    margin-top: 15px !important;
    text-align: center !important;
}
@media (max-width: 599px) {
    .signatures-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 600px) {
    .signatures-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}