@font-face {
  font-family: PKFGlobalSansRegular;
  src: url(../fonts/PKFGlobalSans-Regular.otf);
    font-weight: 400; /* Normal weight */
  font-style: normal;

}

@font-face {
  font-family: PKFGlobalSansBold;
  src: url(../fonts/PKFGlobalSans-Bold.otf);
    font-weight: 700; /* Bold weight */
  font-style: normal;
 
}



body, html {
    overflow-x: hidden;
}



:root {
   


    --black: #212121;

    --white:#ffffff;
    --light-white: #fafafa;

    --gray: #5a5a5a;
    --light-gray: #7b7f84;
    --lighter-gray: #e8e8e8;

    --dark-blue: #0a2555;
    --dark-matte-blue: #284270;
    --blue: #0f3780;
    --light-blue: #31679a;
    --lighter-blue:#cbd3e2;

    --red: #e42725;
    --light-red: #e68483;

    --green: #009b43;

    --dark-mode-darker-blue: #06142d;
    --dark-mode-dark-blue: #081f47;
    --dark-mode-blue: #284270;
    --dark-mode-lighter-blue: #36568e;

    
  }

  .index-bg{
    background-color: var(--light-white);
  }

  .login-container{
    background-color: var(--white);
  }

  .login-title{
    color: var(--light-gray);
  }

  
  .login-label{
    color: var(--gray);
  }

  .login-input{
    background-color: var(--lighter-gray) !important;
    border: 1px solid var(--light-gray) !important;
  }

  .login-input::placeholder{
   color: var(--light-gray);
  }

  .login-btn{
    border: 1px solid var(--gray) ;
    background-color: var(--gray);
    color: var(--white);
  }

  .pkf-sans-regular{
    font-family: PKFGlobalSansRegular;
    font-weight: 400;
  }

    .pkf-sans-bold{
    font-family: PKFGlobalSansBold;
    font-weight: 700;
  }

  .swal2-confirm{
background-color: var(--blue) !important;
  }

  .w-40{
    width: 40% !important;
  }

  .w-60{
    width: 60% !important;
  }

   .w-35{
    width: 35% !important;
  }

  .w-65{
    width: 65% !important;
  }


  .upload-label{
     overflow: hidden;
  text-overflow: ellipsis;
  }

  .file-name{
     overflow: hidden;
  text-overflow: ellipsis;
  }

[data-bs-theme="custom-light"] {
    

    body{
 
        background-color: var(--light-white);
       
      
    }

    .navbar{

        font-family: PKFGlobalSansBold;
        background-color: var(--light-white);
        color: var(--dark-blue) !important;
        
    }

   .sidebar{
    font-family: PKFGlobalSansBold;
        background-color: var(--light-white);
       border-right: 2px solid var(--lighter-gray);
       
   } 

    .sidebar-active{
      
        background-color: var(--lighter-gray);
    }

    .nav-item>a{
         color: var(--blue) !important;
    }
    

    .custom-btn{
        padding: 0.375rem 0.75rem;
        border: none;
        border-radius: 0.375rem;
    }

    .custom-btn-color{
        font-family: PKFGlobalSansRegular;
        background-color: var(--blue);
        color: var(--white);

    }


    .custom-btn-color-2{
        font-family: PKFGlobalSansRegular;
        background-color: var(--red);
        color: var(--white);

    }

    .custom-btn-color-3{
        font-family: PKFGlobalSansRegular;
        background-color: var(--dark-blue);
        color: var(--white);

    }

      .custom-btn-color-4{
        background-color: var(--lighter-gray);
        color: var(--light-gray);

    }

     .custom-btn-table{
        font-family: PKFGlobalSansRegular;
        background-color: var(--blue);
        color: var(--white);

    }
 
 
 
    .custom-dropdown{
        font-family: PKFGlobalSansRegular;
        background-color: var(--light-blue);
        color: var(--white);

    }

    .custom-underline{
        background-color: var(--black);
        width: 100%;
        height: 2px;
    }

    .custom-container-bg{

        background-color: var(--white);
    }

    .custom-container-border{

        border: solid 1px var(--light-gray);
    }

    .custom-dashboard-container{
        background-color: var(--light-white);
        color: var(--gray);
    }

    .custom-label{
        color: var(--light-gray);
      
    }

    .custom-input{
        background-color: var(--lighter-gray);
    }

    .custom-input::placeholder{
      opacity: 0.6;
    }

    .custom-icon-add{
        color: var(--gray);
        background-color: var(--lighter-gray);
        border-color: var(--light-gray) !important;
    }

    .custom-title{
        color: var(--black);
    }

    .custom-title-2{
        color: var(--gray);
    }


    .custom-link-color{
        color: var(--dark-blue);
        text-decoration-color: var(--dark-blue) !important;
    }

    #chat-header{
        background-color: var(--dark-matte-blue);
        color: var(--white);
    }

    #chat-close {
    color: var(--white);
    }

    #chat-expand {
      color: var(--white);
    }


    .chat-btn{
        background-color: var(--dark-blue);
    }

    .bot-message{
        background-color: var(--lighter-gray);
        color: var(--black);
    }

    .user-message{
        background-color: var(--lighter-blue);
        color: var(--black);
    }

    #chat-send{
    background: var(--dark-matte-blue);
    color: var(--white);

    }

    #chat-messages{
        background-color: var(--white);
    }

    
    #chat-input-container {
    background-color: var(--light-white);
    }

    table.dataTable > tbody > tr:nth-child(odd) {
    background-color: var(--white) !important;
    }

     table.dataTable > tbody > tr:nth-child(even) {
    background-color: var(--lighter-gray) !important;
    }


    .table-head{
        background-color: var(--lighter-gray);
    }

    th{
        border-bottom: none !important;
    }

    div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: none !important;
    }

    .dt-search input {
    border: none !important;
    width: 18%;
    border-radius: 3px;
    padding: 5px;
    background-color: var(--lighter-gray) !important;
    color: inherit;
    margin-left: 3px;
}

    .table-edit-icon{
        color: var(--light-gray);
         cursor: pointer;
    }

    .table-delete-icon{
        color: var(--red);
         cursor: pointer;
    }

    .table-user-icon{
     
         cursor: pointer;
    }


    .sat-icon{
        color: var(--dark-blue);
    }



    div.dt-container .dt-paging .dt-paging-button{
         color: var(--light-gray) !important; 
           background-color: var(--lighter-gray) !important;
    }

    div.dt-container .dt-paging .dt-paging-button:hover {
    color: var(--light-gray) !important;
    border: none !important;
    background: var(--lighter-gray) !important;
    background-image: none !important;
    box-shadow: none !important;
}


  body div.dt-container .dt-paging .dt-paging-button:active {
   color: var(--light-gray) !important;
           background-color: var(--lighter-gray) !important;
}

      div.dt-container .dt-paging .dt-paging-button.current{
         color: var(--light-white) !important;
           background-color: var(--gray) !important;
    }

     div.dt-container .dt-paging .dt-paging-button.current:hover {
            color: var(--light-white) !important;
            background-color: var(--gray) !important;
    }


    div.dt-container .dt-paging .dt-paging-button.first,
    div.dt-container .dt-paging .dt-paging-button.previous,
    div.dt-container .dt-paging .dt-paging-button.next,
    div.dt-container .dt-paging .dt-paging-button.last {
        background-color: transparent !important; /* Replace with your custom color */
    }

 

    #dt-length-0{
        color: var(--gray);
        border: 2px solid  var(--light-gray);
    }

    .correct-bg{
        background-color: var(--light-blue);
        color: var(--white);
    }

    .incorrect-bg{
        background-color: var(--light-red);
        color: var(--white);
    }

    .delete-btn{
        color: var(--red);
        cursor: pointer;
        font-size: 20px;
    }

    .custom-upload-container{
        background-color: var(--white);
        border: solid 1px var(--light-gray);
    }
    

    .upload-container{
        background-color: var(--lighter-gray);
        color: var(--light-gray);
    }

    .custom-module-label{
     background-color: var(--dark-blue);
        color: var(--white);
    }

    .custom-list-item{
        border-color: var(--light-gray) !important;
        color: var(--light-gray);
    }

    .custom-btn-border{
        border-right: 2px solid #abafb5;
    }

    .custom-table-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    /* max-width: 800px; */
    }

        
    .isr-table th,
.isr-table td {
  border-bottom: 1px solid var(--lighter-gray);
  padding: 10px 12px;
  text-align: right;
}

.isr-table thead {
  background-color: var(--dark-mode-blue);
  color: white;
}


.isr-top-border{
    border-top: 2px solid #000000 !important;
}


 .custom-dashboard-table{
  background: white;
  padding: 20px;
  color: var(--black);

 }


.custom-dashboard-table th,
.custom-dashboard-table td {
  border-bottom: 1px solid var(--lighter-gray);
  padding: 10px 12px;
  text-align: right;

}


.custom-dashboard-table thead {
  background-color: var(--dark-mode-blue);
  color: white !important;
}

.results-link{
    color: var(--dark-blue);
}

button.nav-link{
    color: var(--blue) ;
}

button.nav-link.active{
    color: var(--blue) ;
    background-color: var(--lighter-gray);
    
}

  }

  /* FIN MODO CLARO*/



  
  [data-bs-theme="custom-dark"] { 
    
  
 body{
 
        background-color: var(--dark-mode-darker-blue);
       
      
    }

    .navbar{

        font-family: PKFGlobalSansBold;
        background-color: var(--dark-mode-darker-blue);
        color: var(--light-white) !important;
        
    }

   .sidebar{
    font-family: PKFGlobalSansBold;
        background-color: var(--dark-mode-darker-blue);
       border-right: 2px solid var(--light-white);
       
   } 

    .sidebar-active{
      
        background-color: var(--dark-mode-lighter-blue);
    }

    .nav-item>a{
         color: var(--light-white) !important;
    }
    

    .custom-btn{
        padding: 0.375rem 0.75rem;
        border: none;
        border-radius: 0.375rem;
    }

    .custom-btn-color{
        font-family: PKFGlobalSansRegular;
        background-color: var(--dark-mode-lighter-blue);
        color: var(--white);

    }


    .custom-btn-color-2{
        font-family: PKFGlobalSansRegular;
        background-color: var(--red);
        color: var(--white);

    }

    .custom-btn-color-3{
        font-family: PKFGlobalSansRegular;
        background-color: var(--dark-mode-dark-blue);
        color: var(--white);

    }

      .custom-btn-color-4{
        background-color: var(--dark-mode-blue);
        color: var(--light-white);

    }

       .custom-btn-table{
        font-family: PKFGlobalSansRegular;
        background-color: var(--light-white);
        color: var(--dark-mode-blue);

    }
 
 
 
    .custom-dropdown{
        font-family: PKFGlobalSansRegular;
        background-color: var(--dark-mode-blue);
        color: var(--white);

    }

    .custom-underline{
        background-color: var(--light-white);
        width: 100%;
        height: 2px;
    }

    .custom-container-bg{

        background-color: var(--dark-mode-dark-blue);
    }

    .custom-container-border{

        border: none;
    }

     .custom-dashboard-container{
        background-color: var(--dark-mode-dark-blue);
        color: var(--light-white);
    }


    .custom-label{
        color: var(--lighter-gray);
      
    }

    .custom-input{
        background-color: var(--dark-mode-lighter-blue);
        border:none;
        color: var(--light-white);
    }

    .custom-input::placeholder{
      opacity: 0.7;
      color: var(--lighter-gray);
    }

    .custom-icon-add{
        color: var(--light-white);
        background-color: var(--dark-mode-lighter-blue);
        border-color: var(--light-white) !important;
    }

    .custom-title{
        color: var(--light-white);
    }

    .custom-title-2{
        color: var(--light-white);
    }


    .custom-link-color{
        color: var(--dark-mode-lighter-blue);
        text-decoration-color: var(--dark-mode-lighter-blue) !important;
    }

    #chat-header{
        background-color: var(--white);
        color: var(--dark-mode-darker-blue);
    }

    #chat-close {
     color: var(--dark-mode-darker-blue);
    }

    #chat-expand {
        color: var(--dark-mode-darker-blue);
    }


    .chat-btn{
        background-color: var(--dark-mode-blue);
    }

    .bot-message{
        background-color: var(--white);
        color: var(--dark-mode-darker-blue);
    }

    .user-message{
        background-color: var(--dark-mode-blue);
        color: var(--white);
    }

    #chat-send{
    background: var(--dark-matte-blue);
    color: var(--white);

    }

    #chat-messages{
        background-color: var(--dark-mode-lighter-blue);
    }

    
    #chat-input-container {
    background-color: var(--light-white);
    }

    table.dataTable > tbody > tr:nth-child(odd) {
    background-color: var(--dark-mode-lighter-blue) !important;
    color: var(--light-white);
    }

     table.dataTable > tbody > tr:nth-child(even) {
    background-color: var(--dark-mode-dark-blue) !important;
    color: var(--light-white);
    }


    .table-head{
        background-color: var(--dark-mode-dark-blue);
        color: var(--light-white);
    }

    th{
        border-bottom: none !important;
    }

    div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: none !important;
    }

    .dt-search input {
    border: none !important;
    width: 18%;
    border-radius: 3px;
    padding: 5px;
    background-color: var(--light-white) !important;
    color: var(--dark-mode-blue);
    margin-left: 3px;
}

    .table-edit-icon{
        color: var(--light-white);
        cursor: pointer;
    }

    .table-delete-icon{
        color: var(--red);
         cursor: pointer;
    }

        .table-user-icon{
       
         cursor: pointer;
    }

    .sat-icon{
        color: var(--light-white);
    }



    div.dt-container .dt-paging .dt-paging-button{
         color: var(--light-white) !important; 
           background-color: var(--dark-mode-lighter-blue) !important;
    }

    div.dt-container .dt-paging .dt-paging-button:hover {
    color: var(--light-white) !important;
    border: none !important;
    background: var(--dark-mode-lighter-blue) !important;
    background-image: none !important;
    box-shadow: none !important;
}


  body div.dt-container .dt-paging .dt-paging-button:active {
            color: var(--light-white) !important;
           background-color: var(--dark-mode-lighter-blue) !important;
}

      div.dt-container .dt-paging .dt-paging-button.current{
         color: var(--light-white) !important;
           background-color: var(--dark-mode-dark-blue) !important;
    }

     div.dt-container .dt-paging .dt-paging-button.current:hover {
            color: var(--light-white) !important;
           background-color: var(--dark-mode-dark-blue) !important;
    }


    div.dt-container .dt-paging .dt-paging-button.first,
    div.dt-container .dt-paging .dt-paging-button.previous,
    div.dt-container .dt-paging .dt-paging-button.next,
    div.dt-container .dt-paging .dt-paging-button.last {
        background-color: transparent !important; /* Replace with your custom color */
    }

 

    #dt-length-0{
        color: var(--light-gray) !important;
        background-color: var(--light-white);
        border: 2px solid  var(--light-gray);
    }

   label[for=dt-length-0]{
        color: var(--light-white) !important;
    }


    .correct-bg{
        background-color: var(--light-blue);
        color: var(--white);
    }

    .incorrect-bg{
        background-color: var(--light-red);
        color: var(--white);
    }

    .delete-btn{
        color: var(--red);
        cursor: pointer;
        font-size: 20px;
    }

 
    .custom-upload-container{
        background-color: var(--dark-mode-dark-blue);
        border: solid 1px transparent;
    }

    .upload-container{
        background-color: var(--dark-mode-blue);
        color: var(--light-white);
    }

    .custom-module-label{
     background-color: var(--light-white);
        color: var(--dark-mode-blue);
    }


    .custom-list-item{
        background-color: var(--dark-mode-blue);
        border-color: var(--dark-mode-blue) !important;
        color: var(--light-white);
    }

    .custom-btn-border{
        border-right: 2px solid var(--light-white);
    }

        .custom-table-container {
    background: var(--dark-mode-blue);
    padding: 20px;
    border-radius: 8px;
    /* max-width: 800px; */
    color: white;
    }


    .isr-table th,
.isr-table td {
  border-bottom: 1px solid var(--light-gray);
  padding: 10px 12px;
  text-align: right;
}

.isr-table thead {
  background-color: var(--dark-mode-dark-blue);
  color: white;
}

.isr-top-border{
    border-top: 2px solid var(--white) !important;
}


     .custom-dashboard-table{
  background: var(--dark-mode-blue);
  padding: 20px;
  color: var(--white);

 }

.custom-dashboard-table th,
.custom-dashboard-table td {
  border-bottom: 1px solid var(--light-gray);
  padding: 10px 12px;
  text-align: right;

}

.custom-dashboard-table thead {
  background-color: var(--dark-mode-dark-blue);
  color: white !important;
}

.results-link{
    color: var(--white);
}

button.nav-link{
    color: var(--light-white) ;
}

button.nav-link.active{
    color: var(--light-white) ;
    background-color: var(--dark-mode-lighter-blue);
    
}
   
  } 
  /* FIN MODO OSCURO */
/*////////////////////////////////////*/

.sidebar .nav-link {
  /* font-size: clamp(0.7rem, 1vw + 0.4rem, 1rem); */
 font-size: clamp(0.3vw, 0.83vw, 0.83vw); /* Min 1rem, preferred 2.5vw, max 2.5rem */
}

.sidebar .material-symbols-outlined {
  font-size: clamp(0.8vw, 1.25vw, 1.25vw);
   margin: 0 0.35em !important;
}

/* //////////////////////////////////////// */

.custom-dashboard-table{
    font-size: 0.6vw !important;
}



/* //////////////////////////////////////// */

.upload-container .material-symbols-outlined {
  font-size: clamp(0.8vw, 5vw, 5vw);
  padding-top: 0.5em;
}

.upload-container.double .material-symbols-outlined {
  font-size: clamp(0.8vw, 2.6vw, 2.6vw);
  padding-top: 0.5em;
}

.custom-upload-container {
    height: auto;
    min-height: 37vh;
}


.upload-container > h6:nth-of-type(2) {
    padding-bottom: 2.7em;
}

.custom-upload-container h4{
     font-size: clamp(0.3vw, 1.25vw, 1.25vw); /* Min 1rem, preferred 2.5vw, max 2.5rem */
}

.custom-upload-container h5{
    font-size: clamp(0.3vw, 1.05vw, 1.25vw); /* Min 1rem, preferred 2.5vw, max 2.5rem */
     
}

.custom-upload-container h6{
     font-size: clamp(0.3vw, 0.75vw, 1.5vw); /* Min 1rem, preferred 2.5vw, max 2.5rem */
     
}

.custom-upload-container div:nth-of-type(2) {
    padding: 0.8vw;
}

.custom-padding{
      padding: 0.8vw;
}

#balanzaTable{
    font-size: 12px;
}

.isr-table {
  width: 100%;
  border-collapse: collapse;
}

.isr-table th:first-child,
.isr-table td:first-child {
  text-align: left;
}

.isr-table tbody {
  font-size: 0.68vw; /* adjust as needed */
}

.highlight {
  font-weight: bold;
  color: #003366;
}

.custom-table-heading{
      max-height: 67vh; 
    overflow-y: auto;
}

.custom-table-heading thead{
    position: sticky;
    top: 0;
    z-index: 2;  

}

.custom-table-heading th{
    font-size: 15px;
    text-align: left !important;

}


.custom-table-heading td{
     text-align: left !important;

}



.file-selected {
        background-color: var(--green) !important; /* Change this to your desired color */
        color: var(--light-white) !important;
}

nav[aria-label="pagination"] {
     display: flex;
     align-items: center;        /* Vertically center */
}

th{
    font-size: 20px;
}

   .sidebar {
        position: fixed;
        padding-top: 12vh;
        width: 11vw;
      
    }

    .dt-paging-button{
            margin-left: 4px !important;
            width: 2.2em !important;
            height: 2.2em !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 8px !important;
           
    }

    #dt-length-0{
        margin-right: 0.25rem;
        border-radius: 5px;
       
    }

    .swal2-html-container {
  text-align: left !important;
}

    .scrollable-list {
    max-height: 200px;     /* Set your max height */
    overflow-y: auto;      /* Enable vertical scroll if needed */
    overflow-x: hidden;    /* Prevent horizontal scroll */
    }

    
    .scrollable-list-2 {
    max-height: 70px;     /* Set your max height */
    overflow-y: auto;      /* Enable vertical scroll if needed */
    overflow-x: hidden;    /* Prevent horizontal scroll */
    }





            .bg-container {
            position: relative;
            overflow: hidden; /* hides parts that go outside the container */
            }

            .rotated-bg {
                opacity: 10%;
                position: fixed;
                top: 53%;
                left: 68%;
                width: 75%;
                height: auto;
                transform: translate(-50%, -50%) rotate(20deg);
                z-index: -1;
                pointer-events: none;
            }

    .disabled-module {
    /* opacity: 0.4;
    pointer-events: none;  */
    display: none;
    }



.main-container{
    margin-left: 12.5vw; 
    margin-top: 8vh;
}

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

#fileInput {
    display: none;
}

.display-none{
    display: none;
}

.modal-body {
    max-height: 300px;
    overflow-y: auto;
}

.chat-window {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 300px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
}

/*desde aqui*/
#chat-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 350px ;
    height: 500px ;
    background: white !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    display: flex;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1000 !important;
    font-family: Arial, sans-serif !important;
}

#chat-header {
    padding: 15px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
}

#chat-close {
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
}

#chat-expand {
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
}


#chat-messages {
    flex: 1 !important;
    padding: 15px !important;
    overflow-y: auto !important;
}

.message {
    margin-bottom: 10px !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
    max-width: 80% !important;
    word-wrap: break-word !important;
    color: #161515;
}

.user-message {
    margin-left: auto !important;
    border-bottom-right-radius: 5px !important;
}

.bot-message {
    margin-right: auto !important;
    border-bottom-left-radius: 5px !important;
}

#chat-input-container {
    display: flex !important;
    padding: 10px !important;
}

#chat-input {
    flex: 1 !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    outline: none !important;
    background: #ffffff !important;
    color: #000000 !important;
}

#chat-send {
    margin-left: 10px !important;
    cursor: pointer !important;
}

/* Botón para abrir el chat */
#chat-toggle {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    z-index: 999 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

.typing-indicator {
    display: inline-block !important;
    padding: 8px 12px !important;
    background: #f1f1f1 !important;
    border-radius: 18px !important;
    border-bottom-left-radius: 5px !important;
}

.typing-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: #666 !important;
    border-radius: 50% !important;
    margin: 0 2px !important;
    animation: typingAnimation 1.4s infinite ease-in-out !important;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s !important;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s !important;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s !important;
}

@keyframes typingAnimation {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}