/* ========== DARK MODE — panel appearance (día / noche / escritorio) ========== */

html[data-appearance="dark"] {
  color-scheme: dark;
  --tw-white: var(--panel-surface-elevated);
  --tw-slate-50: var(--panel-surface-muted);
  --tw-slate-100: color-mix(in srgb, var(--panel-surface-muted) 88%, var(--panel-border));
  --tw-slate-200: var(--panel-border);
  --tw-slate-300: color-mix(in srgb, var(--panel-border) 55%, var(--panel-text-muted));
  --tw-slate-400: color-mix(in srgb, var(--panel-text-muted) 88%, var(--panel-text));
  --tw-slate-500: var(--panel-text-muted);
  --tw-slate-600: color-mix(in srgb, var(--panel-text) 52%, var(--panel-text-muted));
  --tw-slate-700: color-mix(in srgb, var(--panel-text) 74%, var(--panel-text-muted));
  --tw-slate-800: var(--panel-text);
  --tw-slate-900: var(--panel-text);
  --ink: var(--panel-text);
  --muted: var(--panel-text-muted);
  --line: var(--panel-border);
  --bg: var(--panel-surface);
  --soft: var(--panel-surface-muted);
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] {
    color-scheme: dark;
    --tw-white: var(--panel-surface-elevated);
    --tw-slate-50: var(--panel-surface-muted);
    --tw-slate-100: color-mix(in srgb, var(--panel-surface-muted) 88%, var(--panel-border));
    --tw-slate-200: var(--panel-border);
    --tw-slate-300: color-mix(in srgb, var(--panel-border) 55%, var(--panel-text-muted));
    --tw-slate-400: color-mix(in srgb, var(--panel-text-muted) 88%, var(--panel-text));
    --tw-slate-500: var(--panel-text-muted);
    --tw-slate-600: color-mix(in srgb, var(--panel-text) 52%, var(--panel-text-muted));
    --tw-slate-700: color-mix(in srgb, var(--panel-text) 74%, var(--panel-text-muted));
    --tw-slate-800: var(--panel-text);
    --tw-slate-900: var(--panel-text);
    --ink: var(--panel-text);
    --muted: var(--panel-text-muted);
    --line: var(--panel-border);
    --bg: var(--panel-surface);
    --soft: var(--panel-surface-muted);
  }
}

/* Shell & layout */
html[data-appearance="dark"] body.panel-body,
html[data-appearance="dark"] body.lp,
html[data-appearance="dark"] .lp {
  background: var(--panel-surface) !important;
  color: var(--panel-text-muted) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] body.panel-body,
  html[data-appearance="system"] body.lp,
  html[data-appearance="system"] .lp {
    background: var(--panel-surface) !important;
    color: var(--panel-text-muted) !important;
  }
}

html[data-appearance="dark"] .tw-topbar {
  background: color-mix(in srgb, var(--panel-surface) 90%, transparent) !important;
  border-bottom-color: var(--panel-border) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .tw-topbar {
    background: color-mix(in srgb, var(--panel-surface) 90%, transparent) !important;
    border-bottom-color: var(--panel-border) !important;
  }
}

html[data-appearance="dark"] .app-shell {
  background: var(--panel-surface);
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .app-shell {
    background: var(--panel-surface);
  }
}

html[data-appearance="dark"] .sidebar {
  background: var(--panel-surface-muted) !important;
  border-right-color: var(--panel-border) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .sidebar {
    background: var(--panel-surface-muted) !important;
    border-right-color: var(--panel-border) !important;
  }
}

html[data-appearance="dark"] .sidebar-footer,
html[data-appearance="dark"] .docs-hr,
html[data-appearance="dark"] .lp-hero,
html[data-appearance="dark"] .tc-sim-actions {
  border-color: var(--panel-border) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .sidebar-footer,
  html[data-appearance="system"] .docs-hr,
  html[data-appearance="system"] .lp-hero,
  html[data-appearance="system"] .tc-sim-actions {
    border-color: var(--panel-border) !important;
  }
}

html[data-appearance="dark"] .sidebar nav a:hover,
html[data-appearance="dark"] .sidebar-link:hover,
html[data-appearance="dark"] .tw-top-links a:hover {
  background: color-mix(in srgb, var(--panel-surface-elevated) 80%, var(--accent-soft)) !important;
  color: var(--panel-text) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .sidebar nav a:hover,
  html[data-appearance="system"] .sidebar-link:hover,
  html[data-appearance="system"] .tw-top-links a:hover {
    background: color-mix(in srgb, var(--panel-surface-elevated) 80%, var(--accent-soft)) !important;
    color: var(--panel-text) !important;
  }
}

html[data-appearance="dark"] .tw-brand,
html[data-appearance="dark"] .tw-top-links a,
html[data-appearance="dark"] .sidebar-group-title,
html[data-appearance="dark"] .sidebar nav a,
html[data-appearance="dark"] .docs-title,
html[data-appearance="dark"] .docs-h2,
html[data-appearance="dark"] .tw-step h3,
html[data-appearance="dark"] .tw-step-title,
html[data-appearance="dark"] .style-tile-head h3,
html[data-appearance="dark"] .snip-card h3,
html[data-appearance="dark"] .snip-category-head h2,
html[data-appearance="dark"] .snip-group-title,
html[data-appearance="dark"] .lp-hero h1,
html[data-appearance="dark"] .lp-demo-title-row h3,
html[data-appearance="dark"] .lp-section-note,
html[data-appearance="dark"] h1,
html[data-appearance="dark"] h2,
html[data-appearance="dark"] h3 {
  color: var(--panel-text) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .tw-brand,
  html[data-appearance="system"] .tw-top-links a,
  html[data-appearance="system"] .sidebar-group-title,
  html[data-appearance="system"] .sidebar nav a,
  html[data-appearance="system"] .docs-title,
  html[data-appearance="system"] .docs-h2,
  html[data-appearance="system"] .tw-step h3,
  html[data-appearance="system"] .tw-step-title,
  html[data-appearance="system"] .style-tile-head h3,
  html[data-appearance="system"] .snip-card h3,
  html[data-appearance="system"] .snip-category-head h2,
  html[data-appearance="system"] .snip-group-title,
  html[data-appearance="system"] .lp-hero h1,
  html[data-appearance="system"] .lp-demo-title-row h3,
  html[data-appearance="system"] .lp-section-note,
  html[data-appearance="system"] h1,
  html[data-appearance="system"] h2,
  html[data-appearance="system"] h3 {
    color: var(--panel-text) !important;
  }
}

html[data-appearance="dark"] .docs-lead,
html[data-appearance="dark"] .docs-p,
html[data-appearance="dark"] .tw-step p,
html[data-appearance="dark"] .muted,
html[data-appearance="dark"] .lp-lead,
html[data-appearance="dark"] .lp-demo-title-row p,
html[data-appearance="dark"] .snip-category-head p {
  color: var(--panel-text-muted) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .docs-lead,
  html[data-appearance="system"] .docs-p,
  html[data-appearance="system"] .tw-step p,
  html[data-appearance="system"] .muted,
  html[data-appearance="system"] .lp-lead,
  html[data-appearance="system"] .lp-demo-title-row p,
  html[data-appearance="system"] .snip-category-head p {
    color: var(--panel-text-muted) !important;
  }
}

/* Surfaces */
html[data-appearance="dark"] .theme-switcher,
html[data-appearance="dark"] .theme-switcher-menu,
html[data-appearance="dark"] .card,
html[data-appearance="dark"] .auth-card,
html[data-appearance="dark"] .editor-form,
html[data-appearance="dark"] .style-card,
html[data-appearance="dark"] .style-tile,
html[data-appearance="dark"] .style-stage-empty,
html[data-appearance="dark"] .snip-card,
html[data-appearance="dark"] .snip-cat-tab,
html[data-appearance="dark"] .icon-cell,
html[data-appearance="dark"] .live-preview,
html[data-appearance="dark"] .live-gallery-wrap,
html[data-appearance="dark"] .lp-demo,
html[data-appearance="dark"] .lp-demo-pane,
html[data-appearance="dark"] .lp-label-box,
html[data-appearance="dark"] .table-wrap,
html[data-appearance="dark"] .form-section,
html[data-appearance="dark"] .page-head-row {
  background: var(--panel-surface-elevated) !important;
  border-color: var(--panel-border) !important;
  color: var(--panel-text-muted) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .theme-switcher,
  html[data-appearance="system"] .theme-switcher-menu,
  html[data-appearance="system"] .card,
  html[data-appearance="system"] .auth-card,
  html[data-appearance="system"] .editor-form,
  html[data-appearance="system"] .style-card,
  html[data-appearance="system"] .style-tile,
  html[data-appearance="system"] .style-stage-empty,
  html[data-appearance="system"] .snip-card,
  html[data-appearance="system"] .snip-cat-tab,
  html[data-appearance="system"] .icon-cell,
  html[data-appearance="system"] .live-preview,
  html[data-appearance="system"] .live-gallery-wrap,
  html[data-appearance="system"] .lp-demo,
  html[data-appearance="system"] .lp-demo-pane,
  html[data-appearance="system"] .lp-label-box,
  html[data-appearance="system"] .table-wrap,
  html[data-appearance="system"] .form-section,
  html[data-appearance="system"] .page-head-row {
    background: var(--panel-surface-elevated) !important;
    border-color: var(--panel-border) !important;
    color: var(--panel-text-muted) !important;
  }
}

html[data-appearance="dark"] .lp-hero {
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--panel-surface) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .lp-hero {
    background:
      radial-gradient(ellipse 70% 60% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
      var(--panel-surface) !important;
  }
}

/* Form controls */
html[data-appearance="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-appearance="dark"] select,
html[data-appearance="dark"] textarea,
html[data-appearance="dark"] .gm-field,
html[data-appearance="dark"] .lp-select {
  background: var(--panel-surface-muted) !important;
  border-color: var(--panel-border) !important;
  color: var(--panel-text) !important;
}

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

html[data-appearance="dark"] .btn-outline {
  background: transparent !important;
  border-color: var(--panel-border) !important;
  color: var(--panel-text) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .btn-outline {
    background: transparent !important;
    border-color: var(--panel-border) !important;
    color: var(--panel-text) !important;
  }
}

html[data-appearance="dark"] .tw-inline-code,
html[data-appearance="dark"] .docs-p code,
html[data-appearance="dark"] .card code,
html[data-appearance="dark"] .style-tile-ids code,
html[data-appearance="dark"] .lp-steps code {
  background: var(--panel-surface-muted) !important;
  border-color: var(--panel-border) !important;
  color: var(--panel-text) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .tw-inline-code,
  html[data-appearance="system"] .docs-p code,
  html[data-appearance="system"] .card code,
  html[data-appearance="system"] .style-tile-ids code,
  html[data-appearance="system"] .lp-steps code {
    background: var(--panel-surface-muted) !important;
    border-color: var(--panel-border) !important;
    color: var(--panel-text) !important;
  }
}

html[data-appearance="dark"] .tw-tabs {
  background: var(--panel-surface-muted) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .tw-tabs {
    background: var(--panel-surface-muted) !important;
  }
}

html[data-appearance="dark"] .tw-tab.is-active {
  background: var(--panel-surface-elevated) !important;
  color: var(--panel-text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .tw-tab.is-active {
    background: var(--panel-surface-elevated) !important;
    color: var(--panel-text) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
  }
}

/* Appearance switch */
html[data-appearance="dark"] .appearance-switch-inner {
  background: color-mix(in srgb, var(--panel-surface-muted) 85%, #000) !important;
  border-color: var(--panel-border) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important;
}

html[data-appearance="dark"] .appearance-switch-indicator {
  background: var(--panel-surface-elevated) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px var(--panel-border) !important;
}

html[data-appearance="dark"] .appearance-switch-seg {
  color: var(--panel-text-muted) !important;
}

html[data-appearance="dark"] .appearance-switch-seg.is-active {
  color: var(--panel-text) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .appearance-switch-inner {
    background: color-mix(in srgb, var(--panel-surface-muted) 85%, #000) !important;
    border-color: var(--panel-border) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important;
  }

  html[data-appearance="system"] .appearance-switch-indicator {
    background: var(--panel-surface-elevated) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px var(--panel-border) !important;
  }

  html[data-appearance="system"] .appearance-switch-seg {
    color: var(--panel-text-muted) !important;
  }

  html[data-appearance="system"] .appearance-switch-seg.is-active {
    color: var(--panel-text) !important;
  }
}

html[data-appearance="dark"] .docs-embed-frame,
html[data-appearance="dark"] .live-gallery-frame {
  border-color: var(--panel-border) !important;
  background: var(--panel-surface-muted) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .docs-embed-frame,
  html[data-appearance="system"] .live-gallery-frame {
    border-color: var(--panel-border) !important;
    background: var(--panel-surface-muted) !important;
  }
}

html[data-appearance="dark"] .theme-active-chip {
  background: var(--accent-soft) !important;
  border-color: var(--panel-border) !important;
  color: var(--accent-ink) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] .theme-active-chip {
    background: var(--accent-soft) !important;
    border-color: var(--panel-border) !important;
    color: var(--accent-ink) !important;
  }
}