/*
 * Hoja de Estilos - JavLogistics Kardex
 * Versión 2.1 (Estilos para Módulo Kardex - Tabla Anidada)
 *
 * NOTA: Este archivo asume que el plugin "JavLogistics Core" 
 * ya cargó las variables globales (ej. --jav-color-primario-azul).
 */

/* 1. Importar librerías base de DataTables */
@import "https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css";
@import "https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css";

/* * 2. Estilos de la Tabla Principal (El "Recuadro Bonito Blanco")
 */
#jav-datatable-kardex_wrapper {
   font-family: var(--jav-fuente-principal);
   background: var(--jav-color-fondo-claro);
   padding: 25px;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Espacio entre el menú de longitud y los botones */
#jav-datatable-kardex_wrapper .dt-buttons {
    margin-left: 20px;
}

tr.jav-producto-clickable {
   cursor: pointer;
}
tr.jav-producto-clickable:hover {
   background-color: #f0f8ff !important;
}

/* * 3. Estilos de Botones
 */
.dt-buttons .dt-button {
   background-color: var(--jav-color-secundario-teal) !important;
   color: var(--jav-color-texto-blanco) !important;
   border: none !important;
   border-radius: var(--jav-boton-border-radius) !important;
   padding: 8px 15px !important;
   font-weight: 600 !important;
   font-family: var(--jav-fuente-principal) !important;
}
.dt-buttons .dt-button:hover {
   background-color: var(--jav-color-primario-azul) !important;
}


/* * ===================================================
 * 4. ESTILOS PARA POPUP DE DETALLE (KARDEX)
 * ===================================================
 */
#jav-popup-kardex {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: var(--jav-color-fondo-claro);
   border: 1px solid #ccc;
   padding: 25px;
   z-index: 1001;
   max-height: 85vh;
   overflow-y: auto;
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.1);
   min-width: 800px; /* Más ancho para la tabla anidada */
   box-sizing: border-box;
   font-family: var(--jav-fuente-principal);
}

#jav-popup-kardex h2 {
   margin-top: 0;
   font-size: 20px;
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
   color: var(--jav-color-texto-principal);
}

/* Botón de Cerrar */
#jav-popup-kardex .jav-popup-cerrar {
   margin-top: 20px;
   cursor: pointer;
   background: var(--jav-color-primario-azul);
   color: var(--jav-color-texto-blanco);
   border: none;
   padding: 8px 15px;
   border-radius: var(--jav-boton-border-radius);
   font-size: 14px;
   font-weight: 600;
}
#jav-popup-kardex .jav-popup-cerrar:hover {
   background: var(--jav-color-azul-hover);
}