/* Espacios Camasa — estilos (extraídos del <style> inline de index.html). */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0c10;--surface:#13151b;--surface2:#1a1d25;--surface3:#232733;
  --border:#262b36;--border-strong:#323847;
  --accent:#5286ff;--accent-hover:#6b98ff;--accent-dim:rgba(82,134,255,.14);
  --accent-warm:#f5a623;--danger:#e05555;
  --text:#e9ebf1;--text-muted:#8b93a7;--text-faint:#5d6478;
  --radius:8px;--radius-sm:6px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 8px 24px rgba(0,0,0,.5);
  --ease-out-strong:cubic-bezier(0.23,1,0.32,1);
  --font:ui-sans-serif,'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
}
body{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px}
/* ── Scrollbars finos, coherentes con el tema oscuro ── */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--border-strong);background-clip:padding-box}
/* ── Foco visible consistente para elementos interactivos ── */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-dim);outline-offset:1px}
#topbar{height:46px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);display:flex;flex-wrap:nowrap;align-items:center;padding:0 12px;gap:8px;box-shadow:var(--shadow-1);overflow-x:auto;overflow-y:hidden}
#topbar>*{flex-shrink:0}
#topbar::-webkit-scrollbar{height:0}
#topbar .app-title{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;margin-right:4px}
.app-dot{width:8px;height:8px;border-radius:2px;background:var(--accent);flex-shrink:0}
.topbar-spacer{flex:1 1 auto;min-width:8px}
.tb-sep-v{width:1px;align-self:stretch;margin:8px 2px;background:var(--border)}
#store-select,#role-view{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;font-size:13px;cursor:pointer;outline:none;transition:border-color 0.15s}
#role-view{flex-shrink:0}
#role-view:focus{border-color:var(--accent)}
#store-select:focus{border-color:var(--accent)}
.top-btn{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 12px;font-size:13px;cursor:pointer;transition:background 0.15s,border-color 0.15s;white-space:nowrap}
.top-btn:hover{background:var(--surface3);border-color:var(--border-strong)}
#btn-3d{border-color:var(--accent);color:var(--accent);background:transparent}
#btn-3d:hover{background:var(--accent-dim)}
#btn-more{font-size:16px;line-height:1;padding:5px 10px}
.top-icon{width:34px;padding:5px 0;text-align:center;font-size:15px;line-height:1;flex-shrink:0}
.top-btn-ghost{background:transparent;border-color:transparent}
.top-btn-ghost:hover{background:var(--surface2);border-color:var(--border)}
.more-wrap,.export-wrap{position:relative}
#btn-export{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:5px 12px;font-size:13px;cursor:pointer;transition:background 0.15s}
#btn-export:hover{background:var(--accent-hover)}
#export-menu,#more-menu,#colorby-menu{display:block;position:fixed;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-2);min-width:170px;z-index:3000;overflow:hidden;opacity:0;transform:translateY(-3px) scale(0.99);pointer-events:none;visibility:hidden;transition:opacity 0.13s var(--ease-out-strong),transform 0.13s var(--ease-out-strong),visibility 0s linear 0.13s}
#export-menu.open,#more-menu.open,#colorby-menu.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s,0s}
#export-menu button,#more-menu button,#colorby-menu button{display:block;width:100%;padding:9px 14px;background:none;color:var(--text);border:none;text-align:left;cursor:pointer;font-size:13px;transition:background 0.12s}
#export-menu button:hover,#more-menu button:hover,#colorby-menu button:hover{background:var(--surface)}
#toolbar{height:38px;flex-shrink:0;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:8px;overflow-x:auto}
.mode-seg{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px;gap:2px}
.mode-seg .mode-btn{border:none;border-radius:999px}
.mode-seg .mode-btn.active{background:var(--surface3);color:var(--accent);border-color:transparent}
.tb-btn{background:var(--surface);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:12px;cursor:pointer;white-space:nowrap;transition:background 0.15s,border-color 0.15s,color 0.15s,transform 0.14s var(--ease-out-strong);display:flex;align-items:center;gap:5px}
.tb-btn::before{content:'';display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--swatch)}
.tb-btn:hover{color:var(--text);border-color:var(--border-strong)}
.tb-btn.active{background:var(--surface3);color:var(--accent-warm);border-color:var(--accent-warm)}
#main{flex:1;display:flex;overflow:hidden}
#canvas-area{flex:1;overflow:hidden;position:relative;background:var(--bg)}
/* ── Expandir/achicar lienzo: botones flotantes por borde ── */
.grid-grow,.grid-shrink{position:absolute;z-index:900;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface2);color:var(--text);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1);transition:background 0.15s,border-color 0.15s,transform 0.14s var(--ease-out-strong)}
.grid-grow:hover,.grid-shrink:hover{background:var(--surface3);border-color:var(--accent)}
.grid-grow:active,.grid-shrink:active{transform:scale(0.92)}
.grid-shrink{font-size:18px;color:var(--text-muted)}
.grid-top{top:8px;left:50%;transform:translateX(-50%)}
.grid-top:active{transform:translateX(-50%) scale(0.92)}
.grid-top-s{top:8px;left:calc(50% + 34px)}
.grid-bottom{bottom:8px;left:50%;transform:translateX(-50%)}
.grid-bottom:active{transform:translateX(-50%) scale(0.92)}
.grid-bottom-s{bottom:8px;left:calc(50% + 34px)}
.grid-left{left:8px;top:50%;transform:translateY(-50%)}
.grid-left:active{transform:translateY(-50%) scale(0.92)}
.grid-left-s{left:8px;top:calc(50% + 34px)}
.grid-right{right:8px;top:50%;transform:translateY(-50%)}
.grid-right:active{transform:translateY(-50%) scale(0.92)}
.grid-right-s{right:8px;top:calc(50% + 34px)}
body.readonly .grid-grow,body.readonly .grid-shrink{display:none !important}
#main-canvas{display:block;width:100%;height:100%;touch-action:none}
#zoom-label{position:absolute;bottom:36px;right:10px;background:rgba(26,29,39,0.85);color:var(--text-muted);font-size:11px;padding:3px 7px;border-radius:4px;pointer-events:none;font-family:Consolas,monospace}
#inspector{width:240px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.insp-header{padding:10px 14px;border-bottom:1px solid var(--border);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted)}
#no-sel{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12px;padding:20px}
.nosel-inner{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left}
.nosel-title{font-size:12.5px;color:var(--text);font-weight:600;margin-bottom:2px}
.nosel-hint{font-size:11.5px;color:var(--text-faint)}
.nosel-hint kbd{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-family:Consolas,monospace;font-size:10px;color:var(--text-muted)}
#sel-panel{display:flex;flex-direction:column}
.field-row{display:flex;flex-direction:column;gap:3px}
.field-label{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em}
.field-input{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;font-size:13px;font-family:Consolas,monospace;outline:none;transition:border-color 0.15s;width:100%}
.field-input:focus{border-color:var(--accent)}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#color-swatch{height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);transition:background 0.2s}
#btn-delete{background:var(--danger);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px;font-size:13px;cursor:pointer;width:100%;margin-top:4px;transition:background 0.15s;font-weight:500}
#btn-delete:hover{background:#c04040}
/* ── Fase 2: secciones colapsables del inspector ── */
.insp-sec{border-bottom:1px solid var(--border)}
.insp-sec-head{display:flex;align-items:center;gap:6px;padding:9px 14px;font-size:10.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);cursor:pointer;user-select:none;transition:color 0.15s}
.insp-sec-head:hover{color:var(--text)}
.insp-sec-chevron{display:inline-block;font-size:10px;transition:transform 0.15s}
.insp-sec-body{padding:4px 14px 12px;display:flex;flex-direction:column;gap:8px}
.insp-sec.collapsed .insp-sec-body{display:none}
.insp-sec.collapsed .insp-sec-chevron{transform:rotate(-90deg)}
/* ── Inspector HERO (ficha): código grande + chips tipo/zona + location + BC pill ── */
#insp-hero{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-bottom:1px solid var(--border);border-left:3px solid var(--border-strong)}
.insp-hero-code{background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-size:21px;font-weight:700;font-family:var(--font);outline:none;width:100%;padding:0 0 2px;transition:border-color 0.15s}
.insp-hero-code:focus{border-bottom-color:var(--accent)}
.insp-hero-code[readonly]{cursor:text;font-size:17px;word-break:break-all}
.insp-hero-code[readonly]:focus{border-bottom-color:transparent}
.insp-chips{display:flex;flex-direction:column;gap:8px}
.insp-chipfield{display:flex;flex-direction:column;gap:3px}
.insp-chiplbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint)}
.insp-chip{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 11px 4px 9px;width:100%;transition:border-color 0.15s}
.insp-chip:focus-within{border-color:var(--accent)}
.insp-chip input{background:transparent;border:none;outline:none;color:var(--text);font-size:12px;flex:1;min-width:0;padding:0}
.insp-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--border-strong);flex-shrink:0}
.insp-loc{background:transparent;border:none;color:var(--text-faint);font-size:11px;padding:0;outline:none;width:100%}
.insp-bc{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:Consolas,monospace;font-size:12.5px;color:var(--text);background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:6px 9px;cursor:pointer;word-break:break-all;transition:border-color 0.15s}
.insp-bc:hover{border-color:var(--border-strong)}
.insp-bc svg{flex-shrink:0;color:var(--text-muted)}
#insp-extra .field-row{margin:8px 14px}
/* ── Sección Módulos: filas inline + stepper + mini-góndola ── */
.insp-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0}
.insp-row-label{font-size:12.5px;color:var(--text-muted)}
.insp-stepper{display:flex;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.insp-stepper button{width:30px;height:30px;background:transparent;border:none;color:var(--text-muted);font-size:15px;cursor:pointer;transition:background 0.12s}
.insp-stepper button:hover{background:var(--surface3);color:var(--text)}
.insp-stepper input{width:44px;height:30px;text-align:center;background:transparent;border:none;color:var(--text);font-size:15px;font-variant-numeric:tabular-nums;outline:none}
.insp-stepper input::-webkit-outer-spin-button,.insp-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.insp-num{width:44px;height:30px;text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:Consolas,monospace;font-size:13px;outline:none}
.insp-num::-webkit-outer-spin-button,.insp-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.insp-row .es-dir-seg{flex:0 0 130px}
.mods-strip{display:flex;flex-direction:column;gap:4px;margin-top:6px;max-height:280px;overflow-y:auto}
.mods-cell{width:100%;height:30px;display:flex;align-items:center;justify-content:center;background:var(--surface3);border:1px solid transparent;border-radius:4px;font-family:Consolas,monospace;font-size:11.5px;color:var(--text-muted);cursor:pointer;transition:border-color 0.12s,background 0.12s}
.mods-cell:hover{border-color:var(--border-strong)}
.mods-cell.sel{outline:2px solid var(--accent);background:var(--accent-dim);color:var(--accent)}
.mods-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--text-muted)}
.mods-meta .mm-code{font-family:Consolas,monospace;font-size:11px;color:var(--text);word-break:break-all}
.mods-meta .mm-empty{font-size:11.5px;color:var(--text-faint)}
.mods-meta button{background:var(--surface);color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:2px 8px;font-size:10.5px;cursor:pointer;flex-shrink:0}
.mods-meta button:hover{background:var(--accent-dim)}
/* ── GONDOT: lista de códigos publicitarios + nota deadzone ── */
#es-ovl-list{display:flex;flex-direction:column;gap:2px;font-family:Consolas,monospace;font-size:11px;color:#d4a017;margin-top:4px;word-break:break-all}
#es-dead-note{font-size:11px;color:var(--text-faint);margin-top:4px}
.insp-ovl{width:110px;height:30px;padding:0 8px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:Consolas,monospace;font-size:12px;outline:none;text-align:right}
.insp-ovl:focus{border-color:var(--accent)}
.mods-cell{position:relative}
.mods-dot{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:#d4a017;pointer-events:none}
/* legacy (nodos ocultos) */
.es-code-preview{font-family:monospace;font-size:11px;color:var(--text);background:var(--surface3,rgba(255,255,255,.05));border:1px solid var(--border);border-radius:4px;padding:5px 8px;word-break:break-all}
/* ── ES — dirección de numeración de módulos (segmented) ── */
.es-dir-seg{display:flex;gap:4px}
.es-dir-seg button{flex:1;background:var(--surface);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 6px;font-size:11px;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s,transform 0.14s var(--ease-out-strong)}
.es-dir-seg button:hover{color:var(--text);border-color:var(--border-strong)}
.es-dir-seg button.active{background:var(--surface3);color:var(--accent);border-color:var(--accent)}
/* ── ES — Vista frontal de módulo (overlay, nivel 1 abajo) ── */
#front-view{display:flex;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:8000;align-items:center;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.2s var(--ease-out-strong),visibility 0s linear 0.2s}
#front-view.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s,0s}
.fv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);width:420px;max-width:92vw;display:flex;flex-direction:column;transform:scale(0.97);transform-origin:center;transition:transform 0.2s var(--ease-out-strong)}
#front-view.open .fv-card{transform:none}
/* ── Administración de usuarios ── */
#users-modal{display:flex;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:8100;align-items:center;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.2s var(--ease-out-strong),visibility 0s linear 0.2s}
#users-modal.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s,0s}
.um-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);width:520px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;transform:scale(0.97);transition:transform 0.2s var(--ease-out-strong)}
#users-modal.open .um-card{transform:none}
.um-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600;color:var(--text)}
.um-head button{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;line-height:1;transition:color 0.15s}
.um-head button:hover{color:var(--text)}
#um-list-view,#um-form-view{padding:14px 16px;overflow-y:auto}
.um-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
#um-list{display:flex;flex-direction:column;gap:6px}
.um-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.um-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.um-row-name{font-size:13px;color:var(--text);font-weight:500}
.um-row-email{font-size:11px;color:var(--text-muted);font-family:Consolas,monospace;overflow:hidden;text-overflow:ellipsis}
.um-role{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.03em;flex-shrink:0}
.um-role-admin{background:var(--accent-dim);color:var(--accent)}
.um-role-tienda{background:rgba(46,204,113,0.16);color:#2ecc71}
.um-role-auditor{background:rgba(245,166,35,0.16);color:var(--accent-warm)}
.um-role-backmargin{background:var(--surface3);color:var(--text-muted)}
.um-store{font-size:11px;color:var(--text-faint);font-family:Consolas,monospace;flex-shrink:0}
.um-act{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-size:13px;padding:3px 7px;transition:all 0.15s;flex-shrink:0}
.um-act:hover:not(:disabled){color:var(--text);border-color:var(--border-strong)}
.um-act:disabled{opacity:0.35;cursor:default}
.um-btn-primary{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px 14px;font-size:13px;cursor:pointer;transition:background 0.15s}
.um-btn-primary:hover:not(:disabled){background:var(--accent-hover)}
.um-btn-primary:disabled{opacity:0.5;cursor:default}
.um-btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 14px;font-size:13px;cursor:pointer;transition:background 0.15s}
.um-btn-ghost:hover{background:var(--surface3)}
.um-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#um-form-view .field-row{margin-bottom:10px}
.um-empty{color:var(--text-muted);font-size:12px;text-align:center;padding:20px}
/* ── Conciliación BC ⇄ plano (solo admin) ── */
#recon-modal{display:flex;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:8100;align-items:center;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.2s var(--ease-out-strong),visibility 0s linear 0.2s}
#recon-modal.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s,0s}
#recon-modal.open .um-card{transform:none}
.rc-card{width:720px}
.rc-head-actions{display:flex;align-items:center;gap:10px}
.rc-head-actions #recon-refresh{font-size:14px}
.rc-body{overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:16px}
.rc-sec{display:flex;flex-direction:column;gap:6px}
.rc-sec-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted)}
.rc-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;font-family:Consolas,monospace}
.rc-badge-warn{background:rgba(245,166,35,0.16);color:var(--accent-warm)}
.rc-badge-bad{background:rgba(224,85,85,0.16);color:var(--danger)}
.rc-badge-ok{background:rgba(46,204,113,0.16);color:#2ecc71}
.rc-badge-muted{background:rgba(93,109,126,0.16);color:var(--text-muted)}
.rc-row{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.rc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rc-code{font-size:12px;color:var(--text);font-family:Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-sub{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.rc-actions .rc-badge{white-space:nowrap}
.rc-btn{padding:4px 10px;font-size:12px}
.rc-btn:disabled{opacity:0.4;cursor:default}
.rc-btn-danger{color:var(--danger);border-color:rgba(224,85,85,0.4)}
.rc-btn-danger:hover:not(:disabled){background:rgba(224,85,85,0.12)}
.rc-empty{color:var(--text-faint);font-size:12px;padding:2px 2px}
.rc-loading{color:var(--text-muted);font-size:12px;text-align:center;padding:24px 0}
#contract-modal{display:flex;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:8200;align-items:center;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.2s var(--ease-out-strong),visibility 0s linear 0.2s}
#contract-modal.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s,0s}
#contract-modal .field-row{margin-bottom:10px}
/* ── Panel de asignación (modo back margin) ── */
#assign-panel{width:280px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;display:none;flex-direction:column}
body.assign #assign-panel{display:flex}
body.assign #inspector{display:none}
body.assign #type-palette{display:none}
body.assign .grid-grow,body.assign .grid-shrink{display:none !important}
/* Panel de auditoría (rol tienda) */
#audit-panel{width:290px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;display:none;flex-direction:column}
body.audit #audit-panel{display:flex}
body.audit #inspector{display:none}
body.audit #type-palette{display:none}
body.audit .grid-grow,body.audit .grid-shrink{display:none !important}
#audit-panel .ap-empty{padding:20px;color:var(--text-muted);font-size:12px;text-align:center}
#audit-panel .ap-subhead{padding:10px 14px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:600}
#audit-panel .field-row,#audit-panel .ap-row{padding:2px 14px}
#audit-panel #aud-save{margin:12px 14px}
#aud-info{padding:0 14px;display:flex;flex-direction:column;gap:6px}
.aud-yn{display:flex;gap:8px;padding:2px 14px 6px}
.aud-yn-btn{flex:1;padding:9px;background:var(--surface2);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.aud-yn-btn:hover{color:var(--text);border-color:var(--border-strong)}
.aud-yn-btn#aud-no.active{background:rgba(46,204,113,.16);border-color:#2ecc71;color:#2ecc71}
.aud-yn-btn#aud-yes.active{background:rgba(224,85,85,.16);border-color:var(--danger);color:var(--danger)}
#aud-body.aud-locked .aud-yn,#aud-body.aud-locked #aud-fields,#aud-body.aud-locked #aud-obs,#aud-body.aud-locked #aud-nivel{pointer-events:none;opacity:.55}
#aud-pending{border-bottom:1px solid var(--border);padding:8px 14px 6px}
.aud-pend-head{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:600}
.aud-pend-badge{background:var(--accent-warm);color:#1a1a1a;border-radius:10px;padding:1px 8px;font-size:11px;font-weight:700;letter-spacing:0}
.aud-pend-badge.done{background:#2ecc71;color:#0b0d13}
#aud-pend-toggle{margin-left:auto;background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:2px 4px}
.aud-pend-list{display:none;flex-direction:column;gap:3px;margin-top:6px;max-height:220px;overflow-y:auto}
.aud-pend-list.open{display:flex}
.aud-pend-item{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:5px 8px;font-family:Consolas,monospace;font-size:11px;color:var(--text-muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.aud-pend-item:hover{background:var(--surface3);color:var(--text);border-color:var(--accent)}
.aud-pend-empty{font-size:11px;color:var(--text-faint);padding:6px 0}
#assign-panel .ap-empty{padding:20px;color:var(--text-muted);font-size:12px;text-align:center}
#asg-hero{padding:12px 14px;border-bottom:1px solid var(--border)}
.asg-bc{font-family:Consolas,monospace;font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--text);word-break:break-all}
.asg-meta{font-size:11.5px;color:var(--text-muted);margin-top:4px}
.asg-mods{display:flex;flex-wrap:wrap;gap:3px;padding:8px 14px}
/* Ficha del espacio: datos de BC del módulo elegido */
.asg-ficha{margin:8px 14px 0;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 12px}
.asg-ficha-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px solid var(--border)}
.asg-ficha-row:last-child{border-bottom:none}
.asg-ficha-k{font-size:11px;color:var(--text-faint);white-space:nowrap}
.asg-ficha-v{font-family:Consolas,monospace;font-size:12px;color:var(--text);text-align:right;word-break:break-word}
.asg-ficha-hot{color:#2ecc71;font-weight:700}
.asg-ficha-bad{color:var(--danger);font-weight:700}
.asg-ficha-soon{color:#e6a032;font-weight:700}
.asg-ficha-empty{font-size:11.5px;color:var(--text-muted);text-align:center;padding:8px 0}
.asg-badge{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:9px;text-transform:uppercase;letter-spacing:.04em}
.asg-badge+.asg-badge{margin-left:5px}
.asg-badge-ok{background:rgba(46,204,113,0.16);color:#2ecc71}
.asg-badge-no{background:rgba(224,85,85,0.16);color:var(--danger)}
.asg-badge-warn{background:rgba(230,160,50,0.16);color:#e6a032}
.asg-target{display:flex;gap:0;margin:0 14px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.asg-tgt-btn{flex:1;padding:7px 8px;background:var(--surface2);color:var(--text-muted);border:none;font-size:12px;font-weight:600;cursor:pointer;transition:background .12s,color .12s}
.asg-tgt-btn+.asg-tgt-btn{border-left:1px solid var(--border)}
.asg-tgt-btn.active{background:var(--accent-dim);color:var(--accent)}
.asg-tgt-btn:hover:not(.active){background:var(--surface3);color:var(--text)}
.asg-mod{min-width:30px;height:26px;padding:0 6px;display:flex;align-items:center;justify-content:center;background:var(--surface3);border:1px solid transparent;border-radius:3px;font-family:Consolas,monospace;font-size:9px;color:var(--text-muted);cursor:pointer;transition:border-color 0.12s}
.asg-mod:hover{border-color:var(--border-strong)}
.asg-mod.sel{outline:2px solid var(--accent);background:var(--accent-dim);color:var(--accent)}
.ap-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 14px}
.ap-lbl{font-size:12.5px;color:var(--text-muted)}
.ap-subhead{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:600;padding:8px 14px 4px}
.asg-list{display:flex;flex-direction:column;gap:6px;padding:0 14px}
.asg-item{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font-size:12px}
.asg-item-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.asg-chip{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:9px;text-transform:uppercase;letter-spacing:0.03em}
.asg-chip-tipo{background:var(--surface3);color:var(--text-muted)}
.asg-st-0{background:var(--surface3);color:var(--text-muted)}
.asg-st-1{background:rgba(46,204,113,0.16);color:#2ecc71}
.asg-st-2{background:rgba(224,85,85,0.16);color:var(--danger)}
.asg-item-sub{font-size:11px;color:var(--text-muted);margin-top:4px}
.asg-item-acts{display:flex;gap:6px;margin-top:6px}
.asg-item-acts button{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-size:11px;padding:3px 8px;transition:all 0.15s}
.asg-item-acts button:hover{color:var(--text);border-color:var(--border-strong)}
.asg-item-acts button.asg-del{color:var(--danger)}
.asg-item-acts button.asg-del:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
#assign-panel #asg-new{margin:12px 14px}
#asg-form{padding:0 14px 14px;border-top:1px solid var(--border);margin-top:8px}
#asg-form .field-row{margin-top:10px}
#asg-form .field-row-2{margin-top:10px}
.fv-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;font-family:Consolas,monospace;color:var(--text)}
.fv-head button{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1;transition:color 0.15s,transform 0.14s var(--ease-out-strong)}
.fv-head button:hover{color:var(--text)}
.fv-head button:disabled{opacity:0.4;cursor:default;pointer-events:none}
#fv-title{flex:1;text-align:center}
.fv-body{display:flex;gap:14px;padding:14px}
#fv-levels{width:200px;height:300px;display:flex;flex-direction:column;border:1px solid var(--border-strong);border-radius:4px;overflow:hidden;flex-shrink:0}
.fv-level{flex:1;border-top:1px solid var(--border);display:flex;align-items:center;padding:0 8px;gap:6px;font-size:10.5px;color:var(--text-muted);font-family:Consolas,monospace}
.fv-level:hover{background:var(--surface2)}
.fv-side{flex:1;display:flex;flex-direction:column;gap:8px}
.fv-note{font-size:10.5px;color:var(--text-faint)}
/* ── ES — combobox buscable (clon del look de #store-list/.store-opt, desacoplado) ── */
.es-combo-list{display:block;position:fixed;background:var(--surface2);border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,0.6);min-width:200px;max-height:260px;overflow-y:auto;z-index:3000;opacity:0;transform:translateY(-3px) scale(0.99);pointer-events:none;visibility:hidden;transition:opacity 0.13s var(--ease-out-strong),transform 0.13s var(--ease-out-strong),visibility 0s linear 0.13s}
.es-combo-list.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s,0s}
.es-combo-opt{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:12.5px;transition:background 0.1s}
.es-combo-opt:hover,.es-combo-opt.active{background:var(--surface)}
.es-combo-opt .eco-code{color:var(--text);font-family:Consolas,monospace;font-size:11px}
.es-combo-opt .eco-desc{flex:1;color:var(--text-muted)}
/* ── Filtros de selección: card flotante bajo el botón ⧩ Filtros ── */
#filter-panel{display:flex;position:fixed;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:12px;z-index:2500;width:248px;flex-direction:column;gap:8px;max-height:70vh;overflow-y:auto;opacity:0;transform:translateY(-3px) scale(0.99);pointer-events:none;visibility:hidden;transition:opacity 0.13s var(--ease-out-strong),transform 0.13s var(--ease-out-strong),visibility 0s linear 0.13s}
#filter-panel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s,0s}
.flt-group-label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:600}
.flt-chips{display:flex;flex-wrap:wrap;gap:4px}
.flt-chip{background:var(--surface);color:var(--text-muted);border:1px solid var(--border);border-radius:12px;padding:2px 9px;font-size:11px;font-family:Consolas,monospace;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s,transform 0.14s var(--ease-out-strong)}
.flt-chip:hover{border-color:var(--border-strong);color:var(--text)}
.flt-chip.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
#filter-count{font-size:11px;color:var(--text-muted)}
#filter-clear{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;font-size:12px;cursor:pointer;transition:background 0.15s,border-color 0.15s}
#filter-clear:hover{background:var(--surface3);border-color:var(--border-strong)}
/* ── Ocupación (color por estado + fechas) ── */
#occ-panel{display:flex;position:fixed;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:12px;z-index:2500;width:250px;flex-direction:column;gap:8px;max-height:74vh;overflow-y:auto;opacity:0;transform:translateY(-3px) scale(0.99);pointer-events:none;visibility:hidden;transition:opacity 0.13s var(--ease-out-strong),transform 0.13s var(--ease-out-strong),visibility 0s linear 0.13s}
#occ-panel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s,0s}
.occ-dates{display:flex;flex-direction:column;gap:6px}
.occ-dates label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--text-muted)}
.occ-dates input{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;font-size:12px;outline:none}
.occ-dates input:focus{border-color:var(--accent)}
.occ-chip{display:flex;align-items:center;gap:6px;background:var(--surface);color:var(--text-muted);border:1px solid var(--border);border-radius:12px;padding:3px 10px;font-size:11px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,opacity .15s}
.occ-chip .occ-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.occ-chip.off{opacity:.4}
.occ-chip.on{color:var(--text);border-color:var(--border-strong)}
.occ-hint{font-size:10.5px;color:var(--text-faint);line-height:1.4}
#occ-clear{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;font-size:12px;cursor:pointer;transition:background .15s,border-color .15s}
#occ-clear:hover{background:var(--surface3);border-color:var(--border-strong)}
#btn-occ.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.occ-head{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 2px}
.occ-head span{font-size:13px;font-weight:700;color:var(--text)}
#occ-close{background:transparent;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1;transition:background .12s,color .12s}
#occ-close:hover{background:var(--surface3);color:var(--text)}
/* Tooltip 2D (hover sobre módulos, estilo del tip 3D) */
#tip2d{position:fixed;z-index:4000;pointer-events:none;background:rgba(12,14,20,.94);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.5;box-shadow:var(--shadow-2);max-width:280px;display:none;font-family:var(--font)}
#tip2d .t2-code{font-family:Consolas,monospace;font-weight:700;font-size:12.5px;margin-bottom:3px}
#tip2d .t2-row{display:flex;gap:6px}
#tip2d .t2-k{color:var(--text-faint);min-width:64px}
#tip2d .t2-v{color:var(--text)}
#tip2d .t2-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.insp-shortcuts{margin-top:auto;border-top:1px solid var(--border);font-size:11px;color:var(--text-faint)}
.insp-shortcuts summary{padding:9px 14px;cursor:pointer;list-style:none;user-select:none;text-transform:uppercase;font-size:10.5px;letter-spacing:0.05em}
.insp-shortcuts summary::-webkit-details-marker{display:none}
.insp-shortcuts summary::before{content:'▸ ';font-size:9px}
.insp-shortcuts[open] summary::before{content:'▾ '}
.insp-shortcuts-body{padding:0 14px 12px;line-height:1.7}
.insp-shortcuts kbd{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 4px;font-family:Consolas,monospace;font-size:10px}
/* ── Feature Zonas poligonales: panel de lista de zonas ── */
#zones-panel{border-top:1px solid var(--border)}
.zone-row{display:flex;align-items:center;gap:6px;padding:6px 14px;border-bottom:1px solid var(--border);transition:background 0.12s}
.zone-row:hover{background:var(--surface2)}
.zone-row .zone-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0;border:1px solid rgba(255,255,255,0.2)}
.zone-row .zone-name{flex:1;font-size:12px;color:var(--text);background:none;border:none;outline:none;min-width:0}
.zone-row .zone-count{font-size:10px;color:var(--text-muted);white-space:nowrap}
.zone-row button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:3px}
.zone-row button:hover{color:var(--text);background:var(--surface3)}
#zone-mode-btns{display:flex}
.flt-mini.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#toast-container{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:6px;z-index:9999;pointer-events:none}
.toast{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 14px;font-size:13px;opacity:0;transform:translateY(8px);transition:opacity 0.13s ease-in,transform 0.13s ease-in;box-shadow:0 4px 12px rgba(0,0,0,0.5)}
.toast.show{opacity:1;transform:none;transition:opacity 0.18s ease-out,transform 0.18s ease-out}
#modal-3d{position:fixed;inset:0;background:rgba(10,12,18,0.97);z-index:1000;display:flex;flex-direction:column}
#modal-3d[hidden]{display:none}
#modal-3d-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
#modal-3d-header span{font-weight:600;font-size:14px}
#btn-3d-close{background:none;border:1px solid var(--border);color:var(--text);border-radius:5px;padding:5px 14px;cursor:pointer;font-size:13px;transition:background 0.15s,border-color 0.15s,color 0.15s,transform 0.14s var(--ease-out-strong)}
#btn-3d-close:hover{border-color:var(--danger);color:var(--danger)}
#canvas-3d{flex:1;display:block;width:100%;height:100%;touch-action:none}

/* ── Feature 3: searchable store combobox ── */
#store-combo{position:relative}
#store-input{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:5px 8px;font-size:13px;outline:none;width:230px;transition:border-color 0.15s}
#store-input:focus{border-color:var(--accent)}
#store-list{display:block;position:fixed;background:var(--surface2);border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,0.6);min-width:280px;max-height:340px;overflow-y:auto;z-index:3000;opacity:0;transform:translateY(-3px) scale(0.99);pointer-events:none;visibility:hidden;transition:opacity 0.13s var(--ease-out-strong),transform 0.13s var(--ease-out-strong),visibility 0s linear 0.13s}
#store-list.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s,0s}
.store-opt{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:13px;transition:background 0.1s}
.store-opt:hover,.store-opt.active{background:var(--surface)}
.store-opt .so-name{flex:1;color:var(--text)}
.store-opt .so-key{color:var(--text-muted);font-family:Consolas,monospace;font-size:11px}
.store-opt .so-chain{font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;letter-spacing:0.03em}
.so-chain.LC{background:#1a3a2a;color:#5fd08a}
.so-chain.AM{background:#3a2a1a;color:#e0a85f}
.store-grp{padding:5px 12px 3px;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:600}
/* ── Feature 4/5: legend tools, filter checkbox + color input per row ── */
#legend-tools{display:flex;gap:4px}
.flt-mini{background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);border-radius:3px;font-size:10px;padding:2px 7px;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s,transform 0.14s var(--ease-out-strong);white-space:nowrap}
.flt-mini:hover{color:var(--text);border-color:var(--accent)}
.legend-item{display:flex;align-items:center;gap:5px;color:var(--text-muted)}
.legend-item input[type=checkbox]{margin:0;cursor:pointer;width:13px;height:13px;accent-color:var(--accent)}
.legend-item input[type=color]{width:18px;height:14px;padding:0;border:1px solid var(--border);border-radius:2px;background:none;cursor:pointer}
.legend-item input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.legend-item input[type=color]::-webkit-color-swatch{border:none;border-radius:1px}
.legend-item.off{opacity:0.4}
/* ── Feature 6: multi-select bulk panel ── */
#multi-panel{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
#multi-count{font-size:15px;font-weight:700;color:var(--accent)}
#multi-matchsys{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px;font-size:13px;cursor:pointer;width:100%;transition:background 0.15s}
#multi-matchsys:hover{background:var(--surface3)}
#multi-delete{background:var(--danger);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px;font-size:13px;cursor:pointer;width:100%;font-weight:500;transition:background 0.15s}
#multi-delete:hover{background:#c04040}

/* ── Tool-mode badge + buttons ── */
#mode-badge{position:absolute;bottom:36px;left:10px;background:rgba(19,21,27,0.85);color:var(--accent);font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);pointer-events:none;font-family:var(--font)}
.mode-btn{background:var(--surface);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:12px;cursor:pointer;white-space:nowrap;transition:background 0.15s,border-color 0.15s,color 0.15s,transform 0.14s var(--ease-out-strong)}
.mode-btn:hover{color:var(--text);border-color:var(--border-strong)}
.mode-btn.active{background:var(--surface3);color:var(--accent);border-color:var(--accent)}
.tb-sep{width:1px;height:22px;background:var(--border);margin:0 4px;flex-shrink:0}

/* ── Persistence: save indicator ── */
#save-indicator{position:absolute;bottom:36px;left:135px;background:rgba(26,29,39,0.85);color:#5fd08a;font-size:11px;padding:3px 8px;border-radius:4px;border:1px solid var(--border);pointer-events:none;font-family:'Segoe UI',system-ui,sans-serif;white-space:nowrap}
#save-indicator:empty{display:none}

/* ── Auth: login overlay + topbar user ── */
#login-overlay{position:fixed;inset:0;z-index:5000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
/* Fondo: halo de acento + grilla sutil (evoca el plano de tienda), enmascarada al centro */
.login-bg{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(1100px 620px at 50% -12%, var(--accent-dim), transparent 60%),
    radial-gradient(820px 520px at 100% 118%, rgba(245,166,35,.06), transparent 55%),
    linear-gradient(transparent 0 39px, var(--border) 39px 40px) 0 0/40px 40px,
    linear-gradient(90deg, transparent 0 39px, var(--border) 39px 40px) 0 0/40px 40px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 44%, #000, transparent 100%);
  mask-image:radial-gradient(72% 62% at 50% 44%, #000, transparent 100%)}
.login-card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 26px 22px;width:364px;max-width:100%;box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:14px;
  animation:login-in .42s var(--ease-out-strong) both}
@keyframes login-in{from{opacity:0;transform:translateY(14px) scale(.98);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.login-logo{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--accent),#3d6fe0);box-shadow:0 6px 16px var(--accent-dim),inset 0 1px 0 rgba(255,255,255,.28)}
.login-logo-dot{width:13px;height:13px;border-radius:3px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.login-title{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:1.15}
.login-sub{font-size:12px;color:var(--text-muted);line-height:1.4;margin-top:3px}
.login-field{display:flex;flex-direction:column;gap:6px}
.login-label{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
#login-email,#login-pass{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 12px;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
#login-email::placeholder,#login-pass::placeholder{color:var(--text-faint)}
#login-email:focus,#login-pass:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-dim)}
.login-pass-wrap{position:relative;display:flex}
.login-pass-wrap #login-pass{padding-right:42px}
.login-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;font-size:15px;line-height:1;padding:6px;border-radius:6px;opacity:.55;transition:opacity .15s,background .15s}
.login-eye:hover{opacity:1;background:var(--surface3)}
#login-btn-pass{margin-top:2px;background:linear-gradient(180deg,var(--accent-hover),var(--accent));color:#fff;border:none;border-radius:var(--radius-sm);padding:11px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px var(--accent-dim);transition:filter .15s,transform .1s var(--ease-out-strong),box-shadow .15s}
#login-btn-pass:hover{filter:brightness(1.06);box-shadow:0 4px 14px var(--accent-dim)}
#login-btn-pass:active{transform:scale(.985)}
#login-btn-pass:disabled{opacity:.6;cursor:default;filter:none;box-shadow:none}
.login-divider{display:flex;align-items:center;gap:10px;color:var(--text-faint);font-size:11px;margin:1px 0}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--border)}
#login-btn{background:var(--surface2);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s var(--ease-out-strong)}
#login-btn:hover{background:var(--surface3);color:var(--text);border-color:var(--border-strong)}
#login-btn:active{transform:scale(.985)}
#login-btn:disabled{opacity:.6;cursor:default}
.login-hint{font-size:11px;color:var(--text-faint);line-height:1.5;text-align:center;margin-top:2px}
.login-hint b{color:var(--text-muted);font-weight:600}
@media (prefers-reduced-motion:reduce){.login-card{animation:none}}
@media (max-width:420px){.login-card{padding:22px 18px}}
.user-email{font-size:12px;color:var(--text-muted);margin-left:auto;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;background:var(--surface2);border-radius:999px;padding:5px 12px}

/* ── Batch: system fields, custom-type controls, type-explorer modal ── */
#sys-fields{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding-top:8px;margin-top:2px}
.chk-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text)}
.chk-row input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}
#status-row.prominent{background:#3a2a10;border:1px solid var(--accent-warm);border-radius:6px;padding:6px 8px}
.legend-rm{background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;margin-left:2px}
.legend-rm:hover{color:#ff6b6b}
#typefind-modal{display:none;position:fixed;inset:0;z-index:4000;background:rgba(10,12,18,0.7);align-items:center;justify-content:center}
.tf-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:520px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,0.6)}
.tf-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.tf-title{font-weight:600;font-size:14px}
.tf-controls{display:flex;align-items:center;gap:10px;padding:12px 16px}
.tf-controls .field-input{flex:0 0 220px}
.tf-total{font-size:12px;color:var(--text-muted);margin-left:auto}
.tf-table-wrap{overflow-y:auto;padding:0 16px 16px}
.tf-table{width:100%;border-collapse:collapse;font-size:13px}
.tf-table th{text-align:left;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:0.04em;padding:6px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.tf-table td{padding:7px 8px;border-bottom:1px solid var(--border)}
.tf-row{cursor:pointer;transition:background 0.1s}
.tf-row:hover{background:var(--surface2)}
.tf-key{color:var(--text-muted);font-family:Consolas,monospace;font-size:11px}
.tf-n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}

/* ── #1 Left type-palette panel (collapsible to a thin strip) ── */
#type-palette{flex:0 0 224px;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);overflow:hidden;transition:flex-basis 0.15s}
#type-palette.collapsed{flex-basis:30px}                 /* thin strip; head/toggle stay visible */
#type-palette.collapsed #type-palette-list{display:none}
#type-palette.collapsed .tp-title{display:none}
#type-palette.collapsed .tp-head{justify-content:center;padding:8px 4px}
#type-palette.collapsed .tp-search{display:none}
.tp-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.tp-title{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);font-weight:600}
#palette-toggle{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:2px 4px;border-radius:3px}
#palette-toggle:hover{color:var(--text)}
.tp-search{margin:8px 8px 10px;height:30px;padding:6px 8px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;outline:none;transition:border-color 0.15s;flex-shrink:0}
.tp-search:focus{border-color:var(--accent)}
.tp-search::placeholder{color:var(--text-faint)}
#type-palette-list{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:3px}
.tp-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;color:var(--text);border:none;border-left:2px solid transparent;border-radius:var(--radius-sm);padding:8px 10px;min-height:40px;font-size:12.5px;cursor:pointer;transition:background 0.12s;white-space:normal}
.tp-btn:hover{background:var(--surface2)}
.tp-btn.active{background:var(--accent-dim);border-left-color:var(--accent)}
.tp-btn.active .tp-desc{color:var(--accent)}
.tp-sw{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.tp-sw-input{width:14px;height:14px;padding:0;border:none;background:none;cursor:pointer;border-radius:4px;overflow:hidden;flex-shrink:0}
.tp-sw-input::-webkit-color-swatch-wrapper{padding:0}
.tp-sw-input::-webkit-color-swatch{border:none;border-radius:4px}
.tp-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.tp-desc{font-size:12.5px;font-weight:500;color:var(--text);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-kode{font-family:Consolas,monospace;font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.04em}
.tp-sec-label{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);font-weight:600;margin:14px 4px 6px}
.tp-sec-label:first-child{margin-top:4px}
.tp-sec-ref{border-top:1px solid var(--border);padding-top:8px}
.tp-ref{opacity:0.75}
.tp-add{justify-content:center;color:var(--accent);border-style:dashed;margin-top:4px}
/* ── #2 Inspector collapse ── */
.insp-header{display:flex;align-items:center;justify-content:space-between}
#insp-toggle{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:3px}
#insp-toggle:hover{color:var(--text)}
#inspector.collapsed{width:auto}
#inspector.collapsed #no-sel,#inspector.collapsed #sel-panel,#inspector.collapsed #multi-panel,#inspector.collapsed .insp-shortcuts{display:none !important}
/* ── #3 New-type modal ── */
#newtype-modal{display:none;position:fixed;inset:0;z-index:4500;background:rgba(10,12,18,0.7);align-items:center;justify-content:center}
.nt-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;width:300px;max-width:92vw;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 48px rgba(0,0,0,0.6)}
.nt-title{font-weight:700;font-size:15px;margin-bottom:4px}
.nt-card input[type=color]{height:34px;padding:2px}
.nt-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.nt-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.nt-primary:hover{background:#3a7aee}
/* ── #4 Duplicate-code banner ── */
#dup-banner{display:none;position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:6000;background:#7a1f1f;border:1px solid #e05252;color:#ffe6e6;border-radius:8px;padding:12px 18px;font-size:14px;font-weight:600;box-shadow:0 8px 28px rgba(0,0,0,0.6);align-items:center;gap:12px;max-width:90vw}
#dup-banner.show{display:flex;animation:dupin 0.18s ease-out}
@keyframes dupin{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.dup-ico{font-size:20px}
#dup-banner-close{background:#e05252;color:#fff;border:none;border-radius:5px;padding:5px 12px;cursor:pointer;font-size:13px;font-weight:600}
#dup-banner-close:hover{background:#f06060}

/* #2 inline code editor overlay */
.inline-edit{z-index:7000;background:#fff;color:#111;border:2px solid var(--accent);border-radius:4px;font:600 13px Consolas,monospace;padding:2px 6px;outline:none;box-shadow:0 4px 14px rgba(0,0,0,0.5)}

/* Editor anidado: context menu + perfil modal */
.ctx-menu{position:fixed;z-index:8000;background:var(--surface2);border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,0.6);overflow:hidden;min-width:180px}
.ctx-item{padding:9px 14px;font-size:13px;color:var(--text);cursor:pointer}
.ctx-item:hover{background:var(--surface)}
#perfil-modal{display:none;position:fixed;inset:0;z-index:4200;background:rgba(10,12,18,0.72);align-items:center;justify-content:center}
.perfil-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:min(720px,94vw);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,0.6)}
.perfil-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
#perfil-title{font-weight:600;font-size:14px}
.perfil-head-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.perfil-lbl{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:4px}
.perfil-num{width:52px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:3px 5px;font-size:12px}
.perfil-body{display:flex;gap:14px;padding:14px 16px;overflow:auto}
.perfil-canvas-wrap{overflow:auto;flex:1;border:1px solid var(--border);border-radius:6px;background:#0f1117;max-height:66vh}
#perfil-canvas{display:block}
.perfil-sel-box{flex:0 0 190px;display:flex;flex-direction:column;gap:8px;align-self:flex-start}

/* ── Feature 1: toolbar contextual flotante sobre la selección ── */
#float-toolbar{position:fixed;z-index:5000;display:none;background:var(--surface2);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.5);gap:4px;padding:4px}
#float-toolbar.show{display:flex}
#float-toolbar button{min-width:40px;min-height:40px;font-size:16px;border:none;background:none;color:var(--text);border-radius:6px;cursor:pointer;transition:background 0.12s}
#float-toolbar button:active{background:var(--surface)}

/* ── Microinteracciones (Emil): feedback de presión en pressables.
   La transition combinada (declarada DESPUÉS de las reglas base) unifica y
   agrega transform; :active scale-down interrumpible. NO aplica a inputs. ── */
.top-btn,.mode-btn,.tb-btn,.tp-btn,.flt-chip,.insp-stepper button,.mods-cell,.es-dir-seg button,.mods-meta button,#filter-clear,.fv-head button{transition:background 0.15s,border-color 0.15s,color 0.15s,transform 0.14s var(--ease-out-strong)}
.top-btn:active,.mode-btn:active,.tb-btn:active,.tp-btn:active,.flt-chip:active,.insp-stepper button:active,.mods-cell:active,.es-dir-seg button:active,.mods-meta button:active,#filter-clear:active,.fv-head button:active{transform:scale(0.97)}
/* Reduced motion: apagar transiciones/animaciones (suficiente para esta app) */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
}

/* ── MODO CLARO: redefinición completa de los tokens de color del :root +
   overrides de los colores fijos que romperían en claro. Los tokens
   geométricos (--radius/--radius-sm/--font/--ease-out-strong) no cambian. ── */
body.light{
  --bg:#f4f5f7;--surface:#ffffff;--surface2:#eef0f3;--surface3:#e4e7ec;
  --border:#d7dbe2;--border-strong:#b9c0cc;
  --accent:#5286ff;--accent-hover:#3d78f0;--accent-dim:rgba(82,134,255,.12);
  --accent-warm:#c77f00;--danger:#d64545;
  --text:#1a1f2b;--text-muted:#5a6372;--text-faint:#8a93a3;
  --shadow-1:0 1px 3px rgba(20,25,40,.08);--shadow-2:0 8px 24px rgba(20,25,40,.14);
}
body.light #zoom-label{background:rgba(255,255,255,0.9)}
body.light #mode-badge{background:rgba(255,255,255,0.9)}
body.light #save-indicator{background:rgba(255,255,255,0.9);color:#1f9d55}
body.light .zone-row .zone-swatch{border-color:rgba(0,0,0,0.15)}
body.light .so-chain.LC{background:#d9f2e2;color:#1f7a44}
body.light .so-chain.AM{background:#f4e8d5;color:#9a6b1f}
body.light .es-combo-list,body.light #store-list{box-shadow:0 6px 20px rgba(20,25,40,0.16)}
body.light .toast{box-shadow:0 4px 12px rgba(20,25,40,0.15)}
body.light #float-toolbar{box-shadow:0 6px 20px rgba(20,25,40,0.15)}
body.light #touch-undo button{box-shadow:0 4px 12px rgba(20,25,40,0.15)}

/* ── Feature 3: undo/redo flotantes en touch ── */
#touch-undo{position:fixed;bottom:18px;right:18px;z-index:4900;display:none;gap:8px}
@media (pointer:coarse){ #touch-undo{display:flex} }
#touch-undo button{width:48px;height:48px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);font-size:20px;color:var(--text);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.4)}

/* ── Feature 2: botones táctiles grandes ── */
@media (pointer:coarse){
  .top-btn{padding:10px 16px;font-size:14px;min-height:44px}
  .tp-btn{padding:10px 10px;font-size:14px;min-height:44px}
  .tb-btn,.mode-btn,.flt-mini{min-height:40px;padding:8px 12px}
  .field-input,#store-input,.tp-search{min-height:40px;font-size:15px}
  #inspector{width:280px}
  .chk-row{min-height:36px}
  #topbar{height:auto;min-height:56px;padding:6px 12px}
  #toolbar{height:auto;min-height:52px}
  #more-menu button,#export-menu button{min-height:44px;font-size:14px}
  .insp-sec-head{min-height:40px}
}
#tip3d{position:fixed;display:none;pointer-events:none;background:var(--surface2);border:1px solid var(--border);color:var(--text);font-family:Consolas,monospace;font-size:12px;padding:4px 8px;border-radius:4px;z-index:9999;white-space:nowrap}

/* ── Modo solo-lectura (rol auditor / tienda): oculta afordancias de edición ── */
body.readonly #type-palette{display:none}
body.readonly #mode-lasso{display:none}   /* selección múltiple para editar; se deja Pan/Seleccionar/Colorby */
body.readonly #btn-import{display:none}    /* import = escritura */
body.readonly #touch-undo{display:none!important}
body.readonly #float-toolbar{display:none!important}
body.readonly #multi-panel,
body.readonly #multi-delete{display:none!important}
/* Inspector: valores visibles pero no editables. */
body.readonly #inspector input,
body.readonly #inspector select,
body.readonly #inspector textarea{pointer-events:none;opacity:.65}
body.readonly #inspector .insp-shortcuts{display:none}
/* Rol tienda: una sola tienda → sin selector de tiendas. */
body.role-tienda #store-combo{display:none}