/* ============================================================
   COLOR SELECTOR — Selector de acabado en la zona 3D
   Figma: posición x:22 y:558 dentro del visor, ACABADO label
   ============================================================ */

/* ── Contenedor del selector ── */
.color-selector {
  position: absolute;
  bottom: var(--sp-5);
  left: var(--sp-5);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* ── Etiqueta "ACABADO" ── */
/* Figma: Geist Mono 16px uppercase, rgba(34,34,34,0.75) */
.color-selector__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  color: var(--c-text-overlay);
  line-height: var(--lh-normal);
}

/* ── Fila de opciones de color ── */
/* Figma: Frame 427319808, row, gap 8px */
.color-selector__options {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Botón de color ── */
/* Figma: Button-color, padding 8px 16px 8px 8px, border-radius 999px */
.color-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.color-btn:hover {
  border-color: rgba(0,0,0,0.3);
}

/* Estado activo */
/* Figma: Button-color State=Active, background #333333 */
.color-btn--active {
  background: var(--c-bg-card-active);
  border-color: var(--c-bg-card-active);
}

/* Muestra de color (swatch circular) */
/* Figma: .color-options, 32×32px, border #828282 */
.color-btn__swatch {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 1px solid #828282;
  flex-shrink: 0;
}

.color-btn__swatch--blanco {
  background: var(--c-white);
}

.color-btn__swatch--negro {
  background: #1a1a1a;
}

/* Nombre del color */
/* Figma: Body 3 (Geist 14px), white cuando activo */
.color-btn__name {
  font-size: var(--text-body3);
  font-weight: var(--fw-regular);
  color: var(--c-text-dark);
  line-height: var(--lh-normal);
}

.color-btn--active .color-btn__name {
  color: var(--c-white);
}