/* Selector de idioma: integrado en la barra superior estilo macOS/Finder */
.language-switcher{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  flex:0 0 auto;
}

.language-btn{
  min-width:34px;
  height:28px;
  padding:0 9px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#8f8f96;
  font:inherit;
  font-size:11px;
  font-weight:650;
  letter-spacing:.05em;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}

.language-btn:hover{
  color:#d7d7db;
  background:rgba(255,255,255,.045);
}

.language-btn.active{
  color:#f5f5f7;
  background:#2a2a2e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.28);
}

.language-btn:focus-visible{
  outline:2px solid rgba(10,132,255,.9);
  outline-offset:2px;
}

/* La regla general de styles.css asigna 22px a los span de .side-item.
   Los iconos conservan ese ancho, pero el texto debe ocupar todo el espacio restante. */
.side-item .side-icon{
  width:22px;
  flex:0 0 22px;
  text-align:center;
}

.side-item .side-label{
  width:auto;
  min-width:0;
  flex:1 1 auto;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:900px){
  .language-btn{
    min-width:30px;
    padding:0 6px;
  }
}

@media(max-width:720px){
  .language-switcher{
    order:3;
  }
}