.dropzone .dz-preview .dz-progress {
    height: 10px !important;
    top: 85% !important;
  }
  
.dropzone {
border-style: dashed !important;
}
  
.rounded-button {
  top: -15% !important;
  left: 85%;
  margin-top: 5px;
  cursor: pointer !important;
  background-color: red;
  border: none;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1000;
}

.subtitulo-sup {
  font-size: 10px;
}

.float-end {
  text-align: right !important;
}

.details-teams {
  display: none;
}

.iq-navbar .dropdown .dropdown-menu.sub-drop .list-group-item.active a {
  color: #fff;
}

.btn-montrer-add {
  background-color: #007b34;
  color: #fff;
  border-radius: 30px;
}

.btn-montrer-add:hover {
  background-color: #1faf5b;
  font-size: 25px;
  padding: 0px 7px !important;
  margin-top: -8px;
  color: #000;
  transition: 0.5s;
}

.btn-montrer {
  background-color: #007b34;
  color: #fff;
  border-radius: 30px;
}

.btn-montrer:hover {
  background-color: #1faf5b;
  border-radius: 10px;
  color: #000;
  transition: border-radius 0.5s;
}

.delete-btn {
  background-color: #c62828;
  color: #fff;
  border-radius: 30px;
  border: 0;
}

.delete-btn:hover {
  background-color: #f8312f;
  border-radius: 10px;
  border: 0;
  color: #000;
  transition: border-radius 0.5s;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
}
/* Estilos generales para los enlaces de navegación */
.nav-link {
  position: relative;
  color: #000;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #007b34; /* Color verde */
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}

.nav-link:hover::after {
  visibility: visible;
  transform: scaleX(1);
}

.nav-link:hover {
  color: #007b34; /* Color verde al pasar el mouse */
}

.nav-link.active {
  color: #007b34; /* Color verde cuando está activo */
}

.nav-link.active::after {
  visibility: visible;
  transform: scaleX(1);
}

/* Estilos específicos para el enlace de btn-logout */
.nav-link.btn-logout {
  color: #000; /* Color por defecto */
}

.nav-link.btn-logout:hover {
  color: #dc3545; /* Color rojo al pasar el mouse */
}

.nav-link.btn-logout::after {
  background-color: #dc3545; /* Línea roja */
}

.nav-link.btn-logout:hover::after,
.nav-link.btn-logout.active::after {
  visibility: visible;
  transform: scaleX(1);
}

.btn-montrer-1 {
  background-color: #c20d0d;
  color: #fff;
  border-radius: 30px;
}

.btn-montrer-1:hover {
  background-color: #f8312f;
  border-radius: 10px;
  color: #000;
  transition: border-radius 0.5s;
}

.btn-montrer-2 {
  background-color: #7b0046;
  color: #fff;
  border-radius: 30px;
}

.btn-montrer-2:hover {
  background-color: #E899C6;
  border-radius: 10px;
  color: #000;
  transition: border-radius 0.5s;
}

.btn-montrer-3 {
  background-color: #1a8bcb;
  color: #fff;
  border-radius: 30px;
}

.btn-montrer-3:hover {
  background-color: #a0d4f1;
  border-radius: 10px;
  color: #000;
  transition: border-radius 0.5s;
}

.page-item .page-link {
  border: 0 !important;
  color: #7b0046 !important;
}

.page-item.active .page-link {
  background-color: #E899C6 !important;
}

.loading-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo más oscuro */
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  display: none;
}

.spinner-border {
  width: 3rem;
  height: 3rem;
}

.centered-form {
  min-height: 100vh; /* Altura mínima para ocupar toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-button {
  position: relative; /* Posicionamiento relativo para controlar el pseudo-elemento */
  padding: 10px 25px;
  background-color: #4A5FCC; /* Color azul para el estado normal */
  border: none;
  color: white;
  font-size: 16px;
  font-family: Arial, sans-serif;
  border-radius: 30px;
  overflow: visible;
  transition: transform 0.5s ease, background-color 0.5s ease; /* Transición suave para el movimiento y color */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
  z-index: inherit;
}

.copy-button::after {
  padding-left: 5px !important;
  content: ''; /* Necesario para que el pseudo-elemento se muestre */
  position: absolute;
  width: 100%;
  height: 100%;
  left: 8%; /* Ajuste de posición inicial */
  background-color: #4A5FCC; /* Color azul para el estado normal */
  border-radius: 30px; /* Mismo radio de borde que el botón principal */
  transition: all 0.5s ease; /* Transiciones suaves para todos los cambios */
  opacity: 0; /* Inicialmente invisible */
  transform: translate(5px, -15px); /* Posición inicial ligeramente desplazada */
  z-index: -1; /* Asegura que el pseudo-elemento esté detrás del botón principal */
}

.copy-button:hover {
  background-color: #9ca5f5; /* Color morado para el segundo botón */
  transform: translate(15px, -5px); /* Mueve el botón principal arriba y a la izquierda */
  transition: all 0.5s ease; /* Transiciones suaves para todos los cambios */
}

.copy-button:hover::after {
  opacity: 0.5; /* Hace visible el segundo botón */
  background-color: #9ca5f5; /* Color morado para el segundo botón */
  transition: all 0.5s ease; /* Transiciones suaves para todos los cambios */
  border-radius: 10px;
  transform: translate(-15px, 0px); /* Retorna a su posición inicial para alinearse correctamente */
}

/* También puedes aplicar estilos a la clase directamente */
.form-control[readonly] {
  background-color: transparent; /* Color de fondo diferente */
  color: #495057;            /* Color del texto diferente */
  border-color: transparent;     /* Color del borde diferente */
  box-shadow: none;          /* Sin sombra */
  cursor: not-allowed;      /* Cambiar el cursor */
}

.mobile-offcanvas .container-fluid .navbar-nav {
  display: none;
}

@media (max-width: 1199.98px) {
  
  .mobile-offcanvas .container-fluid .navbar-nav {
    display: block;
  }
}

table.dataTable tr.dt-hasChild td.dt-control:before {
  border-top: 0px !important;
  border-left: 0px !important;
  border-bottom: 0px !important;
  border-right: 0px !important;
}

.expand-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.6s ease-in-out;
}

.expand-container.expanded {
  max-height: 500px; /* Ajusta esto según la altura máxima de tu contenido */
}

.details-control {
  cursor: pointer;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .mobile-offcanvas {
      width: 30% !important;
  }
}
@media (max-width: 991px) {
  .horizontal-nav.mobile-offcanvas .nav-link {
      color: #053815;
      width: 100%;
  }
}
.menu-sil{
  width: 200px; /* Cambia el ancho a algo más ajustado si se ve demasiado ancho */
  position: relative;
}
.menu-apps{
  width: 150px; /* Cambia el ancho a algo más ajustado si se ve demasiado ancho */
  position: relative;
}
.menu-credenciales{
  width: 180px; /* Cambia el ancho a algo más ajustado si se ve demasiado ancho */
  position: relative;
}

.select-btn {
  cursor: pointer;
}

.select-btn i{
  font-size: 14px;
  transition: transform 0.3s;
}

.select-menu.active .select-btn i{
  transform: rotate(-180deg); /* Rotación más suave */
}

.select-menu .options{
  position: absolute;
  padding-left: 0 !important;
  z-index: 1;
  margin-top: 8px; /* Espaciado más ajustado */
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Mejora de la sombra para destacar mejor */
  display: none;
  width: 100%;
}

.select-menu.active .options{
  display: block;
}

.options .option{
  display: flex;
  height: 50px;
  cursor: pointer;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 0;
  transition: background-color 0.3s ease;
  margin: 5px;
}

.options .option a{
  display: flex;
  align-items: center;
  width: 100%; /* Abarca el 100% del ancho */
  padding: 0 16px;
  text-decoration: none;
  color: #333; /* Color de texto más suave */
  height: 100%;
  border-radius: 6px;
}

.options .option:hover {
  background-color: #f2f2f2; /* Sutil cambio de color al hover */
}

.option i{
  font-size: 20px; /* Ajuste para que el ícono sea más pequeño */
  margin-right: 12px;
}

.option .option-text{
  font-size: 16px; /* Un tamaño de fuente un poco más pequeño */
  color: #333;
}
.table>:not(caption)>*>* {
  padding: 0.5rem 0.5rem !important;
}

@media (min-width: 1200px) {
  .modal-xl {
      --bs-modal-width: 1700px !important;
  }
}

.ui-draggable-handle {
  cursor: move;
}
[data-toggle="tooltip"] {
  position: relative;
  cursor: pointer;
}

[data-toggle="tooltip"]::before,
[data-toggle="tooltip"]::after {
  text-transform: none;
  font-size: 0.9em;
  line-height: 1;
  position: absolute;
  display: none;
  opacity: 0;
  filter: drop-shadow(3px 4px 4px #BCBCBC);
}

[data-toggle="tooltip"]::before {
  content: '';
  border: 6px solid transparent;
  z-index: 101;
}

[data-toggle="tooltip"]::after {
  content: attr(title);
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 12px;
  border-radius: 9px;
  background: #006D45;
  color: #FFFFFF;
  z-index: 100;
}

[data-toggle="tooltip"]:hover::before,
[data-toggle="tooltip"]:hover::after {
  display: block;
}

[data-toggle="tooltip"][title='']::before,
[data-toggle="tooltip"][title='']::after {
  display: none !important;
}

[data-toggle="tooltip"]:not([data-flow])::before,
[data-toggle="tooltip"][data-flow^="top"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #006D45;
}

[data-toggle="tooltip"]:not([data-flow])::after,
[data-toggle="tooltip"][data-flow^="top"]::after {
  bottom: calc(100% + 5px);
}

[data-toggle="tooltip"]:not([data-flow])::before,
[data-toggle="tooltip"]:not([data-flow])::after,
[data-toggle="tooltip"][data-flow^="top"]::before,
[data-toggle="tooltip"][data-flow^="top"]::after {
  left: 50%;
  transform: translate(-50%, -.4em);
}

[data-toggle="tooltip"][data-flow^="bottom"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #006D45;
}

[data-toggle="tooltip"][data-flow^="bottom"]::after {
  top: calc(100% + 5px);
}

[data-toggle="tooltip"][data-flow^="bottom"]::before,
[data-toggle="tooltip"][data-flow^="bottom"]::after {
  left: 50%;
  transform: translate(-50%, .4em);
}

[data-toggle="tooltip"][data-flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #006D45;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}

[data-toggle="tooltip"][data-flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.4em, -50%);
}

[data-toggle="tooltip"][data-flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #006D45;
  right: calc(0em - 7px);
  transform: translate(.4em, -50%);
}

[data-toggle="tooltip"][data-flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

@keyframes tooltip-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltip-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

[data-toggle="tooltip"]:not([data-flow]):hover::before,
[data-toggle="tooltip"]:not([data-flow]):hover::after,
[data-toggle="tooltip"][data-flow^="top"]:hover::before,
[data-toggle="tooltip"][data-flow^="top"]:hover::after,
[data-toggle="tooltip"][data-flow^="bottom"]:hover::before,
[data-toggle="tooltip"][data-flow^="bottom"]:hover::after {
  animation: tooltip-vert 0.5s ease-out forwards;
}

[data-toggle="tooltip"][data-flow^="left"]:hover::before,
[data-toggle="tooltip"][data-flow^="left"]:hover::after,
[data-toggle="tooltip"][data-flow^="right"]:hover::before,
[data-toggle="tooltip"][data-flow^="right"]:hover::after {
  animation: tooltip-horz 0.5s ease-out forwards;
}

/* Añade esto en tu CSS global o en un archivo importado */
.object-fit-cover {
  object-fit: cover;
}
/* Ratio 4:5 para Bootstrap <5.3; si no, usa aspect-ratio directamente */
.ratio-4x5 {
  position: relative;
  width: 100%;
  padding-top: calc(100% * 5 / 4); /* 4:5 */
}
.ratio-4x5 > * {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}

.nav-item {
  list-style: none;
}

.nav-link {
  width: 100%;
}