/* Vista /diagram — skill tree de los módulos de MEDUSA. */

html, body.diagram-view {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #050810;
    color: rgba(255, 255, 255, 0.92);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    overflow: hidden;
}

body.diagram-view {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

/* ──────── Header ──────── */
.diagram-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg,
        rgba(var(--accent-rgb, 0, 200, 255), 0.10) 0%,
        rgba(0, 0, 0, 0) 100%);
    flex-shrink: 0;
    z-index: 5;
}

.diagram-title { display: flex; flex-direction: column; gap: 2px; }
.diagram-title h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 6px;
    font-weight: 700;
    color: #FFD166;
    text-shadow: 0 0 12px rgba(255, 209, 102, 0.5);
}
.diagram-subtitle { font-size: 12px; opacity: 0.55; letter-spacing: 1.5px; }

.diagram-actions { display: flex; align-items: center; gap: 10px; }

/* ──────── Stage ──────── */
.diagram-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#diagram-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ──────── Nodos ──────── */

.skill-node {
    cursor: pointer;
}
/* SIN transform al hover — el feedback visual viene del glow + el tooltip.
   Cero vibración: los nodos no se mueven. */

.skill-node-ring {
    fill: rgba(10, 16, 36, 0.92);
    stroke-width: 3;
    transition: filter 0.18s ease;
}

/* Estado enabled: anillo coloreado, glow */
.skill-node.state-enabled .skill-node-ring {
    filter: url(#node-glow);
}
.skill-node.state-enabled:hover .skill-node-ring {
    filter: url(#node-glow-strong);
}

/* Pulso lento — solo en enabled */
.skill-node.state-enabled .skill-node-pulse {
    animation: nodePulse 2.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes nodePulse {
    0%, 100% { opacity: 0.0; transform: scale(1.0); }
    50%      { opacity: 0.35; transform: scale(1.18); }
}

/* Estado disabled: gris desaturado */
.skill-node.state-disabled {
    opacity: 0.45;
    filter: saturate(0.15);
}
.skill-node.state-disabled:hover { opacity: 0.7; }

/* Estado error: parpadeo rojo */
.skill-node.state-error .skill-node-ring {
    stroke: #ff6b6b !important;
    animation: errorBlink 0.9s ease-in-out infinite;
}
@keyframes errorBlink {
    0%, 100% { stroke-opacity: 0.45; }
    50%      { stroke-opacity: 1.0; }
}

/* Estado pending_dep: amarillo dashed */
.skill-node.state-pending_dep .skill-node-ring {
    stroke: #FFD166 !important;
    stroke-dasharray: 4 3;
}

/* Iconos / emoji dentro del círculo */
.skill-node-icon {
    font-size: 30px;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
}
.skill-node-icon.small { font-size: 22px; }
.skill-node-icon.large { font-size: 38px; }

/* Labels */
.skill-label {
    fill: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    text-anchor: middle;
    pointer-events: none;
    letter-spacing: 0.4px;
}
.skill-label.category {
    fill: rgba(255, 209, 102, 0.92);
    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 700;
    text-transform: uppercase;
}
.skill-label.root {
    fill: #FFD166;
    font-size: 16px;
    letter-spacing: 5px;
    font-weight: 800;
}
.skill-label-shadow { fill: rgba(0, 0, 0, 0.7); }

/* ──────── Conexiones ──────── */

.skill-edge {
    fill: none;
    stroke: rgba(120, 160, 200, 0.22);
    stroke-width: 2.5;
    transition: stroke 0.25s, stroke-opacity 0.25s, stroke-width 0.2s;
}
.skill-edge.active {
    stroke: rgba(120, 220, 255, 0.55);
    stroke-width: 3;
    filter: drop-shadow(0 0 4px rgba(120, 220, 255, 0.5));
}
.skill-edge.dimmed {
    stroke: rgba(120, 160, 200, 0.10);
    stroke-width: 2;
}
.skill-edge.cross {
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1.8;
    stroke-dasharray: 5 4;
}
.skill-edge.cross.active {
    stroke: rgba(255, 220, 140, 0.55);
    filter: drop-shadow(0 0 3px rgba(255, 220, 140, 0.5));
}

/* Energía fluyendo en edges activos */
.skill-edge.active.flowing {
    stroke-dasharray: 6 8;
    animation: edgeFlow 1.4s linear infinite;
}
@keyframes edgeFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -28; }
}

/* ──────── Tooltip ──────── */

.diagram-tooltip {
    position: absolute;
    pointer-events: none;
    min-width: 220px;
    max-width: 320px;
    padding: 12px 14px;
    background: rgba(8, 14, 26, 0.97);
    border: 1px solid rgba(var(--accent-rgb, 0, 200, 255), 0.45);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--accent-rgb, 0, 200, 255), 0.2);
    backdrop-filter: blur(6px);
    transform: translate(-50%, -110%);
    z-index: 50;
    font-size: 12.5px;
    line-height: 1.45;
}
.diagram-tooltip h4 {
    margin: 0 0 6px 0;
    font-size: 14px;
    color: #FFD166;
    letter-spacing: 1px;
}
.diagram-tooltip p {
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
}
.tt-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.tt-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
}
.tt-status.enabled  { background: rgba( 80, 220, 120, 0.20); color: #6effa6; border: 1px solid rgba(80, 220, 120, 0.45); }
.tt-status.disabled { background: rgba(180, 180, 200, 0.18); color: #c9c9d0; border: 1px solid rgba(180, 180, 200, 0.35); }
.tt-status.error    { background: rgba(255, 100, 100, 0.20); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.45); }
.tt-status.pending_dep { background: rgba(255, 209, 102, 0.18); color: #ffd166; border: 1px solid rgba(255, 209, 102, 0.45); }
.tt-tools { color: rgba(180, 220, 255, 0.85); font-size: 11px; letter-spacing: 0.5px; }
.tt-deps { margin-top: 4px; font-size: 11px; color: rgba(255, 220, 140, 0.82); }
.tt-deps strong { font-weight: 600; opacity: 0.7; }
.tt-hint {
    margin-top: 8px;
    font-size: 10.5px;
    opacity: 0.5;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 6px;
}

@media (max-width: 700px) {
    .diagram-tooltip { min-width: 180px; font-size: 11.5px; }
    .diagram-title h1 { font-size: 18px; letter-spacing: 4px; }
    .diagram-subtitle { font-size: 10px; }
}