/* KlipToc v293 · Creador de libros visuales — interfaz (biblioteca y editor). El lector usa libro-reader.css. */
:root{--lb-a:#4f46e5;--lb-bg:#f1f5f9;--lb-card:#fff;--lb-ink:#0f172a;--lb-mute:#64748b;--lb-line:#e2e8f0}
@media (prefers-color-scheme:dark){:root{--lb-bg:#0b1220;--lb-card:#162033;--lb-ink:#e2e8f0;--lb-mute:#94a3b8;--lb-line:#2a3a55}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--lb-bg);color:var(--lb-ink)}
body[data-view="ed"],body[data-view="rd"]{overflow:hidden}
[hidden]{display:none!important}
.lb-b{font:inherit;font-weight:600;border:1px solid var(--lb-line);background:var(--lb-card);color:var(--lb-ink);border-radius:10px;padding:.55rem .95rem;cursor:pointer}
.lb-b:hover{border-color:var(--lb-a)}.lb-b.pri{background:var(--lb-a);border-color:var(--lb-a);color:#fff}.lb-b.sm{padding:.3rem .55rem;font-size:13px}.lb-b.danger:hover{border-color:#e11d48;color:#e11d48}
.lb-b:focus-visible,.lbe-b:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f59e0b;outline-offset:1px}
.lb-wrap{max-width:1100px;margin:0 auto;padding:1.2rem 1rem 3rem}
.lb-head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.lb-head h1{margin:0;font-size:1.6rem}
.lb-head .row{display:flex;flex-wrap:wrap;gap:.5rem}
.lb-sub{color:var(--lb-mute);margin:.2rem 0 1.2rem}
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.1rem}
.lb-card{background:var(--lb-card);border:1px solid var(--lb-line);border-radius:14px;padding:.7rem;display:flex;flex-direction:column;gap:.35rem}
.lb-card h3{margin:.2rem 0 0;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-meta{margin:0;color:var(--lb-mute);font-size:12px}
.lb-cover{display:block;width:100%;padding:0;border:0;border-radius:6px;overflow:hidden;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);background:#fff}
.lb-cover:hover{transform:translateY(-2px)}
.lb-acts{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.lb-empty{text-align:center;padding:3rem 1rem;border:2px dashed var(--lb-line);border-radius:16px;color:var(--lb-mute)}
.lb-empty h2{margin:.2rem 0;color:var(--lb-ink)}
.lb-toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#0f172a;color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:99;transition:.25s;max-width:92vw}
.lb-toast.on{opacity:1;transform:translate(-50%,0)}.lb-toast.bad{background:#be123c}
.lb-modal{position:fixed;inset:0;background:rgba(2,6,23,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.lb-dlg{background:var(--lb-card);border-radius:16px;padding:1.2rem;max-width:640px;width:100%;max-height:90vh;overflow:auto}
.lb-dlg h2{margin:0 0 .8rem}
.lb-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem}
.lb-tpl{display:flex;flex-direction:column;gap:.15rem;text-align:left;border:1px solid var(--lb-line);background:var(--lb-bg);color:inherit;border-radius:12px;padding:.8rem;cursor:pointer;font:inherit}
.lb-tpl:hover{border-color:var(--lb-a)}.lb-tpl .ic{font-size:1.8rem}.lb-tpl small{color:var(--lb-mute)}
#vRd{position:fixed;inset:0;display:flex;flex-direction:column;background:#0f172a;z-index:20}
.lb-rtop{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;background:#0b1220;color:#e2e8f0}
.lb-rtop strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-rtop .lb-b{background:#1e293b;color:#e2e8f0;border-color:#475569}
#rdHost{flex:1;min-height:0}
#vEd{position:fixed;inset:0;z-index:20;background:var(--lb-bg)}
.lbe{display:flex;flex-direction:column;height:100%}
.lbe-top{display:flex;align-items:center;gap:.4rem;padding:.45rem .6rem;background:var(--lb-card);border-bottom:1px solid var(--lb-line);flex-wrap:wrap;position:relative}
.lbe-b{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--lb-line);background:var(--lb-bg);color:var(--lb-ink);border-radius:8px;padding:.38rem .6rem;cursor:pointer;white-space:nowrap}
.lbe-b:hover:not(:disabled){border-color:var(--lb-a)}.lbe-b:disabled{opacity:.4;cursor:default}.lbe-b.pri{background:var(--lb-a);color:#fff;border-color:var(--lb-a)}.lbe-b.sm{padding:.25rem .45rem}.lbe-b.danger:hover{border-color:#e11d48;color:#e11d48}
.lbe-title{font:inherit;font-weight:700;border:1px solid transparent;background:transparent;color:inherit;border-radius:8px;padding:.35rem .5rem;min-width:120px;width:200px;max-width:30vw}
.lbe-title:hover,.lbe-title:focus{border-color:var(--lb-line);background:var(--lb-bg)}
.lbe-adds{display:flex;gap:.25rem;flex-wrap:wrap;margin:0 .3rem}
.lbe-status{margin-left:auto;font-size:12px;color:var(--lb-mute)}.lbe-status.bad{color:#e11d48;font-weight:600}
.lbe-menu{position:absolute;right:8px;top:100%;z-index:30;background:var(--lb-card);border:1px solid var(--lb-line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;flex-direction:column;padding:.3rem}
.lbe-menu button{font:inherit;text-align:left;background:transparent;color:inherit;border:0;border-radius:6px;padding:.5rem .7rem;cursor:pointer}.lbe-menu button:hover{background:var(--lb-bg)}
.lbe-body{flex:1;min-height:0;display:grid;grid-template-columns:150px 1fr 270px}
.lbe-left{border-right:1px solid var(--lb-line);background:var(--lb-card);display:flex;flex-direction:column;min-height:0}
.lbe-lbar{display:flex;flex-wrap:wrap;gap:.25rem;padding:.4rem;border-bottom:1px solid var(--lb-line)}
.lbe-plist{flex:1;overflow:auto;padding:.5rem;display:flex;flex-direction:column;gap:.5rem}
.lbe-th{display:flex;flex-direction:column;gap:.2rem;border:2px solid transparent;border-radius:8px;background:transparent;color:var(--lb-mute);font-size:11px;padding:3px;cursor:pointer;text-align:center;font-family:inherit}
.lbe-th.on{border-color:var(--lb-a);color:var(--lb-ink)}
.lbe-thbox{width:100%;overflow:hidden;border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.35);pointer-events:none;background:#fff}
.lbe-stagewrap{position:relative;min-width:0;min-height:0;background:#334155}
.lbe-stage{position:absolute;inset:0;overflow:auto;display:flex;touch-action:none}
.lbe-pbox{position:relative;margin:auto;flex:none;box-shadow:0 12px 40px rgba(0,0,0,.5);background:#fff;user-select:none;-webkit-user-select:none;touch-action:none;cursor:default}
.lbe-canvas{position:absolute;inset:0}
.lbe-pbox .lb-el{cursor:move}
.lbe-pbox .lb-el:hover{outline:1px dashed #6366f1;outline-offset:-1px}
.lbe-box{position:absolute;border:2px solid #4f46e5;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.lbe-h{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #4f46e5;border-radius:3px;pointer-events:auto;touch-action:none}
.lbe-h.nw{left:-7px;top:-7px;cursor:nwse-resize}.lbe-h.n{left:calc(50% - 6px);top:-7px;cursor:ns-resize}.lbe-h.ne{right:-7px;top:-7px;cursor:nesw-resize}
.lbe-h.e{right:-7px;top:calc(50% - 6px);cursor:ew-resize}.lbe-h.se{right:-7px;bottom:-7px;cursor:nwse-resize}.lbe-h.s{left:calc(50% - 6px);bottom:-7px;cursor:ns-resize}
.lbe-h.sw{left:-7px;bottom:-7px;cursor:nesw-resize}.lbe-h.w{left:-7px;top:calc(50% - 6px);cursor:ew-resize}
.lbe-zoom{position:absolute;right:12px;bottom:10px;display:flex;align-items:center;gap:.3rem;background:rgba(15,23,42,.85);color:#fff;border-radius:8px;padding:2px 6px;font-size:12px}
.lbe-zoom button{background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer;width:26px}
.lbe-props{border-left:1px solid var(--lb-line);background:var(--lb-card);overflow:auto;padding:.7rem;display:flex;flex-direction:column;gap:.45rem;min-height:0}
.lbe-ph{margin:.5rem 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--lb-mute)}.lbe-ph:first-child{margin-top:0}
.lbe-f{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:13px}
.lbe-f.full{flex-direction:column;align-items:stretch;gap:.2rem}
.lbe-f input[type=text],.lbe-f input[type=number],.lbe-f select,.lbe-f textarea{font:inherit;font-size:13px;padding:.3rem .4rem;border:1px solid var(--lb-line);border-radius:6px;background:var(--lb-bg);color:inherit;min-width:0;width:120px}
.lbe-f.full input,.lbe-f.full textarea{width:100%}
.lbe-f input[type=color]{width:42px;height:28px;padding:0;border:1px solid var(--lb-line);border-radius:6px;background:transparent}
.lbe-f input[type=color].none{background:linear-gradient(to top right,transparent calc(50% - 1px),#e11d48 calc(50% - 1px),#e11d48 calc(50% + 1px),transparent calc(50% + 1px)),#fff;color:transparent}
.lbe-f input[type=color].none::-webkit-color-swatch-wrapper{opacity:0}.lbe-f input[type=color].none::-moz-color-swatch{opacity:0}
.lbe-col{display:inline-flex;align-items:center;gap:.25rem}.lbe-x{border:0;background:transparent;color:var(--lb-mute);cursor:pointer;font-size:16px}
.lbe-hint{font-size:12px;color:var(--lb-mute);margin:.2rem 0}.lbe-hint.good{color:#15803d}.lbe-hint.bad{color:#be123c}
.lbe-ord{display:flex;flex-wrap:wrap;gap:.25rem}
.lbe-layers{display:flex;flex-direction:column;gap:2px}
.lbe-layer{font:inherit;font-size:12px;text-align:left;border:1px solid transparent;background:var(--lb-bg);color:inherit;border-radius:6px;padding:.25rem .4rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbe-layer.on{border-color:var(--lb-a);font-weight:700}
@media (max-width:860px){
  .lbe-body{grid-template-columns:1fr;grid-template-rows:96px minmax(0,1fr) 38%}
  .lbe-left{flex-direction:row;border-right:0;border-bottom:1px solid var(--lb-line)}
  .lbe-lbar{flex-direction:column;border-bottom:0;border-right:1px solid var(--lb-line);width:96px;flex:none}
  .lbe-plist{flex-direction:row;overflow-x:auto;overflow-y:hidden}.lbe-th{width:64px;flex:none}
  .lbe-props{border-left:0;border-top:1px solid var(--lb-line)}
  .lbe-title{width:120px}
}
#lbPrint{display:none}
@media print{
  body.lb-printing>*:not(#lbPrint){display:none!important}
  body.lb-printing #lbPrint{display:block}
  body.lb-printing{overflow:visible;background:#fff}
  .lb-pp{width:180mm;margin:0 auto;break-after:page;page-break-after:always;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lb-pp.land{width:250mm}
  @page{margin:8mm}
}