/* Gráfico de red «fluido» — ver assets/js/grafo-fluido.js. Usa las variables del sitio (fondo oscuro). */
.gf { position: relative; margin: 8px 0 4px; }
.gf-lienzo {
    position: relative;
    width: 100%;
    height: 460px;
    border-radius: var(--radio, 12px);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 70%), var(--fondo-tarjeta, #1c1c1c);
    border: 1px solid var(--borde, #2e2e2e);
    overflow: hidden;
}
.gf-lienzo canvas { display: block; width: 100%; height: 100%; }
.gf-tip {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 260px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0d0d0d;
    border: 1px solid var(--borde, #2e2e2e);
    color: var(--texto, #f2f2f2);
    font-size: 0.82rem;
    line-height: 1.3;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.gf-tip[hidden] { display: none; }
.gf-tip strong, .gf-tip span, .gf-tip em { display: block; }
.gf-tip span { color: var(--texto-tenue, #a8a8a8); margin-top: 2px; white-space: pre-line; }
.gf-tip em { color: var(--texto-tenue, #a8a8a8); font-style: normal; font-size: 0.74rem; margin-top: 4px; }
.gf-ficha {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0d0d0d;
    border: 1px solid #d9b45a;
    color: var(--texto, #f2f2f2);
    font-size: 0.85rem;
    line-height: 1.3;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    z-index: 3;
}
.gf-ficha[hidden] { display: none; }
.gf-ficha strong, .gf-ficha span { display: block; }
.gf-ficha span { color: var(--texto-tenue, #a8a8a8); margin-top: 2px; white-space: pre-line; }
.gf-ficha-abrir {
    margin-top: 9px;
    min-height: 38px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #d9b45a;
    background: #d9b45a;
    color: #151515;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.gf-ficha-abrir:hover { filter: brightness(1.08); }
.gf-volver {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    min-height: 36px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--borde, #2e2e2e);
    background: rgba(13, 13, 13, 0.85);
    color: var(--texto, #f2f2f2);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.gf-volver[hidden] { display: none; }
.gf-tema-abrir { top: 54px; }
/* Botón «Ver perfil»: verde, pequeño y discreto. */
.gf-tema-abrir.gf-tema-solo { top: 10px; }
.gf-tema-abrir.gf-tema-abrir--verde {
    min-height: 32px; padding: 4px 14px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
    color: #86efac; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.5);
    transition: background 0.2s, border-color 0.2s;
}
.gf-tema-abrir.gf-tema-abrir--verde:hover { background: rgba(34, 197, 94, 0.22); border-color: rgba(34, 197, 94, 0.85); }
.gf-tema-abrir.gf-tema-abrir--verde:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.gf-volver:hover { border-color: #888; }
.gf-ayuda { margin: 8px 2px 0; font-size: 0.78rem; color: var(--texto-tenue, #a8a8a8); }
.gf-leyenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.gf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--borde, #2e2e2e);
    background: transparent;
    color: var(--texto, #f2f2f2);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.gf-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.gf-chip b { color: var(--texto-tenue, #a8a8a8); font-weight: 600; }
.gf-chip:hover, .gf-chip-activo { background: var(--fondo-tarjeta-hover, #262626); border-color: #555; }
.gf-tabla { margin: 8px 0 0; font-size: 0.82rem; }
.gf-tabla > summary { cursor: pointer; color: var(--texto-tenue, #a8a8a8); }
.gf-tabla table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.gf-tabla th, .gf-tabla td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--borde, #2e2e2e); }
.gf-tabla th { color: var(--texto-tenue, #a8a8a8); font-weight: 600; }
.gf-tabla a { color: inherit; text-decoration: underline; }
.gf-interruptor { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 0.85rem; color: var(--texto-tenue, #a8a8a8); }

/* Estilo «galería»: el lienzo es un vidrio oscuro sobre el fondo de la página, no una placa gris. */
.gf-galeria .gf-lienzo {
    background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 65%), rgba(10, 8, 22, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-color: rgba(217, 180, 90, 0.35);
}
.gf-galeria .gf-chip { border-color: rgba(217, 180, 90, 0.3); }

/* Los gráficos de Métricas ocupan todo el ancho aunque estén dentro de una rejilla de tarjetas. */
.grafo-ancho { grid-column: 1 / -1; min-width: 0; }