/* ============================================================
   producto.css — estilo compartido de las páginas de producto
   Skin claro + barra lateral negra + versión móvil.
   ============================================================ */
:root{
  --magenta:#EC008C; --cyan:#00AEEF; --yellow:#FFD400;
  --ink:#14151A; --gray:#6B7280; --line:#ECEDF1; --red:#F5333F; --btn:#0077B6;
  --bg:#EEF0F4; --card:#FFFFFF; --soft:#F6F7F9;
  --display:"Archivo",sans-serif; --body:"Manrope",sans-serif;
  --cmyk:linear-gradient(90deg,var(--magenta),var(--cyan) 50%,var(--yellow));
  --shadow:0 10px 30px rgba(20,21,26,.06); --shadow-lg:0 24px 60px rgba(20,21,26,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.5;overflow:hidden}
a{text-decoration:none;color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:.98;font-weight:900}
.shell{height:100vh;max-width:1360px;margin:0 auto;padding:14px 22px 16px;display:flex;flex-direction:column}

/* header */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 2px 14px;flex-shrink:0}
.brand img{height:104px;width:auto;display:block}
.top-right{display:flex;align-items:center;gap:16px}
.phone{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem}
.phone svg{width:16px;height:16px;stroke:var(--magenta);fill:none;stroke-width:2}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:700;border:none;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.btn-mag{background:var(--btn);color:#fff;padding:12px 24px;font-size:.82rem;letter-spacing:.05em;box-shadow:0 8px 20px rgba(0,119,182,.30)}
.btn-mag:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,119,182,.40)}
/* ----- HEADER: display de máquina + teclas de acceso directo ----- */
.head-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;min-width:0}
.machine-display{display:flex;align-items:center;gap:11px;background:linear-gradient(180deg,#0e0f14,#16181f);border:1px solid #262830;border-radius:13px;padding:9px 15px;box-shadow:inset 0 2px 7px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.04);min-width:0}
.md-led{width:9px;height:9px;border-radius:50%;background:#1bd673;box-shadow:0 0 9px 1px rgba(27,214,115,.85);flex-shrink:0;animation:ledPulse 2.4s ease-in-out infinite}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.45}}
.md-text{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.md-text b{font-size:.68rem;letter-spacing:.16em;color:#eef0f5;font-weight:800}
.md-text small{font-size:.62rem;color:#838896;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-ink{display:flex;gap:4px;margin-left:3px;flex-shrink:0}
.md-ink span{width:5px;height:17px;border-radius:2px;background:var(--c);box-shadow:0 0 5px var(--c)}
.quick-keys{display:flex;gap:8px}
.qkey{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--ink);background:linear-gradient(180deg,#ffffff,#eceef3);border:1px solid #dde0e7;border-radius:10px;padding:9px 14px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,21,26,.08);transition:transform .1s,box-shadow .18s,color .18s,border-color .18s}
.qkey svg{width:15px;height:15px;stroke:var(--magenta);fill:none;stroke-width:2}
.qkey:hover{color:var(--magenta);border-color:rgba(236,0,140,.45);box-shadow:0 5px 12px rgba(236,0,140,.16)}
.qkey:active{transform:translateY(1px);box-shadow:0 2px 5px rgba(20,21,26,.14) inset}
.qkey.is-current{border-color:rgba(236,0,140,.5);color:var(--magenta);background:linear-gradient(180deg,#fff,#fdeef6)}
@media(max-width:1240px){.quick-keys{display:none}}
@media(max-width:1024px){.md-text small{display:none}.md-ink{display:none}}
@media(max-width:860px){.head-mid{display:none}}
@media(max-width:980px){.phone{display:none}}

/* site footer (mini) */
.sitefoot{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:10px 8px 0;font-size:.66rem;color:#9aa0ab;text-align:center;line-height:1.45}
.sitefoot a{color:var(--btn);font-weight:700}
.sitefoot a:hover{text-decoration:underline}
.foot-sep{opacity:.45}
@media(max-width:760px){.foot-sep{display:none}.sitefoot{font-size:.62rem;gap:3px;padding-bottom:8px}}

/* app shell (cards, no gray frame) */
.app{flex:1;display:flex;flex-direction:column;gap:14px;min-height:0}
.stage{display:flex;gap:16px;flex:1;min-height:0}
.sidebar{width:212px;background:#101012;border-radius:20px;display:flex;flex-direction:column;padding:16px 12px;flex-shrink:0;box-shadow:var(--shadow-lg)}
/* ----- BOTONES PANEL DE IMPRESORA ----- */
.side-item{position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:#c3c7d0;font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;margin-bottom:7px;
  background:linear-gradient(180deg,#23242b,#191a20);border:1px solid #2d2e36;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 2px 5px rgba(0,0,0,.45);
  transition:transform .1s, box-shadow .18s, color .18s, background .18s}
.side-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0;transition:filter .25s}
.side-item::before{content:"";width:9px;height:9px;border-radius:50%;flex-shrink:0;background:#3b3c45;box-shadow:inset 0 1px 2px rgba(0,0,0,.75);transition:background .22s, box-shadow .28s}
.side-item:hover{color:#fff;background:linear-gradient(180deg,#282933,#1d1e26);box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 5px 12px rgba(0,0,0,.5)}
.side-item:hover::before{background:#ff63c2;box-shadow:0 0 8px 1px rgba(236,0,140,.7)}
.side-item.on{color:#fff;background:linear-gradient(180deg,#17181e,#121319);box-shadow:0 2px 7px rgba(0,0,0,.6) inset, 0 0 0 1px rgba(236,0,140,.4)}
.side-item.on::before{background:var(--magenta);box-shadow:0 0 10px 2px rgba(236,0,140,.9), inset 0 0 2px rgba(255,255,255,.7)}
.side-item.on svg{filter:drop-shadow(0 0 5px rgba(236,0,140,.65))}
.side-item.on::after{content:"";margin-left:auto;width:6px;height:6px;border-right:2px solid var(--magenta);border-top:2px solid var(--magenta);transform:rotate(45deg);filter:drop-shadow(0 0 3px rgba(236,0,140,.7))}
.side-item:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.6) inset}
.side-foot{margin-top:auto;padding:14px 14px 4px;border-top:1px solid #26272d}
.cmyk-dots{display:flex;gap:8px;margin-bottom:8px}
.cmyk-dots span{width:14px;height:14px;border-radius:50%}
.side-foot small{color:#6b6e76;font-weight:700;letter-spacing:.18em;font-size:.66rem}

/* canvas */
.canvas{flex:1;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;min-height:0;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.crumb{padding:16px 30px 0;font-size:.8rem;color:var(--gray);flex-shrink:0}
.crumb::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--magenta);box-shadow:0 0 8px rgba(236,0,140,.75);margin-right:8px;vertical-align:middle}
.crumb a:hover{color:var(--cyan)} .crumb b{color:var(--ink)}
.pgrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.15fr;gap:24px;padding:14px 30px 24px}

/* preview */
.preview{display:flex;flex-direction:column;min-height:0}
.ghero{flex:1;min-height:190px;border-radius:16px;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 60%),linear-gradient(135deg,var(--magenta),var(--cyan) 58%,var(--yellow));display:grid;place-items:center;position:relative;overflow:hidden}
.ghero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.4px);background-size:13px 13px}
.ghero img{width:100%;height:100%;object-fit:cover;position:relative;z-index:3}
.prev-note{margin-top:10px;font-size:.72rem;color:var(--gray);text-align:center;flex-shrink:0}
/* mocks (placeholders sin foto) */
.mock-card{width:60%;max-width:260px;aspect-ratio:1.75/1;background:#111;border-radius:11px;box-shadow:0 22px 46px rgba(0,0,0,.4);position:relative;z-index:2;transform:rotate(-6deg);padding:16px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.mock-card .seven{position:absolute;top:12px;right:16px;font-family:var(--display);font-weight:900;font-size:2rem;background:var(--cmyk);-webkit-background-clip:text;background-clip:text;color:transparent}
.mock-card b{font-family:var(--display);font-size:.95rem} .mock-card span{font-size:.62rem;color:#bbb}
.mock-dh{width:34%;max-width:120px;aspect-ratio:.44;background:#141414;border-radius:9px;box-shadow:0 22px 46px rgba(0,0,0,.4);position:relative;z-index:2;transform:rotate(-4deg);padding:12px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.mock-dh .hole{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;border:3px solid #555}
.mock-dh .d7{position:absolute;top:40px;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:900;font-size:1.3rem;background:var(--cmyk);-webkit-background-clip:text;background-clip:text;color:transparent}
.mock-dh b{font-family:var(--display);font-weight:900;font-size:.78rem;line-height:1} .mock-dh span{font-size:.56rem;color:var(--yellow);font-weight:700}
.mock-ba{width:62%;max-width:240px;aspect-ratio:2;background:#141414;border-radius:6px;box-shadow:0 22px 46px rgba(0,0,0,.4);position:relative;z-index:2;transform:rotate(-2deg);display:flex;align-items:center;justify-content:center;gap:14px;color:#fff;border:3px solid #fff}
.mock-ba::before,.mock-ba::after{content:"";position:absolute;top:8px;width:9px;height:9px;border-radius:50%;background:#888;box-shadow:0 110px 0 #888}
.mock-ba::before{left:8px}.mock-ba::after{right:8px}
.mock-ba .b7{font-family:var(--display);font-weight:900;font-size:2.2rem;background:var(--cmyk);-webkit-background-clip:text;background-clip:text;color:transparent}
.mock-ba b{font-family:var(--display);font-weight:900;font-size:1.1rem}
.mock-flyer{width:48%;max-width:200px;aspect-ratio:.72;background:#141414;border-radius:8px;box-shadow:0 22px 46px rgba(0,0,0,.4);position:relative;z-index:2;transform:rotate(-5deg);padding:16px;color:#fff;overflow:hidden}
.mock-flyer .gb{position:absolute;right:-24px;top:-24px;width:110px;height:190px;background:var(--cmyk);transform:rotate(20deg);opacity:.92}
.mock-flyer .f7{position:relative;font-family:var(--display);font-weight:900;font-size:1.6rem;background:var(--cmyk);-webkit-background-clip:text;background-clip:text;color:transparent}
.mock-flyer b{position:relative;display:block;font-family:var(--display);font-weight:900;font-size:1.3rem;line-height:1;margin-top:70px}
.mock-flyer span{position:relative;font-size:.62rem;color:var(--yellow);font-weight:700}

/* configurator */
.config{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding-right:4px}
.config h1{font-size:1.7rem;margin-bottom:3px}
.config .desc{font-size:.86rem;color:var(--gray);margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:800;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:7px}
select,input[type=number]{width:100%;min-height:44px;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:var(--body);font-size:.92rem;font-weight:600;background:#fff}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2314151A' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
select:focus,input[type=number]:focus{outline:none;border-color:var(--magenta)}
.dims{display:flex;gap:10px;align-items:center}
.dims .x{font-weight:800;color:var(--gray)} .dims .u{font-size:.72rem;color:var(--gray)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{border:1.5px solid var(--line);border-radius:8px;padding:7px 11px;font-size:.76rem;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--magenta);color:var(--magenta)}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{flex:1;min-width:96px;min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:8px 11px;cursor:pointer;transition:.15s;text-align:center;font-size:.85rem;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center}
.opt small{display:block;font-weight:400;color:var(--gray);font-size:.7rem;margin-top:1px}
.opt.active{border-color:var(--magenta);background:#fdeef6;box-shadow:0 0 0 3px rgba(236,0,140,.10),0 4px 14px rgba(236,0,140,.18)}
.qty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:7px}
.qty-grid .opt{min-width:auto;padding:8px 4px;font-size:.82rem}
.note-uv{font-size:.74rem;color:var(--gray);margin-top:5px}

/* status bar (precio + cotizar) */
.statusbar{display:flex;gap:14px;flex-shrink:0}
.sb-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 18px;display:flex;align-items:center;gap:13px;box-shadow:var(--shadow)}
.sb-label{font-size:.62rem;font-weight:800;letter-spacing:.13em;color:var(--gray);text-transform:uppercase;margin-bottom:4px}
.sb-estado .chk{width:34px;height:34px;border-radius:50%;background:#16c172;display:grid;place-items:center;flex-shrink:0}
.sb-estado .chk svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:3}
.sb-estado b{font-size:.96rem} .sb-estado p{font-size:.76rem;color:var(--gray)}
.sb-resumen{flex:1.4} .sb-resumen b{font-size:.84rem;display:block;line-height:1.5} .sb-resumen b span{color:var(--cyan)}
.sb-precio{flex:1}
.sb-precio .big{font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1}
.sb-precio .unit{font-size:.74rem;color:var(--gray)} .sb-precio .unit b{color:var(--cyan)}
.sb-cot{background:var(--btn);border-radius:16px;padding:0 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#fff;min-width:158px;transition:.2s;box-shadow:0 10px 24px rgba(0,119,182,.30)}
.sb-cot:hover{transform:translateY(-2px)}
.sb-cot .ring{width:36px;height:36px;border-radius:50%;border:3px solid #fff;margin-bottom:5px;display:grid;place-items:center}
.sb-cot .ring svg{width:16px;height:16px;fill:#fff}
.sb-cot b{font-size:.74rem;font-weight:800;letter-spacing:.12em}

/* ============================================================
   MÓVIL — scroll vertical, sin barra lateral, precio+cotizar fijos abajo
   ============================================================ */
@media(max-width:760px){
  html,body{height:auto;overflow:visible}
  .shell{height:auto;min-height:100dvh;padding:10px 14px 96px;display:block}
  .topbar{padding-bottom:10px}
  .brand img{height:46px}
  .app{display:block}
  .stage{display:block}
  .sidebar{display:none}
  .canvas{border-radius:16px;display:block;overflow:visible}
  .crumb{padding:16px 18px 0}
  .pgrid{display:block;padding:14px 16px 18px}
  .preview{margin-bottom:18px}
  .ghero{min-height:230px}
  .config{overflow:visible}
  /* barra fija inferior: solo precio + cotizar */
  .statusbar{position:fixed;left:0;right:0;bottom:0;margin:0;padding:10px 14px;gap:10px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 28px rgba(20,21,26,.10);z-index:60}
  .sb-card{box-shadow:none;border:none;padding:6px 10px}
  .sb-estado,.sb-resumen,.sb-papel,.sb-tintas{display:none}
  .sb-precio{flex:1;padding-left:4px}
  .sb-precio .big{font-size:1.5rem}
  .sb-cot{min-width:auto;flex:0 0 auto;flex-direction:row;gap:9px;padding:14px 22px;border-radius:14px}
  .sb-cot .ring{margin:0;width:26px;height:26px}
}