/**
 * SIMA — switch estilo iOS (reutilizable).
 * Markup:
 *   <span class="ios-switch">
 *     <input type="checkbox" id="...">
 *     <span class="ios-track"></span>
 *   </span>
 * El <input> real conserva id/clase/data-* → el JS no cambia.
 */
span.ios-switch {
    position: relative !important;
    display: inline-block !important;
    width: 36px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
span.ios-switch > input[type="checkbox"] {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 2;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
span.ios-switch > .ios-track {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(120,120,128,0.36);
    border-radius: 20px !important;
    transition: background 0.2s;
    pointer-events: none;
    box-sizing: border-box;
}
span.ios-switch > .ios-track::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
span.ios-switch > input[type="checkbox"]:checked + .ios-track {
    background: var(--matrix-color, #00ff41) !important;
}
span.ios-switch > input[type="checkbox"]:checked + .ios-track::before {
    transform: translateX(16px);
}
span.ios-switch > input[type="checkbox"]:focus-visible + .ios-track {
    box-shadow: 0 0 0 2px var(--matrix-color, #00ff41);
}
span.ios-switch > input[type="checkbox"]:disabled {
    cursor: not-allowed;
}
span.ios-switch > input[type="checkbox"]:disabled + .ios-track { opacity: 0.5; }