#notasMargen{position:absolute;top:0;right:0;bottom:0;width:220px;pointer-events:none;z-index:100;overflow:hidden}@media (max-width:819px){#notasMargen{display:none}}@media (min-width:1180px){#notasMargen{width:240px}}.nota-margen{position:absolute;right:0;width:200px;background:linear-gradient(135deg,rgba(255,248,220,.95) 0,rgba(255,243,200,.9) 100%);border:1px solid rgba(220,185,100,.4);border-radius:6px 12px 12px 6px;padding:10px 12px;box-shadow:2px 4px 16px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.4);font-family:Caveat,cursive;font-size:.92rem;line-height:1.4;color:#4a3728;cursor:text;pointer-events:all;transition:transform .2s ease,box-shadow .2s ease;z-index:10}[data-theme=light] .nota-margen{background:linear-gradient(135deg,rgba(255,253,240,.97) 0,rgba(255,248,220,.93) 100%);border-color:rgba(200,165,80,.35);box-shadow:2px 4px 14px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6)}.nota-margen::before{content:'';position:absolute;left:-16px;top:50%;width:16px;height:1px;background:rgba(220,185,100,.5);transform:translateY(-50%)}.nota-margen:hover{transform:scale(1.02) translateX(-4px);box-shadow:4px 8px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.5);z-index:20}.nota-margen-editor{width:100%;min-height:60px;background:0 0;border:none;font-family:Caveat,cursive;font-size:.92rem;color:inherit;resize:vertical;outline:0;line-height:1.4;display:block;box-sizing:border-box;margin:0;padding:0}.nota-margen-editor::placeholder{color:rgba(74,55,40,.4);font-style:italic}.nota-margen-toolbar{display:flex;justify-content:flex-end;gap:4px;margin-top:6px;opacity:0;transition:opacity .2s ease}.nota-margen:focus-within .nota-margen-toolbar,.nota-margen:hover .nota-margen-toolbar{opacity:1}.nota-margen-btn{background:rgba(0,0,0,.08);border:none;border-radius:4px;padding:3px 8px;font-size:.72rem;cursor:pointer;color:#4a3728;font-family:var(--font-ui, 'Inter', sans-serif);transition:background .15s ease,transform .1s ease;line-height:1.4}.nota-margen-btn:hover{background:rgba(0,0,0,.14)}.nota-margen-btn:active{transform:scale(.95)}.nota-margen-btn--delete{color:#b54040;background:rgba(181,64,64,.08)}.nota-margen-btn--delete:hover{background:rgba(181,64,64,.15)}.nota-margen-btn--save{color:#2d6a4a;background:rgba(45,106,74,.1)}.nota-margen-btn--save:hover{background:rgba(45,106,74,.18)}.verse-note-indicator{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--studio-accent,#d4a530);color:#111827;font-size:.6rem;font-weight:900;margin-left:6px;cursor:pointer;vertical-align:middle;flex-shrink:0;transition:transform .2s ease,box-shadow .2s ease;font-family:var(--font-ui, 'Inter', sans-serif);line-height:1;user-select:none;position:relative;top:-1px}.verse-note-indicator:hover{transform:scale(1.2);box-shadow:0 2px 8px rgba(0,0,0,.2)}@keyframes nota-enter{from{opacity:0;transform:translateX(12px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}.nota-margen{animation:nota-enter .25s ease both}body.reading-mode #notasMargen{width:200px;opacity:.85}body.reading-mode #notasMargen:hover{opacity:1}.nota-margen.saving{border-color:rgba(45,106,74,.6);transition:border-color .3s ease}.nota-margen.saved{border-color:rgba(45,106,74,.3)}