.circle {
  width: 60px; /* Ajusta el tamaño deseado */
  height: 60px;
  object-fit: cover;
  border-radius: 0%; /* Hace que la imagen sea circular */
  border: 2px solid #ddd; /* Opcional: un borde alrededor de la imagen */
}

.circle_header {
  width: 150px; /* Ajusta el tamaño deseado */
  height: 150px;
  object-fit: cover; /* Aseguramos que la imagen se ajuste dentro del círculo */
  border-radius: 50%; /* Hace que la imagen sea circular */
  border: 2px solid #ddd; /* Opcional: un borde alrededor de la imagen */
  position: absolute;
  bottom: 0; /* Alinear con el margen inferior */
  left: 50%; /* Centramos horizontalmente */
  transform: translate(-50%, 50%); /* Ajustamos el centro del círculo */
}

.full-screen {
  height: 90vh;
}

#headers{
    width: 100%;
    aspect-ratio: 16 / 6.1;  /* Mantiene proporción responsiva */
    overflow: hidden;
    object-fit: contain; /* opcional, para controlar cómo se ajusta */
    position: relative;
}

.card-image{
    display: block;
    object-fit: cover; /* Hace que la imagen se recorte si es necesario */
    width: 100%;
    height: 350px !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* Dropdown Table */
.drop[aria-expanded="true"] .bi-chevron-down {
  display: none; /* Oculta la flecha hacia abajo cuando está desplegado */
}
.drop[aria-expanded="true"] .bi-chevron-up {
  display: inline; /* Muestra la flecha hacia arriba cuando está desplegado */
}
.drop[aria-expanded="false"] .bi-chevron-up {
  display: none; /* Oculta la flecha hacia arriba cuando está colapsado */
}

/* Ancho al 50% en pantallas medianas (md) y mayores */
/* Ancho al 25% en diferentes puntos de quiebre */
.w-sm-25 {
  width: 100%;
}
@media (min-width: 576px) {
  .w-sm-25 {
      width: 25%;
  }
}

.w-md-25 {
  width: 100%;
}
@media (min-width: 768px) {
  .w-md-25 {
      width: 25%;
  }
}

.w-lg-25 {
  width: 100%;
}
@media (min-width: 992px) {
  .w-lg-25 {
      width: 25%;
  }
}

.w-xl-25 {
  width: 100%;
}
@media (min-width: 1200px) {
  .w-xl-25 {
      width: 25%;
  }
}

.w-xxl-25 {
  width: 100%;
}
@media (min-width: 1400px) {
  .w-xxl-25 {
      width: 25%;
  }
}

/* Ancho al 50% en diferentes puntos de quiebre */
.w-sm-50 {
  width: 100%;
}
@media (min-width: 576px) {
  .w-sm-50 {
      width: 50%;
  }
}

.w-md-50 {
  width: 100%;
}
@media (min-width: 768px) {
  .w-md-50 {
      width: 50%;
  }
}

.w-lg-50 {
  width: 100%;
}
@media (min-width: 992px) {
  .w-lg-50 {
      width: 50%;
  }
}

.w-xl-50 {
  width: 100%;
}
@media (min-width: 1200px) {
  .w-xl-50 {
      width: 50%;
  }
}

.w-xxl-50 {
  width: 100%;
}
@media (min-width: 1400px) {
  .w-xxl-50 {
      width: 50%;
  }
}

/* Ancho al 75% en diferentes puntos de quiebre */
.w-sm-75 {
  width: 100%;
}
@media (min-width: 576px) {
  .w-sm-75 {
      width: 75%;
  }
}

.w-md-75 {
  width: 100%;
}
@media (min-width: 768px) {
  .w-md-75 {
      width: 75%;
  }
}

.w-lg-75 {
  width: 100%;
}
@media (min-width: 992px) {
  .w-lg-75 {
      width: 75%;
  }
}

.w-xl-75 {
  width: 100%;
}
@media (min-width: 1200px) {
  .w-xl-75 {
      width: 75%;
  }
}

.w-xxl-75 {
  width: 100%;
}
@media (min-width: 1400px) {
  .w-xxl-75 {
      width: 75%;
  }
}

/* Ancho al 100% en diferentes puntos de quiebre */
.w-sm-100 {
  width: 100%;
}
@media (min-width: 576px) {
  .w-sm-100 {
      width: 100%;
  }
}

.w-md-100 {
  width: 100%;
}
@media (min-width: 768px) {
  .w-md-100 {
      width: 100%;
  }
}

.w-lg-100 {
  width: 100%;
}
@media (min-width: 992px) {
  .w-lg-100 {
      width: 100%;
  }
}

.w-xl-100 {
  width: 100%;
}
@media (min-width: 1200px) {
  .w-xl-100 {
      width: 100%;
  }
}

.w-xxl-100 {
  width: 100%;
}
@media (min-width: 1400px) {
  .w-xxl-100 {
      width: 100%;
  }
}