/* ---- sidebar izquierdo: explorador ---- */
#panelLeft{position:absolute;top:52px;left:0;width:300px;height:calc(100% - 52px);background:var(--panel);
  border-right:1px solid var(--line);transition:left .22s ease;z-index:20;display:flex;flex-direction:column;
  box-shadow:16px 0 40px #0008;}
#panelLeft.collapsed{left:-300px;}
#reopenLeftBtn{position:absolute;top:64px;left:14px;z-index:19;display:none;}
#reopenLeftBtn.show{display:flex;}

/* ---- sidebar derecho: nota (preview/editor) ---- */
#panel{position:absolute;top:52px;right:0;width:380px;height:calc(100% - 52px);background:var(--panel);
  border-left:1px solid var(--line);transition:right .22s ease;z-index:20;display:flex;flex-direction:column;
  box-shadow:-16px 0 40px #0008;}
#panel.collapsed{right:-380px;}
#reopenBtn{position:absolute;top:64px;right:14px;z-index:19;display:none;}
#reopenBtn.show{display:flex;}

.phead2{padding:10px 14px 8px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;}
.phead2 .ptype{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:6px;flex:1;}
.iconbtn{background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:5px 7px;
  border-radius:6px;line-height:1;}
.iconbtn:hover{background:var(--plum);color:var(--text);}
.iconbtn.pinned{color:var(--accent);}
#panel input.ptitle{width:100%;background:transparent;border:none;color:var(--text);font-size:17px;
  font-weight:700;outline:none;font-family:inherit;padding:6px 14px 0;}
#panel textarea{flex:1;width:100%;background:var(--bg);border:none;color:var(--text);padding:12px 14px;
  font-family:'Cascadia Code',ui-monospace,Consolas,monospace;font-size:13px;line-height:1.6;outline:none;resize:none;}
#linksBox{padding:8px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--dim);max-height:110px;overflow:auto;flex-shrink:0;}
#linksBox .lrow{display:flex;align-items:center;gap:5px;color:var(--planeta-fill);cursor:pointer;margin:2px 0;}
#linksBox .lrow:hover{text-decoration:underline;}
#linksBox .lhead{color:var(--dim);text-transform:uppercase;font-size:9.5px;letter-spacing:1px;margin:6px 0 2px;}
#linksBox .lhead:first-child{margin-top:0;}
#preview{flex:1;padding:12px 14px;overflow:auto;font-size:13.5px;line-height:1.65;display:none;}
#preview h1,#preview h2,#preview h3{color:var(--text);margin:.6em 0 .3em;}
#preview a{color:var(--planeta-fill);} #preview ul{padding-left:20px;}
.prow{display:flex;gap:6px;padding:8px 14px;border-top:1px solid var(--line);flex-wrap:wrap;flex-shrink:0;}
.btn{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 10px;
  font-size:11.5px;cursor:pointer;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;gap:5px;}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.danger:hover{border-color:#ff5c5c;color:#ff5c5c;}
.btn.primary{background:var(--plum);border-color:var(--accent);}
#emptyNota{padding:24px 16px;color:var(--dim);font-size:13px;text-align:center;}

#treeContainer{flex:1;overflow:auto;padding:6px 6px 14px;}
.trow{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:12.5px;white-space:nowrap;}
.trow:hover{background:var(--surface-hover);}
.trow.hl{background:var(--plum);color:var(--accent);}
.caret{width:12px;display:inline-block;text-align:center;color:var(--dim);font-size:10px;flex-shrink:0;}
.tree-children{margin-left:14px;border-left:1px dashed var(--line);padding-left:6px;}
.treehead .btn{padding:4px 8px;font-size:10.5px;}