/* Karaoke.chat — base y layout */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--k-bg); color:var(--k-text);
  font-family:var(--k-font); font-size:var(--k-fs-body);
  line-height:1.45; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overscroll-behavior:none;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--k-line); border-radius:99px; }

/* El cursor estorba en TV: se oculta salvo que haya puntero real. */
body.tv,body.tv *{ cursor:none; }

/* ---------- Estructura ---------- */
#app{ display:flex; min-height:100vh; min-height:100dvh; }

#nav{
  position:fixed; inset:0 auto 0 0; z-index:40;
  width:var(--k-nav-w); flex:0 0 var(--k-nav-w);
  display:flex; flex-direction:column; gap:var(--k-s2);
  padding:var(--k-safe) var(--k-s3);
  background:linear-gradient(90deg,var(--k-bg-2) 0%,rgba(14,14,22,.92) 70%,rgba(14,14,22,0) 100%);
  transition:width var(--k-dur) var(--k-ease);
  overflow:hidden;
}
#nav.is-open{ width:var(--k-nav-w-open); background:var(--k-bg-2); }

#main{
  flex:1 1 auto; min-width:0;
  margin-left:var(--k-nav-w);
  padding:0 var(--k-safe) var(--k-s8);
}

/* ---------- Móvil: navegación inferior ---------- */
@media (max-width:600px){
  #app{ flex-direction:column; }
  #nav{
    inset:auto 0 0 0; width:100%; height:64px; flex-direction:row;
    padding:0 var(--k-s2); gap:0; background:var(--k-bg-2);
    border-top:1px solid var(--k-line);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  #nav.is-open{ width:100%; }
  #main{ margin-left:0; padding-bottom:96px; }
}

/* ---------- Tipografía de vistas ---------- */
.k-page-title{ font-size:var(--k-fs-h1); font-weight:800; letter-spacing:-.02em;
  margin:var(--k-s6) 0 var(--k-s4); }
.k-section-title{ font-size:var(--k-fs-h2); font-weight:700; margin:0 0 var(--k-s3); }
.k-muted{ color:var(--k-text-2); }
.k-meta{ font-size:var(--k-fs-meta); color:var(--k-text-2); }

.k-empty{
  padding:var(--k-s8) var(--k-s5); text-align:center; color:var(--k-text-2);
  border:1px dashed var(--k-line); border-radius:var(--k-radius-lg);
  margin:var(--k-s5) 0;
}
.k-empty strong{ display:block; color:var(--k-text); font-size:var(--k-fs-h2);
  margin-bottom:var(--k-s2); }

.k-error{
  background:rgba(255,77,77,.10); border:1px solid rgba(255,77,77,.4);
  color:#ffd7d7; padding:var(--k-s4); border-radius:var(--k-radius);
  margin:var(--k-s4) 0;
}

.k-skeleton{
  background:linear-gradient(90deg,var(--k-surface) 25%,var(--k-surface-2) 50%,var(--k-surface) 75%);
  background-size:200% 100%; animation:k-shimmer 1.4s linear infinite;
  border-radius:var(--k-radius);
}
@keyframes k-shimmer{ to{ background-position:-200% 0; } }

.k-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}