/* KlipTok v137 · paneles de conversión (Imagen/PDF → web, Vídeo → blog, Blog → vídeo, Blog → podcast, Podcast → blog)
   con el mismo aspecto oscuro del creador. Cada conversión es una vista independiente (data-view en la franja superior). */
.kbp-cv{--cv-bg:#0b1020;--cv-panel:#121a33;--cv-panel2:#182247;--cv-line:#26325c;--cv-ink:#e9ecff;--cv-mute:#9aa3c7;--cv-acc:#8b5cf6;
  background:var(--cv-bg);color:var(--cv-ink);min-height:100%;max-width:none!important;padding:1.1rem 1.3rem;align-content:start}
.kbp-cv .kbp-cvh{display:flex;align-items:center;gap:.65rem;font-size:1.2rem;padding:.2rem 0 .1rem}
.kbp-cv .kbp-cvi{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#ec4899);font-size:1.25rem}
.kbp-cv .kbp-form{max-width:820px;background:var(--cv-panel);border:1px solid var(--cv-line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.kbp-cv .kbp-note{color:var(--cv-mute)}
.kbp-cv .kbp-note.err{color:#fca5a5}.kbp-cv .kbp-note.ok{color:#86efac}
.kbp-cv .kbp-fl{color:var(--cv-ink)}
.kbp-cv .kbp-fl input,.kbp-cv .kbp-fl textarea,.kbp-cv .kbp-fl select{background:#0b1128;color:var(--cv-ink);border:1px solid var(--cv-line)}
.kbp-cv .kbp-fl input::placeholder,.kbp-cv .kbp-fl textarea::placeholder{color:#6b749c}
.kbp-cv .kbp-fl input:focus,.kbp-cv .kbp-fl textarea:focus,.kbp-cv .kbp-fl select:focus{outline:2px solid var(--cv-acc);outline-offset:1px}
.kbp-cv .kbp-chk{color:var(--cv-ink)}
.kbp-cv .kbp-dz{background:rgba(139,92,246,.08);border-color:#46528a;color:var(--cv-ink)}
.kbp-cv .kbp-dz:hover,.kbp-cv .kbp-dz.over,.kbp-cv .kbp-dz:focus-visible{border-color:var(--cv-acc);background:rgba(139,92,246,.16)}
.kbp-cv .kbp-dz-in small,.kbp-cv .kbp-dz-name{color:var(--cv-mute);opacity:1}
.kbp-cv .kbp-dz-box{border-color:var(--cv-line)}
.kbp-cv .kbp-prog{background:rgba(139,92,246,.2)}
.kbp-cv .kbp-btn{background:var(--cv-panel2);color:var(--cv-ink);border-color:var(--cv-line)}
.kbp-cv .kbp-btn:hover{border-color:var(--cv-acc);background:#1d2a5c}
.kbp-cv .kbp-btn.pri{background:linear-gradient(100deg,#2563eb,#7c3aed 55%,#ec4899);color:#fff;border-color:transparent}
/* franja superior: los 5 botones de conversión, compactos */

.kbs-top button.kbs-conv.on,.kbs-top button.kbs-conv[aria-pressed=true]{background:linear-gradient(100deg,#5b21b6,#9d174d);color:#fff;outline:2px solid #fff;outline-offset:-3px}

/* =====================================================================================================
   v138 · barra del creador SOLO CON ICONOS, todo visible (sin barra de desplazamiento horizontal)
   ===================================================================================================== */
.kbs-top{overflow:visible!important;flex-wrap:wrap;gap:.22rem;row-gap:.25rem;padding:4px 8px}
.kbs-top .kbs-l{display:none!important}
.kbs-top button,.kbs-top .kbs-chip{width:32px;min-width:32px;height:32px;padding:0!important;justify-content:center;gap:0;font-size:15px}
.kbs-top button.kbs-conv{width:32px;padding:0!important;font-size:15px}
.kbs-top .kbs-brandwrap button,.kbs-top > .kbs-brand,.kbs-top > .kbs-back{width:auto;min-width:0;padding:0 .7rem!important;font-size:12px}
.kbs-top > .kbs-brand,.kbs-top > .kbs-back{margin-right:.25rem!important;height:30px}
.kbs-top .kbs-devices,.kbs-top .kbs-zoom{gap:.15rem}
.kbs-top .kbs-zoom output{min-width:2.6rem;text-align:center;font-size:11px}
.kbs-top .kbs-sep{margin:0 .05rem}
.kbs-top .kbs-sp{min-width:0}
/* estado de guardado: solo un símbolo (✓ guardado · ● sin guardar), el texto sale al pasar el ratón */
.kbs-top .kbs-state{font-size:0!important;width:20px;text-align:center}
.kbs-top .kbs-state::before{content:"✓";font-size:14px;color:#16a34a}
.kbs-top .kbs-state.dirty::before{content:"●";color:#d97706}
.kbs-top button.kbs-pri{width:32px}

/* =====================================================================================================
   v138 · pantallas de conversión: sin franja clara arriba ni abajo y con el botón «Convertir» siempre a la vista
   ===================================================================================================== */
.kbp-msg:empty{display:none}                                  /* la franja de arriba era el hueco del mensaje vacío */
.kbp-banner[hidden]{display:none}
body.kbs-studio-on .kbp-views>.kbp-cv:not([hidden]){min-height:calc(100dvh - 52px)}   /* el fondo oscuro llega hasta abajo */
body.kbs-studio-on:has(.kbp-views>.kbp-cv:not([hidden])){background:#0b1020}
.kbp-cv .kbp-form>.kbp-btn.pri.big{position:sticky;bottom:.9rem;z-index:4;box-shadow:0 8px 24px rgba(0,0,0,.45)}   /* no se pierde al subir una imagen */