body {
  overflow-x: hidden;
  background-color: #111;
}

/* ========== Carrusel principal ========== */
#header_dashboard {
  width: 100%;
  height: 58vh;
  /* altura suficiente para no cortar las imágenes */
  overflow: hidden;
  background-color: #111;
}

#header_dashboard .carousel,
#header_dashboard #carouselExampleInterval {
  width: 100%;
  height: 100%;
  background-color: #111;
}

#header_dashboard .carousel-inner {
  width: 100%;
  height: 100%;
  background-color: #111;
}

#header_dashboard .carousel-item {
  height: 100%;
  background-color: #111;
}

/* Imagen cubre el espacio sin dejar barras negras */
/* CAUSA RAÍZ: app.css tiene img { max-width: 60% } - hay que sobrescribirlo */
#header_dashboard .carousel-item img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  /* sobrescribe el max-width:60% de app.css */
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
}

/* Flechas del carrusel */
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  opacity: 0.5;
  transition: opacity 0.2s;
  z-index: 10;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

/* Indicadores (puntitos inferiores) */
.carousel-indicators [data-bs-target] {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.carousel-indicators .active {
  background-color: #ff2020;
}

@media (min-width: 1360px) {
  .img_oso {
    width: 35vw;
  }

  .img_logo {
    height: 25vw;
    max-width: 90%;
  }

  #track_header {
    grid-template-columns: 25% 60%;
  }

  #track_container {
    height: 130vh;
  }
}