:root{--bg:#ececea;--window:rgba(248,248,247,.94);--bar:rgba(252,252,251,.9);--panel:rgba(246,246,245,.86);--stage:#fbfbfa;--line:#e3e1dc;--text:#1d1d1f;--muted:#7a7a80;--blue:#007aff;--blue2:#1688ff;--shadow:0 34px 90px rgba(40,40,45,.18);--card:#fff;--danger:#ff3b30}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"SF Pro Display","Segoe UI Variable","Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 22% 5%,#fff 0,#f4f4f1 32%,#e9e9e6 100%)}body{min-height:100vh;padding:28px;overflow-x:hidden}.ambient{position:fixed;border-radius:50%;filter:blur(70px);opacity:.18;pointer-events:none}.ambient-a{width:430px;height:430px;background:#49a3ff;top:-180px;right:-80px;animation:float 10s ease-in-out infinite}.ambient-b{width:350px;height:350px;background:#b68cff;bottom:-180px;left:-80px;animation:float 12s ease-in-out infinite reverse}@keyframes float{50%{transform:translate(20px,28px) scale(1.08)}}button,input{font:inherit}.app-shell{max-width:1480px;height:calc(100vh - 56px);min-height:700px;margin:auto;background:var(--window);border:1px solid rgba(210,210,210,.75);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(24px);overflow:hidden;position:relative;animation:appear .55s cubic-bezier(.2,.8,.2,1)}@keyframes appear{from{opacity:0;transform:translateY(16px) scale(.985)}}.topbar{height:76px;display:grid;grid-template-columns:160px 1fr 260px;align-items:center;padding:0 24px;background:var(--bar);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}.traffic{display:flex;gap:9px}.traffic span{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.red{background:#ff5f57}.yellow{background:#febc2e}.green{background:#28c840}.brand{justify-self:center;display:flex;align-items:center;gap:11px}.brand img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.brand strong,.brand small{display:block}.brand strong{font-size:16px}.brand small{font-size:11px;color:var(--muted);margin-top:2px}.top-actions{display:flex;justify-content:flex-end;gap:10px}.icon-btn,.ghost,.share-btn{border:1px solid var(--line);background:rgba(255,255,255,.78);color:var(--text);border-radius:13px;padding:9px 13px;cursor:pointer;transition:.2s}.icon-btn{width:40px;height:40px;padding:0;border-radius:50%}.icon-btn:hover,.ghost:hover,.share-btn:hover{background:#fff;transform:translateY(-1px)}.primary{border:none;border-radius:14px;background:linear-gradient(180deg,var(--blue2),var(--blue));color:white;padding:11px 18px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(0,122,255,.22);transition:.2s}.primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,122,255,.3)}.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.compact{padding:10px 15px}.workspace{height:calc(100% - 76px);display:grid;grid-template-columns:260px 1fr}.sidebar{padding:22px 17px;background:var(--panel);border-right:1px solid var(--line);overflow:auto}.side-title{text-transform:uppercase;font-size:11px;letter-spacing:.08em;font-weight:800;color:#96969b;padding:4px 10px 8px}.side-title.space{margin-top:24px}.nav{width:100%;border:0;background:transparent;border-radius:12px;padding:10px 11px;display:grid;grid-template-columns:24px 1fr auto;text-align:left;color:var(--text);cursor:pointer;align-items:center}.nav b{font-size:11px;color:var(--muted);font-weight:600}.nav.active{background:#e8f1ff;color:var(--blue);font-weight:700}.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 5px}.format{border:1px solid var(--line);background:rgba(255,255,255,.82);border-radius:11px;padding:9px 5px;font-size:11px;font-weight:800;cursor:pointer;color:var(--text)}.format.active{background:#e8f1ff;border-color:#9ac7ff;color:var(--blue);box-shadow:0 0 0 2px rgba(0,122,255,.05)}.field-label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#55555b;margin:10px 6px 9px}.quality-label{margin-top:19px}input[type=range]{width:calc(100% - 12px);margin:0 6px;accent-color:var(--blue)}.switch-row{margin:22px 5px 0;display:grid;grid-template-columns:1fr 42px;gap:8px;align-items:center}.switch-row strong,.switch-row small{display:block}.switch-row strong{font-size:12px}.switch-row small{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.3}.switch-row input{display:none}.switch-row i{width:42px;height:24px;border-radius:20px;background:#d8d8dc;position:relative;transition:.2s}.switch-row i:after{content:"";position:absolute;width:20px;height:20px;background:white;border-radius:50%;left:2px;top:2px;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s}.switch-row input:checked+i{background:#34c759}.switch-row input:checked+i:after{transform:translateX(18px)}.side-note{margin:23px 6px 0;padding:12px;border-radius:12px;background:rgba(255,255,255,.65);font-size:10px;line-height:1.45;color:var(--muted);border:1px solid rgba(220,220,220,.6)}.stage{background:var(--stage);position:relative;padding:28px 30px 88px;overflow:auto}.stage-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:24px}.stage-head h1{margin:0;font-size:26px;letter-spacing:-.03em}.stage-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.selection-actions{display:flex;gap:8px}.ghost{padding:8px 11px;font-size:12px}.ghost:disabled{opacity:.4;cursor:not-allowed}.ghost.danger{color:var(--danger)}.dropzone{height:calc(100% - 85px);min-height:470px;border:1.5px dashed #cac8c3;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(247,247,245,.6));text-align:center;transition:.25s;position:relative;overflow:hidden}.dropzone:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(0,122,255,.08),transparent 68%);animation:breath 3.4s ease-in-out infinite}@keyframes breath{50%{transform:scale(1.16);opacity:.6}}.dropzone.dragging{border-color:var(--blue);background:#f2f8ff;transform:scale(.995)}.dropzone h2,.dropzone p,.dropzone button,.drop-orbit{position:relative}.dropzone h2{margin:19px 0 6px;font-size:22px}.dropzone p{margin:0 0 18px;color:var(--muted);font-size:12px}.drop-orbit{width:82px;height:82px;border-radius:26px;background:linear-gradient(145deg,#fff,#edf5ff);box-shadow:0 16px 35px rgba(0,122,255,.14),inset 0 0 0 1px rgba(0,122,255,.13);display:grid;place-items:center;animation:levitate 3s ease-in-out infinite}@keyframes levitate{50%{transform:translateY(-7px)}}.drop-icon{font-size:38px;color:var(--blue);font-weight:200}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:15px;padding-bottom:10px}.hidden{display:none!important}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 7px 22px rgba(0,0,0,.045);cursor:pointer;transition:.22s;position:relative;animation:cardIn .35s ease both}@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.97)}}.card:hover{transform:translateY(-3px);box-shadow:0 13px 30px rgba(0,0,0,.085)}.card.selected{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,122,255,.14),0 14px 30px rgba(0,122,255,.12)}.thumb{height:145px;border-radius:13px;overflow:hidden;background:#f1f1ef;display:grid;place-items:center;position:relative}.thumb img{width:100%;height:100%;object-fit:cover;transition:.3s}.card:hover .thumb img{transform:scale(1.025)}.check{position:absolute;top:10px;right:10px;width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid rgba(150,150,155,.5);display:grid;place-items:center;font-size:14px;color:transparent;z-index:2}.card.selected .check{background:var(--blue);border-color:var(--blue);color:#fff}.file-info{padding:10px 5px 5px}.file-name{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{display:flex;justify-content:space-between;margin-top:5px;color:var(--muted);font-size:10px}.badge{font-weight:800;color:var(--blue)}.bottom-bar{position:fixed;left:calc((100vw - min(1480px,calc(100vw - 56px)))/2 + 260px + 1px);right:calc((100vw - min(1480px,calc(100vw - 56px)))/2 + 1px);bottom:29px;height:70px;border-top:1px solid var(--line);background:rgba(252,252,251,.86);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom-right-radius:27px;z-index:4}.batch-info{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.pulse-dot{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 0 rgba(52,199,89,.35);animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}}.convert-btn{min-width:210px}.toast-stack{position:fixed;top:24px;right:24px;z-index:99;display:grid;gap:9px}.toast{background:rgba(28,28,30,.9);color:#fff;padding:12px 15px;border-radius:13px;font-size:12px;box-shadow:0 12px 28px rgba(0,0,0,.2);backdrop-filter:blur(12px);animation:toast .25s ease}@keyframes toast{from{transform:translateX(15px);opacity:0}}dialog{border:0;background:transparent;padding:0}dialog::backdrop{background:rgba(20,20,25,.32);backdrop-filter:blur(7px)}.modal-card{width:min(700px,calc(100vw - 30px));max-height:82vh;overflow:auto;background:rgba(250,250,249,.97);border:1px solid rgba(255,255,255,.8);border-radius:25px;padding:28px;box-shadow:0 35px 100px rgba(0,0,0,.26);text-align:center;position:relative}.modal-close{position:absolute;right:16px;top:16px;width:34px;height:34px;border:0;border-radius:50%;background:#ececea;font-size:22px;cursor:pointer;color:#5d5d63}.success-icon{width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#49d967,#26b943);color:#fff;display:grid;place-items:center;font-size:29px;margin:4px auto 12px;box-shadow:0 10px 25px rgba(52,199,89,.28)}.modal-card h2{margin:0;font-size:23px}.modal-card>p{margin:6px 0 18px;color:var(--muted);font-size:12px}.result-list{display:grid;gap:7px;text-align:left;max-height:230px;overflow:auto}.result-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:white;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:11px}.result-row a{color:var(--blue);text-decoration:none;font-weight:700}.share-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}.share-btn.whatsapp{color:#128c7e}.share-hint{display:block;color:var(--muted);margin-top:13px;line-height:1.4}.dark{--bg:#161618;--window:rgba(35,35,37,.96);--bar:rgba(43,43,45,.9);--panel:rgba(39,39,41,.93);--stage:#202022;--line:#414146;--text:#f5f5f7;--muted:#a1a1a7;--card:#2b2b2e;--shadow:0 34px 90px rgba(0,0,0,.42)}body.dark{background:radial-gradient(circle at 20% 0,#33343a 0,#18181a 44%,#101012 100%)}.dark .nav.active,.dark .format.active{background:#173b63}.dark .dropzone{background:linear-gradient(135deg,rgba(47,47,50,.75),rgba(31,31,33,.65));border-color:#55555b}.dark .side-note,.dark .ghost,.dark .share-btn,.dark .format,.dark .result-row{background:#303034}.dark .bottom-bar{background:rgba(42,42,44,.88)}.dark .modal-card{background:rgba(39,39,41,.98)}.dark .modal-close{background:#55555a;color:#fff}.dark .thumb{background:#353539}
@media(max-width:900px){body{padding:0}.app-shell{height:100vh;min-height:0;border-radius:0;border:0}.topbar{grid-template-columns:70px 1fr 110px;height:68px;padding:0 14px}.brand img{width:38px;height:38px}.brand strong{font-size:14px}.brand small{display:none}.traffic span{width:10px;height:10px}.workspace{height:calc(100% - 68px);grid-template-columns:1fr}.sidebar{display:none}.stage{padding:20px 15px 88px}.stage-head{align-items:flex-start}.selection-actions{flex-direction:column}.dropzone{min-height:420px}.bottom-bar{left:0;right:0;bottom:0;border-radius:0;padding:0 15px}.batch-info{display:none}.convert-btn{width:100%}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.thumb{height:130px}.top-actions .compact{font-size:0;width:40px;padding:0}.top-actions .compact:first-letter{font-size:18px}}

/* v1.1 - motion, progress and faster perceived loading */
.drop-rings{position:absolute;inset:0;pointer-events:none;opacity:0;transition:.22s}
.drop-rings i{position:absolute;left:50%;top:50%;width:110px;height:110px;border:2px solid rgba(0,122,255,.24);border-radius:36px;transform:translate(-50%,-50%) scale(.55);opacity:0}
.dropzone.dragging .drop-rings{opacity:1}
.dropzone.dragging .drop-rings i{animation:dropRipple 1.35s ease-out infinite}
.dropzone.dragging .drop-rings i:nth-child(2){animation-delay:.28s}.dropzone.dragging .drop-rings i:nth-child(3){animation-delay:.56s}
@keyframes dropRipple{0%{transform:translate(-50%,-50%) scale(.55);opacity:.75}100%{transform:translate(-50%,-50%) scale(3.15);opacity:0}}
.dropzone.dragging{border-width:2px;box-shadow:inset 0 0 0 4px rgba(0,122,255,.06),0 18px 55px rgba(0,122,255,.12)}
.dropzone.dragging .drop-orbit{animation:dropMagnet .75s ease-in-out infinite alternate;background:linear-gradient(145deg,#fff,#dcecff);box-shadow:0 18px 45px rgba(0,122,255,.28),0 0 0 10px rgba(0,122,255,.06)}
.dropzone.dragging .drop-icon{animation:arrowBounce .65s ease-in-out infinite alternate}
.dropzone.dragging h2{color:var(--blue);transform:translateY(-2px)}
.dropzone.dragging p,.dropzone.dragging #browseBtn{opacity:.14;transform:scale(.96)}
.dropzone h2,.dropzone p,.dropzone #browseBtn{transition:.2s}
.drop-ready{position:absolute;left:50%;top:calc(50% + 98px);transform:translate(-50%,10px) scale(.96);opacity:0;display:grid;gap:4px;color:var(--blue);pointer-events:none;transition:.2s;z-index:3}
.drop-ready strong{font-size:17px}.drop-ready span{font-size:11px;color:var(--muted);white-space:nowrap}
.dropzone.dragging .drop-ready{opacity:1;transform:translate(-50%,0) scale(1)}
.dropzone.dropped{animation:dropAccepted .48s cubic-bezier(.2,.85,.2,1)}
@keyframes dropMagnet{to{transform:translateY(-4px) scale(1.08)}}
@keyframes arrowBounce{to{transform:translateY(-6px)}}
@keyframes dropAccepted{45%{transform:scale(.985);box-shadow:inset 0 0 0 7px rgba(52,199,89,.1)}100%{transform:scale(1)}}

.thumb-loader{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(110deg,#f0f0ee 8%,#fafaf8 18%,#f0f0ee 33%);background-size:200% 100%;animation:thumbShimmer 1.15s linear infinite;z-index:1;transition:.25s}
.thumb-loader i{width:28px;height:28px;border:2px solid rgba(0,122,255,.16);border-top-color:var(--blue);border-radius:50%;animation:loaderSpin .75s linear infinite}
.preview-ready .thumb-loader{opacity:0;visibility:hidden}.preview-ready .thumb img{animation:imageReveal .28s ease both}
.preview-error .thumb-loader:after{content:'Vista previa no disponible';position:absolute;font-size:9px;color:var(--muted);top:calc(50% + 24px)}
@keyframes thumbShimmer{to{background-position:-200% 0}}@keyframes loaderSpin{to{transform:rotate(360deg)}}@keyframes imageReveal{from{opacity:0;transform:scale(.985)}}
.dark .thumb-loader{background:linear-gradient(110deg,#303034 8%,#3b3b40 18%,#303034 33%);background-size:200% 100%}

.operation-overlay{position:fixed;inset:0;background:rgba(20,22,26,.24);backdrop-filter:blur(7px);z-index:120;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.22s;padding:20px}
.operation-overlay.show{opacity:1;visibility:visible}
.operation-card{width:min(430px,calc(100vw - 32px));padding:27px 28px 24px;background:rgba(252,252,252,.94);border:1px solid rgba(255,255,255,.9);border-radius:25px;box-shadow:0 28px 90px rgba(0,0,0,.22);backdrop-filter:blur(26px);transform:translateY(12px) scale(.97);transition:.28s cubic-bezier(.2,.8,.2,1);text-align:center}
.operation-overlay.show .operation-card{transform:none}
.operation-visual{height:104px;display:grid;place-items:center}.progress-orbit{width:92px;height:92px;position:relative;display:grid;place-items:center;border-radius:29px;background:linear-gradient(145deg,#fff,#eef6ff);box-shadow:0 15px 35px rgba(0,122,255,.16)}
.progress-orbit span{position:absolute;inset:-8px;border:2px solid transparent;border-top-color:rgba(0,122,255,.9);border-radius:35px;animation:orbitSpin 1.1s linear infinite}.progress-orbit span:nth-child(2){inset:-15px;border-top-color:rgba(0,122,255,.32);animation-duration:1.7s;animation-direction:reverse}.progress-orbit span:nth-child(3){inset:-22px;border-top-color:rgba(0,122,255,.13);animation-duration:2.2s}.progress-orbit b{font-size:17px;color:var(--blue);letter-spacing:-.03em}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.operation-copy{display:grid;gap:5px;margin:7px 0 17px}.operation-copy strong{font-size:19px;letter-spacing:-.02em}.operation-copy span{font-size:12px;color:var(--muted)}
.progress-track{height:8px;border-radius:999px;background:#e8e8e9;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}.progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#007aff,#5aabff);box-shadow:0 0 18px rgba(0,122,255,.45);transition:width .18s ease}
.operation-card small{display:block;margin-top:10px;color:var(--muted);font-size:10px}
.operation-overlay[data-type="convert"] .progress-orbit{background:linear-gradient(145deg,#fff,#f4efff);box-shadow:0 15px 35px rgba(126,75,255,.16)}
.operation-overlay[data-type="convert"] .progress-orbit span{border-top-color:#7e4bff}.operation-overlay[data-type="convert"] .progress-orbit span:nth-child(2){border-top-color:rgba(126,75,255,.34)}.operation-overlay[data-type="convert"] .progress-orbit span:nth-child(3){border-top-color:rgba(126,75,255,.15)}.operation-overlay[data-type="convert"] .progress-orbit b{color:#7e4bff}.operation-overlay[data-type="convert"] .progress-track i{background:linear-gradient(90deg,#6f4aff,#9f75ff);box-shadow:0 0 18px rgba(126,75,255,.4)}
.dark .operation-card{background:rgba(40,40,43,.95);border-color:rgba(255,255,255,.08)}.dark .progress-orbit{background:linear-gradient(145deg,#343439,#25252a)}.dark .progress-track{background:#343439}
.button-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;vertical-align:-2px;animation:loaderSpin .7s linear infinite;margin-right:4px}


/* v1.1.1 - flujo continuo de carga */
.dropzone.compact-drop{min-height:112px;padding:14px 22px;margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:14px;border-style:dashed}
.dropzone.compact-drop:before,.dropzone.compact-drop .drop-rings{display:none}
.dropzone.compact-drop .drop-orbit{width:48px;height:48px;border-radius:16px;flex:0 0 auto;animation:none}
.dropzone.compact-drop .drop-icon{font-size:25px}
.dropzone.compact-drop h2{font-size:15px;margin:0;text-align:left}
.dropzone.compact-drop p{font-size:10px;margin:3px 0 0;text-align:left}
.dropzone.compact-drop #browseBtn{margin-left:8px;white-space:nowrap}
.dropzone.compact-drop .drop-ready{top:50%;left:50%;background:rgba(247,251,255,.95);padding:8px 14px;border-radius:12px;box-shadow:0 8px 28px rgba(0,122,255,.12)}
.dropzone.compact-drop.dragging{min-height:128px;background:#eef7ff;transform:scale(.998)}
.card-remove{position:absolute;left:10px;top:10px;width:27px;height:27px;border-radius:50%;border:1px solid rgba(140,140,145,.32);background:rgba(255,255,255,.94);color:#6c6c72;font-size:20px;line-height:22px;display:grid;place-items:center;z-index:5;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.09);opacity:0;transform:scale(.86);transition:.18s}
.card:hover .card-remove,.card-remove:focus{opacity:1;transform:scale(1)}
.card-remove:hover{background:#ff3b30;color:#fff;border-color:#ff3b30;transform:scale(1.08)}
.convert-more{font-weight:750}
.dark .dropzone.compact-drop .drop-ready{background:rgba(35,42,50,.95)}
.dark .card-remove{background:rgba(48,48,51,.95);color:#eee;border-color:#55555a}
@media(max-width:900px){.dropzone.compact-drop{min-height:120px;flex-wrap:wrap;padding:12px}.dropzone.compact-drop h2,.dropzone.compact-drop p{width:calc(100% - 70px)}.dropzone.compact-drop #browseBtn{margin-left:0}.card-remove{opacity:1;transform:scale(1)}}

/* v1.1.2 - restore original gallery layout + full-panel drag target */
.dropzone.compact-drop{display:none!important}
.stage-drop-overlay{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:28px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;overflow:hidden}
.stage-drop-overlay:before{content:"";position:absolute;inset:14px;border:2px dashed rgba(0,122,255,.72);border-radius:25px;background:linear-gradient(135deg,rgba(232,244,255,.94),rgba(244,249,255,.92));box-shadow:inset 0 0 0 5px rgba(0,122,255,.055),0 18px 60px rgba(0,122,255,.14);backdrop-filter:blur(13px);transform:scale(.988);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.stage-drop-glow{position:absolute;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(0,122,255,.17),rgba(0,122,255,.06) 42%,transparent 70%);filter:blur(2px);animation:stageDropBreathe 1.5s ease-in-out infinite alternate}
.stage-drop-content{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:7px;transform:translateY(10px) scale(.96);opacity:0;transition:.22s cubic-bezier(.2,.8,.2,1)}
.stage-drop-icon{width:86px;height:86px;border-radius:29px;display:grid;place-items:center;margin-bottom:7px;background:rgba(255,255,255,.88);border:1px solid rgba(0,122,255,.2);box-shadow:0 20px 44px rgba(0,122,255,.2),0 0 0 10px rgba(0,122,255,.06);animation:stageDropFloat .7s ease-in-out infinite alternate}
.stage-drop-icon span{font-size:39px;line-height:1;color:var(--blue);font-weight:300;animation:stageArrow .55s ease-in-out infinite alternate}
.stage-drop-content strong{font-size:22px;letter-spacing:-.025em;color:#0878e9}.stage-drop-content small{font-size:12px;color:#6d7e91}
.stage.stage-dragging .stage-drop-overlay{opacity:1;visibility:visible}.stage.stage-dragging .stage-drop-overlay:before{transform:scale(1)}.stage.stage-dragging .stage-drop-content{opacity:1;transform:none}
@keyframes stageDropBreathe{to{transform:scale(1.16);opacity:.76}}@keyframes stageDropFloat{to{transform:translateY(-6px) scale(1.035)}}@keyframes stageArrow{to{transform:translateY(-5px)}}
.dark .stage-drop-overlay:before{background:linear-gradient(135deg,rgba(25,53,82,.95),rgba(31,42,55,.94));border-color:rgba(90,174,255,.82);box-shadow:inset 0 0 0 5px rgba(0,122,255,.08),0 18px 60px rgba(0,0,0,.24)}.dark .stage-drop-icon{background:rgba(36,47,59,.92)}.dark .stage-drop-content strong{color:#68b4ff}.dark .stage-drop-content small{color:#a9b7c5}

/* refined image remove button */
.card-remove{position:absolute;left:11px;top:11px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.68);background:rgba(35,35,38,.56);color:transparent;display:grid;place-items:center;z-index:6;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);opacity:0;transform:scale(.88);transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1),background .16s ease,box-shadow .16s ease;backdrop-filter:blur(10px);padding:0}
.card-remove span,.card-remove span:after{position:absolute;width:11px;height:1.6px;border-radius:999px;background:#fff;content:"";display:block}.card-remove span{transform:rotate(45deg)}.card-remove span:after{transform:rotate(90deg)}
.card:hover .card-remove,.card-remove:focus-visible{opacity:1;transform:scale(1)}
.card-remove:hover{background:rgba(255,59,48,.94);border-color:rgba(255,255,255,.82);transform:scale(1.07);box-shadow:0 6px 17px rgba(255,59,48,.24)}
.card-remove:active{transform:scale(.94)}
.dark .card-remove{background:rgba(20,20,22,.62);border-color:rgba(255,255,255,.18)}
@media(max-width:900px){.card-remove{opacity:1;transform:scale(1)}.stage-drop-overlay{padding:12px}.stage-drop-overlay:before{inset:8px;border-radius:20px}.stage-drop-content strong{font-size:19px}}

/* v1.1.3 — polish, compact action dock and faster perceived previews */
.stage{padding-bottom:26px;scrollbar-gutter:stable}
.bottom-bar{
  position:sticky;
  left:auto;right:auto;bottom:14px;
  width:calc(100% - 6px);height:58px;
  margin:22px 3px 0;
  padding:8px 10px 8px 16px;
  border:1px solid rgba(214,214,210,.72);
  border-radius:18px;
  background:rgba(252,252,251,.82);
  box-shadow:0 12px 34px rgba(38,42,48,.09),0 1px 0 rgba(255,255,255,.72) inset;
  backdrop-filter:blur(22px) saturate(1.18);
  -webkit-backdrop-filter:blur(22px) saturate(1.18);
  z-index:12;
  animation:dockIn .42s cubic-bezier(.22,.8,.24,1) both;
}
@keyframes dockIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.bottom-bar .convert-btn{min-width:205px;max-width:min(330px,48vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:13px;padding:10px 16px;box-shadow:0 6px 16px rgba(0,122,255,.18)}
.bottom-bar .batch-info{min-width:0;padding-right:12px}.bottom-bar .batch-info span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Preview cards: smoother reveal, less jank and crisp loading state */
.card{will-change:transform,opacity;transition:transform .28s cubic-bezier(.2,.72,.2,1),box-shadow .28s ease,border-color .2s ease;animation:cardInPro .38s cubic-bezier(.18,.78,.22,1) both}
@keyframes cardInPro{from{opacity:0;transform:translateY(10px) scale(.982);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.075)}
.thumb{isolation:isolate;background:linear-gradient(110deg,#f1f1ef 8%,#f8f8f7 18%,#f1f1ef 33%);background-size:210% 100%;animation:thumbSheen 1.25s linear infinite}
@keyframes thumbSheen{to{background-position-x:-210%}}
.thumb img{opacity:0;transform:scale(1.012);transition:opacity .24s ease,transform .5s cubic-bezier(.2,.75,.2,1)}
.preview-ready .thumb{animation:none;background:#f1f1ef}.preview-ready .thumb img{opacity:1;transform:none}
.card:hover.preview-ready .thumb img{transform:scale(1.018)}
.thumb-loader{position:absolute;inset:0;display:grid;place-items:center;z-index:0;transition:opacity .18s ease}
.preview-ready .thumb-loader{opacity:0;pointer-events:none}.thumb-loader i{width:24px;height:24px;border-radius:50%;border:2px solid rgba(0,122,255,.13);border-top-color:rgba(0,122,255,.72);animation:previewSpin .72s linear infinite}
@keyframes previewSpin{to{transform:rotate(360deg)}}

/* Professional drag target: full stage, restrained glow and clean motion */
.stage-drop-overlay{transition:opacity .18s ease,visibility .18s ease}
.stage-drop-overlay:before{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 18px 52px rgba(0,122,255,.10)}
.stage.stage-dragging .stage-drop-overlay:before{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 22px 64px rgba(0,122,255,.16),0 0 0 1px rgba(0,122,255,.08)}
.stage-drop-content{transition:opacity .2s ease,transform .3s cubic-bezier(.18,.78,.2,1)}
.stage-drop-icon{animation:stageDropFloatPro 1.05s cubic-bezier(.45,.05,.55,.95) infinite alternate;box-shadow:0 18px 42px rgba(0,122,255,.16),0 0 0 8px rgba(0,122,255,.045)}
@keyframes stageDropFloatPro{to{transform:translateY(-6px) scale(1.025)}}
.stage-drop-icon span{animation:stageArrowPro .8s ease-in-out infinite alternate}
@keyframes stageArrowPro{to{transform:translateY(-3px);opacity:.72}}

/* Operation overlay: cleaner, calmer premium motion */
.operation-overlay{transition:opacity .22s ease,visibility .22s ease}
.operation-card{animation:operationCardIn .34s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 32px 90px rgba(0,0,0,.20)}
@keyframes operationCardIn{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
.progress-orbit span{animation-duration:1.25s}.progress-track i{transition:width .34s cubic-bezier(.2,.75,.2,1)}
.toast{animation:toastPro .28s cubic-bezier(.2,.8,.2,1)}@keyframes toastPro{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.primary{transition:transform .2s cubic-bezier(.2,.75,.2,1),box-shadow .2s ease,filter .2s ease}.primary:active{transform:scale(.975)}

.dark .bottom-bar{background:rgba(37,37,39,.84);border-color:rgba(255,255,255,.09);box-shadow:0 14px 38px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.04) inset}
.dark .thumb{background:linear-gradient(110deg,#262628 8%,#303033 18%,#262628 33%);background-size:210% 100%}.dark .preview-ready .thumb{background:#262628}

@media(max-width:720px){.bottom-bar{height:auto;min-height:58px;gap:9px;padding:8px 9px 8px 12px}.bottom-bar .convert-btn{min-width:0;max-width:58vw}.batch-info{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* v1.1.4 — navigation and control refinement */
.topbar{grid-template-columns:1fr auto 1fr}
.brand{grid-column:2}
.top-actions{grid-column:3}

.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid rgba(205,205,210,.78);background:rgba(255,255,255,.74);display:grid;place-items:center;position:relative;cursor:pointer;color:#525258;box-shadow:0 4px 14px rgba(30,35,45,.045),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .2s cubic-bezier(.2,.75,.2,1),background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.theme-toggle:hover{transform:translateY(-1px);background:#fff;border-color:rgba(180,180,186,.78);box-shadow:0 7px 20px rgba(30,35,45,.08),inset 0 1px 0 #fff;color:#161619}
.theme-toggle:active{transform:scale(.95)}
.theme-icon{position:absolute;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.moon-icon{fill:currentColor;stroke:none;opacity:1;transform:rotate(0) scale(1)}
.sun-icon{opacity:0;transform:rotate(-35deg) scale(.72)}
.dark .theme-toggle{background:rgba(61,61,65,.78);border-color:rgba(255,255,255,.12);color:#f8cf58;box-shadow:0 5px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)}
.dark .theme-toggle:hover{background:rgba(72,72,76,.92);color:#ffe27b}
.dark .moon-icon{opacity:0;transform:rotate(30deg) scale(.72)}
.dark .sun-icon{opacity:1;transform:rotate(0) scale(1)}

.nav{transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.nav:hover:not(.active){background:rgba(0,122,255,.055)}
.nav:active{transform:scale(.985)}
.nav.active{box-shadow:inset 0 0 0 1px rgba(0,122,255,.035)}

.selection-actions{gap:9px}
.action-pill{height:38px;border:1px solid rgba(207,207,211,.8);background:rgba(255,255,255,.74);border-radius:13px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#343438;font-size:12px;font-weight:650;cursor:pointer;box-shadow:0 3px 10px rgba(20,24,30,.035),inset 0 1px 0 rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .18s cubic-bezier(.2,.75,.2,1),background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
.action-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.action-pill:hover:not(:disabled){transform:translateY(-1px);background:#fff;border-color:rgba(180,180,185,.78);box-shadow:0 7px 18px rgba(20,24,30,.075),inset 0 1px 0 #fff}
.action-pill:active:not(:disabled){transform:scale(.97)}
.action-pill:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.action-remove{color:#d83c34;background:rgba(255,255,255,.7)}
.action-remove:hover:not(:disabled){color:#c82f28;background:rgba(255,247,246,.98);border-color:rgba(255,59,48,.22);box-shadow:0 7px 18px rgba(255,59,48,.08),inset 0 1px 0 #fff}
.dark .action-pill{background:rgba(49,49,52,.72);border-color:rgba(255,255,255,.1);color:#e9e9ed;box-shadow:0 4px 13px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.04)}
.dark .action-pill:hover:not(:disabled){background:rgba(62,62,66,.94);border-color:rgba(255,255,255,.16)}
.dark .action-remove{color:#ff7770}.dark .action-remove:hover:not(:disabled){background:rgba(90,38,36,.48);border-color:rgba(255,100,92,.2);color:#ff8f89}

.card-remove{left:10px;top:10px;width:30px;height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.78);background:rgba(255,255,255,.86);color:#55555b;box-shadow:0 5px 16px rgba(25,28,34,.12),inset 0 1px 0 rgba(255,255,255,.94);opacity:0;transform:translateY(-2px) scale(.92);backdrop-filter:blur(16px) saturate(1.12);-webkit-backdrop-filter:blur(16px) saturate(1.12);transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1),background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;padding:0}
.card-remove svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.card:hover .card-remove,.card-remove:focus-visible{opacity:1;transform:none}
.card-remove:hover{background:rgba(255,245,244,.97);color:#e03b33;border-color:rgba(255,82,72,.22);transform:translateY(-1px) scale(1.04);box-shadow:0 7px 20px rgba(255,59,48,.12),inset 0 1px 0 #fff}
.card-remove:active{transform:scale(.93)}
.dark .card-remove{background:rgba(42,42,45,.88);color:#f1f1f4;border-color:rgba(255,255,255,.13);box-shadow:0 6px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05)}
.dark .card-remove:hover{background:rgba(84,43,40,.92);color:#ff8c85;border-color:rgba(255,113,105,.2)}

.gallery-empty{grid-column:1/-1;min-height:270px;border:1px dashed rgba(190,190,194,.68);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);background:rgba(255,255,255,.28);animation:cardInPro .3s ease both}
.gallery-empty-icon{width:48px;height:48px;border-radius:15px;background:rgba(0,122,255,.08);color:var(--blue);display:grid;place-items:center;font-size:22px;margin-bottom:12px;box-shadow:inset 0 0 0 1px rgba(0,122,255,.08)}
.gallery-empty strong{font-size:14px;color:var(--text);margin-bottom:4px}.gallery-empty span{font-size:12px}
.dark .gallery-empty{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.1)}

@media(max-width:900px){.topbar{grid-template-columns:1fr auto}.brand{grid-column:1;justify-self:start}.top-actions{grid-column:2}.theme-toggle{width:40px;height:40px}.selection-actions{gap:6px}.action-pill{height:36px;padding:0 10px}.card-remove{opacity:1;transform:none}}

/* Donweb/Ferozo edition */
.switch-row input:disabled+i{opacity:.6;cursor:not-allowed}
.preview-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:11px;text-align:center}.preview-fallback span{font-weight:800;color:var(--blue);font-size:13px}.preview-fallback small{font-size:10px}
.operation-overlay[data-type="upload"] .operation-card:after{content:"Procesamiento local";display:inline-flex;align-items:center;justify-content:center;margin:2px auto 0;padding:5px 9px;border-radius:999px;background:rgba(52,199,89,.09);color:#269c46;font-size:10px;font-weight:750;letter-spacing:.01em}
.dark .operation-overlay[data-type="upload"] .operation-card:after{background:rgba(52,199,89,.13);color:#65df83}


/* v1.1.5 — volver al sitio principal */
.top-left-actions{grid-column:1;display:flex;align-items:center;justify-content:flex-start;min-width:0}
.app-close-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(205,205,210,.78);background:rgba(255,255,255,.74);display:grid;place-items:center;color:#5a5a60;cursor:pointer;box-shadow:0 4px 14px rgba(30,35,45,.045),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .2s cubic-bezier(.2,.75,.2,1),background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}
.app-close-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.app-close-btn:hover{transform:translateY(-1px);background:rgba(255,246,245,.98);border-color:rgba(255,95,87,.25);color:#e34a42;box-shadow:0 7px 20px rgba(255,59,48,.09),inset 0 1px 0 #fff}
.app-close-btn:active{transform:scale(.94)}
.app-close-btn:focus-visible{outline:3px solid rgba(0,122,255,.2);outline-offset:3px}
.dark .app-close-btn{background:rgba(61,61,65,.78);border-color:rgba(255,255,255,.12);color:#e7e7eb;box-shadow:0 5px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)}
.dark .app-close-btn:hover{background:rgba(83,45,43,.86);border-color:rgba(255,113,105,.2);color:#ff8c85}
body.app-closing{overflow:hidden}
body.app-closing .app-shell{pointer-events:none;animation:lumaCloseToHome .48s cubic-bezier(.4,0,.2,1) forwards}
body.app-closing .ambient{animation:lumaAmbientOut .42s ease forwards}
body.app-closing:after{content:"";position:fixed;inset:0;background:rgba(246,246,245,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);z-index:9999;pointer-events:none;animation:lumaExitVeil .48s ease forwards}
body.dark.app-closing:after{background:rgba(20,20,22,0)}
@keyframes lumaCloseToHome{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}55%{opacity:.72;transform:translateY(5px) scale(.985);filter:blur(1px)}100%{opacity:0;transform:translateY(14px) scale(.955);filter:blur(8px)}}
@keyframes lumaAmbientOut{to{opacity:0;transform:scale(.92)}}
@keyframes lumaExitVeil{to{background:rgba(246,246,245,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
body.dark.app-closing:after{animation-name:lumaExitVeilDark}
@keyframes lumaExitVeilDark{to{background:rgba(20,20,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
@media(max-width:900px){.topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}.top-left-actions{grid-column:1}.brand{grid-column:2;justify-self:start;min-width:0}.brand>div{min-width:0}.brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{grid-column:3}.app-close-btn{width:40px;height:40px}}
@media(max-width:520px){.brand img{display:none}.brand strong{font-size:13px}.topbar{padding:0 10px;gap:8px}.top-actions{gap:7px}}
@media(prefers-reduced-motion:reduce){body.app-closing .app-shell,body.app-closing .ambient,body.app-closing:after{animation-duration:.12s!important}}