/* ==========================================================================
   Sistema Ingressa — Standardized Appearance Controls (Unified System)
   ========================================================================== */

/* 1. Header / Topbar / In-page Appearance Controls */
.appearance-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 6px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #e4dfd6) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  vertical-align: middle !important;
}

[data-theme="dark"] .appearance-controls {
  background: var(--surface, #1b2028) !important;
  border-color: var(--border, #2d3748) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* 2. Sub-group (Seamless layout) */
.ctrl-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 !important;
  background: transparent !important;
}

[data-theme="dark"] .ctrl-group {
  background: transparent !important;
}

/* 3. Vertical Separator */
.ctrl-sep {
  width: 1px !important;
  height: 16px !important;
  margin: 0 4px !important;
  background: var(--border, #e4dfd6) !important;
  display: inline-block !important;
}

[data-theme="dark"] .ctrl-sep {
  background: var(--border, #2d3748) !important;
}

/* 4. Control Buttons */
.ctrl-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #71717a !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  outline: none !important;
}

[data-theme="dark"] .ctrl-btn {
  color: #a1a1aa !important;
}

.ctrl-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #18181b !important;
}

[data-theme="dark"] .ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f4f4f5 !important;
}

/* Active State for Mode Buttons (Theme Light/Dark & View Mode) */
.ctrl-btn:not(.ctrl-btn--swatch)[aria-pressed="true"] {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--accent, #b86a35) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .ctrl-btn:not(.ctrl-btn--swatch)[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--accent, #c25e2e) !important;
  box-shadow: none !important;
}

/* 5. Swatch Buttons (Copper & Petrol) */
.ctrl-btn--swatch {
  background: transparent !important;
  box-shadow: none !important;
}

.ctrl-btn--swatch:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .ctrl-btn--swatch:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.ctrl-swatch {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.ctrl-swatch--copper {
  background: #c25e2e !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15) !important;
}

.ctrl-swatch--petrol {
  background: #2b6d85 !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15) !important;
}

.ctrl-btn--swatch[aria-pressed="true"] {
  background: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .ctrl-btn--swatch[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.14) !important;
}

.ctrl-btn--swatch[aria-pressed="true"] .ctrl-swatch {
  transform: scale(1.22) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .ctrl-btn--swatch[aria-pressed="true"] .ctrl-swatch {
  box-shadow: 0 0 0 2px rgba(27, 32, 40, 0.95), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 6. Icon SVG Standard */
.ctrl-btn svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* 7. Floating Controls on Login/Standalone Pages */
.floating-controls {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="dark"] .floating-controls {
  background: rgba(22, 27, 34, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

.floating-controls:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
}

/* Hide legacy elements */
.preview,
.preview__controls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}