/*
 * LIENZO UNO PHOTOBOOK
 * PHOTOBOOK-39H11A
 * Sistema visual de paneles de personalizacion
 */

:root {
  --lu11-surface: #29313d;
  --lu11-surface-raised: #364151;
  --lu11-surface-hover: #424e60;
  --lu11-border: #485568;
  --lu11-text: #f4f6f8;
  --lu11-muted: #c1cad6;
  --lu11-accent: #e56d4c;
  --lu11-focus: #f4a18b;
}

.pb39-background-controls,
.pb39-border-controls,
.pb39-photo-frame-controls {
  background: var(--lu11-surface) !important;
  color: var(--lu11-text) !important;
  border: 1px solid var(--lu11-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.12) !important;
  overflow: hidden;
  color-scheme: dark;
}

.pb39-background-controls .pb39-fold-header,
.pb39-border-controls .pb39-fold-header,
.pb39-photo-frame-controls .pb39-fold-header {
  background: var(--lu11-surface) !important;
  color: var(--lu11-text) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  transition: background-color .18s ease;
}

.pb39-background-controls .pb39-fold-header:hover,
.pb39-border-controls .pb39-fold-header:hover,
.pb39-photo-frame-controls .pb39-fold-header:hover {
  background: var(--lu11-surface-hover) !important;
}

.pb39-background-controls .pb39-fold-content,
.pb39-border-controls .pb39-fold-content,
.pb39-photo-frame-controls .pb39-fold-content {
  background: var(--lu11-surface) !important;
  color: var(--lu11-text) !important;
  border-top: 1px solid var(--lu11-border) !important;
}

.pb39-background-controls .pb39-fold-content[hidden],
.pb39-border-controls .pb39-fold-content[hidden],
.pb39-photo-frame-controls .pb39-fold-content[hidden] {
  display: none !important;
}

.pb39-background-controls .pb39-fold-content h3,
.pb39-border-controls .pb39-fold-content h3,
.pb39-photo-frame-controls .pb39-fold-content h3 {
  color: var(--lu11-text) !important;
  font-weight: 600;
}

.pb39-background-controls .pb39-fold-content label,
.pb39-border-controls .pb39-fold-content label,
.pb39-photo-frame-controls .pb39-fold-content label,
.pb39-background-controls .pb39-fold-content p,
.pb39-border-controls .pb39-fold-content p,
.pb39-photo-frame-controls .pb39-fold-content p {
  color: var(--lu11-muted) !important;
}

.pb39-background-controls .pb39-fold-content select,
.pb39-border-controls .pb39-fold-content select,
.pb39-photo-frame-controls .pb39-fold-content select {
  background: var(--lu11-surface-raised) !important;
  color: var(--lu11-text) !important;
  border: 1px solid var(--lu11-border) !important;
  border-radius: 9px !important;
  min-height: 40px;
}

.pb39-background-controls .pb39-fold-content button,
.pb39-border-controls .pb39-fold-content button,
.pb39-photo-frame-controls .pb39-fold-content button {
  background: var(--lu11-surface-raised) !important;
  color: var(--lu11-text) !important;
  border: 1px solid var(--lu11-border) !important;
  border-radius: 9px !important;
  min-height: 40px;
  font-weight: 600;
  transition: background-color .18s ease;
}

.pb39-background-controls .pb39-fold-content button:hover,
.pb39-border-controls .pb39-fold-content button:hover,
.pb39-photo-frame-controls .pb39-fold-content button:hover {
  background: var(--lu11-surface-hover) !important;
}

.pb39-background-controls .pb39-fold-content button:focus-visible,
.pb39-border-controls .pb39-fold-content button:focus-visible,
.pb39-photo-frame-controls .pb39-fold-content button:focus-visible,
.pb39-background-controls .pb39-fold-header:focus-visible,
.pb39-border-controls .pb39-fold-header:focus-visible,
.pb39-photo-frame-controls .pb39-fold-header:focus-visible {
  outline: 2px solid var(--lu11-focus) !important;
  outline-offset: 3px;
}

.pb39-background-controls .pb39-fold-content input,
.pb39-border-controls .pb39-fold-content input,
.pb39-photo-frame-controls .pb39-fold-content input {
  accent-color: var(--lu11-accent);
}

.pb39-background-controls .pb39-fold-content input[type="color"],
.pb39-border-controls .pb39-fold-content input[type="color"],
.pb39-photo-frame-controls .pb39-fold-content input[type="color"] {
  background: var(--lu11-surface-raised) !important;
  border: 1px solid var(--lu11-border) !important;
  border-radius: 9px;
}

.pb39-background-controls .pb39-fold-chevron,
.pb39-border-controls .pb39-fold-chevron,
.pb39-photo-frame-controls .pb39-fold-chevron {
  background: var(--lu11-surface-raised) !important;
  color: var(--lu11-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  .pb39-background-controls *,
  .pb39-border-controls *,
  .pb39-photo-frame-controls * {
    transition-duration: 0s !important;
  }
}