.oculto {
  visibility: hidden;
  display: none;
}
.imagen-destacado {
  position: absolute;
  top: -20px;
  left: -20px;
  height: 40px;
}
.carpeta-destacada {
  font-weight: 800 !important;
}
.container-pbi {
  overflow: hidden;
}
.responsive-iframe {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 96%;
}
.text-primary {
  color: #0d6efd !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-success {
  color: #198754 !important;
}

.text-info {
  color: #0dcaf0 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-light {
  color: #f8f9fa !important;
}
.text-white {
  color: #fff !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-reset {
  color: inherit !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: #dfe3e7 !important;
}
.btn-turno {
  font-size: 0.8rem;
}
.icon-hover {
  transition: transform 500ms;
  transition-timing-function: cubic-bezier(0.75, -3, 0.25, 4);
}
.icon-hover:hover {
  transform: scale(1.1);
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.icono-footer {
  animation: pulse 1.2s infinite;
}
.form-floating > label {
  left: unset !important;
}
.fc .fc-timegrid-slot {
  height: 4.2em !important;
}
.fc-timegrid-event-harness > .fc-timegrid-event {
  /* width: 8em; */
  width: auto !important;
}
.fc-content {
  margin: -1% !important;
}
.estilo-tabla th,
.estilo-tabla td {
  text-align: center !important;
  align-items: middle !important;
}
.nueva-capacitacion {
  margin-bottom: 15px !important;
}
.editar-capacitacion {
  margin-bottom: 15px !important;
}
.parrafo-boton-agregar-capacitacion {
  text-align: center !important;
}
.descripcion-leccion {
  max-height: 430px !important;
}
.auth-card {
  max-width: 400px; /* Ajusta el tamaño máximo de la tarjeta */
  margin: auto; /* Centra la tarjeta horizontalmente */
}
.loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  position: relative;
}

.loading .spinner-border {
  display: inline-block;
  margin-bottom: 8px;
}

.loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: loading-spin 1s linear infinite;
}

@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 576px) {
    /* En pantallas pequeñas, los campos estarán apilados verticalmente */
    #buscador_orden .col-12 {
        flex: 1 1 100%; /* Cada campo ocupa el 100% de ancho */
    }

    /* Cambia la dirección de los campos a columna */
    #buscador_orden .d-flex {
        flex-direction: column; /* Apilar los elementos */
    }

    /* Hacer que las etiquetas ocupen todo el ancho */
    #buscador_orden label {
        width: 100%;
        margin-bottom: 0.25rem; /* Espacio debajo de la etiqueta */
    }

    /* Asegurar que los inputs ocupen el 100% de ancho */
    #buscador_orden .form-control-sm {
        width: 100%;
    }

    /* Ajustar el espacio de los campos */
    .invalid-feedback {
        width: 100%;
    }
}