/* ══════════════════════════════════════════════════════════════════════
   KACHAI · Mapa de herramientas en clave editorial

   Va después de kachai-editorial.css en nodo.html. El escenario deja la
   noche azul y la nebulosa: es papel con grano, y el lienzo (graf-render y
   graf-nodos) pinta la esfera orbital de la portada editorial con los
   colores del tema activo.
   ══════════════════════════════════════════════════════════════════════ */

.graf-body {
  background-color: var(--w-papel) !important;
  background-image: var(--ed-grano) !important;
  color: var(--w-tinta) !important;
}
.graf-stage { background: transparent !important; }
.graf-fondo { display: none !important; }

/* ── Cabecera ──────────────────────────────────────────────────────── */
.graf-header {
  background: color-mix(in srgb, var(--w-papel) 88%, transparent) !important;
  border-bottom: 1px solid var(--w-linea) !important;
}
.graf-logo { color: var(--w-tinta) !important; }
.graf-logo__mark {
  width: 30px !important; height: 22px !important; aspect-ratio: auto !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  background: var(--w-tinta) !important;
  -webkit-mask: url('/assets/img/kachai-mark-reference-transparent.png') center / contain no-repeat;
  mask: url('/assets/img/kachai-mark-reference-transparent.png') center / contain no-repeat;
}
.graf-logo__text { color: var(--w-tinta) !important; font-weight: 600 !important; letter-spacing: .24em !important; }
.graf-privado {
  border: 1px solid color-mix(in srgb, var(--ed-salvia) 40%, transparent) !important;
  background: color-mix(in srgb, var(--ed-salvia) 8%, transparent) !important;
  color: var(--ed-salvia) !important;
  font-family: var(--fuente) !important;
  border-radius: 2px !important;
}
.graf-back {
  border: 1px solid var(--w-linea-2) !important;
  border-radius: 3px !important;
  color: var(--w-tinta-2) !important;
  background: var(--w-panel);
  font-family: var(--fuente) !important;
}
.graf-back:hover { border-color: var(--ed-cobre) !important; color: var(--w-tinta) !important; }

/* ── Título y pie ──────────────────────────────────────────────────── */
.graf-titulo__marca {
  background: none !important;
  color: var(--w-tinta-3) !important;
  font: 400 10px var(--ed-serif) !important;
  letter-spacing: .32em !important;
}
.graf-titulo__marca em { color: var(--ed-cobre); }
.graf-titulo__texto {
  font: 400 clamp(30px, 3.6vw, 48px)/1.05 var(--ed-serif) !important;
  letter-spacing: -.04em !important;
  color: var(--w-tinta) !important;
  text-shadow: none !important;
}
.graf-titulo__pista {
  font: italic 15px var(--ed-serif) !important;
  letter-spacing: 0 !important;
  color: var(--w-tinta-3) !important;
}
.graf-pie { font: 11px var(--fuente) !important; letter-spacing: .04em !important; color: var(--w-tinta-3) !important; }
.graf-pie__punto { background: var(--ed-salvia) !important; box-shadow: none !important; }

.graf-nodo:focus-visible { outline: 2px solid var(--ed-cobre) !important; border-radius: 6px !important; }
.graf-nodo__resumen { display: none; }

/* ── Modo lista (pantallas angostas) ───────────────────────────────── */
/* graf.js marca el cuerpo con .graf-modo-lista bajo 720 px: el lienzo
   queda como cabecera con la esfera y las herramientas pasan a una lista
   de filetes, legible y pulsable con el pulgar. */
.graf-modo-lista.graf-body { height: auto; min-height: 100dvh; overflow: auto; }
.graf-modo-lista .graf-stage { display: flex; flex-direction: column; overflow: visible; padding-bottom: 28px; }
.graf-modo-lista .graf-canvas { position: relative; inset: auto; height: 190px; order: 0; }
.graf-modo-lista .graf-titulo { position: relative; top: auto; order: 1; padding: 0 20px; }
.graf-modo-lista .graf-nodos {
  position: relative; inset: auto; order: 2;
  display: grid; margin: 26px 20px 0;
  border-top: 1px solid var(--w-linea-2);
  pointer-events: auto;
}
.graf-modo-lista .graf-nodo {
  position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px;
  padding: 15px 2px; border-radius: 0;
  border-bottom: 1px solid var(--w-linea-2);
  font-size: inherit; line-height: normal; color: var(--w-tinta);
  text-indent: 0; overflow: visible; text-decoration: none;
}
.graf-modo-lista .graf-nodo::after {
  content: '\2197'; grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font: 18px var(--ed-serif); color: var(--ed-cobre);
}
.graf-modo-lista .graf-nodo__nombre { font: 400 18px/1.25 var(--ed-serif); letter-spacing: -.01em; }
.graf-modo-lista .graf-nodo__resumen { display: block; margin-top: 4px; font: 12.5px/1.5 var(--fuente); color: var(--w-tinta-3); }
.graf-modo-lista .graf-nodo:active { background: var(--w-hover); }
.graf-modo-lista .graf-pie { position: relative; bottom: auto; order: 3; margin-top: 22px; }