﻿



/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Estilos principal para tablas PRIMARIAS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
#tableResult 
{
    /*border-collapse: collapse;*/
    width: 100%;
}

#tableResult th
{
    border: 2px solid #c0cbe7; /* Borde grueso para encabezados */
    padding: 8px;
    background-color: #f2f2f2;
    text-align: left;
}

#tableResult td 
{
    border: 1px solid #c1bebe; /* Borde delgado para celdas */
    padding: 8px;
}


#tableResult tr:nth-child(even) {
    background-color: #FFFFFF;
}

#tableResult tr:hover {
    background-color: #FFFFFF;
}












/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Estilos principal para tablas SECUNDARIAS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
#tableResultSecondari
{
    /*border-collapse: collapse;*/
    width: 100%;
}

    #tableResultSecondari th {
        border: 1px solid #c1c1b9; /* Borde grueso para encabezados */
        padding: 8px;
        background-color: #f2f2f2;
        text-align: left;
        color: #787c8a;
    }

    #tableResultSecondari td {
        border: 1px solid #c1bebe; /* Borde delgado para celdas */
        padding: 8px;
        color: #969690
    }


    #tableResultSecondari tr:nth-child(even) {
        background-color: #FFFFFF;
    }

    #tableResultSecondari tr:hover {
        background-color: #FFFFFF;
    }


.negrita 
{
    font-weight: bold;    
}






/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Estilos para CONTENDRO DE GRID ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
/* Contenedor con scroll vertical */
.table-scroll-wrapper {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden; /* Ocultar scroll horizontal */
    position: relative;
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 100%; /* Asegurar que use el 100% del contenedor padre */
}







/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Estilos especiales ENCABEZDOS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* Tabla con encabezado fijo */
.table-fixed-header {
    margin-bottom: 0 !important;
    width: 100%;
    table-layout: fixed; /* CLAVE: Distribuir columnas equitativamente */
    /*border-collapse: separate !important;*/
    /*border-spacing: 0;*/
    
}

/* Encabezado fijo con sticky */
.table-fixed-header thead th 
{
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
    z-index: 10;
    padding: 6px 4px !important; /* Reducir padding */
    font-weight: bold;
    font-size: 12px; /* Reducir tamaño de fuente */
    white-space: normal; /* Permitir salto de línea */
    word-wrap: break-word;
    text-align: center;
    vertical-align: middle;
    margin-top: -1px;
    

    /* Bordes individuales */
/   border-top: 2px solid #c0cbe7 !important;
    /*border-bottom: 2px solid #c0cbe7 !important;
    border-left: 2px solid #c0cbe7 !important;
    border-right: 2px solid #c0cbe7 !important;*/

    box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.1);
    
    /* Clip para asegurar que los bordes no se corten */
    background-clip: padding-box;
    
    
}

/* Mejora visual para el hover del thead */
.table-fixed-header thead th:hover
{
    background-color: #e8e8e8;
}

    /* Primera columna del encabezado */
    .table-fixed-header thead th:first-child
    {
        /*border-left: 2px solid #c0cbe7 !important;*/
    }



    /* Última columna del encabezado */
    .table-fixed-header thead th:last-child 
    {
        /*border-right: 2px solid #c0cbe7 !important;*/
    }



    /* Mejorar visibilidad durante scroll con sombra */
    .table-fixed-header thead th {
        /*box-shadow: inset 0 -2px 0 #c0cbe7,*/ /* Borde inferior interno */
        /*0 2px 4px rgba(0, 0, 0, 0.1);*/ /*Sombra externa */

        box-shadow: inset 0px 0px 0px 0.04em #c0cbe7;
    }




/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Estilos especiales FILAS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* Celdas del tbody con mismo comportamiento */
.table-fixed-header tbody td {
/*    padding: 6px 4px !important;
    vertical-align: middle;
    font-size: 12px;
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;*/
}

/* Filas alternadas para mejor legibilidad */
.table-fixed-header tbody tr:nth-child(even) {
    /*background-color: #f9f9f9;*/
}

/* Hover en filas */
.table-fixed-header tbody tr:hover {
    /*background-color: #f0f0f0;*/
}





/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Estilos Scrollbar personalizado (opcional, para navegadores webkit)  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */


/* Scrollbar personalizado */
.table-scroll-wrapper::-webkit-scrollbar {
    width: 8px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Ajuste para enlaces */
.table-fixed-header tbody td a {
    color: #337ab7;
    text-decoration: none;
    display: inline-block;
}

    .table-fixed-header tbody td a:hover {
        color: #23527c;
        text-decoration: underline;
    }




