/* ========================================
   IMG-CORPUS LITE — CSS
   Single-image annotation tool
   ======================================== */
:root {
    --bg-deep:#0d0d12; --bg-main:#131318; --bg-surf:#1a1a22; --bg-elev:#22222e;
    --bg-hover:#2a2a38; --bg-active:#32324a;
    --brd:#2a2a3a; --brd-m:#3a3a4e; --brd-s:#4a4a62;
    --t1:#e8e8f0; --t2:#9898b0; --t3:#686880; --t-inv:#0d0d12;
    --ac:#4ecdc4; --ac-dim:rgba(78,205,196,0.15); --ac-mid:rgba(78,205,196,0.4);
    --ac2:#a78bfa; --ac2-dim:rgba(167,139,250,0.15);
    --warn:#f59e42; --danger:#f06060; --danger-dim:rgba(240,96,96,0.15);
    --ff:'IBM Plex Sans',-apple-system,sans-serif;
    --fm:'IBM Plex Mono','Consolas',monospace;
    --hdr-h:44px; --rpanel-w:320px; --tb-h:40px;
    --r-s:4px; --r-m:6px; --r-l:10px;
    --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:var(--ff);font-size:13px;color:var(--t1);background:var(--bg-deep);-webkit-font-smoothing:antialiased}
::selection{background:var(--ac-mid);color:var(--t1)}
input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brd-m);border-radius:3px}

/* HEADER */
#app-header{height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--bg-surf);border-bottom:1px solid var(--brd);gap:12px;user-select:none}
.header-left{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo{font-size:15px;font-weight:700;letter-spacing:-.5px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:0}
.logo-img{color:var(--ac)}.logo-dash{color:var(--t3)}.logo-corpus{color:var(--t1)}
.logo-ver{font-size:10px;color:var(--t3);font-weight:400;margin-left:5px;background:var(--ac-dim);padding:1px 6px;border-radius:8px;color:var(--ac)}
.header-center{flex:1;display:flex;justify-content:center}
.image-name{font-family:var(--fm);font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.header-right{display:flex;align-items:center;gap:3px;flex-shrink:0}
.hdr-sep{width:1px;height:20px;background:var(--brd);margin:0 4px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;font-weight:500;font-size:12px;transition:all .12s var(--ease);background:transparent;white-space:nowrap}
.btn .material-symbols-outlined{font-size:17px}
.btn-ghost{color:var(--t2)}.btn-ghost:hover{color:var(--t1);background:var(--bg-hover)}
.btn-accent{background:var(--ac-dim);color:var(--ac);border-color:rgba(78,205,196,.2)}.btn-accent:hover{background:rgba(78,205,196,.25)}
.btn-primary{background:var(--ac);color:var(--t-inv);font-weight:600}.btn-primary:hover{background:#3dbdb5}
.btn-sm{padding:4px 7px;font-size:11px}
.btn-xs{padding:3px 5px;font-size:11px}
.btn-xs .material-symbols-outlined{font-size:15px}
.btn-label{font-size:11px}

/* LAYOUT */
#app-main{display:flex;height:calc(100vh - var(--hdr-h));overflow:hidden}

/* RESIZE HANDLE */
.resize-handle{width:5px;min-width:5px;cursor:col-resize;background:var(--brd);transition:background .15s;position:relative;z-index:10;flex-shrink:0}
.resize-handle:hover,.resize-handle.dragging{background:var(--ac)}

/* TOOLBAR */
.toolbar{height:var(--tb-h);display:flex;align-items:center;padding:0 8px;background:var(--bg-surf);border-bottom:1px solid var(--brd);gap:3px;user-select:none}
.tool-group{display:flex;align-items:center;gap:2px}
.tool-sep{width:1px;height:20px;background:var(--brd);margin:0 4px}
.tool-btn{width:30px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;background:transparent;color:var(--t2);transition:all .1s var(--ease)}
.tool-btn:hover{background:var(--bg-hover);color:var(--t1)}
.tool-btn.active{background:var(--ac-dim);color:var(--ac);border-color:rgba(78,205,196,.2)}
.tool-btn .material-symbols-outlined{font-size:18px}
.tool-select{background:var(--bg-elev);border:1px solid var(--brd);border-radius:var(--r-s);padding:3px 6px;font-size:11px;color:var(--t1);cursor:pointer;outline:none;max-width:120px}
.tool-select:focus{border-color:var(--ac)}
.zoom-lbl{font-family:var(--fm);font-size:10px;color:var(--t3);min-width:36px;text-align:center}
.bg-toggle{gap:3px!important}
.bg-btn{width:16px;height:16px;border-radius:50%;border:2px solid var(--brd);cursor:pointer}
.bg-btn:hover{border-color:var(--brd-s)}.bg-btn.active{border-color:var(--ac)}
.bg-btn[data-bg="#111118"]{background:#111118}
.bg-btn[data-bg="#555566"]{background:#555566}
.bg-btn[data-bg="#e8e8e8"]{background:#e8e8e8}

/* WORKSPACE */
#workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-deep)}
.canvas-wrap{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,var(--bg-main),var(--bg-deep))}
.canvas-wrap .canvas-container{position:absolute!important}
.canvas-empty{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--t3);gap:12px;z-index:1;cursor:pointer}
.canvas-empty .material-symbols-outlined{font-size:56px;opacity:.3}
.canvas-empty p{font-size:13px;max-width:260px;text-align:center;line-height:1.5}
.canvas-empty.hidden{display:none}
.canvas-wrap.panning{cursor:grab!important}
.canvas-wrap.panning canvas{cursor:grab!important}
.canvas-wrap.panning-active{cursor:grabbing!important}
.canvas-wrap.panning-active canvas{cursor:grabbing!important}

/* RIGHT PANEL */
#rightPanel{width:var(--rpanel-w);min-width:200px;max-width:500px;background:var(--bg-main);display:flex;flex-direction:column;overflow:hidden}
.rpanel-tabs{display:flex;border-bottom:1px solid var(--brd);background:var(--bg-surf)}
.rpanel-tab{flex:1;padding:7px 2px;text-align:center;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--t3);border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent}
.rpanel-tab:hover{color:var(--t2)}.rpanel-tab.active{color:var(--ac);border-bottom-color:var(--ac)}
.rpanel-content{flex:1;overflow-y:auto;padding:10px;display:none}.rpanel-content.active{display:block}
.rp-section{margin-bottom:12px}
.rp-section h4{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.ann-count{font-family:var(--fm);font-size:9px;background:var(--bg-elev);padding:1px 5px;border-radius:8px}
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.section-hdr h4{margin-bottom:0}

/* NOTES */
.note-item{background:var(--bg-elev);border:1px solid var(--brd);border-radius:var(--r-s);padding:6px;margin-bottom:4px}
.note-item-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.note-item-label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.3px}
.note-item-rm{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:0;line-height:1}
.note-item-rm:hover{color:var(--danger)}
.note-display{width:100%;padding:5px 6px;font-size:12px;line-height:1.4;color:var(--t1);background:var(--bg-surf);border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;white-space:pre-wrap;word-break:break-word;min-height:22px;transition:all .1s}
.note-display:hover{border-color:var(--brd);background:var(--bg-elev)}
.note-display.empty{color:var(--t3);font-style:italic}
.note-textarea{width:100%;min-height:48px;padding:5px 6px;background:var(--bg-elev);border:1px solid var(--brd);border-radius:var(--r-s);color:var(--t1);resize:vertical;outline:none;font-size:12px;line-height:1.4}
.note-textarea:focus{border-color:var(--ac)}
.note-textarea::placeholder{color:var(--t3)}
.hidden{display:none!important}

/* ANNOTATIONS */
.ann-item{background:var(--bg-elev);border:1px solid var(--brd);border-radius:var(--r-m);padding:7px;border-left:3px solid var(--ac);margin-bottom:6px;transition:border-color .12s}
.ann-item:hover{border-color:var(--brd-m)}
.ann-item.selected{border-color:var(--ac);background:var(--ac-dim)}
.ann-item.hover-highlight{background:rgba(245,158,66,.08)!important;border-color:var(--warn)!important}
.ann-hdr{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.ann-num{font-family:var(--fm);font-size:10px;font-weight:700;background:var(--ac);color:var(--t-inv);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ann-cat-sel{flex:1;background:var(--bg-surf);border:1px solid var(--brd);border-radius:var(--r-s);padding:2px 4px;font-size:10px;color:var(--t2);outline:none}
.ann-del{background:none;border:none;color:var(--t3);cursor:pointer;padding:1px;display:flex;align-items:center}
.ann-del:hover{color:var(--danger)}.ann-del .material-symbols-outlined{font-size:15px}
.ann-field{margin-top:4px}
.ann-field-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t3);margin-bottom:2px}
.ann-note-display{width:100%;padding:3px 5px;font-size:11px;line-height:1.35;color:var(--t1);background:var(--bg-surf);border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;white-space:pre-wrap;word-break:break-word;min-height:18px}
.ann-note-display:hover{border-color:var(--brd)}
.ann-note-display.empty{color:var(--t3);font-style:italic;font-size:10px}
.ann-note-edit{width:100%;min-height:32px;padding:3px 5px;background:var(--bg-surf);border:1px solid var(--brd);border-radius:var(--r-s);color:var(--t1);resize:vertical;outline:none;font-size:11px;line-height:1.35}
.ann-note-edit:focus{border-color:var(--ac)}

/* CATEGORIES */
.categories-section{border-top:1px solid var(--brd);padding-top:10px}
.category-item{display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:var(--r-s);font-size:11px;cursor:default}
.category-item:hover{background:var(--bg-hover)}
.cat-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cat-name{flex:1}
.cat-rm{opacity:0;cursor:pointer;background:none;border:none;color:var(--t3);font-size:13px;padding:0}
.category-item:hover .cat-rm{opacity:1}

/* LEVELS */
.level-item{display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:var(--r-s);margin-bottom:2px}
.level-item:hover{background:var(--bg-hover)}
.level-name{flex:1;font-size:11px;padding:2px 4px;border:1px solid transparent;border-radius:var(--r-s);outline:none;cursor:text}
.level-name:hover{border-color:var(--brd)}
.level-name:focus{border-color:var(--ac);background:var(--bg-elev)}
.level-rm{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:0;opacity:0;transition:opacity .1s}
.level-item:hover .level-rm{opacity:1}
.level-rm:hover{color:var(--danger)}

/* METADATA */
.meta-fields{display:flex;flex-direction:column;gap:6px}
.mf{margin-bottom:6px}
.mf label{display:block;font-size:10px;font-weight:600;color:var(--t3);margin-bottom:2px;text-transform:uppercase;letter-spacing:.3px}
.mf input[type="text"],.mf input[type="url"],.mf input[type="date"],.mf textarea,.mf select{width:100%;padding:5px 7px;background:var(--bg-elev);border:1px solid var(--brd);border-radius:var(--r-s);color:var(--t1);outline:none;font-size:11px}
.mf input:focus,.mf textarea:focus{border-color:var(--ac)}
.mf textarea{min-height:40px;resize:vertical;line-height:1.4}
.mf input::placeholder,.mf textarea::placeholder{color:var(--t3)}
.mf input[type="color"]{width:36px;height:26px;border:1px solid var(--brd);border-radius:var(--r-s);background:var(--bg-elev);cursor:pointer;padding:2px}

/* TAGS */
.tag-input-row{display:flex;gap:3px;margin-bottom:8px}
.tag-input{flex:1;padding:5px 7px;background:var(--bg-elev);border:1px solid var(--brd);border-radius:var(--r-s);color:var(--t1);outline:none;font-size:11px}
.tag-input:focus{border-color:var(--ac)}.tag-input::placeholder{color:var(--t3)}
.tags-cloud{display:flex;flex-wrap:wrap;gap:4px}
.tag-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:var(--ac-dim);color:var(--ac);border-radius:10px;font-size:11px;font-weight:500}
.tag-chip .tag-rm{cursor:pointer;background:none;border:none;color:inherit;opacity:.6;font-size:13px;padding:0;line-height:1}
.tag-chip .tag-rm:hover{opacity:1}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:var(--bg-surf);border:1px solid var(--brd-m);border-radius:var(--r-l);width:380px;max-height:80vh;overflow-y:auto;box-shadow:0 16px 50px rgba(0,0,0,.4)}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--brd)}
.modal-hdr h3{font-size:14px;font-weight:600}
.modal-x{background:none;border:none;color:var(--t2);cursor:pointer;font-size:18px;padding:2px}
.modal-body{padding:14px}
.modal-foot{display:flex;justify-content:flex-end;gap:5px;padding:10px 14px;border-top:1px solid var(--brd)}

/* TOAST */
.toast-container{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:3000;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:var(--bg-surf);border:1px solid var(--brd-m);border-radius:var(--r-m);padding:8px 16px;font-size:12px;color:var(--t1);box-shadow:0 6px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(10px);transition:all .2s var(--ease);pointer-events:auto;display:flex;align-items:center;gap:6px}
.toast.visible{opacity:1;transform:translateY(0)}
.toast .material-symbols-outlined{font-size:16px;color:var(--ac)}

/* Drop zone overlay */
.canvas-wrap.drag-over::after{
    content:'Soltar imagen aquí';position:absolute;inset:0;z-index:5;
    display:flex;align-items:center;justify-content:center;
    background:rgba(78,205,196,.08);border:2px dashed var(--ac);
    font-size:16px;font-weight:600;color:var(--ac);pointer-events:none;
}