.ui-state-highlight {
    background: #f8d7da; /* Color del marcador de posición */
    border: 2px dashed #dc3545; /* Estilo del borde */
    box-sizing: border-box; /* Incluye el borde en las dimensiones */
    opacity: 0.7; /* Hace el marcador más visible */
}

.ui-state-highlightsub {
    background: #f8d7da; /* Color del marcador de posición */
    border: 2px dashed #dc3545; /* Estilo del borde */
    box-sizing: border-box; /* Incluye el borde en las dimensiones */
    opacity: 0.7; /* Hace el marcador más visible */
}

.ui-state-disabledx {
	cursor: default !important;
	pointer-events: none;
}
 
.sugestion {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #80BDFF;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-block;
    min-width: max-content;
}

.sugestion .nav-item2{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sugestion .nav-link2 {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 14px;
    color:#000000;
 
}
/* Hover que quita la clase del primer ítem */
.sugestion .nav-link2:hover {
    background-color: blue;
 color: white;
}
.bg-black {
    background: #000000;
 color: yellow;
}

.seleccionado{
    background-color: blue;
 color: white;
}	

.sinclase{
	
}
	
.apunta{
cursor: pointer;	
}

.swal2-html-container ul {
    list-style-type: none;  /* Quitar los puntos */
    padding-left: 0;        /* Quitar el padding de la izquierda */
    margin: 0;              /* Eliminar márgenes */
    font-size: 16px;        /* Definir el tamaño de la fuente */
  }

.swal2-html-container ul li {
    padding: 5px 0;         /* Espacio entre los elementos de la lista */
    color: #e74c3c;         /* Color rojo para los mensajes de error */
    font-weight: bold;      /* Negrita para los mensajes */
  }
  /* Estilo para el icono de error */
.swal2-icon-error {
    border-color: #e74c3c;
    color: #e74c3c;
  }
	
	
.pegador {
    display: flex;
    flex-direction: column; /* Asegura que los hijos se apilen verticalmente */  
}

.pegador > div {
    display: block; /* Asegura que cada div se comporte como un bloque */
}
 
.destello {
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 255, 0.3); /* Ajuste de tamaño y opacidad para un mejor efecto visual */
  transition: box-shadow 0.3s ease; /* Transición suave para cuando la clase se aplique o elimine */
  border-radius: 8px; /* Bordes redondeados */
}



.ui-sortable-helper {
background-color: #007bff; /* Fondo azul */
    border: 2px dashed #fff; /* Borde punteado blanco */
    
    visibility: visible !important; /* Asegurar que siempre sea visible */
}
.ui-sortable-placeholder {
    background-color: transparent; /* Fondo transparente */
    border: 2px dashed #007bff; /* Borde punteado azul */
    visibility: visible !important; /* Asegurar que sea visible */
 
}
.hover-black:hover {
    
}
 
 
  .dragging {
    cursor: grab; /* Cursor durante el arrastre */
  }


.overlaymenus {
  position: fixed;  /* Fija la capa en toda la pantalla */
      top: 0;
      left: 0;
      width: 100%;  /* Ocupa todo el ancho */
      height: 100%;  /* Ocupa toda la altura */
      background-color: rgba(0, 0, 0, 0.7);  /* Color de fondo con opacidad */
      z-index: 9000;  /* Asegura que esté sobre todos los elementos */
    }

.submenu-container {
position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5); /* Sombra más suave y equilibrada */
  z-index: 9001;
  display: block;

}

.overlaymenuslvl1 {
  position: fixed; /* Fija la capa en toda la pantalla */
  top: 0;
  left: 0;
  width: 100%; /* Ocupa todo el ancho */
  height: 100%; /* Ocupa toda la altura */
  background-color: rgba(0, 0, 255, 0.7);  /* Color de fondo con opacidad */
  z-index: 9002; /* Asegura que esté detrás del submenú */
}

.submenulvl1-container {
 
position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5); /* Sombra más suave y equilibrada */
  z-index: 10001;
  display: block;
 
 
}


.submenulvl2-container {
position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5); /* Sombra más suave y equilibrada */
  z-index: 11001;
  display: block;
 
}


.submenulvl3-container {
position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5); /* Sombra más suave y equilibrada */
  z-index: 13001;
  display: block;
 
}



.close-btn {
  position: absolute;
  top: -6px;  /* Alinea el botón a 10px desde el borde superior */
  right: -3px;  /* Alinea el botón a 10px desde el borde derecho */
  background-color: transparent;  /* Fondo transparente */
  border: none;
  font-size: 24px;  /* Tamaño del ícono */
  color: #00365F;  /* Color del ícono */
  cursor: pointer;
}

.close-btn:hover {
  color: #005f7f;  /* Cambia el color del ícono al pasar el cursor */
}



.navbar .navbar-brand .brand-image {
    max-height: 30px; /* Ajusta este valor según el alto de tu menú */
 
}

 @media (min-width: 768px) {
    #menuweb {
        display: flex;
        justify-content: center; /* Centra los elementos horizontalmente */
        align-items: center; /* Centra los elementos verticalmente */
        width: 100%;
    }
}



.menu-wrapper {
  position: relative;
}

 
.lower-menu {
  margin-top: 40px;
}

/* Ajustar el alto de los elementos del menú */
.navbar-nav > li {
  padding: 0 !important;
  height: 30px !important;
}

/* Reducir el padding de los enlaces */
.navbar-nav .nav-link {
  padding: 5px 15px !important;
  height: 30px !important;
  line-height: 30px !important;
  display: flex;
  align-items: center;
}
 
 .border-white {  
 
    
}


 .border-green {  
 color:green;
    
}
 
 /* Ajustar el z-index del contenido del iframe */
.content-wrapper.iframe-mode {
  position: relative;
  z-index: 1;
  margin-top: 40px; /* Ajusta según la altura del menú */
}

/* Asegurar que el menú superior tenga un z-index alto */
.upper-menu {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

/* Ajustar el padding-top del cuerpo (opcional) */
 
body, html {
 
  margin: 0;
  padding: 0;
  height: 100%;
  
  
  
} 
   

/* Ajustar el contenedor de las pestañas */
 
/* Ajustar el iframe */
.tab-pane iframe {

}


.layout-navbar-fixed {
    background: #F4F6F9 !important;
    
}

 
.modal-backdrop {
    z-index: 1039 !important; /* Mayor que el card maximizado */
}

 
.dataTables_wrapper .row:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 15px;
    
    margin-left: 0px;
    margin-right: 0px;
	 
	margin-top: 0px;
    margin-bottom: -5px;
	
    background: #FFFFFF; /* Color de fondo opcional */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* Ajustar los botones de exportación y el icono de edición */
 
/* Ajustar el icono de refrescar */
.refreshTable {
    color: #007bff;
    cursor: pointer;
}

/* Ajustar el icono de editar */
.editTable {
    color: #007bff;
    cursor: pointer;
}

.refreshTable:hover,
.editTable:hover {
    color: #0056b3;
}

/* Asegurar que el buscador ocupe más espacio */
.dataTables_filter {
    flex-grow: 1;
}

/* Asegurar que el select de cantidad sea más pequeño */
.dataTables_length {
    width: auto;
}

/* Hacer que los elementos ocupen todo el ancho disponible */
.dataTables_filter input {
    width: 100%;
}

.dataTable tbody tr:hover {
    background-color: #00FF00 !important;
    color: #000000 !important;
}

.dataTable tbody tr.selected {
    background-color: #1967D2 !important;
    color: #FFFFFF !important;
}

.dataTable tbody tr.selected:hover {
    background-color: #1967D2 !important;
    color: #FFFFFF !important;
}

/* Restablecer el color del texto al valor predeterminado cuando se quita la selección */
.dataTable tbody tr:not(.selected) {
    color: #212529 !important;
}


 
 

.search-input {
    background: url('../../../imgs/search.svg') no-repeat;
    background-color: #FFFFFF;
    background-position: 10px center;
    background-size: 16px 16px;
    padding-left: 30px !important;
    
    width: 0;
    transition: width 0.3s ease-in-out;
}
 
 

.highlight-column {
 background-color: rgba(25, 103, 210,0.09); /* Azul translúcido */
    transition: background-color 0.5s ease-in-out;
}

.theadtr {
    background-color:#134F9F !important; /* Azul sólido para toda la fila del thead */
    color: white !important; /* Texto en blanco para mejor contraste */
	
}

 
@keyframes brilloDesvanecer {
 0% { box-shadow: 0 0 10px rgba(0, 255, 0, 0.8); }
    100% { box-shadow: 0 0 0 rgba(0, 255, 0, 0); }
}

.brillo {
    animation: brilloDesvanecer 12s ease-out;
}



.marginboton{
 margin-left:2px;
	margin-right:2px;
	  font-weight: bold;
}

    .swal2-actions {
        display: flex !important;
        justify-content: flex-end !important; /* Mueve los botones a la derecha */
        gap: 10px; /* Espaciado entre los botones */
    }
	
.btn:focus, 
.btn:focus-visible {
    outline: none !important;
    border: 2px solid black !important; /* Primer borde verde */
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.7) !important; /* Sombra negra degradada */
}

 
 
 .tablaact{
	border: 1px solid black !important; 
   
    overflow: hidden !important;
}

.tablaact th,
.tablaact td {
    text-align: left !important; /* Alineación del texto a la izquierda */
    padding-left: 5px !important; /* Elimina el espacio interno a la izquierda */

      padding-right: 5px !important; /* Elimina el espacio interno a la izquierda */
	  padding-top:1px;
	  padding-bottom:1px;
}
 
 
 .tablaact2 {
    border: 1px solid black !important;
    
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Mantiene el ancho de las columnas */
	 background-color: #134F9F;
}
 
 
 .tablaact2 th, .tablaact2 td {
    text-align: left !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
		  padding-top:1px;
	  padding-bottom:1px;
    width: 100%;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
 


.tablaact2 thead {
    position: sticky;
    top: 0;
 
    z-index: 2;
    display: table;
    width: calc(100% - 16px); /* Simula el espacio del scrollbar */
    table-layout: fixed;
}

.tablaact2 tbody {
    display: block;
    max-height: 190px;
    overflow-y: scroll;
    width: 100%;
	background:#FFFFFF;
}



.tablaact2 tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
 



.espaciotab{
padding-left:0px !important; 
padding-right:0px !important;  
padding-top:-20px !important;

margin-left:0px !important;
margin-right:0px !important;
margin-top:-20px !important;


}



.espacioselc{
	width: auto; display: inline-block; margin-top: -10px; margin-bottom: -10px; margin-right:2px; padding:10px;
}



.espaciotamprincipal{
padding-top:3px !important; 
padding-bottom : 3px !important; 
padding-left: 3px  !important;
padding-right:11px !important 
}

.posloadcampoformcategoria{
	padding-top: -25px; margin:0px 0px 0px 0px; padding-left:0px; padding-right:0px; 
}


.summernotered{
border-width: 1.5px 1.5px 0px 1.5px;
border-style: solid;
border-color: red; border-radius: 5px; 
}	

 .form-control:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5) !important;
}

.swal2-confirm:focus, 
.swal2-cancel:focus {
 
    border: 2px solid black !important; /* Primer borde verde */
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.7) !important; /* Sombra negra degradada */
}



.oculto {
  opacity: 0;  position: absolute;
    left: -9999px;
}


.espacejam{
	margin-left:5px;
	margin-right:5px;
	margin-top:2px;
	margin-bottom:2px;
	
}


.pintador tr:not([style*="display: none"]):nth-child(odd) {
    background-color: red; /* Color de la fila impar */
}
.pintador tr:not([style*="display: none"]):nth-child(even) {
    background-color: #ffffff; /* Color de la fila par */
}

.piesito{
	margin:5px !important;
	padding:5px !important;
}



.labelspace{
 
}

#buscadormenu::-webkit-search-cancel-button {
    filter: invert(12%) sepia(100%) saturate(7484%) hue-rotate(0deg) brightness(100%) contrast(108%);
}





 .cw-margen-open{
	 margin-bottom:0px  !important;
	 
}

.top-tab-open{
	top:18px !important;
}


.contenedor-open{
	top:36px !important;
}

.contenedor-close{
		top:-5px !important;
 
}

 .cw-margen-close{
	 margin-bottom:0px  !important;
	 	 margin-top:45px  !important;
}

.top-tab-close{
	top:-25px !important;
}




.brand-link{
	 margin-top:-10px  !important;
	  margin-bottom:-10px  !important;
	  padding-top:12px !important;
	   padding-bottom:6px !important;
}

#elpie {
    display: show;
}

#elpie.show {
    display: block;
}



 #carrito.dropdown-menu {
  width: 40vw !important;       /* 80% del ancho de la pantalla en escritorio */
  max-width: none !important;
  position: fixed;              /* Fija el menú en la pantalla */
  right: 10% !important;         /* Centra el menú horizontalmente */
  top: 80px;                    /* Ajusta la distancia desde la parte superior */
 
  z-index: 9999;                /* Asegura que esté encima de otros elementos */
  background-color: white;      /* Color de fondo (puedes personalizarlo) */
    max-height: 80vh;                 /* Altura máxima del menú */
  overflow-y: auto;                 /* Activa el desplazamiento vertical */
  border: 1px solid black;       
}

/* Responsive: en pantallas pequeñas ocupa el 90% */
@media (max-width: 768px) {
  #carrito.dropdown-menu {
    width: 90vw !important;    /* 90% del ancho en pantallas pequeñas */
  }
}

 
 
#catalogo.dropdown-menu {
  width: 80vw !important;       /* 80% del ancho de la pantalla en escritorio */
  max-width: none !important;
  position: fixed;              /* Fija el menú en la pantalla */
  left: 50% !important;         /* Centra el menú horizontalmente */
  top: 80px;                    /* Ajusta la distancia desde la parte superior */
  transform: translateX(-50%) !important; /* Lo centra perfectamente */
  z-index: 9999;                /* Asegura que esté encima de otros elementos */
  background-color: white;      /* Color de fondo (puedes personalizarlo) */
    max-height: 80vh;                 /* Altura máxima del menú */
  overflow-y: auto;                 /* Activa el desplazamiento vertical */
  border: 1px solid black;       
}

/* Responsive: en pantallas pequeñas ocupa el 90% */
@media (max-width: 768px) {
  #catalogo.dropdown-menu {
    width: 90vw !important;    /* 90% del ancho en pantallas pequeñas */
  }
}

.horizontal-list {
  list-style-type: none; /* Elimina los puntos de lista */
  padding: 0; /* Elimina el padding por defecto */
  margin: 0; /* Elimina el margen por defecto */
  display: flex; /* Usa flexbox para alinear los elementos en fila */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si es necesario */
  overflow-x: auto; /* Habilita el scroll horizontal si el contenido excede el ancho del contenedor */
}

.horizontal-list li {
  margin: 0.1rem; /* Agrega margen entre los elementos */
  padding: 0.1rem; /* Opcional: agrega padding dentro de los elementos */
  border: 1px solid #ddd; /* Opcional: agrega un borde para mejor visualización */
  border-radius: 4px; /* Opcional: agrega bordes redondeados */
  color: blue; /* Color del texto */
  white-space: nowrap; /* Evita que el texto se envuelva */
}


  .card-img-overlay {
    display: flex;
    flex-direction: column;
  }

  .card-title-bg {
  background-color: rgba(255, 255, 255, 0.7); /* Fondo blanco transparente */
  padding: 8px 12px;
  border-radius: 0.25rem;
  width: 100%; /* Ocupa todo el ancho */
  }

  .text-container {
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 0.25rem;

    /* Scrollbar personalizado */
    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #007bff transparent; /* Firefox */
  }

  /* Chrome, Edge y Safari */
  .text-container::-webkit-scrollbar {
    width: 6px;
  }

  .text-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .text-container::-webkit-scrollbar-thumb {
    background-color: #007bff;
    border-radius: 4px;
    border: 1px solid transparent;
  }

  .text-container::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3;
  }

  .card-text {
    margin: 0;
  }
  
  
.card-animate {
  animation: moveCard 0.5s ease-in-out;
}

@keyframes moveCard {
  0% {
    transform: scale(0.95);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


 
/* Ajuste para asegurarse de que las flechas se vean en los extremos */
#myCarouselx  .owl-nav i, 
#myCarousel  .owl-nav i,
#myCarousel2  .owl-nav i {
    font-size: 30px;  /* Tamaño de las flechas */
    color: #00365F;   /* Color de las flechas */
    background-color: rgba(255, 255, 255, 0.6); /* Fondo semitransparente */
    padding: -10px;
	margin:-20px;
    border-radius: 50%;
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
}

.owl-nav .fa-chevron-left {
    left: -10px;
}

.owl-nav .fa-chevron-right {
    right: -10px;
}

.owl-nav i:hover {
    background-color: rgba(255, 255, 255, 0.9);  /* Fondo más oscuro al pasar el mouse */
}

 

/* Eliminar espacio debajo del carrusel cuando no hay dots */
 

#myCarousel  .owl-carousel .owl-item {
    margin: 0; /* Eliminar márgenes internos que puedan causar espacio */
}
 
#myCarousel  .owl-dots {
    display: none !important;
}



#myCarouselx  .owl-carousel .owl-item {
    margin: 0; /* Eliminar márgenes internos que puedan causar espacio */
}
 
#myCarouselx  .owl-dots {
    display: none !important;
}




#myCarousel2 .owl-dots {
    margin-top: -50px;
    padding-top: -10px;
}
/* Eliminar espacio debajo del carrusel cuando no hay dots */
 #myCarousel2 .owl-stage-outer {
   
}

.img-redondeada {
  border-radius: 5px; /* Puedes ajustar el valor como desees */
}