/*
* Archivo: CotizFormQueryIng.css
* Ruta: src\static\css\Operaciones\Ingenieria\Cotiz\CotizFormQueryIng.css
* Descripción: Estilos CSS para consultar formularios de cotización en el módulo de Ingeniería.
*/

/* ===============================
    ?? VARIABLES CSS
   =============================== */
:root {
    /* Colores principales y variantes */
    --primary-color: #1f71c2; /* Azul principal IGSA */
    --primary-color-light: #1f71c249; /* Azul con transparencia para filtros */
    
    /* Colores para acciones */
    --consultar-color: #007bff; /* Azul secundario para botón "Consultar" */
    --consultar-color-dark: #0056b3; /* Versión oscura para hover */

    /* Colores neutros */
    --light-bg: #f2f2f2; /* Fondo claro para filas alternas */
    --border-color: #ccc; /* Color de bordes */
    --text-color: #333; /* Color principal para texto */
    --white: white;
    --black: black; /* Añadido para paginación */
}

/* ===============================
    ?? ESTILOS PARA LA TABLA
   =============================== */

/* Estilos para los TÍTULOS de la tabla (Fila 1) */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead thead th {
    background-color: var(--primary-color) !important; /* Color de fondo */
    color: var(--white) !important; /* Color del texto */
    font-size: 12px !important; /* Tamaño de fuente */
    font-weight: bold !important;
    text-align: center !important; /* Alineación */
    vertical-align: middle !important;
    padding: 10px !important; /* Espaciado */
    white-space: nowrap; /* Evita que el texto del título se parta */
}

/* Cambiar el color de fondo de la fila de FILTROS (Fila 2) */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead thead tr:nth-child(2) th {
    background-color: var(--primary-color-light) !important;
    padding: 5px !important;
}

/* Estilos para los INPUTS de la fila de filtros */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead thead input {
    font-size: 12px !important; /* Tamaño del texto */
    text-align: center !important; /* Centrar el texto */
    padding: 2px !important; /* Espaciado interno */
    border: 1px solid var(--border-color) !important; /* Borde sutil */
    outline: none !important; /* Quitar contorno azul al hacer clic */
    width: 100% !important; /* Ocupa todo el ancho de la celda */
    min-width: 80px !important; /* Evita que sean demasiado pequeños */
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
}

/* Estilos para el CUERPO de la tabla */
#TaskCotizFormQueryIng tbody td {
    font-size: 12px;
    text-align: left; /* Alineación predeterminada */
    vertical-align: middle;
    padding: 8px 5px; /* Espaciado */
    white-space: nowrap; /* Evita que el contenido se parta (clave para scroll) */
}

/* Estilos para las filas impares (mejor visualización) */
#TaskCotizFormQueryIng tbody tr:nth-child(odd) {
    background-color: var(--light-bg);
}

/* ===============================
    ?? SOLUCIÓN ALINEACIÓN DE TABLAS (CORREGIDO)
   =============================== */

/* Forzar que la tabla use el ancho correcto */
#TaskCotizFormQueryIng {
    table-layout: fixed !important;
    width: 100% !important; /* Asegura que use todo el ancho disponible */
}
/* Evitar que DataTables sobreescriba los anchos */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table {
    table-layout: fixed !important;
    width: 100% !important; /* Fija el ancho en el encabezado */
}

/* ===============================
    ?? ANCHOS DE COLUMNAS (Corregido con %)
   =============================== */

#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(1),#TaskCotizFormQueryIng thead th:nth-child(1),#TaskCotizFormQueryIngbody tbody td:nth-child(1){width:80px!important;} /* No de Tarea */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(2),#TaskCotizFormQueryIng thead th:nth-child(2),#TaskCotizFormQueryIngbody tbody td:nth-child(2){width:110px!important;} /* Estatus */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(3),#TaskCotizFormQueryIng thead th:nth-child(3),#TaskCotizFormQueryIngbody tbody td:nth-child(3){width:90px!important;} /* Oportunidad */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(4),#TaskCotizFormQueryIng thead th:nth-child(4),#TaskCotizFormQueryIngbody tbody td:nth-child(4){width:400px!important;} /* Tipo de Formulario */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(5),#TaskCotizFormQueryIng thead th:nth-child(5),#TaskCotizFormQueryIngbody tbody td:nth-child(5){width:190px!important;} /* Fecha de Creación */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(6),#TaskCotizFormQueryIng thead th:nth-child(6),#TaskCotizFormQueryIngbody tbody td:nth-child(6){width:150px!important;} /* Contacto */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(7),#TaskCotizFormQueryIng thead th:nth-child(7),#TaskCotizFormQueryIngbody tbody td:nth-child(7){width:180px!important;} /* Vendedor */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(8),#TaskCotizFormQueryIng thead th:nth-child(8),#TaskCotizFormQueryIngbody tbody td:nth-child(8){width:160px!important;} /* Correo Vendedor */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(9),#TaskCotizFormQueryIng thead th:nth-child(9),#TaskCotizFormQueryIngbody tbody td:nth-child(9){width:130px!important;} /* Telefono del vendedor */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(10),#TaskCotizFormQueryIng thead th:nth-child(10),#TaskCotizFormQueryIngbody tbody td:nth-child(10){width:80px!important;} /* N° Costeo */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(11),#TaskCotizFormQueryIng thead th:nth-child(11),#TaskCotizFormQueryIngbody tbody td:nth-child(11){width:100px!important;} /* Caso de Costeo	*/
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(12),#TaskCotizFormQueryIng thead th:nth-child(12),#TaskCotizFormQueryIngbody tbody td:nth-child(12){width:80px!important;} /* Costo Directo */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(13),#TaskCotizFormQueryIng thead th:nth-child(13),#TaskCotizFormQueryIngbody tbody td:nth-child(13){width:80px!important;} /* % Indirecto */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(14),#TaskCotizFormQueryIng thead th:nth-child(14),#TaskCotizFormQueryIngbody tbody td:nth-child(14){width:80px!important;} /* % Monto Indirecto */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(15),#TaskCotizFormQueryIng thead th:nth-child(15),#TaskCotizFormQueryIngbody tbody td:nth-child(15){width:100px!important;} /* % Financiamiento */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(16),#TaskCotizFormQueryIng thead th:nth-child(16),#TaskCotizFormQueryIngbody tbody td:nth-child(16){width:120px!important;} /* Monto Financiamiento*/
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(17),#TaskCotizFormQueryIng thead th:nth-child(17),#TaskCotizFormQueryIngbody tbody td:nth-child(17){width:80px!important;}  /* % Utilidad */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(18),#TaskCotizFormQueryIng thead th:nth-child(18),#TaskCotizFormQueryIngbody tbody td:nth-child(18){width:80px!important;}  /* Monto Utilidad */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(19),#TaskCotizFormQueryIng thead th:nth-child(19),#TaskCotizFormQueryIngbody tbody td:nth-child(19){width:110px!important;}  /* % Gastos Operación */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(20),#TaskCotizFormQueryIng thead th:nth-child(20),#TaskCotizFormQueryIngbody tbody td:nth-child(20){width:140px!important;}  /*  Monto Gastos Operación */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(21),#TaskCotizFormQueryIng thead th:nth-child(21),#TaskCotizFormQueryIngbody tbody td:nth-child(21){width:120px!important;}  /*  Factor de sobrecosto */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(22),#TaskCotizFormQueryIng thead th:nth-child(22),#TaskCotizFormQueryIngbody tbody td:nth-child(22){width:150px!important;}  /* Precio de Venta Mínimo */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(23),#TaskCotizFormQueryIng thead th:nth-child(23),#TaskCotizFormQueryIngbody tbody td:nth-child(23){width:100px!important;}  /* % Descuento Max*/
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(24),#TaskCotizFormQueryIng thead th:nth-child(24),#TaskCotizFormQueryIngbody tbody td:nth-child(24){width:100px!important;}  /* Monto Descuento*/
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(25),#TaskCotizFormQueryIng thead th:nth-child(25),#TaskCotizFormQueryIngbody tbody td:nth-child(25){width:120px!important;}  /* Precio de lista*/
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(26),#TaskCotizFormQueryIng thead th:nth-child(26),#TaskCotizFormQueryIngbody tbody td:nth-child(26){width:130px!important;}  /* Tiempo de ejecucion*/
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead table thead th:nth-child(27),#TaskCotizFormQueryIng thead th:nth-child(27),#TaskCotizFormQueryIngbody tbody td:nth-child(27){width:100px!important;}  /* Acción */

/* ===============================
    ?? ESTILOS PARA EL BOTÓN "CONSULTAR"
   =============================== */

/* Estilos generales para los botones de accion */
#TaskCotizFormQueryIng tbody button {
    font-size: 12px;
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 5px;
    cursor: pointer; /* Cursor de mano */
    transition: 0.3s;
    border: none;
    color: var(--white);
}

/* Estilos específicos para botón "Consultar" */
#TaskCotizFormQueryIng tbody .btn-consultar {
    background-color: var(--consultar-color);
}

#TaskCotizFormQueryIng tbody .btn-consultar:hover {
    background-color: var(--consultar-color-dark);
}

/* ===============================
    ?? ESTILOS PARA BOTONES DE EXPORTACIÓN
   =============================== */

.dt-buttons .dt-button {
    background-color: var(--consultar-color) !important;
    color: var(--white) !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 5px !important;
    margin-right: 5px !important;
    border: none;
}

.dt-buttons .dt-button:hover {
    background-color: var(--consultar-color-dark) !important;
}

/* ===============================
    ?? ESTILOS PARA BUSCADOR Y PAGINACIÓN
   =============================== */

/* Estilos para la barra de búsqueda global */
.dataTables_filter {
    font-size: 13px;
}

.dataTables_filter input {
    font-size: 12px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

/* Estilos para los botones de paginación */
.dataTables_paginate .paginate_button {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #ddd;
    color: var(--black);
    margin: 0 2px;
    transition: 0.3s;
    border: none;
}

.dataTables_paginate .paginate_button:hover {
    background-color: var(--consultar-color);
    color: var(--white);
}

.dataTables_paginate .paginate_button.current {
    background-color: var(--consultar-color);
    color: var(--white);
}


/* ===============================
    ?? ESTILOS DE SCROLL (MODIFICADO)
   =============================== */

/* * MODIFICACIÓN:
 * Aplicamos el scroll horizontal SIEMPRE, no solo en @media,
 * porque esta tabla siempre es demasiado ancha.
*/

/* 1. ACTIVAMOS el desplazamiento horizontal en el contenedor */
#TaskCotizFormQueryIng_wrapper {
    overflow-x: auto !important;   /* Activa el scroll horizontal */
    white-space: nowrap !important; /* Evita que el texto se rompa */
}

/* 2. FORZAMOS un ancho minimo a la tabla */
#TaskCotizFormQueryIng {
    min-width: 3600px !important; /* Ancho mínimo para activar scroll */
}

/* 3. MANTENEMOS los encabezados fijos al hacer scroll */
#TaskCotizFormQueryIng_wrapper .dataTables_scrollHead {
    position: sticky !important;
    top: 0 !important; /* Pega el header arriba */
    background-color: var(--white) !important; /* Fondo para que no se vea el contenido de atrás */
    z-index: 1000 !important;
    width: 100% !important; /* Asegurar que no se desajuste */
}