/* KlipTok v36 · estilos de la capa (kt-v36.css) — solo añade; no sobrescribe reglas anteriores salvo duplicados de menú */

/* ---- 2) sin duplicados en pantallas táctiles: Chat y You Crush ya tienen botón flotante ---- */
@media (max-width: 1023px), (pointer: coarse) {
  #ktc-side, #kcrush-side { display: none !important; }
}
nav.k22-side > h3[hidden] { display: none !important; }

/* ---- 3) reproductor propio ---- */
.snap-item .k36-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none; }
.k36-bar { position: relative; pointer-events: auto; height: 22px; display: flex; align-items: flex-end; cursor: pointer; touch-action: none; outline: none; }
.k36-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.28); transition: height .12s; }
.k36-bar > i { position: relative; display: block; height: 3px; width: 0; background: linear-gradient(90deg,#34d399,#a855f7); transition: height .12s; }
.k36-bar:hover::before, .k36-bar:hover > i, .k36-bar:focus-visible::before, .k36-bar:focus-visible > i, .k36-ui.on .k36-bar::before, .k36-ui.on .k36-bar > i { height: 7px; }
.k36-ui.on .k36-bar > i::after { content: ""; position: absolute; right: -7px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.5); }
.k36-time { position: absolute; right: .6rem; bottom: 26px; font: 600 .68rem/1 system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.55); padding: .2rem .45rem; border-radius: 9999px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.k36-ui.on .k36-time { opacity: 1; }

/* ---- 1) catálogo integrado en la vista «Herramientas» (se aplica dentro de /tools/) ---- */
#k36-cat { margin-top: 1.6rem; }
#k36-cat h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.15rem; margin: 0 0 .6rem; }
#k36-cat h2 small { opacity: .65; font-weight: 500; }
#k36-cat .k36-tabs { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem 0 .6rem; -webkit-overflow-scrolling: touch; }
#k36-cat .k36-tabs button { flex: 0 0 auto; border-radius: 9999px; padding: .35rem .8rem; border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .82rem; }
#k36-cat .k36-tabs button[aria-pressed="true"] { background: linear-gradient(90deg,#10b981,#7c3aed); color: #fff; border-color: transparent; }
#k36-cat .k36-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
#k36-cat .k36-item { text-align: left; display: flex; flex-direction: column; gap: .25rem; padding: .75rem .85rem; border-radius: 12px; border: 1px solid rgba(127,127,127,.3); background: rgba(127,127,127,.07); color: inherit; cursor: pointer; font: inherit; min-height: 64px; }
#k36-cat .k36-item:hover, #k36-cat .k36-item:focus-visible { border-color: #8b5cf6; background: rgba(139,92,246,.12); outline: none; }
#k36-cat .k36-item b { font-size: .9rem; display: flex; gap: .4rem; align-items: center; }
#k36-cat .k36-item span { font-size: .75rem; opacity: .75; line-height: 1.35; }
#k36-cat .k36-item.soon { opacity: .5; cursor: default; }
#k36-cat .k36-gh { grid-column: 1 / -1; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin-top: .4rem; font-weight: 700; }

/* ---- 4) ventanas de Image Map Creator y String Art Generator ---- */
.k36m { position: fixed; inset: 0; z-index: 100000; background: rgba(2,6,23,.66); display: flex; align-items: stretch; justify-content: center; padding: 0; }
@media (min-width: 900px) { .k36m { padding: 2.5vh 2vw; } }
.k36m-box { width: 100%; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; background: #fff; color: #0f172a; border-radius: 0; overflow: hidden; }
@media (min-width: 900px) { .k36m-box { border-radius: 16px; } }
html.dark .k36m-box, body.dark .k36m-box, .dark .k36m-box { background: #0f172a; color: #e2e8f0; }
.k36m-box > .k36m-h { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(127,127,127,.3); padding-top: max(.8rem, env(safe-area-inset-top)); }
.k36m-box > .k36m-h b { display: block; font-size: 1.05rem; }
.k36m-box > .k36m-h small { display: block; opacity: .7; font-size: .78rem; margin-top: .15rem; }
.k36m-x { border: 0; background: rgba(127,127,127,.2); color: inherit; border-radius: 9999px; width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; flex: 0 0 auto; }
.k36m-body { padding: 1rem; overflow: auto; flex: 1; -webkit-overflow-scrolling: touch; padding-bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .8rem; }
.k36m-body input[type=text], .k36m-body input:not([type]), .k36m-body textarea, .k36m-body input[type=file] { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border-radius: 10px; border: 1px solid rgba(127,127,127,.4); background: transparent; color: inherit; font: inherit; font-size: 16px; }
.k36m-body textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; resize: vertical; }
.k36m-body label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; }
.k36m-body label output { font-weight: 700; color: #8b5cf6; margin-left: .3rem; }
.k36m-body input[type=range] { width: 100%; min-height: 32px; accent-color: #8b5cf6; }
.k36r { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .k36r { grid-template-columns: 1fr 1fr; } }
.k36grid2 { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .k36grid2 { grid-template-columns: 1fr 1fr; } }
.k36chk { flex-direction: row !important; align-items: center; gap: .5rem !important; font-weight: 500 !important; }
.k36seg { display: flex; gap: .4rem; flex-wrap: wrap; }
.k36seg button, .k36row button { min-height: 44px; padding: .5rem .9rem; border-radius: 9999px; border: 1px solid rgba(127,127,127,.4); background: transparent; color: inherit; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.k36seg button[aria-pressed="true"], .k36row button.k36p { background: linear-gradient(90deg,#10b981,#7c3aed); color: #fff; border-color: transparent; }
.k36row { display: flex; gap: .5rem; flex-wrap: wrap; }
.k36row button:disabled { opacity: .45; cursor: not-allowed; }
.k36stage { position: relative; background: repeating-conic-gradient(rgba(127,127,127,.18) 0 25%, transparent 0 50%) 0 0 / 18px 18px; border-radius: 12px; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 160px; }
.k36stage canvas { display: block; max-width: 100%; height: auto; touch-action: none; }
.k36stage.sq canvas { width: min(100%, 560px); aspect-ratio: 1; border-radius: 50%; background: #fff; }
.k36stage .k36hint { position: absolute; margin: 0; }
.k36hint { font-size: .8rem; opacity: .75; margin: 0; }
.k36list { display: flex; flex-direction: column; gap: .5rem; }
.k36item { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: .5rem; align-items: center; padding: .5rem; border-radius: 10px; border: 1px solid rgba(127,127,127,.3); }
.k36item b { font-size: .8rem; white-space: nowrap; }
.k36item button { width: 44px; height: 44px; border-radius: 10px; border: 0; background: rgba(239,68,68,.15); cursor: pointer; }
@media (max-width: 639px) { .k36item { grid-template-columns: 1fr auto; } .k36item b { grid-column: 1 / 2; } .k36item input { grid-column: 1 / -1; } .k36item button { grid-column: 2; grid-row: 1; } }
.k36bar2 { height: 8px; border-radius: 9999px; background: rgba(127,127,127,.25); overflow: hidden; } .k36bar2 > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#10b981,#7c3aed); transition: width .1s; }
.k36cur { margin: 0; font-weight: 700; font-size: .95rem; }
body.k36m-open { overflow: hidden; }

/* correcciones de maquetación de las ventanas */
.k36m-box { height: 100%; min-height: 0; }
.k36m-body { min-height: 0; }
.k36m-box > .k36m-h { flex: 0 0 auto; }
.k36row[hidden], .k36bar2[hidden], .k36m [hidden] { display: none !important; }
.k36stage { display: block; min-height: 0; }
.k36stage canvas { width: 100%; height: auto; margin: 0 auto; }
.k36stage.sq canvas { width: min(100%, 560px); }
.k36stage #im-empty { position: static; padding: 3rem 1rem; text-align: center; }
.k36stage #im-empty[hidden] { display: none !important; }

.k36m-body > * { flex-shrink: 0; }
.k36m-box > .k36m-h b, .k36m-box > .k36m-h small { display: block; }