/* =====================================================================
   Metalkit — Maqueta configurador (demo) · pantalla única
   Izquierda: 3D fijo. Derecha: panel wizard (solo cambia este lado).
   Marca: Brown · #2375f6 / #2e2e2e / #e9eae8. Tema claro/oscuro por tokens.
   ===================================================================== */

@font-face { font-family:"Brown"; font-weight:300; font-display:swap; src:url("assets/fonts/Brown-Light.otf") format("opentype"); }
@font-face { font-family:"Brown"; font-weight:400; font-display:swap; src:url("assets/fonts/Brown-Regular.otf") format("opentype"); }
@font-face { font-family:"Brown"; font-weight:700; font-display:swap; src:url("assets/fonts/Brown-Bold.otf") format("opentype"); }

:root {
  --azul:#2176ff; --azul-osc:#145fd7; --on-azul:#fff;   /* azul del manual de marca Metalkit: SOLO llamados a la acción */
  /* Acento sobrio: gris oscuro de marca (#2e2e2e) para selecciones, precios y estados
     activos. Va por token (--acento) para que el tema oscuro lo invierta solo. */
  --acento:#2e2e2e; --on-acento:#fff;
  --radio:16px; --radio-sm:11px; --radio-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --bg:#f4f5f2; --surface:#ffffff; --surface-2:#f7f8f5;
  --viewer-bg:radial-gradient(120% 90% at 50% 8%, #ffffff 0%, #eef0ed 55%, #e4e5e2 100%);
  --text:#2e2e2e; --soft:#6f706d; --faint:#9a9b98;
  --border:#e5e6e3; --border2:#d7d8d5;
  --shadow:0 1px 2px rgba(46,46,46,.05), 0 10px 24px -14px rgba(46,46,46,.22);
  --shadow-on:0 1px 3px rgba(46,46,46,.14);
}
[data-theme="dark"] {
  --bg:#1c1c1c; --surface:#232323; --surface-2:#272727;
  --viewer-bg:radial-gradient(120% 95% at 50% 8%, #373737 0%, #262626 50%, #1a1a1a 100%);
  --text:#f1f1ef; --soft:#aeafac; --faint:#84857f;
  --border:#343434; --border2:#3e3e3e;
  --acento:#f1f1ef; --on-acento:#1c1c1c;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -16px rgba(0,0,0,.7);
  --shadow-on:0 1px 3px rgba(0,0,0,.55);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100dvh; margin:0; }
body {
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); color:var(--text);
  font-family:"Brown","Mulish",system-ui,sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }

/* ===================== Topbar ===================== */
.topbar { flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:11px 18px; background:var(--surface); border-bottom:1px solid var(--border); z-index:10; }
.brand { flex:0 0 auto; display:inline-flex; align-items:center; text-decoration:none; }
.brand__logo { height:28px; width:auto; }
.brand__logo--dark { display:none; }
[data-theme="dark"] .brand__logo--light { display:none; }
[data-theme="dark"] .brand__logo--dark { display:block; }
.topbar__right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.chip-precio { display:flex; flex-direction:column; line-height:1.1; text-align:right; }
.chip-precio__label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--faint); }
.chip-precio__val { font-weight:700; font-size:21px; font-variant-numeric:tabular-nums; color:var(--text); letter-spacing:-.3px; }
.theme-toggle { flex:0 0 auto; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--border2); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.theme-toggle:hover { border-color:var(--soft); transform:translateY(-1px); }
.theme-toggle svg { width:18px; height:18px; }
.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }

/* ===================== Stage ===================== */
.stage { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr; grid-template-rows:44vh 1fr; }
@media (min-width:900px) { .stage { grid-template-columns:1fr minmax(352px, 396px); grid-template-rows:1fr; } }

.stage__viewer { position:relative; min-height:0; overflow:hidden; background:var(--viewer-bg); }
.viewer__canvas { position:absolute; inset:0; touch-action:none; }
.viewer__canvas canvas { display:block; width:100%; height:100%; }
.viewer__hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); font-size:12px; color:var(--soft); background:var(--surface); border:1px solid var(--border); padding:6px 14px; border-radius:999px; box-shadow:var(--shadow); pointer-events:none; }
.viewer__loading { position:absolute; inset:0; display:grid; place-items:center; gap:14px; grid-auto-flow:row; background:var(--viewer-bg); color:var(--soft); font-size:13px; }
.viewer__loading-mark { width:74px; animation:floaty 2.4s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0);opacity:.55} 50%{transform:translateY(-6px);opacity:1} }

/* ===================== Panel (lado derecho) ===================== */
.stage__panel { display:flex; flex-direction:column; min-height:0; background:var(--surface); border-top:1px solid var(--border); }
@media (min-width:900px) { .stage__panel { border-top:none; border-left:1px solid var(--border); } }

/* Elementos SOLO-MÓVIL (lápiz, scrim, manija): ocultos por defecto → el desktop NO cambia. */
.sheet-handle, .sheet-scrim, .edit-fab { display:none; }

/* ===================== Móvil (<900px): 3D casi pantalla completa + hoja inferior ===================== */
@media (max-width:899px) {
  .stage { display:block; position:relative; --sheet-h:54vh; }   /* --sheet-h = alto de la hoja */
  .viewer__hint { display:none; }                        /* choca con el lápiz y sobra en táctil */

  /* El VISOR se encoge hasta el borde superior de la hoja al abrirla (no lo tapa), y vuelve
     a pantalla completa al cerrarla. --sheet-h = alto de la hoja (fijo). */
  .stage__viewer { position:absolute; inset:0; transition:bottom .32s var(--ease); }
  body.sheet-open .stage__viewer { bottom:var(--sheet-h); }

  /* Panel = HOJA INFERIOR de alto fijo que sube con el lápiz "Editar". El visor ocupa el resto. */
  .stage__panel { position:fixed; left:0; right:0; bottom:0; z-index:20; height:var(--sheet-h); max-height:var(--sheet-h);
    border-top:1px solid var(--border); border-radius:18px 18px 0 0; box-shadow:0 -12px 34px rgba(0,0,0,.22);
    transform:translateY(100%); transition:transform .32s var(--ease); will-change:transform;
    padding-bottom:env(safe-area-inset-bottom); }
  body.sheet-open .stage__panel { transform:translateY(0); }

  /* Manija para cerrar la hoja y volver al 3D completo. */
  .sheet-handle { display:flex; justify-content:center; align-items:center; flex:0 0 auto;
    padding:9px 0 5px; background:transparent; border:none; cursor:pointer; }
  .sheet-grab { width:42px; height:5px; border-radius:99px; background:var(--border2); }

  /* Captura de toques para cerrar la hoja, PERO transparente: el 3D no se oscurece ni se
     tapa (es lo atractivo). Tocar el 3D con la hoja abierta la cierra. */
  .sheet-scrim { display:block; position:fixed; inset:0; z-index:19; background:transparent;
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
  body.sheet-open .sheet-scrim { opacity:1; pointer-events:auto; }

  /* Lápiz "Editar": invita a desplegar packs/terminación desde abajo. Se esconde con la hoja abierta. */
  .edit-fab { display:inline-flex; align-items:center; gap:8px; position:fixed; left:50%;
    bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:15;
    padding:12px 20px; border:none; border-radius:999px; background:var(--azul); color:#fff;
    font-family:inherit; font-weight:700; font-size:15px; cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.26); transition:opacity .2s var(--ease), transform .2s var(--ease); }
  .edit-fab svg { width:19px; height:19px; }
  .edit-fab:active { transform:translateX(-50%) scale(.96); }
  body.sheet-open .edit-fab { opacity:0; pointer-events:none; }

}

.panel__head { flex:0 0 auto; padding:9px 18px 8px; border-bottom:1px solid var(--border); }
.panel__eyebrow { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--soft); }
.panel__top { position:relative; min-height:32px; }
.btn-back { position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:1; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid var(--border2); border-radius:999px; background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease); }
.btn-back:hover { border-color:var(--soft); color:var(--text); }
.btn-back svg { width:18px; height:18px; }
.btn-back[hidden] { display:none; }
.panel__title { display:inline-block; margin:0; font-size:31px; font-weight:700; letter-spacing:-.6px; }
.panel__sub { margin:4px 0 0; font-size:12.5px; color:var(--soft); font-variant-numeric:tabular-nums; }
/* Desde el paso 2 el nombre y su subtítulo quedan centrados en el ancho. */
.panel__head.is-centrado .panel__top { text-align:center; }
.panel__head.is-centrado .panel__sub { text-align:center; }
.specs { display:flex; gap:8px; margin:8px 0 0; }
.spec { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:1px; padding:6px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radio-sm); }
.spec--wide { flex:1.5 1 0; }
/* Icono(s) line-art (gris de marca) que acompañan a cada pieza en su tarjeta. */
.card__icon { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:2px; color:var(--soft); }
.card__icon svg { width:21px; height:21px; }
.spec__val { font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spec__lbl { font-size:9.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
.panel__price { display:flex; align-items:baseline; gap:8px; margin-top:10px; }
.panel__price-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--faint); }
.panel__price-val { font-weight:700; font-size:22px; font-variant-numeric:tabular-nums; color:var(--text); }

.stepper { flex:0 0 auto; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; padding:12px 16px 2px; }
.step-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 7px; border:1.5px solid var(--border2); border-radius:999px; background:var(--surface); color:var(--faint); font-family:inherit; font-weight:700; font-size:12.5px; cursor:default; transition:.2s var(--ease); }
.step-pill__num { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:var(--surface-2); color:var(--faint); font-size:11.5px; font-weight:700; }
.step-pill.is-active { border-color:var(--acento); color:var(--text); }
.step-pill.is-active .step-pill__num { background:var(--acento); color:var(--on-acento); }
.step-pill.is-done { cursor:pointer; color:var(--text); border-color:var(--border2); }
.step-pill.is-done .step-pill__num { background:var(--surface-2); color:var(--text); }
@media (max-width:420px){ .step-pill__txt { display:none; } }

.panel { flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 18px 18px; display:flex; flex-direction:column; gap:18px; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.panel::-webkit-scrollbar { width:8px; }
.panel::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.panel-title { display:flex; flex-direction:column; gap:6px; }
/* Transición de movimiento al cambiar de paso: todo el contenido del panel entra
   deslizándose suave (se dispara desde irA quitando/agregando la clase). */
.panel--anim { animation:rise .34s var(--ease) both; }
@keyframes rise { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
.panel-title__h { margin:0; font-size:21px; font-weight:700; letter-spacing:-.4px; }
.panel-title__sub { margin:0; font-size:13.5px; color:var(--soft); line-height:1.5; }

/* Aviso de preselección (cuando se llega desde el perfilador con ?packs=...). */
.preselect-aviso { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; background:var(--surface-2); border:1px solid var(--border2); border-radius:var(--radio-sm); font-size:12.5px; line-height:1.45; color:var(--text); }
.preselect-aviso svg { flex:0 0 auto; width:18px; height:18px; color:var(--soft); margin-top:1px; }

.panelnav { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--border); background:var(--surface); }
.panelnav .spacer { flex:1 1 auto; }
/* Precio estimado: siempre visible y grande, a la izquierda del botón siguiente. */
.nav-precio { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.05; }
.nav-precio__lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--faint); }
.nav-precio__val { font-weight:700; font-size:27px; font-variant-numeric:tabular-nums; color:var(--text); letter-spacing:-.4px; }
/* Reiniciar como ícono (↺) discreto en el último paso. */
.btn-reset { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid var(--border2); border-radius:999px; background:var(--surface); color:var(--soft); cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease); }
.btn-reset:hover { border-color:var(--soft); color:var(--text); }
.btn-reset svg { width:18px; height:18px; }

/* ===================== Botones ===================== */
.btn { font-family:inherit; font-weight:700; font-size:14.5px; padding:12px 22px; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:.2s var(--ease); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn--primary { background:var(--azul); color:#fff; box-shadow:var(--shadow-on); }
.btn--primary:hover { background:var(--azul-osc); transform:translateY(-1px); }
.btn--ghost { background:transparent; color:var(--text); border-color:var(--border2); }
.btn--ghost:hover { border-color:var(--soft); color:var(--text); }
.btn--block { width:100%; }

/* ===================== Cards (packs) ===================== */
.cards { display:flex; flex-direction:column; gap:7px; }
.card { position:relative; display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 13px; border:1.5px solid var(--border2); border-radius:var(--radio); background:var(--surface); color:var(--text); font-family:inherit; cursor:pointer; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.card:hover { border-color:var(--faint); transform:translateY(-1px); }
.card.is-on { border-color:var(--acento); box-shadow:var(--shadow-on); }
.card.is-fixed { cursor:default; }
.card.is-fixed:hover { transform:none; border-color:var(--acento); }
.card__check { flex:0 0 auto; width:22px; height:22px; border-radius:7px; border:2px solid var(--border2); background:var(--surface-2); position:relative; transition:.2s var(--ease); }
.card.is-on .card__check { border-color:var(--acento); background:var(--acento); }
.card.is-on .card__check::after { content:""; position:absolute; left:6.5px; top:3px; width:5px; height:9.5px; border:solid var(--on-acento); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.card__body { flex:1 1 auto; min-width:0; }
.card__label { display:block; font-weight:700; font-size:15.5px; letter-spacing:-.2px; }
.card__desc { display:block; font-size:12px; color:var(--text); opacity:.72; margin-top:2px; line-height:1.3; }
.card__meta { display:block; font-size:12px; color:var(--soft); margin-top:2px; }
.card__tag { display:inline-block; margin-top:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--soft); }
.card__tag--warn { background:#fff4e5; color:#b06a00; }
[data-theme="dark"] .card__tag--warn { background:#3a2c12; color:#e0a44a; }

/* ===================== Avance ===================== */
.avance { display:flex; flex-direction:column; }
.step { position:relative; padding-left:26px; }
.step::before { content:""; position:absolute; left:9px; top:0; bottom:0; width:2px; background:var(--border2); }
.step:first-child::before { top:24px; }
.step:last-child::before { bottom:calc(100% - 24px); }
.step__dot { position:absolute; left:3px; top:18px; width:13px; height:13px; border-radius:50%; background:var(--surface-2); border:2px solid var(--border2); z-index:1; transition:.2s var(--ease); }
.step.is-on > .step__dot { background:var(--acento); border-color:var(--acento); }
.step__card { display:flex; align-items:center; gap:14px; width:100%; text-align:left; margin:6px 0; padding:13px 15px; border:1.5px solid var(--border2); border-radius:var(--radio); background:var(--surface); color:var(--text); font-family:inherit; cursor:pointer; transition:.2s var(--ease); }
.step__card:hover { border-color:var(--faint); }
.step.is-on > .step__card { border-color:var(--acento); box-shadow:var(--shadow-on); }
.step.is-locked > .step__card { cursor:not-allowed; opacity:.5; border-style:dashed; }
.step.is-required > .step__card { cursor:default; }
.step__switch { flex:0 0 auto; width:44px; height:26px; border-radius:999px; background:var(--border2); position:relative; transition:.2s var(--ease); }
.step.is-on > .step__card .step__switch { background:var(--acento); }
.step__switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.28); }
.step.is-on > .step__card .step__switch::after { transform:translateX(18px); background:var(--on-acento); }
.step__body { flex:1 1 auto; min-width:0; }
/* Label completo, SIN cortar palabras: si no cabe, quiebra a una segunda línea
   (feedback Felipe: el "…" se ve peor que la línea extra). */
.step__label { display:block; font-weight:700; font-size:15px; line-height:1.25; }
.step__price { flex:0 0 auto; font-weight:700; font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.step:not(.is-on) .step__price { color:var(--faint); }
.step__variant { margin:2px 0 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radio); }
.step__vlabel { font-weight:700; font-size:12.5px; color:var(--soft); }
.swatch { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1.5px solid var(--border2); border-radius:999px; background:var(--surface); font-family:inherit; font-weight:700; font-size:12px; color:var(--text); cursor:pointer; }
.swatch.is-sel { border-color:var(--acento); }
.swatch[disabled] { opacity:.5; cursor:not-allowed; }
.swatch__chip { width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }

/* ===================== Variantes (nota) ===================== */
.variantes { padding:14px 16px; border:1.5px dashed var(--border2); border-radius:var(--radio); background:var(--surface-2); }
.variantes__note { margin:0; font-size:12.5px; color:var(--soft); line-height:1.5; }
.variantes__note strong { color:var(--text); }

/* ===================== Resumen (paso 3) ===================== */
/* Resumen visual: recintos incluidos (icono + texto). */
.res-visual { display:flex; flex-wrap:wrap; gap:8px; }
.res-feat { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; }
.res-feat__ic { display:inline-flex; color:var(--soft); }
.res-feat__ic svg { width:18px; height:18px; }
.res-feat__tx { font-size:12.5px; font-weight:600; }
/* Desglose de precios por pieza + total. */
.res-desglose { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radio); padding:4px 15px 12px; display:flex; flex-direction:column; }
.res-linea { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.res-linea__lbl { font-size:13.5px; color:var(--text); }
.res-linea__val { font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.res-linea--info { flex-direction:column; align-items:flex-start; gap:3px; }
.res-linea--info .res-linea__lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--faint); }
.res-linea__sub { font-size:12.5px; color:var(--soft); line-height:1.4; }
.res-total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0 2px; }
.res-total__lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--faint); }
.res-total__val { font-size:26px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.4px; }
/* Cierre (asesor ERP / cliente PDF). */
.cierre-intro { margin:0; font-size:13.5px; color:var(--soft); line-height:1.45; }
.cierre-form { display:flex; flex-direction:column; gap:10px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field__lbl { font-size:11px; font-weight:700; color:var(--soft); }
.field__in { font-family:inherit; font-size:14px; padding:10px 12px; border:1.5px solid var(--border2); border-radius:var(--radio-sm); background:var(--surface); color:var(--text); transition:border-color .2s var(--ease); }
.field__in:focus { outline:none; border-color:var(--acento); }
.cierre-msg { margin:2px 0 0; font-size:12.5px; }
.cierre-msg--ok { color:var(--text); font-weight:600; }
.cierre-msg--err { color:#c0392b; font-weight:600; }
/* Pop-up de datos para enviar el plano (modo cliente). */
.modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.45); animation:fadeIn .2s var(--ease) both; }
.modal__box { width:100%; max-width:380px; max-height:90vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radio-lg); box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column; gap:12px; }
.modal__title { margin:0; font-size:19px; font-weight:700; letter-spacing:-.3px; }
.modal__sub { margin:0; font-size:13px; color:var(--soft); line-height:1.45; }
.modal__acc { display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }
/* Paso despacho: encabezado con ícono de camión. */
.desp-head { display:flex; align-items:center; gap:11px; }
.desp-ic { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--surface-2); color:var(--soft); }
.desp-ic svg { width:25px; height:25px; }
.desp-head__tx { font-weight:700; font-size:15px; }
.field__in option { color:var(--text); }
.resumen { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radio-lg); padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.resumen__row { display:flex; gap:14px; }
.resumen__cell { flex:1 1 0; display:flex; flex-direction:column; gap:1px; }
.resumen__label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--faint); }
.resumen__val { font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
.resumen__val--price { color:var(--text); }
.resumen__code { display:flex; align-items:flex-end; gap:10px; }
.resumen__code-box { flex:1 1 auto; min-width:0; }
.resumen__code-val { display:block; font-weight:700; font-size:18px; letter-spacing:.5px; font-variant-numeric:tabular-nums; word-break:break-all; }

.boot-error { position:fixed; z-index:40; left:50%; top:70px; transform:translateX(-50%); width:calc(100% - 36px); max-width:640px; padding:18px 22px; background:#fff; border:1.5px solid #c0392b; border-left-width:6px; border-radius:var(--radio); color:#c0392b; box-shadow:var(--shadow); }
.boot-error code { background:#fdecec; padding:1px 6px; border-radius:5px; }

/* ===================== Mini-planta (PiP, esquina) ===================== */
.planta { position:absolute; top:14px; right:14px; z-index:6; width:min(46%, 224px); display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radio); box-shadow:var(--shadow); overflow:hidden; }
.planta__bar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 4px 10px; border-bottom:1px solid var(--border); }
.planta__title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--soft); }
.planta__actions { display:inline-flex; gap:2px; }
.planta__btn { display:inline-grid; place-items:center; width:23px; height:23px; border:none; background:transparent; color:var(--soft); border-radius:7px; cursor:pointer; font-size:13px; line-height:1; transition:.2s var(--ease); }
.planta__btn:hover { background:var(--surface-2); color:var(--text); }
.plano-view { position:relative; width:100%; height:178px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--surface-2); }
/* Mini: pinchar el plano lo amplía (además del botón ⤢) */
.planta:not(.planta--big) .plano-view { cursor:pointer; }
/* Reencuadre SUAVE al agregar/quitar packs (transición temporal vía .is-animating) */
.plano-wrap.is-animating { transition:transform .42s var(--ease), transform-origin .42s var(--ease), width .42s var(--ease), height .42s var(--ease); }
.plano-wrap { position:relative; transform-origin:50% 50%; }   /* tamaño (contain) lo fija planta.js → fit() */
.plano-capas { position:absolute; inset:0; }
.plano-capa { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; user-select:none; -webkit-user-drag:none; opacity:1; transition:opacity .5s var(--ease); }
/* Aparición/salida en fundido (sincronizado con el fade del pack 3D, 500ms). No usa
   display:none para que la opacidad pueda transicionar; queda inerte al estar oculta. */
.plano-capa[hidden] { display:block; opacity:0; pointer-events:none; }
.plano-hots { position:absolute; inset:0; }
/* Pie del panel: aparece al ampliar. Hint a la izquierda, "Centrar vista" a la derecha. */
.planta__foot { display:none; }
.planta--big .planta__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex:0 0 auto; padding:6px 10px 9px; }
.planta__hint { font-size:11px; color:var(--soft); }
.planta__center { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); font-family:inherit; font-weight:700; font-size:12px; line-height:1; cursor:pointer; white-space:nowrap; transition:.2s var(--ease); }
.planta__center:hover { border-color:var(--soft); color:var(--text); }

/* Estado ampliado: CENTRADA en el visor 3D al 86% (queda margen para ver el 3D). El
   centrado va por inset+margin (no por transform) para dejar el transform libre a la
   animación FLIP de apertura/cierre (app.js anima exactamente entre mini ↔ grande). */
.planta--big { position:absolute; inset:0; margin:auto; width:86%; height:86%; z-index:7; }
.planta--big .plano-view { flex:1 1 auto; height:auto; min-height:0; background:transparent; }
/* En grande el plano anima el zoom/reajuste; durante el arrastre se desactiva la
   transición (is-panning) para que el pan sea instantáneo. */
.planta--big .plano-wrap { cursor:grab; transition:transform .35s var(--ease); }
.planta--big .plano-wrap.is-panning { transition:none; }
.planta--big .plano-wrap:active { cursor:grabbing; }

/* Botón para volver a mostrar la planta cuando está oculta */
.planta-show { position:absolute; top:14px; right:14px; z-index:9; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; box-shadow:var(--shadow); transition:.2s var(--ease); }
.planta-show:hover { border-color:var(--soft); color:var(--text); }


/* Hotspots 360 sobre el plano (HTML, posición en % del plano). El tamaño (--hot) es
   chico en la mini y crece al ampliar la planta, sin entorpecer la lectura. */
.plano-hot { --hot:11px; position:absolute; transform:translate(-50%, -50%); width:var(--hot); height:var(--hot); padding:0; border:none; background:transparent; cursor:pointer; z-index:2; transition:width .25s var(--ease), height .25s var(--ease); }
.planta--big .plano-hot { --hot:30px; }
.plano-hot__pulse { position:absolute; inset:0; margin:auto; width:var(--hot); height:var(--hot); border-radius:50%; background:var(--azul); opacity:.22; animation:hotpulse 2s ease-in-out infinite; transition:width .25s var(--ease), height .25s var(--ease); }
.plano-hot__dot { position:absolute; inset:0; margin:auto; width:calc(var(--hot) * 0.5); height:calc(var(--hot) * 0.5); border-radius:50%; background:var(--azul); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); transition:width .25s var(--ease), height .25s var(--ease); }
.plano-hot__tip { position:absolute; left:50%; top:calc(100% + 2px); transform:translateX(-50%) rotate(calc(-1 * var(--rot, 0deg))); white-space:nowrap; font-size:11px; font-weight:700; color:var(--text); background:var(--surface); border:1px solid var(--border); padding:2px 8px; border-radius:999px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .15s var(--ease); }
.plano-hot:hover .plano-hot__tip, .plano-hot:focus .plano-hot__tip { opacity:1; }
.plano-hot:hover .plano-hot__dot { background:var(--azul-osc); }
.plano-hot:focus { outline:none; }
@keyframes hotpulse { 0%,100%{transform:scale(1);opacity:.22;} 50%{transform:scale(1.7);opacity:.04;} }

/* Marcador del modo calibración (?cal): muestra dónde caería el hotspot + sus coords */
.cal-mark { position:absolute; transform:translate(-50%, -50%); display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; background:var(--azul); color:#fff; font-size:10px; font-weight:700; white-space:nowrap; box-shadow:0 1px 6px rgba(0,0,0,.4); pointer-events:none; z-index:3; }

/* ===================== Overlay 360 ===================== */
.pano { position:absolute; inset:0; z-index:5; background:#0c0c0c; overflow:hidden; animation:fadeIn .25s var(--ease) both; }
.pano__mount { position:absolute; inset:0; touch-action:none; cursor:grab; }
.pano__mount:active { cursor:grabbing; }
.pano__mount canvas { display:block; width:100%; height:100%; }
.pano__topbar { position:absolute; top:0; left:0; right:0; display:flex; flex-direction:row-reverse; align-items:center; justify-content:flex-end; gap:12px; padding:14px 16px; background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events:none; }
.pano__label { color:#fff; font-weight:700; font-size:16px; letter-spacing:-.2px; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.pano__close { pointer-events:auto; font-family:inherit; font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:999px; border:none; background:rgba(255,255,255,.92); color:#1c1c1c; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.3); transition:.2s var(--ease); }
.pano__close:hover { background:#fff; transform:translateY(-1px); }
.pano__hint { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); font-size:12px; color:rgba(255,255,255,.85); background:rgba(0,0,0,.35); padding:6px 14px; border-radius:999px; pointer-events:none; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ===================== Modo modelo comercial fijo (vendedores) =====================
   Un solo paso (Terminación) que debe caber COMPLETO sin scroll: tarjetas y
   selectores comprimidos, variantes en UNA línea. El código de producto vive
   arriba a la derecha (chip): un clic lo copia. */
body.mk-fijo .stepper { display:none; }                     /* un solo paso: sin pills */
body.mk-fijo .panel-title { display:none; }                 /* el head ya dice el modelo */
body.mk-fijo .panel { padding:10px 18px 12px; gap:10px; }
/* Head centrado y en columna: nombre → descripción (una línea) → código.
   La flecha "volver a los modelos" queda a la izquierda del nombre. */
body.mk-fijo .panel__top { text-align:center; padding:0 44px; min-height:36px; display:flex; align-items:center; justify-content:center; }
body.mk-fijo .panel__sub { text-align:center; white-space:nowrap; }
body.mk-fijo .panel__title { font-size:25px; }
/* El hueco sobrante se reparte arriba/abajo del bloque de opciones (no queda
   todo el aire entre la última opción y el precio). */
body.mk-fijo .panel > .avance { margin:auto 0; }
body.mk-fijo .step__card { margin:5px 0; padding:11px 14px; gap:12px; }
body.mk-fijo .step__label { font-size:14.5px; }
body.mk-fijo .step__variant { margin:2px 0 6px; padding:4px 10px; gap:6px; flex-wrap:nowrap; overflow:hidden; }
body.mk-fijo .step__vlabel { font-size:10.5px; flex:0 0 auto; }
body.mk-fijo .swatch { padding:3px 8px; font-size:10.5px; gap:4px; white-space:nowrap; flex:0 0 auto; }
body.mk-fijo .swatch__chip { width:10px; height:10px; }
/* Fila del código (centrada, bajo la descripción): el chip copia; tras copiar
   aparece al lado el botón chico que abre la cotización en Odoo (modo asesor). */
.codigo-fila { display:flex; justify-content:center; align-items:center; gap:8px; margin:8px auto 0; }
.codigo-fila .codigo-chip { margin:0; }   /* la fila ya centra; sin margin auto propio */
.btn-odoo { font-family:inherit; font-weight:700; font-size:11.5px; letter-spacing:.2px; white-space:nowrap;
  color:var(--azul); background:var(--surface); border:1.5px solid var(--azul);
  border-radius:999px; padding:6px 12px; cursor:pointer; opacity:0; transform:translateX(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.btn-odoo.is-in { opacity:1; transform:none; }
.btn-odoo:hover { background:var(--azul); color:var(--on-azul); }
/* Chip del código: clic = copiar de inmediato.
   Azul EXACTO del manual de marca Metalkit (#2176ff), tipografía del sitio. */
.codigo-chip { display:block; width:fit-content; margin:8px auto 0;
  font-family:inherit; font-weight:700; font-size:13.5px; letter-spacing:.3px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  color:var(--on-azul); background:var(--azul); border:1.5px solid var(--azul);
  border-radius:999px; padding:7px 16px; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease); }
.codigo-chip:hover { background:var(--azul-osc); border-color:var(--azul-osc); }
/* Copiado: mismo azul de marca (sin verdes) — solo cambia el texto a "✓ Copiado". */

/* ===================== Móvil: compresión del contenido (va AL FINAL para ganar a las
   reglas base de .card/.step/.panel-title/.planta, que están más arriba) ===================== */
@media (max-width:899px) {
  /* Planta compacta en la esquina (arranca minimizada vía JS → botón "Ver planta"). */
  .planta { width:min(52%, 200px); top:10px; right:10px; }

  /* Que las opciones quepan sin scroll y la hoja sea corta (no tapa el 3D). */
  .stage__panel .panel__head { display:none; }        /* título/subtítulo del modelo: redundante en la hoja */
  .stage__panel .sheet-handle { padding:6px 0 3px; }
  .stage__panel .panel { padding:6px 14px 8px; gap:7px; overflow-x:hidden; }
  .stage__panel .stepper { padding:6px 14px 0; }
  .stage__panel .panelnav { padding:8px 14px; }
  .stage__panel .panel-title { display:none; }        /* título+descripción del paso: el stepper ya da contexto */
  /* Packs: tarjetas de una línea, compactas (que quepan los 6 sin scroll). */
  .stage__panel .cards { gap:5px; }
  .stage__panel .card { padding:5px 11px; gap:10px; }
  .stage__panel .card__label { font-size:13.5px; }
  .stage__panel .card__meta { font-size:10.5px; margin-top:0; }
  .stage__panel .card__tag { margin-top:2px; font-size:9px; padding:1px 6px; }
  /* Terminación: sin la línea de tiempo, y el COLOR en la MISMA fila que la descripción,
     como PUNTOS compactos superpuestos a la DERECHA de la fila (posición absoluta → NO
     afectan el ancho de la tarjeta ni desbordan). El nombre del color va en el title. */
  .stage__panel .step { padding-left:0; position:relative; }
  .stage__panel .step::before, .stage__panel .step__dot { display:none; }
  .stage__panel .step__card { margin:3px 0; padding:8px 68px 8px 12px; gap:10px; box-sizing:border-box; }
  .stage__panel .step__label { font-size:14px; }
  .stage__panel .step__switch { width:40px; height:24px; }
  .stage__panel .step__switch::after { width:18px; height:18px; }
  .stage__panel .step.is-on > .step__card .step__switch::after { transform:translateX(16px); }
  .stage__panel .step__variant { position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:2;
    margin:0; padding:0; background:transparent; border:none; gap:7px; }
  .stage__panel .step__vlabel { display:none; }
  .stage__panel .swatch { padding:0; font-size:0; border:none; background:transparent; gap:0; }
  .stage__panel .swatch__chip { width:23px; height:23px; border:1.5px solid rgba(0,0,0,.18); }
  .stage__panel .swatch.is-sel .swatch__chip { border-color:#fff; box-shadow:0 0 0 2px var(--acento); }
}