/* ============================================================
   SECCIÓN: nomina_table_datagrid
   Variante específica para los DataGrids del módulo de Nómina.
   Incluye corrección de doble encabezado sticky y estilos de footer.
   ============================================================ */

#nomina_table_datagrid {
    font-family: arial, sans-serif;
    font-size: 13px;
    border-collapse: collapse;
    width: 100%;
    background-color: #ffffff;
}

    /* 1. TEXTO DE LAS CELDAS */
    #nomina_table_datagrid td {
        font-weight: normal;
        border-width: 1px;
        font-size: 13px;
        border-color: #FCFCFC;
        border-style: solid;
        padding: 4px;
        color: #424242;
    }

    /* 2. ENCABEZADOS (Fondo y Texto Base) */
    #nomina_table_datagrid tr > th {
        background: #004750;
        color: #ffffff !important;
        text-align: left;
        font-weight: bold;
        font-size: 13px;
        padding: 4px;
        border: 1px solid #ffffff;
    }

    /* 3. ICONOS (Filtros y Flechas de ordenamiento) */
    #nomina_table_datagrid th .mud-icon-root {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    /* 4. BUSCADOR DE COLUMNAS */
    #nomina_table_datagrid th .mud-input-slot,
    #nomina_table_datagrid th .mud-input-slot::placeholder {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 12px;
    }

    /* 5. HOVER DEL ENCABEZADO */
    #nomina_table_datagrid th:hover {
        background: #ceffff;
        color: #000000 !important;
    }

        #nomina_table_datagrid th:hover .mud-icon-root,
        #nomina_table_datagrid th:hover .mud-input-slot,
        #nomina_table_datagrid th:hover .mud-input-slot::placeholder {
            color: #000000 !important;
            fill: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }

    /* 6. LÍNEA DEL BUSCADOR */
    #nomina_table_datagrid th .mud-input-underline:before {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    }

    /* 7. ALINEACIONES */
    #nomina_table_datagrid .link-style {
        font-weight: bold;
        font-size: 13px;
        color: inherit;
        text-decoration: none;
    }

    #nomina_table_datagrid .left-align   { text-align: left;   }
    #nomina_table_datagrid .right-align  { text-align: right;  }
    #nomina_table_datagrid .center-align { text-align: center; }

    /* 8. FILAS ALTERNAS Y HOVER */
    #nomina_table_datagrid tr:nth-child(even) {
        background-color: #ebebeb;
    }

    #nomina_table_datagrid tr:hover {
        background-color: #ceffff;
    }

    /* ============================================================
       DOBLE ENCABEZADO STICKY
       Fija la fila de títulos (first-child) y la fila de filtros
       (last-child) cuando se hace scroll dentro del datagrid.
       ============================================================ */

    #nomina_table_datagrid table thead tr:first-child th {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        background: #004750 !important;
    }

    #nomina_table_datagrid thead tr:last-child th {
        position: sticky !important;
        top: 28px !important;
        z-index: 2 !important;
        background: #004750 !important;
    }

/* ============================================================
   FOOTER DEL DATAGRID DE NÓMINA
   Se aplica mediante FooterClass="nomina-datagrid-footer"
   en el componente MudDataGrid.
   ============================================================ */

.nomina-datagrid-footer {
    background-color: #004750 !important;
}

    .nomina-datagrid-footer td,
    .nomina-datagrid-footer th {
        background-color: #004750 !important;
        color: #ffffff !important;
        font-size: 13px;
        font-weight: bold;
        padding: 4px;
        border: 1px solid #ffffff;
    }

    .nomina-datagrid-footer * {
        color: #ffffff !important;
    }


/* ============================================================
   VARIANTE OSCURA: nomina_table_datagrid_oscuro
   ============================================================ */

#nomina_table_datagrid_oscuro {
    font-family: arial, sans-serif;
    font-size: 13px;
    border-collapse: collapse;
    width: 100%;
    background-color: #1e1e1e;
}

    #nomina_table_datagrid_oscuro td {
        font-weight: normal;
        border-width: 1px;
        font-size: 13px;
        border-color: #2d2d2d;
        border-style: solid;
        padding: 4px;
        color: #e0e0e0;
    }

    #nomina_table_datagrid_oscuro tr > th {
        background: #031754;
        color: #ffffff !important;
        text-align: left;
        font-weight: bold;
        font-size: 13px;
        padding: 4px;
        border: 1px solid #ffffff;
    }

    #nomina_table_datagrid_oscuro th .mud-icon-root {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    #nomina_table_datagrid_oscuro th .mud-input-slot,
    #nomina_table_datagrid_oscuro th .mud-input-slot::placeholder {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 12px;
    }

    #nomina_table_datagrid_oscuro th:hover {
        background: #ceffff;
        color: #000000 !important;
    }

        #nomina_table_datagrid_oscuro th:hover .mud-icon-root,
        #nomina_table_datagrid_oscuro th:hover .mud-input-slot,
        #nomina_table_datagrid_oscuro th:hover .mud-input-slot::placeholder {
            color: #000000 !important;
            fill: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }

    #nomina_table_datagrid_oscuro th .mud-input-underline:before {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    }

    #nomina_table_datagrid_oscuro tr:nth-child(even) {
        background-color: #2a2a2a;
    }

    #nomina_table_datagrid_oscuro tr:hover {
        background-color: #1a3a3a;
    }

    #nomina_table_datagrid_oscuro thead tr:first-child th {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        background: #031754 !important;
    }

    #nomina_table_datagrid_oscuro thead tr:last-child th {
        position: sticky !important;
        top: 28px !important;
        z-index: 2 !important;
        background: #031754 !important;
    }