@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@100..800&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --bs-primary:#2878F7;
    --bs-primary-active: #5797ff;
    --bs-success:#12A37F;
    /*--bs-info: #321371;
    --bs-warning: #CB754C;
    --bs-text-warning: #CB754C; */
    --bs-warning: #CB754C;
    --bs-primary-active-lighter: #d2e3ff;

    --bs-app-content-border-color:none;

    --bs-app-header-height:80px;
    --bs-app-content-bg-color:#F9F9F9;
    

}

[data-bs-theme=dark] {
    --bs-success-light: rgba(18, 163, 127,0.2);

}


body{
    font-family: "Nunito" ;
}


body.loading #contenedor-descripcion {
    display: none;
}

/* Muestra el contenido cuando esté listo */
body.loaded #contenedor-descripcion {
    display: block;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}



.hidden {
    opacity: 0;
    transition: opacity 0.2s ease-out !important;
    visibility: hidden;
}

.show {
    opacity: 1;
    transition: opacity 0.2s ease-in !important;
    visibility: visible;
}

#contenedor-descripcion {
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

#contenedor-descripcion.hidden {
    opacity: 0;
    visibility: hidden;
}

#contenedor-descripcion.show {
    opacity: 1;
    visibility: visible;
}


#portales-de-empleo.hidden {
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease-in-out;
}

#portales-de-empleo.show {
    opacity: 1;
    visibility: visible;
    transition: 0.2s ease-in-out;
}

.btn-sombra{
    transition: 0.2s ease-in-out;
    /* font-weight: bold !important; */
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px !important;
}

.btn:hover{
    transition: 0.2s ease-in-out;
    
}


.btn.automatizacion{
    background-color: #FFFFFF;
    background-image: linear-gradient(135deg, #F1F2F6 , rgba(201, 198, 198, 0.2) );
    border:1px solid #F1F2F6 !important;
    
}

[data-bs-theme="dark"] .btn.automatizacion{
    background-color: var(--bs-success-light) !important;
    color:var(--bs-text-gray-900)!important;
    background-image: none !important;
    border:1px solid #12a37f51 !important;
    transition: background-color 0.3s ease-in-out, 
                color 0.3s ease-in-out, 
                box-shadow 0.3s ease-in-out, 
                border 0.3s ease-in-out;
}

.btn.automatizacion:hover{
    background-image: linear-gradient(90deg, #EDF1F4, #F1F2F6 100%);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px !important;
    border:1px solid #12a37f51 !important;
    color:var(--bs-success) !important;
}

[data-bs-theme="dark"] .btn.automatizacion:hover{
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px !important;
    border:1px solid var(--bs-text-gray-500) !important;
}

.boton-sombra{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 3px !important;
}



.justify-text {
    text-align: justify;
}

.btn.btn-outline.btn-outline-dashed-green {
    border-width: 1px;
    border-style: dashed;
    border-color: #12A37F !important;
}


.btn.btn-outline-dashed-green {
    border: 1px dashed var(--bs-gray-300);
}


.btn.btn-outline.btn-outline-dashed-red {
    border-width: 1px;
    border-style: dashed;
    border-color: #F8285A !important;
}


.btn.btn-outline-dashed-red {
    border: 1px dashed var(--bs-gray-300);
}

.valoria{
    font-family: "Anek Latin" ;
}


[data-bs-theme="light"] .app-header{
    background-color: #FFFFFF;
    height: 80px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    z-index: 1;
}

[data-bs-theme="dark"] .app-header{
    background-color: #333333;
    height: 80px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    z-index: 1;
}

.app-header-separator{
    border-radius: 0px !important;
    height: 0px;
}

.app-wrapper{
    background-color: #F9F9F9 !important;
}

[data-bs-theme="light"] .app-toolbar{
    background-color: var(--bs-app-content-bg-color);
    margin-left: 10px;
    margin-top: 15px;
}

[data-bs-theme="dark"] .app-toolbar{
    background-color: #1E1E1E;
    margin-left: 10px;
    margin-top: 15px;
}

[data-bs-theme="light"] .app-content{background-color: var(--bs-app-content-bg-color) !important;}
[data-bs-theme="dark"] .app-content{background-color: #1E1E1E !important;}


[data-bs-theme="light"] .app-main{
    font-family: "Nunito" ;
}

[data-bs-theme="dark"] .app-main{
    background-color: #1E1E1E !important;
}

.app-content{
    border-radius: 0px !important;
    padding-top:10px;
}

.menu-title{
    font-size:19px !important;
    margin-left: 7px;
}






.company-name{
    font-family:"Montserrat";
    font-size: clamp(20px, 4vw, 30px);
    font-weight:700;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #2878F7 0%, #3D588D 50%,#2878F7 150%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: rgba(61, 88, 141, 0.22) 0px 1px 1px, rgba(61, 88, 141, 0.22) 0px 1px 1px;
}

[data-bs-theme="dark"] .company-name{
    
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #5ba7ff 0%, #2878F7 50%,#5ba7ff 150%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.company-name-login{
    font-family:"Montserrat";
    font-size: 80px;
    font-weight:bold;
    color: #ffffff;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    
}

.app-aside{
    margin-top:53px;
}

.vista-lista:hover{
    color:#333333 !important;
    transition: 0.3s ease-in-out;
}


[data-bs-theme="light"] .card{
    border:none;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09);
}

[data-bs-theme="dark"] .card{
    background-color: #212226;
    color: var(--bs-text-gray-700)!important;
}

[data-bs-theme="dark"] .card-title{
    color: var(--bs-text-gray-700)!important;
}

[data-bs-theme="dark"] h3{
    color: var(--bs-text-gray-700)!important;
}

[data-bs-theme="dark"] .nav-link{
    color: var(--bs-text-gray-800)!important;
}

[data-bs-theme="dark"] .app-sidebar-toggle{
    background-color: #333333 !important;
}

[data-bs-theme="dark"] .app-page{
    background-color: #1E1E1E !important;
}

[data-bs-theme="dark"] .form-control-plaintext{
    background-color: #15171C !important;
    border: 1px solid var(--bs-gray-300);
}


[data-bs-theme="dark"] a {
    color: #5ba7ff;
    text-decoration: none;
}

[data-bs-theme="dark"] .menu-title,.menu-icon,.menu-item,.badge-light-primary {
    color: #5ba7ff !important;
}

[data-bs-theme="dark"] .bg-primary{
    background-color: #006AE6 !important;
}

[data-bs-theme="dark"] .menu-title:hover {
    color: #9fccff !important;
}

/* [data-bs-theme="dark"] .badge-light-success, .btn-light-success {
    background-color: #DFFFEA !important;
}

[data-bs-theme="dark"] .badge-light-success, .btn-light-success {
    background-color: #00362b !important;
}


[data-bs-theme="light"] .btn-check:active,.btn,.btn-active-light-success, .btn-check:checked.btn.btn-active-light-success, .btn.btn-active-light-success.active, .btn.btn-active-light-success.show, .btn.btn-active-light-success:active:not(.btn-active), .btn.btn-active-light-success:focus:not(.btn-active), .btn.btn-active-light-success:hover:not(.btn-active), .show>.btn.btn-active-light-success{
    background-color: #DFFFEA !important;
}

[data-bs-theme="dark"] .btn-check:active,.btn,.btn-active-light-success, .btn-check:checked.btn.btn-active-light-success, .btn.btn-active-light-success.active, .btn.btn-active-light-success.show, .btn.btn-active-light-success:active:not(.btn-active), .btn.btn-active-light-success:focus:not(.btn-active), .btn.btn-active-light-success:hover:not(.btn-active), .show>.btn.btn-active-light-success{
    background-color: #00362b !important;
} */

.border-suave{
    border:1px solid rgba(153, 153, 153,0.4);
    transition: 0.3s ease-in-out;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09);
}

.border-suave-buscar{
    border:1px solid rgba(153, 153, 153,0.7) !important;
    transition: 0.3s ease-in-out;
}

.border-hover-suave{
    border:1px solid rgba(153, 153, 153,0.4);
    transition: 0.3s ease-in-out;
    /* background-color: rgb(249, 249, 249,0.5); */
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09);
}

.border-hover-suave:hover{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border:1px solid rgba(153, 153, 153,0.4);
    transition: 0.3s ease-in-out;
    background-color: #FFFFFF;
}

.ql-toolbar {
    border:1px solid #DBDFE9 !important;
    border-bottom: none !important;
}

.ql-container {
    font-size: 14px; /* Tamaño de fuente más grande */
    border:1px solid #DBDFE9 !important;
}


.menu-link {
    display: flex;
    align-items: center;
}

.menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-title {
    display: flex;
    align-items: center;
    margin-top: 1px;
}

.app-sidebar-menu-primary.menu>.menu-item>.menu-link .menu-title{
    font-weight: 500;
}

.app-sidebar-menu-primary.menu>.menu-item .menu-item>.menu-link .menu-title{
    font-weight: 500;
}

.btn{
    border-radius: 7px;
}

.hover-text-primary:hover {
    color: var(--bs-primary-active) !important;
    transition: 0.3s ease-in-out;
}




.menu-link.active{
    /* border:0px solid rgba(153, 153, 153,0.2);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09);
    background-color: #FFFFFF; */

    border:0px solid var(--bs-primary-active);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09);
    background-color: var(--bs-primary-active-lighter);
}

.nav-link{
    padding-bottom:5px !important;
}

.nav-link.active{
    border-bottom-width: 3px !important;
}

[data-bs-theme="light"] .app-sidebar{
    /* background-color: #F7F7F7; */
    /* background-color: #F7F7F7;
    background-image: linear-gradient(135deg, #F7F7F7 0%, rgba(219, 223, 233,0.1) 100%);
    box-shadow: rgba(17, 17, 17, 0.1) 2.4px 2.4px 3.2px; */
    /* border:1px solid rgba(153, 153, 153,0.5); */
    font-family: "Anek Latin";
    background-color: #F7F7F7;
    background-image: linear-gradient(90deg, #F9F9F9 0%, #F1F1F1 100%);
    padding-top:20px !important;
    margin-top: 10px !important;
    z-index: 2 !important;
    box-shadow: rgba(17, 17, 17, 0.1) 2.4px 2.4px 3.2px;
}

[data-bs-theme="dark"] .app-sidebar{
    /* background-color: #F7F7F7; */
    /* background-color: #F7F7F7;
    background-image: linear-gradient(135deg, #F7F7F7 0%, rgba(219, 223, 233,0.1) 100%);
    box-shadow: rgba(17, 17, 17, 0.1) 2.4px 2.4px 3.2px; */
    /* border:1px solid rgba(153, 153, 153,0.5); */
    font-family: "Anek Latin";
    background-color: #252526;
    background-image: linear-gradient(90deg, #252526 0%, #252526 100%);
    padding-top:20px !important;
    margin-top: 10px !important;
    z-index: 2 !important;
    box-shadow: rgba(17, 17, 17, 0.1) 2.4px 2.4px 3.2px;
}

/* Aplica cambios solo en dispositivos móviles */
@media (max-width: 768px) {
    .app-sidebar {
        padding-top: 75px;
        left: 0;
    }
}




#progress-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 200px;
    padding: 15px;
    background-color: #343a40;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#progress-box #progress-message {
    flex-grow: 1;
    margin-right: 10px;
}

#progress-box .spinner-border {
    width: 2rem;
    height: 2rem;
}

.progress-box-hidden {
    display: none !important;
}


#progress-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 200px;
    padding: 15px;
    background-color: #343a40;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1050;

}

.progress-container-hidden {
    display: none !important;
}

#progress-bar-loading {
    flex-grow: 1;
    margin-right: 10px;
    height: 20px;
    background-color: white;
}


.separator{
    border-bottom: 1px solid rgba(153, 153, 153,0.2);
}

.dz-image{
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    margin-top:-30px;
}

.dz-size{
    display: none;
    margin-top:50px !important;
}

.dz-filename{
    margin-top:50px !important;
}


.dz-progress{
    animation:none !important;
    background-color: transparent !important;
}

.dropzone {
    min-height: 200px;
    max-height: 600px; /* Set max height */
    overflow-y: auto; /* Add vertical scroll */
}

.dropzone_pequenio {

    overflow-y: auto; /* Add vertical scroll */
}

.dz-preview{
    padding:5px;
}

.no-hover-effect img {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


.skeleton {
    background-color: #e0e0e084;
    border-radius: 4px;
    margin-bottom: 10px;
    min-height: 20px;
    width: 100%;
    animation: pulse 1.5s infinite;
}


.skeleton-header {
    height: 25px;
    width: 30%;
    margin-bottom:10px;
    margin-top:15px;
}

.skeleton-text {
    height: 20px;
    margin-bottom:5px;
}

.skeleton-text-corto {
    height: 20px;
    width: 60%;
    margin-bottom:2px;
}

.skeleton-text-bullets-largo {
    height: 20px;
    margin-bottom:5px;
    margin-left: 20px;
    width: 80%;
}

.skeleton-text-bullets-corto {
    height: 20px;
    margin-bottom:5px;
    margin-left: 20px;
    width: 60%;
}

.skeleton-text-bullets-mas-corto {
    height: 20px;
    margin-bottom:5px;
    margin-left: 20px;
    width: 50%;
}


.skeleton-button {
    height: 40px;
    width: 30%;
}

@keyframes pulse {
    0% {
        background-color: #67676750;
    }
    50% {
        background-color: #4e4e4e1a;
    }
    100% {
        background-color: #67676750;
    }
}



.dataTables_wrapper {
    margin-bottom: 20px !important;
}



.active_rol_gestion{
    color: var(--bs-primary) !important;
    font-weight: bold !important;
}


.timeline-label .timeline-label{
    width: 150px;
}

.timeline-label:before {
    left:151px;
}


.chart-container {
    position: relative;
    max-width: 125px;
}
.chart-large {
    display: none;
    position: fixed;
    width: 500px;  /* Tamaño del gráfico grande */
    height: 300px;
    z-index: 1050;  /* Asegúrate de que este valor sea suficientemente alto */
    background-color: white;
    border:none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    padding: 5px;
    border-radius: 7px;
}
.chart-large-fixed {
    display: none;
    position: fixed;
    width: 500px;  /* Tamaño del gráfico grande */
    height: 300px;
    z-index: 1050;  /* Asegúrate de que este valor sea suficientemente alto */
    background-color: white;
    border:none;
    box-shadow: rgba(50, 50, 93, 0.5) 0px 13px 27px -5px, rgba(0, 0, 0, 0.5) 0px 8px 16px -8px;
    padding: 5px;
    border-radius: 7px;
}
.chart-container:hover .chart-large {
    display: block;
}

.chart-large-fixed .close-btn,
.chart-large .close-btn {
    position: absolute;
    top: -23px;
    right: -23px;
    border: none;
    padding: 5px 10px;
    background-color: transparent;
    cursor: pointer;
    z-index: 1010;
}


.bs-popover-auto{
    max-width:400px;
    border-radius: 7px;
    border:none;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}


.image-input-wrapper {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

.image-input-wrapper.fade-out {
    opacity: 0;
}


/* .fade {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade.show {
    opacity: 1;
} */



.form-control-plaintext{
    display: block;
    width: 100%;
    padding: .775rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-gray-700);
    appearance: none;
    background-color: #F9F9F9;
    background-clip: padding-box;
    border: 0px solid var(--bs-gray-300);
    border-radius: .75rem;
    box-shadow: false;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}




.card-footer-general {
    background-color: #ffffff;
    opacity: 1;
    padding: 1rem;
    border-top: 1px solid #F9F9F9;
    
    position: sticky;
    bottom: 0;
    width: 100%;
    backdrop-filter: blur(5px);
}

.fixed-buttons-container {
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(5px);
    padding: 20px 20px;
    margin-left: -5px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Para que quede encima del contenido */
    width: 650px;
}

#form-footer.d-none {
    display: none;
}



.mce-edit-focus{
    outline-color: var(--bs-primary-active) !important;
    outline-width: 1px !important;
    outline-style: solid;
    border-radius: 8px !important;
    
}



#spinner-eliminar-candidato {
    display: none; /* Inicialmente oculto */
    margin: 20px auto; /* Centrar el spinner horizontalmente */
}

#spinner-eliminar-candidato.show {
    display: block; /* Mostrar el spinner cuando se aplique la clase 'show' */
}


#fecha_inicio:hover{
    cursor: text;
}

.custom-popover {
    max-width: none; /* Permite que el contenido ajuste el tamaño */
}


.icono-rango-salarial{
    opacity: 0.7;
}

.icono-rango-salarial:hover{
    color: var(--bs-success-active) !important;
    opacity: 1;
    transition: 0.3s ease-in-out;
}



.badge-semilight-primary,
.badge-semilight-primary,
.btn-active-semilight-primary,
.btn-active-semilight-primary:hover,
.btn-active-semilight-primary:active{
    background-color: #aacffc !important;
    color: var(--bs-primary) !important;
}


.badge-semilight-success,
.badge-semilight-success,
.btn-active-semilight-success,
.btn-active-semilight-success:hover,
.btn-active-semilight-success:active{
    background-color: #b1ffcc !important;
    color: var(--bs-success) !important;
}

.badge-semilight-warning,
.btn-semilight-warning,
.btn-active-semilight-warning,
.btn-active-semilight-warning:hover,
.btn-active-semilight-warning:active{
    background-color: #fae9a5 !important;
    color: var(--bs-warning) !important;
}


.badge-semilight-info,
.btn-semilight-info,
.btn-active-semilight-info,
.btn-active-semilight-info:hover,
.btn-active-semilight-info:active{
    background-color: #cbb3fe !important;
    color: var(--bs-info) !important;
}



.tooltip-inner{
    max-width: 500px !important; /* Aumenta el tamaño del tooltip */
    white-space: pre-wrap; /* Permite saltos de línea */
    text-align: left; /* Alinea el texto a la izquierda */
}


.fade-transition {
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.fade-transition.show {
    opacity: 1;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.fade-hidden {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.invisible {
    visibility: hidden;
}



.fade-out {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

.texto-recortado {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* o el ancho que desees */
    display: inline-block; /* o block si prefieres */
    font-size: 13.975px;
}



/**
 * ==============================================
 * Dot Flashing
 * ==============================================
 */
 .dot-flashing {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #F9F9F9;
    color: #F9F9F9;
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 0.5s;
  }
  .dot-flashing::before, .dot-flashing::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
  }
  .dot-flashing::before {
    left: -15px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #F1F1F4;
    color: #F1F1F4;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 0s;
  }
  .dot-flashing::after {
    left: 15px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #F1F1F4;
    color: #F1F1F4;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 1s;
  }
  
  @keyframes dot-flashing {
    0% {
      background-color: #F1F1F4;
    }
    50%, 100% {
      background-color: #b1b1b592;
    }
  }




  .candidato-item {
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
  }
  
  .candidato-item:hover,
  .candidato-item:active {
    background-color: rgba(187, 187, 187, 0.1); /* gris suave */
  }
  
  .candidato-item.selected {
    background-color: rgba(120, 120, 120, 0.1); /* más notorio que el hover */
  }



.tox-tinymce {
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.tox-tinymce.editor-focused {
  border-color: #0d6efd; /* azul Bootstrap */
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

#create-automatic-description {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #E9F3FF;
  border: none;
  border-radius: 20px;
  color: #0d6efd;
  font-size: 0.875rem;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.2s ease-in-out;
  z-index: 1000;
}

#create-automatic-description:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  color: #09439a;
}

#create-automatic-description:active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
}


.shine {
  position: relative;
  overflow: hidden;
}

.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine 1.5s infinite;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}


.btn-nav-float {
  position: absolute; /* ✅ relativo a la modal */
  top: 50vh; /* ✅ centrado verticalmente en la pantalla, no en el modal */
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(204, 204, 204, 0.5) !important;
  z-index: 1055; /* encima del modal */
  transition: all 0.2s ease;
}

.btn-nav-float:hover {
  background: #f3f6f9;
  transform: translateY(-50%) scale(1.1);
}

/* 🔹 Ajuste lateral (pegado al borde de la modal, no a la pantalla) */
#prevCandidate {
  left: -25px; /* a la izquierda del modal */
}

#nextCandidate {
  right: -25px; /* a la derecha del modal */
}
/* 🔹 Permitir que sobresalgan las flechas fuera del modal */
.modal-content {
  overflow: visible !important;
}


/* 🔹 Transición de entrada para la tabla de candidatos */
.candidate-container {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.candidate-container.show {
  opacity: 1;
  transform: translateY(0);
}






/* Skeleton loading effect */
.skeleton-wrapper {
  animation: fadeIn 0.3s ease;
}

.skeleton-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}

.skeleton-title {
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}

.skeleton-block {
  border-radius: 6px;
  padding: 1rem;
  background: rgba(245, 245, 245, 0.6);
}

.skeleton-tag {
  width: 100px;
  height: 24px;
  border-radius: 12px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}