.interruptor {
  --int-ancho: 51px;
  --int-alto: 31px;
  --int-borde: 2px;
  position: relative;
  display: inline-flex;
  flex: none;
  width: var(--int-ancho);
  height: var(--int-alto);
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.interruptor.chico { --int-ancho: 42px; --int-alto: 26px; }
.interruptor input {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.interruptor-pista {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #8E8E93;
  transition: background-color .22s ease;
}
.interruptor-pista::after {
  content: '';
  position: absolute;
  top: var(--int-borde);
  left: var(--int-borde);
  width: calc(var(--int-alto) - var(--int-borde) * 2);
  height: calc(var(--int-alto) - var(--int-borde) * 2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform .26s cubic-bezier(.3, .7, .4, 1);
}
.interruptor input:checked + .interruptor-pista,
.interruptor.encendido .interruptor-pista { background: #4DA3FF; }
.interruptor input:checked + .interruptor-pista::after,
.interruptor.encendido .interruptor-pista::after { transform: translateX(calc(var(--int-ancho) - var(--int-alto))); }
.interruptor input:focus-visible + .interruptor-pista { outline: 2px solid #4DA3FF; outline-offset: 2px; }
.interruptor input:disabled { cursor: default; }
.interruptor input:disabled + .interruptor-pista { opacity: .5; }
@media (hover: hover) {
  .interruptor:active .interruptor-pista::after { box-shadow: 0 3px 10px rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .16); }
}
@media (prefers-reduced-motion: reduce) {
  .interruptor-pista, .interruptor-pista::after { transition: none; }
}

.menu-item-tema .menu-item-label { display: flex; flex-direction: column; gap: 1px; }
.menu-item-tema .menu-item-estado { font-size: 12px; font-weight: 500; color: var(--ce-apagado, #888); }
.menu-item-tema .interruptor { pointer-events: none; }