/**
 * Correcciones de CSS
 * Fecha: 05 de Enero de 2025
 *
 * Fixes específicos para problemas de UI
 * Todas las medidas en REM para responsive design
 *
 * Base: 1rem = 16px
 * - 3rem = 48px (primera columna en desktop)
 * - 1.25rem = 20px (checkbox)
 * - 0.5rem = 8px (padding)
 */

/* ==========================================
   FIX: Primera columna muy ancha en grids
   ========================================== */

/* Primera columna (checkbox) - Ancho responsive */
div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child,
div[name="Contenido"].BL_Datos > table > thead > tr > th:first-child {
    text-align: center !important;
    overflow: visible !important;    /* CAMBIO: visible para que se vea el checkbox */
    vertical-align: middle !important;
	position: sticky;
	left: 0;
	width: 2rem !important;
	min-width: 2rem !important;
    max-width: 2rem !important;
	z-index: 2;
}

div[name="contContenido"] /*table[name="contBrwTitulos"]*/ .recordsGrid > colgroup > col[campo="_Check"],
div[name="Contenido"].BL_Datos > table > colgroup > col[campo="_Check"] {
    left: 0 !important;
    width: 2rem !important;
	min-width: 2rem !important;
    max-width: 2rem !important;
}

div[name="contContenido"] /*table[name="contBrwTitulos"]*/ .recordsGrid > colgroup > col[campo="_Botones"],
div[name="Contenido"].BL_Datos > table > colgroup > col[campo="_Botones"] {
	left: 2rem !important;
}

div[name="Contenido"].BL_Datos > table > tbody > tr > td[campo="_Botones"],
div[name="Contenido"].BL_Datos > table > thead > tr > th[campo="_Botones"] {
	position: sticky;
	left: 2rem !important;
	z-index: 2;
}


/* Checkbox dentro de la primera columna */
div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child input[type="checkbox"],
div[name="Contenido"].BL_Datos > table > thead > tr > th:first-child input[type="checkbox"],
div[name="Contenido"].BL_Datos > table > tbody > tr > td[campo="_Check"] input[name="BL_check"],
div[name="Contenido"].BL_Datos > table > tbody > tr > td[campo="_Check"] > div[name="info"] > input[name="BL_check"][type="checkbox"] {
    width: 1rem !important;      /* 20px */
    height: 1rem !important;     /* 20px */
    cursor: pointer !important;
    margin: 0 auto !important;
    display: block !important;
    flex-shrink: 0 !important;      /* No reducir tamaño en flex */
    visibility: visible !important;
    opacity: 1 !important;
	background-color: white;
}

/* Checkboxes deshabilitados - estilo visual diferente */
div[name="Contenido"].BL_Datos > table > tbody > tr > td[campo="_Check"] input[name="BL_check"]:disabled,
div[name="Contenido"].BL_Datos > table > tbody.inactivo > tr > td[campo="_Check"] input[name="BL_check"] {
    opacity: 0.4 !important;        /* Más transparente */
    cursor: not-allowed !important; /* Cursor de "no permitido" */
    filter: grayscale(100%) !important; /* Escala de grises */
}

/* Asegurar que la celda no crezca */
div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child > .gridCelda {
    justify-content: center !important;
    width: 100% !important;         /* Ocupa todo el ancho del td */
    min-width: auto !important;
    max-width: none !important;
}

/* ==========================================
   FIX: Asegurar que otras columnas usen el espacio disponible
   ========================================== */

/* Segunda columna y siguientes - Ancho automático */
div[name="Contenido"].BL_Datos > table > tbody > tr > td:not(:first-child),
div[name="Contenido"].BL_Datos > table > thead > tr > th:not(:first-child) {
    /*width: auto !important;*/
}

/* ==========================================
   RESPONSIVE: Adaptación para diferentes tamaños de pantalla
   ========================================== */

/* Tablets grandes y desktop pequeño (768px - 1024px) */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child,
    div[name="Contenido"].BL_Datos > table > thead > tr > th:first-child {
    }

    div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child input[type="checkbox"],
    div[name="Contenido"].BL_Datos > table > thead > tr > th:first-child input[type="checkbox"] {
        width: 1.125rem !important;     /* 18px en tablet */
        height: 1.125rem !important;
    }
}

/* Tablets verticales (576px - 767px) */
@media screen and (max-width: 767px) and (min-width: 576px) {
    div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child,
    div[name="Contenido"].BL_Datos > table > thead > tr > th:first-child {
    }

    div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child input[type="checkbox"],
    div[name="Contenido"].BL_Datos > table > thead > tr > th:first-child input[type="checkbox"] {
        width: 1rem !important;         /* 16px en tablet pequeño */
        height: 1rem !important;
    }
}

/* Desktop grande (> 1400px) */
@media screen and (min-width: 1400px) {
    div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child,
    div[name="Contenido"].BL_Datos > table > thead > tr > th:first-child {
    }

    div[name="Contenido"].BL_Datos > table > tbody > tr > td:first-child input[type="checkbox"],
    div[name="Contenido"].BL_Datos > table > thead > tr > th:first-child input[type="checkbox"] {
        width: 1rem !important;     /* 22px en desktop grande */
        height: 1rem !important;
    }
}

/* ==========================================
   FIX: Campos de filtro - COMPACTOS y proporcionales
   ========================================== */

/* Grid de filtros COMPACTO para maximizar espacio de tabla */
div[name='TBodyTablaFiltro'] {
    display: grid !important;
    gap: 0.375rem 0.625rem !important;   /* Gap reducido para compactar */
    /* Columnas más estrechas - más campos por fila */
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)) !important;  /* 152px mínimo */
    padding: 0.375rem 0.5rem !important;  /* Padding reducido */
    align-items: start !important;
    justify-content: start !important;
}

/* Campos de filtro compactos */
div[name='TBodyTablaFiltro'] > div[name='campo'] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.125rem !important;         /* Gap mínimo entre label e input */
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Labels de filtros - compactos */
div[name='TBodyTablaFiltro'] div[name='tdLabel'] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-size: 0.75rem !important;    /* 12px - más pequeño */
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}

/* Inputs y selects - altura reducida para compactar */
/* IMPORTANTE: Excluir checkboxes con :not([type="checkbox"]) */
div[name='TBodyTablaFiltro'] input:not([type="checkbox"]),
div[name='TBodyTablaFiltro'] select {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 0.75rem !important;    /* 12px - más pequeño */
    height: 1.625rem !important;      /* 26px - más compacto (antes 32px) */
    padding: 0.125rem 0.375rem !important; /* Padding reducido */
}

/* Checkboxes en filtros - estilo natural */
div[name='TBodyTablaFiltro'] input[type="checkbox"] {
    width: auto !important;           /* Ancho automático del checkbox */
    height: auto !important;          /* Altura automática del checkbox */
    padding: 0 !important;            /* Sin padding */
    margin: 0.25rem 0 !important;     /* Margen vertical para centrar */
    cursor: pointer !important;
}

/* Selects específicos */
div[name='TBodyTablaFiltro'] select {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

/* Media queries para filtros responsive - MÁS COLUMNAS POR FILA */

/* Desktop grande (> 1600px) - 6-7 columnas */
@media screen and (min-width: 1600px) {
    div[name='TBodyTablaFiltro'] {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important;  /* 160px */
    }
}

/* Desktop normal (1200px - 1599px) - 5-6 columnas */
@media screen and (max-width: 1599px) and (min-width: 1200px) {
    div[name='TBodyTablaFiltro'] {
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)) !important;  /* 152px */
    }
}

/* Desktop pequeño (992px - 1199px) - 4-5 columnas */
@media screen and (max-width: 1199px) and (min-width: 992px) {
    div[name='TBodyTablaFiltro'] {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)) !important;  /* 144px */
        gap: 0.375rem 0.5rem !important;
    }
}

/* Tablets grandes (768px - 991px) - 3-4 columnas */
@media screen and (max-width: 991px) and (min-width: 768px) {
    div[name='TBodyTablaFiltro'] {
        grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)) !important;  /* 136px */
        gap: 0.375rem 0.5rem !important;
    }
}

/* Tablets pequeños (576px - 767px) - 2-3 columnas */
@media screen and (max-width: 767px) and (min-width: 576px) {
    div[name='TBodyTablaFiltro'] {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)) !important;  /* 128px */
        gap: 0.375rem 0.5rem !important;
    }
}

/* Móviles (< 576px) - 1-2 columnas */
@media screen and (max-width: 576px) {
    div[name='TBodyTablaFiltro'] {
        grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)) !important;  /* 112px */
        gap: 0.5rem 0.375rem !important;
    }
}