/*
 * Painel de TV 16:9, sem rolagem.
 *
 * A folha tem duas partes: os tokens (cor, folga, raio, tipo) e os componentes. Um
 * componente não traz valor arbitrário de espaçamento ou cor — se não existe token para
 * aquilo, o token entra primeiro. A tipografia é em `vmin` para a tela inteira escalar
 * junto quando a TV muda de resolução.
 */

:root {
    --fundo: #070C11;
    --superficie: #0E151D;
    --superficie-2: #141E28;
    --superficie-3: #1C2937;
    --borda: rgba(226, 238, 250, .07);
    --borda-forte: rgba(226, 238, 250, .14);

    --texto: #E9F1FA;
    --texto-suave: #94A8BC;
    --texto-mudo: #62778D;

    --azul: #4FA3F7;
    --marca: #14B8A6;
    --verde: #3ECF8E;
    --vermelho: #F0555F;
    --ambar: #E7B04A;

    --verde-fundo: rgba(62, 207, 142, .12);
    --verde-borda: rgba(62, 207, 142, .38);
    --vermelho-fundo: rgba(240, 85, 95, .12);
    --vermelho-borda: rgba(240, 85, 95, .38);
    --ambar-fundo: rgba(231, 176, 74, .12);
    --ambar-borda: rgba(231, 176, 74, .38);

    /* Escala de folga. Toda separação entre cards, seções e itens sai daqui, então o
     * respiro do painel se ajusta num lugar só. */
    --folga: 1.1vmin;
    --folga-fina: .7vmin;
    --respiro: 1.5vmin;

    --raio: 12px;
    --raio-fino: 8px;
    --sombra: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 10px 26px rgba(0, 0, 0, .35);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--fundo);
    color: var(--texto);
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(11px, .98vw, 27px);
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

.painel {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    gap: var(--folga);
    padding: var(--folga);
}

/* ---------------------------------------------------------- cabeçalho */
.cabecalho {
    display: flex;
    align-items: center;
    gap: var(--respiro);
    background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1vmin 1.7vmin;
}

.cabecalho__marca {
    display: flex;
    align-items: center;
}

/* O letreiro da marca é o identificador: não se repete em texto ao lado. */
.cabecalho__logo {
    height: 4.6vmin;
    width: auto;
}

.cabecalho__divisor {
    width: 1px;
    height: 3.6vmin;
    background: var(--borda-forte);
    margin: 0 1.4em;
}

.cabecalho__regional {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.cabecalho__rotulo {
    font-size: .6em;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-mudo);
}

.cabecalho__nome {
    font-size: 1.02em;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cabecalho__espaco {
    flex: 1 1 auto;
}

.cabecalho__hora {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.relogio {
    font-size: 1.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cabecalho__data {
    font-size: .64em;
    color: var(--texto-mudo);
    text-transform: capitalize;
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .42em 1em;
    border-radius: 999px;
    font-size: .68em;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid var(--borda-forte);
    background: var(--superficie-3);
    color: var(--texto-suave);
}

.selo--neutro { color: var(--texto-suave); }
.selo--on { color: var(--verde); border-color: var(--verde-borda); background: var(--verde-fundo); }
.selo--off { color: var(--vermelho); border-color: var(--vermelho-borda); background: var(--vermelho-fundo); }
.selo--alerta { color: var(--ambar); border-color: var(--ambar-borda); background: var(--ambar-fundo); }

/* Uma só tag na barra: quando o socket está pegando mas o ciclo do servidor não entrega
 * cifra nova, o mesmo selo fica âmbar — sem texto extra, sem segunda tag. */
.selo--on.selo--degradado { color: var(--ambar); border-color: var(--ambar-borda); background: var(--ambar-fundo); }

.selo__ponto {
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: currentColor;
}

.selo--on .selo__ponto { animation: pulsar 2.4s ease-in-out infinite; }

@keyframes pulsar {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ---------------------------------------------------------- corpo */
.corpo {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 3fr) minmax(0, 1.45fr);
    gap: var(--folga);
    min-height: 0;
}

.coluna {
    display: grid;
    gap: var(--folga);
    min-height: 0;
}

/* Ranking tem a altura do próprio conteúdo; o que sobra vai para as cotações, que é onde
 * a lista cresce (até cinco ativos). Com `1fr` nas três linhas sobrava buraco no Top 3. */
.coluna--esquerda {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.coluna--centro {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--folga);
    min-height: 0;
}

.coluna--direita {
    grid-template-rows: minmax(0, .85fr) minmax(0, 1.6fr);
}

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.cartao__cabeca {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: 1.05vmin 1.5vmin;
    border-bottom: 1px solid var(--borda);
    font-size: .68em;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-mudo);
}

/* O segundo rótulo do cabeçalho é complemento, não título: caixa baixa e mais leve. */
.cartao__cabeca span + span {
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--texto-mudo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cartao__corpo {
    padding: 1.2vmin 1.4vmin;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--folga-fina);
    flex: 1;
}

/* ---------------------------------------------------------- rankings */
.lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35vmin;
    flex: 1;
    min-height: 0;
}

.lista__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.7em minmax(0, 1fr) auto;
    align-items: center;
    gap: .9em;
    padding: .95vmin 1vmin 1.05vmin;
    overflow: hidden;
    border-radius: var(--raio-fino);
    background: var(--superficie-2);
}

.lista__posicao {
    font-size: .78em;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--texto-mudo);
}

.lista__item--primeiro {
    background: var(--superficie-3);
}

.lista__item--primeiro .lista__posicao { color: var(--marca); }
.lista__item--primeiro .lista__nome { color: var(--texto); }

.lista__nome {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--texto-suave);
}

.lista__valor {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Barra proporcional ao maior valor da própria lista: a linha passa a dizer grandeza,
 * não só ordem. A largura vem do JS, junto com o número. */
.lista__barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--marca), rgba(20, 184, 166, .18));
}

.lista__vazio {
    font-size: .85em;
    color: var(--texto-mudo);
    padding: .8vmin 1vmin;
}

/* ---------------------------------------------------------- KPIs */
.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--folga);
}

.kpis--metas {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.kpi {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.15vmin 1.4vmin 1.25vmin;
    display: flex;
    flex-direction: column;
    gap: .2vmin;
    min-width: 0;
}

.kpi__rotulo {
    font-size: .6em;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--texto-mudo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Os números mandam no card, mas 2px menores em qualquer resolução: `calc` com `em`
 * mantém a hierarquia e desce a régua junto com a tipografia da tela. */
.kpi__valor {
    font-size: calc(1.9em - 2px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A nota responde à pergunta que o número sozinho deixa no ar — 928 de quê? */
.kpi__nota {
    font-size: .62em;
    color: var(--texto-mudo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cor é estado, não decoração: só o valor muda de tom, a borda continua neutra. */
.kpi--ok .kpi__valor { color: var(--verde); }
.kpi--erro .kpi__valor { color: var(--vermelho); }
.kpi--alerta .kpi__valor { color: var(--ambar); }
.kpi--neutro .kpi__valor,
.kpi--info .kpi__valor { color: var(--texto); }

.grafico {
    position: relative;
    min-height: 0;
    padding: 1.2vmin 1.4vmin 1.4vmin;
    flex: 1;
}

.grafico canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ---------------------------------------------------------- desempenho */
.desc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: 1.4vmin;
    align-items: center;
    height: 100%;
    min-height: 0;
}

.desc__legenda {
    display: flex;
    flex-direction: column;
    gap: 1vmin;
    min-width: 0;
}

.desc__linha {
    display: grid;
    grid-template-columns: .75em minmax(0, 1fr) auto;
    align-items: center;
    gap: .7em;
    font-size: .82em;
    white-space: nowrap;
}

.desc__ponto {
    width: .75em;
    height: .75em;
    border-radius: 3px;
    background: currentColor;
}

.desc__titulo {
    font-weight: 650;
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desc__cifra {
    font-variant-numeric: tabular-nums;
    color: var(--texto-suave);
}

/* Caixa quadrada: sem `aspect-ratio` o anel herdava a altura do cartão e encostava na
 * borda direita, deixando vazio embaixo da legenda. */
.desc__circulo {
    position: relative;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    justify-self: center;
}

.desc__circulo canvas {
    width: 100% !important;
    height: 100% !important;
}

/* O total mora no furo da rosca: é o número que a legenda estava disputando. */
.desc__centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.desc__total {
    font-size: 1.45em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.desc__rotulo {
    font-size: .58em;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-mudo);
}

/* ---------------------------------------------------------- cotações */
.cotacoes {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .3vmin;
    flex: 1;
    min-height: 0;
}

.cotacao {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto;
    align-items: baseline;
    align-content: center;
    gap: .8em;
    padding: 0 .9vmin;
    border-radius: var(--raio-fino);
    /* A lista preenche o cartão: com três ou cinco ativos as faixas têm a mesma altura
     * e o buraco embaixo de uma lista curta não aparece. */
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.cotacao:not(:last-child) { box-shadow: inset 0 -1px 0 var(--borda); }

.cotacao__simbolo {
    font-weight: 700;
    letter-spacing: .02em;
}

.cotacao__preco {
    justify-self: end;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.cotacao__var {
    min-width: 4.4em;
    text-align: right;
    font-size: .78em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cotacao__hora {
    min-width: 3.2em;
    text-align: right;
    font-size: .66em;
    color: var(--texto-mudo);
    font-variant-numeric: tabular-nums;
}

.cotacao--subiu .cotacao__var { color: var(--verde); }
.cotacao--desceu .cotacao__var { color: var(--vermelho); }
.cotacao--velha .cotacao__hora { color: var(--ambar); }
.cotacao--indisponivel .cotacao__preco { color: var(--texto-mudo); }

/* O pé do cartão ancora a lista curta e diz de onde veio o preço. */
.cotacoes__pe {
    margin-top: auto;
    padding-top: .8vmin;
    border-top: 1px solid var(--borda);
    font-size: .62em;
    letter-spacing: .06em;
    color: var(--texto-mudo);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- faixa de unidades */
.rodape {
    display: flex;
    align-items: center;
    gap: 1.6vw;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: .8vmin 1.5vmin;
    font-size: .8em;
    overflow: hidden;
    white-space: nowrap;
    min-height: 4.4vmin;
}

.rodape__rotulo {
    flex: none;
    font-size: .82em;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-mudo);
}

/* A faixa é o que corta; o trilho é o que anda. Sem <marquee>: é uma cófila de grupos
 * idênticos translando meia largura, que é exatamente um período. */
.faixa {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.faixa__trilho {
    display: flex;
    width: max-content;
    animation: deslizar var(--duracao, 40s) linear infinite;
    will-change: transform;
}

.faixa__grupo {
    display: flex;
    align-items: center;
    gap: 1.6vw;
    padding-right: 1.6vw;
}

@keyframes deslizar {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Conteúdo curto não precisa andar: sem movimento inútil, sem buraco na tela. */
.faixa--parada .faixa__trilho { animation: none; }

.rodape__item {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    color: var(--texto-suave);
}

.rodape__total {
    padding: .05em .6em;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.rodape__vazio { color: var(--texto-mudo); font-size: .9em; }

/* ---------------------------------------------------------- telas fora do 16:9 */
/* Em telas baixas a prioridade é continuar legível, não caber inteiro. */
@media (max-height: 600px) {
    html { font-size: 12px; }
    .painel { height: auto; }
    html, body { overflow: auto; }
}

/* Abaixo de ~1200 px o anel medido pela altura do cartão esmaga a legenda: ele passa a
 * ser medido pela largura da coluna. Na linha de cotação a hora sai — o pé do cartão já
 * informa quando a faixa foi coletada. */
@media (max-width: 1180px) {
    .desc { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
    .desc__circulo { height: auto; width: 100%; max-width: 122px; justify-self: center; }
    /* A cifra muda de linha: apertar título e número lado a lado truncaria um dos dois. */
    .desc__linha { grid-template-columns: .75em minmax(0, 1fr); }
    .desc__cifra { grid-column: 2; }
    .cotacao { gap: .5em; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; }
    .cotacao__hora { display: none; }
}

/* Tablet e celular não são onde este painel roda, mas abrir nele não pode quebrar:
 * uma coluna, na ordem de leitura do painel. */
@media (max-width: 900px) {
    .painel { height: auto; }
    html, body { overflow: auto; }
    .corpo { grid-template-columns: minmax(0, 1fr); }
    .kpis, .kpis--metas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coluna--esquerda, .coluna--direita { grid-template-rows: none; }
    .cartao { min-height: 34vw; }
    .cabecalho__divisor, .cabecalho__regional { display: none; }
}

/* Painel de TV não tem operador para caçar animação: quem pediu menos movimento recebe a
 * faixa parada, com o começo da lista visível. */
@media (prefers-reduced-motion: reduce) {
    .faixa__trilho,
    .selo--on .selo__ponto { animation: none; }
}