/* Fondo suave */
.bg-app {
  background: radial-gradient(1200px 600px at 10% 0%, rgba(13, 110, 253, 0.12), transparent 60%),
              radial-gradient(1000px 500px at 90% 10%, rgba(25, 135, 84, 0.12), transparent 55%),
              #f6f7fb;
}

/* Card con bordes suaves */
.card-soft {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
}

/* Marca */
.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0d6efd, #198754);
  display: inline-block;
}

/* Caja de color */
.color-box {
  width: 100%;
  min-height: 360px;
  display: grid;
  place-items: end start;
  padding: 18px;
  transition: background-color 120ms linear;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* Info dentro de la caja */
.overlay-info {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
}

/* Mejor legibilidad en sliders */
.form-range {
  margin-top: 4px;
}