:root{color-scheme:dark;--bg:#090a12;--panel:#11121d;--panel2:#161724;--panel3:#1c1d2d;--line:#2b2b3e;--line2:#3b394f;--muted:#8a8b9f;--ink:#f4f2ff;--purple:#a67aff;--purple2:#7951d7;--teal:#67ddc8;--pink:#f18ac2;--warm:#eab07e;--radius:13px;--font:"DM Sans",sans-serif;--display:"Outfit",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:2px}a{color:inherit;text-decoration:none}select,input[type=text],input[type=number],textarea{color:var(--ink);background:#171824;border:1px solid var(--line);border-radius:8px;padding:10px;min-width:0}select{padding:8px 27px 8px 10px}textarea{width:100%;resize:vertical;line-height:1.5}input[type=range]{-webkit-appearance:none;appearance:none;accent-color:var(--purple);height:5px;border-radius:8px;background:#333349;width:100%;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--purple);border:2px solid var(--ink);box-shadow:0 0 0 3px #a67aff18}input[type=color]{height:39px;width:100%;background:#171824;border:1px solid var(--line);border-radius:8px;cursor:pointer;padding:4px}
.app{min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:70px;min-height:70px;background:#0f101a;display:flex;align-items:center;padding:0 21px;gap:17px;border-bottom:1px solid var(--line);z-index:2}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.brand-logo{height:39px;width:39px;border:1px solid #68489d;background:radial-gradient(circle at 40% 20%,#483371,#191321);border-radius:12px;display:grid;place-items:center;font-size:24px;color:#dccaff;box-shadow:0 0 30px #b58bff19}.brand-copy{display:grid;gap:0}.brand-copy strong{font:700 18px var(--display);letter-spacing:-.4px}.brand-copy strong em{font-style:normal;color:#be97ff}.brand-copy small{font-size:9px;letter-spacing:3px;color:#868298}.brand-copy small b{color:var(--purple);font-weight:600}.top-divider,.action-divider{width:1px;height:27px;background:var(--line)}.project-name-label{min-width:0;display:flex;flex-direction:column;gap:4px}.project-name-label input{font:600 12px var(--font);background:transparent;border:0;padding:2px 4px 2px 0;width:260px;max-width:20vw}.project-name-label span{color:#7b7d8b;font-size:10px}.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.privacy-label{color:#a1a0ad;font-size:11px;margin-right:12px;white-space:nowrap}.privacy-dot,.status-led,.purple-led{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-right:8px;box-shadow:0 0 11px #64dcba66}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;min-height:37px;background:transparent;color:var(--ink);border:1px solid var(--line2);border-radius:8px;font-weight:700;font-size:12px;white-space:nowrap;transition:.18s ease}.btn:hover{transform:translateY(-1px);border-color:#9877d4}.btn-primary{background:linear-gradient(115deg,#9d70ef,#7451cb);border-color:#aa82ff;color:white;box-shadow:0 4px 23px #7754cb27}.btn-primary:hover{filter:brightness(1.09)}.btn-secondary{background:#202032}.btn-ghost{border-color:#343447;color:#c4c0d2}.btn-icon{font-size:17px;line-height:0}.btn-tiny{min-height:29px;padding:5px 10px;background:#242437;font-size:11px}.btn-block{width:100%}.btn-danger{border-color:#6e354f;color:#ffa2c0}.icon-btn{background:transparent;color:#bbb4cc;border:1px solid transparent;min-width:30px;height:30px;border-radius:7px;font-size:18px}.icon-btn:hover{color:var(--ink);background:#25253a}.icon-btn.danger:hover{color:#ff8fae}
.workspace{display:grid;grid-template-columns:261px minmax(310px,1fr) 280px;flex:1;min-height:0;max-height:calc(100dvh - 365px)}.panel{background:var(--panel);min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#454158 transparent}.library{border-right:1px solid var(--line);display:flex;flex-direction:column}.inspector{border-left:1px solid var(--line);position:relative}.panel-top{padding:24px 19px 17px}.eyebrow{font-weight:700;font-size:10px;letter-spacing:2.7px;color:#ac85f5}.panel-top h2{font:700 19px var(--display);margin:7px 0 4px}.panel-top p{font-size:11px;color:var(--muted);line-height:1.5;margin:0}.count{color:#aaa2be;font:500 11px var(--font);background:#282538;border:1px solid #423b51;border-radius:16px;padding:3px 8px;vertical-align:middle}.import-card{display:flex;margin:0 15px 24px;border:1px dashed #675789;background:radial-gradient(circle at 50% 0%,#7f52cf19,transparent 65%),#191626;min-height:179px;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:9px;cursor:pointer;transition:.18s}.import-card:hover,.import-card.over{border-color:#b992ff;background:#28203b}.import-circle{background:#342548;color:#c59afd;border:1px solid #684890;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:29px;line-height:1}.import-card strong{font-size:12px}.import-card small{color:#a09cad}.import-formats{font-size:9px;color:#777287;letter-spacing:.2px}.library-head{border-top:1px solid var(--line);padding:16px 17px 10px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:10px;letter-spacing:1px;color:#9b9bae}.media-list{padding:4px 12px 12px;display:grid;align-content:start;gap:8px;flex:1}.empty-list,.nothing-selected{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:#88879c;padding:25px 13px}.empty-list span{font-size:25px;color:#735ba5}.empty-list p,.nothing-selected p{margin:0;line-height:1.5;font-size:11px}.media-item{border:1px solid var(--line);border-radius:9px;background:#1a1b29;display:flex;align-items:center;gap:9px;padding:8px;cursor:pointer;transition:.16s}.media-item:hover{background:#222135;border-color:#69518d}.media-thumb{width:50px;height:42px;display:grid;place-items:center;flex:0 0 50px;background:linear-gradient(135deg,#422c61,#202536);border-radius:6px;overflow:hidden;color:#c5a7fc;font-size:22px}.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover}.media-thumb.audio{background:#173931;color:#80e4d2}.media-info{min-width:0;flex:1}.media-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:700}.media-info small{color:#908da3;display:block;font-size:10px;margin-top:4px}.media-add{width:26px;height:26px;background:#2a2440;border:1px solid #574476;border-radius:7px;color:#c6a8ff;font-size:17px;flex:0 0 26px}.sidebar-foot{padding:14px;border-top:1px solid var(--line);color:#868299;font-size:10px;display:flex;gap:8px;align-items:center}.sidebar-foot span{color:#c6a8ff}
.center-column{display:flex;flex-direction:column;min-height:0;min-width:0;background:radial-gradient(ellipse at 50% 38%,#1c1b2a 0%,#10111a 78%)}.canvas-toolbar{height:59px;min-height:59px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #292a36}.canvas-label{display:flex;align-items:center;gap:9px;font-size:12px}.canvas-label strong{font-weight:700}.light-tag{font-size:8px;letter-spacing:1px;border-radius:5px;padding:4px 6px;background:#28253a;color:#a7a0bf;font-weight:700}.canvas-tools{display:flex;align-items:center;gap:10px;font-size:11px;color:#aaa7bc}.canvas-tools select{max-width:185px;font-size:11px}.preview-shell{flex:1;min-height:260px;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}.preview-stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;max-height:580px}.preview-stage canvas{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 10px 55px #0008;background:#050509;border:1px solid #2b2a3b;cursor:crosshair}.preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:11px;background:radial-gradient(circle at 50% 45%,#2a2140 0,#151523 45%,#101019 85%);border:1px solid #373046;border-radius:8px;min-height:190px}.empty-star{font-size:37px;color:#d9b3ff;text-shadow:0 0 28px #b38af8}.preview-empty h1{font:700 clamp(20px,2vw,28px) var(--display);margin:0}.preview-empty p{color:#a29eaf;max-width:300px;line-height:1.6;font-size:12px;margin:0 10px 7px}.preview-empty button{margin:8px 0}.empty-mini{font-size:10px;color:#777088}.transport{height:68px;min-height:68px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 21px;border-top:1px solid #292936;background:#151620}.transport-left{display:flex;gap:8px;align-items:center;font:600 13px var(--display)}.clock-main{color:#d9c3ff}.clock-muted,.clock-slash{color:#898698}.transport-center{display:flex;align-items:center;justify-content:center;gap:16px}.transport-btn{background:none;border:0;color:#b7b2c9;font-size:23px}.transport-btn:hover{color:var(--ink)}.play-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#a67aff;color:#160f2a;border:0;font-size:17px;box-shadow:0 0 24px #8654da55}.play-btn:hover{background:#c9a9ff}.transport-right{display:flex;align-items:center;justify-content:end;gap:17px}.monitor-control{display:flex;align-items:center;gap:10px;color:#a49bcb}.monitor-control input{width:64px}.fps-pill{border:1px solid #424053;color:#a5a0b9;border-radius:5px;padding:5px 7px;font-size:9px;white-space:nowrap}.tips-line{padding:10px 17px;text-align:center;font-size:10px;color:#878598;background:#12131e;line-height:1.5;border-top:1px solid #282737}.tips-line span:first-child{color:var(--purple);margin-right:6px}.tips-line kbd{padding:1px 5px;background:#252335;border-radius:4px;border:1px solid #39354b;font-size:10px}
.inspector-heading{padding-bottom:14px}.inspector-tabs{display:flex;padding:0 12px;border-bottom:1px solid var(--line)}.inspect-tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:#8e8b9f;padding:11px 6px;font-weight:700;font-size:11px}.inspect-tab.active{color:#c9a9ff;border-color:var(--purple)}.inspector-body{padding:15px 15px 24px;overflow-y:auto}.nothing-selected{padding:47px 6px}.nothing-selected>span{font-size:40px;color:#9b78cf}.nothing-selected strong{color:#b9b6ce}.clip-head{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:12px 8px;background:#1b1b2b;border-radius:8px}.clip-head strong{font-size:11px;flex:1}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip{font-size:9px;padding:4px 7px;background:#3f2d68;color:#ceafff;border-radius:5px;font-weight:700}.group-title{display:flex;gap:9px;align-items:center;font-size:12px;font-weight:700;margin:23px 0 14px;color:#e1d9ee}.group-title:first-child{margin-top:0}.group-title span{color:var(--purple)}.range-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.range-fields label{font-size:11px;color:#9b9bb0}.range-fields label span{float:right;color:#706f85}.range-fields input{display:block;width:100%;margin-top:8px;font-variant-numeric:tabular-nums}.field{display:block;font-size:11px;color:#a8a5ba;margin-bottom:17px}.field>span{display:flex;justify-content:space-between;gap:8px;margin-bottom:9px}.field input:not([type=range]){width:100%}.field output{color:#d1b3fd;font-weight:600}.field-hint{color:#858195;font-size:10px;display:block;line-height:1.6;margin:7px 0 13px}.slider-row{display:flex;align-items:center;gap:12px}.slider-row output{min-width:38px;text-align:right}.trimmer{margin:12px 0 5px;height:7px;background:#373144;border-radius:8px;overflow:hidden}.trimmer-fill{height:100%;background:linear-gradient(90deg,#a879ef,#67ddc8);border-radius:8px;width:100%}.reorder-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.reorder-actions .btn{flex:1;padding:9px 7px;font-size:10px}.effect-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.effect-choice{background:none;border:1px solid transparent;border-radius:9px;padding:6px;color:#a8a6b6;font-size:10px;display:flex;flex-direction:column;gap:6px}.effect-choice.active{background:#2a2341;border-color:#8063b6;color:#f0deff}.effect-tile{height:49px;width:100%;display:grid;place-items:center;font-size:26px;color:#efe5ff;border-radius:6px;background:linear-gradient(140deg,#7258bd,#bfa2ee 45%,#342141)}.filter-bw{filter:grayscale(1)}.filter-vintage{filter:sepia(.8)}.filter-vivid{filter:saturate(2)}.filter-dream{background:linear-gradient(130deg,#44256e,#a4bdea,#472e7b)}.filter-cinematic{background:linear-gradient(130deg,#243947,#4d6273,#160b26)}.subtle-copy{color:#8c88a0;font-size:11px;line-height:1.6}.text-list{margin:16px 0;display:grid;gap:7px}.text-item{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid #3a314c;background:#1f1a2b;color:#c0b0d6;padding:9px 10px;border-radius:8px;text-align:left;font-size:11px}.text-item.active{background:#302341;border-color:#966bd6;color:#f5e9ff}.inspector-footer{color:#777489;font-size:10px;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:15px;margin-top:15px}
.timeline-shell{height:295px;min-height:295px;background:#10111c;border-top:1px solid #413453;display:flex;flex-direction:column;position:relative}.timeline-top{height:48px;min-height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:10px}.timeline-title{font:700 13px var(--display);white-space:nowrap}.timeline-mark{color:#b48ef8;margin-right:8px;font-size:16px}.timeline-sub{font:400 11px var(--font);color:#878397;margin-left:14px}.timeline-actions{display:flex;align-items:center;gap:9px}.timeline-actions input{width:85px}.zoom-label{color:#908a9f;font-size:10px}.action-divider{height:19px}.timeline-scroll{flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#514462 #12111c;user-select:none}.timeline-content{position:relative;min-height:209px;min-width:700px}.ruler{height:31px;margin-left:135px;position:relative;border-bottom:1px solid #383445;background:#151524;cursor:crosshair}.ruler-tick{position:absolute;top:0;height:30px;border-left:1px solid #484159;padding:7px 5px;font:10px var(--display);color:#9490a5;white-space:nowrap}.track-row{display:flex;height:60px;border-bottom:1px solid #292a38}.track-row.text-row{height:46px}.track-label{width:135px;flex:0 0 135px;display:flex;flex-direction:column;justify-content:center;padding:6px 12px 6px 37px;position:relative;background:#161623;border-right:1px solid #363345;z-index:1}.track-label strong{font-size:10px;white-space:nowrap}.track-label small{font-size:9px;color:#8b88a1;margin-top:3px}.track-symbol{position:absolute;left:12px;top:18px;color:#b79ae4;font-size:15px}.audio-symbol{color:#7dd8c7}.text-symbol{color:#eeb1d4;font-weight:800}.track-area{position:relative;flex:1;background:repeating-linear-gradient(90deg,#ffffff06 0px,#ffffff06 1px,transparent 1px,transparent 70px);min-height:40px}.track-empty{display:inline-flex;align-items:center;color:#646074;padding:19px 15px;font-size:10px}.timeline-clip{position:absolute;top:7px;bottom:7px;border-radius:7px;overflow:hidden;display:flex;align-items:stretch;border:1px solid #9772d0;background:linear-gradient(90deg,#573c80,#2f234b);color:#f3e9ff;cursor:grab;min-width:10px}.timeline-clip.selected{border-color:#e3c9ff;box-shadow:0 0 0 2px #af85e04d;z-index:2}.timeline-clip.audio-clip{background:linear-gradient(90deg,#255c55,#1c393a);border-color:#469986;color:#ddfff6}.timeline-clip.text-clip{background:linear-gradient(90deg,#74375b,#462540);border-color:#be6c9d;color:#ffe8f6}.clip-content{min-width:0;padding:7px 6px;display:flex;align-items:center;gap:6px;flex:1}.clip-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:700}.clip-content .type-icon{font-size:13px;opacity:.8}.trim-handle{width:6px;min-width:6px;height:100%;background:#e3c8ff9c;cursor:ew-resize;z-index:2}.audio-clip .trim-handle{background:#a4ffe0ad}.text-clip .trim-handle{background:#ffc5e7aa}.playhead{position:absolute;left:135px;top:4px;bottom:0;border-left:2px solid #ffb1ca;pointer-events:none;z-index:5}.playhead-cap{position:absolute;left:-6px;top:-4px;width:11px;height:15px;background:#ffb0cb;border-radius:3px 3px 2px 2px}.timeline-foot{height:31px;min-height:31px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-top:1px solid #353142;font-size:10px;color:#828095}.purple-led{background:var(--purple);box-shadow:none;margin-right:5px}.foot-sep{padding:0 8px;color:#635d73}
.toast{position:fixed;z-index:100;bottom:35px;left:50%;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:.2s;max-width:min(90vw,450px);border:1px solid #74609d;border-radius:11px;padding:13px 20px;background:#2a233c;color:#f2eaff;box-shadow:0 15px 60px #0009;font-size:12px;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{border-color:#9e5066;background:#3a202b}.modal-backdrop{position:fixed;inset:0;z-index:90;background:#05030acc;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px}.modal-backdrop[hidden]{display:none}.modal-card{width:min(470px,100%);background:linear-gradient(155deg,#201a32,#12131f 75%);border:1px solid #594773;border-radius:18px;box-shadow:0 25px 100px #000d;padding:24px}.modal-header{display:flex;justify-content:space-between;align-items:center}.export-symbol{width:63px;height:63px;border-radius:20px;background:#67439b;border:1px solid #a478e0;color:#fff;display:grid;place-items:center;font-size:39px;margin:24px auto 12px}.modal-card h2{font:700 27px var(--display);text-align:center;margin:0 0 10px}.modal-card>p{font-size:12px;line-height:1.7;color:#a9a1b9;text-align:center}.export-specs{margin:20px 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.export-specs>div{border:1px solid #433753;border-radius:8px;padding:12px 9px;display:grid;gap:6px;background:#1a1928;text-align:center}.export-specs span{color:#938ca6;font-size:9px}.export-specs strong{color:#e8d8ff;font-size:11px}.modal-actions{display:flex;gap:10px;margin-top:19px}.modal-actions .btn{flex:1}.progress-area{margin-top:20px}.progress-top{display:flex;justify-content:space-between;font-size:11px;padding-bottom:8px}.progress-track{height:7px;background:#342a45;border-radius:10px;overflow:hidden}.progress-track span{display:block;width:0%;height:100%;background:linear-gradient(90deg,#9160e6,#6dd5d3);transition:width .15s}.modal-card .export-disclaimer{font-size:10px;color:#77718c;margin-bottom:0}
@media(max-width:1200px){.workspace{grid-template-columns:220px minmax(290px,1fr) 246px}.privacy-label{display:none}.topbar{gap:12px}.panel-top{padding-left:15px}.effect-choices{gap:4px}.preview-shell{padding:16px}}
@media(max-width:920px){.workspace{grid-template-columns:190px minmax(250px,1fr) 218px}.panel-top{padding:15px 12px}.canvas-toolbar{padding:0 10px}.canvas-tools select{max-width:125px}.privacy-label{display:none}.timeline-sub{display:none}.tips-line{display:none}.inspector-body{padding:10px}.effect-choices{grid-template-columns:repeat(2,1fr)}.topbar{padding:0 10px}.project-name-label input{max-width:130px}}
@media(max-width:720px){.app{overflow:visible}.topbar{height:60px;min-height:60px;padding:0 11px;gap:10px}.brand-logo{height:34px;width:34px}.brand-copy strong{font-size:16px}.top-divider,.project-name-label,.top-actions .btn-ghost,.privacy-label{display:none}.top-actions .btn{min-height:34px;padding:7px 11px}.workspace{display:flex;flex-direction:column;max-height:none;overflow:visible}.center-column{order:0;min-height:360px}.preview-shell{min-height:270px;max-height:480px}.preview-stage{min-height:260px}.canvas-toolbar{height:52px;min-height:52px}.transport{height:62px;min-height:62px;padding:0 11px}.transport-center{gap:10px}.transport-right{gap:3px}.transport-right .monitor-control{display:none}.library{order:1;border-top:1px solid var(--line);border-right:0;min-height:190px;max-height:300px;overflow-y:auto}.library .panel-top{padding:13px 15px 7px}.import-card{min-height:70px;gap:5px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;margin:6px 14px 10px;padding:10px 14px;justify-content:start;text-align:left}.import-card .import-circle{grid-row:span 3;height:36px;width:36px;font-size:24px}.import-card .import-formats{display:none}.library-head{padding:8px 13px}.media-list{display:flex;flex-wrap:nowrap;overflow-x:auto;max-height:125px}.media-item{min-width:175px;width:175px}.empty-list{padding:11px}.sidebar-foot{display:none}.inspector{order:2;border-left:0;border-top:1px solid var(--line);max-height:none;min-height:200px}.inspector-heading{padding:13px 15px 8px}.inspector-heading p{display:none}.inspector-body{min-height:160px}.inspector-footer{display:none}.timeline-shell{height:270px;min-height:270px}.timeline-top{padding:0 10px}.timeline-actions{gap:5px}.timeline-actions .btn-tiny{padding:4px 6px}.timeline-actions input{width:58px}.timeline-title{font-size:12px}.zoom-label{display:none}.modal-card{padding:19px}.modal-card h2{font-size:23px}}
@media(max-width:420px){.preview-shell{padding:8px;min-height:235px}.preview-stage{min-height:215px}.preview-empty h1{font-size:20px}.preview-empty p{font-size:10px}.canvas-tools{gap:3px}.canvas-tools label{display:none}.timeline-actions #addMediaTimeline{display:none}.transport-left{font-size:11px}.transport-right .fps-pill{font-size:8px}.top-actions .btn{font-size:11px}.group-title{margin-top:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

[hidden]{display:none!important}

#mediaHost{position:fixed;left:-10000px;top:0;width:2px;height:2px;opacity:0;overflow:hidden;pointer-events:none}

/* v1.1 — escritorio: preservar el monitor y sus controles en pantallas bajas.
   Antes el preview min-height:260px + 295px de timeline desbordaban 100dvh. */
@media (min-width:721px) {
  .app {
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .workspace {
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow:hidden;
  }
  .center-column {
    min-height:0;
    overflow:hidden;
  }
  .preview-shell {
    min-height:0;
    flex:1 1 auto;
    padding:clamp(8px,2dvh,18px);
  }
  .preview-stage {
    height:100%;
    min-height:0;
  }
  .preview-stage canvas {
    max-width:100%;
    max-height:100%;
  }
  .preview-empty {
    min-height:0;
  }
  .timeline-shell {
    height:auto;
    min-height:0;
    flex:0 0 clamp(218px,32dvh,280px);
  }
  .timeline-top {
    height:43px;
    min-height:43px;
  }
  .timeline-scroll {
    min-height:0;
    overflow:auto;
  }
  .timeline-foot {
    height:25px;
    min-height:25px;
  }
  .timeline-content {
    min-height:149px;
  }
  .ruler,
  .ruler-tick {
    height:25px;
  }
  .track-row {
    height:44px;
  }
  .track-row.text-row {
    height:36px;
  }
  .track-empty {
    padding:12px 15px;
  }
  .timeline-clip {
    top:5px;
    bottom:5px;
  }
}
@media (min-width:721px) and (max-height:740px) {
  .topbar {
    height:58px;
    min-height:58px;
  }
  .canvas-toolbar {
    height:46px;
    min-height:46px;
  }
  .transport {
    height:52px;
    min-height:52px;
  }
  .tips-line {
    display:none;
  }
  .panel-top {
    padding-top:14px;
    padding-bottom:11px;
  }
  .import-card {
    min-height:126px;
    margin-bottom:12px;
  }
  .import-circle {
    height:34px;
    width:34px;
    border-radius:10px;
    font-size:23px;
  }
  .preview-empty {
    gap:7px;
  }
  .preview-empty .empty-star {
    font-size:27px;
  }
  .preview-empty h1 {
    font-size:clamp(16px,2vw,22px);
  }
  .preview-empty p {
    margin-bottom:0;
  }
  .preview-empty button {
    margin:0;
  }
}
@media (max-width:720px) {
  .app {
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
  .workspace {
    max-height:none;
    overflow:visible;
  }
}

/* Si la ventana del escritorio es muy baja, permitir desplazamiento
   vertical en lugar de comprimir el monitor hasta ocultarlo. */
@media (min-width:721px) and (max-height:530px) {
  .app {
    height:auto;
    min-height:650px;
    overflow:visible;
  }
  .workspace {
    min-height:360px;
  }
  .preview-shell {
    min-height:205px;
  }
  .timeline-shell {
    flex-basis:232px;
  }
}


/* DarkMoon Edit 1.1 — capas, fragmentos y animaciones */
.media-item .media-overlay-add{
 background:#36264e;border:1px solid #8764a9;border-radius:7px;color:#e4ccff;
 flex:0 0 26px;height:26px;font-size:17px;display:grid;place-items:center
}
.media-item .media-overlay-add:hover{background:#654292;color:#fff}
.media-item .media-add{font-size:16px}
.overlay-add-btn{background:linear-gradient(135deg,#473363,#2b2449);border-color:#8563b0;color:#e8cfff}
.overlay-add-btn:hover{border-color:#c09cff;background:#6d4b96}
.cut-action-btn{background:#283040;border-color:#546179;color:#c3d8ff}
.cut-action-btn:hover{background:#394866;border-color:#899ddd}
.overlay-row .track-label{background:#20182d}
.overlay-symbol{color:#e1a5ff;font-size:17px}
.timeline-clip.overlay-clip{
 background:linear-gradient(100deg,#724082,#41244d);border-color:#d18bef;color:#f8e5ff;
 box-shadow:inset 0 0 18px #ecb0ff1c
}
.timeline-clip.overlay-clip .trim-handle{background:#ecc0ffaa}
.timeline-clip.overlay-clip.selected{border-color:#f7d9ff;box-shadow:0 0 0 2px #dfa8ff65}
.timeline-clip.overlay-clip .clip-content::after{content:"▧";color:#ffb5ec;font-size:11px}
.full-select{display:block;width:100%;max-width:100%}
.overlay-properties{background:linear-gradient(120deg,#2d1e3a,#191925);border-radius:10px;
 padding:13px 12px;margin:14px 0;border:1px solid #684575}
.overlay-properties .group-title{margin-top:0;color:#e6c2ff}
.motion-check{display:flex;align-items:center;gap:9px;color:#d9c3ef;font-size:11px;margin-bottom:14px;line-height:1.5;cursor:pointer}
.motion-check input{accent-color:#b98cf0;width:16px;height:16px;cursor:pointer;flex-shrink:0}
.duplicate-btn{margin-top:9px}
#motionProperties{margin:16px 0;padding:14px;background:#1d1b2c;border:1px solid #3c3455;border-radius:10px}
#motionProperties .group-title{margin-top:0}
#motionProperties .range-fields{row-gap:12px}
#motionProperties .range-fields label{font-size:10px}
#motionProperties .range-fields input{padding:8px;margin-top:6px}
@media(min-width:721px){
 .timeline-shell{flex-basis:clamp(238px,35dvh,306px)}
 .timeline-content{min-height:192px}
 .timeline-scroll{overscroll-behavior:contain}
}
@media(max-width:1100px){
 .timeline-top .timeline-sub,.timeline-top .zoom-label{display:none}
 .timeline-top .timeline-actions{gap:5px}
 .timeline-top .btn-tiny{font-size:10px;padding:5px 8px}
 .timeline-top .timeline-actions input{width:61px}
}
@media(max-width:720px){
 .timeline-shell{height:305px;min-height:305px}
 .timeline-top{min-height:53px;height:53px;gap:9px}
 .timeline-actions{min-width:max-content}
 .timeline-top{overflow-x:auto;scrollbar-width:thin}
 .timeline-top .timeline-title{font-size:11px}
 .timeline-top #addMediaTimeline{display:none}
 .timeline-top #timelineZoom,.timeline-top .action-divider{display:none}
 .timeline-actions .btn-tiny{padding:5px 9px}
}