/* Granfluencers · Gráficas y mapa */
.gf-viz {
    --gf-superficie: #fcfcfb;
    --gf-panel: #ffffff;
    --gf-tinta: #0b0b0b;
    --gf-tinta2: #52514e;
    --gf-rejilla: #e1e0d9;
    --gf-borde: rgba(11, 11, 11, 0.10);
    --gf-boton-borde: #c3c2b7;
    --gf-boton-hover: #f0efec;
    --gf-enlace: #1c5cab;
    --gf-foco: #2a78d6;
    margin: 1.5em 0 2.5em;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gf-tinta);
    max-width: 100%;
}
/* Versión oscura: se activa sola cuando la sección tiene fondo oscuro. */
.gf-viz.gf-oscuro {
    --gf-superficie: #1a1a19;
    --gf-panel: #222221;
    --gf-tinta: #ffffff;
    --gf-tinta2: #c3c2b7;
    --gf-rejilla: #2c2c2a;
    --gf-borde: rgba(255, 255, 255, 0.10);
    --gf-boton-borde: #52514e;
    --gf-boton-hover: #2c2c2a;
    --gf-enlace: #86b6ef;
    --gf-foco: #86b6ef;
}

.gf-viz .gf-figura {
    position: relative;
    margin: 0;
    padding: 20px;
    background: var(--gf-superficie);
    border: 1px solid var(--gf-borde);
    border-radius: 8px;
}
.gf-viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.gf-viz svg [tabindex] { outline: none; }
.gf-viz svg [tabindex]:focus-visible { outline: 2px solid var(--gf-foco); }
.gf-viz .gf-svg-mapa { touch-action: none; }

.gf-viz .gf-tip {
    display: none;
    position: absolute;
    z-index: 5;
    pointer-events: none;
    max-width: 260px;
    padding: 8px 10px;
    color: var(--gf-tinta);
    background: var(--gf-panel);
    border: 1px solid var(--gf-borde);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(11, 11, 11, 0.18);
    font-size: 13px;
    line-height: 1.4;
}
.gf-viz .gf-tip strong, .gf-viz .gf-tip span { display: block; }
.gf-viz .gf-tip span { color: var(--gf-tinta2); font-variant-numeric: tabular-nums; }

.gf-viz .gf-herr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gf-viz .gf-btn {
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: var(--gf-tinta);
    background: var(--gf-panel);
    border: 1px solid var(--gf-boton-borde);
    border-radius: 999px;
    cursor: pointer;
}
.gf-viz .gf-btn:hover { background: var(--gf-boton-hover); }

.gf-viz .gf-tabla { margin-top: 10px; font-size: 14px; color: var(--gf-tinta); }
.gf-viz .gf-tabla summary { cursor: pointer; color: var(--gf-tinta2); }
.gf-viz .gf-tabla table { border-collapse: collapse; margin-top: 8px; min-width: 50%; color: var(--gf-tinta); background: transparent; }
.gf-viz .gf-tabla th, .gf-viz .gf-tabla td { padding: 4px 12px 4px 0; color: var(--gf-tinta); border: 0; border-bottom: 1px solid var(--gf-rejilla); text-align: left; font-variant-numeric: tabular-nums; }
.gf-viz .gf-enlace { padding: 0; font: inherit; color: var(--gf-enlace); background: none; border: 0; text-decoration: underline; cursor: pointer; }

.gf-viz .gf-panel:empty { display: none; }
.gf-viz .gf-panel { margin-top: 12px; padding: 14px 16px; color: var(--gf-tinta); background: var(--gf-panel); border: 1px solid var(--gf-borde); border-radius: 8px; }
.gf-viz .gf-panel h4 { margin: 0 0 8px; font-size: 16px; color: var(--gf-tinta); }
.gf-viz .gf-panel ul { margin: 0; padding: 0; list-style: none; }
.gf-viz .gf-panel li { padding: 6px 0; border-bottom: 1px solid var(--gf-rejilla); font-size: 14px; }
.gf-viz .gf-panel li:last-child { border-bottom: 0; }
.gf-viz .gf-meta { color: var(--gf-tinta2); }
.gf-viz .gf-redes { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 2px; font-size: 13px; }
.gf-viz .gf-redes a { color: var(--gf-enlace); }

@media (max-width: 600px) {
    .gf-viz .gf-figura { padding: 12px; }
}