#main {
  transition: margin-left .5s;
  padding: 16px;
  font-size: large;
}

body{
  background-image: url(/img/bg/bg3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.azul{
  background-color: #284d84;
}

.body{
  background-color: #bccedb;
}

.bg-navbar{
  background-color: #284d84;
}

.btn-campana{
  background-color: white;
}

.accesos-directos{
  background-color: #284d84;
}

.sideNav{
  background-color: #284d84;
  color: white;
}

#azul{
  background-color: #284d84;
}

#card-bg {
  --opacidad-negro: 0.7;
  background-image: linear-gradient(rgba(44, 77, 132, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url(/img/bg/bg7.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
}

/* Clases adicionales para ajustar la imagen de fondo */
.bg-contain {
  background-size: contain !important;
}

.bg-auto {
  background-size: auto !important;
}

.bg-position-top {
  background-position: center top !important;
}

.bg-position-bottom {
  background-position: center bottom !important;
}

.bg-position-left {
  background-position: left center !important;
}

.bg-position-right {
  background-position: right center !important;
}

.bg-fixed {
  background-attachment: fixed !important;
}

/* Posicionamiento vertical preciso con porcentajes */
.bg-position-10 {
  background-position: center 10% !important;
}

.bg-position-20 {
  background-position: center 20% !important;
}

.bg-position-30 {
  background-position: center 30% !important;
}

.bg-position-40 {
  background-position: center 40% !important;
}

.bg-position-50 {
  background-position: center 50% !important;
}

.bg-position-60 {
  background-position: center 60% !important;
}

.bg-position-70 {
  background-position: center 70% !important;
}

.bg-position-80 {
  background-position: center 80% !important;
}

.bg-position-90 {
  background-position: center 90% !important;
}

/* Posicionamiento con píxeles para ajustes muy precisos */
.bg-position-custom {
  /* Usar con variables CSS personalizadas */
  background-position: var(--bg-x, center) var(--bg-y, center) !important;
}

#azul-gradient{
  background: #2C4D84;
  background: linear-gradient(90deg, rgba(44, 77, 132, 1) 0%, rgba(255, 255, 255, 0.64) 100%);
}

#blurred-background {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}