*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#eef0f3;color:#222;overflow:hidden}
button,select,input,textarea{font:inherit}button{border:1px solid #d0d4da;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;color:#222;touch-action:manipulation}button:hover{background:#f3f4f6}button.on{background:#ffe1e1;border-color:#c62828;color:#c62828}
.primary{background:#c62828!important;color:#fff!important;border-color:#c62828!important}.danger{color:#b00020}
#gate{position:fixed;inset:0;z-index:100;background:linear-gradient(135deg,#c62828,#6a1b9a);display:flex;align-items:center;justify-content:center}
#gate form{background:#fff;padding:28px;border-radius:16px;width:min(340px,90vw);text-align:center;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 40px #0004}#gate img{width:64px;margin:auto}#gate h1{margin:0}#gate input{padding:10px;border:1px solid #ccc;border-radius:8px}.err{color:#b00020;min-height:1em;margin:0}#gate small{color:#666}
#top{height:52px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#fff;border-bottom:1px solid #ddd}.brand{font-weight:700;color:#c62828;white-space:nowrap}.grow{flex:1}
#docName{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#555;font-size:14px}#zoomLbl{font-size:13px;min-width:42px;text-align:center}
#ctx{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 10px;background:#fff8e1;border-bottom:1px solid #f0d78c;font-size:14px}#ctx label{display:flex;align-items:center;gap:4px}#ctx input[type=number]{width:60px}
#main{display:flex;height:calc(100% - 52px)}#ctx:not(.hidden)~#main{height:calc(100% - 52px - 46px)}
#left{width:170px;background:#f7f7f9;border-right:1px solid #ddd;overflow:auto;padding:8px}#right{width:290px;background:#fff;border-left:1px solid #ddd;overflow:auto}
#viewer{flex:1;overflow:auto;position:relative;-webkit-overflow-scrolling:touch}#pages{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;min-width:fit-content}
.empty{text-align:center;margin-top:12vh;color:#555;padding:20px}
.page{position:relative;background:#fff;box-shadow:0 2px 10px #0003}.page canvas{display:block;width:100%;height:100%}.page .ov{position:absolute;inset:0;touch-action:pan-x pan-y}.page .num{position:absolute;bottom:-18px;right:0;font-size:12px;color:#777}
body.drawing .page .ov{touch-action:none;cursor:crosshair}
.thumb{background:#fff;border:2px solid transparent;border-radius:6px;padding:4px;margin-bottom:8px;cursor:pointer;position:relative;text-align:center;font-size:12px}.thumb.cur{border-color:#c62828}.thumb.sel{background:#ffe1e1}.thumb img{width:100%;display:block;box-shadow:0 1px 4px #0003}.thumb.drag{opacity:.4}.thumb.over{border-top:3px solid #1565c0}
.sec{border-bottom:1px solid #eee}.sec>h3{margin:0;padding:12px 14px;font-size:15px;cursor:pointer;display:flex;justify-content:space-between}.sec>h3:after{content:"▸"}.sec.open>h3:after{content:"▾"}.sec .body{display:none;padding:0 12px 12px;flex-wrap:wrap;gap:6px}.sec.open .body{display:flex}.sec .body button{flex:1 1 45%;text-align:left;font-size:14px}
.obj{position:absolute;border:1px dashed transparent;user-select:none}.obj.sel{border-color:#1565c0}.obj .del,.obj .rs{display:none;position:absolute;width:22px;height:22px;border-radius:50%;background:#1565c0;color:#fff;font-size:12px;line-height:22px;text-align:center}.obj.sel .del{display:block;top:-12px;right:-12px;background:#b00020;cursor:pointer}.obj.sel .rs{display:block;bottom:-11px;right:-11px;cursor:nwse-resize}
.obj img,.obj svg{width:100%;height:100%;display:block;pointer-events:none}.obj.text{white-space:pre;line-height:1.15;padding:0}
.titem{position:absolute;border:1px solid #1565c055;background:#1565c011;cursor:text}.titem:hover{background:#1565c033}
.hit{position:absolute;background:#ffeb3b88;pointer-events:none}
#modal{position:fixed;inset:0;background:#0006;z-index:50;display:flex;align-items:center;justify-content:center}#modal .box{background:#fff;border-radius:14px;width:min(560px,94vw);max-height:90vh;display:flex;flex-direction:column}.mhead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee}.mhead button{border:none}#mBody{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:10px}#mFoot{padding:10px 16px;border-top:1px solid #eee;display:flex;gap:8px;justify-content:flex-end}
#mBody label{display:flex;flex-direction:column;gap:4px;font-size:14px}#mBody input:not([type=checkbox]):not([type=radio]):not([type=color]),#mBody select,#mBody textarea{padding:8px;border:1px solid #ccc;border-radius:8px;width:100%}#mBody .row{display:flex;gap:8px;flex-wrap:wrap}#mBody .row>*{flex:1}#mBody label.chk{flex-direction:row;align-items:center}
.tabs{display:flex;gap:4px}.tabs button.on{background:#c62828;color:#fff}canvas.sigpad{border:1px dashed #999;border-radius:8px;width:100%;height:180px;touch-action:none;background:#fff}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;transition:.3s;pointer-events:none;z-index:60;max-width:90vw}#toast.show{opacity:1}
#busy{position:fixed;inset:0;background:#fff9;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.spin{width:40px;height:40px;border:4px solid #ddd;border-top-color:#c62828;border-radius:50%;animation:s 1s linear infinite}@keyframes s{to{transform:rotate(360deg)}}
.hidden{display:none!important}.mob{display:none}pre.out{white-space:pre-wrap;max-height:40vh;overflow:auto;background:#f6f6f6;padding:8px;border-radius:8px;font-size:13px}
.sigs{display:flex;gap:6px;flex-wrap:wrap}.sigs img{height:50px;border:1px solid #ccc;border-radius:6px;cursor:pointer;background:#fff}
@media (max-width:820px){.mob{display:inline-block}.brand span,.lbl,#docName{display:none}#left,#right{position:fixed;top:52px;bottom:0;z-index:30;box-shadow:0 0 20px #0004;transition:transform .2s}#left{left:0;transform:translateX(-105%)}#right{right:0;width:min(300px,85vw);transform:translateX(105%)}body.showLeft #left,body.showRight #right{transform:none}#pages{padding:10px 6px}#top{gap:4px;padding:0 6px}#top button{padding:6px 8px}}
@font-face{font-family:MP_Carlito;src:url(fonts/Carlito-Regular.ttf);font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:MP_Carlito;src:url(fonts/Carlito-Bold.ttf);font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:MP_Carlito;src:url(fonts/Carlito-Italic.ttf);font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:MP_Carlito;src:url(fonts/Carlito-BoldItalic.ttf);font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:MP_Caladea;src:url(fonts/Caladea-Regular.ttf);font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:MP_Caladea;src:url(fonts/Caladea-Bold.ttf);font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:MP_Caladea;src:url(fonts/Caladea-Italic.ttf);font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:MP_Caladea;src:url(fonts/Caladea-BoldItalic.ttf);font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:MP_LiberationSans;src:url(fonts/LiberationSans-Regular.ttf);font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:MP_LiberationSans;src:url(fonts/LiberationSans-Bold.ttf);font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:MP_LiberationSans;src:url(fonts/LiberationSans-Italic.ttf);font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:MP_LiberationSans;src:url(fonts/LiberationSans-BoldItalic.ttf);font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:MP_LiberationSerif;src:url(fonts/LiberationSerif-Regular.ttf);font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:MP_LiberationSerif;src:url(fonts/LiberationSerif-Bold.ttf);font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:MP_LiberationSerif;src:url(fonts/LiberationSerif-Italic.ttf);font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:MP_LiberationSerif;src:url(fonts/LiberationSerif-BoldItalic.ttf);font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:MP_LiberationMono;src:url(fonts/LiberationMono-Regular.ttf);font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:MP_LiberationMono;src:url(fonts/LiberationMono-Bold.ttf);font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:MP_LiberationMono;src:url(fonts/LiberationMono-Italic.ttf);font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:MP_LiberationMono;src:url(fonts/LiberationMono-BoldItalic.ttf);font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:MP_DejaVuSans;src:url(fonts/DejaVuSans.ttf)}@font-face{font-family:MP_NotoEmoji;src:url(fonts/NotoEmoji.ttf)}
.titem{position:absolute;border:1px dashed rgba(37,99,235,.55);background:rgba(37,99,235,.06);cursor:text;border-radius:2px}.titem:hover{background:rgba(37,99,235,.16)}
.teditor{position:absolute;z-index:30;background:#fff;outline:2px solid #2563eb;padding:0 1px;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 4px 18px rgba(0,0,0,.2);min-height:1em}
.tebar{position:absolute;z-index:31;display:flex;gap:4px;align-items:center;background:var(--panel,#fff);color:var(--fg,#111);border:1px solid #ccc;border-radius:8px;padding:4px;box-shadow:0 4px 14px rgba(0,0,0,.2);flex-wrap:wrap;max-width:94vw}
.tebar button,.tebar select,.tebar input{font-size:13px;padding:3px 6px}.tebar input[type=number]{width:58px}.tebar button.on{background:#2563eb;color:#fff}
.iitem{position:absolute;border:2px dashed #7b1fa2;background:rgba(123,31,162,.08);cursor:move;touch-action:none}.iitem.on{border-style:solid;background:rgba(123,31,162,.15)}
.iitem .ih{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#7b1fa2;border-radius:3px;cursor:nwse-resize}
.iitem .ibar{display:none;position:absolute;top:-38px;left:0;gap:4px;white-space:nowrap}.iitem.on .ibar{display:flex}.iitem .ibar button{font-size:12px;padding:4px 8px}
body.dark{background:#16181d;color:#e6e6e6}body.dark #top,body.dark #ctx,body.dark aside,body.dark #left,body.dark #right,body.dark .box,body.dark #toolList,body.dark .sec h3{background:#1f232b!important;color:#e6e6e6;border-color:#333!important}
body.dark button{background:#2a2f39;color:#e6e6e6;border-color:#3a404c}body.dark button:hover{background:#343a46}body.dark input,body.dark select,body.dark textarea{background:#2a2f39;color:#eee;border:1px solid #3a404c}
body.dark #viewer{background:#16181d}body.dark .empty{color:#ccc}body.dark #docName{color:#bbb}body.dark .tebar{background:#1f232b;color:#eee}body.dark #modal .box *{border-color:#3a404c}
@media(max-width:820px){.desk{display:none}}
.obj.red-pixel,.obj.red-blur{background:repeating-conic-gradient(rgba(90,90,100,.85) 0 25%,rgba(150,150,160,.85) 0 50%) 0 0/var(--blk,12px) var(--blk,12px)!important;backdrop-filter:blur(6px)}
.obj.red-blur{filter:blur(1px)}.obj[class*="red-"]{display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;white-space:nowrap}
.qrmark{position:absolute;border:2px solid #f59e0b;background:rgba(245,158,11,.12);pointer-events:none;z-index:6;border-radius:3px}.qrmark.on{border-color:#16a34a;background:rgba(22,163,74,.14)}
.qrmark span{position:absolute;top:-18px;left:-2px;background:#111827;color:#fff;font:600 11px system-ui;padding:1px 5px;border-radius:4px;white-space:nowrap}.qrmark.flash{animation:qf .4s 4 alternate}@keyframes qf{to{box-shadow:0 0 0 6px rgba(245,158,11,.6)}}
.qrlist{max-height:38vh;overflow:auto;border:1px solid var(--line,#ddd);border-radius:10px;margin:8px 0}.qrrow{display:flex!important;gap:10px;align-items:center;padding:8px;border-bottom:1px solid var(--line,#eee);cursor:pointer;flex-direction:row!important}
.qrrow img{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid #ddd;border-radius:6px;flex:none}.qri{flex:1;min-width:0}.qri code{display:block;font-size:12px;word-break:break-all;opacity:.85;margin-top:3px}
.qrrow .qrgo{flex:none;padding:6px 8px}.badge{display:inline-block;font-size:11px;padding:1px 6px;border-radius:9px;background:rgba(127,127,127,.18)}.qrtools{display:flex;gap:6px;flex-wrap:wrap}
.qrst{border:1px solid var(--line,#ddd);border-radius:10px;padding:8px 10px}.qrst legend{font-weight:700;padding:0 4px}.row2,.row4{display:grid;grid-template-columns:1fr 1fr;gap:8px}.row4{grid-template-columns:2fr 1fr 1fr 1fr}
.qrprev{width:120px;height:70px;margin:8px auto;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--bg);color:var(--fg);font-size:13px;text-align:center}
.qrprev.m-pixel,.qrprev.m-blur{background:repeating-conic-gradient(#555 0 25%,#999 0 50%) 0 0/var(--blk) var(--blk)}.qrprev.m-blur{filter:blur(1.5px)}.qrprev.m-black{background:#000}
@media(max-width:600px){.row4{grid-template-columns:1fr 1fr}.qrrow img{width:48px;height:48px}}
/* OCR revisión */
.ocrpgs{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px}
.ocrpg{margin:0;flex:0 0 auto;max-width:200px}.ocrpg img{width:100%;border:1px solid var(--line,#ddd);border-radius:6px;background:#fff}
.ocrpg figcaption{font-size:12px;opacity:.8;margin-top:3px}
.ocrlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;max-height:42vh;overflow:auto;padding:2px}
.ocrw{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;gap:3px 6px;align-items:center;border:1px solid var(--line,#ddd);border-radius:8px;padding:6px;background:var(--card,#fff)}
.ocrw img{grid-column:1/4;max-width:100%;height:auto;max-height:46px;object-fit:contain;justify-self:start;background:#fff;border-radius:4px}
.ocrw input{min-width:0;font-size:15px;padding:4px 6px}.badge.bad{background:#fee2e2;color:#991b1b}.badge.mid{background:#fef3c7;color:#92400e}

.draghandle{cursor:grab;user-select:none;-webkit-user-select:none}.draghandle.dragging{cursor:grabbing}.mgrip{margin-left:auto;margin-right:8px;font-size:12px;color:#888;white-space:nowrap}#modal{background:#0003}#modal .box.moved{box-shadow:0 10px 30px #0005}.tebar .grip{cursor:grab;padding:2px 6px;font-size:16px;color:#666;touch-action:none;user-select:none}#docName.locked::before{content:'🔐 '}#bLock.on{background:#2e7d32;color:#fff}
@media (max-width:820px){#bLock{display:none}#top button{padding-left:7px;padding-right:7px}#zoomLbl{min-width:34px}}
@media (max-width:820px){#bDark,.brand{display:none}}
