/* KlipTok v83 · Constructor web PRO: panel IA a la izquierda, pestañas Constructor / Código / Convertir. */
.kbp{display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(100vh - 60px);background:var(--kt-bg,#f8fafc);color:var(--kt-ink,#0f172a);font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}
/* v135 · el asistente IA vive dentro de la paleta izquierda del creador (pestaña «✨ IA») */
.ks-body.ks-ext{padding:0!important;display:flex;flex-direction:column}
.ks-body .kbp-ai{position:static!important;flex:1;max-height:none!important;width:auto!important;height:100%;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible;padding:.6rem}
.ks-body .kbp-ai .kbp-log{min-height:140px}.ks-body .kbp-ai .kbp-sel{width:100%;max-width:100%}
/* colores que valen para paleta clara y oscura */
.ks-body .kbp-ai{color:inherit}
.ks-body .kbp-ai .kbp-b{color:inherit;background:rgba(128,128,160,.18)!important}
.ks-body .kbp-ai .kbp-b.user{background:linear-gradient(135deg,#7c3aed,#ec4899)!important;color:#fff}
.ks-body .kbp-ai .kbp-sel,.ks-body .kbp-ai .kbp-in{color:inherit!important;background:rgba(128,128,160,.14)!important;border:1px solid rgba(128,128,160,.45)!important}
.ks-body .kbp-ai .kbp-in::placeholder{color:inherit;opacity:.55}
.ks-body .kbp-ai select option,.ks-body .kbp-ai select optgroup{color:#0f172a;background:#fff}
.ks-body .kbp-ai .kbp-chip{color:inherit;border-color:rgba(128,128,160,.55)}
.ks-body .kbp-ai .kbp-chk{color:inherit}
.ks-left .ks-hd{overflow-x:auto;scrollbar-width:none}.ks-left .ks-hd::-webkit-scrollbar{display:none}
.ks-shell.kb-shell{--ks-l:300px!important}
.ks-left .ks-hd{gap:0!important}.ks-left .ks-hd button{white-space:nowrap;flex:1 1 auto;padding-left:.3rem!important;padding-right:.3rem!important;font-size:11.5px!important;letter-spacing:0!important}
.kbp *{box-sizing:border-box}.kbp-sp{flex:1}
.kbp-ai{display:flex;flex-direction:column;gap:.5rem;padding:.7rem;border-right:1px solid var(--kt-line,#e2e8f0);background:var(--kt-card,#fff);max-height:calc(100vh - 60px);position:sticky;top:0}
.kbp-aihd{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.kbp-aihd b{flex:1 0 100%}.kbp-aihd .kbp-sel{flex:1;min-width:0}
.kbp-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:.5rem;min-height:120px;padding:.2rem}
.kbp-b{padding:.55rem .7rem;border-radius:.9rem;max-width:100%;overflow-wrap:anywhere}.kbp-b.user{align-self:flex-end;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;white-space:pre-wrap}
.kbp-b.bot{background:var(--kt-bg,#f1f5f9);border:1px solid var(--kt-line,#e2e8f0)}.kbp-b p{margin:.2rem 0;white-space:pre-wrap}
.kbp-b pre{margin:.4rem 0;max-height:180px;overflow:auto;padding:.5rem;border-radius:.6rem;background:#0f172a;color:#e2e8f0;font:12px/1.4 ui-monospace,Consolas,monospace}.kbp-cb{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem}
.kbp-chips{display:flex;gap:.3rem;flex-wrap:wrap}.kbp-chip{border:1px solid var(--kt-line,#cbd5e1);background:transparent;color:inherit;border-radius:999px;padding:.25rem .6rem;font:600 11px system-ui;cursor:pointer}.kbp-chip:hover{border-color:#7c3aed}
.kbp-in{width:100%;resize:vertical;padding:.55rem;border-radius:.8rem;border:1px solid var(--kt-line,#cbd5e1);background:var(--kt-bg,#fff);color:inherit;font:inherit}
.kbp-airow{display:flex;align-items:center;gap:.35rem}.kbp-att{display:flex;gap:.3rem;flex-wrap:wrap}.kbp-ac{background:#ede9fe;color:#5b21b6;border-radius:999px;padding:.15rem .55rem;font-size:11px;cursor:pointer}
.kbp-ib{width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--kt-line,#cbd5e1);background:var(--kt-card,#fff);color:inherit;cursor:pointer;font-size:1rem}.kbp-ib.pri{background:linear-gradient(135deg,#14b8a6,#7c3aed);border:0;color:#fff}.kbp-ib.live{background:#dc2626;color:#fff;animation:kbpp 1s infinite}.kbp-ib:disabled{opacity:.5}
@keyframes kbpp{50%{box-shadow:0 0 0 6px rgba(220,38,38,.3)}}
.kbp-main{min-width:0;display:flex;flex-direction:column}
.kbp-tabs{display:flex;gap:.3rem;padding:.5rem .7rem;border-bottom:1px solid var(--kt-line,#e2e8f0);background:var(--kt-card,#fff);position:sticky;top:0;z-index:5}
.kbp-tab{border:0;background:transparent;color:inherit;padding:.5rem .9rem;border-radius:999px;font:700 13px system-ui;cursor:pointer}.kbp-tab:hover{background:rgba(124,58,237,.1)}.kbp-tab.on{background:#7c3aed;color:#fff}
.kbp-banner{margin:.5rem .7rem 0;padding:.6rem .8rem;border-radius:.8rem;background:#fef3c7;color:#78350f;border:1px solid #fcd34d}
.kbp-msg{margin:.4rem .7rem 0;min-height:1.1em;font-weight:700;color:#dc2626;overflow-wrap:anywhere}.kbp-msg.ok{color:#059669}.kbp-note{color:#64748b;font-size:12px;margin:.3rem 0}.kbp-note.err{color:#dc2626;font-weight:700}
.kbp-views{flex:1;min-height:0}.kbp-views>[hidden]{display:none!important}
.kbp-btn{border:1px solid var(--kt-line,#cbd5e1);background:var(--kt-card,#fff);color:inherit;border-radius:999px;padding:.4rem .8rem;font:700 12px system-ui;cursor:pointer}.kbp-btn:hover{border-color:#7c3aed}.kbp-btn.pri{background:#7c3aed;border-color:#7c3aed;color:#fff}.kbp-btn.big{padding:.7rem 1.4rem;font-size:14px}.kbp-btn:disabled{opacity:.55}
.kbp-sel,.kbp-title{padding:.4rem .5rem;border-radius:.6rem;border:1px solid var(--kt-line,#cbd5e1);background:var(--kt-bg,#fff);color:inherit;font:inherit}
.kbp-code{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:.6rem;padding:.7rem;height:calc(100vh - 150px);min-height:420px}
.kbp-code .kbp-title{grid-column:1/-1}.kbp-bar{grid-column:1/-1;display:flex;gap:.4rem;flex-wrap:wrap}
.kbp-ed{display:flex;flex-direction:column;min-height:0;gap:.3rem}.kbp-ctabs{display:flex;gap:.3rem}.kbp-ct{border:1px solid var(--kt-line,#cbd5e1);background:transparent;color:inherit;border-radius:.6rem .6rem 0 0;padding:.3rem .8rem;font:700 12px system-ui;cursor:pointer}.kbp-ct.on{background:#0f172a;color:#fff;border-color:#0f172a}
.kbp-ta{flex:1;min-height:200px;width:100%;resize:none;padding:.7rem;border-radius:0 .6rem .6rem .6rem;border:1px solid #0f172a;background:#0f172a;color:#e2e8f0;font:13px/1.5 ui-monospace,Consolas,monospace;tab-size:2;white-space:pre}
.kbp-pv{display:flex;flex-direction:column;gap:.3rem;min-height:0}.kbp-pv iframe{flex:1;width:100%;margin:0 auto;border:1px solid var(--kt-line,#cbd5e1);border-radius:.6rem;background:#fff;min-height:300px}
.kbp-conv{padding:.9rem;display:grid;gap:1rem;max-width:900px}.kbp-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.5rem}
.kbp-mode{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;padding:.7rem;border:1px solid var(--kt-line,#cbd5e1);border-radius:.9rem;background:var(--kt-card,#fff);color:inherit;cursor:pointer;text-align:left}.kbp-mode.on{border-color:#7c3aed;box-shadow:0 0 0 2px rgba(124,58,237,.25)}.kbp-ic{font-size:1.4rem}
.kbp-form{display:grid;gap:.7rem;padding:1rem;border:1px solid var(--kt-line,#e2e8f0);border-radius:1rem;background:var(--kt-card,#fff)}.kbp-form .kbp-btn{justify-self:start}
.kbp-fl{display:grid;gap:.2rem;font-weight:700;font-size:12px}.kbp-fl input,.kbp-fl textarea,.kbp-fl select{padding:.5rem;border-radius:.6rem;border:1px solid var(--kt-line,#cbd5e1);background:var(--kt-bg,#fff);color:inherit;font:inherit;width:100%}.kbp-chk{display:flex;gap:.4rem;align-items:center;font-size:12px}
.kbp-ov{position:fixed;inset:0;z-index:2147483000;background:rgba(2,6,23,.72);display:flex;align-items:center;justify-content:center;padding:14px}
.kbp-dlg{width:min(520px,100%);max-height:calc(100vh - 28px);overflow:auto;background:#0f172a;color:#e2e8f0;border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:18px}
.kbp-dlg h3,.kbp-dlg h4{margin:.2rem 0}.kbp-dlg .kbp-note{color:#94a3b8}.kbp-dlg .kbp-btn{background:rgba(255,255,255,.1);color:#e2e8f0;border-color:rgba(255,255,255,.2);margin:.2rem .2rem 0 0}.kbp-dlg .kbp-btn.pri{background:#7c3aed}
.kbp-prow{display:flex;gap:.4rem;align-items:center;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.kbp-prow span{flex:1;font-size:12px;overflow-wrap:anywhere}.kbp-pform{display:grid;gap:.5rem;margin:.4rem 0}
.kbp-dlg .kbp-fl input,.kbp-dlg .kbp-fl select{background:#1e293b;color:#f1f5f9;border-color:rgba(255,255,255,.2)}
@media(max-width:900px){.kbp{grid-template-columns:1fr}.kbp-ai{position:static;max-height:60vh;border-right:0;border-bottom:1px solid var(--kt-line,#e2e8f0)}.kbp-code{grid-template-columns:1fr;height:auto}.kbp-pv iframe{min-height:360px}}

.kbp-views.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.kbp-views.split>[hidden]{display:none!important}.kbp-views.split>*{min-width:0;overflow:auto;max-height:calc(100vh - 56px)}@media(max-width:900px){.kbp-views.split{grid-template-columns:1fr}.kbp-views.split>:not(:first-child){position:fixed;inset:56px 0 0 0;z-index:30;background:var(--kt-card,#fff);max-height:none}}

/* v104 · panel «🚀 Herramientas» */
.kbp-mode small{font-size:.78rem;line-height:1.35;opacity:.75;font-weight:400}
.kbp-mode:hover{border-color:#7c3aed}

/* v104 · pestaña «📚 Plantillas» (tema claro/oscuro del sitio) */
.kbp-tpl{max-width:1100px}
.kbt{display:grid;gap:.8rem}.kbt-intro{margin:0;opacity:.85}
.kbt .k101t-card{background:var(--kt-card,#fff);border-color:var(--kt-line,#cbd5e1);color:inherit}
html.dark .kbt .k101t-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.kbt .k101t-tools input,.kbt .k101t-tools select,.kbt .k101t-form input,.kbt .k101t-form textarea,.kbt .k101t-form select,.kbt .k101t-form-inline input{background:var(--kt-card,#fff);color:inherit;border-color:var(--kt-line,#cbd5e1)}
html.dark .kbt .k101t-tools input,html.dark .kbt .k101t-tools select,html.dark .kbt .k101t-form input,html.dark .kbt .k101t-form textarea,html.dark .kbt .k101t-form select,html.dark .kbt .k101t-form-inline input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.kbt .k101t-actions a,.kbt .k101t-actions button{background:transparent;color:inherit;border-color:var(--kt-line,#cbd5e1)}
.kbt .k101t-actions button.pri{background:#4f46e5;color:#fff;border-color:#4f46e5}
.kbt .k101t-pub{margin:.2rem 0;padding:.7rem 1rem}.kbt-det>summary{cursor:pointer;font-weight:700}
.kbt .k101t-help code{background:rgba(128,128,160,.2)}

/* v133 · botón destacado «Convertir imagen / PDF → web» (el creador sigue intacto) */
.kbp-tab[data-t="convert"]{background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.35)}
.kbp-tab[data-t="convert"]:hover{filter:brightness(1.1);background:linear-gradient(135deg,#7c3aed,#ec4899)}
.kbp-tab[data-t="convert"].on{outline:2px solid #fff;outline-offset:-4px}

/* v133 · editor con 9 lenguajes: las pestañas se reparten en varias líneas y no se salen */
.kbp-ctabs{flex-wrap:wrap}
.kbp-ct.on{background:#7c3aed;color:#fff;border-color:#7c3aed}
.kbp-note.ok{color:#16a34a}.kbp-note.err{color:#dc2626}
.kbp-ed .kbp-btn{align-self:flex-start}

/* v133f · «Imagen a web»: zona de subida, escáner y progreso */
.kbp-dz{border:2px dashed var(--kt-line,#94a3b8);border-radius:16px;padding:1.2rem;text-align:center;cursor:pointer;background:rgba(124,58,237,.05);transition:.15s}
.kbp-dz:hover,.kbp-dz.over,.kbp-dz:focus-visible{border-color:#7c3aed;background:rgba(124,58,237,.12);outline:0}
.kbp-dz-in b{display:block;font-size:1.05rem;margin-bottom:.3rem}.kbp-dz-in small{opacity:.75}
.kbp-dz-box{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:12px;border:1px solid var(--kt-line,#cbd5e1);box-shadow:0 4px 18px rgba(0,0,0,.18)}
.kbp-dz-box img{display:block;max-height:260px;max-width:100%;object-fit:contain}
.kbp-dz-name{font:12px ui-monospace,Consolas,monospace;opacity:.8;margin:.6rem 0 0}
.kbp-scan{position:absolute;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,#06b6d4,#8b5cf6,transparent);box-shadow:0 0 16px #06b6d4;animation:kbpscan 2s infinite ease-in-out}
@keyframes kbpscan{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.kbp-prog{height:8px;border-radius:99px;background:rgba(124,58,237,.15);overflow:hidden;margin:.2rem 0}
.kbp-prog i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#06b6d4,#7c3aed,#ec4899);transition:width .3s}