/* KlipToc v23 · sección dentro de la app */
#k23-sec { display: none; flex: 1 1 0; min-width: 0; min-height: 0; flex-direction: column; position: relative; background: var(--kt-bg, #f8fafc); }
body.k23-on #k23-sec { display: flex; }
body.k23-on #feed-container { display: none !important; }
body.k23-on .kt-pg, body.k23-on .k19-nav, body.k23-on .k19-fab { display: none !important; }
#k23-sec[hidden] { display: none !important; }
.k23-frame { flex: 1 1 auto; width: 100%; border: 0; min-height: 0; background: transparent; }
.k23-load { position: absolute; inset: 40px 0 0; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: .9rem; pointer-events: none; }
.k23-load[hidden] { display: none; }
/* v226 · SIN barra «▶ Vídeos»: ya no aparece en ninguna página (ni móvil ni escritorio).
   Para volver al inicio / a los vídeos: icono del logo de KlipToc (arriba) o Reels en el menú.
   El elemento sigue en el DOM, oculto, porque kt-v101-context-nav.js lee su título. */
.k23-bar { display: none !important; }
.k23-load { inset: 0 !important; }
@media (max-width: 767px) {
  body.k23-on .k22-barsbtn { display: none; }
}
/* enlace de sección activo (cabecera y menú) */
a.k23-act { background: linear-gradient(90deg, rgba(79,70,229,.14), rgba(219,39,119,.14)); border-radius: .6rem; font-weight: 700 !important; }

/* v101.7 · Secciones a pantalla útil: sin menú de clips ni scroll lila */
body.k23-on #kt-scroll-rail {
  display: none !important;
}
body.k23-on #k23-sec {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
body.k23-on .k23-host,
body.k23-on .k23-host .k18-hosted,
body.k23-on .k23-host .km-host {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}
/* Estudios (constructor, juegos, audio…): máximo espacio bajo la barra superior */
body.k23-on[data-k23sec="constructor-web"] .k23-bar,
body.k23-on[data-k23sec="estudio-juegos"] .k23-bar,
body.k23-on[data-k23sec="creador-juegos"] .k23-bar,
body.k23-on[data-k23sec="estudio-audio"] .k23-bar,
body.k23-on[data-k23sec="estudio-foto-video"] .k23-bar {
  /* se mantiene la barra «▶ Vídeos» para volver; el resto del chrome global ya está oculto */
}

/* v101.8 · menú contextual al lado de la sección */
body.k23-on #k23-sec { flex: 1 1 auto; }
/* parent flex: index feed column becomes section host */
body.k23-on .flex-1.flex.flex-col.min-w-0,
body.k23-on #app-main,
body.k23-on main {
  /* no fuerza */
}

/* v226 · SCROLL en secciones que van en marco (Instrumentos y herramientas de música, estudios…):
   antes el marco se encogía al alto de la pantalla (flex-shrink) y su contenedor tenía overflow:hidden,
   así que lo que quedaba más abajo no se podía alcanzar ni subir/bajar. Ahora el panel hace scroll vertical
   y el marco conserva el alto que le pide la página. */
.k23-host:has(> .k64-frame) { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: auto; display: block !important; }
.k23-host > .k64-frame { flex: 0 0 auto !important; }

/* v246 · BARRA DE DESPLAZAMIENTO EN TODAS LAS SECCIONES
   Antes .k23-host tenía overflow:hidden: en «Texto a audio con avatares», «Audio a texto» y otras páginas
   cuyo contenido es más alto que la pantalla, lo de abajo quedaba cortado y sin forma de bajar.
   Ahora el panel hace scroll vertical cuando (y solo cuando) su contenido no cabe, con una barra pequeña y fina.
   Las secciones que ya tienen su propio scroll interno no cambian: su alto encaja con el del panel. */
body.k23-on .k23-host {
  overflow-x: hidden !important; overflow-y: auto !important;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto;
  scrollbar-width: thin; scrollbar-color: #a78bfa transparent;
}
body.k23-on .k23-host:has(> .k48s) { display: block !important; }
body.k23-on .k23-host:has(> .k48s) > .k48s { min-height: 100%; }
body.k23-on .k23-host::-webkit-scrollbar { width: 8px; height: 8px; }
body.k23-on .k23-host::-webkit-scrollbar-thumb { background: #a78bfa; border-radius: 8px; }
body.k23-on .k23-host::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 767px) { body.k23-on .k23-host::-webkit-scrollbar { width: 5px; } }