.1nav-tabs-custom .nav-item .nav-link.active {
  color: white;
  background: #f2f5fa;
  color: var(--cmColorBGTable);
  
}

.sin-registros {
  text-align: center;
  padding: 40px 0;
  color: #6c757d;
  /* Gris moderno */
  font-size: 16px;
  font-style: italic;
}

.sin-registros img {
  max-width: 150px;
  margin-bottom: 10px;
  opacity: 0.7;
}

tr.odd td {
  background-color: blue !important;
}

.table>thead>tr>th {
  background-color: #f8f8f8;
  vertical-align: middle;
  font-weight: 500;
  color: black;
}

.table>thead>tr>.isOrdenable {
  cursor: pointer;
}

.table>thead>tr>.selected_down:after {
  content: ' ▼';
  font-size: 12px;
  margin-left: 3px;
}

.table>thead>tr>.selected_up:after {
  content: ' ▲';
  font-size: 12px;
  margin-left: 3px;
}


.borderTopClarito {
  border-top: 1px solid #eef0f3;
  padding-left: 18px;
  padding-right: 18px;
}

.divTable {
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
}

.divTable>thead>tr>th {
  background-color: var(--cmColorBGTable);
  color: #f0f4f8;
}

.divTable>thead>tr>th.selected {
  background-color: var(--cmColorSEL);
  color: #f0f4f8;
}

.lstrow {
  cursor:pointer;
}
.lstrow:hover {
  
  background-color: #F0F0F0;
  background-color: #EAEAEA;
  background-color: #FFF8D6;
  background-color: #D0E6FF;
  
  color: #ffffff;
}

.divTable .lstrowsel>td {
  background-color: #F0F0F0 !important; /* Color azul claro para la selección */
}


.dots {
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  background-color: var(--bs-pagination-bg);
}

.btnLabel {
  font-size: 15px;
  margin: 7px 7px 7px 0;
  font-weight: 500;
  float: left;
  margin-top: 15px;
  font-style: italic;
}

/* Aumenta el tamaño del checkbox */
.custom-checkbox {
  width: 25px;
  height: 25px;
  position: relative;
}

/* Estilo del cuadrado normal */
.custom-checkbox::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 1px solid #8687a7;
  /* Cambia el color del borde si es necesario */
  border-radius: 4px;
  /* Borde redondeado para un estilo más suave */
  background-color: white;
  /* Fondo blanco */
  transition: all 0.2s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

/* Oculta el cuadrado cuando el checkbox está marcado */
.custom-checkbox:checked::before {
  border: none;
  /* Quita el borde */
  background-color: transparent;
  /* Fondo transparente */
}

/* Aparece el tick cuando se selecciona */
.custom-checkbox:checked {
  background-color: transparent;
  /* Color de fondo verde */
  border: 0px;
  border-radius: 0px;
  display: inline-block;
  position: relative;
}

.custom-checkbox:checked::after {
  content: "\2714";
  /* Código Unicode del tick */
  position: absolute;
  top: 0px;
  left: 5px;
  font-size: 20px;
  color: #2f4ab9;
  /* Cambia el color del tick */
  transition: all 0.2s ease-in-out;
}

.custom-checkbox:focus {
  outline: none;
  box-shadow: none;
  /* Elimina cualquier sombra de enfoque */
}

.selectAll:checked {
  background-color: var(--cmColorSEL);
}

.selectAll:hover {
  background-color: var(--cmColorSEL);
  /* Un tono más claro al hacer hover */
}

/* Estado seleccionado */
.btn-filtro.btn-filtro-sel {
  background-color: var(--cmColorSEL);
  /* Color cuando está seleccionado */
  color: #ffffff;
  /* Color de texto */
  border: 1px solid var(--cmColorBGTable);
  /* Un borde más visible */
}

.btnFiltroAdv {
  background-color: transparent;
  color: #8687a7;
}

.btnFiltroAdv .noactivo {
  color: #8687a7;
}

.btnFiltroAdv .activo {
  color: var(--cmColorSEL);
}

/* Cuando .btnFiltroAdv NO tiene la clase .selected */
.btnFiltroAdv:not(.selected) .noactivo {
  display: inline;
  /* Mostrar el ícono noactivo */
}

.btnFiltroAdv:not(.selected) .activo {
  display: none;
  /* Ocultar el ícono activo */
}

/* Cuando .btnFiltroAdv SÍ tiene la clase .selected */
.btnFiltroAdv.selected .noactivo {
  display: none;
  /* Ocultar el ícono noactivo */
}

.btnFiltroAdv.selected .activo {
  display: inline;
  /* Mostrar el ícono activo */
}

.btn-Red {
  --bs-btn-color: #fff;
  --bs-btn-bg: #d5270d;
  --bs-btn-border-color: #d5270d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #991b08;
  --bs-btn-hover-border-color: #cc5a49;
  --bs-btn-focus-shadow-rgb: 255, 134, 116;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cc5a49;
  --bs-btn-active-border-color: #991b08;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d5270d;
  --bs-btn-disabled-border-color: #d5270d;
}

.form-check-input {
  border: 0px;
  background-image: none;
}

.datepicker-dropdown {
  z-index: 1055 !important;
  /* Asegúrate de que sea mayor que el z-index del modal */
}

.rowFilter {
  background-color: #115b7e !important;
  padding: 15px;
}

.form-check-input {
  cursor: pointer;
}

/* BARRA DE EDITAR LISTADO */

.editbar-contentAll {
  transform: translateY(100px);
  opacity: 0;
  align-items: center;
  justify-content: center;
  overflow-x: scroll;
  overflow-y: hidden;
  background: rgba(204, 204, 204, 0.5);
  -ms-overflow-style: none;
  width: calc(100% - 15rem);
  height: 130px;
  right: 0;
  scrollbar-width: none;
  position: fixed;
  bottom: 0px;
}

.bottom-bar {
  margin-bottom: 100px;
}

.editbar-contentAll.show {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.editbar-contentAll.hidden {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.5s ease-in, opacity 0.5s ease-in;
}

/* FIN BARRA EDITAR LISTADO */
.rowActions-content {
  border: 1.5px solid #115b7e;
  opacity: 1;
  transition: opacity 1s;
  border-radius: 30px;
  height: 80px;
  width: 985px;
  padding-left: 0;
  padding-right: 0;
  bottom: 20px !important;
}

.rowActions {
  background: #115b7e !important;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}


.scrollable-content {
  width: 100%;
  height: 70px;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

.rowActions .row {
  height: 70px;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 30px;
}

.lstActions {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.lstActions .container {
  height: 70px;
  max-width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.lstActions .container .row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.invoicesData-content {
  height: 70px;
}

.action-buttons {
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.action-buttons button {
  min-width: 91px;
}

.editbar-Button {
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 1s ease, box-shadow 1s ease;
  justify-content: center;
}

.editbar-Button:hover {
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.5));
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  /* Sombra delicada */
  transform: translateY(-2px);
  /* Movimiento sutil */
  color: rgba(0, 0, 0, 0.8);
}

.editbar-Button:last-child {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.editBar-text {
  color: #FFFFFF;
  font-size: 12px;
}

.editbar-invoicesData {
  height: 90px;
}

.editbar-numRecords,
.editbar-totalInvoices {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 70px;
}

.editbar-numRecords p,
.editbar-totalInvoices p {
  margin-bottom: 0;
}

.editbar-numRecords span,
.editbar-totalInvoices span {
  font-size: 11px;
}

.editbar-svgIcon {
  fill: #FFFFFF;
  height: 45px;
  width: 45px;
}

.editbar-numRecords h6,
.editbar-totalInvoices h6 {
  font-size: 12px;
}

/* FIN BARRA EDITAR LISTADO */

.contact-info {
  display: flex;
  flex-direction: column;
}

.contact-info .phone,
.contact-info .email {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.contact-info i {
  margin-right: 8px;
}

.contact-info span {
  font-size: 14px;
}

.error-message {
  color: red;
  font-size: 0.875em;
  margin-top: 0.25em;
}

.error-field {
  border-color: red;
}

.select2-container {
  background-color: var(--bs-input-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.select2-container--open {
  z-index: 9999999
}

.select2-container .select2-dropdown {
  z-index: 1051;  
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--cmColorBG);
  border: 1px solid var(--cmColorBG);
  color: white;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  background-color: var(--cmColorBG);
  color: white;
  color:black;    
  outline: none;
}

.modal {
  --bs-modal-width: 700px;
}

.modal-content1 {
  height: auto;
}



:root {
  --bs-input-bg: white;
  border-color: #dbecff;
  -bs-border-color: #dbecff;

}

.inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  width: 25px;
  height: 25px;
  padding: 3px;
  background-color: #eee;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;

}

.inicial .letra {
  font-size: 12px;
  font-weight: 800;
  line-height: normal;
}

.letraA {
  background-color: #FF6F61;
  color: #FFFFFF;
}

/* Coral suave */
.letraB {
  background-color: #6B8E23;
  color: #FFFFFF;
}

/* Verde oliva oscuro */
.letraC {
  background-color: #4682B4;
  color: #FFFFFF;
}

/* Azul acero */
.letraD {
  background-color: #D87093;
  color: #FFFFFF;
}

/* Rosa pálido */
.letraE {
  background-color: #FFD700;
  color: #000000;
}

/* Dorado */
.letraF {
  background-color: #40E0D0;
  color: #000000;
}

/* Turquesa */
.letraG {
  background-color: #FFA07A;
  color: #000000;
}

/* Salmón claro */
.letraH {
  background-color: #8A2BE2;
  color: #FFFFFF;
}

/* Violeta oscuro */
.letraI {
  background-color: #DC143C;
  color: #FFFFFF;
}

/* Carmesí */
.letraJ {
  background-color: #20B2AA;
  color: #FFFFFF;
}

/* Verde mar */
.letraK {
  background-color: #FF8C00;
  color: #FFFFFF;
}

/* Naranja oscuro */
.letraL {
  background-color: #87CEEB;
  color: #000000;
}

/* Azul cielo claro */
.letraM {
  background-color: #C71585;
  color: #FFFFFF;
}

/* Rosa mexicano */
.letraN {
  background-color: #32CD32;
  color: #FFFFFF;
}

/* Verde lima */
.letraO {
  background-color: #FF4500;
  color: #FFFFFF;
}

/* Naranja rojizo */
.letraP {
  background-color: #6A5ACD;
  color: #FFFFFF;
}

/* Azul pizarra */
.letraQ {
  background-color: #FF69B4;
  color: #FFFFFF;
}

/* Rosa intenso */
.letraR {
  background-color: #3CB371;
  color: #FFFFFF;
}

/* Verde mar medio */
.letraS {
  background-color: #CD5C5C;
  color: #FFFFFF;
}

/* Rojo indio */
.letraT {
  background-color: #1E90FF;
  color: #FFFFFF;
}

/* Azul dodger */
.letraU {
  background-color: #FFDAB9;
  color: #000000;
}

/* Melocotón */
.letraV {
  background-color: #8FBC8F;
  color: #000000;
}

/* Verde oscuro */
.letraW {
  background-color: #FF1493;
  color: #FFFFFF;
}

/* Rosa profundo */
.letraX {
  background-color: #48D1CC;
  color: #FFFFFF;
}

/* Aguamarina medio */
.letraY {
  background-color: #FF6347;
  color: #FFFFFF;
}

/* Tomate */
.letraZ {
  background-color: #66CDAA;
  color: #FFFFFF;
}

/* Verde medio */

.div_upload {
  min-height: 124px;
  padding-top: 50px;
  padding-bottom: 50px;
  vertical-align: top;
  background-color: rgb(255 255 255);
  border: 2px dashed #d1d5db;
  border-radius: 8px;
}

.dragover {
  background-color: #e0e0e0;
  border-color: #333;
  color: #333;
}

.modal-backdrop.show {
  --bs-backdrop-opacity: 0.75;
}

.bg-tipomov {
  padding: 5px;
  cursor: pointer;
  font-size: 12px;
}

.bg-tipomov-M0 {
  background-color: #8687a7;
}

.bg-tipomov-VI {
  background-color: #306161;
}

.bg-tipomov-VD {
  background-color: #800000;
}

.bg-tipomov-CG {
  background-color: #660066;
}

.bg-tipomov-CD {
  background-color: #008000;
}

.bg-tipomov-I {
  background-color: #008000;
}

.bg-tipomov-G {
  background-color: #800000;
}

.bg-tipomov-DI {
  background-color: #800000;
}

.bg-tipomov-DG {
  background-color: #008000;
}

.bg-tipomov-0 {
  background-color: #8687a7;
}

.bg-pago-WA {
  background-color: #F2CE15;
}

.bg-pago-KO {
  background-color: #800000;
}

.bg-pago-OK {
  background-color: #007BFF;
}

.bg-pago-CN {
  background-color: #8687a7;
}



.bg-emitir {
  padding: 5px;
  cursor: pointer;
}

.bg-emitir-0 {
  background-color: #8687a7;
}

.bg-emitir-1 {
  background-color: #007BFF;
}


.bg-send {
  position: relative;
  padding: 5px;
  font-size: 12px;
  position: relative;
  cursor: pointer;
}

.bg-send-000 {
  background-color: #8687a7;
  color: white;
}

.bg-send-001 {
  background-color: #007BFF;
  color: white;
}

.bg-send-002 {
  background-color: #25D366;
  color: white;
}

.bg-send-003 {
  background-color: #25D366;
  color: white;
}

.badge-check {
  position: absolute;
  bottom: -3px;
  right: -3px;
  background: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.badge-check_001 i {
  color: #8687a7;
  font-size: 10px;
}

.badge-check_002 i {
  color: #8687a7;
  font-size: 10px;
}

.badge-check_003 i {
  color: #0af15f;
  font-size: 10px;
}

/* Opcional: doble check */
.badge-check.doble i:nth-child(1) {
  position: absolute;
  left: 2px;
}

.badge-check.doble i:nth-child(2) {
  position: absolute;
  right: 2px;
}

.handle {
  cursor: grab;
}

.tblFactura {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: auto;
  /* Habilitar scroll horizontal si es necesario */
}

.tblFactura .data-row,
.header-row {
  display: flex;
  width: 100%;
  /* Asegurarse de que cada fila ocupe el 100% */
}

.tblFactura .cell,
.header-cell {
  border-bottom: 1px solid #dee2e6;
  text-align: center;
}

.tblFactura .cell {
  cursor: move;
}

.tblFactura .header-cell {
  font-weight: bold;
  background-color: #568AAF;
  color: white;
}

/* Columnas fijas */
.tblFactura .concepto {
  flex: 1;
}

.tblFactura .codigo {
  width: 100px;
}

.tblFactura .precio {
  width: 130px;
}

.tblFactura .cantidad {
  width: 100px;
}

.tblFactura .descuento {
  width: 100px;
}

.tblFactura .imp1 {
  width: 100px;
}

.tblFactura .imp2 {
  width: 100px;
}

.tblFactura .imp3 {
  width: 100px;
}

.tblFactura .imp4 {
  width: 100px;
}

.tblFactura .fld1 {
  width: 100px;
}

.tblFactura .medida {
  width: 100px;
}

.tblFactura .total {
  width: 140px;
}

.tblFactura .delete,
.tblFactura .add,
.tblFactura .drag {
  display: flex;
  align-items: center;
  /* Centrar verticalmente */
  justify-content: center;
  /* Centrar horizontalmente */
  width: 32px;
}

.tblFactura> :not(caption)>*>* {
  --padding: 0;
}

.tblFactura .header-cell {
  background-color: var(--cmColorBGTable);
  color: #f0f4f8;
  padding: 10px;
}

.hidden {
  display: none;
  /* Oculta el elemento */
}

.table-bordered {
  border: 1px solid #f8f8f8;
  /* Borde alrededor de la tabla */
  border-collapse: collapse;
  /* Para que los bordes entre celdas se fusionen */
}

.table-bordered td {
  border: 1px solid #f8f8f8;
  /* Borde alrededor de cada celda */
}

.form-floating input:focus {
  border-color: #007bff;
  /* Color azul del borde */
  box-shadow: 0 0 0 0.25rem rgba(38, 143, 255, 0.25);
  /* Sombra de enfoque azul */
}

/* El label flota al hacer focus */
.form-floating input:focus~label {
  top: -1rem;
  /* Subir el label encima del input */
  font-size: 0.75rem;
  /* Reducir el tamaño del label cuando flota */
  width: auto;
  color: #007bff;
  /* Color azul del label cuando flota */
  background-color: transparent;
}

/* Opcional: Ajuste para el label en su posición inicial */
.form-floating label {
  transition: all 0.3s ease;
  /* Transición suave */
}



.dvHayCambios-visible {
  display: flex;
}

.btnChangeEstado {
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btnChangeEstado:hover {
  transform: scale(0.98);
  /* Reduce ligeramente el tamaño */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Ajusta la sombra para el efecto "hundido" */
}

.bnrelDoc {
  position: relative;
  padding: 3px;
  font-size: 12px;
  position: relative;
  cursor: pointer;

  background-color: #c6c7c8;
  color: black;
}

.image-scroll-container {
  display: flex;
  /* Muestra los divs en una fila */
  overflow-x: auto;
  /* Permite el desplazamiento horizontal */
  white-space: nowrap;
  /* Evita que las imágenes se acomoden en varias líneas */
  gap: 10px;
  /* Espacio entre las imágenes */
  padding: 10px;
  /* Opcional: espacio alrededor de las imágenes */
  min-height: 350px;
}

.image-scroll-container .image-item {
  flex: 0 0 auto;
  /* Evita que los divs se estiren o se encogen */
  height: 300px;
  /* Altura de cada div con imagen */
  border: 2px solid #E5E7EB;
  border-radius: 6px;
  cursor: pointer;
}

.image-scroll-container .image-item .selected {
  border: 4px solid var(--cmColorBG);
}

.image-scroll-container .image-item img {
  width: 100%;
  /* Hace que la imagen ocupe todo el contenedor */
  height: 100%;
  /* Asegura que la imagen se ajuste correctamente */
  object-fit: cover;
  /* Mantiene la relación de aspecto y recorta si es necesario */
}

.image-scroll-container .image-item.selected {
  border: 3px solid var(--cmColorBG);
  border-radius: 6px;
}

.image-scroll-container .image-label {
  padding: 10px;
}

.image-scroll-container .image-label span {
  font-size: 14px;
  /* Tamaño de fuente del label */
  color: black;
}

edit-icon {
  font-size: 16px;
  /* Tamaño del ícono */
  cursor: pointer;
  /* Cambia el cursor al pasar sobre el ícono */
  color: #007bff;
  /* Color del ícono */
}

.edit-icon:hover {
  color: #0056b3;
  /* Color del ícono al pasar el mouse (hover) */
}


.iframe-preview1 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #525659;
  border: 1px solid black;
}

.iframe-preview1 iframe {
  display: block;
  margin: auto;
  /* Centra horizontal y verticalmente */
  width: 80%;
  /* Ajusta el tamaño del iframe */
  height: auto;
  /* Mantiene la proporción */
  transform: scale(0.8);
  /* Escala el contenido */
  transform-origin: center;
  /* Origen del escalado */
}



.CMTable tr {
  cursor: pointer;
}

.CMTable tr:hover td {
  cursor: pointer;
  --background-color: #F7E49C !important;
  /* Color de fondo para resaltar la fila */
  background-color: #EFBCA0 !important;
  /* Color de fondo para resaltar la fila */
  color: white !important;
}

.CMTable tr.TRSelected td {
  --background-color: #F2CE15 !important;
  /* Color de fondo para resaltar la fila */
  background-color: #CC5B1D !important;
  /* Color de fondo para resaltar la fila */
  color: white !important;
}

.pointer {
  cursor: pointer;
}

@media(max-width: 1250px) {
  .rowActions-content {
    width: 740px;
  }
}

@media(max-width: 992px) {

  .editbar-contentAll {
    padding-right: 15px;
  }

  .rowActions-content {
    position: relative;
    display: flex !important;
    width: 100%;
    height: 100px;
    transition: clip-path 0.3s ease;
    clip-path: inset(0 20px 0 20px);
  }

  .action-buttons:last-child {
    padding-right: 15px;
  }

}

.cardContaSelected {
  background: blue !important;
}

.frmAdress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100px;
}

.frmAdress-content button {
  width: 150px;
  margin-top: auto;
}

.frmAdress-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
}

.frmAdress-content h6 {
  color: black;
  text-align: center;
}

.btnAdmin {
  width: 32px;
}

.btnPeligro {
  color: white;
  background-color: #9f0c0c;
}



.bnSmallTable> :not(caption)>*>* {
  border-top-width: 0px;
  border-bottom-width: 0px;
  padding: 0.50rem 0.75rem;
  color: #1f447b;
  vertical-align: middle;
}

.bnSmallTable>tbody>tr>td {
  padding-top: 0px;
  padding-bottom: 0px;
}

.bnSmallTable tr td:first-child {
  padding-left: 0px;
}


/* Contenedor principal del wizard */
.bnWizard .steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 20px 0;
  padding: 0;
  counter-reset: step;
  /* Reinicia el contador para los pasos */
}

/* Cada paso */
.bnWizard .steps>ul {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bnWizard .steps>ul>li {
  position: relative;
  flex: 1;
  /* Distribuye el espacio uniformemente */
  text-align: center;
}

/* El círculo */
.bnWizard .steps>ul>li:before {
  content: counter(step);
  /* Inserta el número del paso */
  counter-increment: step;
  /* Incrementa el contador */
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #ddd;
  /* Fondo inicial */
  color: #333;
  /* Color del texto */
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #ddd;
  /* Borde inicial */
  z-index: 1;
  position: relative;
  margin: 0 auto;
  /* Centra el círculo horizontalmente */
}

/* La línea entre los pasos */
.bnWizard .steps>ul>li:after {
  content: '';
  position: absolute;
  top: 20px;
  /* Alineado con el centro del círculo */
  left: calc(50% + 20px);
  /* Alineado después del círculo */
  width: calc(100% - 20px);
  /* Ajusta el espacio entre círculos */
  height: 2px;
  background-color: #ddd;
  /* Color inicial de la línea */
  z-index: 0;
}

.bnWizard .steps>ul>li:first-child:after {
  left: 50%;
  /* Evita línea a la izquierda del primer círculo */
}

.bnWizard .steps>ul>li:last-child:after {
  display: none;
  /* Elimina la línea a la derecha del último círculo */
}

/* El texto debajo de cada círculo */
.bnWizard .steps>ul>li .step-text {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

/* Estilo para pasos activos */
.bnWizard .steps>ul>li.current:before,
.bnWizard .steps>ul>li.done:before {
  background-color: #1f447b;
  /* Color del fondo para pasos activos/completados */
  color: white;
  border-color: #1f447b;
}

/* Estilo para la línea activa */
.bnWizard .steps>ul>li.done:after {
  background-color: #1f447b;
  /* Color de la línea para pasos completados */
}

.custom-modal-content {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: 20px auto;
  background: #ffffff;
}

/* Por si se desea cambiar el focus del input (Isaac) */
/* .form-control:focus {
  border-color: #343a40; 
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.25); 
  outline: none;
} */

.form-control {
  padding-left: .5rem;
}

/* ESTILOS PARA ARCHIVO SIGNUP */
input {
  border: 1px solid #ccc !important;
}

.signupTitle {
  font-size: 30px;
  text-align: center;
  font-weight: 700;
}

.signupSubtitle {
  font-size: 1.1rem;
  text-align: center;
}

.countrySelector button {
  background: white !important;
  color: black;
  text-align: start;
  border: var(--bs-border-width) solid var(--bs-border-color);
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
  border: 1px solid #ccc;
}

small {
  font-size: 78%;
  margin-bottom: 1rem;
}

.buttonSelector-content {
  display: flex;
  list-style: none;
}

.freelance-selector {
  border: 1px solid #ccc;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  background: white;
  width: 110px;
  height: 50px;
  font-size: 18px;
  transition: .7s ease-in-out;
}

.business-selector {
  border: 1px solid #ccc;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
  background: white;
  width: 110px;
  height: 50px;
  font-size: 18px;
  transition: .5s ease-in-out;
}

.businessType-selector:hover {
  background: rgb(231, 230, 230);
}

.businessType-selector.active {
  background: rgb(54, 117, 186);
  color: white;
}

.formContent {
  margin-right: 3rem;
}

.card-body {
  position: relative;
  z-index: 2;
  padding: 20px;
}

.card-title {
  xxfont-size: 1.25rem;
  margin-bottom: 15px;
}


.createAccountBtn {
  height: 50px;
}

.googleButton {
  background: #ffffff;
  border: 1px solid #ccc;
  transition: .5s ease-in;
}

.googleButton:hover {
  border: 1px solid #ccc;
  transform: scale(1.02);
  background: rgb(214, 214, 214);
  color: black;
}

/* svg {
  fill: #000000;
} */

.overlay {
  animation: slideFromLeft 1s ease-in;
}

@keyframes slideFromLeft {
  0% {
    margin-left: -50%;
    opacity: 0;
  }

  100% {
    margin-left: 0;
    opacity: 1;
  }
}

/* FIN ESTILOS PARA SIGNUP */

/* ESTILOS PARA CONFIGDATOSEMPRESA */
@media only screen and (max-width: 1650px) and (min-width: 987px) {
  .overlay-contentBusinessData {
    padding-left: 2rem;
  }

  .form-contentBusinessData {
    width: 100%;
  }
}

.config-dataTitle {
  border-bottom: none !important;
}

.overlay-contentBusinessData {
  padding-left: 1rem;
}

.card-dataBusiness {
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
}

.select-businessData {
  padding-right: .60rem;
}

.createButton-configDatos button {
  font-size: 11px;
}

.createButton-configDatos i {
  font-size: 10px;
}

/* FIN ESTILOS CONFIGDATOSEMPRESA */

/* VALIDACIÓN CONTRASEÑAS */
.password-container {
  position: relative;
}

.passwordMessage {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 2 ease-in-out, visibility 2 ease-in-out;
}

.passwordMessage.show {
  max-height: 200px;
  opacity: 1;
  visibility: visible;
}

.deletePasswordList {
  display: none;
}


.passInput {
  position: relative;
}

.eyeIcon {
  position: absolute;
  bottom: 30px;
  right: 20px;
  cursor: pointer;
  top: 41%;
  transform: translateY(-50%);
}

.equalMsg {
  display: none;
}

.confirmIcon {
  position: absolute;
  bottom: 30px;
  right: 20px;
  cursor: pointer;
  top: 50%;
  transform: translateY(-92%);
}




.titleView {
  font-size: 1.75rem;
  color:#1f447b;
  font-weight: 400;
}

.pagination-container>.form-select {
  display: none;
}



.bnCard {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.card_sombra {
  /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
  box-shadow: 0px 1px 1px rgba(59, 59, 59, 0.1)
  /* Sombra suave */
}



/* SEARCH FULL */

/* Listado de Filtros */
.search-input-wrapper {
  position: relative;
}

.search-input {
  padding-left: 30px;
}

.search-input-wrapper i.fas.fa-search {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #999;
}

.clear-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
}

.search-input-wrapper.selected .search-input {
  /* xxxborder: 2px solid var(--cmColorSEL) !important; Esto estaba así (corregido Isaac)*/
  border: 2px solid var(--cmColorSEL) !important;
  color: var(--cmColorSEL);
  box-shadow: 0 0 0 0.15rem rgba(100, 153, 208, 0.35);
}

.search-input-wrapper.selected .clear-icon {
  color: var(--cmColorSEL);
}

.search-input-wrapper.selected i.fas.fa-search {
  color: var(--cmColorSEL);
}


/*
CLASES DEL PLUGIN
*/

.month-select,
.year-select {
  border-radius: 4px;
  border: 1px solid #183E77;
  color: #183E77;
  font-size: 10px;
  font-family: var(--cmLetra);
  width: auto;
  padding: 6px;
  z-index: 1000;
  position: relative;
  background: none;
  text-align: center;
}

.month-year-select {
  position: absolute;
}

.drp-calendar {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.drp-selected {
  opacity: 0;
}

.reportrange {
  opacity: 0;
}


.report-range-ui {
  border-radius: 3.2px;
  border: 1px solid #183E77;
  padding: 0px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.report-range-ui span {
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}

.report-range-ui.active {
  background-color: var(--cmColorSEL);
  color: #ffffff;
}

.report-range-ui.active .fa-calendar {
  padding-right: 10px;
}

.report-range-ui.active .prev,
.report-range-ui.active .next {
  cursor: pointer;
}

.report-range-ui .prev,
.report-range-ui .next {
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.ranges ul {
  display: grid;
}

.ranges ul li[data-range-key="Ver Todo"] {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.ranges ul li {
  color: #183E77;
  font-family: var(--cmLetra);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}

.ranges ul li i {
  margin-right: 8px;
}


.page-link.active,
.active>.page-link {
  background-color: var(--cmColorBGTable);
}


.resume-box-title {
  font-size: 15px;
}

.resume-box-body {
  font-size: 18px;
}

.resume-box-footer {
  font-size: 14px;
  font-style: italic;
}

.text-red {
  color: #a11919;
}

input::placeholder,
select::placeholder {
  color: #8687a7 !important;
}



.bnNewBtn {
  --bs-btn-color: #fff;
  /* --bs-btn-color: #274C7D; */
  
  --bs-btn-bg: #3CDBC0; /* Color principal */
  --bs-btn-border-color: #3CDBC0; /* Color del borde más oscuro */
  --bs-btn-hover-color: #1F3E64;
  --bs-btn-hover-bg: #32B79D; /* Hover con un tono más oscuro */
  --bs-btn-hover-border-color: #32B79D;
  --bs-btn-focus-shadow-rgb: 60, 219, 192; /* Sombra en el foco */
  --bs-btn-active-color: #1F3E64;
  --bs-btn-active-bg: #28937F; /* Activo más oscuro */
  --bs-btn-active-border-color: #28937F;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #1F3E64;
  --bs-btn-disabled-bg: #3CDBC0; /* Mismo color pero con opacidad menor si es posible */
  --bs-btn-disabled-border-color: #32B79D;
}

/* Estilos para poner label flotante */
.selectField:not(:has(.berna-checkbox)) {
  position: relative;
  display: flex;
  flex-direction: column;
}

.selectField:not(:has(.berna-checkbox)) label {
  position: absolute;
  top: -0.6rem;
  left: 0.6rem;
  background-color: white;
  padding: 0 5px;
  color: #6c757d;
  transition: all 0.2s;
  font-size: 12px;
}

.selectField .form-select,
.selectField .form-control {
  height:45px;
}

/* Estilos frmCompra/frmVenta */
.cell-frmTable {
  min-height: 50px;
  padding: 0;
  margin: 0;

}

.lstRowDet  {
  border:1px solid #ccc;
  border-top:0px ;
}

.cell-frmTable input {
  border-radius: 0px !important;
  border: 0px !important; /* lucky */
}

.cell-frmTable textarea {
  border-radius: 0px !important;
  border: 0px !important; /* lucky */
}

.lstRowDet  .delete {
  border-bottom: 0px !important;
}
.lstRowDet  .drag {
  border-right: 1px solid #ccc;
  border-bottom: 0px !important;  
}

.cell-frmTable:not(.delete) {
  border: none;
  border-right: 1px solid #ccc;;
}





.input-container {
  position: relative;
}

.currency-static {
  position: absolute!important;
  left: 10px;  
  top: 54%;   
  transform: translateY(-50%);
  color: #6c757d; 
  font-size: 0.85rem;
  z-index: 1;  
}

.currency-span {
  position: absolute;
  right: 10px;  
  top: 50%; 
  transform: translateY(-50%);
  z-index: 1;  
  width: 37px;
}

.inputCurrency {
  padding-left: 60px; 
  padding-right: 24px;
}


.listProductos {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}


.form-group-input label {
  font-size: 12px;
  color:grey;
}

/* Estilos para el cambio de estado */
.state-overlay {
  border-radius: 3.2px;
  border: 1px solid #DAD7D7;
  background: #FFF;
  display: flex;
  width: 200px;
  padding: 16px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.state-title {
  color: #1E2938;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  display: flex;
  flex-direction: row;
  padding: 0px 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: .5px solid #E4E3E3;
}

.state-title i {
  color: #000000;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: start;
  justify-content: end;
}

.stateButtons-content {
  display: flex;
  padding: 0px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-bottom: .5px solid #E4E3E3;
  padding-bottom: 8px;
}

.stateButtons-content button {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 3.7px;
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}

.stateButtons-content i {
  position: absolute;
  left: 25px;
  height: 16px;
  width: 16px;
}

.stateButtons-content button span {
  text-align: center;
}

.footer-state {
  flex-direction: column;
  gap: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 16px;
  align-self: stretch;
}

.footer-state button {
  width: 100%;
  text-align: center;
}

/* Actualizamos height de inputs y selects */
.bnfrmInput{
  min-height: 45px;
}

.avatarDatosEmpresa-modal{
  height: 6rem;
  width: 6rem;
}

.icon-placeholder{
  height: 77px;
  width: 77px;
}
 

.lstTable td, th{
  vertical-align:middle;
}
.lstTable>thead>tr>th {
  background-color: var(--cmColorBGTable);
  color: #f0f4f8;
}




/* ~960px en pantallas grandes, 100% en móviles */
.modal-l { max-width: 1000px; }

@media (min-width: 576px) { /* Móviles */
  .modal-xl {
    --bs-modal-width: 500px;
  }
  .modal-lg2 {
    --bs-modal-width: 500px;
  }
}

@media (min-width: 768px) { /* Tablets */
  .modal-xl {
    --bs-modal-width: 800px;
  }
  .modal-lg2 {
    --bs-modal-width: 800px;
  }
}

@media (min-width: 992px) { /* Laptops */
  .modal-xl {
    --bs-modal-width: 1000px;
  }
  .modal-lg2 {
    --bs-modal-width: 900px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 90vw !important; /* 90% del ancho total de la pantalla */
  }
  .modal-lg2 {
    --bs-modal-width: 900px;
  }
}


@media (min-width: 1400px) {
  .modal-xl {
    --bs-modal-width: 70vw !important; /* 90% del ancho total de la pantalla */
  }
  .modal-lg2 {
    --bs-modal-width: 900px;
  }
}


.card-nextPlan{
  min-width: 400px;
}

.currentPlan-content{
  min-width: 190px;
}

.noty_theme__metroui.noty_type__success
{
  background-color:#3cdbc0;
  color:#ffffff;
}
.noty_theme__metroui.noty_type__info, .noty_theme__metroui.noty_type__information
{
  background-color:#6499d0;
}


.avatarProfile-facturacion{
  height: 66px!important;
  overflow:hidden;
}

.addModuloButton{
  transition: background-color 0.5s, color 0.5s ease;
}

i[name="removeModulo"]{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5 ease, visibility 0.5 ease;
}

i[name="removeModulo"].visible{
  opacity: 1;
  visibility: visible;
}


@keyframes replegar {
  0% {
    max-height: 100%;
}
100% {
    max-height: 65px; 
}
}

.minimize-resume {
animation: replegar .3s ease-in-out forwards;
}

.sidebarRight{
  
  position: fixed;
    top: 80px; /* Para que no quede pegado arriba */
    right: 0;
    width: 25%; /* Ajusta el tamaño en función de la grid de Bootstrap */
    max-height: 90vh; /* Evita que ocupe toda la pantalla */
    overflow-y: auto; /* Permite scroll interno si el contenido es largo */
}

@keyframes replegarModulos {
  0%{
    max-height: 100%
  }
  50%{
    max-height: 50%;
  }
  100%{
    max-height: 0%;
  }
}

.minimize-modules{
  animation: replegarModulos .3s ease-in-out forwards;
  display: none;
}

/* Estilos para las plantillas de Facturas */
.rowPlantillas {
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.rowPlantillas::-webkit-scrollbar{
  display: none;
}

.selPlantilla {
  /* Altura de cada div con imagen */
  border: 2px solid #E5E7EB;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  height: 100%
}
.selPlantilla:hover {
  background-color:#D0E6FF;
  transform: scale(0.98);
  /* Reduce ligeramente el tamaño */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}
.selectedPlantilla{
  transform: scale(0.98);
  /* Reduce ligeramente el tamaño */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 4px solid var(--cmColorBG);
}

.selPlantilla img{
  width: 100%;
  max-height: 196px;
}

.selectedPlantilla img{
  /* border: 4px solid var(--cmColorBG); */
  width: 100%;
}

.chevron-left{
  position: absolute;
  background-color: white;
  z-index: 999999;
  top: 12rem;
  width: 30px;
  height: 55px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.chevron-right{
  position: absolute;
  background-color: white;
  z-index: 999999;
  top: 12rem;
  width: 30px;
  height: 55px;
  display: grid;
  place-items: center;
  left: 40rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* Fin estilos para plantillas de facturas */

.color-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.color-container input[type="color"] {
  width: 100px; /* Ancho fijo para el input color */
  height: 40px; /* Altura opcional para mejor visualización */
  border: none;
  padding: 0;
  cursor: pointer;
}
.color-container input[type="text"] {
  width: 100px;
  padding: 5px;
  text-transform: uppercase; /* Poner el hexadecimal en mayúsculas */
  text-align: center;
}


.pdf-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: #f8f8f8;
}

.pdf-wrapper {
  width: 80%;
  max-width: 900px;
  height: 80vh;
  background: white;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px;
}

.pdf-viewer embed {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}


.modal-body {
  max-height: 76vh;
  overflow-y: auto;
  /* overflow-x: hidden; */
}


.select2-container {
  z-index: 1 !important;
}

.select2-container--open {
  z-index: 99998 !important;
}

.wrapper-familias, .wrapper-categorias {
  position: relative;
}

.wrapper-familias label, .wrapper-categorias label {
  position: absolute;
  top: -10px; 
  left: 10px;
  background: white; 
  padding: 2px 5px;
  font-size: 14px;
  z-index: 9999 !important;
  transition: all 0.2s ease-in-out;
}

.wrapper-familias .select2-selection, .wrapper-categorias .select2-selection{
  border: 1px solid #ced4da!important;
}

.wrapper-familias .select2-selection--multiple, .wrapper-categorias .select2-selection--multiple {
  min-height: 50px; 
  padding-top: 16px;
}

.wrapper-familias.select2-active label, .wrapper-categorias.select2-active label {
  top: -20px;
  font-size: 12px;
  color: #888;
}

.input-cupon{
  outline: 0!important;
  border-width: 0 0 2px 0!important;
  border-radius: 0!important;
}

.input-cupon:focus{
  box-shadow: none!important;
  border-bottom: 2px solid #0d6efd !important;

}

.underline {
  text-decoration: underline !important;
}

.card-login {
  border-radius: 8px;
  border: 1px solid #C9D9EE;
  background: #FFF;
}

.onboarding-profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 32px;
  background: #BFBFBF;
  width: 64px;
  height: 64px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.onboarding-stepper {
  border-radius: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 24px;
  height: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.onboarding-stepper-active {
  background: #274C7D;
  color: #FFF;
}

.onboarding-stepper-pending {
  background: #C9D9EE;
  color: #4078B7;
}

.opacity-50 {
  opacity: 0.5;
}

.bullet-bill-onboarding {
  border-radius: 32px;
  background: #BFBFBF;
  width: 32px;
  height: 32px;
}

.card-billing-onboarding {
  border-radius: 4px;
  border: 1px solid #D3D4D5;
}

select{
  border: 1px solid #ced4da!important;
}

/* ESTILOS PARA WELLCOME */
.general-content{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.stepsGuide{
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  flex-shrink: 0;
} 

.cursor{
  cursor: pointer;
}


.amnPositivo {
  color:#3b5de7 ;
}
.amnNegativo {
  color:#C62828  ;
}

.navegadorItem {
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}
.navegadorItem:hover {
  background: #f8f9fa; /* Color suave al hacer hover */
}

.equal-content{
  position: relative;
}

.equalInput{
  padding-left: 80px;
}

.euroAndEqualText, .currentEqualText{
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.euroAndEqualText{
  left: 20px;
}
.currentEqualText{
  right: 20px;
}

.title-promotion{
  color: #274C7D;
  font-weight: 600;
  letter-spacing: -0.005px;
  font-size: 20px;
}

.promotion-content{
  position: relative;
}

.promotion-content svg{
  position: absolute;
  top: 64%;
  right: 43%;
}

input, select{
  max-height: 38px!important;
  /* lucky padding-top: 11px!important; */
}

.calendar-icon{
  position: absolute;
  transform: translateY(-50%); 
  top: 50%; 
  right: 10px;
}

.imgLogo {
  width: 100%;         /* Ocupará todo el ancho disponible del padre */
  height: 100%;        /* Ocupará todo el alto disponible del padre */
  max-width: 100%;     /* No se saldrá del ancho del div */
  max-height: 100%;    /* No se saldrá del alto del div */
  object-fit: contain; /* Se ajustará sin recortar contenido */
  display: block;      /* Evita espacios vacíos por `inline` */
  margin: auto;        /* Centra la imagen en el div */
}
.imgLogoImg {
  width: 100%;
  height: 100%;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  display: block;
  margin: auto;
}

.oculto2 {
  display: none !important;
}
.oculto {
  display: none ;
}


.ocultoOn {
  visibility: hidden;
}
.ocultoOff {
  visibility: visible;
}


.BN_MODULO div .card-body {
  padding-top: 0px !important;
}

.BN_MODULO div .card-header {
  padding-bottom: 0px !important;
  padding-top:0.5rem;
  border: 0px;
  cursor: move;
}

.dashboard-column {
  min-height: 100px;
}

.sortable-chosen {
  background-color: #e9ecef;
  border: 1px dashed #6c757d;
}






.sidebarBottom-config:hover {
  background-color:#D0E6FF;
  color:black;
}
.sidebarBottom-config {
  background-color:#3b6fa7;
  color:white;
}

.bnCreateAcc{
  transition: background-color 0.3s ease-in-out;
}

.bnCreateAcc:hover{
  background-color: #183E77!important;
}

.bnCreateAcc:hover svg{
  fill: #FFFFFF;
}

.bnCreateAcc:hover span{
  color: white;
} 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.jstree-rename-input {
  padding: 2px 5px !important;
  margin: 0 !important;
  line-height: normal !important;
}

.select-auto-width {
  width: auto !important;
  min-width: fit-content;
  max-width: 100%;
}

.nav-item{
  background-color: transparent!important;
}

.nav-item:hover{
  background-color: rgb(208,230,255)!important;
}

.checkPermitHeader{
  background-color: var(--cmColorBGTable);
  color: white;
}

.nomultine {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Trunca después de 2 líneas */
  -webkit-box-orient: vertical;
}

.inputRight{ 
  text-align: right;
}





.fichero-adjunto {
  width: 120px;
  text-align: center;
  margin: 10px;
  position: relative;
  padding: 10px; /* Aumentamos el padding al hacer hover */
  cursor:pointer; 
  border-radius: 10px;
  color:  #292828;
}

.fichero-adjunto:hover {
  background-color: #f0f0f0;  
}

.icono-fichero i {
  font-size: 3em;
}

.nombre-fichero {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opciones-fichero {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
}

.fichero-adjunto:hover .opciones-fichero {
  display: block;
}

.opciones-fichero i {
  margin-left: 5px;
  cursor: pointer;
}

.trListSeries td{
  padding-top: 10px;
  padding-bottom: 10px;
}

.select2-selection__rendered{
  height: 100% !important;
  margin-top: 5px!important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.select2-container--default .select2-selection--single
{
  border: 1px solid #ccc;
}



.divPlantilla:hover {
  
  background-color: #8687a7;  
}
.plantilla-image {
  max-height: 70px;
  width: auto;
  object-fit: contain;
  display: block;
  max-width: 100%;
}


.lstDivTable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  
}
.divTable1{
  table-layout: fixed; width: auto;
}


.miDropdownMenu1 {
position: fixed !important;
z-index: 9999 !important;
}

  

.auditoria_1{
  background-color:red !important;
  color:white !important;
}


.form-control:disabled{
  background-color: #f7f7f7;
}

/* Excepción: si tiene el atributo data-on-label, no le pongas margin-bottom */
label[data-on-label] {
  margin-bottom: 0 !important;
}


.bg-verifactu-X {
  background-color: #8687a7;
}

.bg-verifactu-P {
  background-color: #F2CE15;
}
.bg-verifactu-S {
  background-color: #F2CE15;
}


.bg-verifactu-E {
  background-color: #800000;
}

.bg-verifactu-A {
  background-color: #007BFF;
}

.bg-verifactu-W {
  background-color: #dd6c0f;
}


.bg-verifactu-T {
  background-color: #8687a7;
}




.bg-emp-estado-Fichaje-T {
  background-color: #007BFF;
}
.bg-emp-estado-Fichaje-X {
  background-color: #8687a7;
}
.bg-emp-estado-Fichaje-P {
  background-color: #F2CE15;
}



.estado-Dia-Total { background:#007BFF; color:#ffffff !important;  }
.estado-Dia-Extra { background:#B71C1C; color:#ffffff !important;  }

.estado-Dia-LT { background:#007BFF; color:#ffffff !important;  } /* Laborable  trabajando */
.estado-Dia-LD { background:#F2CE15; color:#ffffff !important;  } /* Laborable  descanso */
.estado-Dia-LX { background:#B71C1C; color:#FFFFFF !important;  } /* Laborable  ausencia */

.estado-Dia-L { background:#E3F2FD; color:#0D47A1 !important;  } /* Laborable */
.estado-Dia-N { background:#ECEFF1; color:#455A64 !important; opacity: 0.6;  } /* No laboral */
.estado-Dia-F { background:#FFE0B2; color:#E65100 !important; opacity: 0.6;  } /* Festivos */
.estado-Dia-V { background:#C8E6C9; color:#1B5E20 !important;  } /* vacaciones */
.estado-Dia-P { background:#EDE7F6; color:#4527A0 !important;  } /* permiso */
.estado-Dia-B { background:#FFCDD2; color:#C62828 !important;  } /* Baja */
.estado-Dia-A { background:#FFEBEE; color:#B71C1C !important;  } /* ausencia */
.estado-Dia-X { background:#FFFFFF; color:#000000 !important;  } /* estado por defecto (sin marcar) */


.bg-Fichaje-Incidencia-Para-A {
  background-color: #007BFF;
}
.bg-Fichaje-Incidencia-Para-E {
  background-color: #800000;
}
.bg-Fichaje-Incidencia-Para-X {
  background-color: #dd6c0f;
}







.bg-Fichaje-Incidencia-OK {
  background-color: #007BFF;
}
.bg-Fichaje-Incidencia-KO {
  background-color: #800000;
}

/* PENDIENTE */
.bg-Fichaje-Incidencia-PEN {
  background-color: #dd6c0f;
}

.bg-Fichaje-Incidencia-DEL {
  background-color: #8687a7;
}



 
/* ESTILOS PARA FRMVENTAVIEW */
.modal-body-pdfDetails {
  display: flex;
  flex-direction: row;
 
}
 
.contentDividerPdfDetails {
  border-top: 1px solid #e6e0e0;
  padding-top: 20px;
}
 
.detailsPdfContent {
  width: 30%;
  display: flex;
  flex-direction: column;
  padding-right: 12px;
}
 
.paymentDetailRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tasaCambio {
  font-style: italic;
  font-size: 0.85em;
}

.paymentDetailRowXL {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: bold; /* Poner en negrita */
  font-size: 1.2em;  /* Un poco más grande, ajusta el valor según necesites */
  margin-bottom: 5px; /* Pequeño margen para separar de la línea de abajo si fuera necesario */
}


 
.paymentDetailClient {
  display: flex;
  flex-direction: row;
  text-align: left;
}
 
.vencimientosPDFDetails {
  display: none;
}
 
.vencimientoLiPdfDetails {
  list-style: none;
  margin-bottom: 10px;
  vertical-align: top;
}
 
.pdfDetailsLstAnchor {
  color: #183E77;
  cursor: pointer;
  font-weight: bold;
}
 
.vencimientoImportePdfDetails {
  text-align: end;
  padding-top: 2px;
}
 
.theadPdfDetails {
  background-color: var(--cmColorBGTable);
  color: white;
}
 
.plantillaPdfDetails {
  width: 212px;
  height: 300px;
}
 
/* FIN ESTILOS PARA FRMVENTAVIEW */
 
 

/* ESTILOS PARA SUSCRIPCIÓN */
.berna-card-modules {
  max-width: 402px;
  max-height: 230px;
}
 
.currentPlan {
  opacity: .5;
}
 
.headerCardPlans{
  background-color: rgb(84, 141, 179);
}
 
.noCurrentPlan:hover{
  cursor: pointer;
  border: 3px solid var(--cmColorBGTable);
  
}
 
.btnRenovLeft{
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  width: 75px;
}
 
.btnRenovRight{
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  width: 75px;
}
.btnRenovSelected{
  background-color: blue;
}
 
.selectedPlan{
  border: 3px solid var(--cmColorBGTable);
  transition: .3s ease-in-out;
}
 
.bnPlan.selectedPlan .headerCardPlans{
  background-color: rgb(35, 117, 172);
}
 
.separatorRenova{
  border-top: 0.5px solid #E4E3E3;
  border-bottom: 0.5px solid #E4E3E3;
}
/* FIN DE ESTILOS PARA SUSCRIPCIÓN */

.berna-card-title_white {
  color: white;
}

.italica{
  font-style: italic;
}

.select2-container--default .select2-results__option[aria-selected=true] {
      background-color: #D0E6FF !important;
    color: #000000 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow
{
  top:8px;
}



.mih6 {
  color:#183e77;
  font-size: 1.2rem;
}

 .signature-canvas {
    border: 2px dashed #ced4da;
    border-radius: .375rem;
    cursor: crosshair;
    background-color: #fff;
}
.form-data-readonly {
    background-color: #e9ecef;
}


.cell-frmTable textarea{
  resize: auto;
}





.contract-viewer {
    max-height: 100px; /* Altura inicial del texto */
    overflow-y: hidden;
    transition: max-height 0.5s ease-in-out; /* Animación suave */
}
.contract-viewer.expanded {
    max-height: 300px; /* Altura cuando se expande */
    overflow-y: auto;
}

.h6titulo {
    font-size: 16px;
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.bgazul {
  background-color: #DAEFFF;
}



.favorito_1 {
  color: gold;
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* negrita: sólido */
  font-style: normal;
  cursor:pointer;
}

.favorito_0 {
  color: gray;
  font-family: "Font Awesome 6 Free";
  font-weight: 400; /* normal: regular */
  font-style: normal;
  cursor:pointer;
}
.celdaTotal{
  margin-top:10px;
  margin-right:20px;
  color:#000000;
  float:right;
  cursor:default;  
}



.subtotales  .row-line {
  display: flex;  
}
.subtotales  .col-label {
  flex: 1; /* ocupa todo lo sobrante */
  font-size: 14px;
  line-height: 30px;
}
.subtotales  .col-importe {
  width: 200px;          /* ancho fijo */
  text-align: right;     /* alineado a la derecha */  
  font-size: 14px;
  line-height: 30px;
}
.subtotales  .total .col-label,
.subtotales  .total .col-importe {
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
}




.fileInfo  span{
   font-size: 0.95rem;
  padding: 0.6rem 0.8rem;
}





.tblCalendarioMes td { height: 64px; vertical-align: top; cursor: pointer; border:1px solid #e9e9e9; }
.tblCalendarioMes td.mute { background: #f8f9fa; cursor: default; }
.tblCalendarioMes td .diaNum { font-weight: 500; font-size: .95rem; }
.tblCalendarioMes td .diaNumNo { font-weight: 100; font-size: .85rem; }
.tblCalendarioMes td .diaInfo { font-size: .8rem; margin-top: .15rem; line-height: 1.1; }




 /* Estados */

 
.estado-X { background:#FFFFFF; color:#000000 !important;  } /* estado por defecto (sin marcar) */
.estado-L { background:#D6F5E6; color:#000000 !important;  } /* trabajado */
.estado-N { background:#e0e1e0; color:#000000 !important; opacity: 0.6;  } /* No laboral */
.estado-F { background:#90CAF9; color:#000000 !important; opacity: 0.6;  } /* Festivos */
.estado-V { background:#66BB6A; color:#000000 !important;  } /* vacaciones */
.estado-P { background:#FFD54F; color:#000000 !important;  } /* permiso */
.estado-B { background:#B71C1C; color:#FFFFFF !important;  } /* Baja */





  /* Selección */
.tblCalendarioMes td.sel { border: 2px solid #0d6efd;
  box-shadow: 0 0 4px rgba(13, 110, 253, 0.4); }
.tblCalendarioMes td:hover { outline: 2px solid #0d6efd; }

.calendar-btn {
  width: 3rem;              /* ~48px: buen objetivo táctil */
  height: 3rem;
  font-size: 1.6rem;
  line-height: 1;
}




/* Rejilla de 12 meses: 1-2-3-4 según ancho */
  .year-grid { display: grid; grid-template-columns: 1fr; gap: .75rem;}
  @media (min-width: 576px){ .year-grid{ grid-template-columns: repeat(2,1fr);} }
  @media (min-width: 992px){ .year-grid{ grid-template-columns: repeat(3,1fr);} }
  @media (min-width: 1400px){ .year-grid{ grid-template-columns: repeat(4,1fr);} }


  


  /* Tarjeta de mes mini */
  .month-card .table { margin-bottom: 0; }
  .month-card .table th,
  .month-card .table td { padding: .25rem; font-size: .8rem; vertical-align: middle; }
  .month-card .month-header { display:flex; align-items:center; justify-content:center; gap:.5rem; }
  .month-card .month-title { font-weight: 600; }

  /* Celda día */
  .month-card td .diaNum { font-weight:600;  cursor: pointer; }
  .month-card td .diaInfo { font-size:.7rem; color:#6b7280; line-height:1; }
  .month-card td.mute { color:#9ca3af; }
  .month-card td.sel { outline: 2px solid #2563eb; outline-offset:-2px; }

  /* Leyenda compacta */
  .legend .badge { border:1px solid #ddd; }

  
  /* Botones grandes año */
  .calendar-btn-year {
    width: 3rem; height: 3rem; font-size: 1.6rem; line-height: 1;
  }

  .min-h-0 { min-height: 0 !important; }

  
  /* Tacha todo el texto de las celdas del tr */
tr.strike > td,
tr.strike > th {
  text-decoration: line-through;
  font-style: italic;
  text-decoration-thickness: 1px; /* opcional */
  
}

.nowrap { white-space: nowrap; }
.btnNewIncidencia:hover {
  color:#0056b3;
  
}


.pretty-xml{
  white-space: pre;                 /* respeta saltos/espacios */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.45;
  max-height: 60vh;
  overflow: auto;
}

.avatar-iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 5px;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
}


.plan-card {
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

/* Plan seleccionable: efecto hover */
.plan-card-selectable {
  cursor: pointer;
}

.plan-card-selectable:hover {
  xxxtransform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.45) !important; /* azulito */
}

/* Plan actual: más suave, sin hover ni cursor de mano */
.plan-card-disabled {
  opacity: 0.9 !important;
  cursor: default !important;
}

.plan-card-disabled:hover {
  transform: none !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
  border-color: #dee2e6 !important; /* borde normal */

}

.plan-card-disabled {
  opacity: 0.85 !important;
}

.modulos-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* A partir de lg, dos columnas: lista + resumen fijo */
@media (min-width: 992px) {
  .modulos-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .modulos-lista {
    flex: 1 1 auto;        /* ocupa todo lo que pueda */
  }

  .modulos-resumen {
    flex: 0 0 300px;       /* ancho fijo aprox */
    max-width: 300px;
  }
}

.modulos-lista .col {
  display: flex;
}

.modulos-lista .bnModulo {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.modulos-lista .bnModulo > .bottom-row {
  margin-top: auto;
}









/* Contenedor de widgets dentro de cada pestaña */
.widgetsChoose {
  background-color: #f8f9fa;
  max-height: 60vh;
  overflow-y: auto;     /* solo scroll vertical */
  overflow-x: hidden;   /* sin scroll horizontal */
  padding: 10px 5px;
}

/* Tarjeta widget */
.widgetsChoose .widget {
  position: relative;
  width: 100%;          /* que respete el ancho de la columna Bootstrap */
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  text-align: center;
}

/* Hover */
.widgetsChoose .widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

/* Imagen: mismo alto para todas */
.widgetsChoose .widget img {
  width: 100%;
  height: 160px;        /* aquí mandas tú: 140, 160, 180… */
  object-fit: contain;    /* recorta para que no se deforme */
  xxxobject-fit: cover;    /* recorta para que no se deforme */
  background-color: #969696;
  display: block;
}

/* Overlay clicable */
.widgetsChoose .widget-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 10px;
  text-align: center;
}

.widgetsChoose .widget-overlay h5 {
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.widgetsChoose .widget-overlay p {
  font-size: 0.8rem;
  margin-bottom: 0;
  opacity: 0.9;
}

.widgetsChoose .widget:hover .widget-overlay {
  opacity: 1;
}

/* En móvil, 1 por fila (ya lo hace col-12, pero por si acaso) */
@media (max-width: 576px) {
  .widgetsChoose .widget {
    width: 100%;
  }
}






/* Card blanca, clickable */
.kpi-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;          /* gris suave */
    border-radius: .75rem;
    padding: .50rem .75rem;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.kpi-card:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
    transform: translateY(-1px);
    border-color: #d0d7e2;
}

/* Bolita del número */
.kpi-pill {
    min-width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
}

/* Colores suaves por tipo */
.kpi-pill-vacaciones {
    background-color: #E6F4EA;  /* verde suave */
    color: #1E7B34;
}

.kpi-pill-incidencias {
    background-color: #FFF4E5;  /* naranja suave */
    color: #B45D00;
}

.kpi-pill-ausencias {
    background-color: #FDECEE;  /* rojo suave */
    color: #B71C1C;
}

.table-fichajes th,
.table-fichajes td {
    white-space: nowrap;
}