/* =========================================
   AVORA — VARIÁVEIS DE MARCA
========================================= */

.pagina-avora {

    --avora-bg: #061527;
    --avora-bg-2: #0a2044;
    --avora-linha-base: #7c8db3;
    --avora-linha-azul: #00c2ff;
    --avora-linha-roxo: #9291f5;
    --avora-linha-teal: #3ecfb2;
    --avora-linha-ambar: #f0b45c;

    background:
        radial-gradient(circle at 20% 0%, rgba(0, 194, 255, 0.10), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(129, 140, 248, 0.10), transparent 45%),
        linear-gradient(180deg, var(--avora-bg) 0%, var(--avora-bg-2) 55%, var(--avora-bg) 100%);

    overflow-x: hidden;

}


.pagina-avora .logo-wordmark,
.pagina-avora .avora-eyebrow {
    font-family: Inter, Arial, sans-serif;
}


/* Rolagem suave para os anchors do header (Mercado/Ferramentas/
   Cenários/Sobre) e para os CTAs internos ("Explorar o mercado").
   Este arquivo só é carregado por avora.html/ativo.html, então a
   regra abaixo nunca chega a ser aplicada nas demais páginas. */
html {
    scroll-behavior: smooth;
}


/* =========================================
   TOPO
========================================= */

.avora-topo {

    position: sticky;
    top: 0;
    z-index: 40;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 18px clamp(20px, 5vw, 60px);

    background: rgba(6, 21, 39, 0.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);

}

/* Envelope do cabeçalho interno (.cabecalho, de style.css) quando ele
   substitui o .avora-topo público em páginas híbridas (ver ativo.html
   e configurarTopoAppPublica em js/auth-comum.js) — mesma largura/
   centralização/respiro do topo que .app-container + body.pagina-
   calculadora dão às páginas 100% internas (Dashboard, Carteira...),
   sem depender delas (evitaria afetar o .avora-topo público, que
   precisa continuar de ponta a ponta para visitante anônimo). */
.cabecalho-app-logado-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 30px 0;
}

@media (max-width: 900px) {
    .cabecalho-app-logado-wrap {
        padding: 18px 18px 0;
    }
}

.avora-nav-central {
    display: none;
    align-items: center;
    gap: 30px;
}

.avora-nav-central a {
    color: var(--texto-secundario);
    font-size: 14px;
    text-decoration: none;
    transition: 0.2s;
}

.avora-nav-central a:hover {
    color: var(--texto);
}

@media (min-width: 980px) {
    .avora-nav-central {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

.avora-topo-acoes {
    display: flex;
    align-items: center;
    gap: 16px;
}


/* =========================================
   MENU MOBILE (CABEÇALHO PÚBLICO)
========================================= */
/* Abaixo de 980px, .avora-nav-central some (regra acima) e
   .avora-link-discreto/.avora-saudacao também somem (ver mais abaixo)
   sem NENHUMA alternativa — um visitante ou usuário logado em
   tablet/celular ficava sem forma de navegar a partir do cabeçalho.
   O botão hambúrguer abre um painel com os mesmos elementos (sem
   duplicar markup): a classe .menu-mobile-aberto no <header
   id="avora-topo-cabecalho"> reexibe .avora-nav-central/.avora-topo-acoes
   como colunas empilhadas, com seletores mais específicos que os
   media queries de largura mínima usados no desktop (não precisa de
   !important). Ligado por configurarMenuMobile() em js/auth-comum.js. */

.avora-botao-menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    color: var(--texto);
    cursor: pointer;
    transition: 0.2s;
}

.avora-botao-menu-mobile:hover {
    border-color: rgba(0, 194, 255, 0.4);
}

.avora-botao-menu-mobile svg {
    pointer-events: none;
}

@media (max-width: 979px) {

    /* Sem isto, "space-between" (regra base de .avora-topo) espalharia
       logo/hambúrguer/ações em pontos distintos da linha — com
       margin-left:auto no hambúrguer, hambúrguer e ações (saudação/
       Entrar/Sair, quando visíveis) ficam colados à direita, juntos. */
    .avora-topo {
        justify-content: flex-start;
    }

    .avora-botao-menu-mobile {
        display: flex;
        margin-left: auto;
    }

    #avora-topo-cabecalho.menu-mobile-aberto {
        flex-wrap: wrap;
        row-gap: 14px;
    }

    #avora-topo-cabecalho.menu-mobile-aberto .avora-nav-central,
    #avora-topo-cabecalho.menu-mobile-aberto .avora-topo-acoes {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-basis: 100%;
        gap: 4px;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid #263244;
        background: #0b1220;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    }

    #avora-topo-cabecalho.menu-mobile-aberto .avora-nav-central a,
    #avora-topo-cabecalho.menu-mobile-aberto .avora-topo-acoes .avora-link-discreto,
    #avora-topo-cabecalho.menu-mobile-aberto .avora-topo-acoes .botao-sair {
        padding: 10px 12px;
        border-radius: 8px;
    }

    #avora-topo-cabecalho.menu-mobile-aberto .avora-nav-central a:hover,
    #avora-topo-cabecalho.menu-mobile-aberto .avora-topo-acoes .avora-link-discreto:hover {
        background: rgba(0, 194, 255, 0.08);
    }

    /* Reexibe links/saudação normalmente escondidos por largura mínima
       (.avora-link-discreto/.avora-saudacao, definidos mais abaixo) —
       seletor com mais classes vence sem precisar de !important. */
    #avora-topo-cabecalho.menu-mobile-aberto .avora-topo-acoes .avora-link-discreto,
    #avora-topo-cabecalho.menu-mobile-aberto .avora-topo-acoes .avora-saudacao {
        display: block;
    }

}

.avora-saudacao {
    color: var(--texto-secundario);
    font-size: 13px;
    display: none;
}

@media (min-width: 640px) {
    .avora-saudacao { display: inline; }
}

.avora-link-discreto {
    color: var(--texto-secundario);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: 0.2s;
    display: none;
}

.avora-link-discreto:hover {
    color: var(--texto);
    border-color: var(--avora-linha-azul);
}

@media (min-width: 860px) {
    .avora-link-discreto { display: inline; }
}

.avora-topo-cta {
    padding: 10px 20px;
    font-size: 13px;
}


/* =========================================
   TIPOGRAFIA COMUM DA PÁGINA
========================================= */

.avora-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--avora-linha-azul);
    text-transform: uppercase;
}

.avora-secao {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 60px);
}

.avora-secao-cabecalho {
    max-width: 720px;
    margin-bottom: clamp(40px, 6vw, 64px);
}

.avora-secao-cabecalho h2 {
    margin-top: 14px;
    font-size: clamp(26px, 3.6vw, 42px);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.avora-secao-cabecalho-centro {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.avora-secao-intro {
    margin-top: 18px;
    color: var(--texto-secundario);
    font-size: 16px;
    line-height: 1.7;
    max-width: 560px;
}

.avora-secao-intro-centro {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* =========================================
   SVG DE TRAJETÓRIAS (base compartilhada)
========================================= */
/* Usada no fundo do hero, na seção de Cenários e na mini-ilustração
   de "Como a Avora funciona" — sempre abstrata, nunca com valores. */

.avora-hero-svg path,
.avora-cenarios-visual path,
.avora-fluxo-mini-svg path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avora-trajetoria-tronco {
    stroke: var(--avora-linha-base);
    stroke-width: 2.5;
    opacity: 0.75;
}

.avora-trajetoria-ramo {
    stroke-width: 2.5;
    opacity: 0.9;
}

.avora-trajetoria-ramo.cor-azul { stroke: var(--avora-linha-azul); }
.avora-trajetoria-ramo.cor-roxo { stroke: var(--avora-linha-roxo); }
.avora-trajetoria-ramo.cor-teal { stroke: var(--avora-linha-teal); }
.avora-trajetoria-ramo.cor-ambar { stroke: var(--avora-linha-ambar); }


/* =========================================
   HERO
========================================= */

.avora-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(120px, 18vh, 180px) clamp(20px, 6vw, 60px) clamp(70px, 10vh, 110px);
    text-align: center;
}

.avora-hero-fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.9;
}

.avora-hero-svg {
    width: 100%;
    height: 100%;
}

.avora-hero-conteudo {
    position: relative;
    z-index: 1;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avora-headline-hero {
    margin-top: 18px;
    font-size: clamp(32px, 5.2vw, 58px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    max-width: 720px;
}

.avora-grifo {
    position: relative;
    color: var(--avora-linha-azul);
}

.avora-subheadline {
    margin-top: 22px;
    color: var(--texto-secundario);
    font-size: 17px;
    line-height: 1.7;
    max-width: 560px;
}

.avora-cta-grupo {
    margin-top: 36px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
}

.avora-cta-principal {
    padding: 16px 30px;
}

.avora-cta-secundario {
    color: var(--texto);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    transition: 0.2s;
}

.avora-cta-secundario:hover {
    border-color: var(--avora-linha-azul);
    color: var(--avora-linha-azul);
}


/* =========================================
   MERCADO: BUSCA + DESTAQUES
========================================= */

.avora-busca-destaque {
    margin-top: 8px;
    margin-bottom: clamp(56px, 8vw, 84px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.avora-ver-cotacoes {
    font-size: 14px;
}

.avora-busca-grande {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.avora-busca-grande input {
    padding: 20px 22px 20px 54px;
    font-size: 16px;
    border-radius: 16px;
}

.avora-busca-icone {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--texto-secundario);
    pointer-events: none;
}

.avora-mercado-destaques {
    margin-top: clamp(50px, 7vw, 76px);
}

.avora-mercado-destaques-cabecalho {
    max-width: 640px;
    margin: 0 auto clamp(30px, 4vw, 44px);
    text-align: center;
}

.avora-mercado-destaques-cabecalho h3 {
    font-size: clamp(20px, 2.4vw, 26px);
}

.avora-mercado-destaques-cabecalho p {
    margin-top: 10px;
    color: var(--texto-secundario);
    font-size: 15px;
    line-height: 1.6;
}

.avora-destaques-estado {
    color: var(--texto-secundario);
    font-size: 14px;
    margin-bottom: 8px;
    text-align: center;
}

.avora-destaque-preco {
    margin-top: 14px;
    font-size: 20px;
    font-weight: 700;
}

.avora-destaque-preco .positivo,
.avora-destaque-preco .negativo {
    font-size: 14px;
    font-weight: 600;
    margin-left: 6px;
}

.avora-destaque-motivo {
    margin-top: 10px;
    color: var(--texto-secundario);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================
   PREVIEW DE PRODUTO (Ferramentas)
========================================= */

.avora-produto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.avora-preview-card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 18px;
    border: 1px solid var(--borda);
    background: linear-gradient(145deg, rgba(14, 23, 40, 0.9), rgba(7, 13, 25, 0.94));
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.avora-preview-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 194, 255, 0.35);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.avora-preview-card h3 {
    margin-top: 14px;
    font-size: 18px;
}

.avora-preview-card p {
    margin-top: 8px;
    color: var(--texto-secundario);
    font-size: 13px;
    line-height: 1.6;
    flex: 1;
}

.avora-preview-mock {
    margin-top: 18px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(4, 10, 20, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.avora-preview-mock-chart svg {
    width: 100%;
    height: 70px;
}

.avora-preview-linha-principal {
    fill: none;
    stroke: var(--avora-linha-azul);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avora-preview-linha-secundaria {
    fill: none;
    stroke: var(--avora-linha-roxo);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0.6;
    stroke-linecap: round;
}

.avora-preview-cenarios-mini {
    display: flex;
    gap: 8px;
    font-size: 12px;
}

.avora-preview-cenarios-mini span {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid #263244;
    color: var(--texto-secundario);
}

.avora-preview-cenarios-mini span.ativo {
    border-color: var(--avora-linha-azul);
    color: var(--texto);
    background: rgba(0, 194, 255, 0.08);
}

.avora-preview-legenda {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--texto-secundario);
}

.avora-preview-mock-barras {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 70px;
}

.avora-preview-mock-barras span {
    flex: 1;
    background: linear-gradient(180deg, var(--avora-linha-teal), rgba(62, 207, 178, 0.15));
    border-radius: 3px 3px 0 0;
}

.avora-preview-cta {
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--avora-linha-azul);
}


/* =========================================
   VISÃO DE CENÁRIOS / FUTURO
========================================= */

.avora-cenarios-visual {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--borda);
    background: linear-gradient(145deg, rgba(14, 23, 40, 0.9), rgba(7, 13, 25, 0.94));
}

.avora-cenarios-visual svg {
    width: 100%;
    height: auto;
    display: block;
}

.avora-cenarios-grid {
    max-width: 900px;
    margin: clamp(30px, 4vw, 40px) auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.avora-cenario-card {
    padding: 20px 16px;
    border-radius: 14px;
    border: 1px solid var(--borda);
    border-top: 3px solid var(--avora-linha-base);
    background: rgba(9, 19, 34, 0.6);
    text-align: center;
}

.avora-cenario-card.cor-azul { border-top-color: var(--avora-linha-azul); }
.avora-cenario-card.cor-roxo { border-top-color: var(--avora-linha-roxo); }
.avora-cenario-card.cor-teal { border-top-color: var(--avora-linha-teal); }
.avora-cenario-card.cor-ambar { border-top-color: var(--avora-linha-ambar); }

.avora-cenario-card span {
    display: block;
    font-weight: 700;
    font-size: 15px;
}

.avora-cenario-card p {
    margin-top: 6px;
    color: var(--texto-secundario);
    font-size: 12px;
    line-height: 1.5;
}

.avora-cenarios-futuro .badge {
    display: block;
    width: fit-content;
    margin: clamp(28px, 4vw, 36px) auto 0;
}


/* =========================================
   COMO A AVORA FUNCIONA
========================================= */

.avora-fluxo {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.avora-fluxo-etapa {
    padding: 26px;
    border-radius: 18px;
    border: 1px solid var(--borda);
    background: linear-gradient(145deg, rgba(14, 23, 40, 0.9), rgba(7, 13, 25, 0.94));
    height: 100%;
}

.avora-fluxo-numero {
    display: block;
    color: var(--avora-linha-azul);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.avora-fluxo-etapa h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.avora-fluxo-etapa p {
    color: var(--texto-secundario);
    font-size: 13px;
    line-height: 1.6;
}

.avora-fluxo-mini-svg {
    margin-top: 18px;
    width: 100%;
    height: auto;
}

.avora-fluxo-seta {
    display: none;
}

.avora-fluxo-seta svg {
    width: 44px;
    height: 20px;
}

.avora-fluxo-seta path {
    fill: none;
    stroke: var(--texto-secundario);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 900px) {
    .avora-fluxo-seta { display: flex; justify-content: center; }
}


/* =========================================
   DIFERENCIAIS
========================================= */

.avora-diferenciais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.avora-diferencial {
    padding: 22px;
    border-radius: 14px;
    border: 1px solid var(--borda);
    background: rgba(9, 19, 34, 0.5);
}

.avora-diferencial p {
    margin-top: 10px;
    color: var(--texto-secundario);
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================
   PLANOS (resumo na landing — comparação completa em planos.html)
========================================= */

.avora-planos-resumo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 24px 0 20px;
}

.avora-planos-resumo-card {
    padding: 22px;
    border-radius: 14px;
    border: 1px solid var(--borda);
    background: rgba(9, 19, 34, 0.5);
}

.avora-planos-resumo-card-pro {
    border-color: rgba(240, 180, 92, 0.3);
}

.avora-planos-resumo-card p {
    margin-top: 10px;
    color: var(--texto-secundario);
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================
   PÁGINA DE ATIVO
========================================= */
/* Reaproveita .avora-secao, .avora-eyebrow, .card-resultado,
   .tag-tipo/.tag-acao/.tag-fii, .positivo/.negativo, .badge e
   .aviso-simulacao — só o que é específico desta página fica aqui. */

.avora-ativo-pagina {
    padding-top: clamp(40px, 6vh, 80px);
}

.avora-ativo-voltar {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--texto-secundario);
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s;
}

.avora-ativo-voltar:hover {
    color: var(--texto);
}

.avora-ativo-busca {
    max-width: 420px;
    margin-bottom: 40px;
}

.avora-ativo-erro {
    text-align: center;
    padding: 60px 20px;
    color: var(--texto-secundario);
}

.avora-ativo-erro-acoes {
    margin-top: 18px;
}

/* Rótulo discreto que distingue dado observado de resultado calculado
   — deliberadamente pequeno e neutro, não é um badge chamativo. Reaproveitado
   também na landing (seção "Como a Avora funciona"). */
.avora-origem-dado {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #64748b;
}

.avora-ativo-cabecalho {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--borda);
    margin-bottom: 32px;
}

.avora-ativo-identidade h1 {
    margin-top: 10px;
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: -0.5px;
}

.avora-ativo-identidade p {
    margin-top: 4px;
    color: var(--texto-secundario);
    font-size: 15px;
}

.avora-ativo-preco-bloco {
    text-align: right;
}

.avora-ativo-preco-bloco strong {
    display: block;
    font-size: clamp(26px, 3.6vw, 36px);
}

.avora-ativo-preco-bloco span:not(.avora-origem-dado) {
    display: inline-block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 600;
}

.avora-ativo-preco-bloco .avora-origem-dado {
    display: block;
    margin-top: 8px;
}

.avora-ativo-cta-conta {
    margin-bottom: 40px;
    padding: 18px 22px;
    border-radius: 14px;
    border: 1px solid rgba(0, 194, 255, 0.2);
    background: rgba(0, 194, 255, 0.05);
    color: var(--texto-secundario);
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
}

.avora-secao-interna {
    margin-bottom: 48px;
}

.avora-secao-interna-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.avora-ativo-periodos {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.avora-ativo-periodo {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.7);
    color: var(--texto-secundario);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.avora-ativo-periodo:hover {
    border-color: rgba(0, 194, 255, 0.5);
}

.avora-ativo-periodo.ativo {
    border-color: var(--azul);
    color: var(--texto);
    background: rgba(0, 194, 255, 0.08);
}

.avora-ativo-periodo-nota {
    margin-bottom: 14px;
    font-size: 12px;
    color: #64748b;
}

.avora-ativo-grafico-container {
    position: relative;
    height: clamp(260px, 38vh, 380px);
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--borda);
    background: linear-gradient(145deg, rgba(14, 23, 40, 0.9), rgba(7, 13, 25, 0.94));
    margin-bottom: 20px;
}

.avora-ativo-resumo-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}


/* =========================================
   SUA POSIÇÃO + VISÃO GERAL (página de ativo — Página do Ativo 2.0)
========================================= */
/* Reaproveita .avora-secao-interna, .avora-eyebrow, .cards-resultados/
   .card-resultado (mesmos cards do "Resumo do período" acima) — só o
   grid de duas colunas é específico daqui. */

.avora-posicao-visao-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Sobrescreve o span de rótulo padrão do .card-resultado — aqui é o
   percentual ao lado do resultado em R$, não um rótulo antes do valor. */
.avora-posicao-resultado-percent {
    display: inline-block;
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.avora-visao-geral-nota {
    margin-top: 16px;
    font-size: 12.5px;
    color: #64748b;
}

@media (max-width: 860px) {

    .avora-posicao-visao-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


/* =========================================
   PROVENTOS + ALERTAS (página de ativo — listas de eventos compactas)
========================================= */
/* Mesmo cartão/borda de .card-resultado, em formato de lista em vez de
   grid — cada linha é um provento ou um alerta deste ativo. */

.avora-lista-eventos {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avora-lista-eventos li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.6);
    font-size: 14px;
}

.avora-evento-principal {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.avora-evento-principal strong {
    font-size: 15px;
}

.avora-evento-principal span {
    font-size: 12.5px;
    color: var(--texto-secundario);
}

.avora-evento-secundario {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avora-evento-remover {
    background: none;
    border: none;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.avora-evento-remover:hover {
    color: #f87171;
}


/* Formulário compacto de criação de alerta — uma linha só em telas
   largas, empilha em telas estreitas. Reaproveita .input-prefixo,
   .botao-principal/.botao-calcular e .mensagem-login (já existentes). */

.avora-alerta-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.avora-alerta-form-texto {
    font-size: 14px;
    color: var(--texto-secundario);
    white-space: nowrap;
}

.avora-alerta-form select {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.7);
    color: var(--texto);
    font-family: inherit;
    font-size: 14px;
}

.avora-alerta-form .input-prefixo input {
    width: 120px;
}

.avora-alerta-form .botao-calcular {
    white-space: nowrap;
}


/* =========================================
   PROJEÇÕES (página de ativo)
========================================= */
/* Cores dos 4 cenários reaproveitam tokens já existentes na marca Avora
   em vez de inventar uma paleta nova: pessimista usa a mesma cor de
   .negativo (#f87171), otimista a mesma de .positivo/--verde, base usa
   --avora-linha-base (neutro) e personalizado --avora-linha-roxo — as
   duas últimas já estavam definidas em .pagina-avora sem nenhum uso
   até agora. */

.avora-projecoes-titulo {
    margin-top: 10px;
    font-size: clamp(20px, 2.6vw, 26px);
    max-width: 640px;
}


/* =========================================
   ABAS: HISTÓRICO / CENÁRIOS
========================================= */
/* Área de análise única: Histórico e Cenários trocam de conteúdo no
   mesmo espaço (mesmo gráfico), sem navegar para outra seção. Botões
   grandes de propósito — alvo de toque confortável em iPad/celular
   (~48px de altura), não os pill-buttons pequenos usados para período/
   horizonte (.avora-ativo-periodo, dentro de cada modo). */

.avora-analise-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 20px;
}

.avora-analise-aba {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.7);
    color: var(--texto-secundario);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.avora-analise-aba:hover {
    border-color: rgba(0, 194, 255, 0.4);
}

.avora-analise-aba.ativo {
    color: var(--texto);
    border-color: var(--azul);
    background: rgba(0, 194, 255, 0.08);
}

/* Aba de Cenários fica visualmente destacada mesmo inativa — é a
   entrada nova, precisa ser notada sem exigir que o usuário já saiba
   que ela existe. */
.avora-analise-aba-cenarios {
    border-color: rgba(146, 145, 245, 0.35);
}

.avora-analise-aba-cenarios.ativo {
    border-color: var(--avora-linha-roxo);
    background: rgba(146, 145, 245, 0.08);
}

.avora-analise-controles {
    margin-top: 4px;
}


/* =========================================
   BLOQUEIO POR PLANO (página de ativo)
========================================= */
/* Botões de período/horizonte fora do plano Free continuam visíveis
   (o usuário precisa VER que existem — ver relatório), só ganham um
   cadeado e, ao clicar, levam para Planos em vez de carregar dado. */

.avora-ativo-periodo.avora-bloqueado-pro {
    opacity: 0.65;
}

.avora-cadeado-pro {
    margin-left: 4px;
    font-size: 11px;
}

.avora-projecoes-personalizado-bloqueado-texto {
    margin: 6px 0 16px;
    color: var(--texto-secundario);
    font-size: 14px;
    line-height: 1.6;
}

.avora-projecoes-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.avora-projecoes-campo-valor {
    max-width: 220px;
}

.avora-projecoes-controles-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-secundario);
}

.avora-projecoes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.avora-projecoes-card {
    padding: 20px;
    border-radius: 14px;
    background: rgba(6, 13, 25, 0.7);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--borda);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.avora-projecoes-card-nome {
    font-size: 14px;
    font-weight: 700;
    color: var(--texto);
}

.avora-projecoes-card-taxa {
    font-size: 20px;
    margin: 4px 0 10px;
}

.avora-projecoes-card-rotulo {
    font-size: 12px;
    color: var(--texto-secundario);
}

.avora-projecoes-card-valor {
    font-size: 21px;
    color: var(--texto);
}

.avora-projecoes-card-pessimista { border-left-color: #f87171; }
.avora-projecoes-card-pessimista .avora-projecoes-card-taxa { color: #f87171; }

.avora-projecoes-card-base { border-left-color: var(--avora-linha-base); }
.avora-projecoes-card-base .avora-projecoes-card-taxa { color: var(--avora-linha-base); }

.avora-projecoes-card-otimista { border-left-color: var(--verde); }
.avora-projecoes-card-otimista .avora-projecoes-card-taxa { color: var(--verde); }

.avora-projecoes-dica {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--texto-secundario);
}

.avora-projecoes-link-metodologia {
    margin-left: 8px;
    color: var(--azul);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.avora-projecoes-personalizado {
    padding: clamp(18px, 3vw, 26px);
    border-radius: 14px;
    border: 1px solid rgba(146, 145, 245, 0.25);
    background: rgba(146, 145, 245, 0.05);
    margin-bottom: 20px;
}

.avora-projecoes-personalizado-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 14px;
}

.avora-projecoes-campo-taxa {
    max-width: 220px;
}

.avora-projecoes-input-percentual {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avora-projecoes-input-percentual input {
    width: 100px;
}

.avora-projecoes-input-percentual span {
    color: var(--texto-secundario);
    font-size: 14px;
}

.avora-projecoes-personalizado-resultado .avora-projecoes-card-valor {
    color: var(--avora-linha-roxo);
}

.avora-projecoes-metodologia {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--texto-secundario);
}

@media (max-width: 720px) {

    .avora-projecoes-grid {
        grid-template-columns: 1fr;
    }

    /* Abas empilhadas em telas estreitas — cada uma ainda com alvo de
       toque confortável (mesmo padding generoso da versão desktop). */
    .avora-analise-aba {
        flex-basis: 100%;
    }

}


/* =========================================
   PÁGINA DE COTAÇÕES
========================================= */
/* Reaproveita .avora-ativo-pagina/.avora-ativo-voltar, .avora-busca-*,
   .avora-ativo-periodo (para os filtros Todos/Ações/FIIs), .campo
   (para o <select> de ordenação), .tag-tipo e .positivo/.negativo —
   só o layout da lista em si é específico desta página. */

.avora-cotacoes-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

.avora-cotacoes-ordenar-campo {
    width: auto;
    min-width: 190px;
}

.avora-cotacoes-ordenar-campo select {
    cursor: pointer;
}

.avora-cotacoes-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avora-cotacao-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid var(--borda);
    background: rgba(9, 19, 34, 0.55);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}

.avora-cotacao-linha:hover {
    border-color: rgba(0, 194, 255, 0.35);
    transform: translateY(-2px);
}

.avora-cotacao-identidade {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 240px;
    min-width: 0;
}

.avora-cotacao-ticker {
    font-weight: 700;
    font-size: 15px;
}

.avora-cotacao-nome {
    color: var(--texto-secundario);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avora-cotacao-numeros {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.avora-cotacao-preco {
    font-weight: 600;
    font-size: 15px;
    min-width: 90px;
    text-align: right;
}

.avora-cotacao-variacao {
    font-weight: 600;
    font-size: 14px;
    min-width: 68px;
    text-align: right;
}

.avora-cotacao-cta {
    margin-top: 0;
    white-space: nowrap;
}

.avora-cotacoes-nota {
    margin-top: 20px;
    color: #64748b;
    font-size: 12px;
}

@media (max-width: 640px) {

    .avora-cotacoes-controles {
        flex-direction: column;
        align-items: stretch;
    }

    .avora-cotacoes-ordenar-campo {
        width: 100%;
    }

    .avora-cotacao-numeros {
        margin-left: 0;
    }

    .avora-cotacao-linha {
        justify-content: space-between;
    }

}


/* =========================================
   ENCERRAMENTO
========================================= */

.avora-fechamento {
    position: relative;
    padding: clamp(90px, 14vh, 160px) clamp(20px, 6vw, 60px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avora-fechamento-palavra {
    position: relative;
    height: clamp(60px, 9vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avora-palavra-agora,
.avora-palavra-avora {
    position: absolute;
    font-size: clamp(40px, 8vw, 110px);
    font-weight: 900;
    letter-spacing: -2px;
    transition: opacity 1.2s ease, filter 1.2s ease;
}

.avora-palavra-agora {
    color: var(--texto-secundario);
    opacity: 1;
}

.avora-palavra-avora {
    color: var(--texto);
    opacity: 0;
    filter: blur(6px);
}

.avora-fechamento-palavra.trocado .avora-palavra-agora {
    opacity: 0;
    filter: blur(6px);
}

.avora-fechamento-palavra.trocado .avora-palavra-avora {
    opacity: 1;
    filter: blur(0);
}

.avora-fechamento-titulo {
    margin-top: 30px;
    font-size: clamp(24px, 3.2vw, 38px);
    max-width: 620px;
    line-height: 1.3;
}

.avora-fechamento .avora-cta-grupo {
    margin-top: 36px;
}


/* =========================================
   RODAPÉ
========================================= */

.avora-rodape {
    padding: clamp(40px, 6vw, 60px) clamp(20px, 5vw, 60px) 40px;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.avora-rodape-topo {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
}

.avora-rodape-topo nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avora-rodape-titulo {
    color: var(--texto-secundario);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.avora-rodape-topo nav a {
    color: var(--texto-secundario);
    font-size: 14px;
    text-decoration: none;
    transition: 0.2s;
}

.avora-rodape-topo nav a:hover {
    color: var(--texto);
}

.avora-rodape-aviso {
    max-width: 1180px;
    margin: 32px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 900px) {

    .avora-fluxo {
        grid-template-columns: 1fr;
    }

    .avora-cenarios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 640px) {

    .avora-topo {
        padding: 14px 18px;
    }

    .avora-busca-grande input {
        font-size: 15px;
        padding: 17px 18px 17px 48px;
    }

    .avora-cenarios-grid {
        grid-template-columns: 1fr;
    }

    .avora-rodape-topo {
        flex-direction: column;
        gap: 24px;
    }

}


/* =========================================
   PÁGINA DE PLANOS
========================================= */
/* Reaproveita .avora-ativo-pagina/.avora-ativo-voltar, .avora-eyebrow,
   .avora-headline/.avora-subheadline, .botao-principal/.avora-cta-principal
   e .aviso-simulacao — só o grid de dois cards e o conteúdo interno
   deles são específicos desta página. */

.avora-planos-intro {
    max-width: 640px;
    margin-bottom: 40px;
}

.avora-planos-intro .avora-headline {
    margin-top: 10px;
    font-size: clamp(28px, 4vw, 40px);
}

.avora-planos-intro .avora-subheadline {
    margin-top: 14px;
}

.avora-planos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
}

.avora-plano-card {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 36px);
    border-radius: 20px;
    border: 1px solid var(--borda);
    background: linear-gradient(145deg, rgba(14, 23, 40, 0.9), rgba(7, 13, 25, 0.94));
}

.avora-plano-card-pro {
    border-color: rgba(240, 180, 92, 0.35);
    background: linear-gradient(145deg, rgba(38, 28, 10, 0.55), rgba(7, 13, 25, 0.94));
}

.avora-plano-card-cabecalho {
    margin-bottom: 20px;
}

.avora-plano-descricao {
    margin-top: 10px;
    color: var(--texto-secundario);
    font-size: 14.5px;
    line-height: 1.5;
}

.avora-plano-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.avora-plano-lista li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--texto);
}

.avora-plano-lista li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--verde);
    font-weight: 700;
}

.avora-plano-card-pro .avora-plano-lista li::before {
    color: #f0b45c;
}

.avora-plano-preco {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 18px;
    margin-bottom: 18px;
    border-top: 1px solid var(--borda);
}

.avora-plano-preco strong {
    font-size: 28px;
}

.avora-plano-preco span {
    color: var(--texto-secundario);
    font-size: 12.5px;
}

.avora-plano-cta {
    display: block;
    text-align: center;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.avora-plano-cta-pro {
    background: #f0b45c;
    color: #1a1206;
}

.avora-plano-atual-tag {
    display: block;
    text-align: center;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.08);
    color: var(--verde);
    font-size: 13px;
    font-weight: 700;
}

.avora-plano-atual-tag-pro {
    border-color: rgba(240, 180, 92, 0.35);
    background: rgba(240, 180, 92, 0.08);
    color: #f0b45c;
}

.avora-plano-nota-secundaria {
    display: block;
    text-align: center;
    font-size: 12.5px;
    color: var(--texto-secundario);
    padding: 12px 0;
}

.avora-plano-em-breve {
    margin-top: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--texto-secundario);
}

.avora-plano-mensagem-interesse {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(240, 180, 92, 0.08);
    border: 1px solid rgba(240, 180, 92, 0.25);
    color: var(--texto);
    font-size: 13px;
    line-height: 1.5;
}

.avora-planos-aviso {
    max-width: 640px;
    margin-top: 40px;
}

.avora-assinatura-pro {
    margin-top: 14px;
}

.avora-form-assinatura-pro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avora-form-assinatura-pro label {
    font-size: 12.5px;
    color: var(--texto-secundario);
}

.avora-form-assinatura-pro input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, 0.03);
    color: var(--texto);
    font-family: inherit;
    font-size: 14px;
}

.avora-form-erro {
    color: #f87171;
    font-size: 12.5px;
}

.avora-assinatura-pendente {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
    color: var(--texto);
}

.avora-pix-qrcode {
    width: 160px;
    height: 160px;
    align-self: center;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}

/* =========================================
   SELEÇÃO PIX / CARTÃO (checkout do Avora Pro)
========================================= */
/* Só o essencial deste bloco — não altera nada fora dele (ver pedido:
   nenhuma alteração global de CSS). O conteúdo do próprio Pix/Cartão
   (QR code, formulário de cartão) nunca aparece aqui: a Avora só
   redireciona para a página hospedada pela Stripe (ver public/planos.js). */

.avora-metodo-preco {
    font-size: 20px;
    font-weight: 700;
    color: var(--texto);
}

.avora-metodo-opcoes {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    max-width: 100%;
}

.avora-metodo-opcoes legend {
    padding: 0;
    margin-bottom: 2px;
    font-size: 12.5px;
    color: var(--texto-secundario);
}

.avora-metodo-opcao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: 0.2s;
}

.avora-metodo-opcao:has(input:checked) {
    border-color: rgba(0, 194, 255, 0.5);
    background: rgba(0, 194, 255, 0.06);
}

.avora-metodo-opcao input {
    margin-top: 3px;
    accent-color: #00c2ff;
    flex-shrink: 0;
}

.avora-metodo-opcao span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.avora-metodo-opcao strong {
    font-size: 14px;
    color: var(--texto);
}

.avora-metodo-opcao small {
    font-size: 12px;
    color: var(--texto-secundario);
    line-height: 1.4;
}

/* .botao-secundario-link (style.css, compartilhada por toda a Avora)
   nunca zera o estilo nativo de <button> — normalmente inofensivo
   porque é usada em contextos pequenos, mas aqui, ao lado do botão
   "Continuar" cheio, a caixa branca padrão do navegador ficava visível.
   Reset escopado só a este botão, não à classe compartilhada. */
.avora-assinatura-pendente #botao-cancelar-pagamento {
    background: none;
    border: none;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 760px) {

    .avora-planos-grid {
        grid-template-columns: 1fr;
    }

    /* Alvo de toque maior no celular, sem tocar em .botao-principal
       (classe compartilhada por toda a Avora) — escopado só ao
       checkout do Pro. */
    .avora-assinatura-pendente #botao-confirmar-pagamento,
    .avora-assinatura-pendente #botao-cancelar-pagamento {
        padding: 14px 16px;
        font-size: 15px;
    }

    .avora-metodo-opcao {
        padding: 14px;
    }

}


/* =========================================
   MERCADO (public/mercado.html — pós-login, universo completo)
========================================= */
/* #mercado-mostrar-mais: a lista completa passa de 2.000 ativos — ver
   comentário em public/mercado.js. Estilo de botão pill (mesma
   linguagem visual de .avora-ativo-periodo), não link discreto, porque
   é a ação principal pra continuar vendo a lista. */

#mercado-mostrar-mais {
    display: block;
    margin: 16px auto 28px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.7);
    color: var(--texto);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

#mercado-mostrar-mais:hover {
    border-color: rgba(0, 194, 255, 0.5);
}

/* .app-container (style.css) tem max-width:1100px — apertado demais
   pra duas colunas lado a lado (relatado: "muito junto"). Escopado a
   .pagina-mercado só: as outras páginas internas (Dashboard, Carteira
   etc.) continuam com os 1100px de sempre. */
body.pagina-mercado .app-container {
    max-width: 1440px;
}

/* Duas colunas: ações à esquerda, comparação à direita — pedido
   explícito. 1.6fr/1fr porque a lista de cotações precisa de mais
   espaço horizontal que os cards de comparação. Gap bem maior (56px)
   pra espalhar de verdade, não só encostar os painéis. Empilha em 1
   coluna abaixo de 980px (mesmo ponto de quebra do menu mobile). */
.mercado-colunas {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: start;
}

.mercado-coluna-esquerda,
.mercado-coluna-direita {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0; /* impede que a lista/gráfico estourem a coluna */
}

.mercado-coluna-direita {
    position: sticky;
    top: 20px;
}

@media (max-width: 980px) {

    .mercado-colunas {
        grid-template-columns: 1fr;
    }

    .mercado-coluna-direita {
        position: static;
    }

}

/* .mercado-painel: cada bloco (busca, em alta, lista, comparar) dentro
   de .painel — o MESMO fundo/borda do Dashboard (style.css), não os
   componentes de avora.css (landing) usados antes. É a correção do
   "tom mais claro" relatado: .avora-cotacao-linha (rgba(9,19,34,0.55))
   e .avora-preview-card ficavam mais transparentes que .painel/
   .card-resultado (rgba(...,0.7-0.94)) — aqui as linhas/cards são
   escurecidas pra bater exatamente com o Dashboard. */
.mercado-painel .campo-autocomplete input {
    margin: 0;
}

.mercado-grid-destaques {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mercado-card-destaque {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, border-color 0.2s;
}

.mercado-card-destaque:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 194, 255, 0.35);
}

.mercado-card-destaque h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.mercado-card-destaque .avora-destaque-preco {
    margin-top: 10px;
}

/* Escopado a .pagina-mercado (não global): cotacoes.html continua com
   o tom mais claro de sempre — só o Mercado pós-login precisa bater
   exatamente com o Dashboard. */
body.pagina-mercado .avora-cotacao-linha {
    background: rgba(6, 13, 25, 0.7);
}


/* =========================================
   COMPARAR ATIVOS (dentro de public/mercado.html — Avora Pro)
========================================= */
/* Escopado a .comparar-* de propósito — não altera nada global. Cores
   das séries vêm de public/comparar.js (CORES_SERIE), aplicadas via a
   variável --comparar-cor-slot em cada linha/marcador, nunca fixas
   aqui — paleta validada pelo skill de dataviz para até 3 séries. */

.comparar-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.comparar-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.6);
}

.comparar-slot-marcador {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--comparar-cor-slot, #64748b);
}

.comparar-slot-ticker {
    font-weight: 700;
    color: var(--texto);
}

.comparar-slot-nome {
    color: var(--texto-secundario);
    font-size: 13px;
    flex: 1;
}

.comparar-slot-remover {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--texto-secundario);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
}

.comparar-slot-remover:hover {
    color: #f87171;
}

.comparar-slot-campo {
    flex: 1;
    position: relative;
}

.comparar-slot-campo input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, 0.03);
    color: var(--texto);
    font-family: inherit;
    font-size: 14px;
}

.comparar-adicionar {
    display: inline-block;
    margin-bottom: 24px;
}

/* Botão "+ Adicionar ativo" — antes era .botao-secundario-link (link de
   texto puro, sem cor nem borda: "sem aparência real do site",
   relatado). Agora é um botão de verdade, borda tracejada (convenção
   comum pra "adicionar item"), preenche com o azul da marca no hover —
   mesma cor de destaque usada em botão-principal/avora-ativo-periodo. */
.comparar-botao-adicionar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1.5px dashed rgba(0, 194, 255, 0.4);
    background: rgba(0, 194, 255, 0.05);
    color: var(--azul);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.comparar-botao-adicionar:hover {
    border-color: var(--azul);
    background: rgba(0, 194, 255, 0.1);
}

.comparar-botao-adicionar-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 194, 255, 0.15);
    font-size: 13px;
    line-height: 1;
}

.comparar-bloco-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.comparar-bloco-titulo .titulo-secao {
    margin-bottom: 0;
}

.comparar-bloco-cenarios {
    margin-top: 32px;
}

.comparar-nota-grafico {
    margin-top: -10px;
}

.comparar-grafico-container {
    position: relative;
    height: clamp(260px, 38vh, 380px);
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--borda);
    background: linear-gradient(145deg, rgba(14, 23, 40, 0.9), rgba(7, 13, 25, 0.94));
    margin-bottom: 20px;
}

/* Tela cheia (Fullscreen API, comparar.js chama requestFullscreen()
   neste mesmo elemento) — sem isto o navegador mostraria fundo branco
   padrão atrás do gráfico. :fullscreen precisa do fundo SÓLIDO (não a
   mesma cor translúcida de sempre, que dependia do body por trás). */
.comparar-grafico-container:fullscreen {
    height: 100vh;
    max-height: 100vh;
    padding: 32px clamp(16px, 5vw, 64px);
    border-radius: 0;
    background: #0b1220;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.comparar-grafico-container:fullscreen canvas {
    max-height: calc(100vh - 64px);
}

/* Botão "Comparar" — fluxo pedido explicitamente: escolher os ativos
   primeiro, resultado só aparece depois deste clique (nunca sozinho a
   cada ativo adicionado, ver public/mercado.js#aoSlotsAlterados). */
.comparar-botao-executar {
    width: 100%;
    margin-bottom: 24px;
}

.comparar-botao-executar:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* =========================================
   MODAL DE RESULTADO (Comparar ativos)
========================================= */
/* Pedido explícito: o resultado NÃO fica espremido na coluna direita —
   abre em tela cheia (overlay cobrindo a página inteira) ao clicar
   "Comparar". Fecha pelo X, clique fora do conteúdo, ou Esc (JS). */

.comparar-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: clamp(20px, 4vh, 56px) clamp(16px, 4vw, 40px);
    background: rgba(3, 8, 16, 0.82);
    backdrop-filter: blur(4px);
}

.comparar-modal-conteudo {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: clamp(24px, 4vw, 44px);
    border-radius: 22px;
    border: 1px solid var(--borda);
    background: linear-gradient(145deg, rgba(14, 23, 40, 0.98), rgba(7, 13, 25, 0.99));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.comparar-modal-fechar {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.7);
    color: var(--texto-secundario);
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s;
}

.comparar-modal-fechar:hover {
    color: var(--texto);
    border-color: rgba(0, 194, 255, 0.5);
}

/* Gráfico bem maior dentro do modal — tem espaço de sobra, diferente
   da coluna estreita de antes. */
.comparar-grafico-container-modal {
    height: clamp(320px, 52vh, 520px);
}

@media (max-width: 700px) {

    .comparar-modal {
        padding: 0;
    }

    .comparar-modal-conteudo {
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
    }

}

.comparar-grafico-expandir {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.8);
    color: var(--texto-secundario);
    cursor: pointer;
    transition: 0.2s;
}

.comparar-grafico-expandir:hover {
    color: var(--texto);
    border-color: rgba(0, 194, 255, 0.5);
}

.comparar-grafico-container:fullscreen .comparar-grafico-expandir {
    top: 20px;
    right: clamp(16px, 5vw, 64px);
}

.comparar-grafico-container .avora-secao-intro {
    margin: 0;
    text-align: center;
    max-width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.comparar-tabela {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-x: auto;
}

.comparar-tabela-linha {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: rgba(6, 13, 25, 0.5);
    font-size: 13.5px;
    white-space: nowrap;
}

.comparar-tabela-cabecalho {
    border: none;
    background: none;
    color: var(--texto-secundario);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 14px;
}

.comparar-tabela-identidade {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--texto);
}

.comparar-tabela-valor {
    color: var(--texto);
}

.comparar-tabela-rodape {
    margin: 10px 0 0;
    white-space: normal;
}

@media (max-width: 760px) {

    .comparar-tabela-linha {
        grid-template-columns: 1fr;
        gap: 4px;
        white-space: normal;
    }

    .comparar-tabela-cabecalho {
        display: none;
    }

    .comparar-tabela-valor::before {
        content: attr(data-rotulo) ": ";
        color: var(--texto-secundario);
    }

}


/* =========================================
   MOVIMENTO REDUZIDO
========================================= */

@media (prefers-reduced-motion: reduce) {

    .avora-fechamento-palavra .avora-palavra-agora,
    .avora-fechamento-palavra .avora-palavra-avora,
    .avora-preview-card {
        transition-duration: 0.01ms !important;
    }

}