:root {
    --white-color: #FFFFFF;
    --black-color: #000000;
    --dark-grey-color: #515151;
    --dark-blue-color: #03396C;
    
    --lime-color: #00FF00;
    --green-yellow-color: #ADFF2F;
    --crimson-color: #DC143C;
    --charcoal-color: #36454F;
    --charcoal-blue-color: #67778A;
    --darkcyan-color: #008080;
    --steelblue-color: #4682B4;
    --charcoal-transparent-color: rgb(54, 69, 79, 0.5);
}

/* ********************* */
/* ELEMENTOS PRINCIPALES */
/* ********************* */

html {
    /*position: relative;*/
    font-size: 14px;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    /*
        width: 100%;
        position: relative;

    */
    margin-top: 4.5rem;
    margin-bottom: 0.5rem;
}

main {
    max-height: 80vh; /* Establece la altura máxima al 80% de la altura de la ventana */
    overflow-y: auto; /* Agrega un scrollbar vertical cuando el contenido excede la altura máxima */
    overflow-x: hidden;
    margin: 4.6rem 0.25rem 0 0.25rem;
    padding: 0.25rem; /* Añade relleno al contenido del main */
    /*   
        background: red;
        SOLO PARA PRUEBAS
    */
}

/* Para pantallas grandes (monitor de escritorio grande) */
@media (min-width: 1600px) {
    main {
        max-height: 90vh;
    }
}

/* Para pantallas medianas (laptops) */
@media (max-width: 1599px) {
    main {
        max-height: 80vh;
    }
}

header {
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    /*height: 55px;*/
    background-color: rgb(10, 66, 117, 0.95);
    /*background-color: red; SOLO PARA PRUEBAS */
}

/* ***************************** */
/* TAMAÑOS DE FUENTE ADICIONALES */
/* ***************************** */
.fs-65 {
    font-size: 0.875rem !important;
}

.fs-7 {
    font-size: 0.75rem !important;
}

.fs-75 {
    font-size: 0.625rem !important;
}

.fs-8 {
    font-size: 0.50rem !important;
}

/* ********** */
/* TEXTO BOLD */
/* ********** */
.bolded {
    font-weight: bold;
}

/* Icon colors */
.front-color {
    color: #4169E1 !important;
}

/* ******************************** */
/* COLORES DE LOS DISTINTOS STANGES */
/* ******************************** */
.color-stage-icon {
    color: #FF8C00 !important;
}

.color-in-process {
    color: #87CEEB !important;
}

.color-applied {
    color: #4169E1 !important;
}

.color-disqualified, .color-discarded {
    color: #CD5C5C !important;
}

.color-seltohired {
    color: #FFD700 !important;
}

.color-seltohired-dark {
    color: #E5C100 !important;
}

.color-hired {
    color: #9ACD32 !important;
}

.color-under-review {
    color: #2F4F4F !important;
}

.color-batch-sent {
    color: #1E90FF !important;
}

.color-batch-approved {
    color: #9ACD32 !important;
}

.color-batch-auto-approved {
    color: #F54927 !important;
}

.color-candidate-in-batch {
    color: #FFA07A !important;
}

.color-cloned {
    color: #DC143C !important;
}

.color-ai-candidate {
    color: #20B2AA !important;
}

/* ***************** */
/* COLORES GENERALES */
/* ***************** */
.color-chartreuse {
    color: #7FFF00 !important;
}

.color-cornsilk {
    color: #FFF8DC !important;
}

.color-darkorange {
    color: #FF8C00 !important;
}

.color-darkviolet {
    color: #9400D3 !important;
}

.color-deepskyblue {
    color: #00BFFF !important;
}

.color-dodgerblue {
    color: #1E90FF !important;
}

.color-firebrick {
    color: #B22222 !important;
}

.color-gold {
    color: #FFD700 !important;
}

.color-lime {
    color: #00FF00 !important;
}

.color-lightseagreen {
    color: #20B2AA !important;
}

.color-navy {
    color: #000080 !important;
}

.color-orange {
    color: #FFA500 !important;
}

.color-orangered {
    color: #FF4500 !important;
}

.color-red {
    color: #FF0000 !important;
}

.color-royalblue {
    color: #4169E1 !important;
}

.color-skyblue {
    color: #87CEEB !important;
}

.color-snow-white {
    color: #FFFAFA !important;
}

.color-springgreen {
    color: #00FF7F !important;
}

.color-steelblue {
    color: #4682B4 !important;
}

.color-turquoise {
    color: #40E0D0 !important;
}

.color-yellow {
    color: #FFFF00 !important;
}

.color-sticky {
    color: #FFFF88 !important;
}

/* **************************** */
/* BACKGROUND COLORS POR STAGES */
/* **************************** */
.color-bg-in-process {
    color: #F5F5F5 !important;
    background: #79b9d3 !important;
}

.color-bg-applied, .color-bg-open {
    color: #fff !important;
    background: #4169E1 !important;
}

.color-bg-disqualified, .color-bg-discarded {
    color: #fff !important;
    background: #CD5C5C !important;
}

.color-bg-seltohired {
    color: #696969 !important;
    background: #FFD700 !important;
}

.color-bg-seltohired-dark {
    color: #545454 !important;
    background: #E5C100 !important;
}

.color-bg-hired, .color-bg-completed {
    color: #F8F8FF !important;
    background: #9ACD32 !important;
}

.color-bg-under-review {
    color: #fff !important;
    background: #2F4F4F !important;
}

.color-bg-must-have {
    color: #FFFAFA !important;
    background: #7ED958 !important;
}

.color-bg-great-have {
    color: #FFFAFA !important;
    background: #38B6FF !important;
}

.color-bg-batch-sent {
    color: #FFFAFA !important;
    background: #1E90FF !important;
}

.color-bg-batch-approved {
    color: #FFFAFA !important;
    background: #9ACD32 !important;
}

/* ***************** */
/* COLORES GENERALES */
/* ***************** */
.color-bg-sticky {
    background: #FFFF88 !important;
    border: 1px solid #F4F299;
    color: #aaa96b;
}

.color-bg-warning {
    color: #fff;
    background: rgba(220, 20, 60, 0.1) !important;
}

.color-bg-aquamarine {
    background: #7FFFD4 !important;
}

.color-bg-roblox {
    background: #f3fbd2 !important;
}

.color-bg-blue {
    background: #5178D0 !important;
}

.color-bg-dodgerblue {
    background: #1E90FF !important;
}

.color-bg-fire-brick {
    background: #B22222 !important;
}

.color-bg-gold {
    background: #FFD700 !important;
}

.color-bg-green {
    background: #57d357 !important;
}

.color-bg-green-yellow {
    background: #ADFF2F !important;
}

.color-bg-grey {
    background: #CCCCCC !important;
}

.color-bg-indigo {
    color: #fff;
    background: #4B0082 !important;
}

.color-bg-lavander {
    background: #E6E6FA !important;
}

.color-bg-orange {
    background: #FFA500 !important;
}

.color-bg-red {
    background: red !important;
}

.color-bg-cornflowerblue {
    color: azure !important;
    background: #6495ED !important;
}

.color-bg-steel-blue {
    background: #4682B4 !important;
}

.color-bg-navy {
    background: #000080 !important;
}

.color-bg-snow {
    background: #FFFAFA !important;
}

.color-bg-turquoise {
    background: #40E0D0 !important;
}

.color-bg-yellow {
    background: #FFFF00 !important;
}

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

.color-bg-charcoal-transparent {
    color: snow; 
    background: var(--charcoal-transparent-color) !important;
}

/* Loading mientras carga la tabla */
.loading-index {
    /*display: none;*/
    display: flex;
    position: fixed; /* fixed para toda la pantalla */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 20px;
    color: #23478B;
    text-shadow: 0px 0px 5px #0155E1;
}

.loading-bg-text {
    background: rgba(245, 245, 245, 0.9);
    border-radius: 8px;
    padding: 0px 10px;
    line-height: 1;
}

/* *************************** */
/* VENTANA MENSAJE SUPERPUESTO */
/* *************************** */
.loading-overlay {
    position: fixed; /* Fija la posición en toda la ventana */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 35%; /* Ajusta el ancho del overlay */
    height: 10%; /* Ajusta la altura del overlay */
    margin: auto; /* Centra horizontal y verticalmente */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* OVERLAY PAGE */
.overlay-page {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.75rem;
    color: rgba(204, 255, 0, 0.5);
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    text-shadow: 0px 0px 10px #FFFFCC;
    z-index: 10000; /* Asegurarse de que esté por encima del contenido */
}

.overlay-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.505rem;
    color: #23478B;
    background: rgba(245,245,245,0.7);
    backdrop-filter: blur(2px);
    text-shadow: 0px 0px 5px #0155E1;
    z-index: 1055;
}

    .overlay-modal.active {
        display: flex; /* 👈 Solo cuando queramos mostrarlo */
    }


#email-warning-dropdown select {
    border-color: #dc3545;
    background-color: #fff5f5;
}

#email-warning-dropdown option:first-child {
    font-weight: 600;
    color: #6c757d;
}

/* ********************** */
/* COLOR DE FONDO DEL DIV */
/* ********************** */
div.color-bg-green-yellow {
    color: var(--white-color) !important;
}

div.color-bg-fire-brick {
    color: var(--white-color) !important;
}

div.color-bg-gold {
    color: var(--white-color) !important;
}

div.color-bg-steel-blue {
    color: var(--white-color) !important;
}

div.color-bg-snow {
    color: var(--black-color) !important;
}

/* Estilos personalizados */
.div-main-container, .div-form-index, .div-form-create, .div-form-edit, .div-form-delete, .div-form-detail, div-base {
    /*min-height: 84vh;*/
    position: relative;
    width: 99.5%;
    min-height: 83vh;
    border-style: solid;
    border-radius: 15px;
    border-color: #5DADE2;
    border-width: thin;
    margin: 0.25rem;
    /* 
        SOLO PARA PRUEBAS
        background: yellow;
    */
    background-color: #FFFFFF;
}

.div-form-dashboard {
    position: relative;
    min-height: 85vh;
    overflow-x: hidden;
    border-radius: 15px;
    background-color: #001F32;
}

.div-form-edit-md {
    width: 65%;
    color: whitesmoke;
    position: relative;
    border-style: solid;
    border-radius: 15px;
    border-color: #5DADE2;
    border-width: thin;
    margin: 0.25rem 15px 0.5rem 15px;
    padding: 10px;
    background-color: rgb(54, 69, 79, 0.75);
}

.divFrmPassword {
}

.div-form-create-modal, .div-form-edit-modal, .div-form-delete-modal, .div-form-detail-modal {
    background-color: whitesmoke;
}

.div-container-green {
    position: relative;
    border-style: solid;
    border-radius: 15px;
    border-color: lightgray;
    border-width: thin;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-top: 10px;
    /*padding-bottom: 5px;*/
    width: 100%;
    background-color: rgba(115, 198, 182, 0.50);
    /*background-color: white;*/
}

.div-container-transparent {
    border-radius: 15px;
    /*
        border-style: solid;
        border-color: lightgray;
        border-width: thin;
    */
    position: relative;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-top: 10px;
    /*padding-bottom: 5px;*/
    width: 100%;
    height: 85vh;
    background-image: linear-gradient(to bottom, #242e39, #3c4958, #566679, #71859c, #8da5c0);
    /*
        background-color: rgba(115, 198, 182, 0.50);
    */
}

.div-tab-content {
    position: relative;
    border-radius: 0px 0px 15px 15px;
    border-left-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-color: lightgray;
    border-width: thin;
    margin-bottom: 35px;
    /*padding-bottom: 5px;*/
    width: 100%;
    background-color: white;
}

/* *********************************** */
/* BORDE PERSONALIZADO PARA CHECKBOXES */
/* *********************************** */
.form-check-input {
    border: var(--bs-border-width) solid #6F7173 !important;
}

/* *********************************************************** */
/* COLORES DE FONDO PARA INPUTS DE SOLO LECTURA Y DESACTIVADOS */
/* *********************************************************** */
.input-disabled-bgcolor {
    background-color: #CDE2EE !important;
}

.input-readonly-bgcolor {
    background-color: #E9ECEF !important;
    /* Evitar que se pueda seleccionar */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default; /* Cambia el cursor a "default" (no texto) */
}

.homeTab, .nextTab {
    position: relative;
    width: 100%;
    padding-top: 10px;
    background-color: white;
}

.nav-submenu-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin-left: 50px;
}

/* **************************** */
/* ESTILOS PARA TABLAS NORMALES */
/* **************************** */
.table-container {
    height: calc(100vh - 240px); /* Ajusta la altura */
    overflow: auto;
}

.table-head-sm, .table-foot-sm {
    --bs-table-color: initial;
    --bs-table-bg: var(--dark-blue-color);
    color: var(--white-color) !important;
    font-size: 12px;
    text-align: center;
    vertical-align: middle !important;
}

.table-head-md, .table-foot-md {
    --bs-table-color: initial;
    --bs-table-bg: var(--dark-blue-color);
    color: var(--white-color) !important;
    font-size: 14px;
    text-align: center;
    vertical-align: middle !important;
}

.table-head-sm.table-charcoal {
    --bs-table-color: initial;
    --bs-table-bg: var(--charcoal-color);
    color: var(--white-color) !important;
}

.table-head-sm.table-darkcyan {
    --bs-table-color: initial;
    --bs-table-bg: var(--darkcyan-color);
    color: var(--white-color) !important;
 }

.table-head-sm.table-steelblue {
    --bs-table-color: initial;
    --bs-table-bg: var(--steelblue-color);
    color: var(--white-color) !important;
}

.table-head-md.table-charcoal {
    --bs-table-color: initial;
    --bs-table-bg: var(--charcoal-color);
    color: var(--white-color) !important;
}

.table-head-md.table-darkcyan {
    --bs-table-color: initial;
    --bs-table-bg: var(--darkcyan-color);
    color: var(--white-color) !important;
 }

.table-head-md.table-steelblue {
    --bs-table-color: initial;
    --bs-table-bg: var(--steelblue-color);
    color: var(--white-color) !important;
}

.table-body-sm {
    font-size: 12px;
}

.table-body-md {
    font-size: 14px;
}

.table-container {
    position: relative;
}

.fixed-header {
    position: sticky;
    top: 0;
    background-color: white; /* Fondo sólido para evitar transparencias */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para efecto de separación */
    z-index: 1020;
}

/* ************************ */
/* Estilos para Data Tables */
/* ************************ */
/*
#dataTableInsights {
    --bs-table-bg: rgb(240, 255, 255);
    border-radius: 8px !important;
}
*/

.datatable-head-sm {
    font-size: 12px;
    /*text-align: center;*/
    color: whitesmoke;
    background-color: var(--dark-blue-color) !important;
}

.datatable-head-md {
    font-size: 14px;
    color: whitesmoke;
    background-color: var(--dark-blue-color) !important;
}

.datatable-body-sm {
    font-size: 12px;
}

.datatable-body-md {
    font-size: 14px;
}

.datatable-foot-sm {
    color: white;
    background-color: var(--dark-blue-color) !important;
    font-size: 12px;
}

.datatable-foot-md {
    color: white;
    background-color: var(--dark-blue-color) !important;
    font-size: 14px;
}

.th-transparent-full {
    background-color: rgba(255, 255, 255, 0.99);
}

.th-border-cell-left {
    /*border-left: thin solid #b3cde0;*/
    border-left: thin outset #b3cde0;
}
.th-border-cell-right {
    /*border-right: thin solid #b3cde0;*/
    border-right: thin outset #b3cde0;
}

.th-col-span-md {
    border-radius: 5px 5px 0 0;
    font-size: 16px;
}

.th-col-span-sm {
    border-radius: 5px 5px 0 0;
    font-size: 14px;
}

/* ******************************************** */
/* TEXTO SEMI VERTICAL PARA ENCABEZADO DE TABLA */
/* ******************************************** */
th.vertical-text {
    transform: rotate(90deg);
    border-bottom: 0 !important;
}

.row-switches {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* ******************** */
/* ETIQUETAS PARA DIV */
/* ******************** */
div.stickyLabel {
    border-style: solid;
    border-radius: 15px;
    border-color: lightgray;
    border-width: thin;
    position: -webkit-sticky;
    position: sticky;
    top: 85px;
    background-color: rgba(118, 215, 196);
    padding: 10px;
}

.div-label {
    border-style: solid;
    border-radius: 15px;
    border-color: lightgray;
    border-width: thin;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    /*background-color: rgba(128, 139, 150, 0.50);*/
    background-color: whitesmoke;
}

/* ********************** */
/* ESTILOS PARA DROPDOWNS */
/* ********************** */
.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* ******************** */
/* PARA SUBTITULOS <h5> */
/* ******************** */
.subtitle-section {
    margin: 0.6em 0 0.2em 0;
    font-weight: 600;
}

.orange-separator{
    border-color: orangered;
    border-width: 4px;
    margin-top: 0.25em;
}

/* ***************** */
/* SEPARADORES <hr> */
/* ***************** */
.hr-subtitle{
    margin-top: 0.25em;
}

.blue-separator {
    border-color: #005b96;
    border-width: 4px;
    margin-top: 0.25em;
}

.blue-thin-separator {
    border-color: #005b96;
    border-width: 2px;
    margin: 0.25em 0 0.25em 0;
}

.section-separator{
    border-color: snow;
    margin: 0.2rem 0 0.6rem 0;
}

.form-subtitle{
    margin-top: 15px;
}

.canvas-header-color {
    color: rgb(173, 255, 47, 0.75) !important;
}

/* Estilos de canvas */
.canvas-text-title {
    color: rgba(173, 255, 47, 0.75) !important;
    font-size: large;
    font-weight: 600;
}

.canvas-icon-color {
    color: #C0C0C0;
}
    .canvas-icon-color:hover {
        color: #FF1493; /* Deep pink */
    }

.canvas-bg-color {
    background-color: rgb(54, 69, 79, 0.9) !important;
}

/* ******* */
/* BOTONES */
/* ******* */
.btn-outline-orange {
    color: #FF8C00;
    border-color: #FF4500;
}

    .btn-outline-orange:hover {
        color: #fff;
        background-color: #FF8C00;
        border-color: #FF4500;
    }

.btn-outline-orange:disabled, .btn-outline-orange.disabled {
    color: #FF8C00;
    background-color: transparent;
}

.btn-circle-border {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    padding: 0; /* Elimina padding interno */

    --bs-btn-border-color: #999999;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #0D6EFD; /* Azul */
    /*--bs-btn-hover-border-color: #0d6efd;*/
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: #0D6EFD; /*Azul*/
    --bs-btn-active-border-color: #0D6EFD;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0D6EFD;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0D6EFD;
    --bs-gradient: none;
}

.btn-circle-grid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    --bs-btn-color: #1E90FF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(13,110,253, 0.7);
    /* Este propiedad muestra el borde del boton */
    /* 
    --bs-btn-border-color: #0d6efd;
    */
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0D6EFD;
    --bs-btn-active-border-color: #0D6EFD;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0D6EFD;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0D6EFD;
    --bs-gradient: none;
}

    .btn-circle-grid.hover-white {
        --bs-btn-hover-bg: rgb(245, 245, 245, 0.6);
        --bs-btn-active-bg: #E5E1E1;
        --bs-btn-active-border-color: #E5E1E1;
    }

.btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    width: 30px;
    height: 30px;
    padding: 6px 0;
    line-height: 1.428571429;
    border-radius: 15px;
}

    .btn-circle.btn-lg {
        width: 50px;
        height: 50px;
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 25px;
    }

    .btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        font-size: 24px;
        line-height: 1.33;
        border-radius: 35px;
    }

/* Span Cuadrado de colores */
/* Clase base para elementos de color */
.color-label {
    display: inline-grid;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border-radius: 0.3em; /* Valor por defecto para elementos cuadrados */
    box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.55);
}

/* Modificador para elementos cuadrados pequeños */
.sqr {
    width: 2.8em;
    height: 2.2em;
}
/* Modificador para elementos cuadrados grandes */
.sqr-lg {
    width: 4.6em;
    height: 2.2em;
}

/* Modificador para elementos circulares */
.cir {
    width: 2.8em;
    height: 2.8em;
    border-radius: 50%;
}

/* Modificador para elementos circulares grandes */
.cir-lg {
    width: 4.6em;
    height: 4.6em;
    border-radius: 50%;
}

/* Span personalizado */
span.color-bg-green, span.color-bg-red, span.color-bg-fire-brick, span.color-bg-blue, span.color-bg-steel-blue,
span.color-bg-orange, span.color-bg-indigo {
    color: var(--white-color);
}

span.color-bg-green-yellow, span.color-bg-gold, span.color-bg-turquoise {
    color: var(--black-color);
}

span.color-bg-grey, span.color-bg-lavander {
    color: var(--dark-grey-color);
}

/* ************************************* */
/* ESTILO BASE DE LA ETIQUETA <progress> */
/* ************************************* */
progress {
    width: 100%;
    height: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    appearance: none; /* Elimina el estilo predeterminado del navegador */
}

/* Estilo para cambiar el color del avance (barra) */
progress::-webkit-progress-value {
    background-color: var(--progress-color, #4CAF50); /* Valor por defecto: verde */
}

progress::-moz-progress-bar {
    background-color: var(--progress-color, #4CAF50); /* Valor por defecto: verde */
}

/* Estilo para cambiar el color del fondo de la barra no progresada */
progress::-webkit-progress-bar {
    background-color: #ddd; /* Color de fondo de la barra no progresada (WebKit/Blink browsers) */
}

progress::-moz-progress-bar {
    background-color: #ddd; /* Color de fondo de la barra no progresada (Firefox) */
}

/* Para subir un archivo personalizado */
.custom-file-upload {
    width: 100%;
    background: #e3e3e3;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

/* ******************************************** */
/* SIMULAR UN CONTROL INPUT EN UNA ETIQUETA <a> */
/* ******************************************** */
.input-like-link {
    font-size: 12px;
    display: inline-block;
    position: relative;
}

/* Dibujar la caja del control */
.input-like-link a {
    align-content: baseline;
    display: block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background-color: #e8f2e4;
}

/* Color cuando se posiciona encima el mouse */
.input-like-link a:hover {
    background-color: #cde2ee;
}

/* Para hacer que parezca un input cuando está enfocado */
.input-like-link a:focus {
    outline: none;
    border-color: #4d90fe;
    box-shadow: 0 0 5px rgba(77, 144, 254, 0.5);
}

/* Marcar el link como visitado */
/*.input-like-link a:focus::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid #4d90fe;
    border-radius: 4px;
    pointer-events: none;
}*/

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

    .toggle-password i {
        color: #888;
    }

    .toggle-password.active i {
        color: #333;
    }

.pic-shadow {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6); /* Ajusta los valores según tu preferencia */
}

/* Estilo para div para graficos */
.chart-container {
    /* background-color: dimgrey; /* Fondo oscuro */
    background-color: #123141;  /* Fondo oscuro */
    border-top: 4px solid #3B7EA8; /* Borde oscuro */
    border-radius: 10px; /* Bordes redondeados */
    color: #ffffff; /* Texto blanco */
    padding: 10px; /* Espaciado interno */
    margin: 15px 5px; /* Espaciado externo */
    text-align: center; /* Centrar el texto */
}

    .chart-container.dialog {
        width: 20vw;
        height: 20vh;
        /*background: #0F52BA;*/
    }

    .chart-container.gauge {
        width: 25vw;
        height: 35vh;
    }

    .chart-container.funnel {
        width: 30vw;
        height: 65vh;
    }

    .chart-container.pie{
        width: 50vw;
        height: 65vh;
    }

    .chart-container.line{
        width: 70vw;
        height: 75vh;
    }

    .chart-container.bars{
        width: 47vw;
        height: 65vh;
    }

    .chart-row-title {
        height: 15%;
        text-align: center;
    }

.chart-row-title-dialog {
    height: 40%;
    padding-top: 0.75rem;
    text-align: center;
    align-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #F5F5F5;
}

.chart-row-content {
    height: 85%;
    padding-top: 5px;
    display: flex;
    justify-content:center;
    align-content: center;
}

.chart-row-content-dialog {
    height: 60%;
    display: flex;
    justify-content: center;
    align-content: initial;
    font-size: 3.2rem;
    font-weight: bold;
    color: #F5F5F5;
}

/* Color de los iconos menu actions */
.bg-dark-light {
    background-color: rgba(54, 69, 79, 0.95) !important; /* Color carbon */
}

.text-blue-rts {
    color: #81A1E8;
}

.text-white-75 {
    opacity: 0.85;
    color: #FFFFFF !important;
}

.text-white:hover {
    /* Color al pasar el mouse */
    color: #000000 !important;
}

/* Transiciones del filtro PositionsList*/
#colFilters, #colAccordion {
    transition: all 0.5s linear;
}

    #colFilters.show {
        max-height: 33%;
        opacity: 1;
        overflow: hidden;
    }

    #colFilters.hide {
        max-height: 0%;
        opacity: 0;
        overflow: hidden;
    }

.custom-link, .custom-link-lightblue {
    color: white; /* Color del texto normal */
    text-decoration: none; /* Elimina el subrayado si es necesario */
}

    .custom-link:hover {
        color: #66cfd6; /* Color del texto cuando se pasa el mouse */
    }

    .custom-link-lightblue:hover {
        color: #079ACF; /* Color del texto cuando se pasa el mouse */
    }

.custom-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 24px;
    height: 24px;
    text-decoration: none;
    color: white; /* color del icono */
    padding-top: 3px;
}

/* Iconos del Pipeline */
    .custom-link-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background-color: currentColor; /* usa el mismo color del texto */
        opacity: 0.3; /* o un alpha */
        transform: translate(-50%, -50%);
        transition: width 0.2s, height 0.2s;
        z-index: 0; /* detrás del ícono */
    }

    .custom-link-btn:hover::before {
        width: 24px; /* tamaño del círculo al hover */
        height: 24px;
    }

    .custom-link-btn span,
    .custom-link-btn i {
        position: relative;
        z-index: 1; /* ícono por encima del overlay */
    }


/* Combinacion de Colores de las alertas */
.alert-success-custom {
    /*--bs-alert-color: var(--bs-success-text-emphasis);*/
    /*--bs-alert-bg: var(--bs-success-bg-subtle); */
    /* --bs-alert-bg: rgba(221,239,212, 0.6);*/
    /*--bs-alert-bg: rgba(228,107,118, 0.6) !important;*/
    /*--bs-alert-border-color: var(--bs-success-border-subtle);*/
    /*--bs-alert-link-color: var(--bs-success-text-emphasis);*/
    color: #ADFF2F; /* Para el texto blanco */
    text-shadow: 4px 4px 10px azure;
    background: rgba(54,69,79, 0.75) !important; /*Charcoal*/
    /*background: rgba(103,119,138, 0.75) !important; *//*Charcoal-blue*/
    /*background: rgba(65, 105, 225, 0.75) !important;*/
    /*background: rgba(0, 0, 128, 0.75) !important;*/
}

.alert-danger-custom {
    /*--bs-alert-color: var(--bs-danger-text-emphasis);*/
    /*--bs-alert-bg: var(--bs-danger-bg-subtle); */
    /*--bs-alert-bg: rgba(240,172,178, 0.6);*/
    /*--bs-alert-border-color: var(--bs-danger-border-subtle);*/
    /*--bs-alert-link-color: var(--bs-danger-text-emphasis);*/
    color: #8B0000; /* Para el texto blanco */
    text-shadow: 2px 2px 5px #CDE2EE;
    background: rgba(178, 34, 34, 0.6) !important;
}

/* Colores */
.text-greenyellow-color {
    --bs-text-opacity: 1;
    color: rgba(173, 255, 47, 0.8) !important;
}

/* Colores */
.text-lightslategray-color {
    --bs-text-opacity: 1;
    color: rgba(119, 136, 153, 0.8) !important;
}

/* Contenedor de la Alerta personalizada */
.custom-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 90%; /* Ajusta según tus necesidades */
    max-width: 720px; /* Tamaño similar a SweetAlert2 */
    height: 25%; /* Ajuste la altura según el contenido */
    max-height: 420px;
    padding: 1.5rem;
    /*background: rgba(47, 79, 79, 0.75);*/ /* Fondo semitransparente */
    /*color: white;*/ /* Para el texto blanco */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    border-radius: 0.5rem;
    backdrop-filter: blur(10px);
    display: flex; /* Flexbox para centrar contenido */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    animation: fadeIn 0.3s ease-in-out;
}


    .custom-alert h4 {
        font-size: 1.2rem; /* Ajuste del tamaño del texto */
        text-align: center; /* Centramos el contenido de texto */
    }

    .custom-alert .btn-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.2rem;
    }

/* Animación de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}


.custom-alert.fade {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

    .custom-alert.fade.show {
        opacity: 1;
    }

    .custom-alert.fade:not(.show) {
        opacity: 0;
    }

.dt-text-wrap {
    white-space: pre-wrap; /* Respeta saltos y espacios */
    word-wrap: break-word; /* Asegura que las palabras largas se ajusten */
}

.custom-text-wrap {
    white-space: pre-wrap; /* Respeta saltos y espacios */
    word-break: break-word; /* Rompe palabras muy largas */
    overflow-wrap: break-word; /* Compatibilidad con navegadores */
}

.li-disabled-custom {
    pointer-events: none; /* Impide clics */
    opacity: 0.5; /* Hace que el elemento se vea deshabilitado */
    cursor: not-allowed; /* Cambia el cursor */
}


/* Etiqueta */
/* Estilos base para la etiqueta */
.tag {
    display: inline-flex; /* Usamos flexbox para centrar verticalmente el texto */
    align-items: center; /* Centra verticalmente los elementos dentro */
    color: #FFF; /* Color del texto */
    padding: 0 12px 0 10px; /* Espaciado interno (invertido para el triángulo a la derecha) */

    position: relative;
    text-decoration: none; /* Elimina el subrayado */
    text-align: center !important;
    font-family: Arial, sans-serif; /* Fuente del texto */
    font-weight: bold;

    border-radius: 4px 1px 0 4px; /* Bordes redondeados */
    margin-right: 12px; /* Margen derecho para separar etiquetas */
    line-height: 24px; /* Centra el texto verticalmente */
    min-width: 100px;
    max-width: 170px;
    height: 35px;
}

    /* Triángulo a la derecha */
    .tag::before {
        content: '';
        position: absolute;
        right: -14px;
        top: 0;
        border-color: transparent transparent transparent #0089E0; /* Color del triángulo */
        border-style: solid;
        border-width: 19px 0 16px 15px; /* Ajusta el tamaño del triángulo */
        height: 0;
        width: 0;
    }

    /* Círculo dentro de la etiqueta */
    .tag::after {
        content: '';
        position: absolute;
        left: 6px; /* Ajusta la posición horizontal del círculo */
        top: 12px; /* Ajusta la posición vertical del círculo */
        background-color: #ADFF2F; /* Color del círculo */
        width: 8px;
        height: 8px;
        border-radius: 4px; /* Hace que el elemento sea un círculo */
    }
    
    .tag-text {
        padding-left: 10px !important;
        font-size: 0.9em; /* Tamaño del texto */
    }
    
    .tag-text-sm {
        padding-left: 10px !important;
        font-size: 0.8em; /* Tamaño del texto */
    }

/* Estilos para tag-hired (verde) */
.tag-hired, .tag-completed {
    color: #F8F8FF !important;
    background: #9ACD32 !important;
}
    .tag-hired::before, .tag-completed::before {
        border-color: transparent transparent transparent #9ACD32; /* Amarillo */
    }

/* Estilos para tag-applied (azul) */
.tag-applied {
    color: #fff !important;
    background: #4169E1 !important;
}

    .tag-applied::before {
        border-color: transparent transparent transparent #4169E1; /* Amarillo */
    }
 
/* Estilos para tag-disqualified (rojo) */
.tag-disqualified, .tag-discarded, .tag-canceled {
    color: #fff !important;
    background: #CD5C5C !important;
}

    .tag-disqualified::before, .tag-discarded::before, .tag-canceled::before {
        border-color: transparent transparent transparent #CD5C5C; /* Amarillo */
    }
 
/* Estilos para tag-review (rojo) */
.tag-under-review, .tag-hold {
    color: #fff !important;
    background: #FF6347 !important;
}

    .tag-under-review::before, .tag-hold::before {
        border-color: transparent transparent transparent #FF6347; /* Amarillo */
    }


/* Estilos para tag-warning (amarillo) */
.tag-warning {
    background-color: #FFC107; /* Amarillo */
    color: #000; /* Texto negro para mejor contraste */
}

    .tag-warning::before {
        border-color: transparent transparent transparent #FFC107; /* Amarillo */
    }

/* Estilos para tag-danger (rojo) */
.tag-danger {
    background-color: #DC3545; /* Rojo */
    color: #FFF; /* Texto blanco */
}

    .tag-danger::before {
        border-color: transparent transparent transparent #DC3545; /* Rojo */
    }

/* Estilos para tag-success (verde) */
.tag-success {
    background-color: #28A745; /* Verde */
    color: #FFF; /* Texto blanco */
}

    .tag-success::before {
        border-color: transparent transparent transparent #28A745; /* Verde */
    }

/* Estilos para tag-primary (azul) */
.tag-primary {
    background-color: #000080; /* Azul */
    color: #FFF; /* Texto blanco */
}

    .tag-primary::before {
        border-color: transparent transparent transparent #000080; /* Azul */
    }

#btnToAnchor {
    position:fixed;
    margin: 0 80px 50px 50px;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    background-color: #007bff; /* Color inicial (Bootstrap primary) */
    border: none;
    opacity: 0.35; /* Semitransparente por defecto */
}

    /* Estilo del hover (cuando pasa el cursor) */
    #btnToAnchor:hover {
        background-color: #0056b3; /* Azul más oscuro al hacer hover */
        opacity: 1; /* Sin transparencia al hacer hover */
        transform: scale(1.1); /* Aumenta un poco el tamaño */
    }

/* Lista ordenada personalizada */
 .ol-custom {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 2em;
    margin-left: 0.1em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

    .ol-custom ol {
        margin: 0 0 0 2em;
    }

    .ol-custom li {
        position: relative;
        display: block;
        padding: 0.5em 0.4em 0.5em 1.7em;
        *padding: 0.4em;
        margin: .5em .2em;
        background: #DDD;
        color: #444;
        text-decoration: none;
        border-radius: 0.3em;
        transition: all 0.3s ease-out;
    }
    .ol-custom li:hover {
        background: #EEE;
    }
    /*
    .ol-custom li:hover:before {
        transform: rotate(360deg);
    }
    */
    
    .ol-custom li:before {
        content: counter(li);
        counter-increment: li;
        position: absolute;
        left: -0.90em;
        top: 50%;
        margin-top: -1.3em;
        background: #87ceeb;
        height: 2.2em;
        width: 2.2em;
        line-height: 2em;
        border: 0.2em solid #fff;
        text-align: center;
        font-weight: bold;
        border-radius: 2em;
        /*transition: all .3s ease-out;*/
    }

/* Lista desordenada personalizada */
.ul-custom {
    font: 0.75rem 'trebuchet MS', 'lucida sans';
    font-style: italic;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    list-style-type: none; /* Elimina viñetas predeterminadas */
    margin: 0.5em 0 0.5em 0.25em;
    padding: 0;
}

    .ul-custom li {
        position: relative;
        padding: 0.5em 0 0.5em 2em; /* Espacio para el check */
        margin: 0.3em 0;
        background: none;
        color: #333;
        border-radius: 0;
    }

        .ul-custom li:hover {
            background: #eee;
        }

        /* Estilo para el icono de check antes de cada li */
        .ul-custom li:before {
            content: "✔"; /* Símbolo de check */
            position: absolute;
            left: 0;
            top: 75%;
            transform: translateY(-50%);
            font-size: 1.2em; /* Tamaño del icono */
            color: #28a745; /* Color del check (verde) */
            background: none; /* Elimina cualquier fondo */
            border: none; /* Sin bordes */
            width: auto; /* Elimina el tamaño fijo */
            height: auto;
            line-height: 1; /* Ajusta la altura */
        }

        /* Cambiar color o efecto al pasar el cursor */
        .ul-custom li:hover:before {
            color: #218838; /* Check más oscuro al hacer hover */
        }


/* Cursor de tablas */
/* Efecto hover para las filas clickeables */
.clickable-row:hover {
    cursor: pointer; /* Cambia el cursor a la manita */
    background-color: #f1f1f1; /* Fondo gris claro al pasar el mouse */
}

/* Estilo para la fila seleccionada */
.clickable-row.selected {
    font-weight: bold;
}


/* Tooltip personalizado */
.tooltip-custom {
    position: relative;
    display: inline-block;
}

    .tooltip-custom .tooltiptext-custom {
        visibility: hidden;
        font: italic 0.85em/1.5 Arial, sans-serif;
        font-weight: 600;
        width: 350px;
        background-color: #FFF8DC;
        border: 1px solid #A9A9A9;
        border-radius: 10px;
        padding: 5px;
        position: absolute;
        z-index: 1000;
        bottom: 75%;
        left: 75%;
        margin-left: -75px;
        opacity: 0;
        transition: opacity 0.3s;
    }

.tooltip-custom:hover .tooltiptext-custom {
    visibility: visible;
    opacity: 1;
}


#suggestions {
    position: absolute;
    margin-top: 10px;
    width: 75%;
    max-height: 15rem;
    overflow-y: auto;
    z-index: 2000;
    /*border: 1px solid #ddd;*/
}

    #suggestions ul {
        margin: 0;
        padding: 0.7em;
        list-style: none;
    }

    #suggestions li {
        font-size: 0.80em;
        padding: 6px 12px;
        background: rgb(54, 69, 79, 0.8);
        color: var(--green-yellow-color);
        cursor: pointer;
    }

        #suggestions li:hover {
            color: var(--charcoal-color);
            background: var(--green-yellow-color);
        }

.btn-letter-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #FFA07A; /* Color azul dodger */
    color: #F5F5F5;
    font-weight: bold;
    font-size: 0.65rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-right: 5px;
    margin-bottom: 2.5px;
}

    .btn-letter-circle:hover {
        background-color: #FF7F50; /* Color azul más oscuro al hacer hover */
        text-decoration: none;
    }

/* Mostrar un icono para edicion en un input*/
.edit-input-container {
    position: relative; 
}

.candidate-batch-icon {
    display: inline-flex; /* Permite que se comporte como texto pero con propiedades de caja */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    width: 26px; /* Ancho fijo */
    height: 26px; /* Alto fijo igual al ancho */
    background-color: #FF8C00; 
    border-radius: 50%;
    color: white !important;
    font-size: 1rem;
}

.edit-input {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #007bff;
    color: white;
    padding: 4px 0 0 8px;
    border: 2px solid LightGray;
    border-radius: 15px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
}

.edit-input.edit-input-btn {
    top: 43% !important;
    right: 0px;
}

.edit-input.edit-input-btn-group {
    top: 27%;
    right: -10px;
}

.edit-input-container:hover .edit-input-btn {
    opacity: 1;
}


.edit-input-container:hover .edit-input-btn-group {
    opacity: 1;
}

/* Mostrar un icono para edicion en un input*/
.edit-textarea-container {
    position: relative;
    min-width: 99%;
}

.edit-textarea-btn {
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #007bff;
    color: white;
    padding: 4px 0 0 8px;
    border: 2px solid LightGray;
    border-radius: 50%;
    cursor: pointer;
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    position: absolute;
    z-index: 10;
}

/* Mostrar botón solo cuando el textarea está enfocado */
.edit-textarea-container:has(textarea:focus) .edit-textarea-btn {
    opacity: 1;
}

/*.edit-textarea-btn.disabled {
    opacity: 0 !important;
    pointer-events: none;
}*/

.table-evaluated {
    background-color: #d4edda !important; /* verde suave */
    transition: background-color 0.5s ease;
}

/* Arrastrar y soltar */
.drop-zone {
    border: 2px dashed #007bff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .drop-zone.dragover {
        /*background-color: #e9f7fe;*/
        background-color: red;
    }

.custom-progress-container {
    position: relative;
    background-color: #eee;
    border: thin solid #D8D8D8;
    border-radius: 10px;
    overflow: hidden;
    height: 25px;
    width: 100%;
}

.custom-progress-container.mini-bar {
    height: 12px;
    margin-top: 5px;
}

.custom-progress-bar {
    height: 100%;
    background: linear-gradient(to right, 
        rgba(255, 0, 0, 0.5),  /* rojo */ 
        rgba(255, 165, 0, 0.5), /* naranja */
        rgba(255, 255, 0, 0.5), /* amarillo */
        rgba(0, 128, 0, 0.5) /* verde */
    );
    border-radius: 10px;
    transition: width 0.4s ease;
}

    .custom-progress-bar.solid-color {
        background: rgba(50, 205, 50, 0.5);
    }

    .custom-progress-bar.gradient-color {
        background: linear-gradient(to right, rgba(255, 0, 0, 0.5), /* rojo */
        rgba(255, 255, 0, 0.5), /* amarillo */
        rgba(0, 128, 0, 0.5) /* verde */
        );
    }
.progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #808080;
    z-index: 1;
    pointer-events: none;
}

.progress-label.mini-label {
    color: #808080;
    font-size: 0.7em;
}

/* Color degradado de la barra activa */
.compact-slider .noUi-connect {
    background: linear-gradient(to right, #dc3545, #ffc107, #198754);
}

/* Pips clicables */
.compact-slider .noUi-value {
    cursor: pointer;
    font-size: 0.75rem;
}

.compact-slider .noUi-marker {
    height: 8px;
    top: 10px;
}

.slider-wrapper {
    /* background-color: #f0f8ff; cámbialo por cualquier color */
    background-color: rgba(47, 79, 73, 0.1); /* cámbialo por cualquier color */
    height: 100%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ***************** */
/* ESTILOS SCORECARD */
/* ***************** */
.table-wrapper-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 4;
}

.sticky-top {
    top: 0;
}

.table-wrapper-scroll {
    border: 1px solid #fff;
}

.scorecard-label {
    position: relative;
    padding-left: 24px;
}

/* Check verde al principio si tiene clase scorecard-completed */
.scorecard-completed::before {
    content: "✔";
    color: #9ACD32 !important;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* **************************************** */
/* ESTILOS DE PESTAÑAS DE CANDIDATE PROCESS */
/* **************************************** */
#candidateProcessTab .nav-link.active {
    background-color: #1E90FF; 
    color: white; /* Para que el texto sea visible en el fondo oscuro */
    border-color: #1E90FF; /* Opcional: para que el borde también coincida */
}

/* Opcional: Estilo al pasar el ratón por encima (hover) de las pestañas no activas */
#candidateProcessTab .nav-link:hover:not(.active) {
    background-color: #e9ecef; /* Un gris claro para el hover */
}

/* *************************************** */
/* ESTILOS PERSONALIZADOS PARA EL COLLAPSE */
/* *************************************** */
.collapse-container {
    position: relative; /* Necesario para posicionar la pestaña */
    margin-bottom: 20px; /* Espacio entre el collapse y el footer */
}

.collapse-toggle-button {
    position: absolute;
    top: -10px; /* Ajusta esto para mover la pestaña arriba del contenido del collapse */
    left: 50%;
    transform: translateX(-50%); /* Centra la pestaña */
    z-index: 10; /* Asegura que la pestaña esté por encima de otros elementos */
    padding: 5px 15px;
    border-radius: 5px 5px 0 0; /* Bordes redondeados solo en la parte superior */
    background-color: #194679; /* Color de fondo similar al navbar */
    /*background-color: rgb(10, 66, 117, 0.95); *//* Color de fondo similar al navbar */
    color: white;
    /*border: 1px solid #999999;*/
    cursor: pointer;
    text-align: center;
    height: 1.75em;
}
    .collapse-toggle-button:active, .collapse-toggle-button:focus {
        background-color: #194679; /* Color de fondo similar al navbar */
        border: none !important; /* Asegura que no aparezca el borde en estos estados */
    }

    .collapse-toggle-button:hover {
        background-color: #194679;
        color: #7FFF00;
    }

    .collapse-toggle-button i {
        transition: transform 0.3s ease; /* Suaviza la rotación del icono */
    }

    .collapse-toggle-button[aria-expanded="true"] i {
        transform: rotate(180deg); /* Rota el icono cuando está expandido */
    }

/* Puedes ajustar el color del collapse y el footer para que combinen */
.collapse-content-area {
    background-color: #5e7da1; 
    border: 1px solid #dee2e6;
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

/* Estilos Drop Zone */
.dropzone {
    border: 2px dashed #0d6efd !important;
    border-radius: 0.5rem !important;
    background: #F0FFFF !important;
}
    .dropzone .dz-message {
        font-weight: 500 !important;
        color: #6C757D !important;
    }

/* Estilos de cards modulo Vacancies */
.card-custom {
    min-width: 2rem !important;
    min-height: 6rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header-custom {
    padding: .25rem !important;
    text-align:center !important;
    background: #f3fbd2 !important;
}

.card-pipe-custom {
    min-width: 4rem !important;
    min-height: 6rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Barra de progreso de mensajes */
.auto-close-alert .alert-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    margin: 0;
    background: rgba(0,0,0,.12);
}

    .auto-close-alert .alert-progress .progress-bar {
        width: 100%;
        transition: width 100ms linear; /* animación más visible */
    }