/*
 * Hoja de Estilos - JavLogistics Documentos
 * Versión 1.3 (FINAL: Fuente 12px y 2 Columnas Estables)
 *
 * 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 (DataTables)
 * ¡CORRECCIÓN DE FUENTE!
 */
#jav-datatable-documentos_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);
   
   /* --- ¡AJUSTE DE FUENTE! (-3 puntos aprox. del default) --- */
   font-size: 12px;
}

/* Espacio entre el menú de longitud y los botones */
#jav-datatable-documentos_wrapper .dt-buttons {
    margin-left: 20px;
}

tr.jav-documento-clickable {
   cursor: pointer;
}
tr.jav-documento-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-azul-hover) !important;
}


/* * ===================================================
 * 4. ESTILOS PARA POPUP DE DETALLE (DOCUMENTOS)
 * ===================================================
 */
#jav-popup-documentos {
   font-family: var(--jav-fuente-principal);
   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: 750px; /* Ancho ajustado para 2 columnas grandes */
   box-sizing: border-box;
}

#jav-popup-documentos 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-documentos .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-documentos .jav-popup-cerrar:hover {
   background: var(--jav-color-azul-hover);
}

/* * ===================================================
 * 4.1. GRILLA PARA CAMPOS DEL POPUP (2 COLUMNAS)
 * ===================================================
 */
.detalle-grid {
    display: grid !important; /* Refuerzo para evitar choques de tema */
    /* ¡FINAL! DOS columnas */
    grid-template-columns: 1fr 1fr; 
    gap: 15px;
}
 
.detalle-grupo {
    margin-bottom: 0;
}

.detalle-grupo label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--jav-color-texto-principal);
    margin-bottom: 4px;
}
.detalle-grupo input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: var(--jav-color-fondo-gris);
    font-family: inherit;
    font-size: 14px;
    color: var(--jav-color-texto-secundario);
    box-sizing: border-box;
}
.detalle-grid .full-width {
    grid-column: 1 / -1; 
}