/* Gráficos do deck reaproveitados na página do estudo IA aplicada à visualização
   de dados. O deck roda em iframe com deck.css próprio, então as classes de
   gráfico (.d-chart e as classes de texto do SVG) não existem no main.css. Aqui
   ficam só as regras que o SVG do caso da B3 usa, com os mesmos tokens de tema. */

.ia-viz-figura {
    margin: 2.5rem 0 3rem;
}

.ia-viz-figura figcaption {
    margin-top: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-tertiary);
}

.d-chart {
    width: 100%;
}

.d-chart svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--text-primary);
    overflow: visible;
}

.d-chart text {
    font-family: "Inter Tight", "Inter Tight Regular", sans-serif;
    fill: currentColor;
}

.d-chart .t-lab {
    font-size: 13px;
    fill: var(--text-primary);
}

.d-chart .t-val {
    font-family: var(--font-serif);
    font-size: 19px;
    fill: var(--text-primary);
}

.d-chart .t-sm {
    font-size: 11px;
    fill: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.d-chart .t-ax {
    font-size: 10.5px;
    fill: var(--text-tertiary);
}

/* Halo do fundo para rótulo que cai sobre hachura ou curva. */
.d-chart .t-halo {
    paint-order: stroke fill;
    stroke: var(--bg-primary);
    stroke-width: 5px;
    stroke-linejoin: round;
}

/* Aéreas na B3: a cor codifica companhia, e é a cor da própria marca. O azul muda
   entre os temas porque o marinho desaparece no fundo preto e o ciano no branco. */
.d-chart--aereas {
    --aerea-gol: #ff7020;
    --aerea-azul: #16b9e7;
    --aerea-azul-palavra: #ffffff;
}

[data-theme="light"] .d-chart--aereas {
    --aerea-azul: #041e42;
    --aerea-azul-palavra: #041e42;
}

.d-chart--aereas .s-gol {
    stroke: var(--aerea-gol);
}

.d-chart--aereas .s-azul {
    stroke: var(--aerea-azul);
}

.d-chart--aereas .f-gol,
.d-chart--aereas .logo-gol__marca {
    fill: var(--aerea-gol);
}

.d-chart--aereas .f-azul {
    fill: var(--aerea-azul);
}

.d-chart--aereas .logo-azul__palavra {
    fill: var(--aerea-azul-palavra);
}

/* Em tela estreita o gráfico de dez anos fica ilegível encolhido: rola na horizontal
   dentro da própria caixa, sem empurrar a página. */
@media (max-width: 700px) {
    .ia-viz-figura--rolagem {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ia-viz-figura--rolagem .d-chart {
        min-width: 760px;
    }
}