:root {
  --dracBlue-dark: #383a59;
  --dracBlue: #303440;
  --dracYellow: #ffff80;
  --dracGreen: #8bff80;
  --dracPurple: #9580ff;
  --dracPurple-dark: #7970a9;
  --dracPink: #ff80bf;
  --dracPeach: #ff9580;
  --dracOrange: #ffc97f;
  --dracLightblue: #80ffea;
  --dracDarkestBlue: #21242b;
  --dracWhite: #f7f8f2;
  --dracGray: #707070;
  --azulLogo: #4073b8;
  --dracNav: #282a36;
  --dracRed: #ff5555;
}

.bg-img {
  background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(/img/logo/icono_planillas.svg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.modal-footer a {
  font-weight: normal !important;
}

.modal-footer a:hover {
  color: var(--dracWhite) !important;
  font-weight: bold !important;
}
.form-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.password-icon {
  float: right;
  position: relative;
  margin: -27px 10px 0 0;
  cursor: pointer;
}

.redondo {
  border-radius: 1.5rem;
}

.bg-login-image {
  background: url(/img/logo/Logo_planillas_blanco.svg);
  background-position: center;
  background-size: 20rem;
  background-repeat: no-repeat;
}

.table {
  --bs-table-striped-color: var(--dracWhite) !important;
}

.page-item.active .page-link {
  color: var(--dracWhite) !important;
  background-color: var(--dracBlues) !important;
  border-color: var(--dracBlues) !important;
}

.page-item.disabled .page-link {
  color: var(--dracGris) !important;
  pointer-events: none;
  cursor: auto;
  background-color: var(--dracWhite) !important;
  border-color: #dddfeb;
}

.table-responsive thead {
  background-color: var(--dracBlue) !important;
  position: sticky;
  top: 0;
  z-index: 10;
}

.scrooll {
  width: 100%;
  overflow-x: scroll;
  margin-bottom: 10px;
}

::-webkit-scrollbar {
  width: 0.4rem !important;
  height: 0.4rem !important;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #808096;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dracPurple);
}

div.dataTables_wrapper div.dataTables_filter input {
  color: black !important;
}

/* COLORES DE FONDO*/


.bg-dracdarkesblue {
  background-color: var(--dracDarkestBlue) !important;
}

.bg-dracpurpleDark {
  background-color: var(--dracPurple-dark) !important;
}

.bg-dracblue {
  background-color: var(--dracBlue) !important;
}

.bg-dracdark {
  background-color: var(--dracNav) !important;
}

.bg-azulLogo {
  background-color: var(--azulLogo) !important;
}

.bg-dracblueDark {
  background-color: var(--dracBlue-dark) !important;
}

.bg-dracgrey {
  background-color: var(--dracGray) !important;
}

.bg-dracpurple {
  background-color: var(--dracPurple) !important;
}

.bg-dracgreen{
  background-color: var(--dracGreen) !important;
}

.page-link {
  background-color: none !important;
}

/*COLORES DE TEXTO*/
.text-dracpurpleDark {
  color: var(--dracPurple-dark) !important;
}

.text-dracwhite {
  color: var(--dracWhite) !important;
}

.text-dracpurple {
  color: var(--dracPurple) !important;
}

.text-dracpurpledarck {
  color: var(--dracPurple-dark) !important;
}

.text-dracorange {
  color: var(--dracOrange) !important;
}

.text-dracpink {
  color: var(--dracPink) !important;
}

.text-dracgreen{
  color: var(--dracGreen) !important;
}

.text-black{
  color: black !important;
}

/*COLORES BOTONES*/
.btn-azulLogo {
  background-color: var(--azulLogo);
  color: var(--dracWhite);
}

.btn-dracgreen {
  background-color: var(--dracGreen);
  color: var(--dracDarkestBlue);
}


/* agregado */
.dropdown-menu {
    position: fixed !important;
    background-color: var(--dracBlue-dark) !important;
    z-index: 999999 !important; /* Z-index súper alto */
    border: 1px solid var(--dracPurple-dark) !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3) !important;
    color: var(--dracWhite) !important;
    min-width: 160px !important;
}

/* Items del dropdown */
.dropdown-item {
    color: var(--dracWhite) !important;
    padding: 1rem 2rem !important;
}

.dropdown-item:hover {
    background-color: var(--dracPurple) !important;
    color: var(--dracWhite) !important;
}

/* Contenedor dropdown */
.dropdown {
    position: relative !important;
    z-index: 999998 !important;
}

/* Cuando está activo, aún más alto */
.dropdown.show {
    z-index: 10000 !important;
}

.dropdown.show .dropdown-menu {
    z-index: 1000001 !important;
}

/*COLORES DE BORDES*/
.sidebar-link:hover {
  color: var(--dracWhite) !important;
  background: var(--dracPurple) !important;
}

.sidebar-link[aria-expanded="true"] {
  color: var(--dracWhite) !important;
  background: var(--dracPurple) !important;
}

.sidebar-item .collapse,
.sidebar-item .collapsing {
  border-left: 2px solid var(--dracPurple) !important;
  background: var(--dracNav) !important;
}

.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  background: var(--dracPurple) !important;
}

a:hover {
  color: var(--dracPurple) !important;
}
a {
  color: var(--dracWhite) !important;
  font-weight: bold !important;
}

.btn:hover {
  color: var(--dracWhite) !important;
}

.selectize-control.single .selectize-input.input-active,
.selectize-input {
  background: var(--dracBlue) !important;
  color: var(--dracWhite) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 1rem !important;
}

.selectize-dropdown,
.selectize-input,
.selectize-input input {
  font-size: 1rem !important;
}

.selectize-dropdown .selected {
  background-color: var(--dracPurple) !important;
  color: var(--dracWhite) !important;
}

.selectize-dropdown,
.selectize-input,
.selectize-input input {
  color: var(--dracWhite) !important;
  font-size: 1rem !important;
}

.swal2-input {
  color: var(--dracOrange) !important;
  font-weight: bold !important;
  border: 1px solid var(--dracWhite) !important;
}

.swal2-popup {
  background: var(--dracBlue-dark) !important;
  color: var(--dracPurple) !important;
  font-weight: bold !important;
}

.swal2-html-container {
  color: var(--dracWhite) !important;
  font-weight: bold !important;
}

.swal2-styled.swal2-confirm {
  background: var(--dracGreen) !important;
  color: #000 !important;
  font-weight: bold !important;
}

.swal2-styled.swal2-deny {
  background: var(--dracRed) !important;
  color: #000 !important;
  font-weight: bold !important;
}

.swal2-icon.swal2-info {
  color: var(--dracLightblue) !important;
}

.swal2-icon.swal2-success {
  border-color: #a5dc86 !important;
  color: var(--dracGreen) !important;
  font-weight: bold !important;
}

.swal2-styled.swal2-cancel {
  color: #000 !important;
  background-color: var(--dracRed) !important;
  font-weight: bold !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--dracOrange) !important;
  color: var(--dracPeach) !important;
}

.swal2-icon.swal2-error {
  color: var(--dracRed) !important;
}

.swal2-title {
  font-weight: bold !important;
  color: var(--dracPink) !important;
}

/* Style the tab */
.tab {
  overflow: hidden;
  background-color: var(--dracBlue);
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: var(--dracBlue-dark);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  color: var(--dracWhite);
  border: 1px solid var(--dracBlue-dark);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--dracPurple);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--dracPurple-dark);
  color: var(--dracWhite);
  font-weight: bold;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
}

.small-line {
  height: 3px;
  width: 300px;
  margin: 0 auto;
  background-color: black;
  color: black;
}

.text-tamano{
  font-size: 14px;
}


.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.loading-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fila-seleccionada {
  background-color: var(--azulLogo) !important; /* Puedes ajustar el color según tus preferencias */
}

/*
 * ===================================================================
 * CÓDIGO OPTIMIZADO PARA FIJAR FILA DE ENCABEZADO Y COLUMNAS
 * ===================================================================
 */

.tabcontent .table-responsive {
    overflow: auto; 
    max-height: 65vh; 
}

.tabcontent .table-responsive thead th {
    position: -webkit-sticky; 
    position: sticky;
    top: 0;
    z-index: 2; 
    background-color: var(--dracPurple-dark); 
}

.tabcontent .table-responsive tfoot th {
    position: -webkit-sticky; 
    position: sticky;
    bottom: 0;
    z-index: 2; 
    background-color: #3a3f51; 
}

/*
 * ===================================================================
 * 4. ANCHOS DE COLUMNA Y REGLAS STICKY (MEJORADO v2)
 * ===================================================================
 */

/* --- Planilla Confidencial y General --- */

/* Anchos fijos para cabeceras (TH) */
#planillaConfidencialTable thead th:nth-child(1),
#planillaGeneralTable thead th:nth-child(1) { width: 110px; min-width: 110px; } /* No. Empleado */

#planillaConfidencialTable thead th:nth-child(2),
#planillaGeneralTable thead th:nth-child(2) { width: 160px; min-width: 160px; } /* Identidad */

#planillaConfidencialTable thead th:nth-child(3),
#planillaGeneralTable thead th:nth-child(3) { width: 250px; min-width: 250px; } /* Nombre Completo */

#planillaConfidencialTable thead th:nth-child(4),
#planillaGeneralTable thead th:nth-child(4) { width: 150px; min-width: 150px; } /* Area */

#planillaConfidencialTable thead th:nth-child(5),
#planillaGeneralTable thead th:nth-child(5) { width: 140px; min-width: 140px; } /* Fecha de ingreso */

#planillaConfidencialTable thead th:nth-child(6),
#planillaGeneralTable thead th:nth-child(6) { width: 140px; min-width: 140px; } /* Cuenta Bancaria */

#planillaConfidencialTable thead th:nth-child(7),
#planillaGeneralTable thead th:nth-child(7) { width: 140px; min-width: 140px; } /* Fecha Nacimiento */

#planillaConfidencialTable thead th:nth-child(8),
#planillaGeneralTable thead th:nth-child(8) { width: 140px; min-width: 140px; } /* Ciudad */

#planillaConfidencialTable thead th:nth-child(9),
#planillaGeneralTable thead th:nth-child(9) { width: 130px; min-width: 130px; } /* Sueldo Mensual */

#planillaConfidencialTable thead th:nth-child(10),
#planillaGeneralTable thead th:nth-child(10) { width: 120px; min-width: 120px; } /* Sueldo Diario */

#planillaConfidencialTable thead th:nth-child(11),
#planillaGeneralTable thead th:nth-child(11) { width: 90px; min-width: 90px; } /* Dias */

#planillaConfidencialTable thead th:nth-child(12),
#planillaGeneralTable thead th:nth-child(12) { width: 90px; min-width: 90px; } /* Dias Faltados */

#planillaConfidencialTable thead th:nth-child(13),
#planillaGeneralTable thead th:nth-child(13) { width: 90px; min-width: 90px; } /* Dias Extras */

#planillaConfidencialTable thead th:nth-child(14),
#planillaGeneralTable thead th:nth-child(14) { width: 140px; min-width: 140px; } /* Sueldo Quincenal */

#planillaConfidencialTable thead th:nth-child(15),
#planillaGeneralTable thead th:nth-child(15) { width: 100px; min-width: 100px; } /* Horas Extras LPS */

/* --- Horas Extras --- */

#horasExtrasTable thead th:nth-child(1) { width: 110px; min-width: 110px; } /* No. Empleado */
#horasExtrasTable thead th:nth-child(2) { width: 250px; min-width: 250px; } /* Nombre Completo */
#horasExtrasTable thead th:nth-child(3) { width: 100px; min-width: 100px; } /* Jornada */
#horasExtrasTable thead th:nth-child(4) { width: 130px; min-width: 130px; } /* Sueldo Mensual */
#horasExtrasTable thead th:nth-child(5) { width: 120px; min-width: 120px; } /* Sueldo Diario */

/*
 * REGLAS STICKY (BASADAS EN LOS ANCHOS DE ARRIBA)
 */

/* Col 1 (Todas) */
#planillaConfidencialTable th:nth-child(1), #planillaConfidencialTable td:nth-child(1), #planillaConfidencialTable tfoot th:nth-child(1),
#planillaGeneralTable th:nth-child(1), #planillaGeneralTable td:nth-child(1), #planillaGeneralTable tfoot th:nth-child(1),
#horasExtrasTable th:nth-child(1), #horasExtrasTable td:nth-child(1), #horasExtrasTable tfoot th:nth-child(1) {
    position: -webkit-sticky; position: sticky; left: 0; z-index: 3; 
}

/* Col 2 (Planillas) */
#planillaConfidencialTable th:nth-child(2), #planillaConfidencialTable td:nth-child(2), #planillaConfidencialTable tfoot th:nth-child(2),
#planillaGeneralTable th:nth-child(2), #planillaGeneralTable td:nth-child(2), #planillaGeneralTable tfoot th:nth-child(2) {
    position: -webkit-sticky; position: sticky; left: 110px; z-index: 3; /* Offset = Col 1 */
}

/* Col 3 (Planillas) */
#planillaConfidencialTable th:nth-child(3), #planillaConfidencialTable td:nth-child(3), #planillaConfidencialTable tfoot th:nth-child(3),
#planillaGeneralTable th:nth-child(3), #planillaGeneralTable td:nth-child(3), #planillaGeneralTable tfoot th:nth-child(3) {
    position: -webkit-sticky; position: sticky; left: 270px; z-index: 3; /* Offset = Col 1 + 2 (110+160) */
}

/* Col 2 (Horas Extras) */
#horasExtrasTable th:nth-child(2), #horasExtrasTable td:nth-child(2), #horasExtrasTable tfoot th:nth-control {
    position: -webkit-sticky; position: sticky; left: 110px; z-index: 3; /* Offset = Col 1 */
}

#planillaConfidencialTable thead th:nth-child(-n+3),
#planillaGeneralTable thead th:nth-child(-n+3),
#horasExtrasTable thead th:nth-child(-n+2),
#planillaConfidencialTable tfoot th:nth-child(-n+3),
#planillaGeneralTable tfoot th:nth-child(-n+3),
#horasExtrasTable tfoot th:nth-child(-n+2) {
    z-index: 4; 
}


#planillaConfidencialTable_wrapper,
#planillaGeneralTable_wrapper,
#horasExtrasTable_wrapper,
#planillaConfidencialTable_wrapper .row:nth-child(2),
#planillaGeneralTable_wrapper .row:nth-child(2),
#horasExtrasTable_wrapper .row:nth-child(2) {
    overflow: visible;
    max-height: none;
}

.tabcontent .dataTables_paginate,
.tabcontent .dataTables_info,
.tabcontent .dataTables_length {
    display: none !important;
}

/*
 * FIX PARA CONTROLES DE DATATABLES 
 */

.dataTables_wrapper .row:nth-child(1) {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 10px 5px;
}
.dataTables_wrapper .row:last-child {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 15px 5px 10px 5px; 
}

div.dataTables_length label,
div.dataTables_info,
div.dataTables_filter label {
    color: var(--dracWhite) !important;
    font-weight: bold !important;
    margin-bottom: 0; 
}


div.dataTables_length label select {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 8px;
  margin: 0 8px;
  width: auto;
}

div.dataTables_filter label input[type="search"] {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    margin-left: 5px;
    width: 250px; 
}

.pagination .page-item .page-link {
    color: var(--dracWhite) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin: 0 2px;
    border-radius: 4px;
}
.pagination .page-item.active .page-link {
    background-color: var(--dracWhite) !important;
    color: var(--dracBlue-dark) !important;
    border-color: var(--dracWhite) !important;
    z-index: 2;
}
.pagination .page-item.disabled .page-link {
    color: var(--dracGray) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.pagination .page-item:not(.disabled) .page-link:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.tabcontent .dataTables_wrapper .row:first-child {
     justify-content: flex-end; 
     padding-bottom: 15px; 
}
.tabcontent .dataTables_filter {
    text-align: right;
    width: 100%;
}
.tabcontent .dataTables_paginate,
.tabcontent .dataTables_info,
.tabcontent .dataTables_length {
    display: none !important;
}

/*
 * ===================================================================
 * TEMA CLARO PARA TABLAS DE PLANILLA
 * ===================================================================
 */

/* Fondo de tabla y texto por defecto */
.tabcontent .table {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

/* Celdas del cuerpo y bordes generales */
.tabcontent .table-responsive tbody td,
.tabcontent .table-responsive thead th,
.tabcontent .table-responsive tfoot th {
    color: #000000 !important;
    border-color: #DCDCDC !important; 
    vertical-align: middle;
}

/* Inputs fondo blanco y texto negro */
.tabcontent .table .form-control.bg-dracblue.text-white {
    background-color: #FDFDFD !important;
    color: #000000 !important;
    border: 1px solid #CCCCCC;
}
.tabcontent .table .form-control.bg-dracblue.text-white:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}


/* Cabecera (thead): Fondo gris claro, bordes */
.tabcontent .table-responsive thead th {
    background-color: #EFEFEF !important; 
    border-bottom: 2px solid #000000 !important; 
}

/* Pie de tabla (tfoot): Fondo gris claro, bordes */
.tabcontent .table-responsive tfoot th {
    background-color: #F5F5F5 !important;
    font-weight: bold;
    border-top: 2px solid #000000 !important; 
}

/* Sobreescribir el fondo de las columnas fijas (sticky) */
#planillaConfidencialTable tbody td:nth-child(-n+3),
#planillaGeneralTable tbody td:nth-child(-n+3),
#horasExtrasTable tbody td:nth-child(-n+2) {
    background-color: #FFFFFF !important; 
}


.tabcontent .table-responsive thead th:nth-child(-n+3),  
.tabcontent .table-responsive thead th:nth-child(-n+2) {  
    background-color: #EFEFEF !important; 
}
.tabcontent .table-responsive tfoot th:nth-child(-n+3),
.tabcontent .table-responsive tfoot th:nth-child(-n+2) {
    background-color: #F5F5F5 !important; 
}

/*
 * ===================================================================
 * COLORES Y BORDES DE SECCION 
 * ===================================================================
 */

/* -- INGRESOS -- */
.tabcontent .table-responsive thead th.th-ingreso {
  background-color: #E6F7E6 !important; 
}

.tabcontent .table-responsive thead th.th-ingreso:nth-child(-n+100) {
  background-color: #E6F7E6 !important;
}


/* -- DEDUCCIONES -- */
.tabcontent .table-responsive thead th.th-deduccion {
  background-color: #FEEEEE !important; 
}

.tabcontent .table-responsive thead th.th-deduccion:nth-child(-n+100) {
  background-color: #FEEEEE !important;
}

/* -- TOTAL A PAGAR (Azul) -- */
.tabcontent .table-responsive thead th.th-total-pagar {
  background-color: #E6F0FF !important;
}
.tabcontent .table-responsive thead th.th-total-pagar:nth-child(-n+100) {
  background-color: #E6F0FF !important;
}


/* -- BORDE DE SECCION-- */
/* Borde para la última columna de Salario Base */
#planillaConfidencialTable thead th:nth-child(15),
#planillaGeneralTable thead th:nth-child(15) {
  border-right: 2px solid #000000 !important;
}

/* Borde para las columnas de Totales */
.tabcontent .table-responsive thead th.th-borde-seccion {
  border-left: 2px solid #000000 !important;
}

/*
 * 
 * ESTILO PARA FILAS DE TEGUCIGALPA
 * 
 */
.tabcontent .table tbody td.fila-tegucigalpa {
    background-color: #E0E0E0 !important; 
    font-weight: bold;
}

#planillaConfidencialTable tbody td.fila-tegucigalpa:nth-child(-n+3),
#planillaGeneralTable tbody td.fila-tegucigalpa:nth-child(-n+3),
#horasExtrasTable tbody td.fila-tegucigalpa:nth-child(-n+2) {
    background-color: #E0E0E0 !important; 
    font-weight: bold;
}