/* ============ tokens ============ */
:root{
  --accent:#e11d34;
  --accent-dark:#b3142a;
  --ink:#1c2230;
  --muted:#6b7385;
  --line:#e4e7ee;
  --bg:#eef1f6;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(20,28,45,.10);
}

@property --w { syntax:'<length>'; inherits:true; initial-value:360px; }
@property --h { syntax:'<length>'; inherits:true; initial-value:168px; }
@property --d { syntax:'<length>'; inherits:true; initial-value:210px; }

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}

/* ============ app shell: una sola pantalla ============ */
.app{
  height:100vh;
  display:grid;
  grid-template-rows:auto auto 1fr;
  grid-template-columns:minmax(0,1fr);
}

/* ============ header + precio ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 18px; background:var(--card); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand__txt strong{ display:block; font-size:15px; }
.brand__txt small{ color:var(--muted); font-size:12px; }

.price{ display:flex; align-items:center; gap:12px; }
.price__num{ text-align:right; line-height:1.05; }
.price__num small{ display:block; color:var(--muted); font-size:11px; }
.price__num strong{ font-size:24px; font-variant-numeric:tabular-nums; }
.price__pop{ position:relative; }
.popover{
  position:absolute; right:0; top:calc(100% + 8px); z-index:30;
  width:280px; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px rgba(20,28,45,.18); padding:10px 14px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s;
}
.popover.open{ opacity:1; visibility:visible; transform:translateY(0); }
.popover ul{ list-style:none; margin:0; padding:0; }
.popover li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:13px; border-bottom:1px dashed var(--line); }
.popover li:last-child{ border-bottom:0; }
.popover li span:last-child{ font-variant-numeric:tabular-nums; }

.btn{ border:0; border-radius:9px; padding:9px 14px; font-size:13px; cursor:pointer; transition:.15s; white-space:nowrap; }
.btn--ghost{ background:#eef0f4; color:var(--ink); }
.btn--ghost:hover{ background:#e2e6ec; }
.btn--primary{ background:var(--accent); color:#fff; font-weight:600; box-shadow:0 6px 16px rgba(225,29,52,.3); }
.btn--primary:hover{ background:var(--accent-dark); }

/* ============ ribbon de opciones (encima) ============ */
.ribbon{
  display:grid; grid-template-columns:repeat(12,1fr); gap:10px; padding:12px 18px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.rib{
  grid-column:span 3; min-width:0;
  display:flex; flex-direction:column;
  background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:9px 12px 11px;
}
.rib--wide{ grid-column:span 6; }
.rib__head{
  font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#8a91a1;
  margin-bottom:8px; display:flex; gap:6px; align-items:baseline; min-height:14px;
}
.rib__head span{ color:var(--ink); font-weight:600; text-transform:none; letter-spacing:0; }

/* swatches (solo color, nombre en cabecera) */
.swatches{ display:flex; gap:9px; flex-wrap:wrap; }
.swatch{ border:0; background:none; padding:0; cursor:pointer; line-height:0; }
.swatch i{
  display:block; width:30px; height:30px; border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.12); transition:.15s;
}
.swatch.is-active i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--accent); }

/* chips (presets + accesorios) */
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); background:#f7f8fb; border-radius:999px;
  padding:6px 12px; font-size:12px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.chip:hover{ border-color:#c7ccd8; }
.chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip b{ font-weight:600; opacity:.8; margin-left:3px; }
#accessories{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px; justify-items:start; }

/* range */
.range{ width:100%; accent-color:var(--accent); height:5px; margin-top:8px; }

/* segmented */
.segmented{ display:flex; gap:6px; }
.seg{
  flex:1 1 0; min-width:0; border:1px solid var(--line); background:#f7f8fb; border-radius:9px;
  padding:7px 6px; cursor:pointer; transition:.15s; font-size:12px; text-align:center; line-height:1.15;
}
.seg:hover{ border-color:#c7ccd8; }
.seg.is-active{ border-color:var(--accent); background:#fff; box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent); font-weight:600; }
.seg small{ display:block; color:var(--muted); font-weight:400; font-size:10px; margin-top:1px; }
.seg.is-active small{ color:var(--accent); }

/* ============ visor 3D grande ============ */
.stage-wrap{ min-height:0; padding:16px 18px 18px; }
.stage{
  position:relative; height:100%; border-radius:16px; overflow:hidden;
  display:grid; place-items:center; perspective:1350px;
  background:radial-gradient(120% 85% at 50% 16%, #ffffff 0%, #eef2f8 55%, #dbe2ee 100%);
  border:1px solid var(--line); box-shadow:var(--shadow);
  cursor:grab; touch-action:none; user-select:none;
}
.stage.is-grabbing{ cursor:grabbing; }

.scene{
  position:relative; width:1px; height:1px; transform-style:preserve-3d;
  transform:rotateX(var(--rx,-13deg)) rotateY(var(--ry,18deg));
}
.scene.is-animated{ transition:transform .45s cubic-bezier(.2,.7,.25,1); }

.toaster{
  position:absolute; top:0; left:0; transform-style:preserve-3d;
  --finish:#c9ccd1; --w:360px; --h:168px; --d:210px;
  transition:--w .4s ease,--h .4s ease,--d .4s ease; color:var(--finish);
}

/* faces */
.face{
  position:absolute; top:50%; left:50%;
  background:var(--finish);
  background-image:linear-gradient(var(--tint,transparent),var(--tint,transparent));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); overflow:hidden;
  transition:transform .55s cubic-bezier(.45,.05,.2,1);
}
.face--front,.face--back{ width:var(--w); height:var(--h); }
.face--left,.face--right{ width:var(--d); height:var(--h); }
.face--top,.face--bottom{ width:var(--w); height:var(--d); }
.face--front { transform:translate(-50%,-50%) translateZ(calc(var(--d)/2)); }
.face--back  { transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)/2)); --tint:rgba(0,0,0,.34); }
.face--right { transform:translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--w)/2)); --tint:rgba(0,0,0,.16); }
.face--left  { transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)/2)); --tint:rgba(0,0,0,.26); }
.face--top   { transform:translate(-50%,-50%) rotateX(90deg)  translateZ(calc(var(--h)/2)); --tint:rgba(255,255,255,.16); }
.face--bottom{ transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)/2)); --tint:rgba(0,0,0,.5); }

/* asa de transporte sobre la tapa */
.face--top{ overflow:visible; transform-style:preserve-3d; }
.handle{
  position:absolute; left:27%; right:27%; top:30%; height:24%; border-radius:9px;
  background:linear-gradient(#34373f,#1b1d22); box-shadow:0 5px 9px rgba(0,0,0,.4);
  display:none; transform:translateZ(15px);
}
.has-handle .handle{ display:block; }

/* despiece: cada cara se aleja por su normal */
.is-exploded .face--front { transform:translate(-50%,-50%) translateZ(calc(var(--d)/2 + 72px)); }
.is-exploded .face--back  { transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)/2 + 72px)); }
.is-exploded .face--right { transform:translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--w)/2 + 72px)); }
.is-exploded .face--left  { transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)/2 + 72px)); }
.is-exploded .face--top   { transform:translate(-50%,-50%) rotateX(90deg)  translateZ(calc(var(--h)/2 + 72px)); }
.is-exploded .face--bottom{ transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)/2 + 72px)); }

.is-metallic .face--top::after,
.is-metallic .face--front::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 60%,rgba(255,255,255,.22) 100%);
}

.shadow{
  position:absolute; top:50%; left:50%;
  width:calc(var(--w) * 1.35); height:calc(var(--d) * 1.15);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.32),rgba(0,0,0,0) 70%);
  transform:translate(-50%,-50%) translateY(calc(var(--h)/2 + 12px)) rotateX(90deg); filter:blur(3px);
}

/* front detail */
.chamber{
  position:absolute; left:7%; right:7%; top:11%; height:50%;
  background:linear-gradient(#15171c,#212530); border-radius:6px;
  box-shadow:inset 0 4px 10px rgba(0,0,0,.7); overflow:hidden;
}
.elements{ position:absolute; left:6%; right:6%; top:13%; height:36%;
  display:flex; flex-direction:column; justify-content:space-evenly; }
.el{ height:13%; min-height:3px; background:#7a3a20; border-radius:3px; transition:background .25s,box-shadow .25s; }
.rack{ position:absolute; left:5%; right:5%; bottom:10%; height:34%;
  background:repeating-linear-gradient(to right,#c6cbd3 0 2px,transparent 2px 15px);
  border-top:2px solid #c6cbd3; border-bottom:2px solid #c6cbd3; }
.glow{ position:absolute; inset:0; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,110,30,.75),rgba(255,60,0,.15) 60%,transparent 75%); }
.is-on .glow{ opacity:1; }
.is-on .el{ background:#ff6a1f; box-shadow:0 0 10px rgba(255,90,20,.95); }

.cpanel{
  position:absolute; left:6%; right:6%; bottom:7%; height:24%;
  background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.45)); border-radius:5px;
  display:flex; align-items:center; gap:7%; padding:0 6%;
}
.cpanel .sw{ width:22px; height:46%; background:linear-gradient(#e23b2c,#b21f17); border-radius:3px; box-shadow:inset 0 2px 2px rgba(255,255,255,.3); }
.cpanel .knob{ margin-left:auto; width:30px; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4a4d55,#1d1f24);
  box-shadow:0 0 0 2px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.25); position:relative; }
.cpanel .knob::after{ content:""; position:absolute; left:50%; top:12%; width:2px; height:32%; background:#e8e8ea; transform:translateX(-50%); border-radius:2px; }
.cpanel .display{
  display:none; align-items:center; justify-content:center; gap:2px;
  flex:1; height:62%; margin-left:auto; max-width:46%;
  background:#06100c; border-radius:4px; padding:0 8px;
  color:#2ee6c2; font-family:"Courier New",ui-monospace,monospace; font-weight:700;
  font-size:14px; letter-spacing:2px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.95), 0 0 5px rgba(46,230,194,.45);
  text-shadow:0 0 7px rgba(46,230,194,.95);
}
/* Mecánico vs Digital */
.is-digital .knob,
.is-digital .sw{ display:none; }
.is-digital .display{ display:flex; }
.is-digital.is-on .display{ color:#5cffd9; text-shadow:0 0 10px rgba(92,255,217,1); }

/* dims overlay */
.dims{ position:absolute; top:14px; left:14px; display:flex; gap:8px; }
.dim{ background:rgba(255,255,255,.82); backdrop-filter:blur(6px); border:1px solid var(--line);
  border-radius:10px; padding:7px 11px; text-align:center; min-width:58px; }
.dim span{ display:block; font-size:16px; font-weight:700; line-height:1.1; }
.dim small{ color:var(--muted); font-size:10px; }
.dim--cap span{ font-size:13px; }

/* tools + hint */
.stage__tools{ position:absolute; top:14px; right:14px; display:flex; gap:8px; }
.tool{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:999px;
  padding:7px 13px; font-size:13px; color:var(--ink); cursor:pointer; transition:.15s; }
.tool:hover{ border-color:#c7ccd8; }
.tool.is-busy{ pointer-events:none; opacity:.55; }
.tool .dot{ width:9px; height:9px; border-radius:50%; background:#b9bfca; transition:.2s; }
.tool[aria-pressed="true"]{ background:#fff; border-color:var(--accent); color:var(--accent); }
.tool[aria-pressed="true"] .dot{ background:var(--accent); box-shadow:0 0 8px var(--accent); }

.drag-hint{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--muted); background:rgba(255,255,255,.72);
  padding:5px 12px; border-radius:999px; pointer-events:none; transition:opacity .4s; border:1px solid var(--line); }
.drag-hint.hide{ opacity:0; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:14px 20px; border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:.3s; max-width:90vw; font-size:14px; z-index:50; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============ acceso (login demo) ============ */
.login{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:radial-gradient(circle at 50% -10%, #f4f6fa, #e2e6ef);
}
.login.hide{ display:none; }
.login__card{
  width:min(360px,92vw); background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:26px 24px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.login__card .brand{ margin-bottom:4px; }
.login__field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.login__field input{
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:14px;
  color:var(--ink); background:#f7f8fb; outline:none; transition:.15s;
}
.login__field input:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(225,29,52,.12); }
.login__error{ margin:0; font-size:12.5px; color:var(--accent); font-weight:600; }
.login__card .btn{ margin-top:4px; }

/* pantallas de poca altura (ventana baja en escritorio): permitir scroll */
@media (max-height:560px){
  html,body{ height:auto; overflow:visible; }
  .app{ height:auto; min-height:100vh; }
  .stage-wrap{ height:62vh; min-height:300px; }
}

/* tablet / pantallas medianas */
@media (max-width:1100px){
  .ribbon{ grid-template-columns:repeat(8,1fr); }
  .rib{ grid-column:span 4; }
  .rib--wide{ grid-column:span 8; }
}

/* ============ móvil ============ */
@media (max-width:760px){
  html,body{ height:auto; overflow:visible; }
  .app{ height:auto; min-height:100vh; }

  /* cabecera: envolver en filas en vez de cortarse */
  .topbar{ flex-wrap:wrap; gap:10px 12px; padding:10px 14px; }
  .brand{ flex:1 1 100%; }
  .price{ width:100%; flex-wrap:wrap; justify-content:flex-start; gap:8px; }
  .price__num{ flex:1 1 auto; text-align:left; }
  .price__num strong{ font-size:20px; }
  .price .btn{ padding:8px 12px; font-size:12px; }
  .popover{ width:min(280px,86vw); }

  /* opciones en 2 columnas */
  .ribbon{ grid-template-columns:repeat(2,1fr); gap:9px; padding:12px 14px; }
  .rib{ grid-column:span 1; padding:9px 10px 11px; }
  .rib--wide{ grid-column:span 2; }

  /* segmentos más compactos para que el texto no se parta */
  .seg{ padding:7px 4px; font-size:11.5px; }
  .seg small{ font-size:9px; }

  /* visor: reservar alto y escalar el modelo para que se vea entero */
  .stage-wrap{ height:56vh; min-height:330px; padding:12px 14px 14px; }
  .scene{ transform:scale(.58) rotateX(var(--rx,-13deg)) rotateY(var(--ry,18deg)); }

  /* overlays del visor: evitar que se solapen en pantalla estrecha */
  .dims{ top:10px; left:10px; right:auto; gap:6px; flex-wrap:wrap; max-width:58%; }
  .dim{ min-width:46px; padding:5px 8px; }
  .dim span{ font-size:14px; }
  .dim--cap span{ font-size:11px; }
  .stage__tools{
    top:auto; bottom:12px; left:50%; right:auto; transform:translateX(-50%);
    flex-wrap:wrap; justify-content:center; max-width:94%;
  }
  .tool{ padding:6px 11px; font-size:12px; }
  .drag-hint{ display:none; }
}