/* Map supplied editors onto the host's existing studio tokens. */
:root,
:root[data-theme] {
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --accent: var(--color-primary);
  --accent-ink: var(--color-on-primary);
  --accent-soft: var(--color-accent-soft);
  --stage: var(--color-preview);
  --stage-ink: var(--color-text);
  --f-display: var(--font-primary, system-ui);
  --f-body: var(--font-primary, system-ui);
  --tinta: var(--color-text);
  --tinta-suave: var(--color-text-muted);
  --papel: var(--color-surface);
  --taller: var(--color-preview);
  --puntos: var(--color-border);
  --linea: var(--color-border);
  --accion: var(--color-primary);
  --accion-tinta: var(--color-on-primary);
  --coral: var(--color-primary);
  --sel-fondo: var(--color-accent-soft);
  --peligro: var(--color-danger);
  --f-titulo: var(--font-primary, system-ui);
  --f-texto: var(--font-primary, system-ui);
}
body {
  background: transparent;
  font-size: 14px;
}
.barra,
.brand {
  display: none;
}
.lienzo,
.app {
  gap: 16px;
}
.stage,
.escenario,
.panel {
  border-radius: 16px;
  min-width: 0;
}
.panel {
  background: var(--color-surface);
}
button,
input,
textarea,
a {
  touch-action: manipulation;
}
[role="button"] {
  cursor: pointer;
}
canvas:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}
.vista-tabs button,
.view-toggle button {
  min-height: 44px;
}
@media (min-width: 861px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  .lienzo,
  .app {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }
  .panel {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    max-width: none;
    overflow-y: auto;
    padding-bottom: 90px;
  }
  .stage,
  .escenario {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: 0;
    height: 100%;
    min-height: 0;
  }
  .escenario {
    align-content: center;
  }
  .vista {
    height: 60vh;
  }
  .acciones,
  .nav {
    position: fixed;
    left: 0;
    right: auto;
    width: 400px;
    border-radius: 0 0 16px 16px;
  }
  .content {
    padding-bottom: 24px;
  }
}
@media (max-width: 860px) {
  .lienzo,
  .app {
    display: flex;
    flex-direction: column;
  }
  .stage {
    height: 38vh;
    min-height: 240px;
  }
  .escenario {
    top: 0;
  }
  .panel {
    width: 100%;
    max-width: none;
  }
  .acciones,
  .nav {
    width: 100%;
    left: 0;
    right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}