:root{--green:#16a34a;--green-50:#f0fdf4;--green-100:#dcfce7;--green-600:#16a34a;--green-700:#15803d;--dark:#0f172a;--dark-2:#1e293b;--muted:#64748b;--muted-2:#94a3b8;--line:#e2e8f0;--line-2:#cbd5e1;--bg:#f8fafc;--bg-2:#f1f5f9;--danger:#dc2626;--warn:#d97706;--info:#2563eb;--success:#16a34a;--warn-bg:#fffbeb;--warn-border:#fcd34d;--error-bg:#fef2f2;--error-border:#fecaca;--info-bg:#eff6ff;--info-border:#bfdbfe;--success-bg:#f0fdf4;--success-border:#86efac;--shadow-sm:0 1px 2px 0 rgba(15,23,42,.05);--shadow:0 1px 3px 0 rgba(15,23,42,.08),0 1px 2px -1px rgba(15,23,42,.06);--shadow-md:0 4px 6px -1px rgba(15,23,42,.08),0 2px 4px -2px rgba(15,23,42,.06);--shadow-lg:0 10px 15px -3px rgba(15,23,42,.08),0 4px 6px -4px rgba(15,23,42,.06);--shadow-xl:0 20px 25px -5px rgba(15,23,42,.08),0 8px 10px -6px rgba(15,23,42,.06);--radius-sm:9px;--radius:11px;--radius-md:12px;--radius-lg:14px;--radius-xl:18px}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--dark);background:var(--bg)}button,input,textarea{font:inherit}button{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .08s ease,opacity .18s ease}button:active:not(:disabled){transform:translateY(1px)}input,textarea,select{transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(22,163,74,.12)!important}input[type="checkbox"],input[type="radio"],input[type="color"],input[type="range"]{box-shadow:none!important}.hidden{display:none!important}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 5%;gap:34px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow-sm)}.brand{font-weight:800;font-size:21px;text-decoration:none;color:var(--dark);display:flex;align-items:center;gap:9px}.brand span{background:var(--green);color:white;padding:7px;border-radius:9px;box-shadow:0 2px 8px rgba(22,163,74,.28)}.topbar nav{display:flex;gap:8px;flex:1}.link{border:0;background:transparent;padding:10px 13px;color:var(--muted);cursor:pointer;border-radius:var(--radius-sm);font-weight:600}.link:hover{background:var(--bg-2);color:var(--dark)}.link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(22,163,74,.15)}.btn{border:0;border-radius:var(--radius);padding:11px 17px;background:var(--green);color:white;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);border:1px solid transparent}.btn:hover{background:var(--green-700);box-shadow:var(--shadow-md)}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(22,163,74,.35),var(--shadow-md)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn.ghost{background:white;color:var(--dark);border:1px solid var(--line);box-shadow:var(--shadow-sm)}.btn.ghost:hover{background:var(--bg-2);border-color:var(--line-2)}.btn.big{padding:14px 22px;border-radius:var(--radius-md)}.btn.small{padding:7px 11px;font-size:13px;border-radius:var(--radius-sm)}.btn.wide{width:100%}.btn.icon-btn{padding:7px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);font-size:16px;background:#fff;border:1px solid var(--line);color:var(--dark);box-shadow:var(--shadow-sm)}.btn.icon-btn:hover{background:var(--bg-2);border-color:var(--line-2)}.btn.icon-btn:disabled{opacity:.4;cursor:not-allowed;background:#fff}.btn.icon-btn.danger{color:var(--danger)}.btn.icon-btn.danger:hover{background:var(--error-bg);border-color:var(--error-border)}.hero{max-width:1180px;margin:auto;min-height:calc(100vh - 70px);display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;padding:70px 24px}.hero h1{font-size:54px;line-height:1.05;margin:14px 0 22px;letter-spacing:-2px}.hero p{font-size:19px;line-height:1.65;color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:800;color:var(--green)}.hero-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}.trust{margin-top:25px;color:var(--muted);font-size:14px}.hero-card{background:#fff;padding:15px;border-radius:var(--radius-xl);box-shadow:0 24px 70px rgba(15,23,42,.12);border:1px solid var(--line)}.hero-card svg{width:100%;display:block}.fake-toolbar{padding:8px 10px;background:var(--dark);color:#fff;border-radius:var(--radius-sm) var(--radius-sm) 0 0;font-size:13px}.section{max-width:1180px;margin:auto;padding:70px 24px}.section h2{font-size:38px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards article,.project-card{background:white;border:1px solid var(--line);padding:24px;border-radius:var(--radius-lg);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}.cards article:hover,.project-card:hover{box-shadow:var(--shadow-lg);border-color:var(--line-2)}.cards article b{font-size:18px}.cards p{color:var(--muted);line-height:1.5}.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.project-card h3{margin:0 0 7px}.project-card p,.project-card small{color:var(--muted)}.project-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}.danger{color:var(--danger)!important}.modal{position:fixed;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;padding:20px;animation:modalFade .2s ease}@keyframes modalFade{from{opacity:0}to{opacity:1}}.modal-card{width:min(520px,100%);background:white;border-radius:var(--radius-xl);padding:28px;position:relative;box-shadow:var(--shadow-xl);border:1px solid var(--line);animation:modalSlideUp .25s cubic-bezier(.16,1,.3,1)}@keyframes modalSlideUp{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-card.wide{width:min(820px,100%)}.modal-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;cursor:pointer;color:var(--muted);width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);transition:background-color .15s ease,color .15s ease}.modal-x:hover{background:var(--bg-2);color:var(--dark)}.modal-x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(22,163,74,.2)}.modal-card label,.properties label{display:block;font-weight:700;font-size:13px;margin:14px 0}.modal-card input,.modal-card textarea,.properties input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:6px;background:#fff}.modal-card input:focus,.modal-card textarea:focus,.properties input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.12)}.modal-card textarea{resize:vertical;min-height:90px;font-family:inherit}.modal-card select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:6px;background:#fff;font:inherit}.modal-actions{display:flex;gap:10px;margin-top:22px;justify-content:flex-end;flex-wrap:wrap}.modal-actions .btn{flex:0 0 auto}.modal-title{font-size:20px;font-weight:800;margin:0 0 6px;color:var(--dark)}.modal-sub{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5}.error{color:var(--danger);min-height:24px;margin:8px 0;font-size:13px;font-weight:600}.editor{height:calc(100vh - 70px);display:grid;grid-template-columns:58px 1fr 300px;background:var(--bg-2);gap:0}.tools{background:#fff;border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overflow-x:hidden;min-width:0}.tools button{height:42px;border:1px solid var(--line);background:#fff;border-radius:var(--radius-sm);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dark-2);box-shadow:var(--shadow-sm);position:relative;transition:all .15s ease}.tools button:hover:not(:disabled){background:var(--bg-2);border-color:var(--line-2);box-shadow:var(--shadow)}.tools button.active{background:var(--green-100);border-color:var(--green);color:var(--green-700);box-shadow:0 0 0 3px rgba(22,163,74,.1)}.tools button.active:hover:not(:disabled){background:var(--green-100);border-color:var(--green)}.tools button:disabled{opacity:.4;cursor:not-allowed;background:#fff}.tools button .tool-tip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--dark);color:#fff;padding:5px 9px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:30}.tools button:hover .tool-tip{opacity:1}.tools .tools-sep{height:1px;background:var(--line);margin:4px 2px;border-radius:1px}.tools .tool-icon{display:grid;place-items:center;width:22px;height:22px;line-height:1}.workspace{min-width:0;display:grid;grid-template-rows:54px 1fr 30px;background:var(--bg)}.editorbar{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:6px 12px;overflow:auto;min-height:54px;flex-wrap:nowrap;box-shadow:var(--shadow-sm)}.editorbar > *{flex-shrink:0}.editorbar input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;width:200px;font-weight:700;background:#fff}.editorbar #saveStatus{font-size:12px;color:var(--muted);margin-right:auto;white-space:nowrap;display:flex;align-items:center;gap:8px;font-weight:600;padding:0 6px}#canvasWrap{position:relative;overflow:hidden;background:#cbd5e1}#cadCanvas{display:block;background:white;cursor:crosshair}.statusbar{background:var(--dark);color:#cbd5e1;font-size:12px;display:flex;justify-content:space-between;padding:7px 14px;gap:14px;align-items:center;flex-wrap:wrap;font-weight:500}.statusbar .status-group{display:flex;gap:16px;align-items:center}.properties{background:#fff;border-left:1px solid var(--line);padding:16px;overflow:auto;min-width:0}.properties h3{margin-top:0;font-size:15px;font-weight:800;margin-bottom:10px;color:var(--dark)}.properties h4{margin:14px 0 8px;font-size:13px;font-weight:700;color:var(--dark);text-transform:uppercase;letter-spacing:.4px}.properties p,.properties ol{font-size:13px;color:var(--muted);line-height:1.55}.properties hr{border:0;border-top:1px solid var(--line);margin:18px 0}.prop-section{margin-bottom:16px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg)}.prop-section > :first-child{margin-top:0}/* ======= 1) Botones undo/redo disabled + iconos tools ======= */.tools .btn-undo,.tools .btn-redo{font-weight:700;font-size:16px}.tools .btn-undo:disabled,.tools .btn-redo:disabled{opacity:.35;cursor:not-allowed;background:#f8fafc}.editorbar .btn-undo,.editorbar .btn-redo{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;box-shadow:var(--shadow-sm);color:var(--dark-2)}.editorbar .btn-undo:hover:not(:disabled),.editorbar .btn-redo:hover:not(:disabled){background:var(--bg-2);border-color:var(--line-2)}.editorbar .btn-undo:disabled,.editorbar .btn-redo:disabled{opacity:.4;cursor:not-allowed;background:#fff;box-shadow:none}.editorbar .btn-group{display:flex;gap:4px;background:var(--bg);padding:3px;border-radius:var(--radius);border:1px solid var(--line)}.editorbar .btn-group button{height:32px;padding:0 10px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);transition:all .15s ease}.editorbar .btn-group button.active{background:#fff;color:var(--dark);box-shadow:var(--shadow-sm)}.editorbar .btn-group button:hover:not(.active):not(:disabled){color:var(--dark)}/* ======= 2) Progress bar ======= */.progress-bar{width:100%;height:8px;background:var(--line-2);border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,23,42,.06)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--green-600),#22c55e);border-radius:999px;transition:width .35s cubic-bezier(.16,1,.3,1);min-width:0}.progress-fill.indeterminate{animation:progressSlide 1.3s ease-in-out infinite;background:linear-gradient(90deg,var(--green-600),#22c55e,var(--green-600));background-size:200% 100%}@keyframes progressSlide{0%{background-position:200% 0}100%{background-position:-200% 0}}.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}.progress-label b{color:var(--dark)}/* ======= 3) Toast container ======= */.toast-container{position:fixed;top:84px;right:20px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 40px);pointer-events:none}.toast{min-width:260px;max-width:380px;background:#fff;border-radius:var(--radius-md);padding:13px 16px 13px 14px;box-shadow:var(--shadow-lg);border-left:4px solid var(--line-2);display:flex;align-items:flex-start;gap:12px;pointer-events:auto;animation:toastIn .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}@keyframes toastIn{from{opacity:0;transform:translateX(22px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}.toast.leaving{animation:toastOut .22s ease forwards}@keyframes toastOut{to{opacity:0;transform:translateX(22px) scale(.97)}}.toast .toast-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:15px;font-weight:800;line-height:1}.toast .toast-body{flex:1;min-width:0}.toast .toast-title{font-size:13px;font-weight:800;margin:0 0 3px;color:var(--dark)}.toast .toast-msg{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}.toast .toast-close{position:absolute;top:8px;right:8px;border:0;background:transparent;cursor:pointer;color:var(--muted-2);width:22px;height:22px;display:grid;place-items:center;border-radius:6px;font-size:16px;line-height:1}.toast .toast-close:hover{background:var(--bg-2);color:var(--dark)}.toast.success{border-left-color:var(--success)}.toast.success .toast-icon{background:var(--success-bg);color:var(--success)}.toast.warn{border-left-color:var(--warn)}.toast.warn .toast-icon{background:var(--warn-bg);color:var(--warn)}.toast.error{border-left-color:var(--danger)}.toast.error .toast-icon{background:var(--error-bg);color:var(--danger)}.toast.info{border-left-color:var(--info)}.toast.info .toast-icon{background:var(--info-bg);color:var(--info)}/* ======= 4) Dropdown menu (.menu-wrap + .menu-btn + .menu-panel) ======= */.menu-wrap{position:relative;display:inline-block}.menu-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:13px;font-weight:700;color:var(--dark);box-shadow:var(--shadow-sm);white-space:nowrap}.menu-btn:hover{background:var(--bg-2);border-color:var(--line-2)}.menu-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(22,163,74,.2),var(--shadow-sm)}.menu-btn .menu-caret{font-size:10px;color:var(--muted);transition:transform .18s ease}.menu-wrap.open .menu-btn .menu-caret{transform:rotate(180deg)}.menu-wrap.open .menu-btn{background:var(--bg-2)}.menu-panel{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;max-width:320px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:6px;box-shadow:var(--shadow-xl);z-index:60;display:none;animation:menuIn .18s cubic-bezier(.16,1,.3,1)}@keyframes menuIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.menu-wrap.open .menu-panel{display:block}.menu-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--dark);width:100%;text-align:left}.menu-item:hover{background:var(--bg-2);color:var(--dark)}.menu-item:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(22,163,74,.25)}.menu-item .menu-icon{width:20px;height:20px;display:grid;place-items:center;font-size:14px;flex-shrink:0;color:var(--muted)}.menu-item.danger{color:var(--danger)}.menu-item.danger:hover{background:var(--error-bg);color:var(--danger)}.menu-item.danger .menu-icon{color:var(--danger)}.menu-sep{height:1px;background:var(--line);margin:5px 6px;border-radius:1px}.menu-shortcut{margin-left:auto;font-size:11px;color:var(--muted-2);font-weight:600;letter-spacing:.3px}.menu-item-label{flex:1}/* ======= 5) Background controls extra: grid 2 cols + num-small + labels muted ======= */.background-controls{display:grid;gap:10px}.background-controls .bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}.background-controls .bg-grid.full{grid-template-columns:1fr}.background-controls label{font-size:12px;font-weight:700;color:var(--dark);margin:0;display:block}.background-controls label small.label-muted{display:block;margin-top:3px;font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.1px}.background-controls input[type="range"]{width:100%;height:6px;margin-top:4px;appearance:none;-webkit-appearance:none;background:var(--line-2);border-radius:999px;outline:none;padding:0;border:0}.background-controls input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 1px 3px rgba(15,23,42,.25),0 0 0 1px rgba(22,163,74,.4);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;margin-top:0}.background-controls input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 4px rgba(22,163,74,.18)}.background-controls input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 1px 3px rgba(15,23,42,.25),0 0 0 1px rgba(22,163,74,.4);cursor:pointer}.background-controls input[type="number"],.background-controls input.num-small{width:100%;padding:7px 9px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;font-size:12.5px;font-weight:600;color:var(--dark);margin-top:4px}.background-controls .num-small{font-variant-numeric:tabular-nums}.background-controls .bg-row{display:flex;align-items:center;gap:8px;margin-top:2px}.background-controls .bg-row input[type="number"]{flex:1;margin-top:0}.background-controls .bg-row span.unit{font-size:12px;color:var(--muted);font-weight:600;flex-shrink:0}.background-controls .bg-preview{height:60px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:4px;background:#fff;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,23,42,.04)}.background-controls .bg-preview canvas{width:100%;height:100%;display:block}/* ======= 6) Layer row completa ======= */.layers-panel{display:grid;gap:8px}.layer-row{display:grid;grid-template-columns:auto auto auto 54px 1fr auto auto auto auto;gap:6px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;position:relative}.layer-row:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}.layer-row.active-layer{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.1),var(--shadow-sm);background:var(--green-50)}.layer-row label{display:flex;align-items:center;gap:6px;margin:0}.layer-row small{color:#64748b}.layer-row .layer-check{width:17px;height:17px;cursor:pointer;accent-color:var(--green);border-radius:4px}.layer-row .layer-icon{width:18px;height:18px;display:grid;place-items:center;font-size:13px;color:var(--muted);cursor:pointer;border-radius:6px;transition:background-color .12s ease,color .12s ease}.layer-row .layer-icon:hover{background:var(--bg-2);color:var(--dark)}.layer-row .layer-icon.locked{color:var(--warn)}.layer-row input[type="color"]{width:28px;height:26px;padding:0;border:1px solid var(--line-2);border-radius:7px;cursor:pointer;background:#fff;appearance:none;-webkit-appearance:none;overflow:hidden}.layer-row input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}.layer-row input[type="color"]::-webkit-color-swatch{border:0;border-radius:4px}.layer-row input[type="color"]::-moz-color-swatch{border:0;border-radius:4px}.layer-row .num-grosor{width:100%;padding:5px 7px;border:1px solid var(--line-2);border-radius:7px;font-size:11.5px;font-weight:600;background:#fff;color:var(--dark);text-align:center;font-variant-numeric:tabular-nums}.layer-row .layer-name{padding:6px 9px;border:1px solid transparent;background:transparent;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--dark);width:100%;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:text}.layer-row .layer-name:hover{border-color:var(--line-2);background:#fff}.layer-row .layer-name:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(22,163,74,.12);outline:none}.layer-row input[type="range"].layer-opacity{width:100%;min-width:60px;height:4px;margin:0;appearance:none;-webkit-appearance:none;background:var(--line-2);border-radius:999px;outline:none;border:0;padding:0}.layer-row input[type="range"].layer-opacity::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--muted);border:2px solid #fff;box-shadow:0 1px 2px rgba(15,23,42,.3);cursor:pointer}.layer-row input[type="range"].layer-opacity::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--muted);border:2px solid #fff}.layer-row .layer-btn{width:26px;height:26px;padding:0;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;border-radius:7px;cursor:pointer;font-size:12px;font-weight:800;color:var(--muted);line-height:1;transition:all .12s ease}.layer-row .layer-btn:hover:not(:disabled){background:var(--bg-2);color:var(--dark);border-color:var(--line-2)}.layer-row .layer-btn:disabled{opacity:.35;cursor:not-allowed}.layer-row .layer-btn.del-btn:hover{background:var(--error-bg);color:var(--danger);border-color:var(--error-border)}.layers-empty{text-align:center;padding:22px 14px;color:var(--muted);font-size:12.5px;border:1px dashed var(--line-2);border-radius:var(--radius-md);background:var(--bg)}.layers-empty b{display:block;color:var(--dark);margin-bottom:4px;font-size:13px}/* ======= 7) Status bar saveStatus dots ======= */#saveStatus{display:flex;align-items:center;gap:8px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;position:relative}.dot::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;animation:dotPulse 1.6s ease-in-out infinite}.dot-saved{background:var(--success);box-shadow:0 0 0 2px rgba(22,163,74,.14)}.dot-pending{background:var(--warn);box-shadow:0 0 0 2px rgba(217,119,6,.14)}.dot-pending::after{background:var(--warn);animation:dotPulse 1.2s ease-in-out infinite}.dot-error{background:var(--danger);box-shadow:0 0 0 2px rgba(220,38,38,.14)}.dot-error::after{background:var(--danger);animation:dotPulse 1s ease-in-out infinite}@keyframes dotPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}.status-text{font-size:12px;font-weight:600}.status-text.saved{color:var(--success)}.status-text.pending{color:var(--warn)}.status-text.error{color:var(--danger)}/* ======= 8) Modales: calibrate, vectorize, detectLots, versions ======= */.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}.two-col .col-full{grid-column:1 / -1}.calibrate-preview{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;min-height:220px;position:relative}.calibrate-preview canvas{display:block;max-width:100%;max-height:300px}.calibrate-preview .preview-empty{color:var(--muted);font-size:13px;padding:24px;text-align:center}.calibrate-preview .preview-label{position:absolute;top:8px;left:8px;background:var(--dark);color:#fff;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.3px}.slider-row{display:grid;grid-template-columns:90px 1fr 52px;gap:10px;align-items:center;margin:10px 0}.slider-row label{font-size:12px;font-weight:700;color:var(--dark);margin:0}.slider-row input[type="range"]{width:100%;height:6px;appearance:none;-webkit-appearance:none;background:var(--line-2);border-radius:999px;outline:none;border:0;padding:0;margin:0}.slider-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 1px 3px rgba(15,23,42,.25),0 0 0 1px rgba(22,163,74,.4);cursor:pointer}.slider-row input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 1px 3px rgba(15,23,42,.25)}.slider-row .slider-val{padding:5px 7px;border:1px solid var(--line-2);border-radius:7px;font-size:12px;font-weight:700;background:#fff;text-align:center;font-variant-numeric:tabular-nums;color:var(--dark)}.vectorize-preview{grid-column:1 / -1;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:#0b1220;min-height:260px;position:relative;box-shadow:var(--shadow-sm)}.vectorize-preview canvas{width:100%;height:100%;display:block}.vectorize-preview .preview-tabs{position:absolute;top:10px;left:10px;display:flex;gap:4px;background:rgba(15,23,42,.85);padding:3px;border-radius:8px;backdrop-filter:blur(6px)}.vectorize-preview .preview-tabs button{padding:5px 10px;border:0;background:transparent;color:#cbd5e1;border-radius:6px;font-size:11.5px;font-weight:700;cursor:pointer}.vectorize-preview .preview-tabs button.active{background:#fff;color:var(--dark)}.vectorize-stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}.vectorize-stats .stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;text-align:center}.vectorize-stats .stat b{display:block;font-size:17px;color:var(--dark);font-weight:800;margin-bottom:2px;font-variant-numeric:tabular-nums}.vectorize-stats .stat span{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.2px;text-transform:uppercase}.detect-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.detect-grid .full{grid-column:1 / -1}.detect-grid label{font-size:12px;font-weight:700;color:var(--dark);margin:0 0 5px;display:block}.detect-grid label small.muted-label{display:block;margin-top:2px;font-weight:500;color:var(--muted);font-size:11px}.detect-grid input[type="number"]{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dark)}.detect-info{grid-column:1 / -1;padding:11px 13px;background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--radius-sm);color:#1e3a8a;font-size:12.5px;line-height:1.45;font-weight:500;display:flex;gap:10px;align-items:flex-start}.detect-info b{color:#1e40af}.versions-list{display:grid;gap:9px;max-height:420px;overflow:auto;padding-right:4px;margin-top:6px}.version-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}.version-item:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}.version-item.current{border-color:var(--green);background:var(--green-50);box-shadow:0 0 0 3px rgba(22,163,74,.08)}.version-item .ver-badge{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--bg-2);display:grid;place-items:center;font-weight:800;color:var(--dark);font-size:14px;flex-shrink:0;border:1px solid var(--line)}.version-item.current .ver-badge{background:var(--green);color:#fff;border-color:var(--green)}.version-item .ver-info{min-width:0}.version-item .ver-name{font-weight:800;font-size:13.5px;color:var(--dark);margin:0 0 3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.version-item .ver-name .ver-tag{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--bg-2);color:var(--muted);letter-spacing:.2px}.version-item.current .ver-name .ver-tag{background:var(--green);color:#fff}.version-item .ver-meta{font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;font-weight:500}.version-item .ver-meta b{color:var(--dark);font-weight:700}.version-item .ver-actions{display:flex;gap:6px;flex-shrink:0}.versions-empty{padding:28px 18px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--line-2);border-radius:var(--radius-md);background:var(--bg)}.versions-empty b{display:block;color:var(--dark);font-size:14px;margin-bottom:4px}/* ======= 9) Modal recovery ======= */.recovery-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.recovery-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),#22c55e,var(--warn))}.recovery-card.recover-warn::before{background:linear-gradient(90deg,var(--warn),#f59e0b,var(--danger))}.recovery-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.recovery-icon{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:22px;flex-shrink:0}.recovery-icon.ok{background:var(--success-bg);color:var(--success)}.recovery-icon.warn{background:var(--warn-bg);color:var(--warn)}.recovery-icon.bad{background:var(--error-bg);color:var(--danger)}.recovery-title{font-size:16px;font-weight:800;margin:0;color:var(--dark)}.recovery-sub{font-size:12.5px;color:var(--muted);margin:3px 0 0;line-height:1.45}.recovery-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.recovery-stats .rs{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;text-align:center}.recovery-stats .rs b{display:block;font-size:18px;font-weight:800;color:var(--dark);font-variant-numeric:tabular-nums;margin-bottom:2px}.recovery-stats .rs span{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.2px}.recovery-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.recovery-list li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);font-size:12.5px;font-weight:600;color:var(--dark)}.recovery-list li .st{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex-shrink:0;font-weight:900;color:#fff}.recovery-list li.ok .st{background:var(--success)}.recovery-list li.warn .st{background:var(--warn)}.recovery-list li.err .st{background:var(--danger)}/* ======= 10) Responsive: no romper editor ======= */@media(max-width:1100px){.two-col{grid-template-columns:1fr}.detect-grid{grid-template-columns:1fr}.vectorize-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.hero{grid-template-columns:1fr}.hero h1{font-size:40px}.cards,.project-grid{grid-template-columns:1fr 1fr}.topbar nav{display:none}.editor{grid-template-columns:50px 1fr 0}.editor .properties{display:none}.editor.properties-open{grid-template-columns:50px 1fr 280px}.editor.properties-open .properties{display:block}.toast-container{top:74px;right:12px;left:12px}.toast{min-width:0;max-width:100%}.workspace{grid-template-rows:52px 1fr 28px}.editorbar{gap:5px;padding:5px 8px}.editorbar input{width:150px}.layer-row{grid-template-columns:auto auto auto 46px 1fr auto auto;gap:4px;padding:7px 8px}.layer-row .layer-btn.opacity-btn{display:none}}@media(max-width:680px){.editor{grid-template-columns:46px 1fr 0}.editor.properties-open{grid-template-columns:46px 1fr 1fr;min-width:0}.modal-card{padding:20px;border-radius:var(--radius-lg)}.recovery-stats{grid-template-columns:1fr 1fr}.vectorize-stats{grid-template-columns:1fr 1fr}.version-item{grid-template-columns:auto 1fr;gap:10px}.version-item .ver-actions{grid-column:1 / -1;justify-content:flex-end}}@media(max-width:600px){.cards,.project-grid{grid-template-columns:1fr}.hero{padding-top:40px}.hero h1{font-size:35px}.topbar{padding:0 12px;gap:16px}.editorbar{gap:4px;padding:4px 6px}.editorbar input{width:120px;font-size:12.5px;padding:7px 8px}.tools{padding:8px 5px;gap:5px}.tools button{height:38px;width:36px;font-size:16px}.tools button .tool-tip{display:none}.layer-row{grid-template-columns:auto auto auto 1fr auto auto;gap:4px}.layer-row .num-grosor{display:none}.background-controls .bg-grid{grid-template-columns:1fr}.modal-card.wide{width:100%}.calibrate-preview{min-height:180px}.two-col{gap:12px}.detect-grid{gap:10px}}@media(max-width:460px){.topbar{height:60px;padding:0 10px}.brand{font-size:18px}.brand span{padding:6px}.btn.big{padding:12px 18px}.section{padding:48px 16px}.editor{height:calc(100vh - 60px);grid-template-columns:42px 1fr 0}.workspace{grid-template-rows:48px 1fr 26px}.statusbar{padding:5px 10px;font-size:11px;gap:8px}.modal-card{padding:18px 16px;border-radius:var(--radius-md)}.modal-x{right:10px;top:10px}.version-item{padding:10px}.layer-row{padding:6px 7px}.toast-container{top:66px;right:8px;left:8px}.toast{padding:11px 13px 11px 11px;gap:10px}}/* ======= 11) Hover/focus/transitions extra (estilo SaaS premium) ======= */.card-hover{transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}.card-hover:hover{box-shadow:var(--shadow-lg);border-color:var(--line-2);transform:translateY(-1px)}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--dark)}.chip.green{background:var(--green-50);border-color:var(--green-100);color:var(--green-700)}.chip.warn{background:var(--warn-bg);border-color:var(--warn-border);color:#92400e}.chip.error{background:var(--error-bg);border-color:var(--error-border);color:#991b1b}.chip.info{background:var(--info-bg);border-color:var(--info-border);color:#1e40af}.input-group{display:flex;gap:0}.input-group > *{border-radius:0!important;margin:0!important}.input-group > :first-child{border-top-left-radius:var(--radius-sm)!important;border-bottom-left-radius:var(--radius-sm)!important}.input-group > :last-child{border-top-right-radius:var(--radius-sm)!important;border-bottom-right-radius:var(--radius-sm)!important}.input-group > * + *{margin-left:-1px!important}.divider-y{width:1px;background:var(--line);align-self:stretch}.help-text{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45;font-weight:500}.help-text b{color:var(--dark)}.kbd{display:inline-block;padding:2px 6px;font-size:10.5px;font-weight:800;color:var(--dark);background:var(--bg);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2px}.skeleton{background:linear-gradient(90deg,var(--bg-2) 0%,#e2e8f0 50%,var(--bg-2) 100%);background-size:200% 100%;animation:skeleton 1.3s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}.fade-in{animation:fadeIn .22s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.slide-up{animation:slideUp .28s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.scroll-thin::-webkit-scrollbar{width:8px;height:8px}.scroll-thin::-webkit-scrollbar-track{background:transparent}.scroll-thin::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}.scroll-thin::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}.muted{color:var(--muted);font-size:.9rem}.tools button{min-width:38px}.properties select{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--dark)}.compact-select{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:7px 9px;background:#fff;color:var(--dark);max-width:92px;font:inherit;font-size:12.5px;font-weight:600}.side-lengths{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:#475569}.side-lengths b{display:block;margin-bottom:6px;color:var(--dark);font-size:12.5px;font-weight:800}.side-lengths .side-row{display:flex;justify-content:space-between;padding:3px 0;font-weight:500}.side-lengths .side-row b{font-weight:700;color:var(--dark);margin:0;display:inline}.password-wrap{position:relative;display:block;margin-top:6px}.password-wrap input{width:100%;padding:11px 44px 11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);margin:0;transition:border-color .15s ease,box-shadow .15s ease;background:#fff;font-weight:600}.password-wrap input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.12)}.eye-btn{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;color:var(--muted);height:34px;width:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:color .15s ease,background .15s ease}.eye-btn:hover{color:var(--dark);background:var(--bg-2)}.eye-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
/* ============================================================
   LoteCAD v2.1 — Precisión / trazado dinámico
   ============================================================ */

.compact-select-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}
.compact-select-label input {
  outline: none;
  border: 0;
  color: inherit;
}
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
}
.form-row > b {
  color: #334155;
  font-size: 12px;
}
.check-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #475569;
}

/* ======= canvas overlay: dynamic measurement label ======= */
.meas-label {
  position: absolute;
  pointer-events: none;
  z-index: 40;
  transform: translate(16px, -100%);
  margin-top: -14px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(2px);
  min-width: 130px;
  max-width: 240px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.meas-label.hidden { display: none; }
.meas-row { margin: 0; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meas-len {
  font-size: 15px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.2px;
}
.meas-sub {
  font-size: 11px;
  color: #cbd5e1;
  opacity: 0.95;
}
.meas-target {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(148, 163, 184, 0.3);
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
}
.meas-target.ok { color: #4ade80; }
.meas-target.diff-excess { color: #fca5a5; }
.meas-snap {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed rgba(148, 163, 184, 0.3);
  font-size: 11px;
  color: #60a5fa;
  font-weight: 600;
}
.meas-snap.snap-on { color: #22d3ee; }

/* ======= snap mark (visual cue when snapping) ======= */
.snap-mark {
  position: absolute;
  pointer-events: none;
  z-index: 41;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border: 2px solid #22d3ee;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.18);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2), 0 0 10px rgba(34, 211, 238, 0.7);
  animation: snap-pop 0.18s ease-out;
}
.snap-mark.hidden { display: none; }
@keyframes snap-pop {
  0% { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ======= direct input during drawing (AutoCAD-style) ======= */
.direct-input {
  position: absolute;
  z-index: 45;
  pointer-events: auto;
  transform: translate(16px, 14px);
}
.direct-input.hidden { display: none; }
.di-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #2563eb;
  border-radius: 6px;
  padding: 3px 6px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
  font-size: 13px;
}
.di-field span {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
#diInput {
  border: none;
  outline: none;
  background: #eff6ff;
  color: #1e40af;
  width: 78px;
  padding: 3px 6px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 4px;
  font-weight: 600;
}
.di-hint {
  margin-top: 4px;
  padding: 3px 6px;
  font-size: 10.5px;
  color: #fff;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 5px;
  letter-spacing: 0.2px;
}

/* ======= polygon live-edit info (vertex drag) ======= */
.poly-live {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  transform: translate(16px, 16px);
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e8f0;
  border-left: 3px solid #16a34a;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  font-size: 12px;
  min-width: 170px;
}
.poly-live.hidden { display: none; }
.pl-title {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}
.pl-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: #475569;
}
.pl-row b { color: #0f172a; font-weight: 600; }
.pl-error {
  color: #dc2626 !important;
  font-weight: 700 !important;
  background: #fef2f2;
  border-radius: 5px;
  padding: 4px 6px !important;
  margin-top: 4px;
}

/* ======= line correction panel (Sec 17) ======= */
.line-edit-panel h4 {
  margin: 6px 0 8px 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

/* ======= cursor variants ======= */
.cursor-crosshair { cursor: crosshair !important; }
.cursor-grab      { cursor: grab !important; }
.cursor-grabbing  { cursor: grabbing !important; }
.cursor-ew-resize { cursor: ew-resize !important; }
.cursor-nwse-resize { cursor: nwse-resize !important; }
.cursor-move      { cursor: move !important; }

/* ======= orthogonal/polar guide line ======= */
.polar-guide {
  stroke-dasharray: 4 5;
  opacity: 0.7;
}

/* ======= responsive tweaks ======= */
@media (max-width: 980px) {
  .editorbar .compact-select-label input { width: 60px !important; }
  .poly-live { min-width: 140px; font-size: 11px; }
  .meas-label { min-width: 110px; font-size: 11px; }
}
@media (max-width: 680px) {
  .editorbar .compact-select,
  .editorbar .compact-select-label,
  .editorbar #orthoBtn { display: none; }
}

/* ============================================================
   LoteCAD v2.2 — Rediseño UI Profesional (SaaS Premium)
   Mejoras: toolbar agrupado, tools SVG, capas ordenadas
   ============================================================ */

/* ---------- 1) EDITOR (layout general) ---------- */
.editor {
  grid-template-columns: 66px 1fr 340px;
  background: #eef2f7;
  background-image:
    radial-gradient(1200px 500px at 110% -10%, rgba(22,163,74,.06), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(37,99,235,.05), transparent 60%);
}
.workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #eef2f7;
}
.workspace > .editorbar { flex: 0 0 auto; }
.workspace > .topnav-row2 { flex: 0 0 auto; }
.workspace > .contextbar { flex: 0 0 auto; }
.workspace > .editor-progress { flex: 0 0 auto; }
.workspace > #canvasWrap { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.workspace > .statusbar { flex: 0 0 auto; }

/* ---- topnav-row2: zoom + favs compactos al lado ---- */
.topnav-row2 {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 6px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  min-height: 46px;
  max-height: 52px;
}
.topnav-row2 > .zoom-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  min-height: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0 6px;
  background: linear-gradient(180deg, #fff, #f1f5f9);
}
.topnav-row2 > .favsbar {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 10px;
  height: 34px;
  min-height: 0;
  background: linear-gradient(180deg, #fffbf0, #fff9e6);
  border: 1px solid #fde68a;
}
.zoom-btn, .zoom-pct, .zoom-fit, .zoom-sep {
  height: 28px;
  line-height: 26px;
  padding: 0 10px;
  font-size: 13px;
  min-width: 0;
  min-height: 0;
  white-space: nowrap;
}
.zoom-btn {
  padding: 0 8px;
  font-weight: 700;
  min-width: 30px;
  width: 30px;
  text-align: center;
}
.zoom-pct {
  padding: 0 10px !important;
  font-weight: 600;
  color: #0f172a;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.zoom-pct span { font-weight: 700; font-size: 12px; }
.zoom-sep {
  width: 1px;
  background: #cbd5e1;
  margin: 0 2px;
  padding: 0 !important;
  min-width: 1px;
  height: 18px;
}
.zoom-fit {
  padding: 0 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #1d4ed8;
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.15);
}
.zoom-fit:hover { background: rgba(29,78,216,.12); }
.zoom-fit:active { transform: translateY(0); }

/* ---- FAVSBAR super compacta 40px max ---- */
.favsbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  max-height: 42px;
  padding: 4px 10px;
  background: linear-gradient(90deg, #fffbf0, #fff9e6);
  border: 1px solid #fde68a;
  border-bottom: 1px solid #fcd34d;
  border-radius: 10px;
  overflow: hidden;
}
.favsbar .favs-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #92400e;
  background: #fde68a;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.favsbar .favs-track {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: #fbbf24 transparent;
}
.favsbar .favs-track::-webkit-scrollbar { height: 4px; }
.favsbar .favs-track::-webkit-scrollbar-thumb { background: #fbbf24; border-radius: 999px; }
.favsbar .fav-btn {
  height: 28px;
  min-height: 0;
  padding: 0 9px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #fcd34d;
  background: #fff;
  border-radius: 8px;
  cursor: grab;
  flex: 0 0 auto;
  color: #92400e;
  font-weight: 500;
  transition: none;
}
.favsbar .fav-btn:hover { background: #fef3c7; }
.favsbar .fav-btn.active { background: #fde68a; color: #78350f; border-color: #f59e0b; }
.favsbar .favs-empty { font-size: 11px; color: #a16207; padding: 0 8px; }
.favsbar .favs-more {
  height: 28px;
  padding: 0 9px;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  flex: 0 0 auto;
  margin-left: 4px;
  position: relative;
}
.favsbar .favs-more-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(146,64,14,.15);
  z-index: 50;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.favsbar .fav-btn.dragging { opacity: .4; }
.favsbar .fav-btn.drag-over { outline: 2px dashed #f59e0b; outline-offset: 1px; }

/* ---- CONTEXTBAR compacta 40px ---- */
.contextbar {
  display: flex;
  align-items: center;
  height: 40px;
  min-height: 40px;
  max-height: 44px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  gap: 10px;
}
.contextbar.compact { padding: 0 14px; }
.contextbar .context-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}
.contextbar .context-right { display: none; }
.context-tool-label {
  font-weight: 700;
  color: #0f172a;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #075985;
  white-space: nowrap;
}
.context-divider {
  width: 1px; height: 20px; background: #e2e8f0; }
.context-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.context-hint {
  font-size: 11px;
  color: #64748b;
  font-style: italic;
  padding-left: 2px;
}
#canvasWrap {
  background:
    linear-gradient(180deg, rgba(15,23,42,.02) 0%, transparent 100%),
    #cbd5e1;
  position: relative;
  min-height: 0;
}
#cadCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  touch-action: none;
}

/* ---------- 2) EDITORBAR (toolbar superior premium) ---------- */
.editorbar {
  min-height: 62px !important;
  height: 62px !important;
  padding: 8px 16px !important;
  gap: 10px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.04),
    0 1px 3px 0 rgba(15,23,42,.03),
    inset 0 -1px 0 0 rgba(15,23,42,.03) !important;
  position: relative;
}
.editorbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.07), transparent);
  pointer-events: none;
}

/* Grupo de botones (divisor visual) */
.eb-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  margin-right: 2px;
  border-right: 1px solid rgba(15,23,42,.08);
}
.eb-group:last-child {
  border-right: 0;
  padding-right: 0;
  margin-right: 0;
}

/* Botón editorbar premium */
.editorbar .btn.ghost.small,
.editorbar .btn.small {
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.04),
    inset 0 -1px 0 0 rgba(15,23,42,.04) !important;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease,
    transform .05s ease !important;
  white-space: nowrap;
  line-height: 1;
}
.editorbar .btn.ghost.small:hover:not(:disabled),
.editorbar .btn.small:hover:not(:disabled) {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow:
    0 3px 6px -1px rgba(15,23,42,.08),
    0 1px 2px -1px rgba(15,23,42,.05),
    inset 0 -1px 0 0 rgba(15,23,42,.04) !important;
}
.editorbar .btn.ghost.small:active:not(:disabled),
.editorbar .btn.small:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.04),
    inset 0 1px 1px 0 rgba(15,23,42,.06) !important;
}

/* Botón verde (Save / CTA) */
.editorbar .btn.small:not(.ghost) {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 2px 0 rgba(22,163,74,.25),
    inset 0 -1px 0 0 rgba(15,23,42,.2),
    inset 0 1px 0 0 rgba(255,255,255,.22) !important;
}
.editorbar .btn.small:not(.ghost):hover {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
  border-color: #14532d !important;
  box-shadow:
    0 4px 10px -2px rgba(22,163,74,.30),
    0 1px 2px -1px rgba(22,163,74,.20),
    inset 0 -1px 0 0 rgba(15,23,42,.22),
    inset 0 1px 0 0 rgba(255,255,255,.2) !important;
}

/* Botón con estado ON/OFF (Ajuste / Ortogonal) */
.editorbar .btn.toggle-on {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: #86efac !important;
  color: #15803d !important;
  box-shadow:
    0 0 0 3px rgba(22,163,74,.10),
    0 1px 2px 0 rgba(22,163,74,.12) !important;
  font-weight: 700 !important;
}
.editorbar .btn.toggle-off {
  opacity: .82;
}

/* Compact select premium */
.editorbar .compact-select,
.compact-select {
  height: 40px !important;
  padding: 0 30px 0 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background:
    #ffffff
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 10px center / 12px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.04),
    inset 0 -1px 0 0 rgba(15,23,42,.04) !important;
  transition: all .15s ease;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}
.editorbar .compact-select:hover,
.compact-select:hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
}
.editorbar .compact-select:focus,
.compact-select:focus {
  outline: none !important;
  border-color: #22c55e !important;
  background-color: #ffffff !important;
  box-shadow:
    0 0 0 3px rgba(22,163,74,.12),
    0 1px 2px 0 rgba(15,23,42,.04) !important;
}

/* Label compact (🎯 L.objetivo) */
.compact-select-label {
  height: 40px !important;
  padding: 0 12px 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.04),
    inset 0 -1px 0 0 rgba(15,23,42,.04) !important;
  transition: all .15s ease;
}
.compact-select-label:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}
.compact-select-label input {
  width: 86px !important;
  height: 26px !important;
  padding: 0 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  transition: all .15s ease;
}
.compact-select-label input:focus {
  outline: none !important;
  border-color: #22c55e !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(22,163,74,.15) !important;
}

/* Proyecto input */
.editorbar #projectName {
  height: 40px !important;
  width: 220px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all .15s ease;
}
.editorbar #projectName:hover {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
}
.editorbar #projectName:focus {
  outline: none !important;
  border-color: #22c55e !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}

/* SaveStatus badge */
.editorbar #saveStatus {
  height: 40px !important;
  padding: 0 14px !important;
  margin: 0 4px 0 2px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
  box-shadow: inset 0 -1px 0 0 rgba(15,23,42,.03);
}
.editorbar #saveStatus.saved {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: #86efac !important;
  color: #15803d !important;
  box-shadow: inset 0 -1px 0 0 rgba(22,163,74,.08);
}

/* Split button (Imagen ▾) */
.split-btn {
  display: inline-flex !important;
  align-items: stretch !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.04),
    inset 0 -1px 0 0 rgba(15,23,42,.04) !important;
  transition: all .15s ease;
}
.split-btn:hover {
  border-color: #cbd5e1 !important;
  box-shadow:
    0 3px 6px -1px rgba(15,23,42,.08),
    0 1px 2px -1px rgba(15,23,42,.05) !important;
}
.split-btn > button {
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
  transition: all .15s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.split-btn > button:hover:not(:disabled) {
  background: #f8fafc !important;
}
.split-btn > button:active:not(:disabled) {
  background: #f1f5f9 !important;
}
.split-btn > button + button {
  padding: 0 10px !important;
  border-left: 1px solid #e2e8f0 !important;
  font-size: 14px !important;
}

/* Dropdown menu (index.php: .dropdown-menu) */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  max-width: 280px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px;
  box-shadow:
    0 10px 15px -3px rgba(15,23,42,.08),
    0 4px 6px -4px rgba(15,23,42,.06),
    0 20px 40px -8px rgba(15,23,42,.12);
  z-index: 80;
  display: block;
  animation: menu-in .16s cubic-bezier(.16,1,.3,1);
}
.dropdown-menu.hidden { display: none !important; }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: all .12s ease;
}
.dropdown-item:hover {
  background: #f8fafc;
  color: #0f172a;
}
.dropdown-item.danger { color: #dc2626; }
.dropdown-item.danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* ---------- 3) TOOLS (barra vertical izquierda premium) ---------- */
.tools {
  width: 66px !important;
  min-width: 66px !important;
  padding: 14px 8px !important;
  gap: 7px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow:
    1px 0 2px 0 rgba(15,23,42,.03),
    inset -1px 0 0 0 rgba(15,23,42,.03) !important;
  overflow-x: hidden;
}
.tools button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  margin: 0 auto !important;
  border-radius: 11px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.04),
    inset 0 -1px 0 0 rgba(15,23,42,.04) !important;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease,
    transform .05s ease !important;
  position: relative;
}
.tools button::before {
  content: "";
  position: absolute;
  left: -8px; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background-color .15s ease;
}
.tools button:hover:not(:disabled) {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow:
    0 3px 6px -1px rgba(15,23,42,.08),
    0 1px 2px -1px rgba(15,23,42,.05) !important;
}
.tools button:active:not(:disabled) {
  transform: translateY(1px) !important;
}
.tools button.active {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
  border-color: #22c55e !important;
  color: #15803d !important;
  box-shadow:
    0 0 0 3px rgba(22,163,74,.12),
    0 1px 3px 0 rgba(22,163,74,.12) !important;
}
.tools button.active::before {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 1px 3px rgba(22,163,74,.40);
}

.tools .tools-sep {
  height: 2px !important;
  margin: 10px 8px 6px !important;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent) !important;
  border-radius: 2px !important;
}
.tools button .tool-tip {
  left: calc(100% + 14px) !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  background: rgba(15,23,42,.95) !important;
  color: #f8fafc !important;
  box-shadow:
    0 6px 16px -4px rgba(15,23,42,.25),
    0 3px 6px -3px rgba(15,23,42,.18) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease !important;
  transform: translateY(-50%) translateX(-4px) !important;
  z-index: 50;
}
.tools button .tool-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(15,23,42,.95);
  border-left: 1px solid rgba(148,163,184,.18);
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.tools button:hover .tool-tip {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* Undo / Redo estado disabled */
.tools button:disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
  background: #f8fafc !important;
}

/* ---------- 4) PROPERTIES (panel derecho) ---------- */
.properties {
  padding: 18px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow:
    -1px 0 2px 0 rgba(15,23,42,.03),
    inset 1px 0 0 0 rgba(15,23,42,.03) !important;
}
.properties h3 {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  margin: 4px 0 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.properties h3::before {
  content: "";
  width: 4px; height: 16px;
  border-radius: 4px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  box-shadow: 0 1px 2px rgba(22,163,74,.40);
}
.properties hr {
  border: 0 !important;
  border-top: 1px dashed rgba(148,163,184,.35) !important;
  margin: 18px 0 16px !important;
}

.prop-section {
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.03),
    inset 0 -1px 0 0 rgba(15,23,42,.03) !important;
}

/* ---------- 5) LAYERS PANEL (capas - REDISEÑO COMPLETO)
   Adaptado a las clases que REALMENTE renderiza el JS
   (líneas 1624-1651 de app.js — NO se toca el JS) ---------- */
.layers-panel {
  gap: 10px !important;
}

/* Redefinición TOTAL del layer-row (antes grid 9 cols mal) */
.layer-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
  box-shadow:
    0 1px 3px 0 rgba(15,23,42,.05),
    inset 0 -1px 0 0 rgba(15,23,42,.03) !important;
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
}
.layer-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: #e2e8f0;
  transition: background-color .18s ease, width .18s ease;
}
.layer-row:hover {
  border-color: #cbd5e1 !important;
  box-shadow:
    0 4px 8px -2px rgba(15,23,42,.08),
    0 2px 4px -3px rgba(15,23,42,.05),
    inset 0 -1px 0 0 rgba(15,23,42,.03) !important;
  transform: translateY(-1px);
}
.layer-row:hover::before {
  background: #cbd5e1;
}
.layer-row.active-layer {
  border-color: #22c55e !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
  box-shadow:
    0 0 0 3px rgba(22,163,74,.12),
    0 4px 12px -4px rgba(22,163,74,.20),
    inset 0 -1px 0 0 rgba(22,163,74,.06) !important;
  transform: translateY(-1px);
}
.layer-row.active-layer::before {
  width: 4px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  box-shadow: 1px 0 4px rgba(22,163,74,.40);
}

/* ===== LAYER-MAIN (fila superior: visibilidad + candado + color + nombre) ===== */
.layer-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 4px;
  flex-wrap: nowrap;
}

/* Label visibilidad (contiene checkbox real) */
.layer-visible {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px;
  transition: all .12s ease !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.03),
    inset 0 -1px 0 0 rgba(15,23,42,.03);
  position: relative;
}
.layer-visible:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
.layer-visible .layer-visible-cb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  opacity: 0 !important;
  cursor: pointer !important;
  accent-color: #22c55e !important;
  z-index: 2;
}
.layer-visible::before {
  content: "👁";
  font-size: 15px;
  line-height: 1;
  transition: all .12s ease;
  z-index: 1;
}
.layer-visible:has(.layer-visible-cb:not(:checked))::before {
  opacity: .35;
  filter: grayscale(.6);
  content: "🙈";
}

/* Botón candado */
.layer-lock.btn.ghost.small {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  flex-shrink: 0;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 2px 0 rgba(15,23,42,.03),
    inset 0 -1px 0 0 rgba(15,23,42,.03) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all .12s ease !important;
  margin: 0 !important;
  color: #0f172a !important;
}
.layer-lock.btn.ghost.small:hover {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}
.layer-lock.btn.ghost.small.locked-visual {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: #fbbf24 !important;
  color: #92400e !important;
  box-shadow:
    0 0 0 2px rgba(217,119,6,.08),
    inset 0 -1px 0 0 rgba(217,119,6,.08) !important;
}

/* Swatch color (input[type=color] directo) */
.layer-color {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #16a34a;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 1px 2px 0 rgba(15,23,42,.08) !important;
  transition: all .12s ease !important;
}
.layer-color:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 3px rgba(22,163,74,.12),
    0 1px 2px 0 rgba(15,23,42,.10) !important;
}
.layer-color::-webkit-color-swatch-wrapper { padding: 0 !important; }
.layer-color::-webkit-color-swatch {
  border: 0 !important;
  border-radius: 10px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.layer-color::-moz-color-swatch {
  border: 0 !important;
  border-radius: 10px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Nombre capa */
.layer-name-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: default;
}
.layer-name {
  width: 100% !important;
  min-width: 0 !important;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-family: inherit;
  cursor: text;
  transition: all .15s ease !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  height: 32px !important;
}
.layer-name:hover:not([readonly]) {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
}
.layer-name:focus {
  outline: none !important;
  border-color: #22c55e !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}
.layer-name[readonly] {
  opacity: 1 !important;
  background: transparent !important;
  cursor: default !important;
  border: 1px solid transparent !important;
}
.layer-name[readonly]:hover {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
  cursor: text !important;
}

/* ===== LAYER-CONTROLS (fila inferior: grosor + opacidad + ordenar + borrar) ===== */
.layer-controls {
  display: grid !important;
  grid-template-columns: 100px 1fr auto !important;
  gap: 8px 14px !important;
  padding: 10px 12px 4px !important;
  margin-left: 4px;
  border-top: 1px dashed rgba(148,163,184,.35) !important;
  align-items: center !important;
}

/* Labels (Grosor / Opacidad) */
.layer-thickness-label,
.layer-opacity-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: default !important;
  align-items: stretch !important;
}
.layer-thickness-label::before {
  content: "Grosor";
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: #64748b !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
}
.layer-opacity-label::before {
  content: "Opacidad";
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: #64748b !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
}

/* Input grosor numérico */
.layer-thickness {
  width: 100% !important;
  height: 30px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  border-radius: 9px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  font-family: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: all .15s ease !important;
  box-shadow: inset 0 -1px 0 0 rgba(15,23,42,.04);
  margin: 0 !important;
}
.layer-thickness:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}
.layer-thickness:focus {
  outline: none !important;
  border-color: #22c55e !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}

/* Opacidad: el label contiene input[number] + "%" */
.layer-opacity-label {
  display: grid !important;
  grid-template-columns: 1fr 56px !important;
  gap: 8px !important;
  align-items: end !important;
  position: relative !important;
}
.layer-opacity-label::before {
  grid-column: span 2 !important;
}
/* Convertimos el input[number] de opacidad en un "valor" y generamos slider via
   pseudo-element wrapper? No, no tenemos wrapper HTML.
   Solución simple: mostrar NUM + slider como background progreso + % inline */
.layer-opacity {
  grid-column: 2 !important;
  height: 30px !important;
  width: 100% !important;
  padding: 0 9px 0 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  border-radius: 9px !important;
  border: 1px solid #e2e8f0 !important;
  background:
    linear-gradient(90deg, rgba(22,163,74,.12) var(--op-pct, 100%), transparent var(--op-pct, 100%)),
    #ffffff !important;
  font-family: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: all .15s ease !important;
  box-shadow: inset 0 -1px 0 0 rgba(15,23,42,.04);
  margin: 0 !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.layer-opacity::-webkit-outer-spin-button,
.layer-opacity::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.layer-opacity:hover {
  border-color: #cbd5e1 !important;
  background:
    linear-gradient(90deg, rgba(22,163,74,.16) var(--op-pct, 100%), transparent var(--op-pct, 100%)),
    #f8fafc !important;
}
.layer-opacity:focus {
  outline: none !important;
  border-color: #22c55e !important;
  background:
    linear-gradient(90deg, rgba(22,163,74,.16) var(--op-pct, 100%), transparent var(--op-pct, 100%)),
    #ffffff !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}

/* Grupo ordenar capas + botones acciones */
.layer-order {
  grid-column: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.layer-order .layer-up,
.layer-order .layer-down {
  width: 28px !important;
  height: 26px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px 0 rgba(15,23,42,.03) !important;
  transition: all .12s ease !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  font-family: inherit !important;
}
.layer-order .layer-up:hover:not(:disabled),
.layer-order .layer-down:hover:not(:disabled) {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
.layer-order .layer-up:disabled,
.layer-order .layer-down:disabled {
  opacity: .3 !important;
  cursor: not-allowed !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

/* Botón renombrar (si existe en template) */
.layer-rename.btn.ghost.small {
  width: 30px !important;
  height: 26px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px 0 rgba(15,23,42,.03) !important;
  transition: all .12s ease !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.layer-rename.btn.ghost.small:hover {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-color: #bfdbfe !important;
}

/* Botón borrar capa */
.layer-delete.btn.ghost.small.error {
  width: 32px !important;
  height: 30px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 2px !important;
  border-radius: 9px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #64748b !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px 0 rgba(15,23,42,.03) !important;
  transition: all .12s ease !important;
  line-height: 1 !important;
}
.layer-delete.btn.ghost.small.error:hover {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%) !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
  box-shadow:
    0 0 0 2px rgba(220,38,38,.08),
    0 1px 2px 0 rgba(220,38,38,.08) !important;
}

/* Capas empty state */
.layers-empty {
  padding: 26px 18px !important;
  border-radius: 14px !important;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(148,163,184,.05) 10px 20px),
    linear-gradient(180deg, #ffffff, #fafbfc) !important;
  border: 1px dashed #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.02) !important;
  font-size: 12.5px !important;
}
.layers-empty b {
  color: #0f172a;
  font-size: 13px;
}

/* ---------- 6) STATUSBAR inferior premium ---------- */
.statusbar {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 18px !important;
  gap: 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  background:
    linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border-top: 1px solid rgba(15,23,42,.5) !important;
  box-shadow:
    0 -1px 2px 0 rgba(0,0,0,.08),
    inset 0 1px 0 0 rgba(255,255,255,.04) !important;
}
.statusbar .status-group {
  gap: 20px !important;
}
.statusbar #coords,
.statusbar #scaleInfo,
.statusbar #zoomInfo {
  font-variant-numeric: tabular-nums;
  padding: 0 10px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e2e8f0;
}
.statusbar #scaleInfo {
  padding: 0 12px;
  border-left: 1px solid rgba(148,163,184,.18);
  border-right: 1px solid rgba(148,163,184,.18);
}
.statusbar #scaleInfo.ok {
  color: #4ade80;
}
.statusbar #zoomInfo {
  font-weight: 700;
  color: #f8fafc;
}

/* ---------- 7) Background controls panel (ajustes imagen) ---------- */
.background-controls .bg-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148,163,184,.35);
}
.background-controls .bg-actions .btn.ghost.small {
  height: 32px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
  white-space: nowrap;
}
.background-controls .bg-actions .btn.ghost.small.wide {
  grid-column: span 3;
  margin-top: 4px;
}
.background-controls .bg-actions .btn.ghost.small.error {
  color: #dc2626 !important;
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}
.background-controls .bg-actions .btn.ghost.small.error:hover {
  background: #fee2e2 !important;
}

/* ---------- 8) Responsive tweaks rediseño ---------- */
@media (max-width: 1100px) {
  .editor { grid-template-columns: 66px 1fr 300px; }
}
@media (max-width: 900px) {
  .editor { grid-template-columns: 54px 1fr 0; }
  .tools { width: 54px !important; min-width: 54px !important; padding: 12px 6px !important; }
  .tools button { width: 42px !important; height: 42px !important; min-width: 42px !important; }
  .editor { height: calc(100vh - 70px); grid-template-columns: 54px 1fr 0; }
  .workspace { grid-template-rows: 58px 1fr 32px; }
  .editorbar { min-height: 58px !important; height: 58px !important; padding: 6px 10px !important; gap: 6px !important; }
}
@media (max-width: 600px) {
  .layer-row__bottom { grid-template-columns: 90px 1fr; }
  .layer-row { padding: 12px !important; gap: 8px !important; }
  .tools { width: 46px !important; min-width: 46px !important; }
  .tools button { width: 36px !important; height: 36px !important; min-width: 36px !important; font-size: 17px !important; }
}

/* =========================================================================
   R2) MENÚ HAMBURGUESA (Panel lateral deslizable)
   ========================================================================= */
.appmenu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s cubic-bezier(.2,.9,.3,1.2);
}
.appmenu-overlay:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}
.appmenu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 352px;
  max-width: 92vw;
  z-index: 9999;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right: 1px solid #e2e8f0;
  border-radius: 0 20px 20px 0;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 8px 24px rgba(15,23,42,.08),
    0 24px 60px rgba(15,23,42,.12),
    0 60px 140px rgba(15,23,42,.16);
  transform: translateX(-370px);
  transition: transform .32s cubic-bezier(.2,.9,.3,1.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.appmenu:not(.hidden) {
  transform: translateX(0);
}
.appmenu-head {
  padding: 18px 18px 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}
.appmenu-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.appmenu-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.appmenu-brand .appmenu-logo {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(5,150,105,.25), 0 1px 2px rgba(15,23,42,.08);
}
.appmenu-brand h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .2px;
}
.appmenu-brand small {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.3;
  display: block;
  margin-top: 2px;
}
.appmenu-logo .logo-badge {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(5,150,105,.25), 0 1px 2px rgba(15,23,42,.08);
}
.appmenu-logo .logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.appmenu-logo .logo-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .2px;
}
.appmenu-logo .logo-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.appmenu-close {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s cubic-bezier(.2,.9,.3,1.2);
}
.appmenu-close:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
  transform: rotate(90deg);
}

.appmenu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 18px 10px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.appmenu-nav::-webkit-scrollbar { width: 6px; }
.appmenu-nav::-webkit-scrollbar-track { background: transparent; }
.appmenu-nav::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.appmenu-nav::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.menu-cat {
  margin-bottom: 6px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .18s, background .18s;
}
.menu-cat:hover {
  border-color: #e2e8f0;
}
.menu-cat-head {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  transition: background .16s;
  border-radius: 14px;
}
.menu-cat-head:hover {
  background: #f1f5f9;
}
.menu-cat.open .menu-cat-head {
  background: #f0fdf4;
  border-radius: 14px 14px 4px 4px;
}
.menu-cat-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  flex-shrink: 0;
}
.menu-cat:nth-child(1) .menu-cat-icon { background: linear-gradient(135deg,#dbeafe,#bfdbfe); }
.menu-cat:nth-child(2) .menu-cat-icon { background: linear-gradient(135deg,#dcfce7,#bbf7d0); }
.menu-cat:nth-child(3) .menu-cat-icon { background: linear-gradient(135deg,#fef3c7,#fde68a); }
.menu-cat:nth-child(4) .menu-cat-icon { background: linear-gradient(135deg,#ddd6fe,#c4b5fd); }
.menu-cat:nth-child(5) .menu-cat-icon { background: linear-gradient(135deg,#fae8ff,#f5d0fe); }
.menu-cat:nth-child(6) .menu-cat-icon { background: linear-gradient(135deg,#cffafe,#a5f3fc); }
.menu-cat:nth-child(7) .menu-cat-icon { background: linear-gradient(135deg,#fed7aa,#fdba74); }
.menu-cat:nth-child(8) .menu-cat-icon { background: linear-gradient(135deg,#fce7f3,#f9a8d4); }
.menu-cat:nth-child(9) .menu-cat-icon { background: linear-gradient(135deg,#ffedd5,#fed7aa); }
.menu-cat:nth-child(10) .menu-cat-icon { background: linear-gradient(135deg,#e0f2fe,#bae6fd); }
.menu-cat:nth-child(11) .menu-cat-icon { background: linear-gradient(135deg,#fef9c3,#fef08a); }
.menu-cat:nth-child(12) .menu-cat-icon { background: linear-gradient(135deg,#f3e8ff,#e9d5ff); }
.menu-cat:nth-child(13) .menu-cat-icon { background: linear-gradient(135deg,#f1f5f9,#cbd5e1); }

.menu-cat-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: .2px;
}
.menu-cat-count {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 999px;
}
.menu-cat.open .menu-cat-count {
  color: #059669;
  background: #dcfce7;
}
.menu-cat-chevron {
  font-size: 11px;
  color: #94a3b8;
  transition: transform .24s;
}
.menu-cat.open .menu-cat-chevron {
  transform: rotate(180deg);
  color: #059669;
}
/* Alias de clases para HTML existente (mc-* = menu-cat-*) */
.mc-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  flex-shrink: 0;
}
.menu-cat:nth-child(1) .mc-icon { background: linear-gradient(135deg,#dbeafe,#bfdbfe); }
.menu-cat:nth-child(2) .mc-icon { background: linear-gradient(135deg,#dcfce7,#bbf7d0); }
.menu-cat:nth-child(3) .mc-icon { background: linear-gradient(135deg,#fef3c7,#fde68a); }
.menu-cat:nth-child(4) .mc-icon { background: linear-gradient(135deg,#ddd6fe,#c4b5fd); }
.menu-cat:nth-child(5) .mc-icon { background: linear-gradient(135deg,#fae8ff,#f5d0fe); }
.menu-cat:nth-child(6) .mc-icon { background: linear-gradient(135deg,#cffafe,#a5f3fc); }
.menu-cat:nth-child(7) .mc-icon { background: linear-gradient(135deg,#fed7aa,#fdba74); }
.menu-cat:nth-child(8) .mc-icon { background: linear-gradient(135deg,#fce7f3,#f9a8d4); }
.menu-cat:nth-child(9) .mc-icon { background: linear-gradient(135deg,#ffedd5,#fed7aa); }
.menu-cat:nth-child(10) .mc-icon { background: linear-gradient(135deg,#e0f2fe,#bae6fd); }
.menu-cat:nth-child(11) .mc-icon { background: linear-gradient(135deg,#fef9c3,#fef08a); }
.menu-cat:nth-child(12) .mc-icon { background: linear-gradient(135deg,#f3e8ff,#e9d5ff); }
.menu-cat:nth-child(13) .mc-icon { background: linear-gradient(135deg,#f1f5f9,#cbd5e1); }
.mc-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: .2px;
  text-align: left;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.menu-cat-head button, .menu-cat-head {
  border: none;
  outline: none;
  width: 100%;
  text-align: left;
  background: transparent;
  font: inherit;
  padding: 0;
  margin: 0;
}
.menu-cat-head > * {
  pointer-events: none;
}
.mc-chevron {
  font-size: 11px;
  color: #94a3b8;
  transition: transform .24s;
}
.menu-cat.open .mc-chevron {
  transform: rotate(180deg);
  color: #059669;
}
/* Compatibilidad: los .menu-item de HTML son <button> o <label>, resetear estilos */
.menu-item.menu-label-item,
button.menu-item {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  margin: 2px 0;
}

.menu-cat-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.2,.9,.3,1.2);
  padding: 0 8px;
}
.menu-cat.open .menu-cat-body {
  max-height: 700px;
  padding: 4px 8px 10px 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 10px 12px;
  margin: 2px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: all .16s cubic-bezier(.2,.9,.3,1.2);
  position: relative;
  min-height: 40px;
}
.menu-item:hover {
  background: #f1f5f9;
  transform: translateX(2px);
}
.menu-item:active {
  background: #e2e8f0;
  transform: translateX(0);
}
.menu-item.danger:hover {
  background: #fef2f2;
}
.menu-item.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.menu-item.disabled:hover {
  background: transparent;
  transform: none;
}
.menu-item .mi-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.menu-item.danger .mi-icon {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.menu-item .mi-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}
.menu-item.danger .mi-label { color: #dc2626; font-weight: 600; }
.menu-item .mi-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  margin-right: 4px;
}
.menu-item kbd {
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 2px 6px;
  border-radius: 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  box-shadow: 0 1px 0 #cbd5e1;
  font-weight: 600;
}
.menu-item .menu-item-desc {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #0f172a;
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all .18s;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(15,23,42,.3);
}
.menu-item .menu-item-desc::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #0f172a;
}
.menu-item:hover .menu-item-desc {
  opacity: 1;
  transform: translateY(-50%) translateX(12px);
}

.appmenu-foot {
  padding: 12px 16px 16px 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  flex-shrink: 0;
  background: #f8fafc;
}
.appmenu-foot .af-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.appmenu-foot .af-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
  50% { box-shadow: 0 0 0 5px rgba(16,185,129,.08); }
}

/* =========================================================================
   R3) BARRA CONTEXTUAL (debajo toolbar principal)
   ========================================================================= */
.contextbar {
  height: 44px;
  min-height: 44px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  flex-shrink: 0;
}
.contextbar::-webkit-scrollbar { height: 3px; }
.contextbar::-webkit-scrollbar-track { background: transparent; }
.contextbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.context-left, .context-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 0;
}
.context-tool-label {
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  padding: 5px 12px;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-radius: 8px;
  letter-spacing: .3px;
  white-space: nowrap;
  border: 1px solid #86efac;
  box-shadow: 0 1px 2px rgba(16,185,129,.1);
}
.context-tool-label:empty { display: none; }
.context-divider {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
  flex-shrink: 0;
}
.context-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.context-hint {
  font-size: 12px;
  color: #94a3b8;
  font-style: normal;
  font-weight: 500;
}
.context-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
}
.context-group .cg-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  padding: 0 6px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.context-group .cg-input {
  width: 82px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-left: 1px solid #f1f5f9;
  border-right: 1px solid #f1f5f9;
  background: #fafafa;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  outline: none;
  transition: all .15s;
}
.context-group .cg-input:first-child { border-left: none; border-radius: 0 8px 8px 0; }
.context-group .cg-input:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px #86efac;
}
.context-group .cg-unit {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  padding: 0 8px 0 4px;
}
.context-group.cg-toggle {
  padding: 3px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.context-group.cg-toggle:hover {
  border-color: #cbd5e1;
}
.context-group.cg-toggle.toggle-on {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color: #86efac;
  box-shadow: 0 2px 6px rgba(16,185,129,.15);
}
.context-group.cg-toggle.toggle-on .cg-label {
  color: #059669;
}
.context-group.cg-toggle .cg-toggle-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.context-group.cg-toggle.toggle-on .cg-toggle-icon {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
}

/* =========================================================================
   R4) TOOLTIPS GLOBALES (data-tip)
   ========================================================================= */
[data-tip] {
  position: relative;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(.96);
  min-width: 180px;
  max-width: 260px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #0f172a, #1e293b);
  color: #e2e8f0;
  font-size: 11.5px;
  line-height: 1.5;
  border-radius: 11px;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: all .18s cubic-bezier(.2,.9,.3,1.2);
  white-space: pre-line;
  box-shadow:
    0 2px 8px rgba(15,23,42,.12),
    0 12px 32px rgba(15,23,42,.35),
    0 0 0 1px rgba(255,255,255,.06);
  letter-spacing: .15px;
  font-weight: 500;
}
[data-tip]::before {
  content: '';
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #1e293b;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: all .18s cubic-bezier(.2,.9,.3,1.2);
}
[data-tip]:hover::after,
[data-tip]:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
[data-tip] b,
[data-tip] strong {
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  display: block;
  margin-bottom: 3px;
}
[data-tip] kbd {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: #86efac;
  letter-spacing: .4px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
}
.tools [data-tip]::after {
  left: calc(100% + 12px);
}
.tools [data-tip]::before {
  left: calc(100% + 7px);
}
.editorbar [data-tip]::after {
  left: 50%;
  top: calc(100% + 9px);
  transform: translateX(-50%) translateY(0) scale(.96);
}
.editorbar [data-tip]::before {
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%) translateY(0);
  border-right-color: transparent;
  border-bottom-color: #1e293b;
}
.editorbar [data-tip]:hover::after {
  transform: translateX(-50%) translateY(3px) scale(1);
}

/* =========================================================================
   R5) BOTÓN APPMENU EN TOOLBAR + SNAP RÁPIDO
   ========================================================================= */
.appmenu-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .18s cubic-bezier(.2,.9,.3,1.2) !important;
  flex-shrink: 0;
}
.appmenu-btn:hover {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  border-color: #86efac !important;
  color: #059669 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16,185,129,.2);
}
.appmenu-btn:active { transform: scale(.98); }
.appmenu-btn.active {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-color: #059669 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(5,150,105,.35);
}

#snapQuickBtn.toggle-on {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-color: #059669 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(5,150,105,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transform: scale(1.04);
}
#snapQuickBtn.toggle-off {
  background: #fff !important;
  color: #64748b !important;
}

/* =========================================================================
   R6) MODAL PERSONALIZAR BARRA RÁPIDA
   ========================================================================= */
.custombar-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
  padding: 20px;
}
.custombar-modal:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}
.custombar-panel {
  width: 480px;
  max-width: 100%;
  max-height: 86vh;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(15,23,42,.08),
    0 20px 60px rgba(15,23,42,.25);
  display: flex;
  flex-direction: column;
  transform: translateY(14px) scale(.98);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.custombar-modal:not(.hidden) .custombar-panel {
  transform: translateY(0) scale(1);
}
.custombar-head {
  padding: 20px 22px 16px 22px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}
.custombar-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}
.custombar-head p {
  margin: 5px 0 0 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.55;
}
.custombar-close {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 15px;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.custombar-close:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.custombar-body {
  padding: 16px 18px 10px 18px;
  overflow-y: auto;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 400px;
}
.cb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  background: #fff;
}
.cb-item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.cb-item.checked {
  border-color: #86efac;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  box-shadow: 0 2px 6px rgba(16,185,129,.12);
}
.cb-item .cb-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
}
.cb-item.checked .cb-icon {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  border-color: #059669;
}
.cb-item .cb-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cb-item .cb-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}
.cb-item .cb-short {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}
.cb-item .cb-check {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 12px;
  font-weight: 800;
  transition: all .15s;
  flex-shrink: 0;
}
.cb-item.checked .cb-check {
  background: #059669;
  border-color: #059669;
  color: #fff;
}
.custombar-foot {
  padding: 14px 18px 18px 18px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f8fafc;
}
.custombar-foot .cb-info {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}
.custombar-foot .cb-actions {
  display: flex;
  gap: 8px;
}

/* =========================================================================
   R7) RESPONSIVE ADICIONALES (nuevo rediseño)
   ========================================================================= */
@media (max-width: 1100px) {
  .appmenu { width: 320px; }
  .appmenu-logo .logo-text { display: none; }
  .appmenu-logo .logo-badge { width: 36px; height: 36px; font-size: 14px; }
}
@media (max-width: 900px) {
  .contextbar {
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .context-left { gap: 8px; }
  .context-group .cg-input { width: 68px; font-size: 11.5px; }
  .context-hint { font-size: 11px; }
  .context-tool-label { font-size: 11px; padding: 4px 9px; }
}
@media (max-width: 780px) {
  .editorbar .btn span:not(.material-icons):not(.material-symbols-outlined) {
    display: none !important;
  }
  .editorbar .btn {
    min-width: 40px !important;
    width: 40px !important;
    padding: 0 !important;
  }
  .custombar-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .appmenu-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 15px !important;
  }
  .contextbar { padding: 6px 10px; }
  .context-right .btn span:not(.material-icons):not(.material-symbols-outlined) { display: none; }
  .context-right .btn { min-width: 36px !important; width: 36px !important; padding: 0 !important; }
  .context-divider { display: none; }
}
@media (pointer: coarse) {
  [data-tip]::after,
  [data-tip]::before,
  .menu-item .menu-item-desc,
  .menu-item .menu-item-desc::before {
    display: none !important;
  }
}

/* .fav-star · estrella en cada .menu-item */
.menu-item .fav-star {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all .15s;
  padding: 0;
  pointer-events: auto;
  flex-shrink: 0;
}
.menu-item:hover .fav-star {
  opacity: 1;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.menu-item .fav-star:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #d97706 !important;
  transform: translateY(-50%) scale(1.12);
}
.menu-item .fav-star.is-fav {
  opacity: 1;
  color: #f59e0b;
  background: #fffbeb;
  border-color: #fde68a;
}
.menu-item .fav-star.is-fav:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
}

/* =========================================================================
   CURSOR PAN · mano abierta / cerrada
   ========================================================================= */
#cadCanvas {
  cursor: crosshair;
}
body.space-held #cadCanvas,
#cadCanvas.space-pan {
  cursor: grab;
}
#cadCanvas.panning,
body.panning #cadCanvas {
  cursor: grabbing !important;
}

/* =========================================================================
   MINI MAPA (opcional, preparado)
   ========================================================================= */
.minimap {
  position: absolute;
  right: 14px;
  bottom: 32px;
  width: 200px;
  height: 140px;
  border-radius: 12px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  z-index: 90;
  overflow: hidden;
}
.minimap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.minimap .mm-viewport {
  position: absolute;
  border: 2px solid #2563eb;
  background: rgba(37, 99, 235, 0.10);
  border-radius: 3px;
  cursor: grab;
}
.minimap .mm-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
}
.minimap .mm-close:hover { background: #ef4444; color: #fff; }

/* Responsive · zoom-controls y favsbar en pantallas pequeñas */
@media (max-width: 1200px) {
  .zoom-controls .zoom-fit { padding: 0 8px; font-size: 11.5px; }
  .zoom-controls .zoom-fit { width: auto; }
}
@media (max-width: 900px) {
  .zoom-controls { padding: 5px 10px; gap: 4px; }
  .zoom-controls .zoom-fit .zoom-fit { display: none; }
  .zoom-controls .zoom-fit[data-essential] { display: inline-flex; }
  .favsbar { padding: 5px 10px; gap: 8px; }
  .fav-btn { width: 34px; height: 30px; }
}
@media (max-width: 768px) {
  .zoom-controls .zoom-fit span { display: none; }
  .zoom-controls .zoom-fit { width: 34px; padding: 0; }
}

/* =========================================================================
   BOTONES PERMANENTES DESHACER / REHACER (estilo profesional)
   ========================================================================= */
.eb-group.eb-history {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.undoredo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: #fff !important;
  color: #0f172a !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.05) !important;
}
.undoredo .ur-icon {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.undoredo .ur-label {
  font-size: 12.5px;
  letter-spacing: 0.1px;
}
.undoredo:hover:not(:disabled):not(.is-disabled) {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #15803d !important;
  box-shadow: 0 2px 5px rgba(22,163,74,0.10) !important;
}
.undoredo:active:not(:disabled):not(.is-disabled) {
  transform: translateY(1px);
}
.undo-btn.is-disabled,
.redo-btn.is-disabled,
.undoredo:disabled {
  opacity: 0.40 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.55);
  background: #f8fafc !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.undo-btn:hover:not(:disabled):not(.is-disabled) { border-color: #93c5fd !important; color: #1d4ed8 !important; background: #eff6ff !important; }
.redo-btn:hover:not(:disabled):not(.is-disabled) { border-color: #c4b5fd !important; color: #6d28d9 !important; background: #f5f3ff !important; }

/* Responsive · ocultar labels en móvil */
@media (max-width: 820px) {
  .undoredo .ur-label { display: none; }
  .undoredo { padding: 0 !important; width: 36px !important; min-width: 36px !important; }
}
@media (max-width: 600px) {
  .eb-group.eb-history { padding: 2px 4px; gap: 2px; }
  .undoredo { height: 32px !important; width: 32px !important; min-width: 32px !important; }
  .undoredo .ur-icon { font-size: 14px; }
}

/* =========================================================================
   BARRA CONTEXTUAL DE POLILÍNEA · compacta y profesional
   ========================================================================= */
.contextbar.polyline-active {
  background: linear-gradient(180deg, #fefce8 0%, #fef9c3 100%) !important;
  border-bottom: 2px solid #f59e0b !important;
}
.poly-ctx-stats {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(217,119,6,0.08);
}
.poly-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.poly-stat small {
  font-size: 10.5px;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.poly-stat b {
  font-size: 14px;
  font-weight: 800;
  color: #78350f;
  font-variant-numeric: tabular-nums;
}
.poly-ctx-buttons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.ctx-btn {
  height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.13s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ctx-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.ctx-btn:active { transform: translateY(1px); }
.ctx-btn.is-primary {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  border-color: #15803d;
  box-shadow: 0 2px 5px rgba(22,163,74,0.22);
}
.ctx-btn.is-primary:hover { filter: brightness(1.05); }
.ctx-btn.is-warn { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.ctx-btn.is-warn:hover { background: #ffedd5; }
.ctx-btn.is-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ctx-btn.is-danger:hover { background: #fee2e2; }
.ctx-btn.is-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ctx-btn.is-info:hover { background: #dbeafe; }

/* Botón polyline en barra lateral tools */
.tools button[data-tool="polyline"] {
  color: #7c3aed;
}
.tools button[data-tool="polyline"].active {
  background: #ede9fe !important;
  border-color: #8b5cf6 !important;
  color: #6d28d9 !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.11) !important;
}

/* Botón measureContinuous en tools */
.tools button[data-tool="measureContinuous"].active {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.11) !important;
}

/* =========================================================================
   MAPA SATELITAL (Leaflet) · zoom separado / invalidateSize / Z badge
   ========================================================================= */
.map-pane {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: #0b1220;
}
.map-pane.hidden { display: none !important; }

.map-controls {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.map-controls input[type="text"],
.map-controls #mapSearch {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font: inherit;
  color: #0f172a;
  min-width: 200px;
  flex: 1 1 180px;
}
.map-controls select {
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font: inherit;
  color: #0f172a;
  cursor: pointer;
}
.map-controls .btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 8px;
}
.map-controls .btn.small { height: 32px; padding: 0 10px; }
.map-controls .btn.ghost.small {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.map-controls .btn.ghost.small:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.map-zoom-label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  color: #1d4ed8;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(37,99,235,0.12);
  user-select: none;
}

/* Contenedor Leaflet — ocupa todo el espacio restante */
#liveMap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background: #0b1220;
}
/* Asegurar que leaflet-container no herede transforms raros del CAD */
.leaflet-container {
  background: #0b1220 !important;
  font: inherit !important;
  font-family: inherit !important;
}
.leaflet-control-attribution {
  font-size: 10.5px !important;
  opacity: 0.72;
  background: rgba(255,255,255,0.85) !important;
}
/* Evitar que el zoom-in del CSS de los paneles lateral/topnav escale el Leaflet */
.map-pane,
#liveMap,
.leaflet-container,
.leaflet-map-pane,
.leaflet-tile-container {
  transform: none !important;
  transform-origin: 0 0 !important;
}
/* Tamaño estándar de tile Leaflet (nunca estirar) */
.leaflet-tile {
  image-rendering: auto;
}

.map-info {
  flex: 0 0 auto;
  padding: 6px 14px;
  background: linear-gradient(180deg, #fefce8 0%, #fef9c3 100%);
  border-top: 1px solid #fde68a;
  color: #78350f;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  font-variant-numeric: tabular-nums;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

/* Responsive · mapa en móviles: controles más compactos */
@media (max-width: 960px) {
  .map-controls { padding: 6px 8px; gap: 4px; }
  .map-controls #mapSearch { min-width: 140px; }
  .map-zoom-label { padding: 0 8px; font-size: 12px; }
  .map-controls .btn { padding: 0 8px; font-size: 12px; }
}

/* =========================================================================
   MODAL VECTORIZAR · scroll vertical + altura máxima responsive
   ========================================================================= */
.modal {
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.modal.wide-modal .modal-card,
#vectorizeModal .modal-card {
  max-height: calc(100vh - 40px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding-top: 18px !important;
}
/* Header del modal (x + h2) se queda fijo arriba */
#vectorizeModal .modal-card > h2 {
  flex: 0 0 auto;
  margin: 8px 40px 14px 0;
}
/* Layout principal (preview + controles) ES EL QUE TIENE SCROLL */
.vectorize-layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px 22px;
  align-content: start;
  scrollbar-gutter: stable;
}
.vectorize-preview,
.vectorize-controls {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vectorize-preview h4,
.vectorize-controls h4 {
  margin: 0 0 2px 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #0f172a;
  text-transform: uppercase;
}
.vectorize-canvas-wrap {
  flex: 1 1 auto;
  min-height: 300px;
  max-height: 520px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #0b1220;
  overflow: auto;
  padding: 10px;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.06);
}
#vectorizePreviewCanvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.vectorize-progress-wrap {
  flex: 0 0 auto;
}
.vectorize-controls label {
  margin: 0 !important;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vectorize-controls label > input[type="range"] {
  margin-top: 0 !important;
  width: 100% !important;
}
.vectorize-controls .slider-val {
  font-size: 11.5px;
  font-weight: 800;
  color: #1d4ed8;
  background: #eff6ff;
  padding: 2px 7px;
  border-radius: 999px;
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
}
.detect-only-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.detect-only-group .check-row {
  margin: 0;
  padding: 4px 2px;
}
/* Actions footer siempre visibles (no se scrollean) */
#vectorizeModal .modal-card > .modal-actions {
  flex: 0 0 auto;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

/* Responsive vectorizar en portátiles / tablets */
@media (max-width: 900px) {
  .vectorize-layout { grid-template-columns: 1fr; }
  .vectorize-canvas-wrap { max-height: 400px; }
  .modal.wide-modal .modal-card { max-height: calc(100vh - 24px); min-height: 0; }
}
@media (max-width: 560px) {
  .detect-only-group { grid-template-columns: 1fr; }
  .vectorize-canvas-wrap { max-height: 320px; min-height: 240px; }
}

/* Botón vectorizar en estado "procesando" */
#vectorizeProcessBtn.is-working {
  background: #1e40af !important;
  color: #dbeafe !important;
  border-color: #1e3a8a !important;
  cursor: progress !important;
  opacity: 0.92 !important;
  box-shadow: 0 2px 6px rgba(30,64,175,0.30) !important;
}
#vectorizeProcessBtn[disabled] { cursor: not-allowed; opacity: 0.7; }
#vectorizeCancelBtn.danger {
  color: #991b1b !important;
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}
#vectorizeCancelBtn.danger:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #7f1d1d !important;
}

/* ======= MODAL VECTORIZAR 2.0 (Web Worker · progresivo) ======= */
.x-vectorize-modal .vectorize-layout-2 {
  gap: 14px 18px;
}
.vec-size-badge,
.vec-mode-badge {
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: 0.15px;
  font-variant-numeric: tabular-nums;
}
.vec-size-badge {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}
.vec-mode-badge {
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  color: #92400e;
  box-shadow: 0 1px 2px rgba(245,158,11,0.14);
}
/* Panel stages (etapas reales del worker) */
.vec-canvas-wrap { position: relative; }
.vectorize-canvas-wrap {
  position: relative;
}
.vec-stages {
  position: absolute;
  left: 10px; top: 10px; right: 10px;
  max-height: calc(100% - 20px);
  overflow: hidden;
  background: rgba(15,23,42,0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.vec-stages[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(-4px);
}
.vec-stage {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  opacity: 0.45;
  transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.vec-stage.is-active {
  opacity: 1;
  color: #fef3c7;
  transform: translateX(2px);
}
.vec-stage.is-active .vec-stage-pct {
  background: #fbbf24;
  color: #451a03;
}
.vec-stage.is-done {
  opacity: 0.75;
  color: #86efac;
}
.vec-stage.is-done .vec-stage-pct {
  background: #16a34a;
  color: #ecfdf5;
}
.vec-stage-pct {
  display: inline-block;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  color: #cbd5e1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.vec-stage-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vectorize-progress-wrap {
  padding: 4px 2px 6px;
}
.vectorize-progress-wrap.hidden .progress-bar,
.vectorize-progress-wrap.hidden .progress-text { display: none; }
.progress-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6366f1 0%, #06b6d4 100%);
  border-radius: 999px;
  transition: width 0.28s cubic-bezier(.2,.7,.2,1), background 0.25s ease;
}
.progress-fill.is-done { background: linear-gradient(90deg, #16a34a, #22c55e); }
.progress-fill.is-error { background: linear-gradient(90deg, #dc2626, #ef4444); }
.progress-text {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
/* Resumen detección */
.vec-summary {
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 12px;
  padding: 10px 12px;
}
.vec-summary.hidden { display: none; }
.vec-sum-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.vec-sum-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px;
  margin: 2px 0 4px;
}
.vec-sum-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.vec-sum-num {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}
.vec-sum-lab {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.25px;
}
.vec-sum-review {
  margin-top: 2px;
  padding: 6px 9px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #f59e0b;
  font-size: 12px;
}
.vec-telemetry {
  margin-top: 6px;
  padding: 7px 9px;
  background: #0f172a;
  color: #a5f3fc;
  border-radius: 8px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.vec-telemetry.hidden { display: none; }

/* Warning imagen grande */
.vec-warn-big {
  border: 1px solid #fbbf24;
  background: linear-gradient(180deg, #fffbeb, #fef3c7);
  color: #78350f;
  padding: 10px 12px;
  border-radius: 12px;
  display: grid;
  gap: 6px;
}
.vec-warn-big.hidden { display: none; }
.vec-warn-big b { font-size: 12.5px; }
.vec-warn-big span { font-size: 12px; line-height: 1.45; }
.vec-big-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
/* Modo calidad (preview vs HQ) */
.vec-mode-row {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.vec-mode-row .check-row {
  margin: 0; padding: 3px 0;
}
.vec-mode-row b {
  font-size: 12.5px;
  color: #0f172a;
}
.vec-zone-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.vec-zone-row .btn.small {
  padding: 6px 10px;
  font-size: 12px;
  height: 30px;
  border-radius: 8px;
}
/* actions vec */
.vec-modal-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.vec-modal-actions .btn {
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .vec-sum-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vec-modal-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .detect-only-group { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .vec-modal-actions { grid-template-columns: 1fr 1fr; }
}

/* === Escala / calibración visual ================================ */
.statusbar #scaleInfo.scale-ok,
.statusbar #scaleInfo.ok {
  color: #4ade80 !important;
}
.statusbar #scaleInfo.scale-uncal {
  color: #fbbf24 !important;
  font-weight: 800 !important;
  letter-spacing: 0.1px;
}
/* Banner de aviso en panel propiedades cuando no hay calibrado + imagen */
#calibWarnBanner {
  display: none;
  margin: 4px 10px 10px;
  padding: 9px 11px;
  background: linear-gradient(180deg, #fffbeb, #fef3c7);
  color: #78350f;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
#calibWarnBanner.show { display: block; }
#calibWarnBanner small { display:block; margin-top:2px; font-weight:500; color:#92400e; opacity:0.9; }

/* ================================================================
   CALIBRATE MODAL · TABS + REFS + RECTIFY (H2)
   ================================================================ */
.cal-tabs {
  display:flex; gap:6px; margin: 6px 0 12px;
  border-bottom:1px solid #e2e8f0;
  padding-bottom:8px;
}
.cal-tab {
  appearance: none; border:1px solid #cbd5e1; background:#f8fafc;
  padding:7px 12px; border-radius:8px; font-weight:600; font-size:13px;
  color:#475569; cursor:pointer;
}
.cal-tab:hover { background:#eef2ff; border-color:#818cf8; color:#4338ca; }
.cal-tab.active {
  background:linear-gradient(180deg, #6366f1, #4f46e5);
  color:#fff; border-color:#4338ca;
  box-shadow: 0 2px 5px rgba(79,70,229,.35);
}
.cal-actions-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.cal-refs-list {
  display:grid; gap:8px; max-height:210px; overflow-y:auto;
  padding:6px 4px;
}
.cal-ref-row {
  display:grid;
  grid-template-columns: 32px minmax(0,1fr) 90px 72px 90px 28px 28px;
  gap:6px 8px; align-items:center;
  padding:8px 10px; border-radius:10px; border:1px solid #e2e8f0; background:#fff;
}
.cal-ref-row.is-editing { border-color:#6366f1; background:#eef2ff; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.cal-ref-row .ref-idx { font-weight:900; color:#4338ca; text-align:center; font-size:15px; }
.cal-ref-row .ref-meta-line { font-size:11.5px; color:#64748b; line-height:1.35; }
.cal-ref-row .ref-px { font-weight:700; color:#0f172a; text-align:right; font-size:12px; }
.cal-ref-row .ref-m-input { width:100%; padding:4px 6px; border-radius:6px; border:1px solid #cbd5e1; font-size:12px; font-weight:700; }
.cal-ref-row .ref-m-input:focus { outline: none; border-color:#6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.18); }
.cal-ref-row .ref-error { text-align:right; font-weight:800; font-size:12px; }
.cal-ref-row .ref-error.ok { color:#16a34a; }
.cal-ref-row .ref-error.warn { color:#ca8a04; }
.cal-ref-row .ref-error.bad { color:#dc2626; }
.cal-ref-row .btn-icon {
  all:unset; cursor:pointer; padding:4px; border-radius:6px;
  width:24px; height:24px; display:grid; place-items:center;
  color:#64748b; font-size:14px; line-height:1;
}
.cal-ref-row .btn-icon:hover { background:#eef2ff; color:#4338ca; }
.cal-ref-row .btn-icon.danger:hover { background:#fee2e2; color:#991b1b; }
.cal-summary {
  margin: 10px 0 0;
  padding:10px 12px;
  border:1px dashed #a5b4fc;
  border-radius:12px;
  background: linear-gradient(180deg, #eef2ff, #f5f3ff);
}
.cal-summary .calibrate-row { margin:3px 0; }
.cal-refs-list::-webkit-scrollbar-thumb { background:#c7d2fe; border-radius:6px; }
.cal-refs-list::-webkit-scrollbar-track { background:#f1f5f9; }
.cal-refs-list::-webkit-scrollbar { width:8px; }
@media (max-width: 780px) {
  .cal-ref-row {
    grid-template-columns: 28px minmax(0,1fr) 84px 28px;
  }
  .cal-ref-row .ref-px,
  .cal-ref-row .ref-error,
  .cal-ref-row .btn-icon.mark {
    display:none;
  }
}

/* ================================================================
   H3 · EDICIÓN GEOMÉTRICA AVANZADA
   ================================================================ */
.area-target-row {
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:6px 10px;
  margin-top:8px; padding:8px 10px;
  border:1px solid #c7d2fe; background:#eef2ff; border-radius:10px;
}
.area-target-row label { margin:0; font-size:11.5px; color:#3730a3; font-weight:700; }
.area-target-row input {
  width:100%; padding:4px 6px; border-radius:6px; border:1px solid #a5b4fc;
  font-size:12px; font-weight:700; background:#fff;
}
.area-target-row .at-current { background:#ecfdf5; border-color:#16a34a; color:#14532d; }
.area-target-row .at-delta.ok { background:#dcfce7; color:#14532d; border-color:#16a34a; }
.area-target-row .at-delta.warn { background:#fef9c3; color:#713f12; border-color:#eab308; }
.area-target-row .at-delta.bad { background:#fee2e2; color:#7f1d1d; border-color:#dc2626; }

.side-edits {
  display:grid; gap:6px; max-height: 240px; overflow-y:auto;
  margin-top:8px; padding:8px 6px; border:1px solid #e2e8f0; border-radius:10px; background:#fafafa;
}
.side-edits::-webkit-scrollbar { width:7px; }
.side-edits::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
.side-edit {
  display:grid; grid-template-columns: 26px minmax(0,1.1fr) minmax(0,1fr) 28px;
  gap:4px 6px; align-items:center; padding:6px 7px;
  background:#fff; border-radius:8px; border:1px solid #e2e8f0;
}
.side-edit.hl { border-color:#6366f1; background:#eef2ff; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.side-edit .se-idx { font-weight:900; color:#4338ca; font-size:12px; text-align:center; }
.side-edit .se-col { display:flex; flex-direction:column; gap:2px; }
.side-edit .se-row { display:flex; align-items:center; gap:4px; font-size:11px; }
.side-edit .se-row b { width:36px; color:#334155; font-weight:700; }
.side-edit .se-row input {
  flex:1 1 auto; border:1px solid #cbd5e1; border-radius:5px; padding:2px 5px;
  font-size:11px; font-weight:700; background:#fff;
}
.side-edit .se-row input:focus { outline:none; border-color:#6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.18); }
.side-edit .se-actions { display:flex; flex-direction:column; gap:3px; }
.side-edit .se-btn {
  all:unset; cursor:pointer; padding:2px; border-radius:5px;
  width:22px; height:22px; display:grid; place-items:center;
  color:#64748b; font-size:12px; line-height:1;
}
.side-edit .se-btn:hover { background:#eef2ff; color:#4338ca; }
.side-edit .se-btn.danger:hover { background:#fee2e2; color:#991b1b; }

.parallel-row {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px;
  padding:8px 10px; border:1px solid #fcd34d; background:#fffbeb; border-radius:10px;
}
.parallel-row label { font-size:11.5px; color:#78350f; font-weight:700; }
.parallel-row input {
  width:86px; padding:4px 6px; border-radius:6px; border:1px solid #fbbf24;
  font-size:12px; font-weight:700; background:#fff;
}
.parallel-row .p-sel {
  padding:4px 6px; border-radius:6px; border:1px solid #fbbf24;
  font-size:11.5px; background:#fff; font-weight:700; color:#78350f;
}

.mc-actions {
  position: fixed; bottom:52px; left:50%; transform: translateX(-50%);
  display:flex; gap:8px; z-index:400;
  padding:8px 10px; background:#0f172a; color:#fff;
  border-radius:10px; box-shadow: 0 8px 24px rgba(15,23,42,.35);
  font-size:13px; font-weight:600;
}
.mc-actions.hidden { display:none; }
.mc-actions .mc-row-info { align-self:center; margin-right:8px; color:#e2e8f0; }
.mc-actions .mc-btn {
  all:unset; cursor:pointer; padding:6px 10px; border-radius:7px; background:#334155;
  border:1px solid #475569;
}
.mc-actions .mc-btn.keep { background:#166534; border-color:#14532d; }
.mc-actions .mc-btn.convert { background:#1e3a8a; border-color:#1e40af; }
.mc-actions .mc-btn.danger { background:#7f1d1d; border-color:#991b1b; }
.mc-actions .mc-btn:hover { filter:brightness(1.1); }

.bg-actions {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.btn.wide.primary {
  background: linear-gradient(180deg,#6366f1,#4f46e5) !important;
  color:#fff !important;
  border-color:#4338ca !important;
  font-weight:800;
}