/* =====================================================================================================================
   KlipTok v160 · MENÚ ÚNICO + BARRA SUPERIOR REDUCIDA  (assets/kt-v160-menu.css  +  assets/kt-v160-menu.js)

   · UN solo menú: el lateral oscuro (#kt-side). Antes había además: el lateral claro con el Reproductor, la barra de
     secciones de arriba (mega menú), la barra de 8 enlaces de la tablet, la hoja «☰ Menú» del móvil y el cajón contextual.
   · Escritorio / tablet horizontal (≥ 1024 px): columna fija a la izquierda que se puede cerrar con «‹» y volver a abrir
     con el ☰ de la barra de arriba (el estado se recuerda).
   · Tablet vertical y móvil (< 1024 px): cajón que entra por la izquierda con capa oscura (#ks-ov).
   · Barra de arriba: ☰ · logo · buscador · Subir · cuenta. Sólida (sin transparencia).
   Estructura del menú (de arriba abajo, orden por data-ks):
     cabecera + buscador (fijos) · Inicio · Reproductor · Crear · «En esta sección» · Explorar · Mi espacio · Clips · Ajustes · Legal
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------------------
   1 · BARRA SUPERIOR  — sólida y con pocos elementos
   --------------------------------------------------------------------------------------------------------------- */
html #kt-top {
  --kt-glass: #ffffff;
  background-color: #ffffff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.dark #kt-top { --kt-glass: #0b1022; background-color: #0b1022 !important; }

/* ☰ visible en todos los tamaños */
html #kt-top #kt-menu {
  display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem; margin: 0 !important; padding: 0 !important; border-radius: .8rem;
  border: 1px solid var(--kt-line); background: var(--kt-card); color: var(--kt-ink); cursor: pointer;
}
html #kt-top #kt-menu:hover { background: var(--kt-hover); }
html #kt-top #kt-menu[aria-expanded="true"] { background: var(--kt-hover); border-color: var(--kt-acc); }
html #kt-top #kt-menu svg { width: 1.2rem; height: 1.2rem; }

/* lo que ya no va en la barra (cada cosa tiene ahora su sitio en el menú) */
#k19-topnav, .kt38-nav, .k58-burger, .k58-sg, #k40-langbtn, #kt-theme, #kt-sb { display: none !important; }

/* el logo no se pisa con nada */
#kt-top #logo-home { flex: 0 1 auto; min-width: 0; }

@media (max-width: 767px) {
  /* móvil: ☰ · logo · [lupa] [+] [cuenta]  — cabe en 360 px */
  #kt-top .kt-top-r { gap: .3rem; }
  #kt-top #kt-upload { width: 2.4rem; padding: 0 !important; }
  #kt-top #kt-upload .kt-lbl-sm { display: none !important; }
  #kt-top .kt-acc-name { display: none !important; }
  #kt-top #kt-login span { display: none; }
  #kt-top #kt-login { width: 2.4rem; padding: 0 !important; border-radius: 9999px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   2 · EL MENÚ (#kt-side)
   --------------------------------------------------------------------------------------------------------------- */
html #kt-side, html aside#kt-side.kt-aside {
  --ks-w: 16.5rem; --ks-ink: #e6e8f8; --ks-mute: #9ba4cb; --ks-line: rgba(255, 255, 255, .11);
  --ks-hov: rgba(255, 255, 255, .09); --ks-on: rgba(167, 139, 250, .30); --ks-acc: #c4b5fd;
  position: relative; z-index: 30;
  display: flex !important; flex-direction: column; flex: 0 0 var(--ks-w);
  width: var(--ks-w); max-width: 100%; height: auto; min-height: 0; box-sizing: border-box;
  margin: 0; padding: 0 .6rem 1.2rem !important;
  background: #0f172a linear-gradient(180deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%) !important;   /* sólido: nada se transparenta */
  color: var(--ks-ink); border: 0 !important; border-right: 1px solid rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  overflow-x: hidden; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent;
  font: 500 .86rem/1.3 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: flex-basis .22s ease, width .22s ease, padding .22s ease;
}
#kt-side::-webkit-scrollbar { width: 8px; }
#kt-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 8px; }
#kt-side > * { flex-shrink: 0; }
#kt-side hr, #kt-side #kt-asw, #kt-side .k22-close, #kt-side #k58-aside, #kt-side .kt-asw { display: none !important; }
#kt-side [hidden] { display: none !important; }

/* cerrado en escritorio */
@media (min-width: 1024px) {
  html.ks-closed #kt-side { flex-basis: 0; width: 0; padding-left: 0 !important; padding-right: 0 !important; border-right-width: 0 !important; visibility: hidden; overflow: hidden !important; }
}

/* orden de los bloques (el DOM trae cosas de varios scripts; aquí se coloca todo) */
#kt-side > [data-ks="top"]      { order: 0; }
#kt-side > [data-ks="main"]     { order: 10; margin-top: .55rem; }
#kt-side > [data-ks="player"]   { order: 11; }
#kt-side > [data-ks="h-create"] { order: 20; }
#kt-side > [data-ks="quick"]    { order: 21; }
#kt-side > [data-ks="tools"]    { order: 22; }
#kt-side > [data-ks="ctx"]      { order: 30; }
#kt-side > [data-ks="h-explore"]{ order: 40; }
#kt-side > [data-ks="explore"]  { order: 41; }
#kt-side > [data-ks="h-me"]     { order: 50; }
#kt-side > [data-ks="account"]  { order: 51; }
#kt-side > [data-ks="media"]    { order: 60; }
#kt-side > [data-ks="assets"]   { order: 61; }
#kt-side > [data-ks="h-prefs"]  { order: 70; }
#kt-side > [data-ks="prefs"]    { order: 71; }
#kt-side > [data-ks="legal"]    { order: 80; }
#kt-side > [data-ks="misc"]     { order: 90; }

/* ---- cabecera fija: título + cerrar + buscador ---- */
#kt-side .ks-top {
  position: sticky; top: 0; z-index: 6; margin: 0 -.6rem; padding: .75rem .6rem .6rem;
  background: #0f172a; border-bottom: 1px solid var(--ks-line);
}
#kt-side .ks-hd { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .25rem .55rem; }
#kt-side .ks-hd b { font-size: .95rem; letter-spacing: .02em; }
#kt-side .ks-hd small { display: block; font-size: .7rem; color: var(--ks-mute); font-weight: 500; margin-top: .05rem; }
#kt-side .ks-x {
  display: grid; place-items: center; flex: 0 0 2.2rem !important; width: 2.2rem !important; height: 2.2rem; border: 0; border-radius: .7rem; cursor: pointer;
  background: rgba(255, 255, 255, .10); font-size: 1.15rem; line-height: 1; padding: 0;
}
#kt-side .ks-x:hover { background: rgba(255, 255, 255, .2) !important; }
#kt-side .ks-x .m { display: none; }
#kt-side .ks-find input {
  width: 100%; box-sizing: border-box; height: 2.3rem; padding: 0 .9rem; border-radius: 9999px;
  border: 1px solid var(--ks-line); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: .82rem;
}
#kt-side .ks-find input::placeholder { color: var(--ks-mute); }
#kt-side .ks-find input:focus { outline: 2px solid var(--ks-acc); outline-offset: 1px; background: rgba(255, 255, 255, .12); }

/* ---- títulos de bloque ---- */
#kt-side .ks-h, #kt-side .uppercase {
  margin: 1rem 0 .25rem; padding: 0 .75rem; font: 700 .66rem/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ks-mute) !important;
}
#kt-side [data-ks="media"], #kt-side [data-ks="assets"] { margin-top: .2rem; }
#kt-side [data-ks="media"] > .uppercase { margin-top: 1rem; }

/* ---- filas (botones y enlaces de cualquier origen) ---- */
#kt-side :is(a, button):not(.ks-x) { color: var(--ks-ink) !important; text-decoration: none; background: transparent; }
#kt-side :is(a, button):not(.ks-x):hover { background: var(--ks-hov) !important; transform: none !important; }
#kt-side :is(a, button):focus-visible { outline: 2px solid var(--ks-acc); outline-offset: -2px; }
#kt-side [data-nav], #kt-side .k22-side :is(a, button), #kt-side #kt-nav-tools button, #kt-side .ks-row {
  display: flex; align-items: center; gap: .7rem; width: 100%; box-sizing: border-box; min-height: 2.5rem;
  padding: .45rem .75rem; border: 0; border-radius: .75rem; font: 600 .86rem/1.25 Inter, system-ui, sans-serif; text-align: left; cursor: pointer;
}
#kt-side [data-nav] svg, #kt-side .ks-row svg { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
#kt-side [data-nav].bg-slate-100, #kt-side [data-nav][class*="text-purple-600"] { background: var(--ks-on) !important; color: #fff !important; }
#kt-side .ks-row > i { font-style: normal; width: 1.3rem; text-align: center; flex: 0 0 auto; }
#kt-side .ks-row > span { flex: 1; min-width: 0; }
#kt-side .ks-row em, #kt-side [data-count] { font-style: normal; font-size: .72rem; opacity: .7; }
#kt-side .k22-side { margin: 0; gap: .1rem; }
#kt-side .k22-side h3 { display: none; }   /* ya hay un botón «Reproductor» con su propio texto */

/* accesos de creación (los dos editores) */
#kt-side [data-ks="quick"] { display: flex; flex-direction: column; gap: .3rem; padding: 0 .1rem; }
#kt-side [data-ks="quick"] button {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.5rem; padding: .45rem .75rem; border-radius: .75rem;
  border: 1px solid var(--ks-line) !important; background: rgba(255, 255, 255, .06); font: 600 .84rem Inter, system-ui, sans-serif; cursor: pointer;
}
#kt-side [data-ks="quick"] button.bg-gradient-to-r { background: linear-gradient(90deg, #2563eb, #9333ea, #ec4899) !important; border: 0 !important; color: #fff !important; }

/* ---- «Explorar»: acordeón con todas las secciones ---- */
#kt-side .ks-grp { margin: .1rem 0; }
#kt-side .ks-gh {
  display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 2.55rem; padding: .5rem .75rem; border: 0; border-radius: .75rem;
  font: 700 .86rem/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer;
}
#kt-side .ks-gh > i { font-style: normal; width: 1.4rem; text-align: center; font-size: 1.05rem; }
#kt-side .ks-gh > span { flex: 1; min-width: 0; }
#kt-side .ks-gh > em { font-style: normal; font-size: .68rem; font-weight: 700; opacity: .75; background: rgba(255, 255, 255, .12); padding: .08rem .45rem; border-radius: 999px; }
#kt-side .ks-gh > svg { width: 1rem; height: 1rem; opacity: .7; transition: transform .18s; flex: 0 0 auto; }
#kt-side .ks-grp.open > .ks-gh { background: rgba(255, 255, 255, .07); }
#kt-side .ks-grp.open > .ks-gh > svg { transform: rotate(180deg); }
#kt-side .ks-grp.has-on > .ks-gh > i::after { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-left: .15rem; border-radius: 50%; background: #a78bfa; vertical-align: top; }
#kt-side .ks-gb { margin: .15rem 0 .45rem 1.35rem; padding: 0 0 0 .55rem; border-left: 1px solid var(--ks-line); }
#kt-side .ks-gb h4 { margin: .6rem 0 .15rem .5rem; font: 700 .64rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-mute); }
#kt-side .ks-gb a { display: flex; align-items: center; gap: .6rem; min-height: 2.15rem; padding: .3rem .6rem; border-radius: .6rem; font-size: .83rem; font-weight: 500; }
#kt-side .ks-gb a > i { font-style: normal; width: 1.2rem; text-align: center; flex: 0 0 auto; }
#kt-side .ks-gb a.on { background: var(--ks-on) !important; color: #fff !important; font-weight: 700; }
#kt-side .ks-none { margin: .6rem .75rem; font-size: .8rem; color: var(--ks-mute); }

/* ---- «En esta sección» (lo rellena kt-v101-context-nav.js) ---- */
#kt-ctx-here {
  margin: .9rem 0 .1rem; padding: .7rem .5rem .5rem; border-radius: 1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, .32), rgba(219, 39, 119, .20)); border: 1px solid rgba(255, 255, 255, .14);
}
#kt-ctx-here:empty, #kt-ctx-here:not(:has(.ctx-link, .ctx-cg)) { display: none; }
#kt-ctx-here .ctx-hd { padding: .1rem .4rem .45rem; border-bottom: 1px solid var(--ks-line); margin-bottom: .35rem; }
#kt-ctx-here .ctx-k { display: block; font: 700 .6rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #ddd6fe; margin-bottom: .15rem; }
#kt-ctx-here .ctx-hd b { display: block; font-size: .98rem; }
#kt-ctx-here .ctx-hd small { display: block; margin-top: .1rem; font-size: .72rem; line-height: 1.35; color: #c7d2fe; }
#kt-ctx-here .ctx-group { margin: .6rem .4rem .15rem; font: 700 .62rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #c7d2fe; }
#kt-ctx-here a.ctx-link { display: flex; align-items: center; gap: .55rem; min-height: 2.3rem; padding: .4rem .5rem; border-radius: .65rem; font-size: .85rem; font-weight: 500; }
#kt-ctx-here a.ctx-link.on { background: rgba(255, 255, 255, .17) !important; font-weight: 700; }
#kt-ctx-here a.ctx-link .ic { width: 1.35rem; text-align: center; flex: 0 0 auto; }
#kt-ctx-cats .ctx-ghd { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: .55rem 0 .1rem; padding: .3rem .45rem; border: 0; cursor: pointer; font: 700 .64rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #c7d2fe !important; text-align: left; }
#kt-ctx-cats .ctx-ghd i { font-style: normal; transition: transform .15s; }
#kt-ctx-cats .ctx-cg:not(.open) .ctx-ghd i { transform: rotate(-90deg); }
#kt-ctx-cats .ctx-cg:not(.open) .ctx-cl { display: none; }
#kt-ctx-cats .ctx-cg.sub .ctx-ghd { text-transform: none; letter-spacing: 0; font-size: .78rem; padding-left: .9rem; }
#kt-ctx-cats .ctx-cat { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 2.2rem; padding: .4rem .55rem; border: 0; border-radius: .6rem; font-size: .84rem; font-weight: 500; text-align: left; cursor: pointer; }
#kt-ctx-cats .ctx-cg.sub .ctx-cat { padding-left: 1.1rem; }
#kt-ctx-cats .ctx-cat.on { background: rgba(255, 255, 255, .17) !important; font-weight: 700; }
#kt-ctx-cats .ctx-cat .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kt-ctx-cats .ctx-cat em { font-style: normal; font-size: .7rem; opacity: .8; background: rgba(255, 255, 255, .13); padding: .05rem .4rem; border-radius: 999px; }

/* ---- «Ajustes» (tema, idioma, cartera, administración) ---- */
#kt-side [data-ks="prefs"] { display: flex; flex-direction: column; gap: .1rem; }
#kt-side [data-ks="prefs"] .ks-row .ks-pill { margin-left: auto; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: rgba(52, 211, 153, .18); color: #6ee7b7; }
#kt-side [data-ks="prefs"] .ks-row .ks-cur { margin-left: auto; font-size: .74rem; font-weight: 700; opacity: .8; }

/* ---- legal: lista simple (el flotante ⓘ de v19 solo servía en el carril estrecho, que ya no existe) ---- */
#kt-side #k19-legal { margin: 1.1rem 0 0; padding: .9rem .75rem 0; border-top: 1px solid var(--ks-line) !important; font-size: .74rem; color: var(--ks-mute); }
#kt-side #k19-legal .k19-info, #kt-side #k19-legal .k19-secs { display: none !important; }
#kt-side #k19-legal .k19-list, #kt-side #k19-legal.k19-rail .k19-list { display: block !important; }
#kt-side #k19-legal h3 { margin: 0 0 .35rem; font: 700 .62rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-mute); }
#kt-side #k19-legal .k19-list a { display: inline-block; padding: .15rem .55rem .15rem 0; font-size: .74rem; font-weight: 500; color: var(--ks-mute) !important; border-radius: .3rem; }
#kt-side #k19-legal .k19-list a:hover { color: #fff !important; background: transparent !important; text-decoration: underline; }
#kt-side #k19-legal .k19-copy, #kt-side #k19-legal .k19-credit { margin-top: .5rem; opacity: .75; }

/* ---------------------------------------------------------------------------------------------------------------
   3 · TABLET VERTICAL Y MÓVIL: cajón con capa oscura
   --------------------------------------------------------------------------------------------------------------- */
#ks-ov { display: none; position: fixed; inset: 0; z-index: 79; background: rgba(2, 6, 23, .58); }
#ks-ov.on { display: block; }

@media (max-width: 1023.98px) {
  html #kt-side, html aside#kt-side.kt-aside {
    position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(20rem, 88vw); flex: none; visibility: hidden;
    padding-top: env(safe-area-inset-top, 0px) !important; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-104%); transition: transform .24s ease, visibility 0s linear .24s;
  }
  html #kt-side.kt-open, html aside#kt-side.kt-aside.kt-open { transform: none; visibility: visible; transition: transform .24s ease, visibility 0s; box-shadow: 14px 0 44px rgba(0, 0, 0, .5); }
  #kt-side .ks-x .d { display: none; }
  #kt-side .ks-x .m { display: inline; }
  /* móvil/tablet vertical: las categorías de la sección se quedan dentro de su propia página; el cajón no las duplica */
  #kt-ctx-cats { display: none; }
}
@media (prefers-reduced-motion: reduce) { #kt-side { transition: none !important; } }

/* ---------------------------------------------------------------------------------------------------------------
   4 · Categorías propias de cada sección: solo se ocultan mientras el menú está a la vista (≥ 1024 px y abierto)
   --------------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html.ctx-merged:not(.ks-closed) body.k23-on .k31-menu,
  html.ctx-merged:not(.ks-closed) body.k23-on .kf-menu,
  html.ctx-merged:not(.ks-closed) body.k23-on .kf-burger,
  html.ctx-merged:not(.ks-closed) body.k23-on .kl-nav,
  html.ctx-merged:not(.ks-closed) body.k23-on .kl-chips,
  html.ctx-merged:not(.ks-closed) body.k23-on .k22c-cats,
  html.ctx-merged:not(.ks-closed) body.k23-on .k54-tabs,
  html.ctx-merged:not(.ks-closed) body.k23-on .km-panel:has(.km-cat) { display: none !important; }
  html.ctx-merged:not(.ks-closed) body.k23-on .k31-wrap { grid-template-columns: minmax(0, 1fr) 270px !important; }
  html.ctx-merged:not(.ks-closed) body.k23-on .k31-wrap.k31-art-wrap { grid-template-columns: minmax(0, 860px) 280px !important; justify-content: center; }
  html.ctx-merged:not(.ks-closed) body.k23-on .kf-wrap { grid-template-columns: minmax(0, 1fr) 300px !important; }
  html.ctx-merged:not(.ks-closed) body.k23-on .kf-wrap.kf-nosd { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  html.ctx-merged:not(.ks-closed) body.k23-on .k31-wrap,
  html.ctx-merged:not(.ks-closed) body.k23-on .k31-wrap.k31-art-wrap,
  html.ctx-merged:not(.ks-closed) body.k23-on .kf-wrap { grid-template-columns: minmax(0, 1fr) !important; }
}

/* El antiguo capa/botón del cajón de v22 ya no se usa (su lugar lo ocupa #ks-ov) */
#kt-back { display: none !important; }

/* ===== v162 · correcciones tras revisar capturas ===== */
/* ☰ duplicado de Reels (el menú único ya tiene su ☰ en la barra) y botón flotante que tapaba el pie del menú */
html .k19-reelmenu, html .k22-barsbtn { display: none !important; }
html .kp-love { display: none !important; }   /* «Calculadora de amor» sigue en Explorar → Red social */
/* ☰ repetido: dos scripts del index crean #kt-menu; solo se ve el primero */
#kt-top #kt-menu ~ #kt-menu, body > #kt-menu, header #kt-menu { display: none !important; }
/* logo completo en móvil (kt-v33-red lo recortaba a 5.5rem) */
@media (max-width: 767px) { html #kt-top #logo-home { max-width: none !important; overflow: visible !important; } }
