/* 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}

/* v145 · lienzo siempre abierto: el lienzo ocupa el espacio principal y la herramienta (convertir, código, plantillas…) va en una columna a la derecha */
.kbp-views.split{grid-template-columns:minmax(0,1fr) clamp(340px,30vw,480px)}
.kbp-views.split>#kb-root{min-height:calc(100vh - 56px)}
@media(max-width:1100px){
  .kbp-views.split{grid-template-columns:1fr}
  .kbp-views.split>#kb-root{min-height:78vh;max-height:none}
}

/* v147 · CÓDIGO = una sola barra y pantalla completa (sin columna lateral, sin «Traer/Enviar») */
.kbp-views.codefull{display:block!important}
.kbp-views.codefull>.kbp-code{height:100%;max-height:none;min-height:0;overflow:hidden}
.kbp-code{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0;padding:0}
.kbp-code .kbp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.55rem .8rem .0;border-bottom:1px solid rgba(148,163,184,.25);background:rgba(15,23,42,.04)}
.kbp-code .kbp-bar .kbp-title{width:min(260px,100%);flex:0 1 260px}
.kbp-code .kbp-bar .kbp-sp{flex:1 1 auto}
.kbp-code .kbp-bar .kbp-ctabs{flex:1 1 100%;gap:.2rem;margin-top:.1rem}
.kbp-code .kbp-bar .kbp-ct{border-bottom:0;border-radius:.6rem .6rem 0 0}
.kbp-cbody{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
.kbp-code.pv .kbp-cbody{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kbp-code:not(.pv) .kbp-pv{display:none}
.kbp-code .kbp-ed{min-height:0;gap:0}
.kbp-code .kbp-ta{border-radius:0;border:0;min-height:0;padding:1rem 1.2rem;font-size:14px}
.kbp-code .kbp-pv{padding:.6rem;background:rgba(15,23,42,.06)}
.kbp-code .kbp-ed>.kbp-note,.kbp-code .kbp-ed>.kbp-btn{margin:.3rem .8rem}
.kbp-code .kbp-ct{color:#cbd5e1;border-color:rgba(148,163,184,.35)}.kbp-code .kbp-ct.on{color:#fff}
.kbp-code .kbp-fmt,.kbp-code .kbp-jn,.kbp-code .kbp-n2{display:none}
.kbp-code[data-lang=json] .kbp-fmt,.kbp-code[data-lang=json] .kbp-jn{display:inline-flex}.kbp-code[data-lang=json] .kbp-jn{display:block}
.kbp-code:is([data-lang=php],[data-lang=json],[data-lang=sql],[data-lang=xml],[data-lang=htaccess],[data-lang=md]) .kbp-n2{display:block}
.kbp-code:not([data-lang=json]) .kbp-jn{display:none!important}
.kbp-views>.kbp-info{height:100%;min-height:0;overflow:hidden}.kbp-views>.kbp-info[hidden]{display:none!important}

/* v148c · UN SOLO LIENZO: el código es un panel acoplado bajo el lienzo (sin segunda vista previa) y sus herramientas son iconos en una barra fija */
.kbp-codebar{display:flex;align-items:center;gap:4px;padding:5px 12px;background:var(--kr-panel,#fff);border-bottom:1px solid var(--kr-line,#e2e8f0);overflow-x:auto;scrollbar-width:thin;flex:none}
.kbp-cb{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-width:32px;padding:0 8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--kr-ink,#0f172a);font:600 12.5px/1 system-ui,sans-serif;cursor:pointer;white-space:nowrap;flex:none}
.kbp-cb:hover{background:var(--kr-hover,rgba(100,116,139,.14))}
.kbp-cb:focus-visible{outline:2px solid #38bdf8;outline-offset:1px}
.kbp-cb.on,.kbp-cb[aria-pressed="true"]{background:var(--kr-soft,rgba(124,58,237,.16));border-color:var(--kr-acc,#7c3aed);color:var(--kr-acc,#7c3aed)}
.kbp-cb.pri{background:var(--kr-acc,#7c3aed);color:#fff;border-color:var(--kr-acc,#7c3aed)}.kbp-cb.pri:hover{filter:brightness(1.1)}
.kbp-lg{padding:0 4px}
.kbp-lg i{display:grid;place-items:center;min-width:24px;height:22px;padding:0 4px;border-radius:6px;font:800 10.5px/1 ui-monospace,Menlo,Consolas,monospace;font-style:normal;letter-spacing:-.2px}
.kbp-lg.on i,.kbp-lg[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--kr-panel,#fff),0 0 0 4px var(--kr-acc,#7c3aed)}
.kbp-cb-sep{width:1px;height:20px;background:var(--kr-line,#cbd5e1);margin:0 4px;flex:none}
@media (max-width:900px){.kbp-cb span{display:none}}
/* panel acoplado */
.kbp-views.codedock{display:grid!important;grid-template-rows:minmax(0,1fr) var(--kbp-dock-h,min(320px,42%));flex:1 1 auto;min-height:0}
.kbp-views.codedock>#kb-root{min-height:0!important;height:auto!important;max-height:none!important;overflow:hidden}
.kbp-views.codedock>.kbp-code{position:relative;min-height:0;height:auto;max-height:none;overflow:hidden;border-top:2px solid var(--kr-acc,#7c3aed);grid-template-rows:auto minmax(0,1fr)}
.kbp-grip{position:absolute;left:0;right:0;top:-7px;height:12px;cursor:ns-resize;z-index:3;touch-action:none}
.kbp-grip::after{content:"";position:absolute;left:50%;top:3px;width:46px;height:4px;margin-left:-23px;border-radius:2px;background:var(--kr-acc,#7c3aed);opacity:.7}
.kbp-grip:hover::after{opacity:1}
.kbp-dockhd{display:flex;align-items:center;gap:.7rem;padding:.35rem .8rem;background:var(--kr-panel,rgba(15,23,42,.04));border-bottom:1px solid var(--kr-line,rgba(148,163,184,.25))}
.kbp-dockhd .kbp-dl{font:700 13px system-ui,sans-serif;color:var(--kr-ink,inherit)}
.kbp-dockhd .kbp-dst{font-size:12px;color:var(--kr-mute,#64748b)}
.kbp-dst[data-s="live"]{color:#16a34a}.kbp-dst[data-s="pend"]{color:#d97706;font-weight:700}
.kbp-dockhd .kbp-btn{padding:.25rem .7rem;font-size:12.5px}
.kbp-dockhd .kbp-sp{flex:1}
.kbp-code .kbp-ta{width:100%;height:100%;resize:none;tab-size:2}

.kbp-views.codedock>.kbp-code .kbp-cbody,.kbp-views.codedock>.kbp-code .kbp-ed{min-height:0;height:100%}
.kbp-views.codedock>.kbp-code .kbp-ed{display:flex;flex-direction:column}
.kbp-views.codedock>.kbp-code .kbp-ta:not([hidden]){flex:1 1 auto;min-height:0}