/* Only the explicitly requested language picker added to portal/login. */
.vyx-language-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 8px;
  color: #bfc7ca;
  font: 12px "Segoe UI", Arial, sans-serif;
}
.vyx-language-switch > span { margin-right: 3px; }
html .vyx-language-switch > button {
  padding: 5px 7px;
  border: 1px solid #42494c !important;
  border-radius: 5px;
  color: #bfc7ca !important;
  background: #1a2023 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  font: inherit;
}
html .vyx-language-switch > button[aria-pressed="true"] {
  color: #d6c092 !important;
  border-color: #99825a !important;
  background: #312b21 !important;
}
.vyx-language-switch > button:focus-visible { outline: 2px solid #bba16e; outline-offset: 2px; }

/* The legacy drawer handle overlaps the flag centers; keep the real language
   targets above it without moving the original header controls. */
#dock_language .flag { position: relative; z-index: 2; }
#dock_language .flag img { position: relative; z-index: 2; cursor: pointer; }
#dock_language_trigger { z-index: 1; }

/* Labels drawn by CSS are not DOM text nodes. */
html[data-vyx-locale="en"] #form-login ul.inputs > li:first-child::before { content: "USERNAME" !important; }
html[data-vyx-locale="en"] #form-login ul.inputs > li:nth-child(2)::before { content: "PASSWORD" !important; }
html[data-vyx-locale="es"] #form-login ul.inputs > li:first-child::before { content: "USUARIO" !important; }
html[data-vyx-locale="es"] #form-login ul.inputs > li:nth-child(2)::before { content: "CONTRASEÑA" !important; }
html[data-vyx-locale="en"] .loader::after,
html[data-vyx-locale="en"] .module-loader::after { content: "Updating data" !important; }
html[data-vyx-locale="es"] .loader::after,
html[data-vyx-locale="es"] .module-loader::after { content: "Actualizando datos" !important; }

/* Login language control: fixed corner on desktop, above the brand on mobile. */
#login-screen .crivel-login-languages {
  position:fixed; top:22px; right:28px; z-index:10;
  display:flex; align-items:center; gap:5px; width:max-content; max-width:calc(100% - 28px);
  margin:0; padding:6px; border:1px solid #c8a45645; border-radius:14px;
  background:#101314ed; box-shadow:0 5px 22px #0005;
  color:#c8c5bc; font:500 12px/1.1 "Segoe UI",Arial,sans-serif;
}
#login-screen .crivel-login-languages>span {margin:0 6px 0 5px;font-size:11px;color:#a9a79f;}
html #login-screen .crivel-login-languages>button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:63px; min-height:40px; padding:9px 10px;
  border:1px solid transparent!important; border-radius:9px;
  background:transparent!important; color:#c3c4c2!important; font-weight:600;
  transition:background .15s,border-color .15s,color .15s;
}
html #login-screen .crivel-login-languages>button:hover {background:#ffffff0a!important; color:#f0e5c9!important;}
html #login-screen .crivel-login-languages>button[aria-pressed="true"] {
  background:#c2a25d1c!important; border-color:#c2a25d80!important; color:#ead39d!important;
}
#login-screen .crivel-language-flag {display:block; flex:none; width:24px; height:16px; border-radius:3px; box-shadow:0 0 0 1px #ffffff18;}
@media(max-width:760px) {
  #login-screen .crivel-login-languages {position:static;margin:0 auto 23px;max-width:100%;}
  html #login-screen .crivel-login-languages>button {min-height:44px;}
}
@media(prefers-reduced-motion:reduce) {#login-screen .crivel-login-languages>button {transition:none;}}

.vyx-language-switch .crivel-language-flag{width:25px;height:17px;display:inline-block;vertical-align:middle}.vyx-language-switch>button{display:inline-flex;align-items:center;justify-content:center;gap:6px}