/*
 * Modumaker editor layout hotfix
 * Desktop structure: icon rail | compact library flyout | canvas | properties
 * This file is intentionally loaded AFTER the compiled bundle so layout rules
 * cannot be overridden by the previous Aura skin.
 */

/* Keep the four real editor columns on a single row. */
.main-layout {
  display: grid !important;
  grid-template-columns: 56px clamp(190px, 13vw, 230px) minmax(0, 1fr) clamp(270px, 18vw, 300px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Explicit placement prevents the fourth panel from wrapping below the canvas. */
.main-layout > .icon-rail {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.main-layout > .flyout-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.main-layout > .viewport-wrap {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.main-layout > .right-panel {
  grid-column: 4 !important;
  grid-row: 1 !important;
  display: block !important;
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-left: 1px solid #24252a !important;
}

/* Collapsing the left library should give all of that space back to the canvas. */
.main-layout.flyout-collapsed {
  grid-template-columns: 56px 0 minmax(0, 1fr) clamp(270px, 18vw, 300px) !important;
}

.main-layout.flyout-collapsed > .flyout-panel {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right-width: 0 !important;
  overflow: hidden !important;
}

/* Left library: compact and independently scrollable. */
.flyout-header,
.catalog-header {
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 11px !important;
}

.flyout-scroll,
.sidebar-scroll {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 9px !important;
}

.catalog-section,
.catalog-section-body,
.catalog-list,
.module-card,
.asset-grid,
.asset-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

.module-card {
  width: 100% !important;
}

/* Properties stay on the RIGHT and scroll inside their own column. */
.right-panel > .right-tabs {
  height: 40px !important;
  min-height: 40px !important;
}

.right-panel > .inspector-scroll,
.right-panel .inspector-scroll {
  height: calc(100% - 40px) !important;
  max-height: calc(100% - 40px) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 11px !important;
}

/* The canvas/3D viewport is the flexible, dominant area. */
.viewport-wrap,
.view-layer,
#scene3d,
#planView {
  min-width: 0 !important;
  min-height: 0 !important;
}

.view-layer {
  overflow: hidden !important;
}

#planView .plan-scroll,
#planView .plan-pro-scroll {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Slightly denser side content to preserve working space. */
.flyout-panel h3,
.right-panel h3 {
  margin-top: 9px !important;
  margin-bottom: 7px !important;
}

/* Medium desktop / small laptop: keep both panels, but make them narrower. */
@media (max-width: 1360px) {
  .main-layout {
    grid-template-columns: 52px 200px minmax(0, 1fr) 270px !important;
  }
  .main-layout.flyout-collapsed {
    grid-template-columns: 52px 0 minmax(0, 1fr) 270px !important;
  }
  .rail-btn { width: 40px !important; height: 40px !important; }
}

@media (max-width: 1100px) {
  .main-layout {
    grid-template-columns: 50px 180px minmax(0, 1fr) 245px !important;
  }
  .main-layout.flyout-collapsed {
    grid-template-columns: 50px 0 minmax(0, 1fr) 245px !important;
  }
  .flyout-scroll,
  .sidebar-scroll,
  .right-panel .inspector-scroll { padding: 8px !important; }
}

/* Very narrow screens: prioritize canvas + properties; library remains available via rail/collapse. */
@media (max-width: 880px) {
  .main-layout {
    grid-template-columns: 48px 0 minmax(0, 1fr) 230px !important;
  }
  .main-layout > .flyout-panel {
    width: 0 !important;
    border-right-width: 0 !important;
    overflow: hidden !important;
  }
  .main-layout > .right-panel { display: block !important; }
}

/* v4 — editor interaction polish */
.viewport-actions button.active,
.viewport-actions button.active:hover {
  background: #f2f3f4 !important;
  border-color: #f2f3f4 !important;
  color: #111317 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.24) !important;
}
.viewport-actions button.active svg { stroke: currentColor !important; }

/* El borde discontinuo marca exactamente el límite utilizable del plano. */
.plot-boundary {
  fill: rgba(79,141,253,.018) !important;
  stroke: #78808c !important;
  stroke-width: 1.35px !important;
  stroke-dasharray: 8 7 !important;
  vector-effect: non-scaling-stroke;
}

.modules-preset-title { margin-top: 18px !important; }

/* Ya no existe la tarjeta superior de presupuesto: evita reservar espacio fantasma. */
.topbar .total-chip { display:none !important; }

/* Electrical plan symbols - architectural style */
.ico.electricity-rail-icon svg{width:20px;height:20px;display:block;color:currentColor}
.opening-symbol.electrical{cursor:pointer;pointer-events:auto}
.opening-symbol.electrical .electrical-body{fill:#fff;stroke:#2494d1;stroke-width:1.65;vector-effect:non-scaling-stroke}
.opening-symbol.electrical .electrical-lead,
.opening-symbol.electrical .electrical-detail{fill:none;stroke:#2494d1;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.opening-symbol.electrical .electrical-switch-dot{fill:#fff;stroke:#2494d1;stroke-width:1.4;vector-effect:non-scaling-stroke}
.opening-symbol.electrical.selected-wallobject .electrical-body,
.opening-symbol.electrical.selected-wallobject .electrical-switch-dot{fill:#eaf7ff;stroke:#0879bd}
.opening-symbol.electrical.selected-wallobject .electrical-lead,
.opening-symbol.electrical.selected-wallobject .electrical-detail{stroke:#0879bd}
.opening-symbol.electrical .wallobject-hit{pointer-events:all}

/* ==========================================================
   Electricidad v2 · luz de techo en plano
   ========================================================== */
.opening-symbol.ceiling-light {
  cursor: pointer;
  pointer-events: auto;
}
.opening-symbol.ceiling-light .ceiling-light-body {
  fill: rgba(250, 204, 21, .34);
  stroke: #eab308;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.opening-symbol.ceiling-light .ceiling-light-cross {
  stroke: #ca8a04;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.opening-symbol.ceiling-light.selected-wallobject .ceiling-light-body {
  fill: rgba(250, 204, 21, .52);
  stroke: #facc15;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, .45));
}
.architectural-ghost .opening-symbol.ceiling-light .ceiling-light-body {
  fill: rgba(250, 204, 21, .45);
}

/* === Estructura: herramientas de muro y pilar === */
.structure-tools{display:grid;gap:9px;padding:2px 0}.structure-card{width:100%;min-height:82px;display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:center;text-align:left;padding:12px;border:1px solid #2b2d32;border-radius:10px;background:#17181b;color:#e8e9ec;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}.structure-card:hover{background:#202126;border-color:#41444c;transform:translateY(-1px)}.structure-card strong{display:block;font-size:12px;margin-bottom:5px;color:#f3f4f6}.structure-card small{display:block;font-size:10px;line-height:1.4;color:#9da2ab}.structure-symbol{width:46px;height:46px;border:1px solid #363940;border-radius:8px;background:#111215;display:grid;place-items:center;position:relative}.wall-symbol:before{content:"";width:32px;height:6px;background:#d9dde3;border:1px solid #737985;border-radius:1px;box-shadow:0 8px 0 -2px #545a65}.wall-symbol:after{content:"";position:absolute;width:2px;height:30px;background:#69717e;transform:rotate(90deg);opacity:.35}.pillar-symbol:before{content:"";width:20px;height:20px;background:#d9dde3;border:2px solid #6d7480;box-shadow:inset 0 0 0 4px #b7bdc6;border-radius:2px}.structure-rail-icon svg{width:20px;height:20px}.plan-pillar .pillar-body{fill:#59616c;stroke:#252a31;stroke-width:2}.plan-pillar.selected .pillar-body{fill:#4e7fae;stroke:#1d5f9e}.pillar-placement-ghost rect{fill:rgba(58,173,111,.18);stroke:#37a86d;stroke-width:2;stroke-dasharray:6 4}.pillar-placement-ghost.invalid rect{fill:rgba(211,74,74,.15);stroke:#d34a4a}.pillar-placement-ghost.valid rect{fill:rgba(58,173,111,.18);stroke:#37a86d}

/* ==========================================================
   v5 · Legibilidad del inspector + estructura arquitectónica
   ========================================================== */
.right-panel,
.right-panel .inspector-scroll { color:#eef1f5 !important; }
.right-panel label,
.right-panel .selection-title small,
.right-panel .inspector-tip,
.right-panel .muted,
.right-panel small,
.right-panel .mini-budget span,
.right-panel .budget-row-text small {
  color:#cfd5de !important;
}
.right-panel h3,
.right-panel .selection-title span,
.right-panel strong { color:#f7f8fa !important; }
.right-panel input,
.right-panel select,
.right-panel textarea { color:#f3f5f8 !important; }
.right-panel input:disabled { color:#bfc6d0 !important; opacity:.9 !important; }

/* Muro interior: banda limpia de plano técnico, sin acabado cartoon. */
.plan-interior-wall:not(.plan-pillar) .wall-outline {
  stroke:#252b33 !important;
  stroke-linecap:butt !important;
  vector-effect:non-scaling-stroke;
}
.plan-interior-wall:not(.plan-pillar) .wall-line {
  stroke:#d7dce3 !important;
  stroke-linecap:butt !important;
  vector-effect:non-scaling-stroke;
}
.plan-interior-wall:not(.plan-pillar).selected .wall-outline { stroke:#1c5b91 !important; }
.plan-interior-wall:not(.plan-pillar).selected .wall-line { stroke:#8eb9df !important; }

/* Pilar: símbolo estructural cuadrado con aspa/hachurado técnico. */
.plan-pillar .pillar-body {
  fill:#d8dde4 !important;
  stroke:#252b33 !important;
  stroke-width:1.6px !important;
  rx:0 !important;
  vector-effect:non-scaling-stroke;
}
.plan-pillar .pillar-hatch {
  stroke:#68717d !important;
  stroke-width:1px !important;
  opacity:.8;
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}
.plan-pillar.selected .pillar-body {
  fill:#a9c9e5 !important;
  stroke:#1d5f9e !important;
}
.plan-pillar.selected .pillar-hatch { stroke:#1d5f9e !important; }

/* Tirador de rotación para luminarias de techo. */
.opening-symbol.ceiling-light .ceiling-rotate { pointer-events:all; cursor:grab; }
.opening-symbol.ceiling-light .ceiling-rotate:active { cursor:grabbing; }