/* ═══════════════════════════════════════════════════════════════════
   kb.css · Módulo de conocimiento de Esferic Labs
   ───────────────────────────────────────────────────────────────────
   Sistema central para las páginas de Esferic: tema oscuro unificado +
   "glosa" de bajo impacto (acrónimos y términos que muestran un globo
   con su significado al pasar el ratón o al enfocarlos con el teclado).

   USO en una página:
     <link rel="stylesheet" href="/_kb/kb.css">
     <script src="/_kb/kb.js" defer></script>
     Marca un término:  <abbr data-kb="Significado llano">DCIM</abbr>
     Fondo oscuro base: añade class="kb-dark" al <body> (opcional).

   APAGAR TODO en una página:  <html data-kb-off>  (o KB_ENABLED=false
   en kb.js para apagarlo en todas las páginas de golpe).

   Paleta: derivada del tema del workspace (globals.css) — negro NOC,
   azul de marca #2962ff. Ajustada a un near-black cómodo para lectura
   larga (texto casi-blanco, no blanco puro, para no deslumbrar).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --kb-bg: #0a0d12;
  --kb-surface: #141821;
  --kb-surface-2: #1c222d;
  --kb-fg: #e7edf5;
  --kb-fg-muted: #a8b3c4;
  --kb-fg-dim: #7d8798;
  --kb-border: rgba(255, 255, 255, 0.10);
  --kb-border-soft: rgba(255, 255, 255, 0.05);
  /* Semánticos = MISMOS valores que el sistema del workspace
   * (src/styles/globals.css) — mantener ambos archivos en sync a mano:
   * este CSS es autocontenido porque lo cargan también informes HTML
   * estáticos que no pasan por el bundle de Astro. */
  --kb-accent: #2962ff; /* azul de marca (bordes, rellenos) */
  --kb-accent-ink: #6ea8ff; /* azul legible como texto sobre oscuro */
  --kb-accent-2: #22d3ee;
  --kb-success: #c5f54a;
  --kb-warning: #f59e0b;
  --kb-danger: #ef4444;
  /* z-index semántico: el globo vive por encima de todo */
  --kb-z-tooltip: 2147483000;
}

/* ── Capa oscura base opt-in (para páginas que no traen tema propio) ── */
body.kb-dark {
  background: var(--kb-bg);
  color: var(--kb-fg);
}

/* ── La glosa: marca de bajo impacto sobre el término ── */
[data-kb] {
  text-decoration: underline dotted from-font;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--kb-accent-ink) 60%, transparent);
  cursor: help;
  /* no rompe el flujo del texto */
  white-space: inherit;
}
[data-kb]:focus-visible {
  outline: 2px solid var(--kb-accent-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Apagado: los términos quedan como texto normal, sin globo (el JS no liga) */
html[data-kb-off] [data-kb] {
  text-decoration: none;
  cursor: inherit;
}

/* ── El globo flotante (uno solo, reutilizado; lo posiciona kb.js) ── */
.kb-tip {
  position: fixed;
  z-index: var(--kb-z-tooltip);
  max-width: 300px;
  background: var(--kb-surface-2);
  color: var(--kb-fg);
  border: 1px solid var(--kb-border);
  border-radius: 10px;
  padding: 10px 13px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s ease-out, transform 0.14s ease-out;
  pointer-events: none;
}
.kb-tip[data-show] {
  opacity: 1;
  transform: translateY(0);
}
.kb-tip .kb-tip-term {
  display: block;
  font-weight: 700;
  color: var(--kb-accent-ink);
  margin-bottom: 3px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .kb-tip {
    transition: opacity 0.01s;
    transform: none;
  }
  .kb-tip[data-show] {
    transform: none;
  }
}