:root {
  --vk-accent: #378AEF;        /* celeste oscuro */
  --vk-accent-dk: #2C75D9;     /* m�s oscuro a�n si quer�s usar en hover */
  --vk-accent-alt: #FF6A00;    /* naranja */
  --pills-background-color-active: #378AEF;
  --pills-background-color-hover:#ceddfb;
  --pills-text-color-active: #ffffff;
}

/* MENU superior y navegaci�n */
.navigation,
.navbar,
.navigation-background,
#header,
.navigation-background-color {
  background: var(--vk-accent) !important;
  color: #FFFFFF !important;
}

.navigation a,
.navbar a,
#header a {
  color: #FFFFFF !important;
}

.navigation a:hover,
.navbar a:hover,
#header a:hover {
  color: var(--vk-accent-alt) !important;
}

/* FOOTER */
footer.footer,
#footer {
  background: var(--vk-accent) !important;
  color: #FFFFFF !important;
  border-top: 1px solid #E2E2E6;
}

footer.footer a,
#footer a {
  color: #FFFFFF !important;
}
footer.footer a:hover,
#footer a:hover {
  color: var(--vk-accent-alt) !important;
}
/* Men� desplegable */
.dropdown-menu {
  background: #FFFFFF;
  color: var(--vk-accent);
  border: 1px solid #E2E2E6;
}

.dropdown-menu a,
.dropdown-item {
  color: var(--vk-accent) !important;   /* celeste */
  background-color: #FFFFFF !important;
}

.dropdown-menu a:hover,
.dropdown-item:hover {
  background-color: #F0F8FF !important;  /* azul claro sutil para hover */
  color: var(--vk-accent-alt) !important; /* naranja al pasar el mouse */
}


.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--vk-accent) !important;
  color: var(--pills-text-color-active) !important; /* blanco */
}

.nav-pills .nav-link:not(.active):hover {
  background: var(--vk-accent-dk) !important;
  color: var(--vk-accent-alt) !important; /* naranja */
}


ul.breadcrumb {
  background-color: var(--pills-background-color-hover) !important; /* celeste claro */
  border-radius: .25rem;
  padding: .5rem .75rem;
  border: 1px solid #E2E2E6;
}


ul.breadcrumb a:hover {
  color: var(--vk-accent-alt) !important; /* naranja */
}
/* Header claro: accesos rapidos en color de marca */
.navbar-header .quick-access a,
.navbar-header .quick-access a:visited,
.navbar-header .quick-access .navbar-icon,
.navbar-header .quick-access small {
  color: var(--vk-accent-dk) !important;
}

.navbar-header .quick-access a:hover,
.navbar-header .quick-access a:hover .navbar-icon,
.navbar-header .quick-access a:hover small,
.navbar-header .quick-access a:focus,
.navbar-header .quick-access a:focus .navbar-icon,
.navbar-header .quick-access a:focus small {
  color: var(--vk-accent-alt) !important;
}