/* ══════════════════════════════════════════
   SELECTOR DE TEMA · Sistema / Claro / Oscuro
   Para las pantallas de Digital Core (login y Hub). Es el control segmentado
   común (.segmented, layout/overlays.css) con icono; lo monta
   mountThemeSwitches() (shared/js/app/theme.js) en cada [data-theme-switch].
   La opción activa usa el azul de selección (Signal Rule).
══════════════════════════════════════════ */

.segmented.theme-switch {
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
}

.segmented.theme-switch .segmented-option {
  flex: 0 0 auto;
  gap: 6px;
  padding: 0 10px;
}

.theme-switch .segmented-option svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Variante compacta (barra superior del Hub): solo iconos, como el resto de
   botones de la barra; el nombre sigue en title/aria-label. */
.theme-switch-compact .theme-switch-label { display: none; }
.segmented.theme-switch-compact .segmented-option { padding: 0 9px; }

/* Login: abajo de la pantalla y centrado, lejos de los avisos (arriba). */
.login-theme-switch {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2;
  transform: translateX(-50%);
  animation: loginSwitchIn 0.6s ease 0.08s both;
}

@keyframes loginSwitchIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .login-theme-switch { animation: none; }
}