feat: add interactive graph UI with prerequisite highlighting

Stimulus controller renders subject dependency graphs using Cytoscape.js
with semester-grouped columns (desktop) or 2-column grid (mobile).

Interactions:
- Click a subject to highlight its prerequisite chain (amber) and
  dependents (violet), dimming unrelated nodes
- Click again to navigate to the subject detail page
- Hover (desktop) shows subtle border and connected edges
- Click background to deselect
- Tooltip with "Ver detalles" link appears on selection
- Debounced resize handler rebuilds layout on breakpoint change

Visual:
- Three-state nodes: unavailable (gray), available (blue), completed (green)
- Animated transitions on node/edge state changes
- Semester headers that reposition on pan/zoom
- Legend with state colors and highlight indicators

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: RenzoMinelli

app/assets/tailwind/application.css

@@ -7,3 +7,48 @@
 }
 
 @custom-variant with-error (.field_with_errors &);
+
+/* Subject graph tooltip and headers */
+.graph-semester-header {
+  position: absolute;
+  pointer-events: none;
+  font-weight: 600;
+  white-space: nowrap;
+  z-index: 10;
+}
+
+.graph-tooltip {
+  position: fixed;
+  transform: translateX(-50%);
+  z-index: 50;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  max-width: 220px;
+  white-space: nowrap;
+}
+
+.graph-tooltip-text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #374151;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.graph-tooltip-link {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.graph-tooltip-link:hover {
+  text-decoration: underline;
+}