.sph-switch-loading-target {
    width: 64px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
}

    .sph-switch-loading-target.sph-switch-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 20px;
        height: 20px;
        border: 2px solid #9ad8f1;
        border-top-color: #12a5db;
        border-radius: 50%;
        box-sizing: border-box;
        transform: translateY(-50%);
        animation: sph-switch-spinner-rotate .8s linear infinite;
        pointer-events: none;
        z-index: 3;
    }

    .sph-switch-loading-target.sph-switch-loading.sph-switch-loading-checked::after {
        left: 6px;
    }

    .sph-switch-loading-target.sph-switch-loading.sph-switch-loading-unchecked::after {
        right: 6px;
    }

    /* Previsualización: el switch ya enseña el valor destino y el spinner ocupa el sitio del knob.
       Misma especificidad que las dos reglas de arriba, a propósito: las reglas por contenedor
       (programs.css, programCard.css, spherag.css...) ya colocan el spinner a su manera y deben
       seguir ganando. */
    .sph-switch-loading-target.sph-switch-loading-preview.sph-switch-loading-checked::after {
        left: auto;
        right: 6px;
    }

    .sph-switch-loading-target.sph-switch-loading-preview.sph-switch-loading-unchecked::after {
        right: auto;
        left: 6px;
    }

    .sph-switch-loading-target.sph-switch-loading .sph-switch-on-off::before {
        opacity: 0;
    }

@keyframes sph-switch-spinner-rotate {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.sph-switch-on-off {
    position: relative;
    appearance: none;
    width: 64px !important;
    height: 32px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    float: none;
    border-radius: 10px;
    background-color: #ccc;
    cursor: pointer;
    outline: none;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    padding: 0 10px;
    /* Hueco de la etiqueta: entre el borde y el knob. Cada contexto que cambie el tamaño del
       switch o del knob ajusta estas dos variables en vez de recolocar la etiqueta. */
    --sph-switch-label-knob-space: 30px;
    --sph-switch-label-edge-space: 6px;
}
.sph-switch-wrapper {
    margin-bottom: 0 !important;
    min-height: auto;
}

    .sph-switch-on-off[data-switch-kind] {
        width: 79px !important;
    }

    .sph-switch-on-off[data-switch-kind='action'] {
        width: 69px !important;
    }

    .sph-switch-on-off[data-switch-kind]::before {
        left: 4px;
        transform: translateY(-50%);
    }

    .sph-switch-on-off[data-switch-kind]::after {
        right: 10px;
        transform: translateY(-50%);
        font-size: 11px;
    }

    .sph-switch-on-off[data-switch-kind]:checked::before {
        left: calc(100% - 20px);
    }

    .sph-switch-on-off[data-switch-kind]:checked::after {
        left: 10px;
        right: auto;
    }

    .sph-switch-on-off[data-switch-kind]:checked::before {
        left: calc(100% - 20px);
    }

    .sph-switch-on-off[data-switch-kind]:checked::after {
        left: 8px;
        right: 30px;
        text-align: left;
    }

    .sph-switch-on-off::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transition: 0.2s;
        transition: 0.2s;
    }

    /* La etiqueta ocupa el hueco libre del switch y se trunca con "…" si no cabe: los textos
       traducidos (Automatyczny, Automatikus, Geschlossen…) no deben salirse ni pisar el knob.
       El texto completo queda en el title del switch (Switch/Default.cshtml). */
    .sph-switch-on-off::after {
        content: attr(data-on-label);
        position: absolute;
        top: 50%;
        left: var(--sph-switch-label-knob-space);
        right: var(--sph-switch-label-edge-space);
        transform: translateY(-50%);
        color: var(--Grey-500, #676E76);
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sph-switch-on-off:checked {
        background-color: #4caf50;
    }

        .sph-switch-on-off:checked::after {
            left: var(--sph-switch-label-edge-space);
            right: var(--sph-switch-label-knob-space);
            color: var(--White, #FFF);
        }

    .sph-switch-on-off[data-output-id]:disabled {
        opacity: 1;
        background-color: #CED2D6 !important;
        background-image: url('/Assets/images/spherag/icons/switch-background-image.svg') !important;
        cursor: not-allowed;
        border: hidden;
    }