/**
 * Switch sol/luna para alternar tema oscuro/claro
 */

.theme-switch-wrap {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* Input oculto */
.theme-switch-input {
    display: none;
}

.theme-switch-label {
    cursor:      pointer;
    margin:      0;
    user-select: none;
    line-height: 1;
}

/* Track (la cápsula del switch) */
.theme-switch-track {
    position:      relative;
    display:       flex;
    align-items:   center;
    width:         44px;
    height:        24px;
    border-radius: 12px;
    background:    rgba(255, 255, 255, 0.12);
    border:        1px solid rgba(255, 255, 255, 0.2);
    transition:    background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    padding:       3px;
}

.theme-switch-input:checked + .theme-switch-label .theme-switch-track {
    background:   var(--jd-crimson-gradient, linear-gradient(135deg, #ff5577 0%, #b81848 100%));
    border-color: transparent;
    box-shadow:   0 0 8px rgba(255, 77, 109, 0.45);
}

/* Thumb (círculo deslizante) */
.theme-switch-thumb {
    position:      relative;
    width:         18px;
    height:        18px;
    background:    #fff;
    border-radius: 50%;
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.35);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     10px;
    transition:    transform 0.3s cubic-bezier(.4,0,.2,1);
    flex-shrink:   0;
    color:         #555;
}

.theme-switch-input:checked + .theme-switch-label .theme-switch-thumb {
    transform: translateX(20px);
    color:     var(--jd-crimson, #ff4d6d);
}

/* Iconos dentro del thumb */
.theme-icon-dark  { display: block; }
.theme-icon-light { display: none;  }

.theme-switch-input:checked + .theme-switch-label .theme-icon-dark  { display: none;  }
.theme-switch-input:checked + .theme-switch-label .theme-icon-light { display: block; }

/* Versión compacta para la top-bar de movil_tecnicos */
.theme-switch-sm .theme-switch-track {
    width:  36px;
    height: 20px;
}
.theme-switch-sm .theme-switch-thumb {
    width:     14px;
    height:    14px;
    font-size: 8px;
}
.theme-switch-input:checked + .theme-switch-sm .theme-switch-thumb {
    transform: translateX(16px);
}