/* iOS-style toggle switch for boolean form fields (e.g. Activo).
   Usage: wrap the checkbox in a label with class `switch-toggle`:

     <label class="switch-toggle">
       {{ form.activo }}
       <span class="switch-track"><span class="switch-thumb"></span></span>
       Activo
     </label>

   The native checkbox stays in the DOM (visually hidden) so form POSTs
   still carry the value.
*/

.switch-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.switch-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.switch-track {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 9999px;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.switch-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: left 0.15s ease;
}

.switch-toggle input[type="checkbox"]:checked + .switch-track {
    background: #3b82f6;
}
.switch-toggle input[type="checkbox"]:checked + .switch-track .switch-thumb {
    left: 18px;
}
.switch-toggle input[type="checkbox"]:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.switch-toggle input[type="checkbox"]:disabled + .switch-track {
    opacity: 0.5;
    cursor: not-allowed;
}