/**
 * CIMA — Componente switch estilo iOS (global, reutilizable)
 * Archivo  : app/style/ios-switch.css
 * Función  : Reemplazo visual de checkboxes por toggles tipo iOS, theme-aware.
 * Uso      :
 *   <span class="ios-switch">
 *     <input type="checkbox" id="...">
 *     <span class="ios-track"></span>
 *   </span>
 * El <input> real conserva su id/clase → el JS de guardado no cambia.
 * Las reglas usan alta especificidad + !important en lo crítico (ocultar el
 * checkbox nativo y fijar el tamaño) para que NINGÚN estilo global lo convierta
 * de vuelta en un checkbox.
 * Autores  : CIMA Development Group
 * Copyright: © 2024–2026 CIMA Development Group. Todos los derechos reservados.
 */
span.ios-switch {
    position: relative !important;
    display: inline-block !important;
    width: 38px !important;
    height: 22px !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;
    min-width: 0 !important;
    min-height: 0 !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;
    accent-color: auto;
}
span.ios-switch > .ios-track {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(120,120,128,0.36);
    border-radius: 22px !important;
    transition: background 0.2s;
    pointer-events: none;
    box-sizing: border-box;
}
span.ios-switch > .ios-track::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    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(--primary) !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(--accent);
}

/* Fila etiqueta + switch (usado p.ej. en monedas aceptadas). */
.ios-cur { display:inline-flex; align-items:center; gap:8px; font-size:0.85rem; user-select:none; white-space:nowrap; padding:4px 0; }