/* Galería Stylewind embebida (/styles/{id}/preview, live-frame) */

.sw-example {
  border: 1px solid var(--gp-border, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  background: var(--gp-surface, #fff);
}

.sw-example-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gp-surface-muted, #f8fafc);
  border-bottom: 1px solid var(--gp-border, #e2e8f0);
}

.sw-example-tablist {
  display: flex;
  gap: 4px;
}

.sw-example-tab {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 650;
  color: var(--gp-text-muted, #64748b);
  cursor: pointer;
  font-family: inherit;
}

.sw-example-tab.is-active {
  background: var(--gp-surface, #fff);
  color: var(--gp-text, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.sw-example-copy {
  border: 1px solid var(--gp-border, #e2e8f0);
  background: var(--gp-surface, #fff);
  color: var(--gp-text-soft, #334155);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .75rem;
  font-weight: 650;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sw-example-copy:hover {
  border-color: color-mix(in srgb, var(--gp-border, #e2e8f0) 70%, var(--gp-text-muted, #64748b));
  background: var(--gp-surface-muted, #f8fafc);
}

.sw-example-pane {
  display: none;
  padding: 16px;
}

.sw-example-pane.is-active {
  display: block;
}

.sw-example.is-code .sw-example-pane[data-ex-pane="code"] {
  padding: 0;
  background: #0f172a;
}

.sw-example-pre {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  max-height: 420px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: .78rem;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sw-example-pre code {
  font: inherit;
  color: inherit;
}

.live-frame-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--gp-text-muted, #64748b);
  font-family: Inter, system-ui, sans-serif;
}

/* ========== Dark mode (galería dentro del iframe) ========== */

html[data-appearance="dark"] {
  --gp-surface: var(--panel-surface-elevated, #1e293b);
  --gp-surface-muted: var(--panel-surface-muted, #111827);
  --gp-border: var(--panel-border, #334155);
  --gp-text: var(--panel-text, #f8fafc);
  --gp-text-muted: var(--panel-text-muted, #94a3b8);
  --gp-text-soft: color-mix(in srgb, var(--panel-text, #f8fafc) 82%, var(--panel-text-muted, #94a3b8));
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] {
    --gp-surface: var(--panel-surface-elevated, #1e293b);
    --gp-surface-muted: var(--panel-surface-muted, #111827);
    --gp-border: var(--panel-border, #334155);
    --gp-text: var(--panel-text, #f8fafc);
    --gp-text-muted: var(--panel-text-muted, #94a3b8);
    --gp-text-soft: color-mix(in srgb, var(--panel-text, #f8fafc) 82%, var(--panel-text-muted, #94a3b8));
    color-scheme: dark;
  }
}

html[data-appearance="dark"] body,
html[data-appearance="dark"] body.bg-neutral-50 {
  background: var(--panel-surface, #0b1220) !important;
  color: var(--panel-text-muted, #94a3b8) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] body,
  html[data-appearance="system"] body.bg-neutral-50 {
    background: var(--panel-surface, #0b1220) !important;
    color: var(--panel-text-muted, #94a3b8) !important;
  }
}

html[data-appearance="dark"] h1,
html[data-appearance="dark"] h2,
html[data-appearance="dark"] h3,
html[data-appearance="dark"] .font-semibold,
html[data-appearance="dark"] .font-bold,
html[data-appearance="dark"] .text-neutral-900,
html[data-appearance="dark"] .text-neutral-800 {
  color: var(--panel-text, #f8fafc) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] h1,
  html[data-appearance="system"] h2,
  html[data-appearance="system"] h3,
  html[data-appearance="system"] .font-semibold,
  html[data-appearance="system"] .font-bold,
  html[data-appearance="system"] .text-neutral-900,
  html[data-appearance="system"] .text-neutral-800 {
    color: var(--panel-text, #f8fafc) !important;
  }
}

html[data-appearance="dark"] .text-neutral-600,
html[data-appearance="dark"] .text-neutral-500,
html[data-appearance="dark"] .text-neutral-400,
html[data-appearance="dark"] p:not([class*="text-primary"]):not([class*="text-secondary"]):not([class*="text-success"]):not([class*="text-white"]) {
  color: var(--panel-text-muted, #94a3b8) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .text-neutral-600,
  html[data-appearance="system"] .text-neutral-500,
  html[data-appearance="system"] .text-neutral-400,
  html[data-appearance="system"] p:not([class*="text-primary"]):not([class*="text-secondary"]):not([class*="text-success"]):not([class*="text-white"]) {
    color: var(--panel-text-muted, #94a3b8) !important;
  }
}

html[data-appearance="dark"] .sw-card,
html[data-appearance="dark"] .bg-white,
html[data-appearance="dark"] .bg-neutral-50,
html[data-appearance="dark"] .bg-neutral-100,
html[data-appearance="dark"] .sw-example-tab.is-active,
html[data-appearance="dark"] .sw-example-copy {
  background: var(--panel-surface-elevated, #1e293b) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .sw-card,
  html[data-appearance="system"] .bg-white,
  html[data-appearance="system"] .bg-neutral-50,
  html[data-appearance="system"] .bg-neutral-100,
  html[data-appearance="system"] .sw-example-tab.is-active,
  html[data-appearance="system"] .sw-example-copy {
    background: var(--panel-surface-elevated, #1e293b) !important;
  }
}

html[data-appearance="dark"] .bg-neutral-200 {
  background: color-mix(in srgb, var(--panel-surface-muted, #111827) 55%, var(--panel-border, #334155)) !important;
  color: var(--panel-text, #f8fafc) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .bg-neutral-200 {
    background: color-mix(in srgb, var(--panel-surface-muted, #111827) 55%, var(--panel-border, #334155)) !important;
    color: var(--panel-text, #f8fafc) !important;
  }
}

html[data-appearance="dark"] .border-neutral-100,
html[data-appearance="dark"] .border-neutral-200,
html[data-appearance="dark"] .border-neutral-300,
html[data-appearance="dark"] .divide-neutral-100 > :not([hidden]) ~ :not([hidden]),
html[data-appearance="dark"] hr,
html[data-appearance="dark"] .sw-card {
  border-color: var(--panel-border, #334155) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .border-neutral-100,
  html[data-appearance="system"] .border-neutral-200,
  html[data-appearance="system"] .border-neutral-300,
  html[data-appearance="system"] .divide-neutral-100 > :not([hidden]) ~ :not([hidden]),
  html[data-appearance="system"] hr,
  html[data-appearance="system"] .sw-card {
    border-color: var(--panel-border, #334155) !important;
  }
}

html[data-appearance="dark"] code.bg-neutral-100,
html[data-appearance="dark"] .bg-neutral-100 code {
  background: var(--panel-surface-muted, #111827) !important;
  color: var(--panel-text, #f8fafc) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] code.bg-neutral-100,
  html[data-appearance="system"] .bg-neutral-100 code {
    background: var(--panel-surface-muted, #111827) !important;
    color: var(--panel-text, #f8fafc) !important;
  }
}

html[data-appearance="dark"] .sw-input,
html[data-appearance="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-appearance="dark"] select,
html[data-appearance="dark"] textarea {
  background: var(--panel-surface-muted, #111827) !important;
  border-color: var(--panel-border, #334155) !important;
  color: var(--panel-text, #f8fafc) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .sw-input,
  html[data-appearance="system"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  html[data-appearance="system"] select,
  html[data-appearance="system"] textarea {
    background: var(--panel-surface-muted, #111827) !important;
    border-color: var(--panel-border, #334155) !important;
    color: var(--panel-text, #f8fafc) !important;
  }
}

html[data-appearance="dark"] .sw-example-tab.is-active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .sw-example-tab.is-active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important;
  }
}