/* ==========================================================================
   BG CHANGER — Cambiar Fondo IA
   Ajustes sobre bg-remover.css (mismo sistema visual)
   ========================================================================== */

.cfr-editor {
    width: 100%;
}

.cfr-canvas-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--fs-r-lg);
    overflow: hidden;
    background: var(--fs-surface-2);
    border: 1px solid var(--fs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--fs-sp-6);
}

.cfr-canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cfr-bg-options {
    margin-bottom: var(--fs-sp-6);
}

.cfr-bg-options__label {
    display: block;
    font-size: var(--fs-text-xs);
    font-weight: var(--fs-w-semibold);
    letter-spacing: var(--fs-ls-wide);
    text-transform: uppercase;
    color: var(--fs-text-muted);
    margin-bottom: var(--fs-sp-3);
}

.cfr-swatches {
    display: flex;
    align-items: center;
    gap: var(--fs-sp-3);
    margin-bottom: var(--fs-sp-4);
    flex-wrap: wrap;
}

.cfr-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--fs-border-strong);
    cursor: pointer;
    padding: 0;
    transition: transform var(--fs-t-fast) var(--fs-ease-spring), border-color var(--fs-t-fast);
    position: relative;
    overflow: hidden;
}

.cfr-swatch:hover {
    transform: scale(1.1);
}

.cfr-swatch.is-active {
    border-color: var(--fs-accent);
    box-shadow: 0 0 0 2px rgba(255,0,0,0.25);
}

.cfr-swatch--custom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fs-surface-3);
}

.cfr-swatch--custom input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

.cfr-swatch--custom::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);
    pointer-events: none;
}