/* ===========================================================
   Global-VZLA · Plataforma Web — CONTROL DE TEMA + IDIOMA
   -----------------------------------------------------------
   El botón que cicla claro/oscuro/auto + el selector de idioma.
   IDÉNTICO en el hub y en las 5 herramientas: es el estándar del
   chrome, no se personaliza por herramienta.

   Markup esperado (en el topbar):
     <div class="prefs">
       <button class="pref-btn" id="theme-btn" type="button"
               aria-label="Cambiar tema"></button>
       <div class="pref-lang">
         <span class="pref-lang-ico" data-icon="globe" data-icon-size="16"></span>
         <select class="lang-select" id="lang-sel" aria-label="Idioma">
           <option value="es">ES</option>
           <option value="en">EN</option>
           <option value="pt-BR">PT-BR</option>
         </select>
       </div>
     </div>

   ⚠️ Las etiquetas son cortas (ES / EN / PT-BR) pero las variantes
   son fijas: español de EEUU, inglés de EEUU, portugués de Brasil.
   Ver shared/DESIGN.md §Idiomas.
   =========================================================== */

.prefs{ display:flex; align-items:center; gap:var(--sp-2); }

.pref-btn{
  display:grid; place-items:center; flex:0 0 auto;
  width:var(--h-md); height:var(--h-md);
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  color:var(--text-2);
  cursor:pointer;
  transition:color var(--t), border-color var(--t), background var(--t);
}
.pref-btn:hover{ color:var(--text); border-color:var(--accent-2); background:var(--surface-2); }

.pref-lang{
  display:flex; align-items:center; gap:var(--sp-2);
  height:var(--h-md);
  padding:0 var(--sp-2) 0 var(--sp-3);
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  transition:border-color var(--t);
}
.pref-lang:focus-within{ border-color:var(--accent-2); box-shadow:var(--ring); }
.pref-lang-ico{ display:grid; place-items:center; color:var(--text-2); }

.lang-select{
  background:transparent;
  border:none;
  outline:none;
  cursor:pointer;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.5px;
  padding-right:2px;
}
/* El desplegable nativo hereda el color del sistema si no se le dice
   nada: en tema oscuro quedaban opciones blancas sobre blanco. */
.lang-select option{ background:var(--surface); color:var(--text); }