/* KlipToc v263 · ICONOS DE LA BARRA SUPERIOR (acompaña a kt-v263-iconos.js). Más pequeños, con el color de la marca y un toque de brillo.
   Cada icono tiene su color (mensajes azul · reels rosa · buscar violeta · menú índigo); al pasar el ratón se llena con el degradado de KlipToc.
   Quitar: borrar este .css, el .js y sus dos etiquetas en index.html (se vuelve al aspecto anterior). */
html #kt-top .kt-top-r { gap: .38rem !important; }
html #kt-top #kt-chat-top, html #kt-top #kt-reels-top, html #kt-top #kt-sb2, html #kt-top #kt-menu-r {
  --ic: #6366f1;
  display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; position: relative;
  width: 2rem !important; height: 2rem !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important;
  color: var(--ic) !important; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ic) 28%, transparent) !important;
  background: color-mix(in srgb, var(--ic) 9%, var(--kt-card, #fff)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
html #kt-top #kt-chat-top { --ic: #2563eb; }
html #kt-top #kt-reels-top { --ic: #ec4899; }
html #kt-top #kt-sb2 { --ic: #9333ea; }
html #kt-top #kt-menu-r { --ic: #6366f1; }
html #kt-top #kt-chat-top svg, html #kt-top #kt-reels-top svg, html #kt-top #kt-sb2 svg, html #kt-top #kt-menu-r svg, html #kt-top #kt-login svg { width: 17px !important; height: 17px !important; display: block; overflow: visible; }
html #kt-top #kt-chat-top:hover, html #kt-top #kt-reels-top:hover, html #kt-top #kt-sb2:hover, html #kt-top #kt-menu-r:hover,
html #kt-top #kt-chat-top:focus-visible, html #kt-top #kt-reels-top:focus-visible, html #kt-top #kt-sb2:focus-visible, html #kt-top #kt-menu-r:focus-visible {
  transform: translateY(-1px) scale(1.06); color: #fff !important; border-color: transparent !important; outline: 0;
  background: linear-gradient(135deg, var(--ic), color-mix(in srgb, var(--ic) 55%, #ec4899)) !important;
  box-shadow: 0 6px 14px -5px color-mix(in srgb, var(--ic) 75%, transparent);
}
html #kt-top #kt-chat-top:active, html #kt-top #kt-reels-top:active, html #kt-top #kt-sb2:active, html #kt-top #kt-menu-r:active { transform: scale(.94); }
html #kt-top #kt-menu-r[aria-expanded="true"] { color: #fff !important; border-color: transparent !important; background: linear-gradient(135deg, #6366f1, #9333ea) !important; }
/* «Entrar»: píldora con borde de degradado; al pasar se llena */
html #kt-top #kt-login {
  height: 2rem !important; padding: 0 .85rem 0 .65rem !important; gap: .38rem; border-radius: 9999px !important; font-weight: 700; font-size: .78rem; letter-spacing: .01em;
  color: var(--kt-ink, #0f172a) !important; border: 1.5px solid transparent !important;
  background: linear-gradient(var(--kt-card, #fff), var(--kt-card, #fff)) padding-box, var(--kt-grad, linear-gradient(90deg, #2563eb, #9333ea, #ec4899)) border-box !important;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
html #kt-top #kt-login svg { color: #9333ea; transition: color .18s; }
html #kt-top #kt-login:hover, html #kt-top #kt-login:focus-visible {
  transform: translateY(-1px); color: #fff !important; outline: 0; box-shadow: 0 6px 14px -5px rgba(147, 51, 234, .7);
  background: var(--kt-grad, linear-gradient(90deg, #2563eb, #9333ea, #ec4899)) border-box !important;
}
html #kt-top #kt-login:hover svg, html #kt-top #kt-login:focus-visible svg { color: #fff; }
html.dark #kt-top #kt-chat-top, html.dark #kt-top #kt-reels-top, html.dark #kt-top #kt-sb2, html.dark #kt-top #kt-menu-r { --ic: color-mix(in srgb, var(--ic-d, #a5b4fc) 100%, transparent); box-shadow: none; }
html.dark #kt-top #kt-chat-top { --ic-d: #60a5fa; --ic: #60a5fa; }
html.dark #kt-top #kt-reels-top { --ic-d: #f472b6; --ic: #f472b6; }
html.dark #kt-top #kt-sb2 { --ic-d: #c084fc; --ic: #c084fc; }
html.dark #kt-top #kt-menu-r { --ic-d: #a5b4fc; --ic: #a5b4fc; }
html.dark #kt-top #kt-login svg { color: #c084fc; }
html.dark #kt-top #kt-login:hover svg, html.dark #kt-top #kt-login:focus-visible svg { color: #fff; }
html.dark #kt-top #kt-login:hover, html.dark #kt-top #kt-login:focus-visible { color: #fff !important; }
@media (max-width: 767px) {
  html #kt-top .kt-top-r { gap: .28rem !important; }
  html #kt-top #kt-login { width: 2rem !important; padding: 0 !important; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { html #kt-top #kt-chat-top, html #kt-top #kt-reels-top, html #kt-top #kt-sb2, html #kt-top #kt-menu-r, html #kt-top #kt-login { transition: none; } }