/* ═══════════════════════════════════════════════════════════════
   diseno3d.css — Belk Diseño 3D · SOLO LAYOUT
   ───────────────────────────────────────────────────────────────
   REQUIERE: css/foundation.css y css/components.css antes; belk-shell
   después (orden del SELLO §9).
   Cero `:root`, cero alias inventados, cero hex de chrome: todo color
   sale de un token --belk-* con respaldo que vale lo mismo. Los hex de
   melamina son DATOS del catálogo y los pone el JS por `style`.

   DOS ESTADOS, UN FORMATO (SELLO §1). El layout no cambia nunca:
   `[data-diseno3d="vacio"]` solo baja el molde a gris y apaga los
   controles; `[data-paso]` solo decide qué panel y qué lienzo se ven.
   El JS no reparte `style.display`.
   ═══════════════════════════════════════════════════════════ */

/* La fuente del cuerpo, como en tapacanto.css y escaneo.css: foundation no la fija. */
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}


/* ── Los dos pasos y los dos estados ───────────────────────────
   Un único sitio donde se decide qué se ve. Todo lo demás en este
   archivo es medida, no visibilidad. */
[data-paso="armar"]  .solo-escena{display:none !important}
[data-paso="escena"] .solo-armar {display:none !important}
[data-diseno3d="vacio"]      .solo-mueble{display:none !important}
[data-diseno3d="con-mueble"] .solo-vacio {display:none !important}

/* ── Marco de la página ──────────────────────────────────────── */
.d3-main{
  min-height:calc(100vh - 56px);
  background:var(--belk-level-1,#0D1B2A);
  padding-bottom:6px;
}

/* Indicador «1 Armar el mueble → 2 En 3D». No es navegación de módulos:
   es en qué parte del mueble está el usuario. */
.d3-pasos{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:10px 14px 0;
  color:var(--belk-text,#F7F3E9);
}
/* Los pasos a la izquierda y el proyecto abierto a la derecha (2026-09-24). */
.d3-arriba{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:10px 14px 0}
.d3-arriba .d3-pasos{padding:0}
.d3-proy{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-left:auto;
  color:var(--belk-text,#F7F3E9); font-size:.85rem;
}
.d3-proy-et{color:var(--belk-text-muted,#C4D0DF)}
.d3-proy-nom{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:4px}
.d3-proy-btn{
  min-height:32px; padding:4px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--belk-border,rgba(247,243,233,.10)); background:transparent;
  color:var(--belk-text-muted,#C4D0DF); font:600 .8rem/1.2 inherit;
}
.d3-proy-btn:hover, .d3-proy-btn:focus-visible{color:var(--belk-text,#F7F3E9); border-color:var(--belk-accent,#51C7F5)}
.d3-proy-btn--aviso{color:var(--belk-accent,#51C7F5); border-color:var(--belk-accent,#51C7F5)}
/* La unidad de toda Belk (cm/mm), junto al proyecto: el control es el de belk-shell.css. */
.d3-unidad{display:flex; align-items:center; gap:6px; font-size:.85rem}
@media (max-width:640px){ .d3-proy{margin-left:0} }
.d3-paso{
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--belk-border,rgba(247,243,233,.10));
  background:transparent;
  color:var(--belk-text-muted,#C4D0DF);
  font:600 .85rem/1.2 inherit; cursor:pointer;
}
.d3-paso b{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.75rem;
  background:var(--belk-border-strong,rgba(247,243,233,.18));
  color:var(--belk-text,#F7F3E9);
}
.d3-paso[aria-selected="true"]{
  border-color:var(--belk-accent,#51C7F5);
  color:var(--belk-text,#F7F3E9);
}
.d3-paso[aria-selected="true"] b{
  background:var(--belk-accent,#51C7F5);
  color:var(--belk-on-accent,#0D1B2A);
}
.d3-paso:focus-visible{outline:2px solid var(--belk-accent,#51C7F5); outline-offset:2px}
.d3-flecha{color:var(--belk-text-muted,#C4D0DF)}

/* ── Tres columnas: panel · lienzo · piezas ──────────────────────
   Escritorio del taller es MÁS extendido que el teléfono (SELLO §12.6):
   el lienzo se queda con todo lo que sobra. */
.d3-body{
  display:grid; gap:12px; padding:12px;
  grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(220px,260px);
  align-items:start;
}
.d3-card{
  background:var(--belk-paper,#FFFFFF);
  color:var(--belk-paper-text,#0D1B2A);
  border:1px solid var(--belk-paper-border,#D8DFE9);
  border-radius:var(--belk-radius,14px);
  overflow:hidden;
}
.d3-card h2{
  margin:0; padding:10px 14px;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--belk-paper-muted,#5A6B82);
  border-bottom:1px solid var(--belk-paper-border,#D8DFE9);
}

/* ── Panel de secciones plegables («abanico») ─────────────────────
   El componente es compartido: .sec-hd / .sec-ti / .sec-sum / .sec-ar /
   .coll viven en css/components.css. Acá solo la piel de esta página. */
.d3-panel .sec{border-top:1px solid var(--belk-paper-border,#D8DFE9)}
.d3-panel .sec-sum{margin-right:10px; font-weight:500}

.d3-panel-hd{
  display:flex; align-items:center; gap:6px; padding:8px 8px 8px 14px;
}
.d3-panel-ti{
  margin-right:auto;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--belk-paper-muted,#5A6B82);
}
.d3-und{
  width:36px; height:36px; display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--belk-paper-border,#D8DFE9);
  border-radius:var(--belk-radius-sm,8px);
  background:var(--belk-paper-sunken,#EDF1F6);
  color:var(--belk-paper-brand,#415A77);
  cursor:pointer;
}
.d3-und svg{width:18px; height:18px}
.d3-und--flip svg{transform:scaleX(-1)}   /* rehacer = deshacer al espejo */
.d3-und:disabled{opacity:.55; cursor:not-allowed}
.d3-und:focus-visible{outline:2px solid var(--belk-paper-brand,#415A77); outline-offset:1px}

/* Filas del panel = BLOQUES (2026-09-22, maqueta ux-drafts/panel-bloques): etiqueta
   arriba, control debajo a todo el ancho, pista pegada al control y una línea fina
   entre bloques. En 300 px la etiqueta a la izquierda y el control a la derecha no
   dejaban saber qué texto iba con qué botón (el dueño lo vio en staging). */
.d3-panel .sec-bd{display:block; padding:2px 13px 4px}
.d3-row{
  display:grid; grid-template-columns:1fr; align-items:start; gap:7px;
  padding:10px 0 11px; border-bottom:1px solid var(--belk-paper-border,#D8DFE9);
  font-size:.9rem; color:var(--belk-paper-text,#0D1B2A);
}
.d3-row>label{font-weight:600; font-size:.92rem}
.d3-row>label .d3-unit{margin-left:6px}
/* Si a la fila le sigue su pista, la línea va DESPUÉS de la pista, no entre las dos. */
.d3-row:has(+ .d3-hint){border-bottom:0; padding-bottom:4px}
.d3-panel .d3-hint{padding:0 0 11px; border-bottom:1px solid var(--belk-paper-border,#D8DFE9)}
.d3-panel .sec-bd>:last-child{border-bottom:0}
/* Número: campo a la izquierda con su unidad. */
.d3-row>span:not(.d3-seg){display:flex; align-items:center; gap:6px}
.d3-in{
  width:110px; min-height:36px; text-align:right; padding:0 10px;
  border:1px solid var(--belk-paper-border,#D8DFE9);
  border-radius:var(--belk-radius-sm,10px);
  font:600 .9rem/1 inherit;
  color:var(--belk-paper-text,#0D1B2A);
  background:var(--belk-paper-sunken,#EDF1F6);
}
.d3-in:focus-visible{outline:2px solid var(--belk-accent,#51C7F5); outline-offset:1px}
.d3-in:disabled{opacity:.6; cursor:not-allowed}
.d3-in--texto{width:100%; text-align:left; font-weight:500}   /* nombre del mueble */
.d3-unit{font-size:.75rem; color:var(--belk-paper-muted,#5A6B82); margin-left:4px}
/* Opciones (2-4): botones IGUALES a todo el ancho, nunca en columna. */
.d3-seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; align-items:stretch}
.d3-seg .belk-btn{min-width:0; padding-left:6px; padding-right:6px; white-space:normal; line-height:1.15}
/* Contador (− n +): en línea, sin estirar. */
.d3-seg--cont{display:inline-grid; grid-template-columns:36px 44px 36px; align-items:center; text-align:center; gap:4px}
.d3-hint{
  margin:0; font-size:.78rem; line-height:1.4;
  color:var(--belk-paper-muted,#5A6B82);
}
/* Interruptor dentro del panel: etiqueta y pastilla en la misma línea, como bloque. */
.d3-panel .tgr{padding:10px 0 11px; border-bottom:1px solid var(--belk-paper-border,#D8DFE9)}
.d3-panel .tgr .lb{font-weight:600; font-size:.92rem; color:var(--belk-paper-text,#0D1B2A)}
.d3-panel .tgr:has(+ .d3-hint){border-bottom:0; padding-bottom:4px}
/* Subgrupo dentro de una sección larga (Ajustes del taller). */
.d3-grupo{
  padding:12px 0 2px; margin-top:2px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--belk-paper-muted,#5A6B82);
  border-top:1px dashed var(--belk-paper-border,#D8DFE9);
}
.d3-grupo:first-child{border-top:0; margin-top:0; padding-top:8px}
/* Cabecera de sección: título en una línea, resumen en la siguiente. */
.d3-panel .sec-hd{display:grid; grid-template-columns:1fr auto; grid-template-areas:"ti ar" "sum sum"; row-gap:2px}
.d3-panel .sec-ti{grid-area:ti}
.d3-panel .sec-ar{grid-area:ar}
.d3-panel .sec-sum{grid-area:sum; margin:0; white-space:normal; font-size:.78rem}
.d3-panel .sec-sum:empty{display:none}
/* El rótulo del «Alto» cambia de texto según cómo se arme el zócalo (Anexo A
   §1b). Va en DOS renglones —rótulo corto arriba, aclaración abajo— para que
   las dos versiones ocupen lo mismo: en un solo renglón la larga se iba a tres
   líneas y empujaba el panel 13 px (medido en los dos estados). */
.d3-row--alto>label{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px}
.d3-row--alto>label small{
  font-size:.72rem; font-weight:500; line-height:1.25;
  color:var(--belk-paper-muted,#5A6B82);
}

/* Lo que ya decidió el taller: se lee, no se vuelve a preguntar. */
.d3-taller{
  margin:0; padding:9px 0 10px; border-bottom:1px solid var(--belk-paper-border,#D8DFE9);
  font-size:.82rem; line-height:1.4;
  color:var(--belk-paper-muted,#5A6B82);
}
.d3-link{
  border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:.78rem;
  color:var(--belk-paper-brand,#415A77);
  text-decoration:underline;
}
.d3-link:disabled{cursor:not-allowed; text-decoration:none}
.d3-link:focus-visible{outline:2px solid var(--belk-accent,#51C7F5); outline-offset:2px}

/* Tipo de mueble: silueta + nombre + familia. */
.d3-tipo{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px;
  border:1px solid var(--belk-paper-border,#D8DFE9);
  border-radius:var(--belk-radius-sm,12px);
  background:var(--belk-paper-sunken,#EDF1F6);
  color:var(--belk-paper-text,#0D1B2A);
  cursor:pointer; font:inherit;
}
.d3-tipo svg{width:28px; height:28px; flex-shrink:0; color:var(--belk-paper-brand,#415A77)}
.d3-tipo b{display:block; font-size:.9rem}
.d3-tipo small{display:block; font-size:.75rem; color:var(--belk-paper-muted,#5A6B82)}

/* Anchos de los módulos. */
.d3-mods{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.d3-mod{
  min-width:64px; min-height:36px; display:grid; place-items:center; padding:0 8px;
  border:1px solid var(--belk-paper-border,#D8DFE9);
  border-radius:var(--belk-radius-sm,10px);
  background:var(--belk-paper-sunken,#EDF1F6);
  color:var(--belk-paper-text,#0D1B2A);
  font:700 .85rem/1 inherit; cursor:pointer;
}
.d3-mod[aria-current="true"]{
  border-color:var(--belk-accent,#51C7F5);
  box-shadow:inset 0 0 0 2px var(--belk-accent,#51C7F5);
}
.d3-cuenta{
  min-width:40px; text-align:center; font-weight:700; font-size:.9rem;
  color:var(--belk-paper-text,#0D1B2A);
}

/* Colores de melamina: la muestra es un DATO del catálogo. */
.d3-color{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:7px 10px;
  border:1px solid var(--belk-paper-border,#D8DFE9);
  border-radius:var(--belk-radius-sm,10px);
  background:var(--belk-paper-sunken,#EDF1F6);
  color:var(--belk-paper-text,#0D1B2A);
  font:600 .82rem/1.2 inherit; cursor:pointer;
}
.d3-muestra{
  width:26px; height:26px; border-radius:6px; flex-shrink:0;
  border:1px solid var(--belk-paper-border,#D8DFE9);
}
/* Electrodomésticos: nombre y medida estándar en dos líneas. */
.d3-color--eq{flex-direction:column; align-items:flex-start; gap:2px}
.d3-color--eq small{font-weight:400; font-size:.74rem; color:var(--belk-paper-muted,#5A6B82)}
/* Revisión de la cocina (fase 4): el nivel lo dice la raya y el rótulo. */
.d3-avisos{margin:0; padding:0; list-style:none; display:grid; gap:6px}
.d3-aviso{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start;
  padding:7px 8px 7px 10px; border-radius:var(--belk-radius-sm,10px);
  background:var(--belk-paper-alt,#E7ECF3); border-left:3px solid var(--belk-paper-brand,#415A77);
  color:var(--belk-paper-text,#0D1B2A); font-size:.8rem; line-height:1.35;
}
.d3-aviso b{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em}
.d3-aviso--error{border-left-color:var(--belk-paper-err,#8E3B31); background:var(--belk-paper-err-soft,#F8E7E3)}
.d3-aviso--error b{color:var(--belk-paper-err,#8E3B31)}
.d3-aviso--advertencia{border-left-color:var(--belk-paper-warn,#9C4A12)}
.d3-aviso--advertencia b{color:var(--belk-paper-warn,#9C4A12)}
.d3-aviso--sugerencia b{color:var(--belk-paper-brand,#415A77)}
.d3-rev-ok{margin:0 0 6px; padding:7px 10px; border-radius:var(--belk-radius-sm,10px);
  border-left:3px solid var(--belk-paper-ok,#2E6B4F); background:var(--belk-paper-alt,#E7ECF3);
  color:var(--belk-paper-text,#0D1B2A); font-size:.8rem}
/* Fase 6: los pasos de «Cómo se arma», las escenas y el corte. */
.d3-armado{padding:6px 0; border-top:1px solid var(--belk-paper-border,#D8DFE9)}
.d3-escenas{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.d3-rango{width:100%; accent-color:var(--belk-paper-brand,#415A77)}
/* El cuestionario del mueble (2026-09-23): un paso abierto a la vez. */
.d3-progreso{margin:0; padding:6px 14px; font-size:.8rem; font-weight:600;
  color:var(--belk-paper-muted,#5A6B82); border-bottom:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.d3-progreso:empty{display:none}
.d3-listo{margin:10px 12px 4px; padding:10px 12px; font-size:.85rem;
  color:var(--belk-paper-text,#0D1B2A); background:var(--belk-paper-alt,#E7ECF3);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); border-left:3px solid var(--belk-paper-ok,#2E6B4F);
  border-radius:var(--belk-radius-sm,8px)}
.d3-listo[hidden]{display:none}
.d3-listo p{margin:0 0 8px}
.d3-pregunta{margin:4px 0 10px; font-size:.95rem; font-weight:700; color:var(--belk-paper-text,#0D1B2A)}
/* Paso 1 del 3D: la planta chica del salón con los muros A–D (js/diseno3d/salon.js). */
.d3-salon{margin:0 0 6px}
.d3-plano-salon{display:block; width:100%; max-width:340px; height:auto; margin:0 auto}
.d3-pl-piso{fill:var(--belk-paper-sunken,#EDF1F6)}
.d3-pl-muro{stroke:var(--belk-paper-text,#0D1B2A); stroke-width:6; stroke-linecap:square}
.d3-pl-muro--abierto{stroke:var(--belk-paper-border,#D8DFE9); stroke-width:2; stroke-dasharray:5 4}
.d3-pl-muro--sel{stroke:var(--belk-accent,#51C7F5)}
.d3-pl-ventana{stroke:var(--belk-accent,#51C7F5); stroke-width:8}
.d3-pl-puerta{stroke:var(--belk-paper,#FFFFFF); stroke-width:8}
.d3-pl-hoja{stroke:var(--belk-paper-text,#0D1B2A); stroke-width:2}
.d3-pl-barrido{fill:none; stroke:var(--belk-paper-text,#0D1B2A); stroke-width:1; stroke-dasharray:3 3}
.d3-pl-toma{stroke:var(--belk-paper-warn,#9C4A12); stroke-width:8}
.d3-pl-letra{cursor:pointer}
.d3-pl-letra circle{fill:var(--belk-paper,#FFFFFF); stroke:var(--belk-paper-text,#0D1B2A); stroke-width:1.5}
.d3-pl-letra text{fill:var(--belk-paper-text,#0D1B2A); font:700 13px/1 inherit; pointer-events:none}
.d3-pl-letra--sel circle{fill:var(--belk-accent,#51C7F5); stroke:var(--belk-accent,#51C7F5)}
.d3-pl-letra:focus-visible circle{stroke:var(--belk-accent,#51C7F5); stroke-width:3}
.d3-pie{display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-top:8px; padding:10px 0 4px; border-top:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.d3-panel .sec-num{display:inline-grid; place-items:center; width:20px; height:20px; margin-right:6px;
  border-radius:50%; font-size:.7rem; font-weight:700; letter-spacing:0;
  background:var(--belk-paper-sunken,#EDF1F6); color:var(--belk-paper-text,#0D1B2A)}
.d3-panel .sec-hd.hecho .sec-num{background:var(--belk-paper-ok,#2E6B4F); color:var(--belk-on-paper-brand,#FFFFFF); font-size:0}
.d3-panel .sec-hd.hecho .sec-num::after{content:'✓'; font-size:.75rem}
.d3-seg--wrap{display:flex; flex-wrap:wrap; gap:6px}
.tb-mas{font-weight:700}
/* Colores: el mismo selector de la página Diseño (marca → categoría → muestra). */
.d3-paleta-cont{margin:6px 0}
.d3-paleta-cont[hidden]{display:none}
.d3-paleta-cats{margin:6px 0}
.d3-paleta{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:6px; margin-top:6px}
.d3-paleta .d3-color span{display:flex; flex-direction:column; min-width:0}
.d3-paleta .d3-color small{font-weight:400; font-size:.7rem; color:var(--belk-paper-muted,#5A6B82)}
.d3-panel .mlam-chip{display:block; object-fit:cover; flex-shrink:0; width:36px; height:26px; border-radius:3px;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
/* Mini barra flotante del mueble elegido (3D): arriba del mueble, centrada. */
.d3-flot{position:absolute; z-index:5; display:flex; gap:4px; padding:4px;
  transform:translate(-50%, calc(-100% - 12px));
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D1B2A);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); border-radius:var(--belk-radius-sm,8px);
  box-shadow:var(--belk-shadow-1,0 2px 8px rgba(13,35,80,.08))}
.d3-flot[hidden]{display:none}
/* Sin lugar sobre el mueble elegido, va DEBAJO de él (app.js, ponerFlot). */
.d3-flot[data-lado="abajo"]{transform:translate(-50%, 12px)}
.d3-flot .belk-btn{min-width:32px; justify-content:center; font-size:1rem}
.d3-flot .tb-ic{width:16px; height:16px}
.d3-abertura{padding:8px 0 10px; border-top:1px solid var(--belk-paper-border,#D8DFE9)}
/* La tarjeta de una puerta o ventana: tipo · letras del muro · Quitar en una línea y
   las 4 medidas en 2 × 2 (antes 5 filas a lo alto, ~340 px por cada una). */
.d3-ab-hd{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.9rem; color:var(--belk-paper-text,#0D1B2A)}
.d3-ab-hd>b{min-width:62px}
.d3-ab-hd .d3-seg .belk-btn{min-width:34px; min-height:32px; padding:0 8px}
.d3-ab-pie{display:flex; justify-content:flex-end; margin-top:8px}
.d3-enlaces{list-style:none; margin:0 0 10px; padding:0}
.d3-enlaces li{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px;
  padding:6px 0; border-top:1px solid var(--belk-paper-border,#D8DFE9); font-size:.8rem; color:var(--belk-paper-text,#0D1B2A)}
.d3-ab-res{margin:6px 0 0; font-size:.8rem; color:var(--belk-paper-muted,#5A6B82)}
.d3-celdas{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin-top:10px}
.d3-celda{display:flex; flex-direction:column; gap:4px; font-size:.78rem; font-weight:600; color:var(--belk-paper-text,#0D1B2A)}
.d3-celda-in{display:flex; align-items:center; gap:4px}
.d3-celda .d3-in{width:100%; min-width:0}
.d3-colores{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:6px}
.d3-tipos{display:grid; gap:6px}
.d3-sil{width:22px; height:22px; flex-shrink:0; color:var(--belk-paper-brand,#415A77)}
.d3-color[aria-current="true"]{
  border-color:var(--belk-accent,#51C7F5);
  box-shadow:inset 0 0 0 2px var(--belk-accent,#51C7F5);
}

/* Lista de muebles de la escena. */
.d3-muebles{margin:0; padding:0; list-style:none}
.d3-muebles li{
  display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center;
  padding:9px 0; font-size:.85rem;
  border-bottom:1px solid var(--belk-paper-border,#D8DFE9);
}
.d3-muebles li:last-child{border-bottom:0}
.d3-muebles li[aria-selected="true"]{background:color-mix(in srgb, var(--belk-accent,#51C7F5) 22%, var(--belk-paper-sunken,#EDF1F6))}
.d3-muebles b{display:block}
.d3-muebles small{color:var(--belk-paper-muted,#5A6B82); font-size:.72rem}
.d3-herr{display:grid; grid-template-columns:1fr 1fr; gap:6px}
/* En 300 px «Cocina en L de ejemplo» no cabe en una línea: se parte, no se corta. */
.d3-herr .belk-btn{white-space:normal; line-height:1.15; min-width:0; justify-content:flex-start}

/* ── Lienzo: alzado (paso 1) y escena (paso 2) ────────────────── */
.d3-lienzo{
  display:flex; flex-direction:column; position:relative;
  min-height:520px;
}
/* Mismo patrón que el riel del plano del Optimizador (SELLO §4). No se movió
   a components.css porque el encargo solo autoriza mover `.sec*`; los valores
   son los mismos que css/index.css. */
.tb-acts{
  display:flex; gap:5px; flex-wrap:wrap; align-items:center;
  padding:8px 10px;
  border-bottom:1px solid var(--belk-paper-border,#D8DFE9);
}
.tb-acts .belk-btn{gap:5px}

/* ── Barra de vistas del paso 2 (F A I D T 3D + cámara + proyección + estilo).
   Botones cuadrados de 34: son 18 y con nombre no caben pegados al dibujo. El
   nombre va en `title` (tooltip) y en aria-label; .tb-lbl queda para lectores. */
.tb-3d{gap:6px 3px; row-gap:6px}
.tb-grupo{display:flex; gap:3px; align-items:center; flex-wrap:nowrap}
.tb-3d .belk-btn.tb-ico{width:30px; min-width:30px; height:32px; min-height:32px; padding:0; gap:0; justify-content:center}
.tb-3d .tb-div{margin:2px 1px}
.tb-3d .tb-lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.tb-3d .tb-ic{width:18px; height:18px}
.tb-letra{font-weight:800; font-size:.82rem; letter-spacing:.02em; line-height:1}
/* Con el dedo, el mínimo táctil de 44 (SELLO §4). La barra scrollea en su eje. */
@media (max-width:768px), (max-height:560px){
  .tb-3d .belk-btn.tb-ico{width:44px; min-width:44px; height:44px; min-height:44px}
  .tb-3d .tb-ic{width:20px; height:20px}
}
.tb-ic{width:15px; height:15px; flex-shrink:0}
.tb-acts .tb-lbl{white-space:nowrap}
.tb-div{
  width:1px; align-self:stretch; margin:2px 3px;
  background:var(--belk-paper-border,#D8DFE9);
}

.d3-alzado,.d3-canvas{
  flex:1; min-height:0; display:grid; place-items:center; position:relative;
  padding:10px;
}
/* Papel liso: el recinto se lee por sus filos (estilo SketchUp, 2026-09-23); una
   cuadrícula detrás del 3D competía con las aristas del mueble. */
.d3-canvas{background:var(--belk-paper,#FFFFFF)}
.d3-alzado svg,.d3-canvas svg{max-width:100%; max-height:100%; height:auto}
/* El dibujo de armar lo dimensiona vista.js (encajado × zoom): sin topes, o el
   zoom no pasaría del ancho de la tarjeta. Ampliado, se arrastra (SELLO §4). */
/* Flex al INICIO + márgenes automáticos: centra cuando cabe y, ampliado, el
   sobrante va hacia la derecha y abajo, donde se puede scrollear. Con
   `center` (o grid centrado) la mitad se salía por la izquierda sin alcance. */
.d3-alzado{overflow:auto; display:flex; align-items:flex-start; justify-content:flex-start}
.d3-alzado svg{max-width:none; max-height:none; flex:none; margin:auto}
.d3-alzado.arrastrando{cursor:grabbing; user-select:none}
/* El <canvas> de three.js llena su tarjeta: escena.redimensionar() lee su
   getBoundingClientRect, así que el tamaño lo pone el CSS, no el JS. */
.d3-canvas canvas.d3-webgl{position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); display:block}
/* El molde: gris y quieto. Un esqueleto que late promete algo que quizá no
   llegue (SELLO §1). */
[data-diseno3d="vacio"] .d3-alzado>*,
[data-diseno3d="vacio"] .d3-canvas>*{opacity:.16}
.d3-espera{
  font-size:.85rem; text-align:center; max-width:28ch; line-height:1.4;
  color:var(--belk-paper-muted,#5A6B82);
}
.d3-cota{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-size:.78rem; padding:4px 8px;
  color:var(--belk-paper-muted,#5A6B82);
  background:var(--belk-paper,#FFFFFF);
  border:1px solid var(--belk-paper-border,#D8DFE9);
  border-radius:var(--belk-radius-sm,8px);
}
.d3-sinwebgl{
  margin:0; padding:8px 14px; font-size:.82rem; line-height:1.35;
  color:var(--belk-paper-text,#0D1B2A);
  background:var(--belk-warn-soft,#FFF3CD);
  border-top:1px solid var(--belk-paper-border,#D8DFE9);
}
/* ── Planos del proyecto (fase 2): ocupan el sitio del 3D ─────────
   Pestañas (Planta · una por pared) y el dibujo encajado en la tarjeta; el
   SVG trae su viewBox en mm y se escala solo. */
.d3-planos{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--belk-paper,#FFFFFF)}
.d3-planos[hidden]{display:none}
body.d3-con-planos .d3-lienzo.solo-escena .d3-canvas{display:none}
.d3-planos-tabs{display:flex; gap:6px; flex-wrap:wrap; padding:8px 10px;
  border-bottom:1px solid var(--belk-paper-border,#D8DFE9)}
.d3-planos-dibujo{flex:1; min-height:320px; padding:10px; overflow:auto; display:flex}
.d3-planos-dibujo svg{width:100%; height:100%; min-height:300px; margin:auto}

/* Con WebGL no hay nada que avisar: lo enciende el JS por clase, no por
   style (una media query tiene que poder reorganizarlo). */
.d3-sinwebgl{display:none}
body.d3-sin-webgl .d3-sinwebgl{display:block}

/* Pantalla completa = CLASE + API, en ese orden (SELLO §4): en iPhone
   requestFullscreen() no existe para un <div>. z-index 350: sobre topbar
   (300) y cápsula (340), bajo modales (400). */
body.d3-full .d3-lienzo{
  position:fixed; inset:0; z-index:350; border-radius:0; min-height:0;
  max-height:none;
}
body.d3-full .d3-arriba,
body.d3-full .d3-panel,
body.d3-full .d3-piezas,
body.d3-full .belk-acts{display:none}

/* ── Piezas ──────────────────────────────────────────────────── */
.d3-piezas{display:flex; flex-direction:column; max-height:calc(100vh - 150px)}
/* Dos pestañas: lo que se corta y lo que se compra. Fila de .belk-btn--sm
   (SELLO §3), la elegida con --accent. */
.d3-tabs{
  display:flex; gap:6px; padding:8px 14px;
  border-bottom:1px solid var(--belk-paper-border,#D8DFE9);
}
/* Encabezado de grupo de ferretería: no es una fila que se pueda tocar. */
.d3-piezas tr.d3-grp{cursor:default}
.d3-piezas tr.d3-grp td{
  padding:8px 14px 4px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--belk-paper-muted,#5A6B82);
  background:var(--belk-paper-sunken,#EDF1F6);
}
/* Paso 2: «Por mueble» / «Para cortar». */
.d3-vistas{display:flex; gap:6px; padding:8px 14px 0}
.d3-vistas[hidden]{display:none}
.d3-vistas .belk-btn{flex:1}
/* Cabecera de un mueble: se toca para abrir o cerrar sus piezas. */
.d3-piezas tr.d3-grp--mueble{cursor:pointer}
.d3-piezas tr.d3-grp--mueble td,
.d3-piezas tr.d3-grp--mat td{
  font-size:.8rem; letter-spacing:0; text-transform:none; font-weight:700;
  color:var(--belk-paper-text,#0D1B2A);
}
.d3-piezas tr.d3-grp--mueble td,
.d3-piezas tr.d3-grp--mat td{text-align:left; white-space:normal}
.d3-piezas tr.d3-grp .d3-de{font-weight:400; padding-left:14px}
.d3-piezas tr.d3-grp--mueble[aria-current="true"] td{box-shadow:inset 3px 0 0 var(--belk-paper-brand,#415A77)}
/* Acotada a la lista: sin `.d3-piezas` pisaba la flecha «→» del indicador de pasos, que va
   sobre el marino (revisión 2026-09-24, CSS-1). */
.d3-piezas .d3-flecha{display:inline-block; width:14px; color:var(--belk-paper-muted,#5A6B82)}
/* Segundo nivel del acordeón: los módulos de un mueble. */
.d3-piezas tr.d3-grp--modulo{cursor:pointer}
.d3-piezas tr.d3-grp--modulo td{
  padding:6px 14px 6px 26px; font-size:.78rem; letter-spacing:0; text-transform:none; font-weight:600;
  text-align:left; white-space:normal;
  color:var(--belk-paper-text,#0D1B2A); background:var(--belk-paper-alt,#E7ECF3);
}
/* El código de la pieza («3-5»): mueble 3, pieza 5. */
.d3-cod{
  display:inline-block; min-width:30px; margin-right:6px; padding:0 4px;
  border:1px solid var(--belk-paper-border,#D8DFE9); border-radius:4px;
  font-size:.7rem; font-weight:600; text-align:center; font-variant-numeric:tabular-nums;
  color:var(--belk-paper-muted,#5A6B82);
}
/* De qué muebles viene una fila juntada. */
.d3-de{display:block; font-size:.72rem; color:var(--belk-paper-muted,#5A6B82)}
.d3-tot{
  padding:10px 14px; font-size:.85rem;
  color:var(--belk-paper-text,#0D1B2A);
  border-bottom:1px solid var(--belk-paper-border,#D8DFE9);
}
.d3-tot b{font-size:1.1rem}
.d3-tabla-wrap{overflow:auto; flex:1; min-height:0}
.d3-piezas table{width:100%; border-collapse:collapse; font-size:.82rem}
.d3-piezas td{
  padding:7px 14px; text-align:left;
  color:var(--belk-paper-text,#0D1B2A);
  border-bottom:1px solid var(--belk-paper-border,#D8DFE9);
}
.d3-piezas td:last-child{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.d3-piezas tr{cursor:pointer}
.d3-piezas tr[aria-selected="true"] td{background:color-mix(in srgb, var(--belk-accent,#51C7F5) 22%, var(--belk-paper-sunken,#EDF1F6))}
/* Filas de molde: barras grises en su sitio, sin texto. */
#d3Molde td i{
  display:block; height:10px; border-radius:5px;
  background:var(--belk-paper-text,#0D1B2A); opacity:.16;
}
#d3Molde td:last-child i{width:70px; margin-left:auto}
[data-diseno3d="con-mueble"] #d3Molde{display:none}

/* Controles apagados, nunca escondidos (SELLO §1). El molde no se puede
   tocar: lo impide `disabled` en el control, y esto solo lo atenúa. */
[data-diseno3d="vacio"] .d3-panel .sec-bd{opacity:.55}

/* ── Teléfono y tablet ────────────────────────────────────────
   Una columna: el dibujo primero (es lo que el carpintero mira), después
   el panel y las piezas. El corte va también por ALTO: acostado un
   teléfono da 791 × 358 px y por ancho pasaría como escritorio. */
@media (max-width:1023px){
  .d3-body{grid-template-columns:1fr}
  .d3-lienzo{order:-1; min-height:55vh}
  .d3-piezas{max-height:none}
}
@media (max-width:768px), (max-height:560px){
  .d3-body{padding:8px; gap:8px}
  .tb-acts{width:100%; gap:4px}
  .tb-acts .tb-div{margin:2px 1px}
  .tb-acts .tb-lbl{display:none}
  .tb-acts .belk-btn{min-width:44px; min-height:44px; justify-content:center; padding:0; gap:0}
  .tb-acts .tb-ic{width:19px; height:19px}
  .d3-lienzo{min-height:46vh}
}
/* ── Escritorio: tres columnas con scroll PROPIO (pedido del dueño, 2026-09-23).
   La página no se desplaza: el panel de armar scrollea solo, el dibujo scrollea
   solo bajo su riel de vistas, y las piezas quedan a la vista siempre. Alto =
   pantalla − cabecera (52) − indicador de pasos (46). En teléfono se apilan y
   la página sigue siendo la que se desplaza. */
@media (min-width:1024px){
  /* El cuerpo mide exactamente la pantalla y reparte en columna: cabecera,
     pasos, las tres columnas (lo que sobra) y la barra de acciones.
     Aprovechar el alto (dueño, 2026-09-23): antes quedaba una franja blanca
     de ~170 px (el relleno del body para la cápsula + la barra de acciones
     centrada debajo). Ahora la barra de acciones sigue EN EL FLUJO (SELLO §4),
     pero a la izquierda y a la misma altura que la cápsula de módulos, que
     flota al centro: comparten la misma franja de abajo. */
  body{
    display:flex; flex-direction:column; margin:0; overflow:hidden;
    box-sizing:border-box; height:100vh; height:100dvh;
    padding-bottom:0 !important;
    background:var(--belk-level-1,#0D1B2A);
  }
  .d3-main{flex:1; min-height:0; display:flex; flex-direction:column; padding-bottom:0}
  .d3-arriba{flex-shrink:0}
  .d3-body{flex:1; min-height:0; align-items:stretch; padding-bottom:10px}
  body.has-shell .belk-acts{flex-shrink:0; margin:0 0 16px 12px; align-self:flex-start}
  .d3-card{min-height:0}
  .d3-panel{overflow:auto; overscroll-behavior:contain}
  .d3-panel-hd{position:sticky; top:0; z-index:2; background:var(--belk-paper,#FFFFFF)}
  .d3-lienzo{min-height:0}
  /* El dibujo entra a lo ancho y scrollea a lo alto; `margin:auto` lo centra
     cuando sobra sitio y se apaga solo cuando desborda (así nunca se corta por
     arriba). */
  .d3-alzado{display:flex; overflow:auto; align-items:flex-start; justify-content:flex-start; padding-bottom:24px}
  .d3-alzado svg{margin:auto}
  .d3-piezas{max-height:none}
}
/* La cápsula va COMPLETA, con nombres (dueño, 2026-09-24: el 3D se trabaja en el
   computador): `body.shell-fixed`, la misma excepción del optimizador (belk-shell.css).
   Diseño 3D no es uno de los 5 módulos: sin `data-active` no se marca ninguno (el
   glider quedaba sobre «Optimizador») y la pestaña «PASO n/4» no aplica. */
body.shell-fixed .belk-nav:not([data-active]) .bn-glider,
body.shell-fixed .belk-nav.bn-compact:not([data-active]) .bn-glider{opacity:0}
body.shell-fixed .belk-nav:not([data-active]) ~ .bn-step{display:none}
/* Entre 1024 y 1439 la cápsula centrada y la barra con nombres se tocarían:
   la barra pasa a iconos (el nombre sigue en aria-label). */
@media (min-width:1024px) and (max-width:1439px){
  body.has-shell .belk-acts .ba-i{width:44px; padding:0; gap:0}
  body.has-shell .belk-acts .ba-i::before{content:none}
}

/* Si aun así no cabe (pantalla de 320), el riel scrollea en su propio eje
   antes que romper la página en horizontal. */
@media (max-width:560px){
  .tb-acts{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%}
  .tb-acts::-webkit-scrollbar{display:none}
  .d3-colores{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}
/* Acostado y sin alto: el riel se va al costado, que es el recurso que
   sobra (SELLO §4). */
@media (max-height:480px) and (min-width:700px){
  .d3-lienzo{flex-direction:row}
  .tb-acts{
    flex-direction:column; flex-wrap:nowrap; width:57px; align-items:stretch;
    border-bottom:0; border-right:1px solid var(--belk-paper-border,#D8DFE9);
  }
  .tb-acts .tb-div{width:auto; height:1px; align-self:stretch; margin:1px 2px}
}

/* ── Corregir el escaneo (dueño, 15-oct-2026, fase 6) ───────────
   La franja de arriba solo con ?desde=escaneo (corregir.js pone body[data-corregir]).
   Pinta sobre el marco: tinta --belk-text. «Listo» es la primaria de la vista,
   así que «Ver despiece» (la otra primaria del paso 2) se retira en este modo. */
.d3-corregir{display:none}
body[data-corregir="escaneo"] .d3-corregir{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; flex-shrink:0;
  margin:10px 14px 0; padding:12px 14px; border-radius:12px;
  background:var(--belk-level-2,#16283B); border:1px solid var(--belk-accent,#51C7F5);
}
.d3-corregir-tx{flex:1 1 260px; min-width:0}
.d3-corregir-ti{margin:0; font-size:16px; font-weight:700; color:var(--belk-text,#F7F3E9)}
.d3-corregir-sub{margin:2px 0 0; font-size:14px; color:var(--belk-text-muted,#C4D0DF)}
.d3-corregir-btns{display:flex; flex-wrap:wrap; gap:8px}
.d3-corregir .belk-btn{min-height:44px}
body[data-corregir="escaneo"] #d3ActDespiece{display:none}
@media (max-width:520px){
  .d3-corregir-btns{flex:1 1 100%}
  .d3-corregir .belk-btn{flex:1 1 0}
}

/* La hoja de corrección: la tarjeta-hoja de belk-flot.js con los controles del
   panel adentro, sobre PAPEL (los mismos .d3-row / .d3-seg del panel). En el
   teléfono se apoya abajo, a la mitad de la pantalla: el mueble queda a la vista
   arriba y el pulgar llega a los botones. */
.d3-hoja-cuerpo{
  margin-top:4px; padding:4px 12px 8px; border-radius:12px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D1B2A);
  border:1px solid var(--belk-paper-border,#D8DFE9);
}
.d3-hoja-cuerpo .d3-mods{margin:8px 0 4px}
/* Una zona de la columna: su tipo, cuántas, repisas y alto, en un recuadro. */
.d3-zona{
  margin:8px 0; padding:0 10px; border-radius:10px;
  border:1px solid var(--belk-paper-border,#D8DFE9); background:var(--belk-paper-alt,#E7ECF3);
}
.d3-zona .d3-row:last-of-type{border-bottom:0}
.d3-zona-quitar{display:flex; justify-content:flex-end; padding:0 0 10px}
.d3-zona-mas{display:flex; flex-wrap:wrap; gap:6px; padding:8px 0 10px}
.d3-zona-mas .belk-btn{flex:1 1 auto; min-height:40px}
@media (max-width:520px){
  .bkf--tarjeta.bkf--hoja.d3-hoja{
    top:auto; bottom:0; left:0; right:0; width:auto;
    max-height:52vh; border-radius:18px 18px 0 0;
    padding:14px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    transform:translateY(12px);
  }
  .bkf--tarjeta.bkf--hoja.d3-hoja.is-open{transform:translateY(0)}
  .bkf--tarjeta.bkf--hoja.d3-hoja .bkf-tx{margin:4px 0 8px}
}

/* ═══════════════════════════════════════════════════════════════
   PASO A PASO = EL JUEGO CON PERFIL DE TALLER (2026-10-20 · js/diseno3d/guiado-juego.js)
   ───────────────────────────────────────────────────────────────
   Tercer valor del MISMO atributo: body[data-paso="guiado"] (SELLO §1). Los componentes
   (tarjetas, carruseles, cápsula, hojas, «para ti», reacciones, aviso con Deshacer, barra de
   historias) son los de Mi mueble y su CSS es css/juego.css (la raíz del juego aquí es `.jg`);
   esto solo los acomoda al marco del taller: la barra de historias sobre el MARCO (tinta
   --belk-text, la marca del avance en celeste), el paso en curso en PAPEL a la izquierda con
   la cápsula al pie, el 3D de siempre (#d3Canvas) al centro y el resumen a la derecha. Los
   acordeones de «Armar» y «En 3D», el riel de vistas, la lista de piezas y el pie .belk-acts
   no se ven.
   ═══════════════════════════════════════════════════════════ */
body:not([data-paso="guiado"]) .solo-guiado{display:none !important}
[data-paso="guiado"] .solo-armar,
[data-paso="guiado"] .solo-escena,
[data-paso="guiado"] .d3-pasos,
[data-paso="guiado"] .d3-piezas,
[data-paso="guiado"] .belk-acts,
[data-paso="guiado"] #d3Riel3d,
[data-paso="guiado"] #d3Planos,
[data-paso="guiado"] #d3Flot,
[data-paso="guiado"] #d3CotaEscena{display:none !important}
[data-paso="guiado"] .d3-lienzo.solo-escena{display:flex !important}
.d3g-panel [hidden], .d3g-resumen [hidden]{display:none !important}

/* ── La barra de historias (sobre el marco) ── */
.d3g-barra{
  display:flex; align-items:center; gap:4px 12px; flex-wrap:wrap; flex-shrink:0;
  padding:6px 14px 0; color:var(--belk-text,#F7F3E9);
}
.d3g-barra .mmj-historias{flex:1 1 320px; min-width:0}
.d3g-barra .mmj-historias:focus-visible{outline-color:var(--belk-accent,#51C7F5)}
/* La pista y el avance, pensados para papel en Mi mueble: sobre marino, el avance va en celeste. */
.d3g-barra .mmj-seg > i, .d3g-barra .mmj-sub > i{background:var(--belk-border-strong,rgba(247,243,233,.18))}
.d3g-barra .mmj-seg > i::after, .d3g-barra .mmj-sub > i::after{background:var(--belk-accent,#51C7F5)}
.d3g-barra .mmj-seg.is-visto > i::after{background:color-mix(in srgb, var(--belk-accent,#51C7F5) 45%, var(--belk-level-1,#0D1B2A))}
.d3g-cuenta{margin:0; font-weight:700; font-size:.95rem; white-space:nowrap; color:var(--belk-text,#F7F3E9)}
.d3g-herr{display:flex; align-items:center; gap:6px}
.d3g-herr .d3-und{width:48px; height:48px}
.d3g-herr .d3-und:focus-visible{outline-color:var(--belk-accent,#51C7F5)}

/* ── Tres columnas: el paso · el 3D · el resumen ── */
[data-paso="guiado"] .d3-body{grid-template-columns:minmax(340px,400px) minmax(0,1fr) auto}
[data-paso="guiado"] .d3-lienzo.solo-escena{min-height:520px}
.d3g-panel{display:flex; flex-direction:column; position:relative; color:var(--belk-paper-text,#0D1B2A)}
.d3g-cab{padding:14px 16px 4px}
.d3-card h2.mmj-pregunta.d3g-titulo{
  margin:0; padding:0; border:0; text-align:left; text-transform:none; letter-spacing:-0.01em;
  font-size:clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight:800; line-height:1.2; color:var(--belk-paper-text,#0D1B2A);
}
.d3g-titulo:focus-visible{outline:2px solid var(--belk-accent,#51C7F5); outline-offset:2px}
.d3g-cuerpo{display:flex; flex-direction:column; gap:12px; padding:4px 16px 16px; color:var(--belk-paper-text,#0D1B2A)}
.d3g-cuerpo .mmj-opciones{gap:8px}
/* La cocina de ejemplo antes de elegir Cocina: atenuada (todavía no es la del proyecto). */
#d3Canvas.d3g-muestra{opacity:.35; transition:opacity .3s ease}
/* El cuerpo scrollea solo (escritorio): sus partes no se encogen para caber (un carrusel, que
   tiene su propio scroll, se aplastaba). */
.d3g-cuerpo > *, .d3g-opciones--col > *{flex-shrink:0}
.d3g-opciones--col{display:flex; flex-direction:column; gap:10px}
.d3g-ayuda{margin:0; font-size:.95rem; line-height:1.4; color:var(--belk-paper-muted,#5A6B82)}
/* Adam: su cara y la frase del paso, arriba del panel (no sobre el 3D: ahí van las cotas). */
.d3g-adam{min-height:48px}
.d3g-adam.mm-anf--cara .mm-anf-burbuja{max-width:none; flex:1}
/* Mientras Adam «escribe», la burbuja ya guarda el alto de su frase (como Mi mueble donde la
   burbuja va en el flujo): lo de abajo no salta cuando aparece el texto. */
.d3g-adam .mm-anf-burbuja.is-escribe{position:relative; display:block; font-size:15px; line-height:1.35}
.d3g-adam .mm-anf-burbuja.is-escribe .mm-anf-puntos{position:absolute; left:14px; top:50%; transform:translateY(-50%)}
.d3g-cuerpo .mmj-parati, .d3g-cuerpo .mmj-carrusel{margin-inline:-16px}
.d3g-cuerpo .mmj-parati{padding-inline:16px}
/* La cápsula: al pie del panel (no flota sobre el 3D) y su aviso con Deshacer encima. */
.d3g-panel .mmj-nav{
  position:sticky; bottom:0; left:auto; right:auto; width:auto; z-index:3; margin-top:auto;
  padding:10px 16px 14px; background:var(--belk-paper,#FFFFFF); border-top:1px solid var(--belk-paper-border,#D8DFE9);
  view-transition-name:none;
}
.d3g-panel .mmj-toast{position:absolute; left:12px; right:12px; bottom:92px; width:auto}
/* Los campos en mm y lo que había en la fase 1 (planta, resumen) siguen igual. */
.d3g-sub{
  margin:6px 0 0; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--belk-paper-muted,#5A6B82);
}
.d3g-campo{display:flex; flex-direction:column; gap:6px; margin:0}
.d3g-et{font-weight:600; font-size:.95rem; color:var(--belk-paper-text,#0D1B2A)}
.d3g-fila{flex-wrap:wrap}
.d3g-fila .belk-btn{white-space:normal; line-height:1.15}
.d3g-in-u{display:flex; align-items:center; gap:6px}
.d3g-in{width:140px; min-height:48px; font-size:1rem; font-variant-numeric:tabular-nums}
.d3g-error{margin:0; font-size:.88rem; line-height:1.35; color:var(--belk-paper-err,#8E3B31)}
.d3g-error:empty{display:none}
.d3g-error--fijo{
  padding:8px 10px; border:1px solid var(--belk-paper-err,#8E3B31);
  background:var(--belk-paper-err-soft,#F8E7E3); border-radius:var(--belk-radius-sm,8px);
}
.d3g-pista{margin:0; font-size:.9rem; line-height:1.4; color:var(--belk-paper-muted,#5A6B82)}
.d3g-dos{display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; align-items:end}
.d3g-dos .d3g-in{width:100%; min-width:0}
.d3g-nombre{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px}
.d3g-nombre-tx{font-size:1.05rem; color:var(--belk-paper-text,#0D1B2A)}
.d3g-nota{font-size:.95rem; color:var(--belk-paper-text,#0D1B2A)}
.d3g-nota:empty{display:none}
.d3g-nota p{margin:0 0 8px}
.d3g-tgr .lb{font-weight:600; font-size:.95rem; color:var(--belk-paper-text,#0D1B2A); cursor:pointer}
.d3g-tgr .tg input:focus-visible+.sl{outline:2px solid var(--belk-accent,#51C7F5); outline-offset:2px}
/* El interruptor sobre PAPEL (en el panel y en sus hojas): los tokens de la zona taller son para el
   marino (la pastilla apagada quedaba crema sobre blanco). Apagado ≥ 3:1, encendido en acero. */
:is(.d3g-panel, .d3g-hoja) .sl{background:color-mix(in srgb, var(--belk-paper-muted,#5A6B82) 75%, var(--belk-paper,#FFFFFF))}
:is(.d3g-panel, .d3g-hoja) .tg input:checked+.sl{background:var(--belk-paper-brand,#415A77)}
.d3g-hoja .tgr .lb{color:var(--belk-paper-text,#0D1B2A)}
.d3g-campo--mod{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between}
.d3g-campo--mod .d3g-error{flex:1 1 100%}
/* La planta tocable de Mi mueble (aberturas.js `plano`): sus clases, sobre papel. */
.d3g-plano{border:1px solid var(--belk-paper-border,#D8DFE9); border-radius:var(--belk-radius-sm,8px); background:var(--belk-paper,#FFFFFF)}
.d3g-plano[data-armado="si"]{border-color:var(--belk-accent,#51C7F5); box-shadow:inset 0 0 0 1px var(--belk-accent,#51C7F5)}
.d3g-plano[data-armado="si"] svg{cursor:crosshair}
.d3g-plano .d3-plano-salon{max-width:none}
.d3g-plano .d3-pl-estorbo{stroke:var(--belk-paper-muted,#5A6B82); stroke-width:8}
.d3g-plano .d3-pl-toma_gas{stroke:var(--belk-paper-warn,#9C4A12); stroke-width:8}
.d3g-plano .mmj-pl-raya{stroke:var(--belk-paper-muted,#5A6B82); stroke-width:2}
.d3g-plano .mmj-pl-estorbo{fill:url(#mmjRayas); stroke:var(--belk-paper-muted,#5A6B82); stroke-width:1}
.d3g-plano .mmj-pl-punto circle{stroke:var(--belk-paper,#FFFFFF); stroke-width:2}
.d3g-plano .mmj-pl-agua circle{fill:var(--belk-paper-brand,#415A77)}
.d3g-plano .mmj-pl-gas circle{fill:var(--belk-paper-warn,#9C4A12)}
.d3g-plano .mmj-pl-sel{stroke:var(--belk-accent,#51C7F5); stroke-width:12; stroke-linecap:round; opacity:.75}
.d3g-plano .d3-pl-letra{cursor:pointer}
.d3g-plano .d3-pl-letra[aria-hidden="true"]{cursor:default}
.d3g-marcas{gap:6px}
/* Entrega: las herramientas del editor, una por fila, con su icono. */
.d3g-acciones{display:flex; flex-direction:column; gap:8px}
.d3g-accion{justify-content:flex-start; gap:12px; min-height:52px; font-size:1rem; text-align:left; white-space:normal}
.d3g-accion-ic{flex:none; width:22px; height:22px}
.d3g-despiece{width:100%; border-collapse:collapse; font-size:.92rem; color:var(--belk-paper-text,#0D1B2A)}
.d3g-despiece th, .d3g-despiece td{padding:8px 6px; border-bottom:1px solid var(--belk-paper-border,#D8DFE9); text-align:left}
.d3g-despiece th{font-size:.8rem; color:var(--belk-paper-muted,#5A6B82)}
.d3g-despiece .d3g-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.d3g-avisos{margin:0}
.d3g-decide{gap:8px}
.d3g-decide .belk-btn{flex:1 1 0}
.d3g-propuesta{
  display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:var(--belk-radius-sm,8px);
  border:1px solid var(--belk-paper-border,#D8DFE9); background:var(--belk-paper-alt,#E7ECF3); color:var(--belk-paper-text,#0D1B2A);
}
.d3g-propuesta .mmj-prop-texto{margin:0}
.d3g-propuesta .mmj-prop-lista{margin:0; padding-left:18px}

/* ── El resumen (papel, plegable) ── */
.d3g-resumen{width:260px; display:flex; flex-direction:column}
.d3g-resumen[data-plegado="si"]{width:auto}
.d3g-res-hd{
  display:flex; align-items:center; gap:8px; width:100%; min-height:48px; padding:8px 14px;
  border:0; border-bottom:1px solid var(--belk-paper-border,#D8DFE9); background:var(--belk-paper,#FFFFFF);
  color:var(--belk-paper-text,#0D1B2A); font:700 .85rem/1.2 inherit; cursor:pointer; text-align:left;
}
.d3g-res-hd:focus-visible{outline:2px solid var(--belk-accent,#51C7F5); outline-offset:-2px}
.d3g-res-ti{flex:1; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; color:var(--belk-paper-muted,#5A6B82)}
.d3g-res-badge{min-width:22px; padding:2px 6px; border-radius:999px; text-align:center; font-size:.75rem;
  background:var(--belk-paper-warn,#9C4A12); color:var(--belk-paper,#FFFFFF)}
.d3g-res-badge:empty{display:none}
.d3g-res-ar{transition:transform .15s ease}
.d3g-resumen[data-plegado="si"] .d3g-res-ar{transform:rotate(-90deg)}
.d3g-resumen[data-plegado="si"] .d3g-res-hd{border-bottom:0}
.d3g-resumen[data-plegado="si"] .d3g-res-cuerpo{display:none}
.d3g-res-cuerpo{padding:8px 14px 12px; overflow:auto; color:var(--belk-paper-text,#0D1B2A)}
.d3g-res-datos{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; margin:0 0 10px; font-size:.85rem}
.d3g-res-datos dt{color:var(--belk-paper-muted,#5A6B82)}
.d3g-res-datos dd{margin:0; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.d3g-res-sub{margin:8px 0 6px; font-size:.78rem; font-weight:700; color:var(--belk-paper-text,#0D1B2A)}

/* Escritorio: la página no se desplaza; el paso scrollea solo bajo su pregunta y la cápsula
   queda a la vista. Abajo queda el aire de la píldora de módulos (sin .belk-acts). */
@media (min-width:1024px){
  [data-paso="guiado"] .d3-body{padding-bottom:88px}
  [data-paso="guiado"] .d3-lienzo.solo-escena{min-height:0}
  .d3g-panel{overflow:hidden}
  .d3g-cuerpo{flex:1; min-height:0; overflow:auto; overscroll-behavior:contain}
  .d3g-resumen{min-height:0; align-self:stretch}
  .d3g-resumen[data-plegado="si"]{align-self:start}
}
/* Hasta 1200: el resumen nace plegado (guiado-juego.js) y ocupa solo su encabezado. */
@media (min-width:901px) and (max-width:1023px){
  [data-paso="guiado"] .d3-body{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}
  [data-paso="guiado"] .d3-lienzo.solo-escena{order:0; min-height:60vh}
  [data-paso="guiado"] .d3g-resumen{grid-column:1 / -1; width:auto}
}
/* ≤ 900: una columna. Primero el 3D (lo que se mira), debajo el paso y al final el resumen.
   La cápsula se pega abajo de la pantalla mientras se ve el paso, sobre la píldora de
   módulos (--belk-float-bottom) y dejando a la derecha el botón de Adam. */
@media (max-width:900px){
  [data-paso="guiado"] .d3-body{grid-template-columns:1fr}
  [data-paso="guiado"] .d3-lienzo.solo-escena{order:-1; min-height:max(32svh, 220px)}
  .d3g-panel{border-radius:18px 18px var(--belk-radius,1rem) var(--belk-radius,1rem)}
  .d3g-resumen{width:auto}
  /* Como en Mi mueble: la cápsula flota abajo (justo sobre la píldora de módulos y dejando a la
     derecha el botón de Adam) y el paso deja su aire debajo. El proyecto se nombra en el paso
     «Proyecto» y la unidad mm/cm está en el ☰: arriba queda solo el interruptor. */
  [data-paso="guiado"] .d3-proy, [data-paso="guiado"] .d3-unidad{display:none}
  .d3g-panel .mmj-nav{
    position:fixed; left:12px; right:12px; bottom:calc(var(--belk-float-bottom,16px) - 44px); z-index:20;
    padding:0 72px 0 0; background:none; border:0; pointer-events:none;
  }
  .d3g-cuerpo{padding-bottom:96px}
  .d3g-panel .mmj-toast{position:fixed; left:16px; right:16px; bottom:calc(var(--belk-float-bottom,16px) + 22px)}
  .d3g-panel .mmj-capsula-ir{padding:0 14px 0 18px; font-size:1rem}
  .d3g-dos{grid-template-columns:1fr}
  /* Como en Mi mueble: la barra de historias y el 3D quedan arriba mientras el paso se desplaza
     debajo (bajo el encabezado de 52 px). El paso en palabras lo dice la barra al lector. */
  .d3g-barra{position:sticky; top:52px; z-index:8; flex-wrap:nowrap; padding:4px 12px; background:var(--belk-level-1,#0D1B2A)}
  .d3g-cuenta{display:none}
  [data-paso="guiado"] .d3-lienzo.solo-escena{position:sticky; top:108px; z-index:7}
  /* …salvo con la planta tocable (puertas, agua y gas: la planta ya es el dibujo de arriba) o
     con el teclado abierto en un campo (como Mi mueble). */
  [data-paso="guiado"] .d3-body:has(.d3g-plano) .d3-lienzo.solo-escena,
  [data-paso="guiado"] .d3-body:has(.d3g-cuerpo input:focus) .d3-lienzo.solo-escena{position:relative; top:auto}
}
/* Lo que recibe el foco (Tab o «ir a») nunca queda bajo la cápsula pegada abajo. */
@media (max-width:900px){
  html:has(body[data-paso="guiado"]){scroll-padding-bottom:calc(var(--belk-float-bottom,16px) + 36px)}
  html:has(body[data-paso="guiado"] .d3-body:not(:has(.d3g-plano))){scroll-padding-top:calc(116px + max(32svh, 220px))}
}
.d3g-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   PASO A PASO · LIBRE (2026-10-20 · js/diseno3d/guiado.js)
   ───────────────────────────────────────────────────────────────
   El interruptor de arriba (#d3Modo) y la bienvenida «¿Cómo quieres armar?»: un CUARTO
   valor del mismo atributo, body[data-paso="bienvenida"] (SELLO §1). En la bienvenida no
   se ve el editor ni el paso a paso: la pregunta y sus dos tarjetas, con el interruptor
   arriba sin ninguno marcado (enseña dónde vive y la barra no salta al elegir). El interruptor
   pinta sobre el MARCO; las tarjetas son PAPEL y su dibujo va en una «pantalla» marina
   (el celeste solo como relleno o trazo sobre marino, nunca sobre blanco: SELLO §0).
   ═══════════════════════════════════════════════════════════ */
body:not([data-paso="bienvenida"]) .solo-bienvenida{display:none !important}
[data-paso="bienvenida"] .d3-body,
[data-paso="bienvenida"] .d3-pasos,
[data-paso="bienvenida"] .belk-acts,
body[data-corregir="escaneo"] .d3-modo{display:none !important}

/* Entre 1024 y 1439 la barra de arriba (interruptor + pasos + proyecto + «Autorizar
   reemplazo de piezas» + unidad) no cabe en una fila: las etiquetas «Armar», «Proyecto» y
   «Medidas en» quedan solo para el lector de pantalla (cada grupo ya tiene su nombre). */
@media (min-width:1024px) and (max-width:1439px){
  .d3-arriba .d3-proy-et{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}

/* ── El interruptor (sobre el marco) ── */
.d3-modo{display:flex; align-items:center; gap:6px; font-size:.85rem}
.d3-modo .belk-btn{min-height:48px; padding:8px 14px; font-size:.85rem; font-weight:600}
/* En el paso a paso todo lo que se toca mide al menos 48 px (también lo de la barra de arriba). */
[data-paso="guiado"] .d3-proy-btn{min-height:48px; padding:6px 12px}
[data-paso="guiado"] .d3-unidad .unidad-seg button{min-height:48px; min-width:48px}
.d3-modo .belk-btn--accent{border-color:var(--belk-accent,#51C7F5)}
.d3-modo .belk-btn:focus-visible{outline-color:var(--belk-accent,#51C7F5)}

/* ── La bienvenida ── */
.d3-bien{
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(24px, 7vh, 72px) 16px 140px; color:var(--belk-text,#F7F3E9);
}
.d3-bien-ti{
  margin:0; text-align:center; text-wrap:balance; letter-spacing:-0.02em;
  font-size:clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight:700; line-height:1.1;
  color:var(--belk-text,#F7F3E9);
}
.d3-bien-sub{
  margin:10px 0 clamp(20px, 4vh, 36px); max-width:46ch; text-align:center; text-wrap:balance;
  font-size:1rem; line-height:1.45; color:var(--belk-text-muted,#C4D0DF);
}
.d3-bien-ops{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; width:100%; max-width:860px}
.d3-bien-op{
  display:flex; flex-direction:column; align-items:stretch; gap:4px; min-height:48px; margin:0;
  padding:14px 14px 20px; border-radius:16px; text-align:left; cursor:pointer;
  font:inherit; color:var(--belk-paper-text,#0D1B2A); background:var(--belk-paper,#FFFFFF);
  border:1px solid var(--belk-paper-border,#D8DFE9);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.d3-bien-op:hover{border-color:var(--belk-accent,#51C7F5); box-shadow:var(--belk-shadow-2,0 8px 24px rgba(0,0,0,.40)); transform:translateY(-2px)}
.d3-bien-op:active{transform:translateY(0); box-shadow:var(--belk-shadow-1,0 2px 8px rgba(0,0,0,.28))}
.d3-bien-op:focus-visible{outline:3px solid var(--belk-accent,#51C7F5); outline-offset:3px}
.d3-bien-pant{
  display:block; margin:0 0 12px; padding:14px 18px; border-radius:10px;
  background:var(--belk-level-2,#16283B); border:1px solid var(--belk-border,rgba(247,243,233,.10));
}
.d3-bien-dib{display:block; width:100%; height:auto; aspect-ratio:160 / 100; color:var(--belk-text-muted,#C4D0DF); stroke:var(--belk-accent,#51C7F5)}
.d3-bien-nom{display:block; padding:0 6px; font-size:1.375rem; font-weight:700; line-height:1.2; letter-spacing:-0.01em; color:var(--belk-paper-text,#0D1B2A)}
.d3-bien-tx{display:block; padding:0 6px; font-size:1rem; font-weight:600; line-height:1.35; color:var(--belk-paper-brand,#415A77)}
.d3-bien-det{display:block; margin-top:6px; padding:0 6px; max-width:52ch; font-size:.9375rem; line-height:1.45; color:var(--belk-paper-muted,#5A6B82)}

/* Teléfono: una tarjeta bajo la otra y el dibujo al lado del nombre, para que las dos
   quepan sin desplazar en 375 × 812. */
@media (max-width:640px){
  .d3-bien{padding:8px 16px 132px}
  .d3-bien-ti{font-size:1.5rem}
  .d3-bien-sub{margin:6px 0 12px; font-size:.95rem}
  .d3-bien-ops{grid-template-columns:1fr; gap:12px}
  .d3-bien-op{display:grid; grid-template-columns:112px minmax(0, 1fr); column-gap:12px; row-gap:2px; padding:12px}
  .d3-bien-pant{grid-row:1 / span 3; margin:0; padding:8px 10px; align-self:start}
  .d3-bien-nom, .d3-bien-tx, .d3-bien-det{padding:0}
  .d3-bien-nom{font-size:1.25rem}
  .d3-bien-det{margin-top:4px}
}
/* Escritorio: la página no se desplaza (body flex de 100dvh): la bienvenida usa el alto
   que sobra y se desplaza sola si no cabe. */
@media (min-width:1024px){
  .d3-bien{flex:1; min-height:0; overflow:auto; justify-content:center; padding-bottom:120px}
}

/* Entrar a un modo se nota como una transición, no como un salto: lo que aparece sube 8 px
   y funde (la animación corre sola cada vez que el bloque pasa de oculto a visible). */
@media (prefers-reduced-motion:no-preference){
  @keyframes d3-entra{from{opacity:0; transform:translateY(8px)}}
  .d3-bien-ti, .d3-bien-sub, .d3-bien-op,
  [data-paso="guiado"] .d3g-barra, [data-paso="guiado"] .d3g-panel, [data-paso="guiado"] .d3g-resumen{
    animation:d3-entra .24s cubic-bezier(.2,.8,.2,1) backwards;
  }
  .d3-bien-op + .d3-bien-op, [data-paso="guiado"] .d3g-resumen{animation-delay:.05s}
}


/* ═══════════════════════════════════════════════════════════════
   EL AVISO (Belk.aviso, js/belk-flot.js) EN EL DISEÑO 3D (gen-bano, 2026-10-22)
   ───────────────────────────────────────────────────────────────
   En el resto del sitio va arriba, bajo la barra marina. Acá, arriba están los botones
   del proyecto (Renombrar, Abrir, Nuevo…), los pasos y el interruptor, y el aviso de
   «115 etiquetas en 5 hojas» los tapaba. Solo en esta página (no se toca belk-flot):
   · PC (≥ 1024, la página no se desplaza y sus columnas miden lo que dicen las reglas de
     arriba): sobre el DIBUJO, abajo y centrado en su columna — paso a paso 400 | 3D | 260,
     libre 300 | 3D | 260 —, sobre el aire de la píldora (88) y del rótulo «N muebles en la
     escena»: ahí no hay nada que tocar.
   · Teléfono y tablet: abajo, encima del botón de Adam, la cápsula y la píldora (que
     quedan libres); se desplaza lo de debajo y el aviso deja pasar los toques.
   Con una hoja abierta, belk-flot lo pone bajo ella (top en línea): manda eso.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  body[data-diseno3d] .bkf--aviso{
    top:auto; bottom:136px; left:calc(50vw + 20px);
    width:min(440px, calc(100vw - 608px - 32px));
  }
  body[data-diseno3d][data-paso="guiado"] .bkf--aviso{
    left:calc(50vw + 70px); width:min(440px, calc(100vw - 708px - 32px));
  }
}
@media (max-width:1023px){
  body[data-diseno3d] .bkf--aviso{
    top:auto; bottom:calc(var(--belk-float-bottom, 16px) + 44px + env(safe-area-inset-bottom, 0px));
    left:max(16px, env(safe-area-inset-left, 0px)); right:max(16px, env(safe-area-inset-right, 0px)); width:auto;
    transform:translateY(10px);
  }
  body[data-diseno3d] .bkf--aviso.is-open{transform:none}
}
body[data-diseno3d] .bkf--aviso[style*="top"]{bottom:auto}