/* Slide «graph»: grafo de contenidos relacionados, con ícono y color por tipo. */
@media (min-width: 861px) {
  .slide--graph .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
}

.graph {
  width: 100%;
  height: auto;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* Relaciones */
.graph .rel { stroke-width: 2.5; transition: opacity 0.25s; }
.graph .rel--cite   { stroke: var(--accent); stroke-width: 3; }
.graph .rel--common { stroke: var(--teal); stroke-dasharray: 7 5; animation: dash-flow 2.4s linear infinite; }
.graph .rel--sender { stroke: var(--amber); stroke-dasharray: 2 6; stroke-linecap: round; animation: dash-flow 3.2s linear infinite; }

/* Puntos que viajan por las relaciones fuertes */
.graph .flow-dot--rel-cite   { fill: var(--accent); }
.graph .flow-dot--rel-common { fill: var(--teal); }

/* La leyenda atenúa un tipo de relación con estas clases en el <svg> */
.graph.hide-cite .rel--cite,
.graph.hide-common .rel--common,
.graph.hide-sender .rel--sender { opacity: 0.06; }
.graph.hide-cite .flow-dot--rel-cite,
.graph.hide-common .flow-dot--rel-common { display: none; }

/* Nodos: círculo de color + ícono blanco + etiqueta */
.graph .gnode { cursor: pointer; outline: none; transition: opacity 0.25s; }
.graph .gnode-bg {
  fill: var(--c);
  stroke: var(--bg2);
  stroke-width: 3;
  filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.28));
  transition: transform 0.2s;
}
.graph .gnode:hover .gnode-bg,
.graph .gnode:focus-visible .gnode-bg { transform: scale(1.12); }
.graph .gnode-icon { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.graph .gnode-label {
  fill: var(--ink);
  font: 600 13px "Plus Jakarta Sans", sans-serif;
  text-anchor: middle;
  pointer-events: none;
}

.graph .gnode--audio    { --c: #e0568a; }
.graph .gnode--image    { --c: #f59e0b; }
.graph .gnode--whatsapp { --c: #22a559; }
.graph .gnode--social   { --c: #6366f1; }
.graph .gnode--db       { --c: #0ea5b7; }
.graph .gnode--pdf      { --c: #e5484d; }

/* Nodo principal: anillo que late y estrella */
.graph .gnode-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.5; animation: ring-pulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring-pulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.25); opacity: 0; }
}
.graph .gnode-badge { fill: var(--amber); stroke: var(--bg2); stroke-width: 2; }
.graph .gnode-star { fill: #fff; }

/* Resaltado al pasar el cursor: lo que no está conectado se atenúa (clases puestas por js/demos/graph.js) */
.graph .is-dim { opacity: 0.12; }

/* Leyenda de relaciones */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: 700 0.8rem "Plus Jakarta Sans", sans-serif;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
}
.legend-item[aria-pressed="false"] { opacity: 0.45; }
.legend-item i { width: 22px; height: 0; border-top: 3px solid; }
.legend-item--cite i   { border-color: var(--accent); }
.legend-item--common i { border-color: var(--teal); border-top-style: dashed; }
.legend-item--sender i { border-color: var(--amber); border-top-style: dotted; }

/* Comentario de negocio sobre una relación (js/demos/graph.js): de vez en cuando, al azar, se resalta una relación con sus dos contenidos y aparece su comentario sobre la línea;
   también al pasar el cursor por una línea. El contenedor es de referencia para colocarlo. */
.graph-wrap { position: relative; }
.rel-hit { stroke: transparent; stroke-width: 16; stroke-linecap: round; pointer-events: stroke; fill: none; }
.graph.hide-cite .rel-hit--cite, .graph.hide-common .rel-hit--common, .graph.hide-sender .rel-hit--sender { pointer-events: none; }
.graph.has-spot .rel:not(.is-spot) { opacity: 0.22; }
.graph.has-spot .gnode:not(.is-spot) { opacity: 0.5; }
.graph .rel.is-spot { stroke-width: 5; opacity: 1; }
.rel-tip {
  position: absolute;
  z-index: 4;
  max-width: 230px;
  box-sizing: border-box;
  padding: 7px 11px 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--rc);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.38);
  pointer-events: none;
  animation: rel-tip-in 0.22s ease-out;
}
.rel-tip[hidden] { display: none; }
.rel-tip b { display: block; margin-bottom: 2px; color: var(--rc); font: 800 0.62rem/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: 0.07em; text-transform: uppercase; }
.rel-tip span { display: block; font-size: 0.8rem; font-weight: 600; line-height: 1.35; }
.rel-tip[data-rel="cite"] { --rc: var(--accent); }
.rel-tip[data-rel="common"] { --rc: var(--teal); }
.rel-tip[data-rel="sender"] { --rc: var(--amber); }
@keyframes rel-tip-in { from { opacity: 0; transform: translateY(4px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .rel-tip { animation: none; } }