:root {
    --color-datazul: #283989; /* Definición de la variable */
    --color-danger: #dc3545
}

.custom-container {
  max-width: 90%; /* Ajusta el porcentaje según tu preferencia */
  margin: 0 5%; /* Centrar el contenido */
  padding-left: 15px; /* Ajusta según lo que prefieras */
  padding-right: 15px; /* Ajusta según lo que prefieras */
}


.bg-primary {
    background-color:  var(--color-datazul) !important; /* Color Datazul */
}

.no-disponible {
    pointer-events: none; /* Deshabilitar interacciones */
    opacity: 0.85; /* Opacidad similar a los botones deshabilitados de Bootstrap */
  }

.no-disponible.border-left-primary {
    border-left-color: red !important; /* Cambia el borde izquierdo a rojo */
  }

.no-disponible.border-left-primary {
  border-left-color: red !important; /* Cambia el borde izquierdo a rojo */
}

.no-disponible .text-primary {
  color: red !important; /* Cambia el texto a rojo */
}

  /* cards del menu de equipos */
.card-img-top img {
  height: 200px; /* Puedes ajustar esta altura según tus necesidades */
  object-fit: cover;
  width: 100%;

  overflow: hidden;
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: transform 0.2s;
}
.card-link:hover {
  transform: scale(1.05);
  text-decoration: none;
  color: inherit;
}
.card-link .card-body {
  background-color: var(--color-datazul) !important; /* Asegura que el cuerpo de la card mantenga el color primary */
}

.card-link .card-img-top img {
  height: 200px; /* Ajusta esta altura según sea necesario */
  object-fit: cover;
  width: 100%;
}
  
/* Estilo para que el contenido principal ocupe al menos el 100% de la altura de la ventana */
main.flex-fill {
  flex: 1 0 auto;
  min-height: calc(100vh - 56px); /* 100vh menos la altura aproximada del header */
  padding-bottom: 20px; /* Espacio adicional para asegurar que haya contenido extra */
  display: flex; /* Usar flexbox para centrar el contenido */
  flex-direction: column; /* Organiza el contenido de forma vertical */
  justify-content: center; /* Centra verticalmente el contenido */

}

/* Ajustar el contenedor para evitar que el footer suba */
.d-flex.flex-column.min-vh-100 {
  min-height: 100vh;
}

/* Opcional: Espaciado para el footer */
footer.footer {
  padding-top: 20px;
  padding-bottom: 20px;
}