:root{ --contorno-int:rgba(255,255,255,.11); }
:root[data-tema="dia"]{ --contorno-int:rgba(20,19,18,.07); }

[data-tema] .boton{
  background-color:transparent; background-image:none;
  border:1.6px solid var(--cobre-luz);
  color:var(--cobre-luz);
  box-shadow:inset 0 0 0 1px var(--contorno-int),var(--elev-1);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
          backdrop-filter:blur(10px) saturate(140%); }
[data-tema] .boton:hover{
  background-color:var(--cobre-luz); color:var(--noche);
  border-color:var(--cobre-luz);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),var(--elev-2); }
[data-tema] .boton:active{ background-color:var(--cobre); color:var(--noche); }
.boton::before{ opacity:.5; }

[data-tema] .boton--hueco{
  background-color:transparent; border-color:var(--filete); color:var(--hueso); }
[data-tema] .boton--hueco:hover{
  background-color:var(--halo); border-color:var(--cobre-luz); color:var(--cobre-luz); }

/* los controles cuadrados comparten el mismo canto */
[data-tema] .tema,[data-tema] .hamburguesa,[data-tema] .idioma{
  background-color:transparent; background-image:none;
  border:1.5px solid var(--filete); color:var(--hueso-med);
  box-shadow:inset 0 0 0 1px var(--contorno-int); }
[data-tema] .tema:hover,[data-tema] .hamburguesa:hover,[data-tema] .idioma:hover{
  background-color:var(--halo); border-color:var(--cobre-luz); color:var(--cobre-luz); }

/* ── selector de idioma ─────────────────────────────────────── */
.idioma{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.28rem; flex:none; height:46px; padding:0 .62rem; cursor:pointer;
  border-radius:var(--radio-v); font-size:.75rem; font-weight:700;
  font-variation-settings:"wdth" 96; letter-spacing:.06em;
  -webkit-backdrop-filter:blur(14px) saturate(160%);
          backdrop-filter:blur(14px) saturate(160%);
  transition:color .18s var(--curva),border-color .18s var(--curva),
             background-color .18s var(--curva),transform .18s var(--curva); }
.idioma:hover{ transform:translateY(-1px); }
.idioma:active{ transform:translateY(0); }
.idioma span{ transition:color .22s var(--curva),opacity .22s var(--curva); opacity:.45; }
.idioma span.viva{ color:var(--cobre-luz); opacity:1; }
.idioma i{ font-style:normal; opacity:.32; font-weight:400; }

/* ── sitio para tres controles sin apretar el encabezado ───── */
[data-tema] .techo .marco{ gap:.55rem; }
[data-tema] .techo .firma{ margin-right:auto; }
[data-tema] .timon{ margin-right:.45rem; }
.panel-arriba{ justify-content:flex-end; gap:.5rem; }
@media (max-width:420px){
  .idioma{ padding:0 .45rem; letter-spacing:.03em; }
  .idioma i{ display:none; }
}
@media (max-width:380px){ .firma .pal{ display:none; } }