@font-face{font-family:PiezzaMark;src:url(/fonts/Inter-800.woff) format("woff");font-weight:800;font-display:swap}:root{--brand-1: #312e81;--brand-2: #4f46e5;--brand-3: #6366f1;--brand-gradient: linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));--brand-font: "PiezzaMark", system-ui, sans-serif;--brand-tracking: -.03em;--brand-veil-alto: rgba(79, 70, 229, .18);--brand-veil-bajo: rgba(49, 46, 129, .14)}:root{--ink: #0f172a;--ink-soft: #475569;--ink-faint: #64748b;--ink-hover: #1e293b;--bg: #dde4ef;--card: #ffffff;--sunken: #e3e8f0;--sunken-hover: #d3dae5;--line: #ccd4e0;--line-strong: #7c8ba1;--warn-bg: #fffbeb;--warn-line: #fcd34d;--warn-ink: #b45309;--danger: #dc2626;--accent: var(--brand-2);--accent-soft: #ebe9fe;--t-xs: 12px;--t-sm: 14px;--t-md: 16px;--t-lg: 20px;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--s-7: 40px;--r-sm: 8px;--r-md: 10px;--r-lg: 14px;--stage-bg: #7a7a7a;--stage-line: #5f5f5f}[data-fondo=claro]{--stage-bg: #ffffff;--stage-line: var(--line)}[data-fondo=medio]{--stage-bg: #7a7a7a;--stage-line: #5f5f5f}[data-fondo=oscuro]{--stage-bg: #000000;--stage-line: #2a2a2a}*{box-sizing:border-box}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.preview :focus-visible,dialog.zoom .zoom-scroll :focus-visible{outline-color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}body{margin:0;background-color:var(--bg);background-image:radial-gradient(1200px 780px at 14% 6%,var(--brand-veil-alto),transparent 66%),radial-gradient(1000px 820px at 92% 34%,var(--brand-veil-bajo),transparent 64%);background-repeat:no-repeat;background-attachment:fixed;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:var(--t-md);line-height:1.5}.brand{display:flex;align-items:center;gap:var(--s-3)}.brand-mark{width:36px;height:36px;flex:0 0 auto;border-radius:var(--r-md);box-shadow:0 2px 8px #0f172a33}.brand h1{margin:0;font-family:var(--brand-font);font-size:var(--t-lg);font-weight:800;letter-spacing:var(--brand-tracking);line-height:1.1;background:var(--brand-gradient);background-color:var(--brand-1);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}.brand-tagline{margin:0;font-size:var(--t-xs);color:var(--ink-soft)}.app{display:grid;grid-template-columns:1fr;gap:var(--s-5);padding:var(--s-5);max-width:1600px;margin:0 auto}.brand{grid-column:1 / -1}@media (min-width: 1024px){.app{grid-template-columns:minmax(380px,440px) 1fr;align-items:start;padding:var(--s-6);gap:var(--s-7)}.stage{position:sticky;top:var(--s-6)}}.controls{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}.stage{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}.section{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}.section>h2{margin:0;font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}.field{display:flex;flex-direction:column;gap:var(--s-2)}.field>label{font-size:var(--t-sm);font-weight:700;color:var(--ink-soft)}.hint,.meta{margin:0;font-size:var(--t-xs);color:var(--ink-faint)}.meta b{color:var(--ink)}.seg{display:flex;flex-wrap:wrap;gap:var(--s-2)}.seg button{flex:1 1 auto;padding:var(--s-2) var(--s-3);border:1px solid var(--line-strong);background:var(--card);border-radius:var(--r-sm);font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap}.seg button:hover{border-color:var(--ink-faint)}.seg button[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:var(--card)}.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}.chips button{display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-2) var(--s-3);border:1px solid var(--line-strong);background:var(--card);border-radius:999px;font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--ink-soft);cursor:pointer}.chips button:hover{border-color:var(--ink-faint)}.chips button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.chips button:disabled{opacity:.4;cursor:not-allowed}.chips button>span{font-weight:800}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--card);font:inherit;font-size:var(--t-sm);font-weight:700;color:var(--ink);cursor:pointer;text-decoration:none}.btn:hover{border-color:var(--ink-faint)}.btn:disabled,.btn[aria-disabled=true]{opacity:.45;pointer-events:none}.btn[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--card)}.btn-primary:hover{background:var(--ink-hover)}.btn-ghost{border-color:transparent;background:transparent;color:var(--ink-soft);padding:var(--s-2) var(--s-3)}.btn-ghost:hover{background:var(--sunken);border-color:transparent}.actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}.slots{display:flex;flex-direction:column;gap:var(--s-2)}.slot{display:flex;align-items:center;gap:var(--s-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-1)}.arrow{border:none;background:var(--sunken);border-radius:var(--r-sm);width:34px;height:34px;flex-shrink:0;cursor:pointer;font-size:var(--t-sm);color:var(--ink-soft)}.arrow:hover{background:var(--sunken-hover)}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}input[type=text],textarea{width:100%;padding:var(--s-2) var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-sm);font:inherit;font-size:var(--t-md);color:var(--ink);background:var(--card)}textarea{resize:vertical;line-height:1.5}.results{display:flex;flex-direction:column;gap:var(--s-1)}.results button{text-align:left;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer}.results button:hover{background:var(--sunken)}.warn{margin:0;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);font-size:var(--t-sm)}.error{margin:0;color:var(--danger);font-size:var(--t-sm);font-weight:600}.preview{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid var(--stage-line);border-radius:var(--r-lg);padding:var(--s-4);min-height:320px;background:var(--stage-bg)}.stage-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2) var(--s-3)}.stage-bar .seg{flex:0 1 auto}.stage-bar .field{flex-direction:row;align-items:center;gap:var(--s-2);min-width:0}.stage-bar .meta{flex:1 1 auto;text-align:right;color:var(--ink-soft)}@media (max-width: 640px){.stage-bar .meta{text-align:left}}.preview.stale .slide{opacity:.4;filter:grayscale(.7)}.stale-badge{position:absolute;top:var(--s-2);right:var(--s-2);background:var(--danger);color:var(--card);font-size:var(--t-xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:var(--s-1) var(--s-2);border-radius:var(--r-sm)}.preview img{max-width:100%;max-height:calc(100vh - 230px);border-radius:var(--r-md);box-shadow:0 8px 30px #0f172a24;cursor:zoom-in}.preview .placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);text-align:center;min-width:260px;max-width:340px;min-height:240px;padding:var(--s-5);border-radius:var(--r-md);background:#ffffffeb;color:var(--ink-faint);font-size:var(--t-xs)}.preview .placeholder img{margin-bottom:var(--s-1);border-radius:var(--r-sm)}.preview .placeholder b{font-size:var(--t-sm);color:var(--ink)}.preview.busy{opacity:.55}details.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 var(--s-4)}details.panel>summary{cursor:pointer;padding:var(--s-3) 0;font-size:var(--t-sm);font-weight:700;color:var(--ink-soft);list-style:none}details.panel>summary::-webkit-details-marker{display:none}details.panel>summary:before{content:"▸ ";color:var(--ink-faint)}details.panel[open]>summary:before{content:"▾ "}details.panel>.panel-body{padding:var(--s-4) 0;display:flex;flex-direction:column;gap:var(--s-3);border-top:1px solid var(--line)}.thread-item{display:flex;flex-direction:column;gap:var(--s-2)}.thread-head{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-xs);font-weight:700;color:var(--ink-faint)}.preview.strip{justify-content:flex-start;gap:var(--s-3);overflow-x:auto;padding:var(--s-4)}.slide{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}.slide-open{display:block;padding:0;border:none;background:none;line-height:0;cursor:zoom-in;border-radius:var(--r-md);max-width:100%}.preview.strip .slide img{max-height:calc(100vh - 300px);max-width:none}.slide figcaption{font-size:var(--t-xs);font-weight:800;color:var(--ink-faint)}dialog.zoom{padding:0;border:none;background:var(--stage-bg);color:var(--ink);overflow:hidden;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh}dialog.zoom[open]{display:flex;flex-direction:column}dialog.zoom::backdrop{background:#000000b8}@media (min-width: 1024px){dialog.zoom{width:min(980px,92vw);height:min(880px,88dvh);max-width:92vw;max-height:92dvh;border-radius:var(--r-lg);box-shadow:0 24px 70px #00000073}}.zoom-bar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-2) var(--s-3);background:var(--card);border-bottom:1px solid var(--line);z-index:2}.zoom-bar .spacer{flex:1}.zoom-bar .field{flex-direction:row;align-items:center;gap:var(--s-2)}.zoom-bar .title{font-size:var(--t-xs);font-weight:700;color:var(--ink-soft)}@media (max-width: 1023px){.zoom-bar .title{display:none}}.zoom-close{width:40px;height:40px;padding:0;font-size:var(--t-md);line-height:1;flex:0 0 auto}.zoom-scroll{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;background:var(--stage-bg)}@media (min-width: 1024px){.zoom-scroll{padding:var(--s-4)}}.zoom-canvas{position:relative;display:block;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;overflow:hidden;border-radius:var(--r-sm)}.zoom-canvas img{display:block;width:100%;height:100%;cursor:zoom-out}.safe-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.safe-overlay .safe-box{position:absolute;border:2px dashed rgba(255,255,255,.95);box-shadow:0 0 0 9999px #dc262633}@media (pointer: coarse){.seg button,.chips button,.btn,.results button,details.panel>summary{min-height:44px}.arrow,.zoom-close{width:44px;height:44px}}.brand-switch{margin-left:auto}.brand-switch .seg button{font-size:var(--t-xs);padding:var(--s-1) var(--s-2)}.btn-sm{font-size:var(--t-xs);padding:var(--s-2) var(--s-3)}.ok{margin:0;align-self:center;font-size:var(--t-xs);font-weight:700;color:var(--accent)}@media (max-width: 640px){.brand{flex-wrap:wrap}.brand-switch{margin-left:0;width:100%}}.seg-figuras{gap:var(--s-2)}.seg-figuras button{flex:0 1 auto;flex-direction:column;display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);min-width:74px}.lienzo{position:relative;display:block;height:46px;background:var(--sunken);border:1px solid var(--line-strong);border-radius:3px;flex:0 0 auto}.lienzo-safe{position:absolute;border:1px dashed var(--ink-faint);border-radius:1px}.seg-figuras button[aria-checked=true] .lienzo{background:#ffffff3d;border-color:#ffffff8c}.seg-figuras button[aria-checked=true] .lienzo-safe{border-color:#ffffffd9}.pieza-fig{display:flex;align-items:flex-end;gap:3px;height:46px}.pieza-fig>span{display:block;width:16px;height:28px;background:var(--sunken);border:1px solid var(--line-strong);border-radius:3px}.pieza-fig.multi>span:nth-child(1){height:22px}.pieza-fig.multi>span:nth-child(2){height:28px}.pieza-fig.multi>span:nth-child(3){height:22px}.seg-figuras button[aria-checked=true] .pieza-fig>span{background:#ffffff3d;border-color:#ffffff8c}.slot{gap:var(--s-2);padding:var(--s-1) var(--s-2)}.slot-cover{width:34px;height:45px;object-fit:cover;border-radius:var(--r-sm);background:var(--sunken);flex:0 0 auto}.slot-cover.vacia{border:1px dashed var(--line-strong)}.slot-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}.slot-name{font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot-precio{font-size:var(--t-xs);color:var(--ink-faint);font-weight:600}.slot-desc{flex:0 0 auto;background:var(--ink);color:var(--card);font-size:var(--t-xs);font-weight:800;padding:2px var(--s-1);border-radius:var(--r-sm);letter-spacing:-.01em}.controls{counter-reset:paso}.section>h2{display:flex;align-items:center;gap:var(--s-2)}.section>h2:before{counter-increment:paso;content:counter(paso);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:var(--t-xs);font-weight:800;letter-spacing:0}.seg button[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--card)}.seg button,.chips button,.btn,.arrow,.slot,.results button,input[type=text],textarea,.brand-mark,.slide-open{transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,opacity .14s ease}.preview{transition:opacity .16s ease,background-color .2s ease}.preview.busy{opacity:.6}@keyframes aparecer{0%{opacity:0}to{opacity:1}}.slide img{animation:aparecer .18s ease-out}.slide-open:hover img{box-shadow:0 12px 38px #0f172a42}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.section{gap:var(--s-4)}@media (min-width: 1024px){.preview{min-height:min(720px,calc(100vh - 230px))}}.preview.strip{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}::selection{background:var(--accent-soft);color:var(--accent)}.slot:hover{border-color:var(--line-strong)}.seg button{display:inline-flex;align-items:center;justify-content:center}.seg:not(.seg-figuras) button{gap:var(--s-1)}.logo-producto{border-radius:999px;border:1px solid rgba(120,130,150,.45);flex:0 0 auto}.ok{display:inline-flex;align-items:center;gap:var(--s-2)}