/* drawn by pen · retratos — laboratorio de retratos. Tokens compartidos con la landing (papel de Studio + tinta). */
:root { color-scheme: light;
  --bg: #FAFAF7; --panel: #FFFFFF; --panel2: #F2F2ED; --panel3: #F6F6F2; --text: #111214; --text2: #3B3D43; --muted: #5B5D64; --muted2: #9A9B9F;
  --line: #E3E3DD; --line2: #DCDCD5; --ink: #111214; --ink-text: #FFFFFF;
  --accent: #1E3FBF; --accent-text: #FFFFFF; --accent-soft: #E7EBFA; --focus: rgba(30,63,191,.25);
  --ok-bg: #E2F1D6; --ok: #2F6B1C; --warn-bg: #FDF0C8; --warn: #8A5A00; --danger: #B3261E; --tag-bg: #F2F2ED; --tag: #5B5D64;
  --shadow: rgba(17,18,20,.12); --sh-panel: 0 1px 2px rgba(17,18,20,.05); --sh-pop: 0 8px 24px rgba(17,18,20,.10); --sh-modal: 0 16px 48px rgba(17,18,20,.22);
  --fab-bg: #FFFFFFf2; --scrim: rgba(17,18,20,.4);
  --font: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hint { color: var(--muted); font-size: 12px; margin: 4px 0; }
.mobile-only { display: none !important; }
@media (max-width: 900px) { .desktop-only { display: none !important; } }
@media (min-width: 901px) { .touch-only { display: none !important; } }

/* ---------- Shell ---------- */
#app { display: grid; grid-template-columns: 420px minmax(0, 1fr); height: 100vh; }
/* Panel y lienzo comparten el mismo tablero (--bg); cada sección es una caja blanca (.box) encima */
#panel { display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--line); min-height: 0; }
#panel .ph { padding: 14px 22px 0; display: flex; align-items: center; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.brand .tile { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--ink-text); display: inline-flex; align-items: center; justify-content: center; }
.brand .tile .ico { width: 15px; height: 15px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1; min-width: 0; align-self: center; }
.steps li { min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--muted2); cursor: default; line-height: 1.3; }
.steps li::before { content: ''; display: block; height: 3px; border-radius: 999px; background: var(--line2); margin-bottom: 5px; }
.steps li.done { color: var(--muted); cursor: pointer; } .steps li.done::before { background: var(--ink); }
.steps li.on { color: var(--text); } .steps li.on::before { background: var(--accent); }
.steps li span { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.steps { counter-reset: paso; } .steps li { counter-increment: paso; } /* numerados por CSS: en escritorio ancho el paso 3 no se enseña */
.steps li small { font-weight: 500; opacity: .7; margin-right: 4px; } .steps li small::before { content: counter(paso); }
.brand .word { font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; font-weight: 400; letter-spacing: -0.01em; }
#panel .body, #side .body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 22px 24px; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
section.step { display: none; } section.step.on { display: flex; flex-direction: column; min-height: 100%; }
section.step > * { flex: none; }
section.step h1 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; margin: 4px 0 3px; line-height: 1.15; }
section.step > p.lead { color: var(--text2); margin: 0 0 14px; }
.foot { position: sticky; bottom: -22px; margin: auto -22px -22px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 30%); display: flex; gap: 10px; align-items: center; }
.foot button, .foot a.btn { flex: 1; } .foot button.icon { flex: none; }

/* ---------- Cajas: una por sección, con su título y, a la derecha, lo que hay elegido ---------- */
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 0 0 10px; }
.box > :last-child, .box .inner > :last-child { margin-bottom: 0; }
h2, details.adv > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; }
h2 { margin: 0 0 10px; }
h2 > .val, summary > .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.inner > h2 { font-size: 12.5px; color: var(--text2); }
button.more { align-self: flex-start; height: 28px; padding: 0; gap: 3px; background: none; border: 0; border-radius: 6px; font-size: 12.5px; color: var(--accent); } button.more .ico { width: 13px; height: 13px; }
/* varias secciones dentro de una misma caja («Papel y tinta»): las separa una línea */
.inner > h2:not(:first-child), .inner > .margin-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.inner > .margin-row { margin-bottom: 0; }

/* ---------- Escritorio ancho (≥ 1200 px): pasos arriba, el dibujo a la izquierda, el pedido a la derecha (lab.js → syncLayout) ---------- */
#topbar, #side { display: none; }
#app:not(.b) .b-only { display: none !important; } #app.b .b-hide { display: none !important; }
@media (min-width: 1200px) {
  #app.b { grid-template-columns: 348px minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); grid-template-areas: "top top" "panel stage"; }
  #app.b.has-side { grid-template-columns: 348px minmax(0, 1fr) 340px; grid-template-areas: "top top top" "panel stage side"; }
  #app.b #topbar { display: block; grid-area: top; background: var(--panel); border-bottom: 1px solid var(--line); }
  #app.b #panel { grid-area: panel; } #app.b #stage { grid-area: stage; }
  #app.b #topbar .ph { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); align-items: center; gap: 24px; height: 56px; padding: 0 22px; }
  #app.b .steps { gap: 10px; } #app.b .steps li[data-step="3"] { display: none; } /* papel y tinta están siempre a la derecha */
  #app.b #panel .body { padding: 16px 16px 24px 22px; }
  #app.b #panel .foot { margin-right: -16px; padding-right: 16px; }
  #app.b #title4 { display: none; }
  #app.b.has-side #side { grid-area: side; display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-left: 1px solid var(--line); }
  #app.b #side .body { padding: 16px 22px 8px 16px; }
  #app.b #sizes2 .opt { padding: 9px 9px; }
  #app.b #side .bottom { flex: none; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 8px 22px 16px 16px; }
  #app.b #side .bottom::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
  #app.b:not(.has-result) #side .bottom { visibility: hidden; }
  #app.b #side .bottom > * { margin: 0; }
  #app.b #side .foot { position: static; padding: 0; background: none; }
}

/* ---------- Controles ---------- */
button, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; background: var(--panel2); color: var(--text); white-space: nowrap; }
button:disabled { opacity: 0.45; cursor: default; }
button.sec { background: var(--panel); border-color: var(--line2); } button.sec:hover:not(:disabled) { border-color: var(--muted); }
button.pri { background: var(--ink); color: var(--ink-text); } button.pri:hover:not(:disabled) { opacity: .92; }
button.accent, a.btn.accent { background: var(--accent); color: var(--accent-text); } button.accent:hover:not(:disabled), a.btn.accent:hover { filter: brightness(1.08); }
a.btn { text-decoration: none; }
button.ghost { background: transparent; color: var(--text2); } button.ghost:hover { background: var(--panel2); }
button.icon { padding: 0; width: 40px; } button.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; } button.icon.sm { width: 32px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.row { display: grid; gap: 5px; margin: 0 0 10px; }
.row > span { color: var(--text2); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
input[type=number], input[type=text], input[type=email], input[type=tel], select, textarea { width: 100%; height: 40px; background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; outline: none; }
textarea { height: auto; min-height: 70px; padding: 8px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--line2); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--ink); box-shadow: 0 1px 2px rgba(28,27,24,.15); cursor: pointer; }
input[type=range]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line2); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--ink); cursor: pointer; }
.param { display: grid; grid-template-columns: 1fr 68px; grid-template-areas: "label num" "range range"; gap: 2px 8px; align-items: center; margin: 0 0 8px; }
.param > label { grid-area: label; font-size: 12.5px; font-weight: 500; color: var(--text2); }
.param > input[type=range] { grid-area: range; }
.param > input[type=number] { grid-area: num; height: 28px; padding: 0 8px; font-size: 12px; text-align: right; border-radius: 8px; }
.param.full { grid-template-columns: 1fr; grid-template-areas: "label" "range"; } .param.full > * { grid-area: auto; }
.param.full > label { display: flex; align-items: center; gap: 8px; }
#params:not(.all) .param.extra { display: none; }
#params + .btnrow { margin: 12px 0 0; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; margin: 0 0 10px; cursor: pointer; }
details.adv > summary { list-style: none; cursor: pointer; margin: -14px -16px; padding: 14px 16px; border-radius: 16px; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary > :first-child { margin-right: auto; }
details.adv > summary::after { content: '+'; flex: none; width: 12px; text-align: center; font-size: 18px; line-height: 1; color: var(--muted); font-weight: 400; }
details.adv[open] > summary::after { content: '–'; }
details.adv > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
details.adv[open] > summary { margin-bottom: 0; padding-bottom: 12px; border-radius: 16px 16px 0 0; }

/* ---------- Paso 1: foto ---------- */
.drop { border: 1.5px dashed var(--line2); border-radius: 16px; padding: 22px 16px; text-align: center; background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .big { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.drop .ico { width: 28px; height: 28px; margin-bottom: 6px; color: var(--muted); stroke-width: 1.4; }
.samples { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.samples span { font-size: 12px; color: var(--muted); }
.samples img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line2); cursor: pointer; }
.samples img:hover { border-color: var(--accent); }
.framer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .framer > .box { margin: 0; }
.framer .prev { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; justify-content: center; align-items: center; min-height: 220px; }
.framer .prev canvas { max-width: 100%; max-height: 300px; box-shadow: 0 6px 20px var(--shadow); background: #fff; }
.framer .prev .chg { position: absolute; right: 10px; top: 10px; }
.seg { display: inline-flex; background: var(--panel2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { height: 30px; padding: 0 12px; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 500; color: var(--text2); }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: var(--sh-panel); }

/* ---------- Paso 2: estilos ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.card { position: relative; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, transform .12s; }
.card.on { border-color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) { .card:hover { transform: translateY(-1px); } .card:hover:not(.on) { border-color: var(--line2); } }
.cards { --par: 148 / 210; } /* proporción del papel elegido; la fija lab.js */
.card .th { position: relative; width: 100%; aspect-ratio: var(--par); border-radius: 8px; overflow: hidden; background: #fbfaf6; box-shadow: 0 2px 8px var(--shadow); }
.card .th img, .card .th canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.card b { font-size: 13.5px; }
.card small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.card .pens { position: absolute; top: 14px; right: 14px; display: flex; gap: 2px; }
.card .pens i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff8; box-shadow: 0 0 0 1px #0002; }
/* tarjeta cuyo estilo se está dibujando (en el lienzo o su miniatura con la foto): miniatura atenuada y anillo girando
   (con retardo, para no parpadear en estilos rápidos) */
.card img { transition: opacity .2s; }
.card:is(.busy, .pending) img { opacity: .45; transition-delay: .25s; }
.card:is(.busy, .pending)::after { content: ''; position: absolute; left: calc(50% - 12px); top: calc(24% + 8px); width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid #fff; border-top-color: var(--accent); box-shadow: 0 2px 8px var(--shadow); opacity: 0; animation: spin .8s linear infinite, appear .2s ease .25s forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes appear { to { opacity: 1; } }
.cards.mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.mini .card { padding: 5px; border-radius: 12px; gap: 5px; } .mini .card .th { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); }
.mini .card b { font-size: 11.5px; line-height: 1.25; padding: 0 2px 1px; } .mini .card small, .mini .card .pens { display: none; }
.styledesc { margin: 10px 0 0; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; font-size: 13px; color: var(--text2); }
.styledesc b { display: block; color: var(--text); margin-bottom: 2px; }

/* ---------- Paso 3: papel y tinta ---------- */
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; }
#sizes, #sizes2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; white-space: normal; min-width: 0; line-height: 1.3; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); cursor: pointer; font-size: 13px; text-align: left; height: auto; align-items: flex-start; font-weight: 500; }
.opt small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.opt.on { border-color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) { .opt:hover:not(:disabled):not(.on) { border-color: var(--line2); background: var(--panel3); } }
.opt .sw { width: 100%; height: 22px; border-radius: 6px; border: 1px solid rgba(28,27,24,.12); margin-bottom: 4px; }
.opt .inks { display: flex; gap: 4px; margin-bottom: 4px; } .opt .inks i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(28,27,24,.15); }
.opt .tag { margin-left: auto; }
.opt.fixed:disabled { opacity: 1; cursor: default; }
.pen-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--tag-bg); color: var(--tag); white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }

/* icono animado del plotter (botón «Ver proceso») */
.plotico .gbar { animation: plotbar 3.2s ease-in-out infinite alternate; }
.plotico .ghead { animation: plothead 0.9s ease-in-out infinite alternate; }
@keyframes plotbar { from { transform: translateY(0); } to { transform: translateY(9px); } }
@keyframes plothead { from { transform: translateX(0); } to { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .plotico .gbar, .plotico .ghead { animation: none; } .plotico .gbar { transform: translateY(4px); } .plotico .ghead { transform: translateX(5px); } }

/* ---------- Paso 4: «¿Te gustaría tenerlo en papel?» y ajustes ---------- */
.paperask { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--text2); }
.paperask p { margin: 0; } .paperask a.mail { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .paperask a.mail:hover { text-decoration: underline; }
.proc { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; }
.stats { flex: 1; min-width: 0; color: var(--text2); font-size: 12.5px; line-height: 1.35; margin: 0; }
.inkrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.inkrow .pen { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--panel3); border-radius: 999px; padding: 3px 10px 3px 4px; }
.inkrow .pen i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(28,27,24,.15); }

/* ---------- Lienzo ---------- */
#stage { position: relative; overflow: hidden; user-select: none; min-width: 0; background: var(--bg); }
#stage canvas { display: block; } #overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
#status { position: absolute; left: 20px; top: 16px; z-index: 3; font-size: 12.5px; font-weight: 500; color: var(--muted); background: var(--fab-bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .4s; backdrop-filter: blur(4px); }
#status.busy { color: var(--accent); } #status.fade { opacity: 0; } #status:empty { display: none; }
#progress { position: absolute; left: 0; top: 0; height: 3px; background: var(--accent); width: 0; z-index: 4; transition: width .1s; }
/* «Dibujando…»: mientras el worker calcula, el lienzo se atenúa y aparece una pluma trazando una línea (con retardo de 250 ms) */
#canvas { transition: opacity .2s; }
#stage.busy #canvas { opacity: .5; transition-delay: .25s; }
#drawing { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--fab-bg); border: 1px solid var(--line); box-shadow: var(--sh-pop); backdrop-filter: blur(6px); font-size: 13px; color: var(--text2); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
#drawing b { color: var(--text); }
#stage.busy #drawing { opacity: 1; visibility: visible; transition: opacity .25s .25s, visibility 0s .25s; }
.penanim { width: 76px; height: 30px; overflow: visible; }
.penanim .squig { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: squig 1.8s linear infinite; }
.penanim .nib { fill: var(--ink); stroke: var(--panel); stroke-width: .8; offset-path: path('M6 17c4-11 8-11 12 0s8 11 12 0 8-11 12 0 8 11 12 0 8-11 12 0'); offset-rotate: 0deg; animation: nib 1.8s linear infinite; }
@keyframes squig { 0% { stroke-dashoffset: 100; } 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes nib { 0% { offset-distance: 0%; } 80% { offset-distance: 100%; } 100% { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .penanim .squig, .penanim .nib, .card:is(.busy, .pending)::after { animation: none; } .penanim .squig { stroke-dashoffset: 40; } .penanim .nib { offset-distance: 60%; } .card:is(.busy, .pending)::after { opacity: 1; } }
#toolbar { position: absolute; right: 20px; bottom: 18px; display: flex; gap: 6px; align-items: center; z-index: 3; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; box-shadow: var(--sh-panel); }
.pill.on { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.zoomctl { padding: 0 4px; gap: 2px; }
.zoomctl button { height: 24px; min-width: 26px; padding: 0 6px; border: 0; background: none; border-radius: 7px; color: var(--text2); font-size: 12px; }
.zoomctl button:hover { background: var(--panel2); }
#zoom-label { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
#empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; padding: 24px; z-index: 2; pointer-events: none; }
#empty .sheet { width: min(46vh, 320px); aspect-ratio: 210 / 297; background: #fbfaf6; box-shadow: 0 20px 50px var(--shadow); border-radius: 2px; display: flex; align-items: center; justify-content: center; }
#empty .sheet img { width: 78%; opacity: .18; filter: grayscale(1); }
#empty p { max-width: 320px; font-size: 13.5px; margin: 0; }


/* ---------- Móvil ---------- */
.fab { width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--fab-bg); border: 1px solid var(--line2); color: var(--text); backdrop-filter: blur(6px); box-shadow: 0 2px 10px var(--shadow); }
.fab.on { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
#sheet-handle { display: none; }
@media (max-width: 900px) {
  .mobile-only { display: inline-flex !important; }
  html, body { height: 100dvh; overflow: hidden; }
  #app { display: block; height: 100dvh; position: relative; }
  #stage { position: absolute; inset: 0; touch-action: none; }
  #toolbar { display: none; }
  #status { max-width: 70%; top: calc(12px + env(safe-area-inset-top)); left: 12px; }
  #drawing { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
  #stage.busy #status { opacity: 0; }
  #fabs { position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 4; display: flex; flex-direction: column; gap: 8px; }
  #panel { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheet, 100dvh); max-height: 100dvh; border-right: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px var(--shadow); transition: height .2s ease; z-index: 5; overscroll-behavior: contain; }
  #panel.dragging { transition: none; }
  body.sheet-collapsed #panel { height: 64px; overflow: hidden; }
  body.sheet-half #panel { height: 52dvh; }
  body.sheet-full #panel { height: 100dvh; border-radius: 0; }
  #sheet-handle { display: flex; justify-content: center; align-items: center; height: 22px; touch-action: none; cursor: grab; flex: none; }
  #sheet-handle::before { content: ''; width: 40px; height: 4px; border-radius: 999px; background: var(--line2); }
  body.sheet-collapsed #sheet-handle::before { background: var(--muted2); }
  #panel .ph { padding: 0 18px; gap: 10px; }
  #panel .body { padding: 10px 18px 18px; }
  section.step h1 { font-size: 19px; margin: 0 0 2px; }
  section.step > p.lead { font-size: 12.5px; margin: 0 0 10px; }
  .box { padding: 12px 14px; border-radius: 14px; margin: 0 0 8px; }
  details.adv > summary { margin: -12px -14px; padding: 12px 14px; }
  .proc { padding: 8px 8px 8px 14px; }
  .paperask { padding: 10px 14px; margin: 0 0 8px; border-radius: 12px; font-size: 12.5px; }
  .framer .prev { min-height: 150px; padding: 10px; } .framer .prev canvas { max-height: 200px; }
  .btnrow { margin: 0 0 8px; }
  .row { margin: 0 0 8px; }
  .check { margin: 0 0 8px; }
  .foot { margin: auto -18px -18px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
  input[type=number], input[type=text], input[type=email], input[type=tel], select { font-size: 16px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}