@charset "UTF-8";
/* LABIQO · Diseñador de salas · estilos aislados bajo .rd (válidos dentro de labiqo.eu y en la vista previa). */
/* LABIQO · Diseñador de salas
   Diseño: el panel de pasos a la izquierda y el plano como mesa de trabajo a la derecha.
   Colores y tipos de labiqo.eu: azul marino LABIQO, grises azulados, Schibsted Grotesk + Instrument Sans + IBM Plex Mono. */
.rd {--bg: #f3f6f7; --surface: #ffffff; --surface-2: #e8eef0; --ink: #0b1f33; --muted: #53667a; --line: #d3dde2;
  --accent: #103b5d; --accent-strong: #0b2c47; --accent-soft: #e3ebf3; --on-accent: #ffffff;
  --panel: #0b1f33; --on-panel: #e7f0f3; --focus: #1c8cff; --err: #b42318; --err-soft: #fde8e6; --warn: #9a5b00; --warn-soft: #fff1d6; --ok: #1f6b4a; --ok-soft: #e1f2e9;
  --paper: #fbfcfd; --grid: #e6ecef; --grid-strong: #d5dee3; --wall: #0b1f33; --bench: #dfe8f1; --bench-line: #103b5d; --zone: #d98e04; --door: #53667a;
  --f-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 12px;}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rd {--bg: #08131d; --surface: #0e1c29; --surface-2: #132536; --ink: #e5eef3; --muted: #9ab0be; --line: #213649;
    --accent: #7fa9d6; --accent-strong: #a9c8ea; --accent-soft: #13283c; --on-accent: #06182a; --panel: #050d14; --on-panel: #e5eef3;
    --focus: #5aaeff; --err: #ff7b6e; --err-soft: #3a1512; --warn: #f2b84b; --warn-soft: #33260a; --ok: #6fd0a2; --ok-soft: #0f2b20;
    --paper: #0b1824; --grid: #13263a; --grid-strong: #1c3247; --wall: #d7e4ec; --bench: #1a3550; --bench-line: #a9c8ea; --zone: #f2b84b; --door: #9ab0be;
    color-scheme: dark;}
}
:root[data-theme="dark"] .rd {--bg: #08131d; --surface: #0e1c29; --surface-2: #132536; --ink: #e5eef3; --muted: #9ab0be; --line: #213649;
  --accent: #7fa9d6; --accent-strong: #a9c8ea; --accent-soft: #13283c; --on-accent: #06182a; --panel: #050d14; --on-panel: #e5eef3;
  --focus: #5aaeff; --err: #ff7b6e; --err-soft: #3a1512; --warn: #f2b84b; --warn-soft: #33260a; --ok: #6fd0a2; --ok-soft: #0f2b20;
  --paper: #0b1824; --grid: #13263a; --grid-strong: #1c3247; --wall: #d7e4ec; --bench: #1a3550; --bench-line: #a9c8ea; --zone: #f2b84b; --door: #9ab0be;
  color-scheme: dark;}
.rd *, .rd *::before, .rd *::after {box-sizing: border-box;}
.rd [hidden] {display: none !important;}
.rd button, .rd input, .rd select, .rd textarea {font: inherit; color: inherit;}
.rd :focus-visible {outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px;}
.rd {display: grid; grid-template-rows: auto 1fr; height: 100%; min-height: 0;}
/* Cabecera */
.rd .top {position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--surface); border-bottom: 1px solid var(--line);}
.rd .brand {display: flex; align-items: center; gap: 14px; min-width: 0;}
.rd .logo {height: 26px; width: auto; display: block;}
.rd .logo-dark {display: none;}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rd .logo-light {display: none;}
  :root:not([data-theme="light"]) .rd .logo-dark {display: block;}
}
:root[data-theme="dark"] .rd .logo-light {display: none;}
:root[data-theme="dark"] .rd .logo-dark {display: block;}
.rd .brand-txt {display: grid; line-height: 1.15; padding-left: 14px; border-left: 1px solid var(--line); min-width: 0;}
.rd .brand-txt strong {font: 700 1.02rem/1.15 var(--f-display); letter-spacing: -0.01em;}
.rd .brand-txt span {font: 500 0.72rem/1.3 var(--f-mono); letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;}
.rd .top-actions {display: flex; align-items: center; gap: 6px;}
.rd .seg {display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--bg);}
.rd .seg button {border: 0; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--muted);}
.rd .seg button.on {background: var(--accent); color: var(--on-accent);}
.rd .icon-btn {display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink);}
.rd .icon-btn svg {width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.rd .icon-btn:hover {background: var(--surface-2);}
.rd .icon-btn:disabled {opacity: 0.4; cursor: default;}
.rd .lang {min-width: 58px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 7px 8px; font-weight: 600; font-size: 0.85rem;}
/* Cuerpo: panel + plano */
.rd .main {display: grid; grid-template-columns: minmax(340px, 400px) 1fr; min-height: 0;}
.rd .panel {display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: var(--surface); border-right: 1px solid var(--line);}
.rd .steps {display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 6px; padding: 12px 16px 10px; border-bottom: 1px solid var(--line);}
.rd .step-tab {display: grid; gap: 4px; justify-items: start; border: 0; background: none; padding: 6px 4px 4px; cursor: pointer; text-align: left; border-radius: 8px; min-width: 0;}
.rd .step-tab .n {font: 500 0.72rem var(--f-mono); color: var(--muted);}
.rd .step-tab .l {font-size: 0.76rem; font-weight: 600; color: var(--muted); line-height: 1.2; min-height: 2.4em; hyphens: manual; overflow-wrap: normal;}
.rd .step-tab::after {content: ""; display: block; height: 3px; width: 100%; align-self: end; border-radius: 3px; background: var(--surface-2);}
.rd .step-tab.done::after {background: var(--accent-soft);}
.rd .step-tab.on::after {background: var(--accent);}
.rd .step-tab.on .l, .rd .step-tab.on .n {color: var(--ink);}
.rd .panel-body {overflow-y: auto; padding: 18px 16px 24px; display: grid; gap: 18px; align-content: start; min-height: 0;}
.rd .panel-nav {display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface);}
.rd h2.st {font: 700 1.35rem/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; text-wrap: balance;}
.rd h3.sub {font: 600 0.98rem/1.3 var(--f-body); margin: 0;}
.rd .lead {color: var(--muted); margin: 0; text-align: justify; hyphens: auto;}
.rd .hint {color: var(--muted); font-size: 0.88rem; margin: 0; text-align: justify; hyphens: auto;}
.rd .eyebrow {font: 500 0.7rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong);}
.rd .group {display: grid; gap: 10px;}
.rd .card {border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--surface); display: grid; gap: 10px;}
.rd .note {background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; text-align: justify; hyphens: auto;}
.rd .note.warn {background: var(--warn-soft); color: var(--ink);}
.rd .note.err {background: var(--err-soft);}
.rd .note.ok {background: var(--ok-soft);}
.rd .btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 0.95rem/1 var(--f-body); border-radius: 10px; padding: 11px 16px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none;}
.rd .btn.primary {background: var(--accent); color: var(--on-accent);}
.rd .btn.primary:hover {background: var(--accent-strong);}
.rd .btn.ghost {background: transparent; border-color: var(--line); color: var(--ink);}
.rd .btn.ghost:hover {background: var(--surface-2);}
.rd .btn.small {padding: 8px 12px; font-size: 0.88rem;}
.rd .btn.danger {color: var(--err); border-color: var(--line); background: transparent;}
.rd .btn:disabled {opacity: 0.5; cursor: default;}
.rd .btn.block {width: 100%;}
.rd .tiles {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
.rd .tile {display: grid; gap: 6px; justify-items: start; text-align: left; border: 1.5px solid var(--line); background: var(--bg); border-radius: 12px; padding: 10px 12px; cursor: pointer; min-width: 0;}
.rd .tile svg {width: 40px; height: 28px; fill: none; stroke: var(--accent-strong); stroke-width: 2;}
.rd .tile b {font-weight: 600; font-size: 0.9rem;}
.rd .tile small {color: var(--muted); font-size: 0.78rem; line-height: 1.3;}
.rd .tile.on {border-color: var(--accent); background: var(--accent-soft);}
.rd .fields {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.rd .fields.three {grid-template-columns: repeat(3, minmax(0, 1fr));}
.rd .field {display: grid; gap: 4px; min-width: 0;}
.rd .field label, .rd .field .lbl {font-size: 0.8rem; font-weight: 600; color: var(--muted);}
.rd .field.full {grid-column: 1 / -1;}
.rd input[type=text], .rd input[type=email], .rd input[type=number], .rd input[type=search], .rd select, .rd textarea {width: 100%; background: var(--bg); border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 10px; font-size: 0.95rem; min-width: 0;}
.rd input:focus, .rd select:focus, .rd textarea:focus {outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);}
.rd .unit {position: relative;}
.rd .unit input {padding-right: 34px; font-variant-numeric: tabular-nums;}
.rd .unit::after {content: attr(data-u); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 0.75rem var(--f-mono); color: var(--muted); pointer-events: none;}
.rd .switch {display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 0.92rem; cursor: pointer;}
.rd .switch input {appearance: none; width: 40px; height: 24px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s;}
.rd .switch input::after {content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);}
.rd .switch input:checked {background: var(--accent);}
.rd .switch input:checked::after {transform: translateX(16px);}
.rd .radios {display: grid; gap: 6px;}
.rd .radio {display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; background: var(--bg);}
.rd .radio input {margin-top: 3px; accent-color: var(--accent);}
.rd .radio b {display: block; font-weight: 600; font-size: 0.9rem;}
.rd .radio small {color: var(--muted); font-size: 0.8rem;}
.rd .radio:has(input:checked) {border-color: var(--accent); background: var(--accent-soft);}
/* Lista de paredes y elementos */
.rd .rows {display: grid; gap: 6px;}
.rd .row {display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--bg);}
.rd .row.sel {border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);}
.rd .row .tag {font: 500 0.72rem var(--f-mono); color: var(--muted);}
.rd .row .name {font-weight: 600; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;}
.rd .row .name small {display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.rd .row .unit {width: 108px;}
.rd .row .unit input {padding-block: 6px;}
.rd .x-btn {border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center;}
.rd .x-btn:hover {color: var(--err); background: var(--err-soft);}
.rd .x-btn svg {width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;}
/* Paleta de elementos para arrastrar */
.rd .palette {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.rd .pal {display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); cursor: grab; touch-action: none; user-select: none; text-align: center; min-width: 0;}
.rd .pal:hover {border-color: var(--accent);}
.rd .pal:active {cursor: grabbing;}
.rd .pal svg {width: 34px; height: 34px; fill: none; stroke: var(--accent-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.rd .pal span {font-size: 0.76rem; font-weight: 600; line-height: 1.2;}
.rd .ghost-drag {position: fixed; z-index: 100; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.8rem; transform: translate(-50%, -130%); box-shadow: 0 8px 20px -8px rgba(0,0,0,.4);}
/* Equipos */
.rd .search {position: relative;}
.rd .results {display: grid; gap: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; background: var(--surface);}
.rd .res {display: grid; gap: 1px; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer;}
.rd .res:hover, .rd .res:focus-visible {background: var(--accent-soft);}
.rd .res b {font-weight: 600; font-size: 0.9rem;}
.rd .res small {color: var(--muted); font-size: 0.78rem;}
.rd .chips {display: flex; flex-wrap: wrap; gap: 6px;}
.rd .chip {border: 1.5px solid var(--line); background: var(--bg); border-radius: 99px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer;}
.rd .chip.on {border-color: var(--accent); background: var(--accent-soft);}
.rd .stepper {display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 9px; overflow: hidden;}
.rd .stepper button {border: 0; background: var(--bg); width: 30px; height: 32px; cursor: pointer; font-weight: 700; font-size: 1rem;}
.rd .stepper input {width: 44px; border: 0; border-radius: 0; text-align: center; padding: 6px 0; background: var(--surface);}
.rd .eq {display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg);}
.rd .eq .t {font-weight: 600; font-size: 0.9rem; min-width: 0;}
.rd .eq .t small {display: block; font-weight: 400; color: var(--muted); font-size: 0.8rem;}
.rd .eq .ctrl {display: flex; align-items: center; gap: 6px;}
.rd .eq select {padding: 6px 8px; font-size: 0.85rem;}
.rd .eq .has {grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--muted); cursor: pointer;}
.rd .eq .has input {width: 16px; height: 16px; margin: 0; accent-color: var(--accent);}
.rd .eq .has-note {grid-column: 1 / -1; display: block; color: var(--muted); font-size: 0.78rem; margin-top: -4px;}
.rd textarea#labNotes {resize: vertical; min-height: 72px; font-size: 0.9rem;}
.rd .sketch-send {display: inline-flex; margin-top: 8px; text-decoration: none;}
.rd .badge {display: inline-block; font: 500 0.68rem/1 var(--f-mono); letter-spacing: 0.04em; padding: 4px 6px; border-radius: 5px; background: var(--surface-2); color: var(--muted); vertical-align: 1px;}
.rd .badge.ok {background: var(--ok-soft); color: var(--ok);}
.rd .badge.warn {background: var(--warn-soft); color: var(--warn);}
.rd .badge.err {background: var(--err-soft); color: var(--err);}
/* Distribuciones */
.rd .layouts {display: grid; gap: 10px;}
.rd .lay {display: grid; grid-template-columns: 92px 1fr; gap: 12px; text-align: left; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; background: var(--bg); cursor: pointer;}
.rd .lay.on {border-color: var(--accent); background: var(--accent-soft);}
.rd .lay svg.thumb {width: 92px; height: 72px; background: var(--paper); border-radius: 8px; border: 1px solid var(--line);}
.rd .lay .k {display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;}
.rd .lay .k b {font: 700 1rem var(--f-display);}
.rd .lay .k .letter {font: 500 0.72rem var(--f-mono); color: var(--muted);}
.rd .lay ul {margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 0.8rem; color: var(--muted);}
.rd .lay ul li b {color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums;}
.rd .proscons {display: grid; gap: 6px; font-size: 0.86rem;}
.rd .proscons p {margin: 0; text-align: justify; hyphens: auto;}
.rd .proscons .p::before {content: "+\00a0"; color: var(--ok); font-weight: 700;}
.rd .proscons .c::before {content: "\2212\00a0"; color: var(--warn); font-weight: 700;}
.rd details.adv {border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px;}
.rd details.adv summary {cursor: pointer; font-weight: 600; padding: 8px 0; font-size: 0.9rem;}
.rd details.adv > div {display: grid; gap: 10px; padding-bottom: 12px;}
/* Resultado */
.rd .kv {display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;}
.rd .kv div {display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 0.9rem;}
.rd .kv div:first-child {border-top: 0;}
.rd .kv dt {color: var(--muted);}
.rd .kv dd {margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums;}
.rd .issues {display: grid; gap: 6px; margin: 0; padding: 0; list-style: none;}
.rd .issues li {display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 0.87rem; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line);}
.rd .issues li.err {background: var(--err-soft); border-color: transparent;}
.rd .issues li.warn {background: var(--warn-soft); border-color: transparent;}
.rd .issues li.ok {background: var(--ok-soft); border-color: transparent;}
.rd .issues li p {margin: 0; text-align: justify; hyphens: auto;}
.rd .dot {width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--muted);}
.rd .err .dot {background: var(--err);}
.rd .warn .dot {background: var(--warn);}
.rd .ok .dot {background: var(--ok);}
.rd .gate {display: grid; gap: 12px;}
.rd .check {display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; cursor: pointer;}
.rd .check input {margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none;}
.rd .err-msg {color: var(--err); font-size: 0.82rem;}
.rd .sketch-drop {border: 1.5px dashed var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; text-align: center; background: var(--bg);}
.rd .sketch-drop.drag {border-color: var(--accent); background: var(--accent-soft);}
.rd .sketch-drop img {max-height: 160px; margin: 0 auto; border-radius: 8px; object-fit: contain;}
/* Escenario (plano y 3D) */
.rd .stage {position: relative; min-height: 0; background: var(--paper); overflow: hidden;}
.rd .plan-wrap {position: absolute; inset: 0;}
.rd .plan {width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none;}
.rd .plan.panning {cursor: grabbing;}
.rd .view3d {position: absolute; inset: 0; background: var(--paper);}
.rd .view3d canvas {display: block; width: 100%; height: 100%; touch-action: none;}
.rd .v3-tools {position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; max-width: calc(100% - 24px);}
.rd .chip-btn, .rd .chip-check {border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); border-radius: 99px; padding: 6px 11px; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;}
.rd .chip-check input {accent-color: var(--accent); margin: 0;}
.rd .v3-note {position: absolute; left: 12px; bottom: 44px; margin: 0; font-size: 0.76rem; color: var(--muted); background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 4px 8px; border-radius: 6px; max-width: calc(100% - 24px);}
.rd .plan-tools {position: absolute; top: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; z-index: 3; max-width: calc(100% - 24px);}
.rd .plan-tools .sep {width: 1px; height: 24px; background: var(--line); margin: 0 2px;}
.rd .tog {display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); border-radius: 99px; padding: 6px 10px; font-size: 0.78rem; font-weight: 600; cursor: pointer;}
.rd .tog input {accent-color: var(--accent); margin: 0;}
.rd .legend {position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.74rem; color: var(--muted); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; max-width: min(460px, calc(100% - 24px));}
.rd .legend i {display: inline-block; width: 12px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px;}
.rd .statusbar {position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 7px max(14px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  font: 500 0.74rem/1.3 var(--f-mono); color: var(--muted); background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--line); z-index: 2;}
.rd .statusbar b {color: var(--ink); font-weight: 500;}
.rd .statusbar .bad {color: var(--err);}
.rd .inspector {position: absolute; left: 12px; bottom: 46px; z-index: 4; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 120px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -20px rgba(11,31,51,.45); padding: 12px 14px; display: grid; gap: 10px;}
.rd .inspector .ih {display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.rd .inspector .ih b {font: 700 0.98rem var(--f-display);}
.rd .inspector .acts {display: flex; flex-wrap: wrap; gap: 6px;}
.rd .toast {position: absolute; left: 50%; top: 60px; transform: translateX(-50%); z-index: 6; background: var(--panel); color: var(--on-panel); padding: 9px 14px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); max-width: calc(100% - 32px); text-align: center;}
/* Plano SVG */
.rd .plan text {font-family: var(--f-body);}
.rd .plan .dim {font: 500 12px var(--f-mono); fill: var(--muted);}
.rd .plan .dim-line {stroke: var(--muted); stroke-width: 1; fill: none;}
.rd .plan .wall-fill {fill: var(--wall);}
.rd .plan .wall-hit {stroke: transparent; stroke-width: 22; fill: none; cursor: pointer;}
.rd .plan .wall-hit:hover, .rd .plan .wall-hit.sel {stroke: color-mix(in srgb, var(--focus) 35%, transparent);}
.rd .plan .vtx {fill: var(--surface); stroke: var(--accent); stroke-width: 2; cursor: move;}
.rd .plan .vtx.sel {fill: var(--accent);}
.rd .plan .floor {fill: var(--surface);}
.rd .plan .bench rect.body {fill: var(--bench); stroke: var(--bench-line); stroke-width: 1.5;}
.rd .plan .bench .front {stroke: var(--bench-line); stroke-width: 3;}
.rd .plan .bench .pumpdoor {fill: none; stroke: var(--bench-line); stroke-width: 1; opacity: .3;}
.rd .plan .bench text.num {font: 700 15px var(--f-display); fill: var(--ink);}
.rd .plan .bench text.mdl {font: 500 10px var(--f-mono); fill: var(--muted);}
.rd .plan .bench {cursor: move;}
.rd .plan .bench.bad rect.body {fill: var(--err-soft); stroke: var(--err);}
.rd .plan .bench.sel rect.body {stroke-width: 3;}
.rd .plan .zone {fill: color-mix(in srgb, var(--zone) 16%, transparent); stroke: var(--zone); stroke-width: 1.2; stroke-dasharray: 5 4;}
.rd .plan .zone.bad {fill: color-mix(in srgb, var(--err) 20%, transparent); stroke: var(--err);}
.rd .plan .swing {fill: color-mix(in srgb, var(--door) 8%, transparent); stroke: var(--door); stroke-width: 1; stroke-dasharray: 4 3;}
.rd .plan .leaf {stroke: var(--door); stroke-width: 2.5;}
.rd .plan .gap {fill: var(--paper);}
.rd .plan .glass {stroke: var(--focus); stroke-width: 2;}
.rd .plan .opening {cursor: grab;}
.rd .plan .opening.sel .hit, .rd .plan .obst.sel .hit {stroke: var(--focus); stroke-width: 2; stroke-dasharray: 4 3; fill: color-mix(in srgb, var(--focus) 10%, transparent);}
.rd .plan .opening .hit, .rd .plan .obst .hit {fill: transparent; stroke: none;}
.rd .plan .obst {cursor: move;}
.rd .plan .obst rect.ob {fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.5;}
.rd .plan .obst.column rect.ob {fill: var(--muted);}
.rd .plan .obst text {font: 600 10px var(--f-mono); fill: var(--muted);}
.rd .plan .pt circle {fill: var(--surface); stroke-width: 2;}
.rd .plan .pt.gas circle {stroke: #2f7d5b;}
.rd .plan .pt.power circle {stroke: #b07a00;}
.rd .plan .pt.exhaust circle {stroke: #6b46c1;}
.rd .plan .pt text {font: 700 10px var(--f-mono);}
.rd .plan .pt.gas text {fill: #2f7d5b;}
.rd .plan .pt.power text {fill: #b07a00;}
.rd .plan .pt.exhaust text {fill: #6b46c1;}
.rd .plan .pt.net circle {stroke: #2563a8;}
.rd .plan .pt.net text {fill: #2563a8;}
.rd .plan .duct {stroke: #6b46c1; stroke-width: 2; stroke-dasharray: 7 4; fill: none; opacity: .8;}
.rd .plan .draw-line {stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; fill: none;}
.rd .plan .draw-pt {fill: var(--accent);}
.rd .plan .sketch-bg {opacity: .35;}
.rd .plan .issue-flag {fill: var(--err);}
.rd .plan .issue-flag-t {font: 700 11px var(--f-body); fill: #fff;}
/* Móvil y tableta */
@media (max-width: 960px) {
  .rd {height: auto; min-height: 100%;}
  .rd .main {grid-template-columns: 1fr;}
  .rd .stage {order: -1; height: 58vh; min-height: 340px; border-bottom: 1px solid var(--line);}
  .rd .panel {border-right: 0;}
  .rd .panel-body {overflow: visible;}
  .rd .panel-nav {position: sticky; bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));}
  .rd .steps {position: sticky; top: calc(57px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--surface);}
  .rd .brand-txt span {display: none;}
  .rd .legend {display: none;}
  .rd .plan-tools .tog span {font-size: 0.72rem;}
}
@media (max-width: 520px) {
  .rd .logo {height: 20px;}
  .rd .lang {display: none;}
  .rd .brand {gap: 10px;}
  .rd .brand-txt strong {max-width: 96px; line-height: 1.1;}
  .rd .steps {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding-inline: 12px;}
  .rd .step-tab {padding-inline: 2px;}
  .rd .step-tab .l {font-size: 0.66rem;}
  .rd .brand-txt {padding-left: 10px;}
  .rd .brand-txt strong {font-size: 0.92rem;}
  .rd .seg button {padding: 6px 9px;}
  .rd #redo {display: none;}
  .rd .plan-tools .tog {display: none;}
  .rd .step-tab .l {font-size: 0.7rem;}
  .rd .palette {grid-template-columns: repeat(3, 1fr);}
  .rd .fields.three {grid-template-columns: 1fr 1fr;}
}
@media (prefers-reduced-motion: reduce) {
  .rd * {transition: none !important;}
}

/* Dentro de la web */
.rd { box-sizing: border-box; color: var(--ink); font: 400 15px/1.5 var(--f-body); background: var(--bg); text-align: left; }
.rd.standalone { height: 100%; }
.rd.embedded { height: min(880px, calc(100vh - 96px)); min-height: 640px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -34px rgba(11,31,51,.45); }
.rd.embedded .top { position: static; }
.rd.embedded .logo { display: none; }
.rd.embedded .brand-txt { border-left: 0; padding-left: 0; }
.rd .panel { scroll-margin-top: 84px; }
.rd h2, .rd h3 { margin: 0; }
.rd button { letter-spacing: normal; }
@media (max-width: 960px) {
  .rd.embedded { height: auto; min-height: 0; overflow: visible; border-radius: 14px; }
  .rd.embedded .steps { top: 72px; }
  .rd.embedded .stage { border-radius: 14px 14px 0 0; }
}

/* Clases que también usa labiqo.eu: se anulan aquí sus estilos para que no se cuelen en el diseñador */
.rd .lead { font-size: 0.97rem; max-width: none; }
.rd .tag { position: static; display: inline; background: none; padding: 0; border-radius: 0; letter-spacing: 0; white-space: nowrap; }
.rd .tag::before { content: none; }
.rd .chip { font-family: var(--f-body); color: var(--ink); }
.rd .check { display: flex; border: 0; border-radius: 0; padding: 0; background: none; }
.rd h3.sub { display: block; }
.rd .btn { transition: background .15s; white-space: normal; text-align: center; }

/* V54: ¿Está listo tu laboratorio? */
.rd .prep-list {list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 8px;}
.rd .prep-list li {display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--bg); font-size: 0.86rem; line-height: 1.45;}
.rd .prep-list li b {font-size: 0.86rem;}
.rd .prep-list li span {color: var(--muted); text-align: justify;}
.rd .prep-list li.warn {border-left-color: #c27c0e;}
.rd .prep-list li.ok {border-left-color: #1f6b4a;}
.rd .hint.small {font-size: 0.76rem;}
/* V55: LC en otra mesa, opciones guardadas, giro libre y cotas a las paredes */
.rd .eq .lcsep {grid-column: 1 / -1; display: grid; gap: 4px; margin-top: -2px;}
.rd .eq .lcsep select {width: 100%;}
.rd .eq .lcsep .has-note {margin-top: 0;}
.rd .plan .bench rect.grp {fill: none; stroke: var(--bench-line); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55;}
.rd .save-opt {margin-top: 10px;}
.rd .saved {margin-top: 14px;}
.rd .lay.sv {cursor: default;}
.rd .lay .sv-acts {display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;}
.rd .lay .sv-acts .btn[disabled] {opacity: .5; cursor: default;}
.rd .inspector .field.ang {margin-top: 8px;}
.rd .inspector .field.ang input {width: 110px;}
/* V57: opinión del cliente */
.rd .fb {margin-top: 12px; display: grid; gap: 8px;}
.rd .fb .stars {display: flex; gap: 4px;}
.rd .fb .star {font-size: 1.7rem; line-height: 1; padding: 2px 4px; background: none; border: 0; cursor: pointer; color: var(--line); transition: color .12s, transform .12s;}
.rd .fb .star.on {color: #f2a900;}
.rd .fb .star:hover, .rd .fb .star:focus-visible {transform: scale(1.12);}
.rd .fb textarea {width: 100%; min-height: 70px;}
.rd .link-btn {background: none; border: 0; padding: 0; color: var(--accent-strong, var(--accent)); font-weight: 600; text-decoration: underline; cursor: pointer; text-align: left;}
/* V58: plano en PDF */
.rd .sketch-name {margin: 0; font-weight: 600; font-size: .9rem; word-break: break-all;}

/* V62: planner más grande, pantalla completa, Guardar / Mis diseños, Empezar de nuevo, ¿Cabe una mesa más? e ideas creativas */
.rd.app {position: relative;}
.rd .icon-btn.wide {width: auto; padding: 0 11px; gap: 6px; display: inline-flex; align-items: center; font-weight: 600; font-size: .82rem; font-family: inherit;}
.rd .icon-btn.danger, .rd .btn.danger {border-color: #c0392b; color: #c0392b;}
.rd .ds-pop {position: absolute; top: 64px; right: 16px; z-index: 30; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 90px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 50px -24px rgba(11,31,51,.5); padding: 14px 16px; display: grid; gap: 10px; align-content: start;}
.rd .ds-head {display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1rem;}
.rd .ds-list {display: grid;}
.rd .ds-item {display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line);}
.rd .ds-item b {display: block; overflow-wrap: anywhere;}
.rd .ds-item small {display: block; color: var(--muted); font-size: .76rem;}
.rd .ds-file {display: flex; gap: 8px; flex-wrap: wrap;}
.rd .addone-row {display: flex; gap: 8px; align-items: center;}
.rd .addone-row select {flex: 1; min-width: 0;}
.rd .ideas .idea {border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; background: var(--surface); margin-top: 8px;}
.rd .ideas .idea p {margin: 0;}
.rd .idea-k {display: flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.rd .idea-actions {display: flex; gap: 8px; flex-wrap: wrap;}
.rd .bar {height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: 6px;}
.rd .bar i {display: block; height: 100%; background: var(--accent); transition: width .2s;}
.rd.is-full {position: fixed !important; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh !important; max-height: none; min-height: 0; border-radius: 0 !important; border: 0 !important; margin: 0; background: var(--bg);}
.rd:fullscreen {width: 100vw; height: 100vh; background: var(--bg);}
html.rd-full, html.rd-full body {overflow: hidden;}
@media (min-width: 1600px) {
  .rd .main {grid-template-columns: minmax(380px, 460px) 1fr;}
  .rd.embedded {height: min(1180px, calc(100vh - 80px));}
}
@media (max-width: 960px) {
  .rd #fullBtn {display: none;}
}
@media (max-width: 760px) {
  .rd .icon-btn.wide {width: 36px; padding: 0; justify-content: center;}
  .rd .icon-btn.wide span {display: none;}
  .rd .ds-pop {top: 58px; right: 8px; width: calc(100% - 16px);}
}

/* V66: guardar fuera del navegador, compartir, revisión gratis y vista previa del PDF */
.rd .ds-cloud {display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px;}
.rd .ds-cloud .hint {text-align: justify;}
.rd .ds-cloud-btns {display: flex; flex-wrap: wrap; gap: 6px;}
.rd .cl-form {display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg);}
.rd .cl-form .hint {text-align: justify;}
.rd .cl-link {display: flex; gap: 6px; align-items: center;}
.rd .cl-link input {font-size: 0.8rem; padding: 7px 8px;}
.rd .keep {margin-top: 2px;}
.rd .g-prev {display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;}
.rd .g-prev .pg {position: relative; width: 96px; aspect-ratio: 210 / 297; background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 12px -6px rgba(11,31,51,.35);}
.rd .g-prev .pg::before {content: ""; position: absolute; left: 9%; top: 6%; width: 52%; height: 5%; background: #103b5d; border-radius: 2px; filter: blur(1px);}
.rd .g-prev .pg::after {content: ""; position: absolute; left: 9%; right: 9%; bottom: 7%; height: 24%; background: repeating-linear-gradient(#c9d4da 0 3px, transparent 3px 8px); filter: blur(1px);}
.rd .g-prev .pg img {position: absolute; left: 9%; top: 16%; width: 82%; filter: blur(2.5px);}
.rd .g-prev .pg img:not([src]) {display: none;}
.rd .g-prev b {font-size: 0.92rem;}
.rd .g-prev ul {margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: 0.85rem; color: var(--muted);}

/* V67: herramienta fija bajo el menú de la web mientras se trabaja (botón «Soltar» para volver a la página) */
.rd.embedded.is-docked {position: fixed; top: calc(var(--rd-top, 0px) + 8px); left: 0; right: 0; margin: 0 auto; width: calc(100vw - 24px); max-width: 2100px; height: calc(100vh - var(--rd-top, 0px) - 16px) !important; height: calc(100dvh - var(--rd-top, 0px) - 16px) !important; min-height: 0; max-height: none; z-index: 25;}
html.rd-docked {scrollbar-gutter: stable;}
html.rd-docked, html.rd-docked body {overflow: hidden !important;}
.rd .icon-btn.on {background: var(--accent-soft); border-color: var(--accent);}
/* Que la rueda del ratón en el panel no mueva la página cuando llega al final */
.rd .panel-body {overscroll-behavior: contain;}

/* V68: visita guiada «Cómo funciona», «Más información» y «Volver a LabFit Planner» */
.rd.tour-layer {position: fixed; top: 0; left: 0; width: 0; height: 0; min-height: 0; display: block; background: none; z-index: 2147483001;}
.rd .tour {position: fixed; inset: 0; z-index: 2147483001;}
.rd .tour-hole {position: fixed; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(6, 18, 30, .62); outline: 2px solid var(--accent); pointer-events: none; transition: left .25s, top .25s, width .25s, height .25s;}
.rd .tour-card {position: fixed; width: min(430px, calc(100vw - 24px)); box-sizing: border-box; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); padding: 16px 18px 14px; display: grid; gap: 8px; transition: left .25s, top .25s;}
.rd .tour-card h3 {margin: 0; font: 600 1.06rem/1.3 var(--f-display); padding-right: 28px;}
.rd .tour-p {margin: 0; text-align: justify; -webkit-hyphens: auto; hyphens: auto; line-height: 1.55; font-size: .92rem;}
.rd .tour-n {margin: 0; font: 500 .72rem/1 var(--f-mono); letter-spacing: .06em; color: var(--accent-strong);}
.rd .tour-btns {display: flex; justify-content: space-between; gap: 8px; margin-top: 4px;}
.rd .tour-btns [data-tp][hidden] {display: block; visibility: hidden;}
.rd .tour-x {position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 1.45rem; line-height: 1; cursor: pointer;}
.rd .tour-x:hover, .rd .tour-x:focus-visible {background: var(--surface-2); color: var(--ink);}
.rd .icon-btn.hint {border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);}
.rd-back {position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 999px; background: #103b5d; color: #fff; font: 600 .95rem/1 "Instrument Sans", "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); cursor: pointer;}
.rd-back:hover {background: #0b2c47;}
.rd-back[hidden] {display: none;}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .rd-back {background: #7fa9d6; color: #06182a;}}
:root[data-theme="dark"] .rd-back {background: #7fa9d6; color: #06182a;}
@media (prefers-reduced-motion: reduce) {.rd .tour-hole, .rd .tour-card {transition: none;}}
/* V68: «Más información» solo cuando la herramienta se queda fija (pantallas grandes); en pantallas medianas «Empezar de nuevo» solo con icono */
@media (max-width: 960px) {.rd #moreBtn {display: none;}}
@media (min-width: 761px) and (max-width: 1180px) {.rd #resetBtn {width: 36px; padding: 0; justify-content: center;} .rd #resetBtn span {display: none;}}
@media (max-width: 480px) {.rd .top {padding-inline: 12px;} .rd .top-actions {gap: 4px;} .rd .seg button {padding: 6px 7px;}}
/* V77: en el móvil «Deshacer» siempre a mano (antes se ocultaba a 400 px o menos); si falta sitio se quita el nombre, que ya está en la página */
@media (max-width: 400px) {.rd.embedded .brand-txt {display: none;}}

/* V70: «Revisa lo que pides»: lista del presupuesto */
.rd .ord {display: grid; gap: 8px; margin: 4px 0 6px;}
.rd .ord-t {margin: 6px 0 2px; font: 600 .78rem/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong);}
.rd .ord-row {display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);}
.rd .ord-row.off {opacity: .6; background: var(--bg);}
.rd .ord-row img, .rd .ord-ph {width: 58px; height: 46px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center;}
.rd .ord-ph svg {width: 26px; height: 26px; fill: none; stroke: var(--muted); stroke-width: 1.6;}
.rd .ord-main {display: grid; gap: 3px; min-width: 0;}
.rd .ord-main b {font-size: .95rem;}
.rd .ord-main small {color: var(--muted); font-size: .78rem; overflow-wrap: anywhere;}
.rd .ord-no {color: var(--ink) !important; font-weight: 600;}
.rd .ord-acc {grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line);}
.rd .ord-acc .chip {font-size: .76rem; padding: 5px 10px; white-space: nowrap;}
.rd .ord-row .stepper button {width: 28px; height: 30px;}
.rd .ord-row .stepper input {width: 40px;}
.rd .ord-sum {margin: 2px 0 0; font-weight: 700; font-size: .92rem;}
@media (max-width: 420px) {.rd .ord-row {grid-template-columns: 48px 1fr auto;} .rd .ord-row img, .rd .ord-ph {width: 48px; height: 40px;}}

/* V71: escritorio en la paleta, más discreto que el resto (resta sitio para mesas) */
.rd .pal-extra {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; font-size: .82rem; color: var(--muted);}
.rd .pal-mini {display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px dashed var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; cursor: grab; touch-action: none; user-select: none;}
.rd .pal-mini:hover, .rd .pal-mini:focus-visible {border-color: var(--accent);}

/* Página del diseñador de salas */
.rdp-hero{padding-bottom:20px}
.rdp-hero .lead{max-width:72ch}
.rdp-hero .reassure{margin-top:14px}
.rdp-tag{font:500 .8rem var(--f-mono);color:var(--accent-strong);margin-top:12px}
.rdp-app{padding-block:8px clamp(40px,6vw,72px)}
.rdp-app .wrap{max-width:1440px}
@media (min-width:1600px){.rdp-app .wrap{max-width:min(2100px,calc(100vw - 48px))}}
/* En móvil, el botón de Nina no tapa «Siguiente» */
@media (max-width:960px){.rd.embedded .panel-nav{padding-right:84px}}