@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 */ }