/* Removedor de Fundo Chroma Key — estilos da ferramenta */

.rf-app { margin-bottom: 2.5rem; }

/* Aviso de recorte mecânico (destaque) */
.rf-aviso-manual {
    margin: 0 0 1.5rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1px solid #e6c200;
    border-left: 4px solid #e6c200;
    background: #fffbea;
    color: #6b5900;
    font-size: .875rem;
    line-height: 1.4;
}

/* --- Zona de upload --- */
.rf-upload {
    border: 2px dashed var(--cinza-300);
    border-radius: 12px;
    padding: 3rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
    background: var(--branco-suave);
}
.rf-upload:hover, .rf-upload.arrastando {
    border-color: var(--preto);
    background: #fafafa;
}
.rf-upload.oculto { display: none; }
.rf-upload__icone { font-size: 2.5rem; margin-bottom: .5rem; }
.rf-upload__titulo { font-weight: 600; margin: .25rem 0; }
.rf-upload__dica { color: var(--cinza-500); font-size: .875rem; }

/* --- Painel do editor --- */
.rf-painel { display: none; gap: 1.5rem; }
.rf-painel.ativo { display: grid; grid-template-columns: 1fr 320px; align-items: start; }
@media (max-width: 860px) { .rf-painel.ativo { grid-template-columns: 1fr; } }
/* Canvas gruda ABAIXO do header (sticky, header=64px) enquanto as opcoes rolam;
   solta ao acabar as opcoes, liberando "como usar"/footer sem subir a tela. */
@media (min-width: 861px) { .rf-painel.ativo > .rf-palco { position: sticky; top: calc(64px + 1rem); align-self: start; } }
/* Mobile: mesma ideia. Limita a altura do canvas p/ sobrar espaco as opcoes. */
@media (max-width: 860px) {
    .rf-painel.ativo > .rf-palco { position: sticky; top: calc(64px + .5rem); align-self: start; z-index: 5; }
    .rf-painel.ativo > .rf-palco .rf-canvas { max-height: 42vh; }
}

.rf-palco { min-width: 0; }
.rf-canvas-wrap {
    background: #2a2a2a;
    border-radius: 10px;
    padding: 10px;
    display: flex; align-items: center; justify-content: center;
    min-height: 280px;
    overflow: hidden; position: relative;
}
.rf-canvas {
    max-width: 100%;
    max-height: 65vh;
    image-rendering: auto;
    display: block;
}

.rf-fundos { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.rf-fundos__rotulo { font-size: .8rem; color: var(--cinza-500); margin-right: .25rem; }
.rf-fundo {
    border: 1px solid var(--cinza-300); background: var(--branco);
    padding: .3rem .7rem; border-radius: 6px; font-size: .8rem; cursor: pointer;
}
.rf-fundo.ativo { background: var(--preto); color: var(--branco); border-color: var(--preto); }

.rf-dica { font-size: .78rem; color: var(--cinza-500); margin-top: .5rem; }

/* --- Lateral (ações + avançado) --- */
.rf-lateral { display: flex; flex-direction: column; gap: .75rem; }
.rf-acoes { display: flex; gap: .5rem; }
.rf-acoes .btn { flex: 1; }
.rf-acoes--sec { margin-top: .75rem; }
.btn--pequeno { font-size: .78rem; padding: .4rem .6rem; }

.rf-avancado__toggle {
    background: var(--branco-suave); border: 1px solid var(--cinza-300);
    border-radius: 8px; padding: .6rem .8rem; text-align: left; cursor: pointer;
    font-weight: 600; display: flex; justify-content: space-between; align-items: center;
}
.rf-seta { transition: transform .15s; }
.rf-avancado__toggle.aberto .rf-seta { transform: rotate(180deg); }

.rf-avancado { display: none; flex-direction: column; gap: .9rem; padding-top: .25rem; }
.rf-avancado.aberto { display: flex; }

.rf-campo { display: flex; flex-direction: column; gap: .25rem; }
.rf-campo--destaque {
    border: 1px solid #e6c200; border-left: 4px solid #e6c200;
    background: #fffdf5; border-radius: 8px; padding: .55rem .65rem;
}
.rf-campo__aviso { font-size: .74rem; color: #8a6d00; font-weight: 600; line-height: 1.35; }
.rf-destaque-box {
    border: 1px solid #7c3aed; border-left: 4px solid #7c3aed;
    background: #faf5ff; border-radius: 8px; padding: .55rem .65rem;
    display: flex; flex-direction: column; gap: .25rem;
}
.rf-primario { display: flex; flex-direction: column; gap: .75rem; margin: .2rem 0 .1rem; }
.rf-cartao {
    border: 1px solid var(--cinza-300); border-radius: 8px; padding: .55rem .65rem;
    display: flex; flex-direction: column; gap: .25rem;
}
.rf-sub { margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--cinza-300); }
.rf-comparar-btn.ativo { background: #7c3aed; color: var(--branco); border-color: #7c3aed; }
.rf-campo__label { font-size: .82rem; font-weight: 600; display: flex; justify-content: space-between; }
.rf-campo__valor { color: var(--cinza-500); font-weight: 400; font-variant-numeric: tabular-nums; }
.rf-campo__dica { font-size: .72rem; color: var(--cinza-500); line-height: 1.3; }
.rf-slider { width: 100%; accent-color: var(--preto); }
.rf-cor-topo {
    border: 1px solid var(--cinza-300); border-radius: 10px;
    padding: .7rem .8rem; background: var(--branco-suave);
    display: flex; flex-direction: column; gap: .35rem;
}
.rf-cor-topo .rf-campo__label { font-size: .9rem; }
.rf-cor { flex: 1; height: 38px; border: 1px solid var(--cinza-300); border-radius: 6px; background: none; cursor: pointer; }
.rf-cor-linha { display: flex; gap: .4rem; align-items: center; }
.rf-cor-linha .btn { white-space: nowrap; }
#rf-conta-gotas.ativo { background: var(--preto); color: var(--branco); }

.rf-check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; cursor: pointer; }
.rf-check input { accent-color: var(--preto); }

.rf-estado { min-height: 1.2em; font-size: .85rem; color: var(--cinza-500); margin-top: .75rem; }

/* --- Como usar / aviso --- */
.rf-como-usar { margin-top: 2rem; }
.rf-como-usar h3 { margin-bottom: .5rem; }
.rf-como-usar ol { padding-left: 1.25rem; color: var(--cinza-500); line-height: 1.7; }
.rf-aviso {
    margin-top: 1.5rem; padding: .8rem 1rem; border-radius: 8px;
    background: var(--branco-suave); border: 1px solid var(--cinza-300);
    font-size: .85rem; color: var(--cinza-500);
}
.rf-versao { margin-top: .5rem; text-align: right; font-size: .72rem; color: var(--cinza-300); }