@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f8f9fa; /* Color de fondo claro */
    color: #333; /* Color del texto */
}

.navbar {
    background-color: #1b381d; /* Color guinda */
}

.navbar .navbar-brand, .navbar .nav-link {
    color: white;
}

.sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    background-color: #1b381d;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
}

.sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    display: block;
}

.sidebar a:hover {
    background-color: #1b381d;
}

.sidebar.active {
    left: 0;
}

.content {
    margin-left: 0;
    padding: 20px;
    transition: margin-left 0.5s;
}

.content.active {
    margin-left: 250px;
}

.table thead th {
    background-color: #1b381d;
    color: white;
}

.table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table tbody tr:nth-child(odd) {
    background-color: #e9ecef;
}

#sidebarToggle {
    cursor: pointer;
}

/* CSS overlay y el loader */
.overlay {
  position: absolute; /* Cambiado a absolute para estar dentro del modal-content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fondo negro transparente */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050; /* Asegúrate de que esté por encima del modal */
  visibility: hidden; /* Oculto por defecto */
}

.loader {
  color: #fff;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.3s infinite linear;
  transform: translateZ(0);
}
  
  @keyframes mulShdSpin {
    0%,
    100% {
      box-shadow: 0 -3em 0 0.2em, 
      2em -2em 0 0em, 3em 0 0 -1em, 
      2em 2em 0 -1em, 0 3em 0 -1em, 
      -2em 2em 0 -1em, -3em 0 0 -1em, 
      -2em -2em 0 0;
    }
    12.5% {
      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 
      3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, 
      -2em 2em 0 -1em, -3em 0 0 -1em, 
      -2em -2em 0 -1em;
    }
    25% {
      box-shadow: 0 -3em 0 -0.5em, 
      2em -2em 0 0, 3em 0 0 0.2em, 
      2em 2em 0 0, 0 3em 0 -1em, 
      -2em 2em 0 -1em, -3em 0 0 -1em, 
      -2em -2em 0 -1em;
    }
    37.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
       3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, 
       -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
       3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, 
       -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
       3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, 
       -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
      box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 
      3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
      -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
      box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 
      3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
      -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
  }
  
  .content {
    display: flex;
    flex-direction: column;
}

.catalog-table-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.catalog-container {
  width: 100%; /* Ajusta el ancho para que se adapte al contenedor */
  max-width: 250px; /* Limita el ancho máximo */
  padding-left: 20px; /* Ajusta el padding según sea necesario */
}

.catalog-container a {
  margin-bottom: 5px; /* Espacio entre enlaces */
  text-decoration: none; /* Elimina subrayado */
  color: black; /* Color del texto */
  padding: 10px 15px; /* Espacio interno */
  border-radius: 4px; /* Bordes redondeados */
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s; /* Transición suave */
  display: block; /* Asegura que los enlaces se muestren en bloque */
}

.catalog-container a:hover {
  background-color: #f8f9fa; /* Color de fondo al pasar el cursor */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.catalog-container a.selected {
  background-color: #007bff; /* Color de fondo para el enlace seleccionado */
  color: white; /* Color del texto del enlace seleccionado */
  border: 2px solid #0056b3; /* Borde alrededor del enlace seleccionado */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más destacada */
}

@media (max-width: 768px) {
  .catalog-container {
      width: 100%; /* Ajusta el ancho en pantallas más pequeñas */
      padding-left: 10px; /* Reduce el padding en pantallas más pequeñas */
  }
}

.modal-dialog {
  max-width: 90%; /* Ajusta el ancho máximo del modal para que se ajuste a la pantalla */
}

.modal-content {
  padding: 1rem; /* Añade un poco de padding interno al contenido del modal */
}

.modal-body {
  padding: 0; /* Elimina el padding por defecto del cuerpo del modal para evitar el desbordamiento */
}

.row {
  margin: 0; /* Elimina el margen por defecto en las filas */
}

.col-md-3 {
  padding: 0.5rem; /* Ajusta el padding de las columnas para que los elementos tengan suficiente espacio */
}

.form-control {
  box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el ancho del elemento */
}

.long-select {
  width: 100%; /* Asegura que el select ocupe todo el ancho de su contenedor */
  min-width: 150px; /* Ajusta el ancho mínimo para que los textos largos se muestren adecuadamente */
  padding: 0.5rem; /* Ajusta el padding interno para mejorar la apariencia */
}

.select2-container {
  width: 100% !important; /* Ajusta el ancho al contenedor */
}
.select2.select2-container {
  display: block;
  width: 100% !important; /* Asegúrate de que el ancho sea 100% */
}

#tablaCatalogo2 {
  width: 100% !important; /* Permite que la tabla ocupe el ancho disponible */
  max-width: 1264px; /* Establece un ancho máximo de 1264px */
  margin: 0 auto; /* Centra la tabla horizontalmente si el ancho es menor */
}

.suggestions-dropdown {
  position: absolute;
  border: 1px solid #ccc;
  background-color: white;
  z-index: 1000; /* Asegúrate de que esté sobre otros elementos */
  max-height: 200px; /* Opcional: limita la altura del dropdown */
  overflow-y: auto; /* Opcional: permite el scroll si hay muchas sugerencias */
}

.suggestion-item {
  padding: 8px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f0f0f0; /* Color de fondo al pasar el mouse */
}