/* =========================================================================
   KlipTok v11 · ESTILOS  (kt-v11.css)
   Propios, sin Tailwind: así la cabecera, el pie y los menús se ven bien aunque
   el CDN tarde en cargar. Todo colgado de variables → claro / oscuro automáticos.
   Secciones: 1 variables · 2 fondo · 3 cabecera · 4 menú de cuenta · 5 pie ·
              6 hub de herramientas · 7 utilidades
   ========================================================================= */

/* ---------- 1) variables ---------- */
:root {
  --kt-bg: #eef0fa; --kt-ink: #0f172a; --kt-mute: #5b6478; --kt-line: rgba(15, 23, 42, .11);
  --kt-glass: rgba(255, 255, 255, .84); --kt-card: #ffffff; --kt-hover: rgba(99, 102, 241, .09);
  --kt-doodle: #5b4bc4; --kt-doodle-o: .11; --kt-acc: #7c3aed; --kt-ok: #059669;
  --kt-grad: linear-gradient(90deg, #2563eb, #9333ea, #ec4899);
  --kt-shadow: 0 18px 50px -12px rgba(30, 27, 75, .35);
}
html.dark {
  --kt-bg: #0b1022; --kt-ink: #e7eaf6; --kt-mute: #9aa4bd; --kt-line: rgba(255, 255, 255, .11);
  --kt-glass: rgba(11, 16, 34, .84); --kt-card: #131a33; --kt-hover: rgba(165, 180, 252, .12);
  --kt-doodle: #a5b4fc; --kt-doodle-o: .075; --kt-acc: #a78bfa; --kt-ok: #34d399;
  --kt-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7);
}

/* ---------- 2) fondo: patrón de iconos al estilo de un chat ---------- */
body {
  background-color: var(--kt-bg) !important;
  background-image:
    radial-gradient(52rem 34rem at 0% 0%, rgba(124, 58, 237, .13), transparent 62%),
    radial-gradient(46rem 34rem at 100% 100%, rgba(236, 72, 153, .11), transparent 62%) !important;
  color: var(--kt-ink);
}
/* Capa de iconos: se desliza muy despacio con transform (barato para la GPU).
   z-index -1 → queda debajo de todo el contenido, así nunca resta legibilidad. */
body::before {
  content: ''; position: fixed; inset: -300px 0 0 -300px; z-index: -1; pointer-events: none;
  background: var(--kt-doodle); opacity: var(--kt-doodle-o);
  -webkit-mask: url(img/kt-pattern.svg) 0 0 / 300px 300px repeat; mask: url(img/kt-pattern.svg) 0 0 / 300px 300px repeat;
  animation: kt-drift 140s linear infinite; will-change: transform;
}
@keyframes kt-drift { to { transform: translate3d(300px, 300px, 0); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---------- 3) cabecera superior (cuenta e interfaz, todo arriba) ---------- */
header:not(#kt-top) { display: none !important; }          /* la cabecera antigua queda oculta; sus piezas se reubican */
#kt-top {
  position: relative; z-index: 60; flex: 0 0 auto; height: 3.5rem; box-sizing: border-box;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: 0 .75rem;
  background: var(--kt-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--kt-line);
}
.kt-top-l, .kt-top-r { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.kt-top-r { justify-content: flex-end; }
.kt-top-c { display: flex; justify-content: center; min-width: 0; }
#kt-top #logo-home { margin: 0; }
#kt-top #search {
  display: block !important; position: static !important; width: 100% !important; max-width: 32rem; box-shadow: none !important;
  height: 2.4rem; padding: 0 1rem !important; border-radius: 9999px !important; border: 1px solid var(--kt-line) !important;
  background: var(--kt-card) !important; color: var(--kt-ink) !important; font-size: .8rem;
}
#kt-top #search:focus { outline: 2px solid var(--kt-acc); outline-offset: 1px; }

.kt-btn, .kt-ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--kt-line); background: var(--kt-card);
  color: var(--kt-ink); font: 600 .78rem/1 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.kt-btn { height: 2.25rem; padding: 0 .9rem; border-radius: .8rem; }
.kt-ibtn { width: 2.3rem; height: 2.3rem; border-radius: 9999px; padding: 0; background: transparent; border-color: transparent; color: var(--kt-mute); flex: 0 0 auto; }
.kt-btn:hover, .kt-ibtn:hover { background: var(--kt-hover); }
.kt-btn:active, .kt-ibtn:active { transform: scale(.96); }
.kt-btn:focus-visible, .kt-ibtn:focus-visible, .kt-menu a:focus-visible, .kt-menu button:focus-visible, #kt-footer a:focus-visible, #kt-footer button:focus-visible {
  outline: 2px solid var(--kt-acc); outline-offset: 2px;
}
.kt-btn--pri { background: var(--kt-grad); color: #fff; border: 0; box-shadow: 0 8px 20px -8px rgba(147, 51, 234, .7); }
.kt-btn--pri:hover { background: var(--kt-grad); filter: brightness(1.06); }
.kt-btn--admin { color: #2563eb; border-color: rgba(37, 99, 235, .35); background: rgba(37, 99, 235, .08); }
html.dark .kt-btn--admin { color: #93c5fd; }
.kt-wallet { color: var(--kt-ok); border-color: color-mix(in srgb, var(--kt-ok) 40%, transparent); background: color-mix(in srgb, var(--kt-ok) 10%, transparent); }
.kt-hide-sm { display: none !important; } .kt-hide-md { display: none !important; }
@media (min-width: 640px) { .kt-hide-sm { display: inline-flex !important; } .kt-lbl-sm { display: inline !important; } }
@media (min-width: 960px) { .kt-hide-md { display: inline-flex !important; } }
.kt-lbl-sm { display: none; }
/* «Modo libro» (#kt-bkb) se muestra/oculta desde kt-layout.js; aquí solo se reubica en la cabecera */
#kt-top [hidden], #kt-footer [hidden] { display: none !important; }

/* tema: el icono cambia según el modo actual */
#kt-theme .kt-i-sun { display: none; } html.dark #kt-theme .kt-i-sun { display: block; } html.dark #kt-theme .kt-i-moon { display: none; }

/* búsqueda en móvil: el campo ocupa toda la cabecera */
#kt-sb2 { display: inline-flex; } @media (min-width: 768px) { #kt-sb2 { display: none; } }
@media (max-width: 767px) {
  .kt-top-c { display: none; }
  #kt-top.kt-search-open .kt-top-c { display: flex; position: absolute; inset: 0; z-index: 3; align-items: center; gap: .5rem; padding: 0 .75rem; background: var(--kt-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  #kt-top.kt-search-open #search { max-width: none; }
}

/* ---------- 4) menú de cuenta ---------- */
.kt-acc-wrap { position: relative; }
.kt-acc { height: 2.4rem; padding: 0 .55rem 0 .3rem; border-radius: 9999px; }
.kt-av { width: 1.8rem; height: 1.8rem; border-radius: 9999px; display: grid; place-items: center; background: var(--kt-grad); color: #fff; font: 700 .8rem Inter, system-ui; text-transform: uppercase; flex: 0 0 auto; }
.kt-acc-name { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; display: none; }
@media (min-width: 900px) { .kt-acc-name { display: inline; } }
.kt-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); width: min(19rem, calc(100vw - 1.5rem)); z-index: 90; padding: .4rem; border-radius: 1rem;
  background: var(--kt-card); border: 1px solid var(--kt-line); box-shadow: var(--kt-shadow); color: var(--kt-ink);
  max-height: calc(100vh - 5rem); overflow: auto; font: 500 .82rem Inter, system-ui, sans-serif;
}
.kt-menu[hidden] { display: none; }
.kt-menu-h { display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem .7rem; border-bottom: 1px solid var(--kt-line); margin-bottom: .3rem; }
.kt-menu-h .kt-av { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.kt-menu-h b { display: block; font-size: .9rem; } .kt-menu-h small { color: var(--kt-mute); }
.kt-menu a, .kt-menu button.kt-mi {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: .6rem; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; text-decoration: none;
}
.kt-menu a:hover, .kt-menu button.kt-mi:hover { background: var(--kt-hover); }
.kt-menu .kt-i { color: var(--kt-mute); flex: 0 0 auto; }
.kt-menu hr { border: 0; border-top: 1px solid var(--kt-line); margin: .35rem 0; }
.kt-menu-t { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem .45rem; color: var(--kt-mute); font-size: .72rem; }
.kt-seg { display: flex; margin-left: auto; padding: 2px; border-radius: .6rem; background: var(--kt-hover); }
.kt-seg button { border: 0; background: none; color: var(--kt-mute); padding: .3rem .5rem; border-radius: .45rem; cursor: pointer; display: grid; place-items: center; }
.kt-seg button[aria-pressed="true"] { background: var(--kt-card); color: var(--kt-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.kt-menu .kt-danger, .kt-menu .kt-danger .kt-i { color: #e11d48; }

/* ---------- 5) pie de página ---------- */
#kt-footer {
  position: relative; z-index: 55; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.5rem; box-sizing: border-box;
  padding: .35rem .9rem; background: var(--kt-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--kt-line);
  font: 500 .72rem Inter, system-ui, sans-serif; color: var(--kt-mute);
}
.kt-credit { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.kt-credit b { background: var(--kt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kt-credit .kt-i { color: #ec4899; fill: #ec4899; }
#kt-footer nav { display: none; flex-wrap: wrap; justify-content: flex-end; gap: .15rem .9rem; }
#kt-footer nav a { color: inherit; text-decoration: none; padding: .15rem 0; }
#kt-footer nav a:hover { color: var(--kt-ink); text-decoration: underline; }
#kt-more { display: inline-flex; }
@media (min-width: 1360px) { #kt-footer nav { display: flex; } #kt-more { display: none; } }
.kt-more-pop {
  position: absolute; right: .6rem; bottom: calc(100% + .5rem); width: min(24rem, calc(100vw - 1.2rem)); padding: .5rem; border-radius: 1rem; background: var(--kt-card); border: 1px solid var(--kt-line);
  box-shadow: var(--kt-shadow); display: grid; grid-template-columns: 1fr 1fr; gap: .15rem;
}
.kt-more-pop[hidden] { display: none; }
.kt-more-pop a { display: block; padding: .6rem .7rem; border-radius: .6rem; color: var(--kt-ink); text-decoration: none; font-size: .78rem; }
.kt-more-pop a:hover { background: var(--kt-hover); }

/* ---------- 6) hub de herramientas (menú general) ---------- */
.kt-modal { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: .75rem; background: rgba(8, 10, 28, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kt-modal.on { display: flex; }
.kt-sheet { width: min(60rem, 100%); max-height: min(92vh, 52rem); display: flex; flex-direction: column; border-radius: 1.4rem; background: var(--kt-card); color: var(--kt-ink); border: 1px solid var(--kt-line); box-shadow: var(--kt-shadow); font: 500 .85rem Inter, system-ui, sans-serif; overflow: hidden; }
.kt-sheet-h { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--kt-line); }
.kt-sheet-h h2 { margin: 0; font-size: 1.05rem; } .kt-sheet-h p { margin: 0; color: var(--kt-mute); font-size: .75rem; }
.kt-sheet-h .kt-ibtn { margin-left: auto; }
.kt-sheet-b { padding: 1rem 1.2rem 1.3rem; overflow: auto; }
.kt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; margin-bottom: 1.1rem; }
.kt-kpi { padding: .7rem .8rem; border-radius: .9rem; background: var(--kt-hover); }
.kt-kpi small { color: var(--kt-mute); display: block; font-size: .7rem; } .kt-kpi b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.kt-grp { margin: 1.1rem 0 .5rem; font: 700 .78rem Inter, system-ui; color: var(--kt-mute); }
.kt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .6rem; }
.kt-tool { display: flex; gap: .7rem; align-items: flex-start; text-align: left; padding: .75rem; border-radius: .9rem; border: 1px solid var(--kt-line); background: var(--kt-card); color: inherit; font: inherit; cursor: pointer; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.kt-tool:hover { border-color: var(--kt-acc); transform: translateY(-1px); box-shadow: 0 8px 22px -14px var(--kt-acc); }
.kt-tool:focus-visible { outline: 2px solid var(--kt-acc); outline-offset: 2px; }
.kt-tool .kt-tic { width: 2.1rem; height: 2.1rem; border-radius: .65rem; display: grid; place-items: center; flex: 0 0 auto; background: var(--kt-hover); color: var(--kt-acc); }
.kt-tool b { display: block; font-size: .82rem; } .kt-tool span.kt-d { color: var(--kt-mute); font-size: .72rem; line-height: 1.35; display: block; margin-top: .1rem; }
.kt-tool--soon { border-style: dashed; cursor: default; opacity: .75; } .kt-tool--soon:hover { transform: none; box-shadow: none; border-color: var(--kt-line); }
.kt-search-t { width: 100%; box-sizing: border-box; height: 2.4rem; padding: 0 .9rem; border-radius: .8rem; border: 1px solid var(--kt-line); background: var(--kt-card); color: inherit; font: inherit; margin-bottom: .4rem; }

/* ---------- 7) utilidades ---------- */
.kt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#kt-nav-tools { margin-top: .15rem; }