/* ============================================================
   TEMA PASTEL VIBRANTE — Creador 3D eFab3D
   Override de colores para customizer-3d.css
   Paleta: Lavanda, Rosa, Menta, Durazno, Cielo
   ============================================================ */

/* ─── VARIABLES PASTEL PARA LA PÁGINA STANDALONE ─── */
.c3d-standalone-page,
.c3d-modal-overlay {
  --c3d-bg-start: #f0e6f6;       /* lavanda muy claro */
  --c3d-bg-end: #e0f0f0;         /* menta muy claro */
  --c3d-bg-mid: #fce4ec;         /* rosa claro */
  --c3d-surface: rgba(255, 255, 255, 0.72);
  --c3d-surface-solid: #ffffff;
  --c3d-surface-hover: rgba(255, 255, 255, 0.88);
  --c3d-glass: rgba(255, 255, 255, 0.55);
  --c3d-glass-border: rgba(180, 160, 220, 0.30);
  --c3d-text-primary: #2d2040;
  --c3d-text-secondary: #5a4d6e;
  --c3d-text-muted: #8e82a0;
  --c3d-border: rgba(180, 160, 220, 0.22);
  --c3d-accent-lavender: #b4a0dc;
  --c3d-accent-coral: #e8a598;
  --c3d-accent-mint: #7ec8a8;
  --c3d-accent-rose: #e8a0c0;
  --c3d-accent-peach: #f0c8a0;
  --c3d-accent-sky: #88b8d8;
  --c3d-shadow-soft: 0 8px 32px rgba(130, 100, 180, 0.10);
  --c3d-shadow-medium: 0 12px 40px rgba(130, 100, 180, 0.14);
  --c3d-shadow-glow: 0 0 20px rgba(180, 160, 220, 0.18);
  --c3d-input-bg: rgba(255, 255, 255, 0.65);
  --c3d-input-border: rgba(180, 160, 220, 0.28);
  --c3d-input-focus: rgba(180, 160, 220, 0.50);
  --c3d-slider-track: rgba(180, 160, 220, 0.18);
}

/* ─── FONDO GENERAL DE LA PÁGINA STANDALONE ─── */
.c3d-standalone-page {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(180, 160, 220, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(232, 165, 152, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(150, 210, 190, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 60%, rgba(240, 200, 160, 0.12) 0%, transparent 40%),
    linear-gradient(160deg, var(--c3d-bg-start) 0%, var(--c3d-bg-mid) 45%, var(--c3d-bg-end) 100%) !important;
  color: var(--c3d-text-primary);
  min-height: 100vh;
}

/* Partículas/burbujas decorativas animadas */
.c3d-standalone-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 180px at 15% 25%, rgba(180, 160, 220, 0.10) 0%, transparent 100%),
    radial-gradient(circle 140px at 85% 70%, rgba(232, 165, 152, 0.08) 0%, transparent 100%),
    radial-gradient(circle 200px at 60% 15%, rgba(150, 210, 190, 0.08) 0%, transparent 100%);
  animation: c3dFloatOrbs 20s ease-in-out infinite alternate;
}

@keyframes c3dFloatOrbs {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15px, 10px) scale(1.04); }
  100% { transform: translate(10px, -8px) scale(0.98); }
}

/* ─── NAVBAR STANDALONE ─── */
.c3d-standalone-nav {
  background: var(--c3d-surface) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-bottom: 1px solid var(--c3d-glass-border) !important;
  box-shadow: 0 2px 16px rgba(130, 100, 180, 0.08);
}

.c3d-standalone-back-link {
  color: var(--c3d-accent-lavender) !important;
  font-weight: 600;
}
.c3d-standalone-back-link:hover {
  color: var(--c3d-text-primary) !important;
}

/* ─── HEADER / TÍTULOS ─── */
.c3d-standalone-page .dm-customizer-badge {
  background: linear-gradient(135deg, rgba(180, 160, 220, 0.20), rgba(150, 210, 190, 0.18));
  border: 1px solid var(--c3d-glass-border);
  color: var(--c3d-accent-lavender);
  box-shadow: var(--c3d-shadow-glow);
}

.c3d-standalone-page .dm-customizer-badge .dm-badge-pulse {
  background: var(--c3d-accent-mint);
  box-shadow: 0 0 10px var(--c3d-accent-mint);
}

.c3d-standalone-page .dm-customizer-title {
  color: var(--c3d-text-primary) !important;
  text-shadow: none;
}

.c3d-standalone-page .dm-customizer-title span.coral {
  color: #d47a6a !important;
  text-shadow: 0 0 12px rgba(232, 165, 152, 0.25);
}
.c3d-standalone-page .dm-customizer-title span.lavender {
  color: #8a72c0 !important;
  text-shadow: 0 0 12px rgba(180, 160, 220, 0.25);
}
.c3d-standalone-page .dm-customizer-title span.mint {
  color: #4aa88a !important;
  text-shadow: 0 0 12px rgba(150, 210, 190, 0.25);
}

.c3d-standalone-page .dm-customizer-subtitle {
  color: var(--c3d-text-secondary) !important;
}

/* ─── VIEWPORT 3D CONTAINER (Fondo Negro Estudio) ─── */
.c3d-standalone-page .dm-viewport-container {
  background: #0a0a0d !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.6) !important;
  border-radius: 20px !important;
}

/* HUD overlays en viewport */
.c3d-standalone-page .dm-hud-status {
  background: rgba(14, 16, 24, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 10px !important;
}

.c3d-standalone-page .dm-hud-status .dot {
  background: #38ef7d !important;
  box-shadow: 0 0 8px #38ef7d !important;
}

.c3d-standalone-page .dm-viewport-tools {
  background: rgba(14, 16, 24, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
}

.c3d-standalone-page .dm-vtool-btn {
  color: rgba(255, 255, 255, 0.65) !important;
}
.c3d-standalone-page .dm-vtool-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.c3d-standalone-page .dm-vtool-btn.active {
  background: rgba(120, 100, 210, 0.35) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.25) !important;
}

/* Bottom HUD specs (Discreto y poco invasivo) */
.c3d-standalone-page .dm-live-specs {
  background: rgba(12, 14, 20, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 0.32rem 0.65rem !important;
  gap: 0.85rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.c3d-standalone-page .dm-spec-label {
  font-size: 0.54rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
.c3d-standalone-page .dm-spec-val {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #38ef7d !important;
}

.c3d-standalone-page .dm-view-tip {
  display: none !important;
}

/* ─── CARD DE RESUMEN / COTIZACIÓN ─── */
.c3d-standalone-page .dm-summary-card {
  background: var(--c3d-surface) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--c3d-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--c3d-shadow-soft) !important;
}

.c3d-standalone-page .dm-summary-title {
  color: var(--c3d-text-primary) !important;
}
.c3d-standalone-page .dm-summary-desc {
  color: var(--c3d-text-muted) !important;
}
.c3d-standalone-page .dm-price-label {
  color: var(--c3d-accent-peach) !important;
}
.c3d-standalone-page .dm-price-amount {
  color: #c06050 !important;
  text-shadow: 0 0 8px rgba(232, 165, 152, 0.20) !important;
}

/* ─── PANEL DE CONTROLES (COLUMNA DERECHA) ─── */
/* ─── PANEL DE CONTROLES (COLUMNA DERECHA) ─── */
.c3d-standalone-page .dm-panel-col {
  background: var(--c3d-surface) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid var(--c3d-glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--c3d-shadow-medium) !important;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 95px);
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Tabs de navegación (COMPLETAMENTE FIJOS E INAMOVIBLES) */
.c3d-standalone-page .dm-tabs-bar {
  flex-shrink: 0 !important;
  background: rgba(250, 246, 255, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--c3d-border) !important;
  position: relative !important;
  top: 0 !important;
  z-index: 20 !important;
  box-shadow: 0 4px 12px rgba(180, 160, 220, 0.08) !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important;
}

.c3d-standalone-page .dm-tabs-bar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.c3d-standalone-page .dm-tab-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: var(--c3d-text-muted) !important;
  border-bottom: 3px solid transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: all 0.25s ease !important;
}

.c3d-standalone-page .dm-tab-btn .tab-icon {
  display: block !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.c3d-standalone-page .dm-tab-btn span:not(.tab-icon) {
  display: block !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.c3d-standalone-page .dm-tab-btn:hover {
  color: var(--c3d-text-secondary) !important;
  background: rgba(180, 160, 220, 0.08) !important;
}
.c3d-standalone-page .dm-tab-btn.active {
  color: #7a60b8 !important;
  border-bottom-color: var(--c3d-accent-lavender) !important;
  background: rgba(180, 160, 220, 0.12) !important;
  box-shadow: inset 0 -3px 8px rgba(180, 160, 220, 0.10) !important;
}

/* ─── CONTENIDO DE LAS TABS: SCROLLBAR ANCHA INDEPENDIENTE ─── */
.c3d-standalone-page .dm-tab-content-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  scrollbar-width: auto !important;
  scrollbar-color: #b4a0dc rgba(180, 160, 220, 0.12) !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar {
  width: 14px !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar-track {
  background: rgba(180, 160, 220, 0.08) !important;
  border-radius: 0 0 20px 0 !important;
  border-left: 1px solid rgba(180, 160, 220, 0.18) !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b4a0dc, #a58fd4) !important;
  border-radius: 8px !important;
  border: 3px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 6px rgba(120, 100, 180, 0.25) !important;
  cursor: grab !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9f86d1, #8e72c7) !important;
  border-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(120, 100, 180, 0.40) !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #8868bf, #7752b0) !important;
  cursor: grabbing !important;
}

/* ─── PANELES DE CONTENIDO DE CADA TAB ─── */
.c3d-standalone-page .dm-tab-pane {
  display: none !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.c3d-standalone-page .dm-tab-pane.active {
  display: flex !important;
  flex-direction: column !important;
}

/* ─── CONTROLES: INPUTS, SLIDERS, SELECT ─── */
.c3d-standalone-page .dm-control-label {
  color: var(--c3d-text-primary) !important;
}

.c3d-standalone-page .dm-control-badge {
  color: var(--c3d-accent-mint) !important;
  background: rgba(126, 200, 168, 0.14) !important;
}

.c3d-standalone-page .dm-text-input {
  background: var(--c3d-input-bg) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: var(--c3d-text-primary) !important;
  border-radius: 10px !important;
}
.c3d-standalone-page .dm-text-input:focus {
  border-color: var(--c3d-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(180, 160, 220, 0.15), 0 4px 12px rgba(180, 160, 220, 0.10) !important;
  background: rgba(255, 255, 255, 0.85) !important;
}
.c3d-standalone-page .dm-text-input::placeholder {
  color: var(--c3d-text-muted) !important;
}

.c3d-standalone-page .dm-char-hint {
  color: var(--c3d-text-muted) !important;
}

/* Sliders */
.c3d-standalone-page .dm-slider {
  background: var(--c3d-slider-track) !important;
  border: 1px solid rgba(180, 160, 220, 0.12) !important;
}
.c3d-standalone-page .dm-slider::-webkit-slider-thumb {
  background: var(--c3d-accent-lavender) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(180, 160, 220, 0.30) !important;
}
.c3d-standalone-page .dm-slider::-webkit-slider-thumb:hover {
  background: var(--c3d-accent-coral) !important;
  box-shadow: 0 2px 12px rgba(232, 165, 152, 0.40) !important;
}

.c3d-standalone-page .dm-slider-val {
  background: var(--c3d-input-bg) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: #3a9070 !important;
}

.c3d-standalone-page .dm-step-btn {
  background: rgba(245, 238, 255, 0.70) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: var(--c3d-text-secondary) !important;
}
.c3d-standalone-page .dm-step-btn:hover {
  background: var(--c3d-accent-lavender) !important;
  color: #fff !important;
  border-color: var(--c3d-accent-lavender) !important;
}

/* ─── BOTONES DE SELECCIÓN (CHOICE BUTTONS) ─── */
.c3d-standalone-page .dm-choice-btn {
  background: var(--c3d-input-bg) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: var(--c3d-text-secondary) !important;
  border-radius: 10px !important;
  transition: all 0.22s ease !important;
}
.c3d-standalone-page .dm-choice-btn:hover {
  border-color: var(--c3d-accent-lavender) !important;
  background: rgba(255, 255, 255, 0.80) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(180, 160, 220, 0.15) !important;
}
.c3d-standalone-page .dm-choice-btn.active {
  border-color: var(--c3d-accent-coral) !important;
  background: linear-gradient(135deg, rgba(232, 165, 152, 0.15), rgba(240, 200, 160, 0.12)) !important;
  color: var(--c3d-text-primary) !important;
  box-shadow: 0 0 0 3px rgba(232, 165, 152, 0.12), 0 4px 12px rgba(232, 165, 152, 0.10) !important;
}

/* Presets con accent left border */
.c3d-standalone-page .dm-preset-tag-btn {
  border-left: 3px solid var(--c3d-accent-mint) !important;
}
.c3d-standalone-page .dm-preset-keychain-btn {
  border-left: 3px solid var(--c3d-accent-coral) !important;
}

/* ─── COORDENADAS BOX ─── */
.c3d-standalone-page .dm-coord-box {
  background: rgba(245, 238, 255, 0.50) !important;
  border: 1px solid var(--c3d-border) !important;
  border-radius: 14px !important;
}
.c3d-standalone-page .dm-coord-box-title {
  color: var(--c3d-accent-peach) !important;
}

/* ─── PALETA DE COLORES (SWATCHES) ─── */
.c3d-standalone-page .dm-swatch {
  border: 2px solid rgba(180, 160, 220, 0.30) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
}
.c3d-standalone-page .dm-swatch:hover {
  border-color: var(--c3d-text-primary) !important;
}
.c3d-standalone-page .dm-swatch.active {
  border-color: var(--c3d-text-primary) !important;
  box-shadow: 0 0 0 3px rgba(180, 160, 220, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.c3d-standalone-page .dm-color-hex-text {
  color: var(--c3d-text-muted) !important;
}

/* ─── BOTONES DE EXPORTACIÓN ─── */
.c3d-standalone-page .dm-export-btn {
  background: var(--c3d-input-bg) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: var(--c3d-text-primary) !important;
  border-radius: 12px !important;
}
.c3d-standalone-page .dm-export-btn:hover {
  background: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(180, 160, 220, 0.40) !important;
  box-shadow: 0 6px 18px rgba(130, 100, 180, 0.12) !important;
}
.c3d-standalone-page .dm-export-btn .dm-export-badge {
  color: var(--c3d-text-muted) !important;
}
.c3d-standalone-page .dm-export-btn.btn-stl::before { background: var(--c3d-accent-mint) !important; }
.c3d-standalone-page .dm-export-btn.btn-3mf::before { background: var(--c3d-accent-lavender) !important; }
.c3d-standalone-page .dm-export-btn.btn-obj::before { background: var(--c3d-accent-coral) !important; }

.c3d-standalone-page .dm-export-btn.btn-stl:hover {
  box-shadow: 0 6px 20px rgba(126, 200, 168, 0.20) !important;
}
.c3d-standalone-page .dm-export-btn.btn-3mf:hover {
  box-shadow: 0 6px 20px rgba(180, 160, 220, 0.20) !important;
}
.c3d-standalone-page .dm-export-btn.btn-obj:hover {
  box-shadow: 0 6px 20px rgba(232, 165, 152, 0.20) !important;
}

/* ─── BOTÓN WHATSAPP ─── */
.c3d-standalone-page .dm-whatsapp-order-btn {
  background: linear-gradient(135deg, #43d87a 0%, #1aab55 100%) !important;
  box-shadow: 0 6px 20px rgba(67, 216, 122, 0.25) !important;
  border-radius: 14px !important;
}
.c3d-standalone-page .dm-whatsapp-order-btn:hover {
  box-shadow: 0 10px 28px rgba(67, 216, 122, 0.40) !important;
  transform: translateY(-2px) !important;
}

/* ─── TOAST NOTIFICATION ─── */
.c3d-standalone-page .dm-toast {
  background: var(--c3d-surface) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--c3d-accent-lavender) !important;
  color: var(--c3d-text-primary) !important;
  box-shadow: var(--c3d-shadow-medium) !important;
}

/* ============================================================
   SUBVENTANA MODAL — TEMA PASTEL
   ============================================================ */

.c3d-modal-overlay {
  background: rgba(220, 210, 240, 0.65) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
}

.c3d-modal-window {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(180, 160, 220, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(150, 210, 190, 0.10) 0%, transparent 50%),
    linear-gradient(170deg, #f8f2ff 0%, #fef0f4 40%, #f0f8f4 100%) !important;
  border: 1px solid var(--c3d-glass-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(100, 80, 160, 0.18), 0 0 40px rgba(180, 160, 220, 0.10) !important;
}

.c3d-modal-header {
  background: rgba(248, 242, 255, 0.90) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--c3d-border) !important;
}

.c3d-modal-title {
  color: var(--c3d-text-primary) !important;
}

.c3d-modal-badge {
  color: #4a9a78 !important;
  background: rgba(126, 200, 168, 0.16) !important;
  border: 1px solid rgba(126, 200, 168, 0.30) !important;
}

.c3d-popout-btn {
  color: var(--c3d-accent-lavender) !important;
  background: rgba(180, 160, 220, 0.12) !important;
  border: 1px solid rgba(180, 160, 220, 0.30) !important;
}
.c3d-popout-btn:hover {
  background: rgba(180, 160, 220, 0.22) !important;
  color: #5a40a0 !important;
}

.c3d-close-btn {
  background: rgba(240, 230, 250, 0.60) !important;
  border: 1px solid rgba(180, 160, 220, 0.25) !important;
  color: var(--c3d-text-muted) !important;
}
.c3d-close-btn:hover {
  background: rgba(255, 95, 86, 0.12) !important;
  color: #d44040 !important;
  border-color: rgba(255, 95, 86, 0.30) !important;
}

/* Modal body: mismo estilo de controles */
.c3d-modal-body .dm-viewport-container {
  background: radial-gradient(circle at 50% 40%, #e8e0f4 0%, #d0cce4 50%, #c8d0e0 100%) !important;
  border: 1px solid var(--c3d-glass-border) !important;
  box-shadow: var(--c3d-shadow-medium), inset 0 0 40px rgba(180, 160, 220, 0.06) !important;
  border-radius: 20px !important;
}

.c3d-modal-body .dm-hud-status,
.c3d-modal-body .dm-viewport-tools {
  background: var(--c3d-surface) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid var(--c3d-glass-border) !important;
}

.c3d-modal-body .dm-hud-status {
  color: var(--c3d-text-secondary) !important;
}

.c3d-modal-body .dm-live-specs {
  background: var(--c3d-surface) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(126, 200, 168, 0.30) !important;
}

.c3d-modal-body .dm-spec-label {
  color: var(--c3d-text-muted) !important;
}
.c3d-modal-body .dm-spec-val {
  color: #3a9070 !important;
}

.c3d-modal-body .dm-panel-col {
  background: var(--c3d-surface) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid var(--c3d-glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--c3d-shadow-medium) !important;
}

.c3d-modal-body .dm-tabs-bar {
  background: rgba(245, 238, 255, 0.65) !important;
  border-bottom: 1px solid var(--c3d-border) !important;
}

.c3d-modal-body .dm-tab-btn {
  color: var(--c3d-text-muted) !important;
}
.c3d-modal-body .dm-tab-btn:hover {
  color: var(--c3d-text-secondary) !important;
  background: rgba(180, 160, 220, 0.08) !important;
}
.c3d-modal-body .dm-tab-btn.active {
  color: #7a60b8 !important;
  border-bottom-color: var(--c3d-accent-lavender) !important;
  background: rgba(180, 160, 220, 0.12) !important;
}

.c3d-modal-body .dm-control-label {
  color: var(--c3d-text-primary) !important;
}
.c3d-modal-body .dm-control-badge {
  color: var(--c3d-accent-mint) !important;
  background: rgba(126, 200, 168, 0.14) !important;
}

.c3d-modal-body .dm-text-input {
  background: var(--c3d-input-bg) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: var(--c3d-text-primary) !important;
}
.c3d-modal-body .dm-text-input:focus {
  border-color: var(--c3d-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(180, 160, 220, 0.15) !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

.c3d-modal-body .dm-char-hint {
  color: var(--c3d-text-muted) !important;
}

.c3d-modal-body .dm-slider {
  background: var(--c3d-slider-track) !important;
}
.c3d-modal-body .dm-slider-val {
  background: var(--c3d-input-bg) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: #3a9070 !important;
}

.c3d-modal-body .dm-step-btn {
  background: rgba(245, 238, 255, 0.70) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: var(--c3d-text-secondary) !important;
}

.c3d-modal-body .dm-choice-btn {
  background: var(--c3d-input-bg) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: var(--c3d-text-secondary) !important;
}
.c3d-modal-body .dm-choice-btn.active {
  border-color: var(--c3d-accent-coral) !important;
  background: linear-gradient(135deg, rgba(232, 165, 152, 0.15), rgba(240, 200, 160, 0.12)) !important;
  color: var(--c3d-text-primary) !important;
}

.c3d-modal-body .dm-coord-box {
  background: rgba(245, 238, 255, 0.50) !important;
  border: 1px solid var(--c3d-border) !important;
}
.c3d-modal-body .dm-coord-box-title {
  color: var(--c3d-accent-peach) !important;
}

.c3d-modal-body .dm-swatch {
  border: 2px solid rgba(180, 160, 220, 0.30) !important;
}

.c3d-modal-body .dm-color-hex-text {
  color: var(--c3d-text-muted) !important;
}

.c3d-modal-body .dm-export-btn {
  background: var(--c3d-input-bg) !important;
  border: 1px solid var(--c3d-input-border) !important;
  color: var(--c3d-text-primary) !important;
}

.c3d-modal-body .dm-summary-card {
  background: var(--c3d-surface) !important;
  border: 1px solid var(--c3d-glass-border) !important;
  box-shadow: var(--c3d-shadow-soft) !important;
}

.c3d-modal-body .dm-summary-title {
  color: var(--c3d-text-primary) !important;
}
.c3d-modal-body .dm-summary-desc {
  color: var(--c3d-text-muted) !important;
}
.c3d-modal-body .dm-price-amount {
  color: #c06050 !important;
}

.c3d-modal-body .dm-view-tip {
  background: var(--c3d-surface) !important;
  color: var(--c3d-text-muted) !important;
}

.c3d-modal-body .dm-whatsapp-order-btn {
  background: linear-gradient(135deg, #43d87a 0%, #1aab55 100%) !important;
}

/* ─── ANIMACIÓN SUAVE EXTRA PARA LA MODAL ─── */
.c3d-modal-overlay.is-open .c3d-modal-window {
  transform: scale(1) translateY(0) !important;
}

/* ─── BANNER INDEX (si se muestra en fondo claro) ─── */
.c3d-standalone-page .main-customizer-banner,
.dm-page .main-customizer-banner {
  /* El banner se mantiene oscuro para contraste */
}

/* ─── SCROLL BAR PASTEL ─── */
.c3d-standalone-page ::-webkit-scrollbar {
  width: 8px;
}
.c3d-standalone-page ::-webkit-scrollbar-track {
  background: rgba(240, 230, 250, 0.40);
}
.c3d-standalone-page ::-webkit-scrollbar-thumb {
  background: rgba(180, 160, 220, 0.40);
  border-radius: 4px;
}
.c3d-standalone-page ::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 160, 220, 0.60);
}

/* Modal scrollbar */
.c3d-modal-body::-webkit-scrollbar {
  width: 8px;
}
.c3d-modal-body::-webkit-scrollbar-track {
  background: rgba(240, 230, 250, 0.40);
}
.c3d-modal-body::-webkit-scrollbar-thumb {
  background: rgba(180, 160, 220, 0.40);
  border-radius: 4px;
}

/* ─── LOGO COLORES EN CONTEXTO CLARO ─── */
.c3d-standalone-page .logo-e {
  color: var(--c3d-accent-coral) !important;
}
.c3d-standalone-page .logo-fab {
  color: var(--c3d-text-primary) !important;
}
.c3d-standalone-page .logo-tag {
  color: var(--c3d-text-muted) !important;
}

/* ─── RESPONSIVE ADJUSTMENTS ─── */
@media (max-width: 768px) {
  .c3d-standalone-page .dm-viewport-container {
    height: 380px !important;
    border-radius: 16px !important;
  }
}

/* ─── SCROLLBAR ANCHA INDEPENDIENTE PARA EL CONTENIDO DEL PANEL ─── */
.c3d-standalone-page .dm-panel-col {
  max-height: calc(100vh - 95px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.c3d-standalone-page .dm-tabs-bar {
  flex-shrink: 0 !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  position: relative !important;
  top: 0 !important;
}

.c3d-standalone-page .dm-tab-content-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  scrollbar-width: auto !important;
  scrollbar-color: #b4a0dc rgba(180, 160, 220, 0.12) !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar {
  width: 14px !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar-track {
  background: rgba(180, 160, 220, 0.08) !important;
  border-radius: 0 0 20px 0 !important;
  border-left: 1px solid rgba(180, 160, 220, 0.18) !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b4a0dc, #a58fd4) !important;
  border-radius: 8px !important;
  border: 3px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 6px rgba(120, 100, 180, 0.25) !important;
  cursor: grab !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9f86d1, #8e72c7) !important;
  border-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(120, 100, 180, 0.40) !important;
}

.c3d-standalone-page .dm-tab-content-wrapper::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #8868bf, #7752b0) !important;
  cursor: grabbing !important;
}

@media (max-width: 1100px) {
  .c3d-standalone-page .dm-panel-col {
    position: relative !important;
    top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .c3d-standalone-page .dm-tab-content-wrapper {
    overflow: visible !important;
    max-height: none !important;
  }
}