:root[data-theme="light"] { --bg: #f5f5f5; --surface: #ebebee; --fg: var(--black); --mut: #4f4a60; --line: #dcdbe2; --tint: #ebffef; --btn: var(--black); --btnfg: #fff; --err: #c42d00; color-scheme: light; }
:root[data-theme="dark"] { --bg: var(--black); --surface: #26242f; --fg: #fff; --mut: #b4b0c3; --line: #3a3746; --tint: #232a26; --btn: var(--a1l); --btnfg: var(--black); --err: var(--a4l); color-scheme: dark; }

/* Interruptor cuadrado de claro/oscuro, tipo ON/OFF */
.interruptor { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.interruptor .riel { position: relative; width: 58px; height: 28px; border: 2px solid currentColor; display: block; }
.interruptor .riel i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: currentColor; transition: left .2s cubic-bezier(.7, 0, .2, 1); }
.interruptor .riel b { position: absolute; top: 0; bottom: 0; right: 5px; display: grid; place-items: center; font-size: 11px; }
.interruptor[aria-checked="true"] .riel i { left: 32px; }
.interruptor[aria-checked="true"] .riel b { right: auto; left: 5px; }
.interruptor:focus-visible { outline: 3px solid var(--a3); outline-offset: 3px; }