/* Radar SJC (2D + 3D) — estudo e deck */

.sjc-radar {
    display: grid;
    grid-template-columns: 2.15fr 1fr;
    gap: 18px;
    align-items: stretch;
    width: 100%;
    color: var(--text-primary, #111);
}

.sjc-radar--deck {
    gap: 12px;
    min-height: 0;
    flex: 1;
}

/* O 3D é o protagonista: fica com a maior parte da largura. */
.sjc-radar__grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 10px;
    min-width: 0;
}

/* Nas etapas do deck o painel é um só e leva a tela toda. */
.sjc-radar--tabela .sjc-radar__grid,
.sjc-radar--grafico .sjc-radar__grid,
.sjc-radar--2d .sjc-radar__grid,
.sjc-radar--3d .sjc-radar__grid {
    grid-template-columns: 1fr;
}

.sjc-radar__pane {
    margin: 0;
    border: 1px solid var(--border-color, rgba(0,0,0,0.2));
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.sjc-radar__cap {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary, #777);
}

/* Sem fundo no palco: o quadro da planta é uma faixa deitada, e num painel mais
   alto que largo (o caso da página do estudo, onde o 3D leva a coluna maior) a
   sobra da proporção viraria duas tarjas cinza em volta do mapa. */
.sjc-radar__palco {
    flex: 1;
    min-height: 160px;
    overflow: hidden;
    background: none;
}

.sjc-radar__palco svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sjc-radar__canvas {
    width: 100%;
    height: 250px;
    display: block;
    touch-action: none;
}

.sjc-radar--deck .sjc-radar__canvas,
.sjc-radar--deck .sjc-radar__palco {
    height: 300px;
    min-height: 300px;
}

/* Etapa sozinha no slide: o painel ocupa a altura que o corpo do slide deixar,
   sem altura fixa, senão o painel passa por baixo da leitura do gráfico. */
.sjc-radar--deck.sjc-radar--3d .sjc-radar__canvas,
.sjc-radar--deck.sjc-radar--2d .sjc-radar__palco {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
}

/* Fora do deck a coluna de texto ao lado é mais alta que os dois painéis, e o
   grid esticava a caixa do mapa junto com ela: com o quadro deitado da planta o
   desenho virava uma faixa no meio de uma caixa vazia. Aqui a caixa fica na
   proporção do desenho e os painéis param de esticar. */
.sjc-radar--estudo .sjc-radar__grid {
    align-items: start;
}

.sjc-radar--estudo .sjc-radar__palco[data-sjc-2d] {
    flex: 0 0 auto;
    aspect-ratio: 540 / 306;
    min-height: 0;
}

/* Tabela e gráfico: o dado cru e a mesma coluna ordenada. */
.sjc-radar__palco--tab,
.sjc-radar__palco--graf {
    overflow: visible;
}

.sjc-radar--deck .sjc-radar__palco--tab,
.sjc-radar--deck .sjc-radar__palco--graf {
    height: auto;
    min-height: 0;
}

.sjc-radar__tab {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.sjc-radar__tab th,
.sjc-radar__tab td {
    padding: 5px 10px 5px 0;
    text-align: left;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    white-space: nowrap;
}

.sjc-radar__tab th {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary, #777);
    font-weight: 400;
}

.sjc-radar__tr {
    cursor: pointer;
}

.sjc-radar__tr.is-on {
    font-weight: 600;
}

.sjc-radar__resto {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--text-tertiary, #777);
}

.sjc-radar__palco--graf svg {
    height: auto;
}

.sjc-radar__lado {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.sjc-radar__estado {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #444);
    line-height: 1.35;
}

/* Selo de estado: "ao vivo" com o ponto piscando, ou "parado" quando a tela está
   em cima de foto. É a primeira coisa que se lê no painel, então ele é caixa com
   fio e não uma palavra solta no meio da frase. */
.sjc-radar__selo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-right: 8px;
    padding: 1px 6px 1px 5px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 0.05em;
}

/* Ao vivo o selo sai do preto e branco: é o único vermelho do painel, e ele só
   acende quando a amostra na tela veio da fonte agora. */
.sjc-radar { --sjc-vivo: #ff5a5a; }

[data-theme='light'] .sjc-radar { --sjc-vivo: #d0342c; }

.sjc-radar[data-estado='vivo'] .sjc-radar__selo {
    color: var(--sjc-vivo);
}

/* No deck o estado vive na linha do título do slide (`.d-vivo` em deck.css), então
   aqui ele sairia dito duas vezes na mesma tela. */
.sjc-radar--deck .sjc-radar__selo {
    display: none;
}

/* Ponto de estado: cheio e pulsando quando o dado é da fonte agora, vazado
   quando é foto ou leitura guardada. Só aparece depois da primeira pintura. */
.sjc-radar__pulso {
    position: relative;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.08em;
}

.sjc-radar__pulso::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0;
}

.sjc-radar[data-estado='vivo'] .sjc-radar__estado {
    color: var(--text-primary, #111);
}

/* Ao vivo o ponto faz duas coisas: pisca (o dado chega em passos) e manda o anel
   para fora (o painel está esperando o próximo). O passo de 10 s da busca não cabe
   numa animação de 10 s, senão ninguém vê: o ciclo é curto e repetido. */
.sjc-radar[data-estado='vivo'] .sjc-radar__pulso {
    animation: sjc-radar-pisca 1.6s steps(1, end) infinite;
}

.sjc-radar[data-estado='vivo'] .sjc-radar__pulso::after {
    animation: sjc-radar-pulso 1.6s ease-out infinite;
}

@keyframes sjc-radar-pisca {
    0%, 62% { opacity: 1; }
    63%, 100% { opacity: 0.28; }
}

.sjc-radar[data-estado='foto'] .sjc-radar__pulso,
.sjc-radar[data-estado='cache'] .sjc-radar__pulso,
.sjc-radar[data-estado='demo'] .sjc-radar__pulso {
    background: none;
    box-shadow: inset 0 0 0 1px currentColor;
}

@keyframes sjc-radar-pulso {
    0% { transform: scale(0.55); opacity: 0.85; }
    100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sjc-radar[data-estado='vivo'] .sjc-radar__pulso,
    .sjc-radar[data-estado='vivo'] .sjc-radar__pulso::after {
        animation: none;
    }
}

/* Legenda das duas classes de aeronave, com a contagem de cada uma. */
.sjc-radar__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #444);
}

.sjc-radar__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sjc-radar__chip svg {
    flex: none;
    display: block;
}

.sjc-radar__chip b {
    font-weight: 600;
    color: var(--text-primary, #111);
}

.sjc-radar__detalhe {
    margin: 0;
    min-height: 3.2em;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-primary, #111);
}

.sjc-radar__detalhe p {
    margin: 0 0 2px;
}

.sjc-radar__vazio {
    color: var(--text-tertiary, #777);
}

.sjc-radar__cs {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.05rem;
}

.sjc-radar__rota {
    letter-spacing: 0.02em;
}

.sjc-radar__cidades,
.sjc-radar__cia,
.sjc-radar__meta {
    color: var(--text-secondary, #444);
    font-size: 0.75rem;
}

.sjc-radar__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-primary, #111);
}

.sjc-radar__lista li,
.sjc-radar__li {
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.12));
    cursor: pointer;
}

.sjc-radar__li:hover,
.sjc-radar__li.is-on {
    opacity: 1;
}

.sjc-radar__li.is-on {
    font-weight: 600;
}

.sjc-radar__li:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.sjc-radar__svg {
    touch-action: manipulation;
}

/* Pedir uma amostra na hora, sem esperar o passo de 45 s. Mesmo desenho do
   botão do mapa do Brasil, para os dois painéis de voo terem a mesma cara. */
.sjc-radar__btn {
    align-self: start;
    font: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary, #111);
    background: none;
    border: 1px solid var(--border-color, rgba(0,0,0,0.2));
    padding: 7px 12px;
    cursor: pointer;
    transition: border-color 0.16s ease;
}

.sjc-radar__btn:hover {
    border-color: var(--text-primary, #111);
}

.sjc-radar__btn:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.sjc-radar__btn[disabled] {
    opacity: 0.45;
    cursor: default;
}

.sjc-radar__fonte {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-tertiary, #777);
}

.sjc-radar__fonte a {
    color: inherit;
}

@media (max-width: 700px) {
    .sjc-radar,
    .sjc-radar__grid {
        grid-template-columns: 1fr;
    }
}