/* Selector de idioma - Frontend */
.ul-lang-switcher{position:relative;display:inline-block;font-family:'DM Sans',sans-serif;}
.ul-lang-current{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;border:1.5px solid #dde2ea;border-radius:999px;cursor:pointer;font-size:14px;font-weight:500;color:#1a1f2e;transition:all .18s;}
.ul-lang-current:hover{border-color:#1B4F8A;color:#1B4F8A;}
.ul-lang-arrow{font-size:10px;opacity:.6;transition:transform .2s;}
.ul-lang-current[aria-expanded="true"] .ul-lang-arrow{transform:rotate(180deg);}
.ul-lang-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:160px;background:#fff;border:1px solid #dde2ea;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);list-style:none;padding:6px;z-index:9999;}
.ul-lang-dropdown.open{display:block;}
.ul-lang-option{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:7px;text-decoration:none;color:#1a1f2e;font-size:14px;font-weight:500;transition:background .15s;}
.ul-lang-option:hover{background:#f4f6f9;}
/* Flotante */
.ul-lang-floating{position:fixed;bottom:24px;right:24px;z-index:9998;}
.ul-lang-floating .ul-lang-current{box-shadow:0 4px 16px rgba(0,0,0,.15);}

/* Posicionamiento dropdown hacia arriba */
.ul-lang-switcher .ul-lang-dropdown.ul-lang-up {
  bottom: calc(100% + 6px);
  top: auto;
}
.ul-lang-switcher .ul-lang-dropdown.ul-lang-down {
  top: calc(100% + 6px);
  bottom: auto;
}

/* Visibilidad y transición del selector flotante */
.ul-lang-floating {
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
}
.ul-lang-floating.ul-lang-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.ul-lang-floating.ul-lang-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Responsive móvil — selector flotante más compacto */
@media (max-width: 480px) {
  .ul-lang-floating {
    bottom: 16px !important;
    right: 16px !important;
  }
  .ul-lang-floating .ul-lang-current {
    padding: 7px 12px;
    font-size: 13px;
  }
  .ul-lang-floating .ul-lang-dropdown {
    right: 0;
    min-width: 140px;
  }
}

/* ── Posicionamiento dropdown inteligente ── */
.ul-lang-switcher .ul-lang-dropdown {
  position: absolute;
  right: 0;
}
.ul-lang-switcher .ul-lang-dropdown.ul-lang-down {
  top: calc(100% + 6px);
  bottom: auto;
}
.ul-lang-switcher .ul-lang-dropdown.ul-lang-up {
  bottom: calc(100% + 6px);
  top: auto;
}

/* ── Visibilidad y transición del flotante ── */
.ul-lang-floating {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  transition: opacity 0.35s ease, transform 0.35s ease;
  opacity: 1;
  transform: translateY(0);
}
.ul-lang-floating.ul-lang-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.ul-lang-floating.ul-lang-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* ── Debug Badge ── */
.ul-lang-debug-badge {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #1a1f2e;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.8;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 9999;
  font-family: 'DM Sans', sans-serif;
}
.ul-lang-debug-badge strong {
  font-size: 11px;
  color: #facc15;
  margin-bottom: 4px;
  display: block;
}
.ul-lang-debug-badge code {
  background: rgba(255,255,255,.15);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: #86efac;
}

/* ── Responsive móvil ── */
@media (max-width: 480px) {
  .ul-lang-floating {
    bottom: 14px;
    right: 14px;
  }
  .ul-lang-floating .ul-lang-current {
    padding: 7px 11px;
    font-size: 13px;
  }
  .ul-lang-floating .ul-lang-dropdown {
    min-width: 140px;
  }
  .ul-lang-debug-badge {
    font-size: 11px;
    max-width: calc(100vw - 28px);
    white-space: normal;
  }
}

/* ── Responsive tablet ── */
@media (max-width: 768px) {
  .ul-lang-floating {
    bottom: 18px;
    right: 18px;
  }
}

/* ── Dropdown siempre visible hacia arriba ── */
.ul-lang-switcher { position: relative; display: inline-block; }
.ul-lang-dropdown { position: absolute; right: 0; z-index: 9999; }
.ul-lang-dropdown.ul-lang-up   { bottom: calc(100% + 8px); top: auto;  }
.ul-lang-dropdown.ul-lang-down { top: calc(100% + 8px);    bottom: auto; }

/* ── Opción activa en el dropdown ── */
.ul-lang-option.ul-lang-active {
  background: #e8f0fb;
  font-weight: 600;
  color: #1B4F8A;
  pointer-events: none;
}

/* ── Flotante ── */
.ul-lang-floating {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ul-lang-floating.ul-lang-hidden  { opacity: 0; pointer-events: none; transform: translateY(10px); }
.ul-lang-floating.ul-lang-visible { opacity: 1; pointer-events: all;  transform: translateY(0); }

/* ── Debug badge ── */
.ul-lang-debug-badge {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: #1a1f2e;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.9;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 10000;
  border: 1px solid rgba(255,255,255,.1);
  min-width: 260px;
}
.ul-lang-debug-badge strong {
  color: #facc15;
  font-size: 11px;
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ul-lang-debug-badge span { font-size: 12px; color: rgba(255,255,255,.8); }
.ul-lang-debug-badge code {
  background: rgba(255,255,255,.12);
  padding: 1px 6px;
  border-radius: 4px;
  color: #86efac;
  font-size: 11px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .ul-lang-floating         { bottom: 14px; right: 14px; }
  .ul-lang-debug-badge      { white-space: normal; max-width: calc(100vw - 28px); min-width: 0; }
  .ul-lang-floating .ul-lang-current { padding: 7px 11px; font-size: 13px; }
}
@media (max-width: 768px) {
  .ul-lang-floating { bottom: 18px; right: 18px; }
}