@font-face {
    font-family: 'CRRNTNOutline'; /* Nombre personalizado de la fuente */
    src: url('font/CRRNTN-Outline.eot'); /* Archivo .eot (compatibilidad con IE) */
    src: url('font/CRRNTN-Outline.eot?#iefix') format('embedded-opentype'),
         url('font/CRRNTN-Outline.woff2') format('woff2'), /* Archivo woff2 (moderno) */
         url('font/CRRNTN-Outline.woff') format('woff'),   /* Archivo woff */
         url('font/CRRNTN-Outline.ttf') format('truetype'), /* Archivo ttf */
         url('font/CRRNTN-Outline.svg#CRRNTNOutline') format('svg'); /* Archivo svg */
    font-weight: normal;
    font-style: normal;
}

.borde_discontinuo{
  border:solid 2px #CCC;
  border-style:dashed;
  color: #CCC;
  padding: 20px;
  border-radius: 5px;
}

.borde_discontinuo:hover{
  border:solid 2px #999;
  border-style:dashed;
  color: #999;
  padding: 20px;
  border-radius: 5px;
}

.tablafugaz{
    width: 100%;
}
.tablafugaz thead{
    background-color: #F1F1F1;
    font-size: 12px;
}
.tablafugaz th{
    padding: 8px;
}

.tablafugaz tbody{
    background-color: #F1F1F1;
    font-size: 12px;
}

.tablafugaz tbody td{
    padding: 8px;
}


.botoncerrar{
    /*background-color: #F00;*/
    border: solid 0px #F00;
    padding-right: 15px;
    padding-left: 15px;
    color: #FFF;
    border-radius: 3px;
}

.botonmover{
    background-color: transparent;
    border: solid 1px #999;
    padding-right: 15px;
    padding-left: 15px;
    color: #999;
    border-radius: 3px;
}


/* Ajustes de color, bordes y sombras para coincidir con el diseño de tu formulario */
.select2-container .select2-selection--single {
    height: 100% !important;
    border-radius: 0.375rem;
    border-color: #d1d3e2; /* Color de borde del formulario */
    box-shadow: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.select2-container .select2-selection__arrow b {
    border-color: #6c757d transparent transparent transparent;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #5a5c69;
    font-size: 1rem;
    padding-left: 0.75rem;
}

.select2-dropdown {
    border-radius: 0.375rem;
    border-color: #d1d3e2;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(58 59 69 / 15%);
}

/* Cambia la posición y el color de la "X" */
.select2-container .select2-selection__clear {
    color: #dc3545; /* Cambia el color */
    right: 25px; /* Ajusta la posición horizontal */
    top: 50%; /* Ajusta la posición vertical */
    transform: translateY(0%); /* Centra verticalmente */
    font-size: 14px; /* Tamaño del texto */
}

/* Cambia la posición y el color de la flecha en Select2 */
.select2-container .select2-selection__arrow {
    top: 50%; /* Ajusta la posición vertical */
    right: 8px; /* Ajusta la posición horizontal */
    transform: translateY(20%); /* Centra la flecha verticalmente */
    color: #007bff; /* Cambia el color de la flecha */
}


/* Remueve el borde interno oscuro de la caja de búsqueda en Select2 */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #999; /* Color de borde personalizado */
    outline: none; /* Remueve el borde adicional de enfoque */
    box-shadow: none; /* Remueve cualquier sombra interna */
}

/* Mantén el estilo de borde y sombra en el enfoque */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #CCC; /* Color de borde en el foco */
    /* box-shadow: 0 0 5px rgba(243, 156, 18, 0.6);  Sombra externa en el foco */
}

/*SCROLL*/

/* Personalizar la barra de desplazamiento del menú de resultados de Select2 */
.select2-container--default .select2-results__options {
    max-height: 200px; /* Altura máxima del área de resultados */
    overflow-y: auto; /* Habilitar el scroll vertical */
    scrollbar-width: thin; /* Para navegadores que soportan scrollbar-width */
    scrollbar-color: #ccc transparent; /* Color de la barra y del fondo */
}

/*SELECCION*/

/* Cambiar el color de fondo y de texto cuando se selecciona una opción */
.select2-container--default .select2-results__option--selected {
    background-color: #DDD; /* Color de fondo para la opción seleccionada */
    color: white; /* Color de texto para la opción seleccionada */
    /*font-weight: bold;  Opcional: negrita para la opción seleccionada */
}

/* Cambiar el color de fondo y de texto cuando pasas el cursor por una opción */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #BBB; /* Color de fondo para la opción destacada */
    color: white; /* Color de texto para la opción destacada */
}


.invoise{
    font-size: 13px !important;
}

.invoise p{
    font-size: 13px !important;
}

.marcadeagua {
    position: absolute;
    top: 35% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%; /* Ajusta el tamaño según necesites */
    opacity: 0.1; /* Ajusta la opacidad para el efecto de marca de agua */
    z-index: 0;
    pointer-events: none;
}


.sellodeagua {
    position: absolute;
    top: 10%;
    left: 30%;
/*    transform: translate(-50%, -50%);*/
    width: 30%; /* Ajusta el tamaño según necesites */
    opacity: 0.5; /* Ajusta la opacidad para el efecto de marca de agua */
    z-index: 5;
    pointer-events: none;
}


.marcadeaguareporte {
    position: absolute;
    top: 60% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%; /* Ajusta el tamaño según necesites */
    opacity: 0.1; /* Ajusta la opacidad para el efecto de marca de agua */
    z-index: 0;
    pointer-events: none;
}


.sellodeaguareporte {
    position: absolute;
    top: 15%;
    left: 30%;
/*    transform: translate(-50%, -50%);*/
    width: 30%; /* Ajusta el tamaño según necesites */
    opacity: 0.5; /* Ajusta la opacidad para el efecto de marca de agua */
    z-index: 5;
    pointer-events: none;
}


.tablalista{
    padding: 10px !important;
}

.tablalista th{
    font-size: 12px !important;
    padding-left: 8px !important;
    background-color: #F1F1F1 !important;
}

.tablalista td{
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  
    font-size: 12px !important;
    padding-left: 8px !important;
}

.tablalista td p{
    font-size: 12px !important;
}




.tablaresumen{
    padding: 10px !important;
    
}

.tablaresumen th{
    font-size: 12px !important;
    padding-left: 8px !important;
    font-weight: bold;
    background-color: #F1F1F1 !important;
}

.tablaresumen td{
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  
    font-size: 12px !important;
    padding-left: 8px !important;
}

.tablaresumen td p{
    font-size: 12px !important;
}




.tablaresumen2{
    padding: 10px !important;
}

.tablaresumen2 th{
    font-size: 12px !important;
    padding-left: 8px !important;
    font-weight: bold;
    background-color: #F1F1F1 !important;
    border: solid 1px #DDD;
    padding: 5px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.tablaresumen2 td{
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    font-size: 12px !important;
    border: solid 1px #DDD;
    padding: 5px !important;
}

.tablaresumen2 tr{
    border: solid 1px #CCC;

}



.tablaresumen2 tbody{
    border: solid 1px #CCC;
}

.tablaresumen2 td p{
    font-size: 12px !important;
}




.tablalistaoscuro{
    padding: 10px !important;
}

.tablalistaoscuro th{
    font-size: 12px !important;
    padding-left: 8px !important;
    background-color: #1f233e !important;
}



.tablalistaoscuro td{
    font-size: 12px !important;
    padding-left: 8px !important;
}

.btn-xs {
    padding: 2px 4px 1px 1px; /* Ajusta el padding para hacerlo más pequeño */
    font-size: 12px; /* Ajusta el tamaño de la fuente si es necesario */
    width: 30px; /* Ajusta el ancho */
    height: 30px; /* Ajusta la altura */
    line-height: 2; /* Alinea el icono mejor */
}

.tableinvoise{
    width: 100%;
}

.tableinvoise thead{
    background-color: #555;
    color: #fff;
}

.tableinvoise th{
    padding: 5px;
}

.tableinvoise td{
    padding: 5px !important;
}

/*FUNCIONES PARA EL BOTON POSPUESTO*/
#firma-evaluador-container {
    position: relative; /* Necesario para posicionar elementos dentro */
    display: inline-block; /* Asegura que el contenedor se ajuste al contenido */
  }

  #firma-evaluador-container img {
    max-width: 250px;
    height: auto;
    display: block; /* Asegura que la imagen no tenga espaciado extra */
  }

  #pospuesto-btn {
    position: absolute; /* Posiciona relativo al contenedor */
    bottom: -10px; /* Ajusta la posición hacia afuera ligeramente */
    right: -10px; /* Ajusta hacia afuera de la imagen */
    padding: 5px 10px;
    background-image: linear-gradient(310deg, #ced4da, #d1dae6);
    color: #777;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra ligera */
  }

  #pospuesto-btn:hover {
    color: #333;
  }



/*estilo numero 2*/

#firma-container {
    position: relative; /* Necesario para posicionar elementos dentro */
    display: inline-block; /* Asegura que el contenedor se ajuste al contenido */
  }

  #firma-container img {
    max-width: 250px;
    height: auto;
    display: block; /* Asegura que la imagen no tenga espaciado extra */
  }

  #pospuesto2-btn {
    position: absolute; /* Posiciona relativo al contenedor */
    bottom: -10px; /* Ajusta la posición hacia afuera ligeramente */
    right: -10px; /* Ajusta hacia afuera de la imagen */
    padding: 5px 10px;
    background-image: linear-gradient(310deg, #ced4da, #d1dae6);
    color: #777;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra ligera */
  }

  #pospuesto2-btn:hover {
/*    background-color: #0056b3;*/
color: #333;
  }


/*ESTILO DE PAGINACION*/
.pagination {
   
}

.pagination .page-item {
    margin: 0 5px; /* Espaciado entre los botones */
}

.pagination .page-link {
    color: #cb0c9f; /* Azul primario */
    border-radius: 50%; /* Forma circular */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease; /* Transición suave */
}

.pagination .page-link:hover {
    background-image: linear-gradient(310deg, #7928ca, #ff0080); /* Fondo azul al pasar el mouse */
    color: #fff; /* Texto blanco */
}

.pagination .page-item.active .page-link {
    background-image: linear-gradient(310deg, #7928ca, #ff0080); /* Fondo azul activo */
    color: #fff; /* Texto blanco */
    border: none;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d; /* Texto gris */
    cursor: not-allowed;
    background-color: #e9ecef; /* Fondo gris claro */
}





/*MODALES*/


.modal-content {
    border: none; /* Elimina los bordes */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Sombra suave */
    overflow: hidden; /* Esconde cualquier contenido desbordado */
}

/* Header styling */
.modal-header {
    /*background-color: #4CAF50;  Color de fondo moderno */
    color: #fff; /* Texto blanco */
    padding: 15px 20px;
    border-bottom: none; /* Elimina la línea entre el header y el body */
}

/* Body styling */
.modal-body {
    padding: 20px;
    font-family: 'Roboto', sans-serif; /* Fuente profesional */
    font-size: 16px;
    color: #333; /* Color de texto */
}

/* Footer styling */
.modal-footer {
    /* background-color: #f9f9f9;  Fondo claro */
    border-top: none; /* Elimina la línea entre el body y el footer */
    padding: 15px 20px;
    text-align: right;
}

/* Botones dentro del modal */
.modal-footer .btn {
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 14px;
}

/* Botón de cerrar */
/*.modal-header .btn-close {
    color: #000 !important;
    opacity: 0.8;
}

.modal-header .btn-close:hover {
    opacity: 0.5;
}
*/
/* Efecto de fondo del modal */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro con transparencia */
}

/* Animaciones */
.modal.fade .modal-dialog {
    transform: translate(0, -20px);
    opacity: 0;
    transition: all 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: translate(0, 0);
    opacity: 1;
}

button:disabled {
  cursor: not-allowed !important;
}






/*BOTON CERRAR DE LOS MODALES*/

/* Cambiar el color de la X del botón de cierre */
.btn-close {
    color: #AAA !important; /* Cambia este valor por el color que desees, por ejemplo, negro */
    opacity: 0.5; /* Asegúrate de que la opacidad esté al 100% */
    border:solid 1px #FFF !important; /* Establece el fondo como transparente */
    border: none; /* Asegúrate de que no haya borde visible */
    padding-top: 0px !important;

}

/* Estilo cuando el usuario pasa el ratón sobre el botón */
.btn-close:hover {
    color: #FF0000; /* Cambiar color al pasar el ratón, ejemplo: rojo */
}

/* Verificar si el modal o los elementos padre tienen alguna propiedad que esté ocultando el botón */
.modal-backdrop {
    z-index: 1040 !important; /* Asegura que el fondo del modal no esté cubriendo el contenido */
}

.modal-content {
    position: relative;
    z-index: 1050; /* Asegura que el contenido del modal esté en frente de otros elementos */
}


.tablemodal{
    width: 100%;
}


.tablemodal thead{
    background-color: #F1F1F1;
    color: #000;
    font-size: 11px;
    padding: 8px !important;
    border: solid 1px #ccc;
}

.tablemodal th{
    font-size: 11px;
    padding: 5px;
    border: solid 1px #ccc;
}

.tablemodal td{
    font-size: 11px;
    padding: 5px;
    border: solid 1px #ccc;
}

.tablemodal tr{
    border: solid 1px #ccc;
}

.tablemodal li{
    color: #980101;
}



/*MODO OSCURO*/

.tablemodal-oscuro{
    width: 100%;
}


.tablemodal-oscuro thead{
    background-color: #1f233e;
    color: #FFF;
    font-size: 11px;
    padding: 8px !important;
    border: solid 1px #ccc;
}

.tablemodal-oscuro th{
    font-size: 11px;
    padding: 5px;
    border: solid 1px #ccc;
}

.tablemodal-oscuro td{
    font-size: 11px;
    padding: 5px;
    border: solid 1px #ccc;
    color: #999 !important;
}

.tablemodal-oscuro tr{
    border: solid 1px #ccc;
}

.tablemodal-oscuro li{
    color: #FFF;
}

.textoadmin{
    color: #888 !important;
}

.textoadminoscuro{
    color: #fff !important;
}