/*
 * Estilo propio para el selector de idioma de dvzambrano/locale
 * (locale::partials.language-selector). La plantilla "Personal" nunca
 * tuvo un ítem de nav con submenú, así que su style.css no trae reglas
 * para ".dropdown" — sin esto, el <ul> anidado se ve como una lista
 * plana siempre visible en vez de un desplegable. Archivo aparte para
 * no tocar el style.css de BootstrapMade.
 */

.navbar li.dropdown {
  position: relative;
}

/* #header keeps `height: 100vh; overflow-y: auto;` from its default
   sidebar layout (style.css), and never resets overflow for the
   scrolled `.header-top` state (a fixed 80px bar) — so the dropdown
   below, which lives inside #header in the DOM, was getting clipped by
   that leftover overflow instead of just showing on top of the page
   below. Confirmed visually: without this, opening the selector while
   scrolled cut the menu off right at the header's edge. */
#header.header-top {
  overflow: visible;
}

.navbar li.dropdown > a {
  cursor: pointer;
}

.navbar li.dropdown ul {
  display: block;
  position: absolute;
  /* Last item in the nav — anchoring the dropdown to the trigger's
     right edge (not left) keeps it from spilling past the viewport's
     right edge and forcing a horizontal scrollbar, since there's no
     room to its right for a left-anchored 160px-wide menu to grow into. */
  right: 0;
  top: calc(100% + 20px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  min-width: 160px;
  max-width: calc(100vw - 32px);
  list-style: none;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.navbar li.dropdown:hover ul,
.navbar li.dropdown:focus-within ul {
  opacity: 1;
  visibility: visible;
  top: 100%;
}

.navbar li.dropdown ul li {
  margin: 0;
  padding: 0 16px;
}

.navbar li.dropdown ul li + li {
  margin-top: 6px;
}

.navbar li.dropdown ul a {
  padding: 4px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.navbar li.dropdown ul a:hover {
  color: #18d26e;
}

@media (max-width: 991px) {
  .navbar li.dropdown ul {
    position: static;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 20px;
  }
}