/* Selector de idioma del shell (public/js/components/lang_switch.js). Compacto: un botón con el código del idioma y un menú. */
.se-lang { position: relative; display: inline-flex; align-items: center; }
.se-lang__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; cursor: pointer;
  background: rgba(11, 29, 50, 0.55); color: var(--claro, #eef5fb);
  font: 700 12px/1 var(--f-num, system-ui, sans-serif); letter-spacing: 0.04em;
}
.se-lang__btn:hover { background: rgba(255, 255, 255, 0.12); }
.se-lang__btn:focus-visible { outline: 2px solid var(--oro, #ffc21a); outline-offset: 2px; }
.se-lang__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.se-lang__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 90; min-width: 168px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--linea, rgba(157, 179, 201, 0.3)); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  background: var(--tinta-2, #12304f); color: var(--claro, #eef5fb);
}
.se-lang__menu[hidden] { display: none; }
.se-lang__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font: 600 14px/1.2 var(--f-body, system-ui, sans-serif); text-align: left; cursor: pointer;
}
.se-lang__opt:hover, .se-lang__opt:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; }
.se-lang__opt[aria-selected="true"] { color: var(--oro, #ffc21a); }
.se-lang__code { font: 700 11px/1 var(--f-num, system-ui, sans-serif); opacity: 0.7; }
/* en la cabecera estrecha (móvil) solo se ve el icono + código */
@media (max-width: 520px) { .se-lang__btn { padding: 0 8px; } }
/* páginas de cuenta: selector en línea con etiqueta */
.se-lang--field .se-lang__btn { height: 40px; background: #fff; color: var(--texto, #10263f); border-color: var(--pergamino-borde, #a07a38); }
.se-lang--field .se-lang__menu { right: auto; left: 0; background: #fff; color: var(--texto, #10263f); }
.se-lang--field .se-lang__opt:hover, .se-lang--field .se-lang__opt:focus-visible { background: rgba(16, 38, 63, 0.08); }
