/*
 * LampOn Studio LED Screen · sistema visual unificado
 * Esta capa se carga al final y normaliza las tres fases sin alterar su lógica.
 */

:root{
  --background-main:#060b10;
  --background-panel:#0d171d;
  --background-control:#091217;
  --background-elevated:#122027;
  --border-default:#263840;
  --border-strong:#39515a;
  --text-primary:#f2f6f7;
  --text-secondary:#9aadb3;
  --text-muted:#647a82;
  --accent-primary:#d89b54;
  --accent-hover:#f2c17d;
  --accent-soft:rgba(216,155,84,.14);
  --brand-gold:#f1c27a;
  --warning:#e9ae45;
  --danger:#e96770;
  --success:#65b78a;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --bg:var(--background-main);
  --panel:var(--background-panel);
  --panel-2:var(--background-elevated);
  --line:var(--border-default);
  --muted:var(--text-secondary);
  --text:var(--text-primary);
  --cyan:var(--accent-primary);
  --blue:var(--accent-primary);
  --amber:var(--warning);
  --red:var(--danger);
  --radius:8px;
}

html{background:var(--background-main)}
body,
button,
input,
select,
textarea{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}

body[data-pixel-phase]{
  background:var(--background-main)!important;
  color:var(--text-primary);
}

body[data-pixel-phase] .app-shell,
body[data-pixel-phase] .main,
body[data-pixel-phase] #editorView{background:var(--background-main)}

/* Cabecera LampOn */
body[data-pixel-phase] .topbar{
  height:66px!important;
  padding:0 18px!important;
  border-color:var(--border-default)!important;
  background:#070e12!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

.lampon-top-brand{color:var(--text-primary)!important}
.lampon-top-mark{
  border-color:var(--brand-gold)!important;
  color:#f2c17d!important;
  background:#080d11!important;
  box-shadow:none!important;
}
.lampon-top-brand b,
.project-title{font-family:"Space Grotesk",Inter,system-ui,sans-serif!important}
.lampon-top-brand small{color:var(--text-muted)!important}

/* Navegación de fases */
body[data-pixel-phase] #editorView>.view-heading{
  min-height:66px;
  padding:10px 16px!important;
  border-color:var(--border-default)!important;
  background:#071014!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .pixel-workflow{
  width:min(980px,82vw)!important;
  max-width:980px!important;
  gap:6px!important;
}

body[data-pixel-phase] .pixel-workflow>i{
  width:18px!important;
  height:1px!important;
  background:var(--border-strong)!important;
}

body[data-pixel-phase] .pixel-workflow>button{
  flex:1 1 0!important;
  min-width:0!important;
  min-height:44px!important;
  padding:7px 12px 7px 8px!important;
  border:1px solid var(--border-default)!important;
  border-radius:8px!important;
  background:var(--background-control)!important;
  box-shadow:none!important;
  color:var(--text-secondary)!important;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease!important;
}

body[data-pixel-phase] .pixel-workflow>button:hover{
  border-color:var(--border-strong)!important;
  background:var(--background-elevated)!important;
}

body[data-pixel-phase] .pixel-workflow>button>b{
  width:25px!important;
  height:25px!important;
  border-radius:6px!important;
  background:var(--background-elevated)!important;
  color:var(--text-muted)!important;
  font:700 10px Inter,system-ui,sans-serif!important;
}

body[data-pixel-phase] .pixel-workflow>button>span{
  color:var(--text-secondary)!important;
  font:700 10px Inter,system-ui,sans-serif!important;
}

body[data-pixel-phase] .pixel-workflow>button>small{
  color:var(--text-muted)!important;
  font:500 7px Inter,system-ui,sans-serif!important;
}

body[data-pixel-phase] .pixel-workflow>button.active{
  border-color:var(--accent-primary)!important;
  background:var(--accent-soft)!important;
  box-shadow:inset 3px 0 0 var(--accent-primary)!important;
}

body[data-pixel-phase] .pixel-workflow>button.active>b{
  background:var(--accent-primary)!important;
  color:#171006!important;
}

body[data-pixel-phase] .pixel-workflow>button.active>span{color:var(--text-primary)!important}
body[data-pixel-phase] .pixel-workflow>button.active>small{color:#c9a678!important}

/* La gestión duplicada de pestañas no interrumpe el flujo de tres columnas. */
body[data-pixel-phase] #editorView>.screen-tabs-wrap{display:none!important}

/* Estructura común */
body[data-pixel-phase] #editorView{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 14px 18px!important;
}

body[data-pixel-phase] .workspace{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  gap:0!important;
  border:1px solid var(--border-default)!important;
  border-radius:8px!important;
  background:var(--background-main)!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .workspace>.config-panel,
body[data-pixel-phase] .workspace>.screen-manager-panel{
  border-color:var(--border-default)!important;
  border-radius:0!important;
  background:var(--background-panel)!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .workspace>.config-panel{padding:14px!important}
body[data-pixel-phase] .screen-manager-panel>.config-section{padding:14px!important}
body[data-pixel-phase] .workspace>.canvas-column{background:#03080b!important}

body[data-pixel-phase] .card,
body[data-pixel-phase] .canvas-card,
body[data-pixel-phase] .compact{
  border-color:var(--border-default)!important;
  border-radius:8px!important;
  background:var(--background-panel)!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Jerarquía tipográfica */
body[data-pixel-phase] h1,
body[data-pixel-phase] h2,
body[data-pixel-phase] h3,
body[data-pixel-phase] .metric strong,
body[data-pixel-phase] .screen-preview b,
body[data-pixel-phase] .pixel-total-card strong,
body[data-pixel-phase] .pixel-label-card b{
  font-family:"Space Grotesk",Inter,system-ui,sans-serif!important;
}

body[data-pixel-phase] .card-head h2,
body[data-pixel-phase] #phasePanelTitle{font-size:14px!important;font-weight:700!important;color:var(--text-primary)!important}

body[data-pixel-phase] .config-section h3,
body[data-pixel-phase] .numbered-section h3{
  margin-bottom:12px!important;
  color:var(--text-primary)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}

body[data-pixel-phase] .numbered-section h3 b{color:var(--accent-primary)!important}
body[data-pixel-phase] .eyebrow{color:var(--text-muted)!important}
body[data-pixel-phase] .routing-advice,
body[data-pixel-phase] .setup-note,
body[data-pixel-phase] .calc-note{color:var(--text-muted)!important}

/* Formularios */
body[data-pixel-phase] .field{gap:6px!important}
body[data-pixel-phase] .field>span{
  color:var(--text-secondary)!important;
  font:600 10px Inter,system-ui,sans-serif!important;
  letter-spacing:0!important;
}

body[data-pixel-phase] .field input,
body[data-pixel-phase] .field select,
body[data-pixel-phase] .field textarea,
body[data-pixel-phase] .routing-select select{
  min-height:38px!important;
  padding:8px 10px!important;
  border:1px solid var(--border-default)!important;
  border-radius:6px!important;
  background:var(--background-control)!important;
  color:var(--text-primary)!important;
  font:600 11px Inter,system-ui,sans-serif!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .field input:focus,
body[data-pixel-phase] .field select:focus,
body[data-pixel-phase] .field textarea:focus,
body[data-pixel-phase] .routing-select select:focus{
  border-color:var(--accent-primary)!important;
  box-shadow:0 0 0 2px var(--accent-soft)!important;
  outline:none!important;
}

body[data-pixel-phase] .input-unit b{color:var(--text-muted)!important;top:11px!important}
body[data-pixel-phase] .field input:disabled{color:var(--text-muted)!important;opacity:.62!important}

/* Botones: primario, secundario, activo y peligro */
body[data-pixel-phase] .button,
body[data-pixel-phase] .pixel-tools button,
body[data-pixel-phase] .phase-next,
body[data-pixel-phase] .phase-back,
body[data-pixel-phase] .config-tabs button,
body[data-pixel-phase] .simple-screen-card button,
body[data-pixel-phase] .technical-fab{
  min-height:34px;
  border:1px solid var(--border-default)!important;
  border-radius:6px!important;
  background:var(--background-control)!important;
  background-image:none!important;
  color:var(--text-secondary)!important;
  font-family:Inter,system-ui,sans-serif!important;
  font-weight:600!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .button:hover,
body[data-pixel-phase] .pixel-tools button:hover,
body[data-pixel-phase] .phase-back:hover,
body[data-pixel-phase] .config-tabs button:hover,
body[data-pixel-phase] .simple-screen-card button:hover{
  border-color:var(--accent-hover)!important;
  background:var(--background-elevated)!important;
  color:var(--text-primary)!important;
  transform:none!important;
}

body[data-pixel-phase] .button.primary,
body[data-pixel-phase] .inline-add-screen,
body[data-pixel-phase] .phase-next,
body[data-pixel-phase] .materials-pdf-button{
  border-color:var(--accent-primary)!important;
  background:var(--accent-primary)!important;
  background-image:none!important;
  color:#171006!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .button.primary:hover,
body[data-pixel-phase] .inline-add-screen:hover,
body[data-pixel-phase] .phase-next:hover,
body[data-pixel-phase] .materials-pdf-button:hover{background:var(--accent-hover)!important}

body[data-pixel-phase] .pixel-tools button.active,
body[data-pixel-phase] .config-tabs button.active{
  border-color:var(--accent-primary)!important;
  background:var(--accent-soft)!important;
  color:var(--text-primary)!important;
  box-shadow:inset 0 -2px var(--accent-primary)!important;
}

body[data-pixel-phase] .pixel-tools.primary-tools button:first-child{
  border-color:var(--border-default)!important;
  background:var(--background-control)!important;
  color:var(--text-secondary)!important;
}

body[data-pixel-phase] .pixel-tools.primary-tools button:first-child.active{
  border-color:var(--accent-primary)!important;
  background:var(--accent-soft)!important;
  color:var(--text-primary)!important;
}

body[data-pixel-phase] button:disabled{
  opacity:.38!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

body[data-pixel-phase] button:focus-visible,
body[data-pixel-phase] input:focus-visible,
body[data-pixel-phase] select:focus-visible,
body[data-pixel-phase] textarea:focus-visible{
  outline:2px solid var(--accent-primary)!important;
  outline-offset:2px!important;
}

/* Secciones y controles de edición */
body[data-pixel-phase] .config-section{border-color:var(--border-default)!important}
body[data-pixel-phase] .phase-edit-panel .editor-option-grid{gap:8px!important}
body[data-pixel-phase] .phase-edit-panel .editor-option-card,
body[data-pixel-phase] .phase-materials-intro,
body[data-pixel-phase] .source-fact,
body[data-pixel-phase] .formula-box,
body[data-pixel-phase] .inline-resolution,
body[data-pixel-phase] .screen-preview,
body[data-pixel-phase] .empty-screen-list,
body[data-pixel-phase] .empty-technical{
  border-color:var(--border-default)!important;
  border-radius:6px!important;
  background:var(--background-control)!important;
  background-image:none!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .phase-edit-panel .editor-option-card header b,
body[data-pixel-phase] .phase-materials-intro b{color:var(--text-primary)!important}

body[data-pixel-phase] .phase-edit-panel .editor-option-card header span,
body[data-pixel-phase] .phase-materials-intro span,
body[data-pixel-phase] .source-fact{color:var(--text-muted)!important}

/* Canvas: contenido libre, controles coherentes */
body[data-pixel-phase] .pixel-toolbar{
  min-height:48px!important;
  padding:7px 10px!important;
  border-color:var(--border-default)!important;
  background:#081116!important;
  background-image:none!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .pixel-tools{
  padding:4px!important;
  border-color:var(--border-default)!important;
  border-radius:8px!important;
  background:var(--background-control)!important;
}

body[data-pixel-phase] .editor-option-card>.pixel-tools{background:transparent!important}

body[data-pixel-phase] .pixel-workspace{
  background-color:#03080b!important;
  background-image:linear-gradient(rgba(74,105,113,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(74,105,113,.07) 1px,transparent 1px)!important;
  background-size:20px 20px!important;
}

body[data-pixel-phase] .pixel-canvas{
  border-color:var(--border-strong)!important;
  background-color:#020608!important;
  box-shadow:none!important;
}

body[data-pixel-phase] .pixel-center-guide.horizontal{background:linear-gradient(90deg,transparent,var(--accent-soft) 12%,var(--accent-primary) 50%,var(--accent-soft) 88%,transparent)!important}
body[data-pixel-phase] .pixel-center-guide.vertical{background:linear-gradient(transparent,var(--accent-soft) 12%,var(--accent-primary) 50%,var(--accent-soft) 88%,transparent)!important}
body[data-pixel-phase] .pixel-center-mark{border-color:var(--accent-primary)!important;box-shadow:none!important}
body[data-pixel-phase] .pixel-center-mark::before,
body[data-pixel-phase] .pixel-center-mark::after{background:var(--accent-primary)!important}
body[data-pixel-phase] .pixel-center-mark i{background:var(--accent-primary)!important;box-shadow:none!important}

/* Selección y agrupación: el contenido conserva sus colores propios. */
body[data-pixel-phase] .pixel-screen.selected{
  box-shadow:0 0 0 1px #fff,0 0 0 3px var(--accent-primary)!important;
  filter:none!important;
}
body[data-pixel-phase] .pixel-screen.active-screen{outline-color:var(--accent-primary)!important}
body[data-pixel-phase] .pixel-screen.grouped{outline-color:var(--accent-primary)!important}
body[data-pixel-phase] .pixel-group-frame{
  border:1px solid var(--accent-primary)!important;
  box-shadow:none!important;
}
body[data-pixel-phase] .pixel-group-frame::before,
body[data-pixel-phase] .pixel-group-frame::after{border-color:var(--accent-primary)!important}
body[data-pixel-phase] .pixel-group-label{
  border-color:var(--accent-primary)!important;
  background:rgba(5,20,18,.92)!important;
  box-shadow:none!important;
}
body[data-pixel-phase] .pixel-group-label span{color:#8bc7bd!important}

/* Listas y resumen derecho */
body[data-pixel-phase] .simple-screen-list{gap:8px!important}
body[data-pixel-phase] .simple-screen-card{
  border-color:var(--border-default)!important;
  border-radius:6px!important;
  background:var(--background-control)!important;
  box-shadow:none!important;
}
body[data-pixel-phase] .simple-screen-card.active{
  border-color:var(--accent-primary)!important;
  background:var(--accent-soft)!important;
  box-shadow:inset 3px 0 0 var(--accent-primary)!important;
}
body[data-pixel-phase] .simple-screen-card b{color:var(--text-primary)!important;font-size:11px!important}
body[data-pixel-phase] .simple-screen-card span{color:var(--text-muted)!important;font-size:8px!important}
body[data-pixel-phase] .simple-stage-summary .summary-line{border-color:var(--border-default)!important}

body[data-pixel-phase] .pixel-total-card{
  padding:11px 12px!important;
  border:1px solid var(--border-strong)!important;
  border-radius:6px!important;
  background:var(--background-control)!important;
  background-image:none!important;
  box-shadow:inset 3px 0 0 var(--accent-primary)!important;
}
body[data-pixel-phase] .pixel-total-card span{color:var(--text-secondary)!important}
body[data-pixel-phase] .pixel-total-card strong{color:var(--text-primary)!important}

/* Métricas y materiales */
body[data-pixel-phase] .metrics-row,
body[data-pixel-phase] .bom-total{gap:8px!important}
body[data-pixel-phase] .metric,
body[data-pixel-phase] .bom-total>div,
body[data-pixel-phase] .export-summary>div{
  min-height:72px;
  padding:12px!important;
  border:1px solid var(--border-default)!important;
  border-radius:6px!important;
  background:var(--background-panel)!important;
  background-image:none!important;
  box-shadow:none!important;
}
body[data-pixel-phase] .metric small{color:var(--text-muted)!important}
body[data-pixel-phase] .metric strong{color:var(--text-primary)!important;font-size:20px!important}

body[data-pixel-phase] .bom-grid{background:transparent!important}
body[data-pixel-phase] .bom-table{font-family:Inter,system-ui,sans-serif!important}
body[data-pixel-phase] .bom-table th{
  position:sticky;
  top:0;
  z-index:1;
  height:34px;
  border-color:var(--border-default)!important;
  background:#081116;
  color:var(--text-secondary)!important;
}
body[data-pixel-phase] .bom-table td{
  height:36px;
  padding:8px!important;
  border-color:var(--border-default)!important;
  color:var(--text-primary)!important;
}
body[data-pixel-phase] .bom-table td:nth-child(2),
body[data-pixel-phase] .bom-table td:nth-child(3){text-align:right!important;font-variant-numeric:tabular-nums}

body[data-pixel-phase] .badge,
body[data-pixel-phase] .pill{
  border-color:var(--border-strong)!important;
  border-radius:5px!important;
  background:var(--background-elevated)!important;
  color:var(--text-secondary)!important;
}
body[data-pixel-phase] .badge.blue{color:var(--accent-hover)!important;border-color:#745536!important;background:var(--accent-soft)!important}
body[data-pixel-phase] .badge.amber{color:var(--warning)!important;border-color:#6f5424!important;background:#241c0e!important}

body[data-pixel-phase] .warning-card,
body[data-pixel-phase] .engineering-warning,
body[data-pixel-phase] .notice{
  border-radius:6px!important;
  box-shadow:none!important;
}

/* Scrollbars discretas y comunes */
body[data-pixel-phase] *{scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--background-control)}
body[data-pixel-phase] *::-webkit-scrollbar{width:8px;height:8px}
body[data-pixel-phase] *::-webkit-scrollbar-track{background:var(--background-control)}
body[data-pixel-phase] *::-webkit-scrollbar-thumb{border:2px solid var(--background-control);border-radius:8px;background:var(--border-strong)}

/* Diálogos y exportación */
body[data-pixel-phase] dialog,
body[data-pixel-phase] .technical-dialog{
  border-color:var(--border-default)!important;
  border-radius:8px!important;
  background:var(--background-panel)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.52)!important;
}
body[data-pixel-phase] .export-card,
body[data-pixel-phase] .export-card.featured,
body[data-pixel-phase] .technical-dialog-grid button{
  border-color:var(--border-default)!important;
  border-radius:6px!important;
  background:var(--background-control)!important;
  background-image:none!important;
  box-shadow:none!important;
}
body[data-pixel-phase] .export-card:hover,
body[data-pixel-phase] .technical-dialog-grid button:hover{
  border-color:var(--accent-primary)!important;
  background:var(--background-elevated)!important;
}

@media(min-width:1100px){
  body[data-pixel-phase] .workspace{
    grid-template-columns:304px minmax(0,1fr) 304px!important;
    min-height:calc(100vh - 133px)!important;
  }
  body[data-pixel-phase] .workspace>.config-panel,
  body[data-pixel-phase] .workspace>.screen-manager-panel{
    height:auto!important;
    max-height:calc(100vh - 133px)!important;
    overflow-y:auto!important;
  }
  body[data-pixel-phase] .workspace .screen-stage.mode-pixelmap,
  body[data-pixel-phase="edit"] .workspace .screen-stage.mode-pixelmap{
    min-height:calc(100vh - 135px)!important;
  }
}

@media(max-width:1099px){
  body[data-pixel-phase] #editorView{padding-inline:10px!important}
  body[data-pixel-phase] .workspace{
    grid-template-columns:minmax(250px,34vw) minmax(0,1fr)!important;
    gap:0!important;
  }
  body[data-pixel-phase] .workspace>.screen-manager-panel{
    grid-column:1 / -1!important;
    border-top:1px solid var(--border-default)!important;
  }
}

@media(max-width:790px){
  body[data-pixel-phase] .topbar{height:58px!important;padding-inline:12px!important}
  body[data-pixel-phase] #editorView{padding:0 0 18px!important}
  body[data-pixel-phase] #editorView>.view-heading{top:58px!important;min-height:58px;padding:7px 8px!important}
  body[data-pixel-phase] .pixel-workflow{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:100%!important;
    max-width:none!important;
    gap:4px!important;
    overflow:visible!important;
    scrollbar-width:none!important;
  }
  body[data-pixel-phase] .pixel-workflow::-webkit-scrollbar{display:none}
  body[data-pixel-phase] .pixel-workflow>i{display:none!important}
  body[data-pixel-phase] .pixel-workflow>button{
    min-width:0!important;
    min-height:46px!important;
    padding:4px 2px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    place-items:center!important;
    gap:2px!important;
  }
  body[data-pixel-phase] .pixel-workflow>button>b{width:20px!important;height:20px!important;font-size:8px!important}
  body[data-pixel-phase] .pixel-workflow>button>span{font-size:8px!important;line-height:1.05!important;text-align:center!important;white-space:normal!important}
  body[data-pixel-phase] .pixel-workflow>button small{display:none!important}
  body[data-pixel-phase] .workspace{
    display:flex!important;
    flex-direction:column!important;
    border-width:0 0 1px!important;
    border-radius:0!important;
  }
  body[data-pixel-phase] .workspace>.canvas-column{order:1!important}
  body[data-pixel-phase] .workspace>.config-panel{order:2!important;padding:14px!important}
  body[data-pixel-phase] .workspace>.screen-manager-panel{order:3!important}
  body[data-pixel-phase] .screen-stage.mode-pixelmap{height:calc(100dvh - 116px)!important;min-height:460px!important}
  body[data-pixel-phase] .pixel-toolbar{overflow-x:auto!important;flex-wrap:nowrap!important}
  body[data-pixel-phase] .pixel-tools{flex:0 0 auto!important}
  body[data-pixel-phase] .pixel-tools button,
  body[data-pixel-phase] .pixel-tools select,
  body[data-pixel-phase] .pixel-tools label{min-height:40px!important}
  body[data-pixel-phase] .field input,
  body[data-pixel-phase] .field select,
  body[data-pixel-phase] .field textarea{min-height:42px!important;font-size:12px!important}
  body[data-pixel-phase] .simple-screen-card button{min-width:40px!important;min-height:40px!important}
  body[data-pixel-phase] .screen-stage.mode-wiring{height:auto!important;min-height:0!important;overflow:hidden!important}
  body[data-pixel-phase] .wiring-stage{width:100%!important;min-width:0!important}
  body[data-pixel-phase] .wiring-grid{
    align-self:stretch!important;
    width:calc(100% - 16px)!important;
    min-width:0!important;
    margin:8px!important;
    grid-template-columns:repeat(var(--wire-cols),minmax(0,1fr))!important;
    grid-template-rows:repeat(var(--wire-rows),minmax(44px,1fr))!important;
  }
  body[data-pixel-phase] .wiring-cell{min-width:0!important;padding:2px!important}
  body[data-pixel-phase] .wiring-cell b{font-size:clamp(7px,2.5vw,10px)!important}
  body[data-pixel-phase] .wiring-cell small{font-size:clamp(5px,1.7vw,7px)!important}
  body[data-pixel-phase] .wiring-help{margin-inline:10px!important}
}

@media(orientation:landscape) and (max-height:600px) and (max-width:1000px){
  body[data-pixel-phase] .topbar{height:52px!important}
  body[data-pixel-phase] #editorView{padding:0 0 14px!important}
  body[data-pixel-phase] #editorView>.view-heading{top:52px!important;min-height:52px!important;padding:6px 8px!important}
  body[data-pixel-phase] .pixel-workflow{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:100%!important;
    max-width:none!important;
    overflow:visible!important;
    scrollbar-width:none!important;
  }
  body[data-pixel-phase] .pixel-workflow::-webkit-scrollbar{display:none}
  body[data-pixel-phase] .pixel-workflow>i{display:none!important}
  body[data-pixel-phase] .pixel-workflow>button{min-width:0!important;min-height:39px!important;padding:4px 2px!important;display:grid!important;grid-template-columns:1fr!important;place-items:center!important;gap:1px!important}
  body[data-pixel-phase] .pixel-workflow>button>b{width:18px!important;height:18px!important;font-size:8px!important}
  body[data-pixel-phase] .pixel-workflow>button>span{font-size:8px!important;line-height:1!important;text-align:center!important;white-space:normal!important}
  body[data-pixel-phase] .pixel-workflow>button small{display:none!important}
  body[data-pixel-phase] .workspace{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:0!important;
    border-width:0 0 1px!important;
    border-radius:0!important;
  }
  body[data-pixel-phase] .workspace>.canvas-column{order:1!important;width:100%!important}
  body[data-pixel-phase] .workspace>.config-panel{order:2!important;width:100%!important}
  body[data-pixel-phase] .workspace>.screen-manager-panel{order:3!important;width:100%!important}
  body[data-pixel-phase] .screen-stage.mode-pixelmap{height:calc(100dvh - 104px)!important;min-height:280px!important}
  body[data-pixel-phase] .workspace>.config-panel,
  body[data-pixel-phase] .workspace>.screen-manager-panel{max-height:none!important;overflow:visible!important}
  body[data-pixel-phase] .pixel-toolbar{overflow-x:auto!important;flex-wrap:nowrap!important}
  body[data-pixel-phase] .pixel-tools{flex:0 0 auto!important}
}

/* Edición: el lienzo y sus controles se mantienen juntos al recorrer los paneles. */
body[data-pixel-phase="edit"] #editorView{
  --edit-topbar:66px;
  --edit-phases:66px;
  --edit-offset:calc(var(--edit-topbar) + var(--edit-phases));
  --edit-preview:max(180px,calc(100dvh - var(--edit-offset) - 18px));
}
body[data-pixel-phase="edit"] #editorView>.view-heading{
  position:sticky;
  top:var(--edit-topbar)!important;
  height:var(--edit-phases);
  min-height:var(--edit-phases)!important;
  z-index:8;
}
body[data-pixel-phase="edit"] #editorView .workspace:has(.mode-pixelmap){
  overflow:visible!important;
  min-height:0!important;
}
body[data-pixel-phase="edit"] #editorView .workspace:has(.mode-pixelmap)>.canvas-column{
  position:sticky;
  top:var(--edit-offset);
  align-self:start;
  width:100%;
  z-index:3;
}
body[data-pixel-phase="edit"] #editorView .canvas-card:has(.mode-pixelmap){
  padding:0!important;
  overflow:hidden;
}
body[data-pixel-phase="edit"] #editorView .canvas-card:has(.mode-pixelmap)>:is(.card-head,.stage-footer){
  display:none!important;
}
body[data-pixel-phase="edit"] #editorView .screen-stage.mode-pixelmap{
  height:var(--edit-preview)!important;
  min-height:0!important;
}
body[data-pixel-phase="edit"] #editorView .editor-toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  padding:6px!important;
  overflow:visible!important;
}
.editor-toolbar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  min-width:0;
}
body[data-pixel-phase="edit"] #editorView .editor-toolbar .pixel-tools{
  display:flex!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  max-width:100%;
  padding:3px!important;
  gap:3px;
}
body[data-pixel-phase="edit"] #editorView .editor-toolbar .editor-compact-tools{display:none!important}
body[data-pixel-phase="edit"] #editorView .editor-toolbar button{
  font-size:11px!important;
  padding-inline:6px!important;
  white-space:nowrap;
}
body[data-pixel-phase="edit"] #editorView .editor-toolbar button:disabled{
  opacity:.45;
  cursor:default;
}
.editor-selection-status{
  display:flex;
  align-items:center;
  flex:1 1 160px;
  gap:8px;
  min-width:0;
  padding:3px 5px;
  color:var(--text-secondary);
  font-size:11px;
}
.editor-selection-status strong{white-space:nowrap;color:var(--accent-primary)}
.editor-selection-status span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-pixel-phase="edit"] #editorView .pixel-workspace{padding:12px}
body[data-pixel-phase="edit"] #editorView .pixel-canvas{min-width:0;min-height:0}
@media(max-width:790px){
  body[data-pixel-phase="edit"] #editorView{
    --edit-topbar:58px;
    --edit-phases:64px;
    --edit-preview:clamp(218px,44dvh,365px);
  }
  body[data-pixel-phase="edit"] #editorView .editor-toolbar button{min-height:34px!important}
  .editor-selection-status{flex-basis:100%}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1000px){
  body[data-pixel-phase="edit"] #editorView{--edit-topbar:52px;--edit-phases:52px}
}
@media(orientation:landscape) and (max-height:600px) and (560px <= width <= 1000px){
  body[data-pixel-phase="edit"] #editorView{--edit-preview:max(150px,calc(100dvh - var(--edit-offset) - 8px))}
  body[data-pixel-phase="edit"] #editorView .workspace:has(.mode-pixelmap){
    display:grid!important;
    grid-template-columns:minmax(185px,32%) minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
  }
  body[data-pixel-phase="edit"] #editorView .workspace>.config-panel{
    grid-column:1!important;grid-row:1!important;
    max-height:var(--edit-preview)!important;overflow-y:auto!important;
  }
  body[data-pixel-phase="edit"] #editorView .workspace>.canvas-column{grid-column:2!important;grid-row:1!important}
  body[data-pixel-phase="edit"] #editorView .workspace>.screen-manager-panel{grid-column:1 / -1!important;grid-row:2!important}
}

body:is([data-pixel-phase="create"],[data-pixel-phase="edit"]) #editorView .workspace:has(.mode-pixelmap) #editorScreensPanel .compact-position-section{display:block!important}

/* En horizontal bajo, reservar la altura para el lienzo y abrir los paneles a demanda. */
@media(orientation:landscape) and (max-height:460px) and (width < 1100px){
  body[data-pixel-phase="edit"]:has(#editorView:not([hidden]) .mode-pixelmap) .topbar{
    height:36px!important;
    min-height:36px!important;
    padding-inline:8px!important;
  }
  body[data-pixel-phase="edit"] .topbar .lampon-top-mark{width:24px!important;height:24px!important;font-size:12px!important}
  body[data-pixel-phase="edit"] .topbar .lampon-top-brand small{display:none}
  body[data-pixel-phase="edit"] .topbar .project-title{font-size:12px!important}
  body[data-pixel-phase="edit"] .topbar .top-actions .button{min-height:28px!important;padding:3px 7px!important;font-size:10px!important}
  body[data-pixel-phase="edit"] #editorView{
    --edit-topbar:36px;
    --edit-phases:34px;
    --edit-preview:max(120px,calc(100dvh - var(--edit-offset) - 2px));
    padding:0!important;
  }
  body[data-pixel-phase="edit"] #editorView>.view-heading{padding:2px 5px!important}
  body[data-pixel-phase="edit"] #editorView .pixel-workflow{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%!important;
    max-width:none!important;
    gap:4px!important;
  }
  body[data-pixel-phase="edit"] #editorView .pixel-workflow>i,
  body[data-pixel-phase="edit"] #editorView .pixel-workflow>button>small{display:none!important}
  body[data-pixel-phase="edit"] #editorView .pixel-workflow>button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:28px!important;
    padding:2px 3px!important;
    gap:4px!important;
  }
  body[data-pixel-phase="edit"] #editorView .pixel-workflow>button>b{width:16px!important;height:16px!important;font-size:8px!important}
  body[data-pixel-phase="edit"] #editorView .pixel-workflow>button>span{font-size:9px!important;line-height:1.1!important}
  body[data-pixel-phase="edit"] #editorView .workspace:has(.mode-pixelmap){
    display:block!important;
    position:relative;
    border-width:0!important;
    border-radius:0!important;
  }
  body[data-pixel-phase="edit"] #editorView .workspace:has(.mode-pixelmap)>:is(.config-panel,.screen-manager-panel){
    display:none!important;
    position:absolute!important;
    inset:var(--edit-toolbar-size,70px) 0 0 auto!important;
    width:min(310px,48vw)!important;
    min-width:0!important;
    max-height:none!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    z-index:5;
    box-shadow:-8px 0 20px #0008!important;
  }
  body[data-pixel-phase="edit"] #editorView .workspace:has(.mode-pixelmap)[data-compact-panel="settings"]>#editorSettingsPanel,
  body[data-pixel-phase="edit"] #editorView .workspace:has(.mode-pixelmap)[data-compact-panel="screens"]>#editorScreensPanel{display:block!important}
  body[data-pixel-phase="edit"] #editorView .editor-toolbar{gap:2px;padding:3px 5px!important}
  body[data-pixel-phase="edit"] #editorView .editor-toolbar-row{
    flex-wrap:nowrap;
    gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  body[data-pixel-phase="edit"] #editorView .editor-toolbar .pixel-tools{padding:0!important;border:0!important;gap:3px}
  body[data-pixel-phase="edit"] #editorView .editor-toolbar .editor-compact-tools{display:flex!important;margin-left:auto}
  body[data-pixel-phase="edit"] #editorView .editor-toolbar button{min-height:28px!important;padding:2px 6px!important;font-size:10px!important}
  body[data-pixel-phase="edit"] #editorView .editor-toolbar button[aria-expanded="true"]{
    border-color:var(--accent-primary)!important;
    color:var(--accent-primary)!important;
  }
  body[data-pixel-phase="edit"] #editorView .editor-selection-status{flex:1 0 100px;gap:5px;padding:0 3px;font-size:10px}
  body[data-pixel-phase="edit"] #editorView .pixel-workspace{padding:5px}
  body[data-pixel-phase="edit"]:has(#editorView:not([hidden]) .mode-pixelmap) .technical-fab{display:none!important}
}

/* Herramientas creativas: pruebas, logos, etiquetas y formas */
.controller-allocation{margin:10px 0 16px;display:grid;gap:8px;font-size:10px}
.bom-grid>.allocation-summary{margin-bottom:12px}
#autoHorizontalPower{grid-column:1 / -1;width:100%;white-space:normal}
.wiring-mode-switch{flex-wrap:wrap}
@media(max-width:790px){.wiring-mode-switch:has([data-wire-horizontal]){grid-template-columns:1fr 1fr}.wiring-mode-switch [data-wire-horizontal]{grid-column:1 / -1;border:1px solid var(--border-default);background:var(--background-control)}}
.allocation-summary{display:grid;gap:6px;padding:10px;border:1px solid var(--border-default);border-radius:7px;background:var(--background-control)}
.allocation-summary b{color:var(--accent-primary);font-size:11px}
.allocation-summary span,.allocation-unit p{color:var(--text-secondary);line-height:1.5;font-size:9px}
.allocation-unit{border:1px solid var(--border-default);border-radius:7px;padding:10px;background:var(--background-control)}
.allocation-unit summary{cursor:pointer;font-weight:700;color:var(--text-primary);line-height:1.4}
.allocation-unit p{margin:7px 0}
.allocation-unit ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.allocation-unit li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:6px;padding-top:6px;border-top:1px solid var(--border-default)}
.allocation-unit li>b{color:var(--accent-primary)}
.allocation-unit li span{min-width:0;overflow-wrap:anywhere}
.allocation-unit li small{display:block;color:var(--text-muted);margin-top:3px}
.allocation-unit li{grid-template-columns:46px minmax(0,1fr)}
.allocation-unit li>b small{color:#e6a452;white-space:nowrap}
.backup-pairs{margin:0 12px 12px;padding:12px;border:1px solid var(--border-default);border-radius:8px;background:var(--background-control)}
.backup-pairs h3{margin:0 0 8px;color:var(--text-primary);font-size:12px}
.backup-pairs ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.backup-pairs li{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);gap:8px;padding:8px;border-left:2px solid var(--pair-color);background:var(--background-panel);font-size:10px}
.backup-pairs li>b{color:var(--pair-color)}
.backup-pairs li span:last-child strong{color:#e6a452}
.backup-pairs small{display:block;margin-top:3px;color:var(--text-secondary)}
body[data-pixel-phase] .editor-help{margin:7px 0 0;color:var(--text-muted);font-size:8px;line-height:1.4}
body[data-pixel-phase] .annotation-fields{display:grid;grid-template-columns:minmax(110px,1fr) repeat(2,58px);gap:6px;margin-bottom:7px}
body[data-pixel-phase] .annotation-fields>input[type="text"],body[data-pixel-phase] .annotation-fields>select{min-width:0;height:32px;border:1px solid var(--border-default);border-radius:6px;background:var(--background-control);color:var(--text-primary);padding:0 8px;font-size:9px}
body[data-pixel-phase] .annotation-fields>label{display:flex;align-items:center;gap:5px;min-width:0;height:32px;padding:4px;border:1px solid var(--border-default);border-radius:6px;background:var(--background-control)}
body[data-pixel-phase] .annotation-fields>label input{width:25px;height:22px;padding:0;border:0;background:none}
body[data-pixel-phase] .annotation-fields>label small{color:var(--text-secondary);font-size:8px}
body[data-pixel-phase] .file-chip{position:relative;overflow:hidden;cursor:pointer}
body[data-pixel-phase] .file-chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
body[data-pixel-phase] .file-chip span{max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-pixel-phase] .pixel-screen-logo,body[data-pixel-phase] .pixel-test-overlay{position:absolute;inset:0;pointer-events:none}
body[data-pixel-phase] .pixel-screen-logo{z-index:3;opacity:var(--logo-opacity,.75)}
body[data-pixel-phase] .pixel-screen-logo.logo-center{display:grid;place-items:center;padding:15%}
body[data-pixel-phase] .pixel-screen-logo.logo-center img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 8px #0009)}
body[data-pixel-phase] .pixel-screen-logo.logo-tile{background-image:var(--logo-image);background-repeat:repeat;background-position:center;background-size:33.333% 50%}
body[data-pixel-phase] .pixel-screen-logo.logo-modules{background-image:var(--logo-image);background-repeat:repeat;background-position:center;background-size:var(--grid-x) var(--grid-y)}
body[data-pixel-phase] .pixel-test-overlay{z-index:4;overflow:hidden;mix-blend-mode:screen}
body[data-pixel-phase] .pixel-test-overlay[data-test="sweep"]{background:linear-gradient(90deg,transparent 0 42%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.92) 50%,transparent 53% 100%);background-size:220% 100%;animation:lampon-sweep 2.8s linear infinite}
body[data-pixel-phase] .pixel-test-overlay[data-test="rings"]{background:repeating-radial-gradient(circle at center,transparent 0 9%,rgba(255,255,255,.72) 9.5% 10%,transparent 10.5% 18%);animation:lampon-rings 2.4s ease-in-out infinite}
body[data-pixel-phase] .pixel-test-overlay[data-test="crosshair"]{background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.9) 50%,transparent calc(50% + 1px)),linear-gradient(transparent calc(50% - 1px),rgba(255,255,255,.9) 50%,transparent calc(50% + 1px)),radial-gradient(circle at center,transparent 0 24%,rgba(255,255,255,.7) 24.3% 24.8%,transparent 25.1%)}
body[data-pixel-phase] .pixel-test-overlay[data-test="radar"]{background:repeating-radial-gradient(circle at center,transparent 0 15%,rgba(255,255,255,.42) 15.3% 15.8%,transparent 16.2% 28%),conic-gradient(from 0deg,transparent 0 78%,rgba(255,255,255,.88) 82%,transparent 86% 100%);animation:lampon-radar 3s linear infinite}
@keyframes lampon-sweep{to{background-position:-120% 0}}
@keyframes lampon-rings{0%,100%{transform:scale(.78);opacity:.35}50%{transform:scale(1.2);opacity:1}}
@keyframes lampon-radar{to{transform:rotate(360deg)}}
body[data-pixel-phase] .pixel-annotation-lines{position:absolute;inset:0;z-index:12;width:100%;height:100%;overflow:visible;pointer-events:none}
body[data-pixel-phase] .pixel-annotation-lines .pixel-annotation{pointer-events:stroke;cursor:move}
body[data-pixel-phase] .pixel-annotation-lines .annotation-hit{pointer-events:stroke}
body[data-pixel-phase] .pixel-annotation-lines .selected .annotation-stroke{filter:drop-shadow(0 0 5px var(--accent-hover))}
body[data-pixel-phase] .pixel-annotation{touch-action:none;user-select:none}
body[data-pixel-phase] .annotation-label,body[data-pixel-phase] .annotation-circle{position:absolute;z-index:13;cursor:move}
body[data-pixel-phase] .annotation-label{display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);padding:6px 12px;border:var(--annotation-width,3px) solid var(--annotation-color);background:color-mix(in srgb,var(--annotation-bg) 90%,transparent);color:var(--annotation-color);font:700 11px/1.1 "Space Grotesk",Inter,sans-serif;letter-spacing:.05em;white-space:nowrap;box-shadow:0 5px 18px #0008}
body[data-pixel-phase] .annotation-label.shape-rounded{border-radius:9px}
body[data-pixel-phase] .annotation-label.shape-pill{border-radius:999px}
body[data-pixel-phase] .annotation-circle{border:var(--annotation-width,3px) var(--annotation-dash,solid) var(--annotation-color);border-radius:50%;background:color-mix(in srgb,var(--annotation-bg) 12%,transparent)}
body[data-pixel-phase] .pixel-annotation.selected{filter:drop-shadow(0 0 5px var(--accent-hover));outline:2px dashed var(--accent-hover);outline-offset:4px}
body[data-pixel-phase] .pixel-lock{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;border-radius:5px!important;background:#071014e8!important;color:var(--accent-hover)!important;font-size:12px!important}
@media(max-width:700px){body[data-pixel-phase] .annotation-fields{grid-template-columns:minmax(140px,1fr) repeat(2,64px)}}

/* Rótulo principal legible y edición directa */
body[data-pixel-phase] .pixel-label-card{
  max-width:96%;
  gap:4px;
  padding:10px 17px;
  border-width:1.5px;
  border-radius:9px;
  box-shadow:0 7px 22px #000a;
}
body[data-pixel-phase] .pixel-label .pixel-label-card>b{
  font-size:clamp(10px,1.45vw,18px)!important;
  font-weight:800!important;
  letter-spacing:.01em;
}
body[data-pixel-phase] .pixel-label .pixel-label-card>span{
  display:block!important;
  font-size:clamp(8px,.95vw,12px)!important;
  font-weight:700!important;
}
body[data-pixel-phase] .annotation-fields.shape-only{
  grid-template-columns:repeat(2,minmax(76px,1fr));
}
body[data-pixel-phase] .annotation-fields.shape-only>select{height:34px}
@media(max-width:790px){
  body[data-pixel-phase] .pixel-label-card{gap:2px;padding:6px 9px}
  body[data-pixel-phase] .pixel-label .pixel-label-card>b{font-size:clamp(8px,2.8vw,13px)!important}
  body[data-pixel-phase] .pixel-label .pixel-label-card>span{font-size:clamp(6px,1.9vw,9px)!important}
  body[data-pixel-phase] .annotation-fields.shape-only{grid-template-columns:repeat(2,minmax(90px,1fr))}
}