/* KlipTok v77 · BARRA UNIFICADA DE ESTUDIO + DISEÑO ESTÁNDAR DE 3 COLUMNAS (assets/kt-v77-studio.css) */
/* —— fila de acciones del editor activo, dentro de la cabecera global #kt-top —— */
#kt-studio{flex:0 0 100%;order:99;display:none;align-items:center;gap:.35rem;min-height:40px;padding:4px 10px;box-sizing:border-box;overflow-x:auto;scrollbar-width:thin;border-top:1px solid var(--kt-line,rgba(128,128,160,.25));background:linear-gradient(90deg,rgba(37,99,235,.07),rgba(124,58,237,.07),rgba(236,72,153,.07));font:600 12.5px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
html.kts-on #kt-studio{display:flex}
#kt-top{flex-wrap:wrap}
/* #kt-top es una rejilla de altura fija: con un editor abierto crece una fila y la fila de acciones ocupa todo el ancho */
html.kts-on #kt-top{height:auto!important;min-height:56px;row-gap:0}
#kt-studio{grid-column:1/-1}
#kt-studio .kts-title{display:inline-flex;align-items:center;gap:.4rem;padding:0 .7rem 0 .4rem;height:30px;border-radius:999px;color:#fff;font-weight:800;white-space:nowrap;background:linear-gradient(100deg,#2563eb,#7c3aed 55%,#ec4899)}
#kt-studio .kts-sep{width:1px;height:20px;background:var(--kt-line,rgba(128,128,160,.35));margin:0 .1rem;flex:0 0 auto}
#kt-studio .kts-sp{flex:1 1 auto}
#kt-studio button,#kt-studio .kts-f{display:inline-flex;align-items:center;gap:.3rem;height:30px;padding:0 .55rem;border-radius:8px;border:1px solid var(--kt-line,rgba(128,128,160,.35));background:var(--kt-card,rgba(255,255,255,.7));color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
html.dark #kt-studio button{background:rgba(255,255,255,.06)}
#kt-studio button:hover:not(:disabled){border-color:#8b5cf6;background:rgba(124,58,237,.12)}
#kt-studio button:focus-visible{outline:2px solid #8b5cf6;outline-offset:1px}
#kt-studio button:disabled{opacity:.4;cursor:not-allowed}
#kt-studio button[aria-pressed=true]{background:rgba(124,58,237,.22);border-color:#8b5cf6}
#kt-studio button.kts-primary{color:#fff;border-color:transparent;background:linear-gradient(100deg,#2563eb,#7c3aed 55%,#ec4899)}
#kt-studio input.kts-in{height:30px;min-width:110px;max-width:240px;padding:0 .6rem;border-radius:8px;border:1px solid var(--kt-line,rgba(128,128,160,.35));background:var(--kt-card,rgba(255,255,255,.7));color:inherit;font:inherit;cursor:text}
#kt-studio input.kts-in:focus-visible{outline:2px solid #8b5cf6;outline-offset:1px}
#kt-studio .kts-state{opacity:.75;font-weight:600;white-space:nowrap}
#kt-studio .kts-state.dirty{color:#d97706;opacity:1}
#kt-studio .kts-i{font-size:15px;line-height:1}
@media(max-width:720px){#kt-studio .kts-l{display:none}#kt-studio button{padding:0 .5rem}}
/* el marco de un editor deja sitio a la fila extra */
html.kts-on .k64-frame{height:calc(100dvh - 172px)!important}

/* —— DISEÑO ESTÁNDAR: panel izquierdo · lienzo central · panel derecho (referencia: Creador de juegos) —— */
.ks-shell{display:grid;grid-template-columns:var(--ks-l,260px) minmax(0,1fr) var(--ks-r,300px);height:calc(100dvh - 172px);min-height:480px;background:var(--kt-bg,#0f172a);color:var(--kt-fg,#e2e8f0);border:1px solid var(--kt-line,rgba(128,128,160,.3));border-radius:12px;overflow:hidden;font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.ks-shell *{box-sizing:border-box}
.ks-left,.ks-right{display:flex;flex-direction:column;min-width:0;min-height:0;background:#111827;overflow:hidden}
.ks-left{border-right:1px solid rgba(255,255,255,.08)}.ks-right{border-left:1px solid rgba(255,255,255,.08)}
.ks-hd{display:flex;gap:2px;padding:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.ks-hd button{flex:1;padding:6px 4px;border:0;border-radius:7px;background:transparent;color:#94a3b8;font:700 12px system-ui;cursor:pointer}
.ks-hd button[aria-selected=true]{background:rgba(124,58,237,.25);color:#fff}
.ks-body{flex:1;overflow:auto;padding:10px;min-height:0}
.ks-canvas{position:relative;min-width:0;min-height:0;overflow:auto;background:#1e293b;display:flex;justify-content:center;align-items:flex-start;padding:18px}
.ks-sec{margin:0 0 14px}.ks-sec>h4{margin:0 0 6px;font:800 11px/1 system-ui;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}
@media(max-width:900px){.ks-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(320px,1fr) auto;height:auto}.ks-left,.ks-right{max-height:34vh}.ks-left{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.ks-right{border-left:0;border-top:1px solid rgba(255,255,255,.08)}}

/* el botón principal (Guardar…) siempre a la vista aunque la fila se desplace */
#kt-studio button.kts-primary{position:sticky;right:0;box-shadow:-10px 0 12px -4px rgba(255,255,255,.9)}
html.dark #kt-studio button.kts-primary{box-shadow:-10px 0 12px -4px rgba(15,23,42,.95)}
@media(max-width:1320px){#kt-studio button:not(.kts-primary) .kts-l{display:none}}