.rrcv-wrapper{max-width:1100px;margin:0 auto;padding:20px;}
.rrcv-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:center;}
.rrcv-left,.rrcv-right{flex:1 1 420px;}

.rrcv-image-wrap{position:relative;border:4px solid #000;border-radius:6px;overflow:hidden;}
.rrcv-img{display:block;width:100%;height:auto;}

.rrcv-masklayer{
  position:absolute; inset:0;
  background:#8e4848; /* color inicial */
  -webkit-mask-image: url('../mascara_alpha.png');
  mask-image: url('../mascara_alpha.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0; mask-position:0 0;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

.rrcv-title{margin-bottom:12px;text-decoration:underline;}
.rrcv-custom{display:flex;align-items:center;gap:12px;}
.rrcv-color-input{width:80px;height:80px;border:none;cursor:pointer;border-radius:8px;}
.rrcv-code{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;}
.rrcv-brand img{display:block;margin-bottom:8px}
.rrcv-label{margin:.5rem 0 .35rem;text-decoration:underline;font-weight:600}

.rrcv-swatches{display:flex;flex-wrap:wrap;gap:10px 12px;margin-bottom:.5rem}
.rrcv-swatch{
  width:46px;height:46px;border-radius:8px;border:2px solid transparent;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.12);transition:transform .08s ease,border-color .15s ease;
}
.rrcv-swatch:hover{transform:translateY(-1px)}
.rrcv-swatch[aria-pressed="true"]{border-color:#111}

.rrcv-picker{display:flex;align-items:center;gap:10px;margin:.25rem 0 1rem}
.rrcv-hex{width:110px;height:38px;border-radius:6px;border:1px solid #ccc;padding:0 .5rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.rrcv-hex-show{color:#666;font-family:ui-monospace,Menlo,Consolas,monospace}

.rrcv-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#666}
.rrcv-btn{
  padding:.45rem .8rem;border:1px solid #ddd;border-radius:8px;background:#fafafa;cursor:not-allowed;color:#999;
}
.rrcv-hint{font-size:.85rem}
/* Tabs */
.rrcv-tabs{display:flex; gap:10px; margin:0 0 12px}
.rrcv-tab{
  border:1px solid #111; background:#fff; padding:8px 12px; cursor:pointer;
  border-radius:8px; font-weight:600;
}
.rrcv-tab[aria-selected="true"]{background:#111; color:#fff}

/* Panels */
.rrcv-panels{position:relative}
.rrcv-panel[aria-hidden="true"]{display:none}

/* Imagen + máscara (reutiliza tu wrap actual) */
.rrcv-image-wrap{position:relative;border:4px solid #000;border-radius:6px;overflow:hidden;}
.rrcv-img{display:block;width:100%;height:auto;}
.rrcv-masklayer{
  position:absolute; inset:0;
  background:#8e4848; /* color inicial, luego se reemplaza por JS por pestaña */
  /* Las URLs de máscara se setean vía JS por pestaña */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0; mask-position:0 0;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
/* Puedes ponerlo en tu tema o al final de assets/visualizer.css */
.rrcv-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.rrcv-swatch{width:28px;height:28px;border-radius:50%;border:2px solid #000;cursor:pointer}
.rrcv-picker{display:flex;align-items:center;gap:8px}
.rrcv-hex{width:120px;padding:6px 8px;border:1px solid #ccc;border-radius:6px}
.rrcv-hex-show{font-weight:600}

/* Aísla la composición para que mix-blend-mode no “sangre” fuera del wrap */
.rrcv-image-wrap {
  isolation: isolate; /* IMPORTANTE */
}

/* La capa de color ahora se mezcla con la imagen de fondo */
.rrcv-masklayer {
  mix-blend-mode: multiply;   /* o soft-light / overlay */
  opacity: 0.88;              /* ajusta a gusto (0–1) */
}