/**
 * P-10 · Interruptor — .scm-ui-toggle
 *
 * Control secundario: no debe pesar más que el dato de la fila. Por eso mide
 * 42px y no 56. Exige aria-label que describa la acción, no el estado.
 *
 * Estructura esperada (la que ya usa el sistema):
 *   <label class="scm-ui-toggle"><input type="checkbox"><span class="scm-ui-toggle__track"></span></label>
 */

.scm-ui-toggle {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  cursor: pointer;
}

.scm-ui-toggle :where(input) {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
}

.scm-ui-toggle__track {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 999px;
  background: var(--scm-ui-toggle-off);
  transition: background .18s ease;
}

.scm-ui-toggle__track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(10,26,46,.24);
  transition: transform .18s ease;
}

.scm-ui-toggle :where(input):checked + .scm-ui-toggle__track {
  background: var(--scm-ui-grad-control);
}

.scm-ui-toggle :where(input):checked + .scm-ui-toggle__track::before {
  transform: translateX(18px);
}

.scm-ui-toggle :where(input):focus-visible + .scm-ui-toggle__track {
  outline: 2px solid var(--scm-ui-blue-500);
  outline-offset: 2px;
}

.scm-ui-toggle :where(input):disabled + .scm-ui-toggle__track {
  opacity: .5;
  cursor: not-allowed;
}