/* FONT SIZES */
.root-text-xxxs {
    font-size: 12px;
  }

  .root-text-xxs {
    font-size: 13px;
  }

  .root-text-xs {
    font-size: 14px;
  }

  .root-text-s {
    font-size: 15px;
  }

  .root-text-l {
    font-size: 17px;
  }

  .root-text-xl {
    font-size: 18px;
  }

  .root-text-xxl {
    font-size: 19px;
  }

  .root-text-xxxl {
    font-size: 20px;
  }

  /* BORDE A LOS INPUT REQUIRED*/
  :required:not(.is-invalid),
  .sel2req:not(.is-invalid),
  input[type="file"]:required:not(.is-invalid) ~ label {
    border-color: #ff8000 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  input[type="file"].custom-file-input ~ label:after {
    content: "\25b2" !important;
  }

  /* MARCA DE AGUA */

  #testing_watermark {
    z-index: 999;
    position: fixed;
    bottom: 10rem;
    left: 1rem;
    opacity: 0.5;
    pointer-events: none;
  }

  #testing_watermark img {
    height: 200px;
    width: 200px;
  }

  #testing_watermark_nav {
    overflow: visible;
  }
  #testing_watermark_nav span {
    color: red;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    font-family: sans-serif;
  }

  #water-mark {
    height: 200px;
    width: 200px; /* as above */
    z-index: 999;
    position: absolute;
  }

  #water-mark img {
    position: absolute;
    top: 0; /* or whatever */
    left: 0; /* or whatever, position according to taste */
    opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
    filter: alpha(opacity=50); /* for <= IE 8 */
  }

  .swal2-container {
    z-index: 10000 !important;
  }

  /* NOTIFICACIONES */

  /* ANIMACIÓN CAMPANA */
  .bell {
    animation: ring 8s 600s ease-in-out;
    transform-origin: 50% 4px;
  }

  @keyframes ring {
    0% {
      transform: rotate(0);
    }
    1% {
      transform: rotate(30deg);
    }
    3% {
      transform: rotate(-28deg);
    }
    5% {
      transform: rotate(34deg);
    }
    7% {
      transform: rotate(-32deg);
    }
    9% {
      transform: rotate(30deg);
    }
    11% {
      transform: rotate(-28deg);
    }
    13% {
      transform: rotate(26deg);
    }
    15% {
      transform: rotate(-24deg);
    }
    17% {
      transform: rotate(22deg);
    }
    19% {
      transform: rotate(-20deg);
    }
    21% {
      transform: rotate(18deg);
    }
    23% {
      transform: rotate(-16deg);
    }
    25% {
      transform: rotate(14deg);
    }
    27% {
      transform: rotate(-12deg);
    }
    29% {
      transform: rotate(10deg);
    }
    31% {
      transform: rotate(-8deg);
    }
    33% {
      transform: rotate(6deg);
    }
    35% {
      transform: rotate(-4deg);
    }
    37% {
      transform: rotate(2deg);
    }
    39% {
      transform: rotate(-1deg);
    }
    41% {
      transform: rotate(1deg);
    }

    43% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(0);
    }
  }

  #dt-header[style*="background-color"] .subheader-block {
      background: white;
      border: 1px solid whitesmoke;
      border-radius: 5px;
      padding-left: 5px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  @media (min-width: 992px) {
    .nav-function-minify:not(.nav-function-top) #avanza-chikito {
      display: block !important;
    }
    .nav-function-minify:not(.nav-function-top) #avanza-normal {
      display: none !important;
    }
  }

  .normalice-backgrounds {
    background-image: none !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  .page-logo {
      height: 4.125rem;
      width: 16.875rem;
      -webkit-box-shadow: 0 0 28px 0 rgba(0,0,0,.13);
      box-shadow: 0 0 28px 0 rgba(0,0,0,.13);
      overflow: hidden;
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-positive: 0;
      -webkit-box-flex: 0;
      flex-grow: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      min-height: 1px;
      padding: 0 2rem;
  }

  /* MENSAJE EN NOTIFICACIONES */
  .notification:not(.notification-loading):before {
    content: 'No hay mensajes';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    padding: 1.2rem;
    width: 100%;
    display: block;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* ANIMACIÓN ROTAR ICONO */
  .ico-rotate {
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  .ico-rotate.down {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  /* Action float */
  .action-float-icon {
    position: fixed;
    right: 4.5rem;
    bottom: 4.3125rem;
    z-index: 99999;
    background-color: var(--theme-primary);
    color: #fff;
    cursor: pointer;
    margin: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .action-float-icon a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 45px;
    height: 100%;
  }

  .header-icon {
    cursor: pointer !important;
  }

  #dt-basic-example tr {
    cursor: pointer;
  }

  /* Formatear códigos */
  pre.customCodeBlock {
    background: #f4f4f4;
    border-left: 3px solid #627ca0;
    color: #666;
    page-break-inside: avoid;
    font-size: 14px;
    line-height: 1.6;
    max-width: 100%;
    overflow: auto;
    padding: 0.8em 1.3em;
    display: block;
    word-wrap: break-word;
  }

  /* ESTILO EN MODO OSCURO */
  .mod-skin-dark:not(.mod-skin-light) pre.customCodeBlock {
    background-color: rgba(var(--theme-rgb-fusion), 0.5);
  }

  .mod-skin-dark:not(.mod-skin-light) #loadImg {
      content: url('/img/loadWhite.svg');
  }

  .mod-skin-dark:not(.mod-skin-light) #searching_michi {
      content: url('/img/missi_load_white.gif');
  }
  .mod-skin-dark:not(.mod-skin-light) .p-accordion-header-text {
      color:black;
  }

  /* Fade in animation */
  .fadeIn {
    animation: fadeIn 0.8s;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* Grow animation */

  .grow:hover {
    transition: transform ease-in 0.6s;
    transform: scale(1.3);
  }

  /* CAMBIAR CURSOR PARA INDICAR QUE SE PUEDEN MOVER COLUMNAS DATATABLE*/
  #dt-basic-example th[data-column-index]:hover {
    cursor: move;
  }

  /* BOTONES VARIOS CON CURSOR PUNTERO */
  #dt-basic-example th[data-column-index]::before,
  #dt-basic-example th[data-column-index]::after,
  #dt-basic-example_filter .input-group-text,
  select[name='dt-basic-example_length'] {
    cursor: pointer;
  }

  .dt-button.dropdown-item.active {
      border-left: 5px;
      border-style: solid;
      border-color: var(--theme-primary); /* rgb(126, 182, 255); */
      box-shadow: -2px 0px 0px 0px white;
  }

  /* Extender los translates del menú de la plantilla */
  .menu-open:checked ~ .menu-item:nth-child(8) {
    transition-duration: 550ms;
    transform: translate3d(0, -288px, 0);
  }

  .menu-open:checked ~ .menu-item:nth-child(9) {
    transition-duration: 550ms;
    transform: translate3d(0, -336px, 0);
  }

  .menu-open:checked ~ .menu-item:nth-child(10) {
    transition-duration: 550ms;
    transform: translate3d(0, -384px, 0);
  }

  .menu-open:checked ~ .menu-item:nth-child(11) {
    transition-duration: 550ms;
    transform: translate3d(0, -432px, 0);
  }

  ul.columns-2 {
      columns: 2;
  }

  ul.columns-3 {
      columns: 3;
  }

  ul.columns-4 {
      columns: 4;
  }

  li.column-separator {
      break-after: column;
      -moz-column-break-after: column;
      -webkit-column-break-after: column;
  }

  @media (max-width: 1200px) {
      ul.columns-4 {
          columns: 2;
      }
      li.column-separator {
          break-after: avoid;
          -moz-column-break-after: avoid;
          -webkit-column-break-after: avoid;
      }
      .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
          display: none;
      }
  }

  /* BREADCRUMBS */
  @media only screen and (max-width: 992px) {
    .page-wrapper .page-content .breadcrumb > .breadcrumb-item {
      max-width: 2000px;
    }
  }

  .floating-menu {
    background: #f6f6f6;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 10px;
  }

  .header-breadcrumbs-wrapper {
    background: #f6f6f6;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 5px;
    position: relative;
    border-radius: 14px;
  }

  .mod-skin-dark:not(.mod-skin-light) .header-breadcrumbs-wrapper {
    background: #303133;
  }

  .normalice-backgrounds {
      background-color: transparent !important;
      background-image: none !important;
  }

  /* ANIMACIÓN CARTA DE ACTUALIZACIONES */

  .updateCard,
  .pushTitle {
    transition: all 0.3s ease-in;
  }

  .updateCard:hover {
    transform: translateY(-10px);
  }

  .updateCard:hover .pushTitle {
    text-decoration: underline;
  }

  .reaction-select {
    transform: scale(1.2);
    z-index: 80 !important;
  }

  .reaction-disabled {
    opacity: 0.5;
    background-color: #6f6969 !important;
  }

  .page-sidebar {
    z-index: 999;
  }

  .dropdown-menu a {
    color: #212529 !important;
  }

  .p-component {
    font-size: 0.875rem !important;
  }

  .p-accordion-header-link {
    padding: 0.5rem !important;
  }

  .bg-new-row {
    background-color: rgb(234 234 234) !important;
  }

  .mod-skin-dark:not(.mod-skin-light) .bg-new-row {
    background-color: #4e4d4d !important;
  }

  .mod-skin-dark:not(.mod-skin-light) #formConstructor .bg-subtlelight {
    background-color: #414141 !important;
  }

  .mod-skin-dark:not(.mod-skin-light) .form-control,
  .mod-skin-dark:not(.mod-skin-light) .custom-file-label {
    border-color: inherit;
  }

  .form-control.is-invalid,
  .was-validated .form-control:invalid {
    border-color: #fd3995 !important;
  }

  .p-tabview-nav {
    flex-wrap: wrap !important;
  }

  .dataTables_empty {
    font-size: 1rem !important;
    color: var(--theme-primary-400) !important;
    padding: 1rem;
  }

  .logos-diagram-logo {
    background: url("/img/logos/diagram-logo.png") !important;
    height: 13px;
    width: 13px;
  }
  .logos-previnet-logo {
    background: url("/img/logos/previnet-logo.svg") !important;
    height: 13px;
    width: 13px;
  }
  .logos-cae-logo {
    background: url("/img/logos/cae-logo.svg") !important;
    height: 13px;
    width: 13px;
  }
  .disabled-style-custom {
    cursor: not-allowed;
    background-color: #adadaa !important;
    color: black !important;
  }

  #evaluation-prl-modal .not-allowed-events {
    cursor: not-allowed !important;
    pointer-events: none !important;
  }

  #file_upload .select2-search {
      display: none;
  }

  /* FILTROS DE DATATABLES QUE USEN SELECT2*/
  /* table tfoot tr th > select.select2 {
      position: relative !important;
  } */

  .mod-skin-dark:not(.mod-skin-light) .select2-search__field {
      color: white !important;
  }

  select[readonly] ~ .select2.select2-container .selection [role='combobox'] {
      background-color: #f3f3f3;
      opacity: 1;
  }

  .mod-skin-dark:not(.mod-skin-light) select[readonly] ~ .select2.select2-container .selection [role='combobox'] {
      background-color: rgba(132, 132, 132, 0.35) !important;
      color: #fff !important;
  }

  .select2-container.select2-container--default.select2-container--open {
      z-index: 10000;
  }

  .select2-selection__choice {
      display: flex;
      overflow: auto;
      padding-right: 5px !important;
  }

  .select2-selection__choice .select2-selection__choice__remove {
      order: 0 !important;
      padding-left: 0rem !important;
      margin-left: 5px !important;
      margin-right: 5px !important;
      border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
      border-left: none !important;
  }

  .select2-results__options::-webkit-scrollbar {
      width: 16px;
      background-clip: padding-box;
  }
  .select2-results__options::-webkit-scrollbar-track {
      background-color: #F4F4F4;
      height: 8px;
      background-clip: padding-box;
      border-right: 10px solid rgba(0, 0, 0, 0);
      border-top: 10px solid rgba(0, 0, 0, 0);
      border-bottom: 10px solid rgba(0, 0, 0, 0);
  }

  .select2-results__options::-webkit-scrollbar-thumb {
      background-clip: padding-box;
      background-color: #886ab5;
      border-right: 10px solid rgba(0, 0, 0, 0);
      border-top: 10px solid rgba(0, 0, 0, 0);
      border-bottom: 10px solid rgba(0, 0, 0, 0);
  }

  .select2-results__options::-webkit-scrollbar-button {
      display: none;
  }

  .select2-container--default .select2-results__option--highlighted[aria-selected=true]::before {
      content: "✔ ";
      color: #efebf5;
  }

  .mod-skin-dark:not(.mod-skin-light) #navbar-buttons {
      background-color: #303133;
  }

  /* .nav-footer {
      background: url("/img/backgrounds/madera.jpg") no-repeat 50% 52% !important;
  } */

  .badge-green {
      color: #050505 !important;
      background-color: #00ff00 !important;
  }

  .badge-grey {
      color: #ffffff !important;
      background-color: #8f8c8c !important;
  }

  .badge-white {
      color: #050505 !important;
      background-color: #ffffff !important;
  }

  .badge-red {
      color: #050505 !important;
      background-color: #ff0000 !important;
  }

  .badge-yellow {
      color: #050505 !important;
      background-color: #ffe600 !important;
  }


  /* Enlaces dentro de las badges */
  .badge-link {
      color: white !important;
      text-decoration: none  !important;
  }
  .badge-link:hover {
      color: white !important; /* Asegura que no cambie el color del texto */
  }

  .profile-image-lg {
      max-width: 16rem !important;
      max-height: 16rem !important;
      min-width: 16rem !important;
      min-height: 16rem !important;
  }
  @media (min-width: 500px) and (max-width: 767px){
      .profile-image{
          max-height: 2rem !important;
          max-width: 2rem !important;
          min-height: 2rem !important;
          min-width: 2rem !important;
      }
      .profile-image-lg {
          max-width: 6rem !important;
          max-height: 6rem !important;
          min-width: 6rem !important;
          min-height: 6rem !important;
      }
  }
   /*Móviles en horizontal o tablets en vertical*/
  @media (min-width: 768px) and (max-width: 1023px) {
      .profile-image{
          max-height: 2.5rem !important;
          max-width: 2.5rem !important;
          min-height: 2.5rem !important;
          min-width: 2.5rem !important;
      }
      .profile-image-lg {
          max-width: 8rem !important;
          max-height: 8rem !important;
          min-width: 8rem !important;
          min-height: 8rem !important;
      }
  }

   /*Tablets en horizonal y escritorios normales*/
  @media (min-width: 1024px) and (max-width: 1600px) {
      .profile-image{
          max-height: 2.5rem !important;
          max-width: 2.5rem !important;
          min-height: 2.5rem !important;
          min-width: 2.5rem !important;
      }
      .profile-image-lg {
          max-width: 11rem !important;
          max-height: 11rem !important;
          min-width: 11rem !important;
          min-height: 11rem !important;
      }
  }

  @media (min-width: 1600px) {
      .profile-image {
          max-height: 2.5rem !important;
          max-width: 2.5rem !important;
          min-height: 2.5rem !important;
          min-width: 2.5rem !important;
      }
  }

  .avanza-logo {
      background: url("/img/logos/avanza-icon.png") !important;
      height: 13px;
      width: 13px;
  }

  .swal-wide {
      width: 650px !important;
  }

  .panel-hdr.separator {
      min-height: 2.7rem;
      max-height: 2.7rem;
  }

  .dropdown-item.active{
      border-left: 5px;
      border-style: solid;
      border-color: #1dc9b7; /* rgb(126, 182, 255); */
      box-shadow: -2px 0px 0px 0px white;
      background-color: rgb(245, 245, 245);
  }

  .dropdown-item:hover{
      background-color: rgb(238, 238, 238);
  }

  .chatMessageBorder {
      box-shadow: 2px 2px rgb(153, 153, 153);
  }

  /* animacion rebote */
  .inflate {
      animation: inflate 0.4s alternate infinite;
  }
  @keyframes inflate {
      0% {
          font-size: 10px;
          color: black;
          box-shadow: 0px 0px 2px 0px rgb(255, 255, 255);
      }
      100% {
          font-size: 16px;
          color: red;
          box-shadow: 0px 0px 2px 0px grey;
      }
  }
  /* end animacion rebote */

  /* animacion parpadeo */
  .blink {
      animation: blink 0.5s alternate infinite;
  }

@keyframes arrow-blink {
    0%, 100% {
        background: linear-gradient(to right, transparent, #fff 25%) !important;
    }
    50% {
        background: linear-gradient(to right, transparent, #ffd7c8 25%) !important;
    }
}
  /* end animacion parpadeo */

  .panel-info {
      background-color: #eef7fd;
      border-left: 3px solid #1dc9b7;
  }

  .openAiRequestBtn {
      background: #654ea3;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #c492a6, #654ea3);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #c492a6, #654ea3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      color: #fff;
      border: 2px solid #c0ddff;
      border-radius: 7px;
      font-weight: bold;
  }

  .openAiRequestBtn:hover {
      color: white;
      font-weight: bold;
  }

  .openAiRequestBtn:active {
      transform: translateY(2px);
      background: -webkit-linear-gradient(to right, #aa7e90, #56438b);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #aa7e90, #56438b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }

  /* CKEDITOR */
  .ck-editor__editable_inline {
      min-height: 200px;
  }

  .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
      top: 4.125rem !important;
  }

  /* Scroll */
  .buttonScrollDiv {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
  }
  .buttonScrollDiv::-webkit-scrollbar {
      height: 6px;
  }
  .buttonScrollDiv {
      scrollbar-width: thin;
  }

  /* Efecto tembleque */
  .temblequeEffect {
      animation: tembleque 0.5s ease-in-out 1;
  }

  .avanza-alert-success {
      text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
      background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
      background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
      background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
      border-color: #1a5203 !important;
  }

  .avanza-alert-danger {
      border-color: #b40707 !important;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
      background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
      background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
      background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
      background-repeat: repeat-x;
      border-color: #b40707 !important;
  }

  .copy-btn {
      position: absolute;
      bottom: 0;
      right: 0;
      height: 60%;
      width: 25%;
      border: none;
      border-radius: 14px 0px 0px 0px;
      padding: 0;
      background-color: #E9E9E9FF;
      color: black;
      cursor: pointer;
  }

  .copy-btn:hover {
      background-color: #BABABAFF;
  }

  /* Estilo para botones con filas seleccionadas */
  tr.selected td .copy-btn {
      background-color: #9e76ca; /* Por ejemplo, un color distintivo */
      color: white; /* Cambiamos también el color del texto */
  }

  tr.selected td .copy-btn:hover {
      background-color: #8864ac; /* Un color más oscuro para el hover */
  }

  /* Estilo por defecto para botones en modo oscuro */
  .mod-skin-dark:not(.mod-skin-light) .copy-btn {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 25%;
      border: none;
      border-radius: 0;
      padding: 0;
      background-color: #555555; /* Color base para modo oscuro */
      color: white; /* Texto blanco para mayor contraste */
      cursor: pointer;
  }

  /* Hover para botones en modo oscuro */
  .mod-skin-dark:not(.mod-skin-light) .copy-btn:hover {
      background-color: #666666; /* Un color más claro para el hover */
  }

  /* Estilo para botones en filas seleccionadas (modo oscuro) */
  .mod-skin-dark:not(.mod-skin-light) tr.selected td .copy-btn {
      background-color: #6d44b6; /* Color distintivo */
      color: white; /* Contraste claro */
  }

  /* Hover para botones en filas seleccionadas (modo oscuro) */
  .mod-skin-dark:not(.mod-skin-light) tr.selected td .copy-btn:hover {
      background-color: #603d9f; /* Un color más oscuro para el hover */
  }


  @keyframes tembleque {
      0% {
          transform: rotate(0);
      }
      25% {
          transform: rotate(-3deg);
      }
      50% {
          transform: rotate(3deg);
      }
      75% {
          transform: rotate(-3deg);
      }
      100% {
          transform: rotate(0);
      }
  }

  .form-container {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-container label {
    display: block;
    font-weight: bold;
    color: #333;
}

.form-container input[type="month"],
.form-container input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
}

.checkbox-container input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

.checkbox-label {
    font-weight: normal;
    color: #666;
}

.number-inputs-container {
    display: flex;
    gap: 10px; /* Espacio entre los inputs, puedes ajustar el valor */
}

.number-input {
    flex: 1; /* Para que cada input ocupe el mismo espacio disponible */
}

/* Transición suave para todas las badges */
.badge-pill {
    transition: background-color 0.3s ease;
}

/* Badge primaria: cambio al pasar el ratón */
.badge-hover-primary:hover {
    background-color: #004085; /* Azul más oscuro */
}

/* Badge oscura: cambio al pasar el ratón */
.badge-hover-dark:hover {
    background-color: #23272b; /* Gris más oscuro */
}

/* Badge de éxito: cambio al pasar el ratón */
.badge-hover-success:hover {
    background-color: #1e7e34; /* Verde más oscuro */
}

.badge-hover-danger:hover {
    background-color: #7e1e61;
}

/* Enlaces dentro de las badges */
.badge-link {
    color: white;
    text-decoration: none;
}
.badge-link:hover {
    color: white; /* Asegura que no cambie el color del texto */
}

.btn-transparent-blue {
    background: transparent;
    border: 1px solid #007bff;
    color: #007bff;
    box-shadow: none;
    transition: background 0.2s, color 0.2s;
}
.btn-transparent-blue:hover, .btn-transparent-blue:focus {
    background: #007bff;
    color: #fff;
    text-decoration: none;
}

/* Enlace de factura en DataTables */
.btn-invoice-link {
    background: transparent;
    border: none;
    color: inherit;
    box-shadow: none;
    transition: all 0.2s ease;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
    text-decoration: none;
    display: inline;
    align-items: center;
    gap: 0.25rem;
}

.btn-invoice-link:hover, .btn-invoice-link:focus {
    background: transparent;
    color: #808080;
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}

.btn-invoice-link i {
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

.btn-invoice-link span, .btn-invoice-link i {
    font-weight: inherit;
    text-decoration: none;
}

/* GESTIÓN DOCUMENTAL v2 */
.card-gd {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 24px;
    overflow: hidden;
    transition: var(--transition);
}

.card-gd:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card-gd-header {
    background-color: #e7e7e7;
    padding: 20px;
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.card-gd-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-color);
}

.card-gd-subtitle {
    color: var(--gray-color);
    font-size: 1rem;
    margin-top: 4px;
}

.card-gd-body {
    padding: 20px;
}

.card-gd-footer {
    padding: 16px 20px;
    background-color: var(--light-color);
    border-top: 1px solid var(--light-gray);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-gd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    gap: 8px;
}

.search-container-gd {
    position: relative;
    margin-bottom: 20px;
    max-width: 400px;
}

.search-input-gd {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    transition: var(--transition);
}

.search-input-gd:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
}

.search-icon-gd {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-color);
}

.documents-grid-gd {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.document-card-gd {
    cursor: pointer;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
    overflow: hidden;
    border: 1px solid var(--light-gray);
    position: relative;
}

.document-card-gd.selected {
    background-color: var(--selected-color);
    border: 1px solid var(--primary-color);
}

.document-card-gd.selected .document-selection-indicator-gd {
    color: var(--primary-color);
}

.document-card-gd:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

#sendInvalid {
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 10px;
    display: none;
}

.document-header-gd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--light-gray);
    cursor: pointer;
    width: 100%;
    min-width: 0;
}

.document-selection-indicator-gd {
    color: #e0e0e0;
    font-size: 1.2rem;
    transition: var(--transition);
}

.document-icon-gd {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background-color: rgba(67, 97, 238, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.2rem;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.file-icon {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.file-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

 .fallback-icon {
    background-color: rgba(39, 174, 96, 0.1);
}

.document-info-gd {
    flex: 1;
    min-width: 0;
}

.document-name-container {
    position: relative;
    margin-bottom: 4px;
}

.document-name-gd {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    width: 100%;
    min-width: 0;
    font-size: 0.9rem;
}

.document-details-gd {
    padding: 16px;
    font-size: 0.9rem;
}

.document-detail-gd {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.document-detail-gd:last-child {
    margin-bottom: 0;
}

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

.detail-value-gd {
    font-weight: 500;
}

.document-actions-gd {
    padding: 12px 16px;
    border-top: 1px solid var(--light-gray);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.action-btn-gd {
    background: none;
    border: none;
    color: var(--gray-color);
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
    padding: 6px;
    border-radius: 4px;
}

.action-btn-gd:hover {
    color: var(--primary-color);
    background-color: rgba(67, 97, 238, 0.1);
}

.empty-state-gd {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-color);
}

.empty-icon-gd {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

.filter-message-gd {
    text-align: center;
    padding: 20px;
    color: var(--gray-color);
    font-style: italic;
}

.document-info-gd {
    flex: 1;
    min-width: 0; /* Importante para contener elementos flexibles */
}

.document-name-container {
    position: relative;
    margin-bottom: 4px;
}

.filename-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    min-width: 0;
    padding-right: 5px;
    padding-top: 7px;
}

.edit-name-btn {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.edit-name-btn:hover {
    color: #4361ee;
    background-color: rgba(67, 97, 238, 0.1);
}

/* Estilos para el modo edición */
.document-name-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.name-input {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    min-width: 0;
    font-family: inherit;
}


.name-input:focus {
    outline: none;
    border-color: #4361ee;
    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
}

.edit-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.save-name-btn, .cancel-name-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.save-name-btn {
    color: #28a745;
}

.save-name-btn:hover {
    background-color: rgba(40, 167, 69, 0.1);
}

.cancel-name-btn {
    color: #dc3545;
}

.cancel-name-btn:hover {
    background-color: rgba(220, 53, 69, 0.1);
}

/* GESTIÓN DOCUMENTAL RELACIONADA v2 */
.related-documents-section {
    padding: 1rem 0;
}

.related-documents-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.related-documents-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.related-documents-title {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.related-documents-title h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

.related-model-name {
    color: #4361ee;
    font-style: italic;
}

.related-documents-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
}

.related-documents-body {
    padding: 0;
}

.related-accordion {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    padding: 1.5rem;
}

.related-accordion-item {
    border-bottom: 1px solid #e9ecef;
}

.related-accordion-item:last-child {
    border-bottom: none;
}

.related-accordion-header {
    background: #f8f9fa;
    border: none;
}

.related-accordion-button {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #2c3e50;
    font-weight: 500;
}

.related-accordion-button:hover {
    background: rgba(67, 97, 238, 0.05);
    color: #4361ee;
}

.related-accordion-button[aria-expanded="true"] {
    background: rgba(67, 97, 238, 0.1);
    color: #4361ee;
}

.accordion-item-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1rem;
}

.accordion-indicator {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion-indicator i {
    transition: transform 0.3s ease;
}

.related-accordion-collapse {
    transition: all 0.3s ease;
}

.related-accordion-body {
    padding: 1.5rem;
    background: white;
    border-top: 1px solid #e9ecef;
}

/* Grid de documentos */
.related-documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Items de documento */
.related-document-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: white;
}

.related-document-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
    transform: translateY(-2px);
}

.related-document-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(67, 97, 238, 0.1);
    border-radius: 6px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.related-document-icon i {
    font-size: 1.2rem;
}

.related-document-info {
    flex: 1;
    min-width: 0;
}

.related-document-name {
    font-weight: 500;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.related-document-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.file-size, .file-date {
    display: flex;
    align-items: center;
}

.file-size::before {
    content: "📦";
    margin-right: 0.25rem;
}

.file-date::before {
    content: "🕒";
    margin-right: 0.25rem;
}

/* Acciones de documento */
.related-document-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.related-document-actions .action-btn-gd {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.related-document-actions .action-btn-gd:hover {
    color: #4361ee;
    background: rgba(67, 97, 238, 0.1);
}

.related-documents-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.related-documents-empty i {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.related-documents-empty p {
    margin: 0;
    font-size: 1.1rem;
}

.related-accordion-collapse {
    transition: height 0.3s ease;
}

.btn-paste-clipboard {
    border-left: none !important;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    transition: all 0.15s ease-in-out;
    border-color: #e5e5e5 !important;
}

.btn-paste-clipboard:hover {
    background-color: var(--hover-bg, #f8f9fa) !important;
    color: var(--hover-color, #495057) !important;
    border-color: var(--hover-border, #e5e5e5) !important;
}

.btn-paste-clipboard.btn-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
    --hover-bg: #c44753;
    --hover-color: #fff;
    --hover-border: #bd2130;
}

.btn-paste-clipboard.btn-success {
    background-color: #28a745 !important;
    color: #fff !important;
    border-color: #28a745 !important;
    --hover-bg: #3ba353;
    --hover-color: #fff;
    --hover-border: #218838;
}

/* Select2 small container fixes */
.select2-sm + .select2-container {
    display: block;
    width: 100% !important;
}

/* Estilos base del select */
.select2-sm + .select2-container .select2-selection {
    display: block !important;
    width: 100% !important;
    height: 28px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    background-clip: padding-box !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0.2rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    box-sizing: border-box !important;
}

@media (prefers-reduced-motion: reduce) {
    .select2-sm + .select2-container .select2-selection {
        transition: none !important;
    }
}

.select2-sm + .select2-container .select2-selection::-ms-expand {
    border: 0 !important;
}

.select2-sm + .select2-container .select2-selection:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 #495057 !important;
}

/* Contenedor del texto */
.select2-sm + .select2-container .select2-selection--single {
    display: block !important;
    width: 100% !important;
    height: 27px !important;
    font-size: 0.7875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    background-clip: padding-box !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    box-sizing: border-box !important;
}

.select2-sm + .select2-container .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 2.75rem 0 0.5rem !important;
    font-size: 0.7875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ajuste de la flecha para que flote sobre el texto */
.select2-sm + .select2-container .select2-selection__arrow {
    position: absolute !important;
    right: 0 !important;
    top: 1px !important;
    bottom: 1px !important;
    width: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    border-radius: 0 0.2rem 0.2rem 0 !important;
}

.select2-sm + .select2-container .select2-selection__arrow b {
    border-color: #495057 transparent transparent transparent !important;
}

/* Botón de limpiar general */
.select2-sm + .select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 1.25rem !important;
    top: 1px !important;
    bottom: 1px !important;
    width: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    color: #dc3545 !important;
    opacity: 0.7 !important;
    font-size: 0.7875rem !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.select2-sm + .select2-container .select2-selection--single .select2-selection__clear:hover {
    opacity: 1 !important;
}

/* Botón de limpiar para multiselect */
.select2-sm + .select2-container .select2-selection--multiple .select2-selection__clear {
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    bottom: 1px !important;
    width: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    color: #495057 !important;
    opacity: 0.7 !important;
    font-size: 0.7875rem !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.select2-sm + .select2-container .select2-selection--multiple .select2-selection__clear:hover {
    opacity: 1 !important;
}

/* Contenedor principal del multiselect */
.select2-sm + .select2-container .select2-selection--multiple {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    min-height: 27px !important;
    height: auto !important;
    max-height: 100px !important;
    padding: 0 !important;
    font-size: 0.7875rem !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    overflow-y: auto !important;
}

/* Contenedor de las opciones */
.select2-sm + .select2-container .select2-selection--multiple .select2-selection__rendered {
    flex: 1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    padding: 0.15rem 0.25rem !important;
    margin-left: 1rem !important;
    min-height: 26px !important;
    align-items: center !important;
}

/* Botón de limpiar para select normal */
.select2-sm + .select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    z-index: 2 !important;
}

/* Botón de limpiar para multiselect */
.select2-sm + .select2-container .select2-selection--multiple .select2-selection__clear {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #495057 !important;
    font-size: 0.875rem !important;
    background: #fff !important;
    z-index: 2 !important;
}

/* Opciones seleccionadas */
.select2-sm + .select2-container .select2-selection--multiple .select2-selection__choice {
    border: 1px solid #e5e5e5 !important;
    margin: 0 !important;
    padding: 0.1rem 0.25rem !important;
    font-size: 0.7875rem !important;
    line-height: 1.5 !important;
    border-radius: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: fit-content !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* X de las opciones */
.select2-sm + .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #495057 !important;
    margin-right: 0.15rem !important;
    font-size: 0.7875rem !important;
    cursor: pointer !important;
    order: -1 !important;
}

.select2-sm + .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 0.7 !important;
}

/* Campo de búsqueda */
.select2-sm + .select2-container .select2-selection--multiple .select2-search__field {
    margin: 0 !important;
    padding: 0 !important;
    height: 18px !important;
    font-size: 0.7875rem !important;
    min-width: 50px !important;
}