:root{--body:#3d4353;--brand-dark:#4a24c4;--brand-soft:#f3f0ff;--faint:#9aa0ad}
/* editor */
.overlay{position:fixed;inset:0;background:rgba(14,17,23,.55);z-index:200;display:none;overflow:auto;padding:26px 14px}
.overlay.on{display:block}
.sheet{max-width:1020px;margin:0 auto;background:#fff;border-radius:18px;overflow:hidden}
.sheet .top{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
.sheet .top h3{margin:0;font-size:19px;color:var(--ink);font-weight:700}
.x{margin-left:auto;background:none;border:none;font-size:26px;color:#9aa0ad;cursor:pointer;line-height:1}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.sheet .form{padding:22px 24px;border-right:1px solid var(--line)}
.sheet label{display:block;font-size:12.5px;font-weight:600;color:#4b5164;margin:13px 0 5px}
.sheet input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:14.5px;font-family:inherit;color:var(--ink)}
.sheet input:focus{outline:2px solid #ded3ff;border-color:var(--brand)}
.sheet .btn{background:var(--brand);color:#fff;border:none;padding:12px 20px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;width:100%;margin-top:18px}
.sheet .btn:hover{background:var(--brand-dark)}
.sheet .btn.sec{background:#fff;color:var(--brand);border:1px solid var(--brand);margin-top:9px}
.prev{padding:22px 24px;background:var(--soft);font-size:13.5px;line-height:1.75;max-height:74vh;overflow:auto}
.prev h5{text-align:center;text-transform:uppercase;letter-spacing:.07em;font-size:13px;color:var(--ink);margin:0 0 16px}
.prev b.f{color:var(--brand);background:var(--brand-soft);padding:1px 5px;border-radius:4px}
.prev .cl{font-weight:700;color:var(--ink)}
.sg{display:flex;gap:26px;margin-top:24px;font-size:12px;color:var(--muted);text-align:center}
.sg div{flex:1;border-top:1px solid #c9ccd6;padding-top:6px}

/* Modo embebido (dentro del panel).
   La clase la pone <html> nada más empezar, sin esperar a ningún script:
   así la página nunca puede quedarse invisible si algo falla. */
html.embedPre header,html.embedPre footer,html.embedPre .navbar,
body.embed header,body.embed footer,body.embed .navbar{display:none!important}
html.embedPre main,body.embed main{padding-top:10px}

/* ---------- editor de cláusulas ---------- */
.tabsF{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px;background:#fff}
.tabsF button{flex:1;padding:10px 6px;border:none;background:#fff;font-size:13px;color:var(--muted);cursor:pointer;
  border-right:1px solid var(--line);font-family:inherit;font-weight:500}
.tabsF button:last-child{border-right:none}
.tabsF button:hover{background:var(--soft);color:var(--ink)}
.tabsF button.on{background:var(--ink);color:#fff}
.tabsF button .lk{opacity:.6;font-size:11px}
.pane{display:none}.pane.on{display:block}
.clx{border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px;background:#fff}
.clx.off{opacity:.5;background:var(--soft)}
.clx .hd{display:flex;align-items:center;gap:8px}
.clx .hd b{font-size:13px;color:var(--ink);flex:1;line-height:1.35;font-weight:650}
.clx .ord{font-size:10px;color:var(--faint);background:var(--soft);border:1px solid var(--line);
  padding:1px 6px;border-radius:5px;font-weight:700;flex-shrink:0}
.clx .tools{display:flex;gap:4px;margin-top:9px}
.clx .tools button{flex:1;padding:5px;font-size:11.5px;border:1px solid var(--line);background:#fff;
  border-radius:7px;cursor:pointer;color:var(--body);font-family:inherit}
.clx .tools button:hover{border-color:var(--brand);color:var(--brand)}
.clx .tools button.dg:hover{border-color:#fca5a5;color:#b91c1c;background:#fef2f2}
.clx textarea{width:100%;margin-top:9px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font-size:12.8px;font-family:inherit;line-height:1.6;color:var(--ink);resize:vertical;min-height:92px}
.clx textarea:focus{outline:none;border-color:#c9bdf5;box-shadow:0 0 0 3px var(--brand-soft)}
.sw2{width:32px;height:18px;border-radius:99px;background:#d5d8e2;position:relative;cursor:pointer;flex-shrink:0;transition:.15s;border:none;padding:0}
.sw2.on{background:var(--brand)}
.sw2 i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:99px;background:#fff;transition:.15s;display:block}
.sw2.on i{left:16px}
.addcl{width:100%;padding:11px;border:1.5px dashed var(--line);border-radius:11px;background:#fdfdff;
  color:var(--muted);font-size:13px;cursor:pointer;font-family:inherit;margin-top:6px}
.addcl:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.fgr{margin-bottom:16px}
.fgr label{display:block;font-size:12.5px;font-weight:600;color:var(--body);margin-bottom:6px}
.fgr select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;
  font-family:inherit;background:#fff;color:var(--ink)}
.sws{display:flex;gap:7px}
.sq{width:28px;height:28px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.sq.on{box-shadow:0 0 0 2px var(--brand)}
.bir{display:flex;gap:7px}
.bir button{flex:1;padding:9px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;font-size:14px;font-family:inherit;color:var(--body)}
.bir button.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.hint2{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.55}
.lockNote{background:#fffbeb;border:1px solid #fde68a;color:#7a5300;border-radius:10px;padding:11px 13px;font-size:12.5px;margin-bottom:14px;line-height:1.6}
.lockNote a{color:#7a5300;font-weight:700}
.libItem{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:7px;cursor:pointer;background:#fff}
.libItem:hover{border-color:var(--brand);background:var(--brand-soft)}
.libItem b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:2px}
.libItem span{font-size:12px;color:var(--muted);line-height:1.5}
.ov2{position:fixed;inset:0;background:rgba(14,17,23,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:120}
.ov2.on{display:flex}
.ov2 .bx{background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:82vh;overflow:auto;padding:22px 24px}
.ov2 .bx h4{margin:0 0 4px;font-size:18px;color:var(--ink)}
.ov2 .bx p.s{margin:0 0 16px;font-size:13px;color:var(--muted)}

.btn.gh3{background:#fff;color:var(--brand,#5b2fe0);border:1px solid #e5e7ef}
.btn.gh3:hover{background:#f3f0ff;border-color:#d5c9fb}
.tplAviso{display:flex;align-items:center;gap:8px;background:#f3f0ff;border:1px solid #ddd6f7;color:#4a24c4;
 border-radius:10px;padding:9px 12px;font-size:12.8px;margin-bottom:14px;font-weight:500}
.tplAviso b{font-weight:700}
.tplToast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(70px);background:#0e1117;color:#fff;
 padding:11px 18px;border-radius:10px;font-size:13.5px;opacity:0;transition:.25s;z-index:9999;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.tplToast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.tplToast.err{background:#b91c1c}
.modelo-cta{background:linear-gradient(135deg,#6d43e8,#5b2fe0);border-radius:18px;padding:26px;color:#fff;margin:22px 0 30px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.modelo-cta p{margin:0;color:#e9e0ff;font-size:15px;max-width:560px}
.modelo-cta b{color:#fff;display:block;font-size:19px;margin-bottom:4px}
.modelo-cta button{background:#fff;color:#5b2fe0;border:none;padding:14px 26px;border-radius:10px;font-weight:700;font-size:16px;cursor:pointer;font-family:inherit;white-space:nowrap}
.modelo-cta button:hover{background:#f3f0ff}