/* ================================================================
   PLANOS — Editor de planos 2D
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Layout — constantes */
  --sidebar-w:   200px;
  --topbar-h:     48px;
  --statusbar-h:  28px;
  --tool-size:    38px;
  /* Colores fijos */
  --accent:      #4f8ef7;
  --accent-dark: #3a72d4;
  --danger:      #e05252;
  /* ── Tema claro (por defecto) ── */
  --sidebar-bg:  #f0f2f8;
  --sidebar-txt: #2a2d3e;
  --sidebar-hov: #e4e7f5;
  --sidebar-act: #d6dcf5;
  --sidebar-sep: #dde0e8;
  --canvas-bg:   #ffffff;
  --topbar-bg:   #ffffff;
  --border:      #dde0e8;
  --text:        #2a2d3e;
  --text-muted:  #7a7e96;
  --surface:     #ffffff;
  --surface2:    #f5f6fa;
  --accent-bg:   #f0f4ff;
  --danger-bg:   #fee7e7;
}

/* ── Tema oscuro ── */
[data-theme="dark"] {
  --sidebar-bg:  #1e2332;
  --sidebar-txt: #c8cce0;
  --sidebar-hov: #272d42;
  --sidebar-act: #3a4268;
  --sidebar-sep: #2e3450;
  --canvas-bg:   #ffffff;
  --topbar-bg:   #13161f;
  --border:      #2e3450;
  --text:        #c8cce0;
  --text-muted:  #5a6080;
  --surface:     #232838;
  --surface2:    #1e2332;
  --accent-bg:   #1a2545;
  --danger-bg:   rgba(224,82,82,.15);
}

html, body { height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }

/* ── Layout ────────────────────────────────────── */
#app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h);
  height: 100vh;
}

/* ── Topbar ────────────────────────────────────── */
#topbar {
  grid-column: 1 / -1;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  z-index: 300;
  overflow: visible;
}

#topbar .brand {
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent);
  margin-right: 8px;
  letter-spacing: -.3px;
}

#topbar .sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.topbar-spacer { flex: 1; }

/* ── Menú desplegable ────────────────────────────── */
.menu-bar {
  display: flex; align-items: stretch;
  margin-right: 8px;
}
.menu-item {
  position: relative;
  display: flex; align-items: center; gap: 3px;
  padding: 0 12px; height: 100%;
  font-size: .8rem; font-weight: 500; color: var(--text);
  cursor: pointer; user-select: none;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.menu-item:first-child { border-left: 1px solid var(--border); }
.menu-item:hover,
.menu-item.open { background: var(--accent-bg); color: var(--accent); }

.menu-dropdown {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 200px;
  background: var(--surface); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 500;
  padding: 4px 0;
}
.menu-item.open .menu-dropdown { display: block; }

.menu-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px; font-size: .8rem; color: var(--text);
  cursor: pointer; gap: 20px;
}
.menu-opt:hover { background: var(--accent-bg); color: var(--accent); }
.menu-opt.menu-danger { color: var(--danger); }
.menu-opt.menu-danger:hover { background: var(--danger-bg); }
.menu-opt kbd {
  font-size: .7rem; color: var(--text-muted); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;
  font-family: inherit; white-space: nowrap; pointer-events: none;
}
.menu-opt.menu-check .menu-check-mark {
  width: 14px; text-align: center; font-size: .75rem;
  color: var(--accent); margin-right: 2px; flex-shrink: 0;
}
.menu-opt.menu-check.off .menu-check-mark { visibility: hidden; }
.menu-sep { height: 1px; background: var(--border); margin: 3px 0; }
.menu-has-sub { justify-content: space-between; }
.menu-sub-arrow { font-size: .65rem; color: var(--text-muted); }
.plans-submenu { background: var(--surface2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); max-height: 180px; overflow-y: auto; }
.plans-submenu .menu-opt { padding: 5px 20px; font-size: .78rem; }
.plans-submenu-empty { padding: 6px 20px; font-size: .75rem; color: var(--text-muted); font-style: italic; }

.tbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: background .12s;
  white-space: nowrap;
}
.tbtn:hover { background: var(--accent-bg); border-color: var(--accent); }
.tbtn.primary { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.tbtn.primary:hover { background: var(--accent-dark); }
.tbtn.danger  { background: var(--danger); color: #fff; border-color: #c44; }
.tbtn svg     { width: 14px; height: 14px; }

#plan-name-input {
  border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 8px; font-size: .8rem; color: var(--text);
  background: var(--surface); width: 180px; outline: none;
}
#plan-name-input:focus { border-color: var(--accent); }

#plan-select {
  border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 6px; font-size: .8rem; color: var(--text);
  background: var(--surface); cursor: pointer; max-width: 180px;
}

.zoom-ctrl { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.zoom-ctrl span { font-size: .75rem; color: var(--text-muted); min-width: 38px; text-align: center; }
.zoom-btn {
  width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--text); transition: background .1s;
}
.zoom-btn:hover { background: var(--accent-bg); }

/* ── Sidebar ───────────────────────────────────── */
#sidebar {
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  user-select: none;
}

.sidebar-section { padding: 8px 0; border-bottom: 1px solid var(--sidebar-sep); }
.sidebar-section-title {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  color: var(--text-muted); text-transform: uppercase;
  padding: 4px 12px 6px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Tools */
.tools-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; padding: 4px 8px;
}

.tool-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px; border-radius: 6px; border: 1.5px solid transparent;
  cursor: pointer; color: var(--sidebar-txt); font-size: .68rem;
  transition: background .1s, border-color .1s;
  background: transparent;
}
.tool-btn:hover { background: var(--sidebar-hov); }
.tool-btn.active {
  background: var(--sidebar-act);
  border-color: var(--accent);
  color: #fff;
}
.tool-btn svg { width: 18px; height: 18px; }
.tool-btn .kbd {
  font-size: .58rem; background: rgba(255,255,255,.1);
  padding: 0 3px; border-radius: 3px; color: var(--text-muted);
}

/* ── Pop-out buttons ─────────────────────────────── */
.section-popout-btn {
  background: none; border: none; cursor: pointer;
  font-size: .75rem; color: var(--text-muted); padding: 0 2px;
  line-height: 1; opacity: 0; transition: opacity .15s;
}
.sidebar-section-title:hover .section-popout-btn { opacity: 1; }
.section-popout-btn:hover { color: var(--accent); }

/* ── Floating panels ─────────────────────────────── */
.floating-panel {
  position: fixed; z-index: 400;
  background: var(--sidebar-bg); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.18);
  min-width: 160px; min-height: 60px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.floating-panel-header {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 8px;
  background: var(--topbar-bg); border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; flex-shrink: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.floating-panel-header .fp-title { flex: 1; }
.float-dock-btn {
  background: none; border: none; cursor: pointer;
  font-size: .75rem; color: var(--text-muted); padding: 0 3px;
}
.float-dock-btn:hover { color: var(--accent); }
.floating-panel-body { overflow-y: auto; flex: 1; }
/* placeholder where a section was before popping out */
.section-placeholder {
  padding: 6px 12px; font-size: .7rem; color: var(--text-muted);
  font-style: italic; border-bottom: 1px solid var(--sidebar-sep);
}

/* Objects select */
#objects-select {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 4px; font-size: .75rem; color: var(--text);
  background: var(--surface); cursor: pointer;
}

/* Layer toggles */
#layers-panel { padding: 4px 8px; display: flex; flex-direction: column; gap: 3px; }
.layer-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 5px; border: 1px solid transparent;
  background: transparent; cursor: pointer; color: var(--sidebar-txt);
  font-size: .75rem; text-align: left; transition: background .1s;
}
.layer-btn:hover { background: var(--sidebar-hov); }
.layer-btn .layer-eye { font-size: .9rem; line-height: 1; transition: opacity .15s; }
.layer-btn.off { color: var(--text-muted); }
.layer-btn.off .layer-eye { opacity: .25; }

/* Item catalog */
.catalog-group { padding: 2px 0; }
.catalog-group-title {
  font-size: .68rem; font-weight: 600; color: #8890b0;
  padding: 6px 12px 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.catalog-group-title:hover { color: var(--sidebar-txt); }
.catalog-group-title .arrow { transition: transform .15s; }
.catalog-group-title.collapsed .arrow { transform: rotate(-90deg); }

.catalog-items { display: flex; flex-direction: column; gap: 1px; }
.catalog-items.hidden { display: none; }

.item-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer;
  color: var(--sidebar-txt); font-size: .75rem;
  border-radius: 0; transition: background .1s;
  border: none; background: transparent; text-align: left; width: 100%;
}
.item-btn:hover { background: var(--sidebar-hov); }
.item-btn.active { background: var(--sidebar-act); color: #fff; }
.item-btn .item-icon {
  width: 28px; height: 20px; flex-shrink: 0;
  border-radius: 3px; overflow: hidden;
}
.item-btn .item-dims { font-size: .62rem; color: #6870a0; margin-left: auto; white-space: nowrap; }

/* ── Canvas ────────────────────────────────────── */
#canvas-wrap {
  background: var(--canvas-bg);
  overflow: hidden;
  position: relative;
  cursor: crosshair;
}
#canvas-wrap.tool-select    { cursor: default; }
#canvas-wrap.tool-wall      { cursor: crosshair; }
#canvas-wrap.tool-erase     { cursor: cell; }
#canvas-wrap.tool-ruler     { cursor: crosshair; }
#canvas-wrap.panning        { cursor: grabbing; }
#canvas-wrap.placing        { cursor: copy; }
#canvas-wrap.tool-wall-drag { cursor: default; }

/* ── Status bar ────────────────────────────────── */
#statusbar {
  grid-column: 1 / -1;
  background: var(--topbar-bg); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 12px; font-size: .72rem; color: var(--text-muted);
}
#statusbar .status-item { display: flex; align-items: center; gap: 4px; }
/* Stable coordinate width prevents cursor movement from shifting the status bar. */
#statusbar #status-coords,
#statusbar #status-sel,
#statusbar #origin-pos {
  font-family: ui-monospace, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}
#statusbar .status-item:first-child { flex: 0 0 auto; }
#statusbar #status-coords {
  display: block;
  width: 38ch;
  white-space: pre;
}
#statusbar .status-item strong { color: var(--text); }
#statusbar #status-hint { font-style: italic; }
#statusbar #step-select {
  background: var(--sidebar-bg); border: 1px solid var(--border);
  color: var(--text); font-size: .72rem; padding: 1px 4px; border-radius: 3px;
  cursor: pointer;
}

/* ── Modal (plan list) ─────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface); border-radius: 10px; padding: 24px;
  min-width: 380px; max-width: 520px; width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.modal h2 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.modal-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.modal-plan-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.modal-plan-item:hover { background: var(--accent-bg); border-color: var(--accent); }
.modal-plan-item .plan-name { font-size: .85rem; font-weight: 500; color: var(--text); }
.modal-plan-item .plan-date { font-size: .72rem; color: var(--text-muted); }
.modal-plan-item .plan-del  { color: var(--danger); font-size: .75rem; padding: 2px 6px; border-radius: 4px; }
.modal-plan-item .plan-del:hover { background: var(--danger-bg); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-empty { text-align: center; color: var(--text-muted); padding: 24px; font-size: .85rem; }

/* ── Toast ─────────────────────────────────────── */
#toast {
  position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: #2a2d3e; color: #fff; padding: 8px 18px; border-radius: 20px;
  font-size: .8rem; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 2000; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: var(--danger); }

/* ── Properties panel (floating) ──────────────── */
#props-panel {
  position: fixed; right: 16px; top: calc(var(--topbar-h) + 12px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; min-width: 172px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  font-size: .78rem; color: var(--text);
  display: none;
  z-index: 200;
}
#props-panel.visible { display: block; }
#props-panel h3 { font-size: .8rem; font-weight: 700; margin-bottom: 8px; color: var(--accent); }
#props-panel .prop-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px; gap: 8px;
}
#props-panel .prop-row label { color: var(--text-muted); min-width: 50px; }
#props-panel .prop-row input[type="number"] {
  width: 70px; border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 6px; font-size: .78rem; text-align: right;
  background: var(--surface); color: var(--text);
}
#props-panel .prop-row input[type="text"] {
  flex: 1; border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 6px; font-size: .78rem;
  background: var(--surface); color: var(--text);
}
#props-panel .prop-row input:focus { outline: none; border-color: var(--accent); }
#props-panel .thick-presets {
  display: flex; gap: 3px; margin-bottom: 6px; flex-wrap: wrap;
}
#props-panel .thick-presets button {
  flex: 1; min-width: 28px; padding: 2px 0; font-size: .7rem; border: 1px solid var(--border);
  border-radius: 3px; background: var(--surface2); cursor: pointer; color: var(--text);
}
#props-panel .thick-presets button:hover { background: var(--accent-bg); border-color: var(--accent); }
#props-panel .props-actions {
  display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap;
}
#props-panel .props-actions button {
  flex: 1; padding: 4px 6px; font-size: .72rem; border: 1px solid var(--border);
  border-radius: 4px; background: var(--surface2); cursor: pointer; color: var(--text);
  white-space: nowrap;
}
#props-panel .props-actions button:hover { background: var(--accent-bg); border-color: var(--accent); }
#props-sep { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
#props-del {
  margin-top: 4px; width: 100%; padding: 5px; border: none;
  background: var(--danger-bg); color: var(--danger); border-radius: 5px;
  cursor: pointer; font-size: .75rem; font-weight: 600;
}
#props-del:hover { background: var(--danger-bg); filter: brightness(.92); }

/* ── Botón Fondo activo ────────────────────────── */
#btn-bg.active { background: #fefce8; color: #b45309; border-color: #fcd34d; }

/* ── Modal base (nuevo patrón: oculto por defecto) */
#modal-bg { display: none; }
#modal-bg.open { display: flex; }
.modal-box {
  background: var(--surface); border-radius: 10px; padding: 24px;
  min-width: 340px; max-width: 460px; width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.modal-header span { font-size: .95rem; font-weight: 700; color: var(--text); }
.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--text-muted); padding: 2px 6px; border-radius: 4px;
}
.modal-close:hover { background: var(--surface2); color: var(--text); }

/* ── Panel catálogo flotante ───────────────────── */
#catalog-panel {
  position: fixed; left: 12px; top: calc(var(--topbar-h) + 12px);
  background: var(--sidebar-bg); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.18);
  width: 200px; max-height: calc(100vh - var(--topbar-h) - var(--statusbar-h) - 24px);
  display: flex; flex-direction: column; z-index: 400;
  overflow: hidden;
}
#catalog-panel.hidden { display: none; }
.catalog-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: var(--topbar-bg); border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; flex-shrink: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
#btn-catalog-close {
  background: none; border: none; cursor: pointer;
  font-size: .75rem; color: var(--text-muted); padding: 0 3px;
}
#btn-catalog-close:hover { color: var(--accent); }
#catalog-container { overflow-y: auto; flex: 1; }

/* ── Panel flotante imagen de fondo ────────────── */
#bg-panel {
  position: fixed; left: 12px; top: calc(var(--topbar-h) + 12px);
  box-sizing: border-box; width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - var(--topbar-h) - 60px); overflow: auto;
  background: var(--surface); border: 1px solid #fcd34d;
  border-radius: 8px; padding: 10px 12px;
  min-width: 200px; box-shadow: 0 2px 12px rgba(0,0,0,.12);
  font-size: .78rem; color: var(--text); z-index: 200;
}
.bg-panel-title {
  display: flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: .78rem; color: #92400e;
  margin-bottom: 6px; cursor: move; user-select: none;
}
.bg-panel-size { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.bg-panel-hint { font-size: .7rem; color: var(--text-muted); margin-bottom: 8px; line-height: 1.3; }
.bg-panel-row {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; color: var(--text-muted); margin-bottom: 8px;
}
.bg-panel-row input[type="range"] { flex: 1; }
.bg-panel-btns { display: flex; gap: 4px; }
.bg-panel-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 8px; border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: background .1s, border-color .1s;
}
.bg-panel-btn:hover  { background: var(--accent-bg); border-color: var(--border); }
.bg-panel-btn.primary { background: #f59e0b; border-color: #d97706; color: #fff; flex: 2; }
.bg-panel-btn.primary:hover { background: #d97706; }
.bg-panel-btn.danger  { flex: 0 0 auto; padding: 5px 8px; color: var(--danger); }
.bg-panel-btn.danger:hover { background: var(--danger-bg); border-color: var(--border); }
.bg-panel-btn.active  { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.bg-calib-preset { font-size:.68rem; padding:3px 6px; border:1px solid #fcd34d; border-radius:4px; background:#fffbeb; color:#92400e; cursor:pointer; white-space:nowrap; }
.bg-calib-preset:hover { background:#fef3c7; border-color:#d97706; }

/* ── Modal imagen de fondo ─────────────────────── */
.modal-label {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}
.modal-row { display: flex; align-items: center; gap: 8px; }
.modal-unit { font-size: .8rem; color: var(--text-muted); }
.modal-hint { font-size: .72rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

.file-pick {
  display: flex; align-items: center; gap: 8px;
  border: 1px dashed var(--border); border-radius: 6px;
  padding: 10px 12px; cursor: pointer;
  font-size: .8rem; color: var(--text-muted);
  transition: border-color .15s, background .15s;
}
.file-pick:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.file-pick input[type="file"] { display: none; }
#bg-filename { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tbtn.danger {
  color: var(--danger); border-color: #fcc;
}
.tbtn.danger:hover { background: var(--danger-bg); }

/* ── Menú contextual ───────────────────────────── */
#ctx-menu {
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 3000;
  min-width: 180px;
  display: none;
  user-select: none;
}
#ctx-menu.open { display: block; }

.ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  font-size: .82rem; color: var(--text);
  cursor: pointer; transition: background .1s;
}
.ctx-item:hover { background: var(--accent-bg); }
.ctx-item.active { color: var(--accent); font-weight: 600; }
.ctx-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.ctx-item.active svg { color: var(--accent); }
.ctx-item span { flex: 1; }
.ctx-item kbd {
  font-size: .7rem; background: var(--surface2);
  padding: 1px 5px; border-radius: 3px;
  color: var(--text-muted); border: 1px solid var(--border);
  font-family: inherit;
}
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
.ctx-danger { color: var(--danger) !important; }
.ctx-danger svg { color: var(--danger) !important; }
.ctx-danger:hover { background: var(--danger-bg) !important; }

/* Elementos bloqueados — overlay visual */
.locked-overlay {
  pointer-events: none;
}

/* ── Shape Editor ──────────────────────────────── */
.se-shape-btn {
  padding: 4px 8px; font-size: .72rem; border: 1px solid var(--border);
  border-radius: 4px; background: var(--surface2); cursor: pointer; color: var(--text);
  transition: background .1s;
}
.se-shape-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
.se-shape-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; font-size: .75rem; cursor: pointer; border-bottom: 1px solid var(--border);
  color: var(--text);
}
.se-shape-item:hover { background: var(--accent-bg); }
.se-shape-item.active { background: var(--accent-bg); color: var(--accent); }
.se-shape-item .se-del { color: var(--danger); padding: 0 4px; cursor: pointer; }
.se-prop-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.se-prop-row label { color: var(--text-muted); font-size: .72rem; min-width: 32px; }
.se-prop-row input[type="number"], .se-prop-row input[type="text"] {
  width: 52px; border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 4px; font-size: .72rem;
  background: var(--surface); color: var(--text);
}
.se-prop-row input[type="color"] { width: 28px; height: 22px; border: none; cursor: pointer; padding: 0; }

/* ── Theme toggle ──────────────────────────────── */
#btn-theme-toggle {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; margin-left: 4px;
}

/* ── Hamburger (sólo móvil) ─────────────────── */
#btn-hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; color: var(--text);
}
#btn-hamburger.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ── Menú móvil drawer ──────────────────────── */
#mobile-menu {
  display: none;
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  z-index: 550;
  overflow-y: auto;
  max-height: calc(100dvh - var(--topbar-h));
  padding-bottom: 16px;
}
#mobile-menu.mob-open { display: block; }

/* Barra de nombre (siempre visible) */
.mob-name-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.mob-name-bar input[type="text"] {
  width: 100%; border: 1px solid var(--border); border-radius: 5px;
  padding: 7px 10px; font-size: .85rem; color: var(--text);
  background: var(--surface2); outline: none; box-sizing: border-box;
}
.mob-name-bar input[type="text"]:focus { border-color: var(--accent); }

/* Acordeón */
.mob-acc-item { border-bottom: 1px solid var(--border); }
.mob-acc-item:last-child { border-bottom: none; }
.mob-acc-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 16px;
  border: none; background: none; cursor: pointer;
  font-size: .88rem; font-weight: 600; color: var(--text);
  text-align: left;
}
.mob-acc-head:active { color: var(--accent); }
.mob-acc-chevron {
  font-size: .7rem; color: var(--text-muted);
  transition: transform .15s;
}
.mob-acc-item.open .mob-acc-chevron { transform: rotate(90deg); }
.mob-acc-body {
  display: none;
  padding: 0 16px 8px;
}
.mob-acc-item.open .mob-acc-body { display: block; }

/* Compat: se mantienen estilos de sección legacy por si acaso */
.mob-section { padding: 8px 16px 4px; border-bottom: 1px solid var(--border); }
.mob-section:last-child { border-bottom: none; }
.mob-section-title {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); padding: 6px 0 4px;
}

.mob-tools {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; padding: 4px 0 8px;
}
.mob-tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 6px; border: 1.5px solid var(--border);
  background: var(--surface2); cursor: pointer; color: var(--text);
  font-size: .72rem; font-weight: 500;
}
.mob-tool kbd {
  font-size: .58rem; color: var(--text-muted); background: none; border: none;
  font-family: inherit;
}
.mob-tool.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

.mob-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 0; border: none; background: none;
  font-size: .85rem; color: var(--text); cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--border);
}
.mob-row:last-child { border-bottom: none; }
.mob-row:active { color: var(--accent); }
.mob-row.mob-check::after { content: '✓'; color: var(--accent); font-size: .85rem; }
.mob-row.mob-check.off::after { content: ''; }

/* ── Sidebar toggle (sólo móvil) ──────────────── */
#btn-sidebar-toggle {
  display: none;
}

/* ── Responsive móvil ─────────────────────────── */
@media (max-width: 768px) {
  #app {
    grid-template-columns: 1fr;
  }

  #sidebar {
    display: none;
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    height: calc(100dvh - var(--topbar-h) - var(--statusbar-h));
    width: var(--sidebar-w);
    z-index: 600;
    box-shadow: 4px 0 20px rgba(0,0,0,.35);
    overflow-y: auto;
  }
  #sidebar.mobile-open {
    display: flex;
  }

  /* Overlay oscuro detrás del sidebar cuando está abierto */
  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 599;
  }
  #sidebar-overlay.visible {
    display: block;
  }

  #btn-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    color: var(--text);
    margin-right: 4px;
  }
  #btn-sidebar-toggle svg {
    width: 18px;
    height: 18px;
  }
  #btn-sidebar-toggle.active {
    background: var(--sidebar-bg);
    border-color: var(--accent);
    color: #fff;
    stroke: #fff;
  }

  #btn-hamburger { display: flex; }
  #plan-name-input { display: none; }
  .menu-bar { display: none; }
  #topbar { overflow: hidden; gap: 2px; padding: 0 8px; }
  .zoom-btn { padding: 4px 7px; font-size: .8rem; }
  #zoom-label { font-size: .8rem; min-width: 36px; text-align: center; }

  /* Las secciones popout no tienen sentido en móvil */
  .section-popout-btn { display: none !important; }

  /* Sección menú móvil — sólo visible en móvil */
  #section-mobile-menu { display: block; }
}

/* En escritorio ocultamos el menú móvil */
#section-mobile-menu { display: none; }

/* ── Estilos del menú móvil ───────────────────── */
.mob-plan-bar {
  padding: 8px 10px 4px;
}
.mob-plan-bar input {
  width: 100%;
  background: var(--sidebar-hov);
  border: 1px solid var(--sidebar-sep);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: .8rem;
  color: var(--sidebar-txt);
  outline: none;
}
.mob-plan-bar input:focus { border-color: var(--accent); }

.mob-group {
  padding: 0 0 4px;
}
.mob-group-title {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 12px 3px;
}
.mob-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--sidebar-txt);
  font-size: .82rem;
  cursor: pointer;
  transition: background .1s;
}
.mob-item:hover, .mob-item:active { background: var(--sidebar-hov); }
.mob-item.mob-danger { color: var(--danger); }
.mob-item.mob-danger:hover { background: rgba(224,82,82,.12); }
.mob-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a7e96'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 28px;
  color: var(--sidebar-txt);
  border-radius: 0;
}
.mob-divider {
  height: 1px;
  background: var(--sidebar-sep);
  margin: 4px 0 8px;
}
/* ── Barra de escala tipo mapa ───────────────────────────────── */
#scale-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
#scale-bar-line {
  position: relative;
  height: 10px;
  display: flex;
  align-items: flex-end;
}
#scale-bar {
  height: 6px;
  min-width: 40px;
  max-width: 200px;
  background: var(--text-muted, #888);
  border: 1.5px solid var(--text-muted, #888);
  border-top: none;
  transition: width 0.2s ease;
  position: relative;
}
#scale-bar::before,
#scale-bar::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 1.5px;
  height: 10px;
  background: var(--text-muted, #888);
}
#scale-bar::before { left: 0; }
#scale-bar::after  { right: 0; }
#scale-bar-label {
  font-size: .72rem;
  color: var(--text-muted, #888);
  white-space: nowrap;
  min-width: 36px;
}

/* ── Escala gráfica sobre el canvas ─────────────────────────── */
#map-scale-widget {
  position: fixed;
  bottom: calc(var(--statusbar-h, 28px) + 12px);
  left: 16px;
  z-index: 600;
  pointer-events: none;
  border-radius: 3px;
  overflow: hidden;
}
#map-scale-canvas {
  display: block;
}

/* MuebleLab integration */
#storage-status {font-size:11px;color:var(--text-muted);max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#viewer3d-panel {position:fixed;inset:48px 0 28px auto;width:48%;background:#edf1f6;z-index:50;display:flex;flex-direction:column;box-shadow:-4px 0 24px #0004;color:#243247}
.v3d-toolbar {display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px;background:#f8fafc;border-bottom:1px solid #dce3ee;font-size:12px}
.v3d-toolbar button,.furlib-row button,.furlib-header button {padding:5px 8px;border:1px solid #bdcada;background:#fff;border-radius:5px;color:#243247;cursor:pointer}
.v3d-toolbar label {display:flex;align-items:center;gap:4px}
#v3d-close {margin-left:auto}
#v3d-mount {position:relative;flex:1;min-height:0;overflow:hidden}
#v3d-mount canvas {display:block;touch-action:none}
#v3d-step-nav {display:none;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);grid-template-columns:52px 52px 52px;grid-template-rows:48px 48px 48px;gap:3px;pointer-events:none}
.is-walking #v3d-step-nav {display:grid}
#v3d-step-nav button {pointer-events:auto;touch-action:manipulation;border:1px solid #ffffffbd;border-radius:12px;background:#243247a6;color:#fff;font-size:29px;box-shadow:0 2px 8px #0004;cursor:pointer}
#v3d-step-nav button:hover,#v3d-step-nav button:focus-visible {background:#2563eb;border-color:#fff;outline:2px solid #fff}
#v3d-step-nav button:active {transform:scale(.94)}
.step-forward {grid-area:1/2}.step-left {grid-area:2/1}.step-right {grid-area:2/3}.step-back {grid-area:3/2}
#v3d-step-nav span {position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#fff;background:#243247b8;padding:2px 6px;border-radius:4px}
#v3d-status {padding:6px 10px;color:#52637a;font-size:11px}
#v3d-controls {font-size:11px}
#furlib-panel {position:fixed;inset:48px auto 28px 0;width:350px;background:#f8fafc;color:#243247;z-index:80;display:flex;flex-direction:column;box-shadow:4px 0 18px #0003;padding:8px;gap:8px;font-size:12px}
.furlib-header {display:flex;align-items:center;justify-content:space-between}
#furlib-search {padding:8px;border:1px solid #bdcada;border-radius:5px}
#furlib-list {flex:1;overflow:auto}
#furlib-list h4 {margin:12px 0 4px;font-size:11px;color:#60738f}
.furlib-row {display:grid;grid-template-columns:64px 1fr;gap:6px;padding:8px;border-bottom:1px solid #dce3ee}
.furlib-row img {object-fit:contain;background:white;border-radius:4px}
.furlib-row strong,.furlib-row small {display:block;overflow-wrap:anywhere}
.furlib-row small {margin-top:4px;color:#66758a}
.furlib-row>div:last-child {grid-column:2;display:flex;gap:6px}
#furlib-status {font-size:11px;color:#66758a;padding:5px}
.furlib-libs {display:flex;gap:6px}
.furlib-libs button {flex:1;padding:7px 8px;border:1px solid #2b6cb0;background:#2b6cb0;color:#fff;border-radius:5px;cursor:pointer;font-weight:600}
.furlib-libs button:hover {background:#245a94}
#furlib-list h4 {display:flex;align-items:center;justify-content:space-between;gap:6px}
.furlib-lib-remove {padding:2px 7px;border:1px solid #bdcada;background:#fff;border-radius:4px;color:#60738f;font-size:10px;cursor:pointer}
dialog {border:1px solid #bdcada;border-radius:10px;padding:20px;max-width:min(640px,94vw);max-height:80vh;overflow:auto;color:#243247}
dialog::backdrop {background:#0005}
dialog label {margin:12px 0}
dialog input,dialog select {padding:6px;margin-left:6px;border:1px solid #bdcada;border-radius:4px}
dialog button {margin:12px 8px 0 0;padding:7px 12px}
@media(max-width:900px){#viewer3d-panel{width:100%}#storage-status{display:none}#furlib-panel{width:min(350px,100%)}}

.v3d-toolbar button[aria-pressed="true"] {background:#243247;color:#fff;border-color:#243247}

/* Construction controls remain accessible on desktop and mobile. */
#building-toolbar{position:absolute;top:48px;left:8px;z-index:15;display:flex;gap:5px;max-width:calc(100% - 16px);background:var(--surface,#fff);padding:5px;border:1px solid var(--border,#ddd);border-radius:7px;box-shadow:0 2px 8px #0002}
#building-toolbar select,#building-toolbar button{font:inherit;font-size:12px;padding:5px;max-width:180px;color:var(--text,#222);background:var(--surface,#fff);border:1px solid var(--border,#bbb);border-radius:4px}
.building-dialog{width:min(540px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--border,#aaa);border-radius:10px;color:var(--text,#222);background:var(--surface,#fff);padding:18px}
.building-dialog::backdrop{background:#0006}.building-dialog h3{margin:0 28px 16px 0}.building-close{position:absolute;right:12px;top:12px}.building-dialog section{border-top:1px solid var(--border,#ddd);margin-top:10px;padding:6px 0}.building-dialog label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}.building-dialog input:not([type=checkbox]),.building-dialog select{max-width:55%;padding:6px;font:inherit}.building-dialog button{padding:7px;margin:4px;font:inherit;font-size:13px;cursor:pointer}.building-error{color:#dc2626;min-height:1em}

.building-dialog input,.building-dialog select,.building-dialog button{color:var(--text);background:var(--surface2);border:1px solid var(--border);border-radius:4px}

.building-dialog [hidden]{display:none!important}

#viewer3d-panel #v3d-vision[hidden]{display:none!important}
#v3d-fov-value{min-width:3ch;font-variant-numeric:tabular-nums}

/* MuebleLab: shared application chrome and camera selector. */
:root {--accent:#007acc;--accent-dark:#0063a6;--sidebar-bg:#f0ece4;--sidebar-txt:#333;--sidebar-hov:#dedad2;--sidebar-act:#d6e5ef;--sidebar-sep:#c8c4bc;--topbar-bg:#e4e0d8;--border:#c8c4bc;--text:#222;--text-muted:#666;--surface:#faf9f6;--surface2:#f0ece4;--accent-bg:#e1eef8}
[data-theme="dark"] {--sidebar-bg:#252527;--sidebar-txt:#ddd;--sidebar-hov:#3a3a3d;--sidebar-act:#164569;--sidebar-sep:#3a3a3d;--topbar-bg:#2d2d30;--border:#3a3a3d;--text:#ddd;--text-muted:#aaa;--surface:#252527;--surface2:#1e1e1e;--accent-bg:#16354a}
html,body {font-family:'Segoe UI',system-ui,sans-serif}
#topbar .brand {text-decoration:none;white-space:nowrap;font-size:14px}
.brand small {font-weight:400;color:var(--text-muted);font-size:11px}
.menu-item {font-weight:400;padding:0 10px;border:0}
.menu-dropdown {background:var(--surface);border-color:var(--border);border-radius:4px}
.menu-opt:hover {background:var(--sidebar-hov)}
#plan-view-switcher {position:fixed;top:56px;left:50%;transform:translateX(-50%);display:inline-flex;border:1px solid #3a3e4a;border-radius:4px;overflow:hidden;z-index:60}
#plan-view-switcher button {background:#1a1d24;color:#ccc;border:0;border-right:1px solid #3a3e4a;padding:5px 12px;font:12px 'Segoe UI',sans-serif;cursor:pointer}
#plan-view-switcher button:last-child {border-right:0}
#plan-view-switcher button[aria-pressed="true"] {background:var(--accent);color:white}
#plan-view-switcher small {font-size:10px}
body.shared-view #viewer3d-panel {inset:84px 0 28px;width:100%;box-shadow:none}
.v3d-toolbar {background:var(--topbar-bg);border-color:var(--border);color:var(--text)}
.v3d-toolbar button,.v3d-toolbar select,.v3d-toolbar input {background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px}
.v3d-toolbar button[aria-pressed="true"] {background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:600px){#plan-view-switcher {left:8px;transform:none;top:54px}#topbar .brand {margin-right:2px;font-size:12px}.brand small {display:none}body.shared-view #viewer3d-panel {top:84px}}

body.shared-view #building-toolbar{display:none}
@media(max-width:600px){#building-toolbar{top:44px}}

/* Windows share the frame and mechanics of MuebleLab's property editor. */
.ml-property-window{--bg:var(--surface);--bg-alt:var(--surface2)}
#bg-panel.ml-property-window,.building-dialog.ml-property-window{padding:0;min-width:220px;min-height:180px;overflow:hidden;border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;font-size:13px}
#bg-panel.ml-property-window .bg-panel-title{margin:0;color:var(--text)}
.ml-property-window .quick-panel__header{gap:8px;min-height:34px}
.ml-property-window .quick-panel__title{flex:1;min-width:0}
.building-dialog.ml-property-window .building-close{position:static;padding:2px 7px;margin:0;background:transparent;border:1px solid transparent}
.ml-property-window .prop-section{margin-bottom:3px;border:1px solid var(--border);border-radius:3px;overflow:hidden}
.ml-property-window .prop-section-title{padding:4px 8px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;background:var(--surface2);color:var(--text);cursor:pointer}
.ml-property-window .prop-section-arrow{font-size:9px;color:var(--text-muted)}
.ml-property-window .prop-section-body{padding:6px}
.ml-property-window .prop-section--collapsed .prop-section-body{display:none}
.building-dialog.ml-property-window label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:5px 2px;border-top:1px solid var(--border);font-size:11px}
.building-dialog.ml-property-window input:not([type=checkbox]),.building-dialog.ml-property-window select{max-width:55%;width:55%;padding:3px 4px;font-size:11px}
.building-dialog.ml-property-window button:not(.quick-panel__btn){padding:5px 8px;margin:3px 2px;font-size:11px}
.ml-property-window .bg-panel-btn.primary{background:var(--accent);border-color:var(--accent);color:white}
.ml-property-window .bg-panel-hint{white-space:normal}

.free-library-content{display:flex;flex-direction:column;gap:10px}.free-library-list{max-height:180px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px}.free-library-list button[aria-pressed="true"]{border-color:var(--accent);background:var(--surface2)}.free-library-detail{display:flex;flex-direction:column;gap:8px}.free-library-detail label{display:flex;justify-content:space-between;gap:12px}.free-library-detail input{width:100px}.free-library-preview{height:220px;min-height:220px;overflow:hidden;border-radius:6px}.free-library-preview canvas{display:block;width:100%;height:100%}.free-library-content p{font-size:12px;line-height:1.5}.menu-bar a.menu-item{text-decoration:none;color:inherit}

#btn-free-furniture{appearance:none;background:transparent;color:var(--text);border:0;border-right:1px solid var(--border);border-radius:0;align-self:stretch;height:auto;min-height:100%;padding:0 12px;font-family:inherit;font-size:.8rem;font-weight:500}#btn-free-furniture:hover{background:var(--accent-bg);color:var(--accent)}

/* Static images keep the complete furniture gallery light; only the selected preview uses WebGL. */
.free-library>.quick-panel__body{display:flex;flex-direction:column;overflow:hidden}
.free-library-content{flex:1;min-height:0;gap:8px}.free-library-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;flex:1;min-height:0}
.free-library-list{max-height:none;min-height:0;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start;padding:2px 4px 4px 2px}
.building-dialog.free-library.ml-property-window .free-library-card{padding:0;margin:0;display:flex;flex-direction:column;text-align:left;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);overflow:hidden;cursor:pointer}
.free-library-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#f1f0ed}.free-library-card strong{font-size:12px;line-height:1.3;padding:8px 8px 4px}.free-library-card small{font-size:10px;line-height:1.3;padding:0 8px 9px;color:var(--text-muted)}
.free-library-list .free-library-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-bg)}
.free-library-detail{min-height:0;overflow:auto;border-left:1px solid var(--border);padding-left:14px;gap:6px}.free-library-detail h4{margin:3px 0;font-size:14px}.free-library-detail a{font-size:11px;color:var(--accent)}.free-library-detail small{font-size:10px;line-height:1.5;color:var(--text-muted)}
.free-library-hero{width:100%;height:160px;object-fit:contain;background:#f1f0ed;border-radius:6px}.free-library-hero[hidden],.free-library-preview[hidden]{display:none}.free-library-preview{height:180px;min-height:180px}
.free-library-filters{display:flex;gap:8px;flex-shrink:0}.building-dialog.free-library.ml-property-window .free-library-filters input{flex:1;width:auto;max-width:none;min-width:0;padding:7px}.building-dialog.free-library.ml-property-window .free-library-filters select{width:auto;max-width:30%;padding:7px}
.free-library-sources{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:11px;flex-shrink:0}.free-library-sources a{color:var(--accent)}.free-library-content .free-library-note,.free-library-content .free-library-status{margin:0;font-size:11px;line-height:1.4;flex-shrink:0}.free-library-status{color:var(--text-muted)}
.building-dialog.free-library.ml-property-window .free-library-material input{width:48px;max-width:48px;height:27px;padding:2px;cursor:pointer}.building-dialog.free-library.ml-property-window .free-library-place{background:var(--accent);border-color:var(--accent);color:white;font-weight:600;position:sticky;bottom:0;z-index:1}
@media(max-width:650px){.free-library>.quick-panel__body{overflow:auto}.free-library-content{flex:none;min-height:auto}.free-library-layout{display:flex;flex-direction:column;min-height:auto}.free-library-list{max-height:260px;grid-template-columns:repeat(2,minmax(0,1fr));flex-shrink:0}.free-library-detail{border-left:0;border-top:1px solid var(--border);padding:12px 0 0;overflow:visible;min-height:auto;flex-shrink:0}.free-library-filters{flex-wrap:wrap}.building-dialog.free-library.ml-property-window .free-library-filters input{flex-basis:100%}.building-dialog.free-library.ml-property-window .free-library-filters select{max-width:none;flex:1}.free-library-detail .free-library-hero{height:180px}}

.layer-control-row{display:flex;gap:4px;align-items:center;margin:3px 0}.layer-control-row .layer-btn{flex:1;min-width:0}.layer-lock{font-size:10px;padding:4px;border:1px solid var(--border);border-radius:4px;background:var(--bg-panel);color:var(--text);cursor:pointer}.layer-lock.active{color:var(--accent);border-color:var(--accent)}#building-toolbar label{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap}@media(max-width:650px){#building-toolbar{flex-wrap:wrap;max-width:calc(100% - 16px)}}

.free-library-list{grid-auto-rows:max-content;align-items:start}.free-library-card img{flex-shrink:0}.free-library-card strong,.free-library-card small{flex-shrink:0}#building-toolbar label{color:var(--text)}

.layers-dialog .quick-panel__body{overflow:auto}.building-dialog.ml-property-window.layers-dialog .layer-control-row .layer-btn{flex:1;margin:0;text-align:left}.building-dialog.ml-property-window.layers-dialog .layer-lock{width:86px;margin:0}.layers-dialog p{font-size:12px;line-height:1.5}.layers-controls .layer-control-row{padding:4px 0;border-bottom:1px solid var(--border)}

.room-finishes .quick-panel__body{overflow:auto}.room-finishes-fields{display:grid;gap:10px}.room-finishes .finish-section{border:1px solid var(--border);padding:8px;border-radius:4px;min-width:0}.finish-section legend{font-size:12px;font-weight:600;padding:0 5px}.building-dialog.ml-property-window.room-finishes select{max-width:100%;width:100%}.room-finishes .finish-swatch{border:1px solid var(--border);border-radius:4px;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#222;text-shadow:0 1px 2px #fff}.finish-swatch[data-style=tile]{background-image:linear-gradient(90deg,#0002 1px,transparent 1px),linear-gradient(#0002 1px,transparent 1px);background-size:20px 20px}.finish-swatch[data-style=wood]{background-image:repeating-linear-gradient(0deg,#0002 0px,#0002 1px,transparent 1px,transparent 9px)}.finish-actions{position:sticky;bottom:-6px;display:flex;gap:6px;background:var(--surface);padding:6px 0}.finish-actions #finish-apply{background:var(--accent);color:white}.room-finishes p{font-size:11px;line-height:1.5;margin:6px 0}.room-finishes input[type=color]{height:27px}#building-toolbar{flex-wrap:wrap}

.room-finishes [hidden]{display:none!important}

.room-finishes .quick-panel__body{min-height:0}.room-finishes>.finish-actions{position:static;flex-shrink:0;padding:6px;margin:0}.room-finishes>#finish-status{flex-shrink:0;padding:0 8px;margin:4px 0}

.round-furniture .free-library-preview{flex-shrink:0;margin-bottom:12px}.round-furniture p{font-size:12px;line-height:1.5}.round-furniture input[type=color]{height:30px}.round-furniture #round-colors-apply{background:var(--accent);color:#fff}

/* Room boundaries are edited in an isolated, nonmodal canvas view. */
.room-zones-panel{position:fixed;inset:95px 16px auto auto;width:310px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 130px);overflow:auto;z-index:80;padding:16px;background:var(--bg-panel,#fff);color:var(--text,#1e293b);border:1px solid var(--border,#cbd5e1);border-radius:10px;box-shadow:0 8px 30px #0002;box-sizing:border-box;}
.room-zones-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.room-zones-heading h3{margin:0}.room-zones-panel p{font-size:13px;line-height:1.45;margin:10px 0}.room-zones-panel label{display:flex;flex-direction:column;gap:6px;font-size:13px}.room-zones-panel input{width:100%;box-sizing:border-box;padding:8px;border:1px solid #94a3b8;border-radius:5px;background:inherit;color:inherit}.room-zones-tools,.room-zones-actions,#room-zone-list{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.room-zones-panel button{padding:7px 9px;border:1px solid #94a3b8;border-radius:5px;background:inherit;color:inherit;cursor:pointer;font-size:12px}.room-zones-panel button[aria-pressed=true],#room-zone-confirm{background:#0369a1;color:#fff;border-color:#0369a1}.room-zones-panel button:disabled{opacity:.45;cursor:default}.room-zones-panel [role=status]{min-height:38px}.room-zones-panel button:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}
[data-theme=dark] .room-zones-panel{background:#202833;color:#e2e8f0}
@media(max-width:768px){.room-zones-panel{inset:auto 8px 65px auto;width:calc(100vw - 16px);max-width:380px;max-height:38dvh;padding:10px}.room-zones-panel p{margin:6px 0}.room-zones-tools,.room-zones-actions{margin:6px 0}}


/* House tour recording and local video preview. */
.v3d-recording-controls{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}.v3d-recording-controls.is-recording #v3d-record{background:#b91c1c;color:#fff;border-color:#b91c1c}.v3d-recording-controls.is-recording #v3d-record-status:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:6px}.v3d-recording-controls #v3d-record-status{font-variant-numeric:tabular-nums}.v3d-recording-controls [hidden],.tour-video-dialog [hidden]{display:none!important}.tour-video-dialog{position:fixed;inset:0;margin:auto;width:min(900px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:20px;border:1px solid #8a939e;border-radius:10px;background:var(--bg-panel,#fff);color:var(--text,#222)}.tour-video-dialog::backdrop{background:#0008}.tour-video-dialog h3{margin:0 0 14px}.tour-video-dialog video{display:block;width:100%;max-height:65dvh;background:#111}.tour-video-dialog p{font-size:13px}.tour-video-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.tour-video-actions a,.tour-video-actions button{margin:0;padding:9px 13px;border-radius:5px;border:1px solid #64748b;text-decoration:none;cursor:pointer;color:inherit;background:transparent;font:inherit}.tour-video-actions a{background:#0369a1;color:#fff;border-color:#0369a1}[data-theme=dark] .tour-video-dialog{background:#202833;color:#e2e8f0}

.free-library-param-thumb{width:100%;aspect-ratio:4/3;background:#e8ecea;overflow:hidden}.free-library-param-hero{height:160px;min-height:160px;background:#e8ecea}.free-library-param-thumb img,.free-library-param-thumb canvas,.free-library-param-hero img,.free-library-param-hero canvas{display:block;width:100%;height:100%;object-fit:contain}

/* Menus stay above viewers, floating properties, galleries and editor dialogs. */
:root{--layer-menu:20000;--layer-context-menu:20010}
#topbar,#mobile-menu{z-index:var(--layer-menu)}
#ctx-menu{z-index:var(--layer-context-menu)}
.editor-dialog{position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 110px);overflow:auto;box-sizing:border-box;padding:20px;z-index:1000;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 32px #0005}
.tour-video-dialog{z-index:1000}