body > header .navbar {
  --bs-navbar-padding-x: 5px;
  --bs-navbar-padding-y: 5px;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #ddd;
  --bs-navbar-disabled-color: poner;
  --bs-navbar-active-color: var(--bs-navbar-hover-color);
  --bs-navbar-nav-link-padding-x: 5px;
  --bs-navbar-nav-link-border-radius: 5px;

  --bs-navbar-font-size: 14px;
  --bs-nav-link-font-size: var(--bs-navbar-font-size);
  --bs-dropdown-font-size: var(--bs-navbar-font-size);
}

body > header .navbar * {
  font-size: var(--bs-navbar-font-size)
}

body > header .navbar:has(.offcanvas) {
  --bs-navbar-brand-padding-y: 5px;
  --bs-navbar-brand-margin-end: inherit;
  --bs-navbar-brand-font-size: inherit;
  --bs-navbar-brand-color: inherit;
  --bs-navbar-brand-hover-color: inherit;
  --bs-navbar-toggler-padding-y: 5px;
  --bs-navbar-toggler-padding-x: 10px;
  --bs-navbar-toggler-font-size: inherit;
  --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
  --bs-navbar-toggler-border-color: var(--bs-navbar-color);
  --bs-navbar-toggler-focus-width: var(--bs-border-width)
}

body > header .navbar .offcanvas {
  /* --bs-offcanvas-width: 70%; */
  --bs-offcanvas-padding-x: 5px;
  --bs-offcanvas-padding-y: 5px;
  --bs-offcanvas-color: var(--bs-navbar-color);
  --bs-offcanvas-bg: var(--bs-primary);
}

body > header .navbar .nav-item .nav-link,
body > header .navbar .form-control,
body > header .navbar .dropdown-toggle {
  border-radius: var(--bs-navbar-nav-link-border-radius);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out
}

body > header .navbar .nav-item.dropdown .dropdown-menu {
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-spacer: 0;
  --bs-dropdown-bg: transparent;
  --bs-dropdown-border-width: inherit;
  --bs-dropdown-link-color: var(--bs-nav-link-color);
  --bs-dropdown-link-hover-color: var(--bs-navbar-hover-color);
  --bs-dropdown-link-hover-bg: inherit;
  --bs-dropdown-link-active-color: var(--bs-navbar-hover-color);
  --bs-dropdown-link-active-bg: var(--bs-dropdown-link-hover-bg);
  --bs-dropdown-header-color: var(--bs-navbar-color)
}

body > header .navbar .nav-item.dropdown .dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center
}

body > header .navbar .dropdown .dropdown-header {
  margin: 0 1px;
  background-color: var(--bs-tertiary-dark)
}

body > header .navbar .dropdown .dropdown-item {
  transition: color .15s ease-in-out, background-color .15s ease-in-out
}

body > header .navbar :not(.nav-item).dropdown .dropdown-toggle {
	color: var(--bs-navbar-color);
}

body > header .navbar :not(.nav-item).dropdown .dropdown-menu {
	--bs-dropdown-min-width: 100%;
	--bs-dropdown-padding-x: 5px;
	--bs-dropdown-padding-y: 5px;
	--bs-dropdown-spacer: 9.54px;
	--bs-dropdown-color: var(--bs-navbar-color);
	--bs-dropdown-bg: var(--bs-primary);
	--bs-dropdown-border-width: inherit;
	--bs-dropdown-border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
	--bs-dropdown-link-color: inherit;
	--bs-dropdown-link-hover-color: var(--bs-navbar-hover-color);
	--bs-dropdown-link-hover-bg: inherit;
	--bs-dropdown-link-active-color: var(--bs-navbar-hover-color);
	--bs-dropdown-link-active-bg: inherit
}

body > header .navbar.navbar-expand-lg {
  grid-template-columns: 1fr auto 1fr
}

body > header .navbar h1 {
  font-size: 16px;
  color: var(--bs-navbar-color)
}

body > header .navbar-brand {
  filter: brightness(100) invert(0)
}

body > header .navbar-toggler:focus,
body > header .navbar.navbar-expand-lg .nav-item .nav-link:focus-visible,
body > header .navbar.navbar-expand-lg .form-control:focus,
body > header .navbar.navbar-expand-lg .dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25)
}

body > header .offcanvas-header .navbar-brand {
  width: auto;
  height: 33px
}

body > header .navbar .navbar-nav {
  --bs-nav-link-padding-x: 5px;
  gap: 5px
}

body > header .offcanvas .nav-item .nav-link:is(.active, :hover) {
  background-color: var(--bs-primary-dark)
}

body > header .offcanvas .nav-item.dropdown .dropdown-menu li .favorito {
	display: none
}

body > header .navbar.navbar-expand {
  --bs-navbar-color: inherit;
  --bs-navbar-hover-color: inherit;
  display: grid;
  grid-template-columns: 1fr auto 1fr
}

body > header .navbar.navbar-expand .nav-item .nav-link:is(.active, :hover) {
  background-color: var(--bs-primary-dark-subtle)
}

body > header .navbar.navbar-expand :nth-child(n + 11) {
  display: none
}

/* {} Tamaño de pantalla ampliada */
@media (-webkit-min-device-pixel-ratio: 2) {

	body > header .navbar :not(.nav-item).dropdown .dropdown-menu {
		--bs-dropdown-spacer: 8.5px
	}

}

/* {} Pantalla para 576px de ancho */
@media (min-width: 576px) {}

/* {} Pantalla para 768px de ancho */
@media (min-width: 768px) {}

/* {} Pantalla para 992px de ancho */
@media (min-width: 992px) {

  body > header .navbar .offcanvas {
    --bs-offcanvas-width: 100%;
    max-width: var(--bs-offcanvas-width)
  }

  body > header .navbar .nav-item.dropdown .dropdown-menu {
    --bs-dropdown-min-width: 100%;
    --bs-dropdown-padding-x: 5px;
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-spacer: 5px;
    --bs-dropdown-bg: var(--bs-primary);
    --bs-dropdown-border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-link-hover-bg: var(--bs-primary-dark);
    --bs-dropdown-item-border-radius: 5px
  }

  body > header .offcanvas {
    min-width: inherit;
    max-width: inherit
  }

  body > header .navbar.navbar-expand-lg {
    grid-template-columns: auto auto auto
  }

  body > header .offcanvas .nav-item.dropdown .dropdown-menu.show {
    display: grid
  }

  body > header .offcanvas .nav-item.dropdown .dropdown-menu.show:has(>li) {
    grid-template-rows: repeat(10, 1fr);
    grid-auto-flow: column
  }

  body > header .offcanvas .nav-item.dropdown .dropdown-menu.show:has(>div) {
    grid-template-columns: repeat(4, 1fr)
  }

  body > header .offcanvas .nav-item.dropdown .dropdown-menu li i {
    transition: opacity .15s ease-in-out
  }

  body > header .offcanvas .nav-item.dropdown .dropdown-menu .dropdown-item:focus ~ i,
  body > header .offcanvas .nav-item.dropdown .dropdown-menu li:hover i {
    opacity: 1 !important
  }

	body > header .navbar :not(.nav-item).dropdown .dropdown-menu {
		--bs-dropdown-spacer: 13.2px
	}

  body > header .navbar.navbar-expand {
    grid-template-columns: auto 1fr
  }

  body > header .navbar.navbar-expand .navbar-nav .nav-item span {
    max-width: 11.120vw
  }

}

/* {} Pantalla para 1200px de ancho */
@media (min-width: 1200px) {

  body > header .navbar {
    --bs-navbar-padding-x: 0
  }

}

/* {} Pantalla para 1400px de ancho */
@media (min-width: 1400px) {}
