/* ==========================================================================
   EconoRadar - layout
   ==========================================================================
   Estrutura da pagina: cabecalho, barra lateral recolhivel no desktop,
   barra inferior de 5 itens no mobile, e o grid de conteudo.

   Mobile-first: o padrao e a tela estreita, e cada @media acrescenta.

   NOTA SOBRE BREAKPOINT: @media nao aceita custom property, por limitacao do
   proprio CSS. Os quatro valores de referencia ficam declarados so aqui:

       360px   telefone pequeno   (base, sem media query)
       768px   tablet             --de-tablet
      1024px   desktop            --de-desktop
      1280px   desktop largo      --de-desktop-largo
      1920px   monitor grande     --de-monitor-grande
   ========================================================================== */

/* --------------------------------------------------------------------------
   Casca da aplicacao
   -------------------------------------------------------------------------- */

.casca-app {
    /* No telefone nao ha grade: lateral e barra inferior saem do fluxo
       (display:none / position:fixed). Grid com filhos extras cria trilha
       implicita e a pagina ganha um vazio rolavel a direita. */
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.conteudo-app {
    grid-area: conteudo;
    width: 100%;
    max-width: 100%;
    min-width: 0; /* impede que tabela larga estufe a casca */
    padding-bottom: calc(var(--altura-barra-inferior) + var(--esp-6));
}

.conteudo-app > main {
    min-width: 0;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Cabecalho
   -------------------------------------------------------------------------- */

.cabecalho-app {
    position: sticky;
    top: 0;
    z-index: var(--z-cabecalho);
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    width: 100%;
    max-width: 100%;
    height: var(--altura-cabecalho);
    padding: 0 var(--esp-4);
    border-bottom: var(--borda-fina) solid var(--cor-borda);
    background-color: color-mix(in srgb, var(--cor-fundo) 88%, transparent);
    backdrop-filter: blur(var(--desfoque-cabecalho));
}

/* No telefone nao ha barra lateral: o botao de recolher so existe do tablet para cima. */
.cabecalho-app [data-recolher-lateral] {
    display: none;
}

.cabecalho-app__acoes .botao--secundario span {
    display: none;
}

.cabecalho-app__marca {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    flex-shrink: 0;
    color: var(--cor-texto);
    font-weight: var(--peso-semi);
    font-size: var(--fonte-md);
    letter-spacing: var(--espaco-letra-titulo);
}

.cabecalho-app__marca:hover {
    color: var(--cor-texto);
    text-decoration: none;
}

.cabecalho-app__logo {
    width: var(--esp-6);
    height: var(--esp-6);
    color: var(--cor-accent);
    flex-shrink: 0;
}

.cabecalho-app__marca-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: var(--altura-linha-titulo);
}

.cabecalho-app__marca-texto strong {
    font-weight: var(--peso-semi);
}

.cabecalho-app__assinatura {
    display: none;
    color: var(--cor-texto-terciario);
    font-size: var(--fonte-xs);
    font-weight: var(--peso-normal);
    letter-spacing: var(--espaco-letra-base);
    line-height: var(--altura-linha-apertada);
    white-space: nowrap;
}

.cabecalho-app__centro {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.cabecalho-app__centro .busca {
    width: 100%;
    max-width: var(--largura-maxima-busca);
}


.cabecalho-app__acoes {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    flex-shrink: 0;
}

.cabecalho-app__acoes form {
    display: inline-flex;
    margin: 0;
}

.cabecalho-app__acoes .botao--secundario {
    min-width: var(--alvo-toque-minimo);
    min-height: var(--alvo-toque-minimo);
}

.cabecalho-app__acoes .botao[aria-current='page'] {
    border-color: var(--cor-accent-borda);
    color: var(--cor-accent-texto);
}

/* --------------------------------------------------------------------------
   Barra lateral - somente do tablet para cima
   -------------------------------------------------------------------------- */

.barra-lateral {
    display: none;
    grid-area: lateral;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-barra-lateral);
    flex-direction: column;
    gap: var(--esp-1);
    padding: var(--esp-4) var(--esp-3);
    border-right: var(--borda-fina) solid var(--cor-borda);
    background-color: var(--cor-superficie);
    overflow-y: auto;
}

.barra-lateral__grupo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
}

.barra-lateral__titulo-grupo {
    padding: var(--esp-4) var(--esp-3) var(--esp-2);
    color: var(--cor-texto-terciario);
    font-size: var(--fonte-2xs);
    font-weight: var(--peso-semi);
    letter-spacing: var(--espaco-letra-rotulo);
    text-transform: uppercase;
    white-space: nowrap;
}

.barra-lateral__item {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    min-height: var(--altura-controle);
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--raio-md);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-base);
    font-weight: var(--peso-medio);
    white-space: nowrap;
    transition:
        background-color var(--transicao-rapida) var(--curva-padrao),
        color var(--transicao-rapida) var(--curva-padrao);
}

.barra-lateral__item:hover {
    background-color: var(--cor-superficie-elevada);
    color: var(--cor-texto);
    text-decoration: none;
}

.barra-lateral__item[aria-current='page'] {
    background-color: var(--cor-accent-suave);
    color: var(--cor-accent-texto);
}

.barra-lateral__icone {
    width: var(--esp-5);
    height: var(--esp-5);
    flex-shrink: 0;
}

.barra-lateral__rodape {
    margin-top: auto;
    padding-top: var(--esp-4);
    border-top: var(--borda-fina) solid var(--cor-borda);
}

/* Estado recolhido: so o icone. O rotulo continua no DOM, para o leitor de
   tela, mas sai do fluxo visual. */
.casca-app[data-lateral='recolhida'] .barra-lateral__rotulo,
.casca-app[data-lateral='recolhida'] .barra-lateral__titulo-grupo {
    display: none;
}

.casca-app[data-lateral='recolhida'] .barra-lateral__item {
    justify-content: center;
    padding-inline: var(--esp-2);
}

/* --------------------------------------------------------------------------
   Barra inferior - somente no mobile, exatamente 5 itens
   -------------------------------------------------------------------------- */

.barra-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-barra-inferior);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: auto;
    max-width: 100%;
    height: var(--altura-barra-inferior);
    /* Respeita a area segura do iPhone. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-top: var(--borda-fina) solid var(--cor-borda);
    background-color: var(--cor-superficie);
}

.barra-inferior__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-1);
    min-width: 0;
    min-height: var(--alvo-toque-minimo);
    color: var(--cor-texto-terciario);
    font-size: var(--fonte-2xs);
    font-weight: var(--peso-medio);
    transition: color var(--transicao-rapida) var(--curva-padrao);
}

.barra-inferior__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-inferior__item:hover,
.barra-inferior__item:active {
    color: var(--cor-texto);
    text-decoration: none;
}

.barra-inferior__item[aria-current='page'] {
    color: var(--cor-accent-texto);
}

.barra-inferior__icone {
    width: var(--esp-5);
    height: var(--esp-5);
}

/* --------------------------------------------------------------------------
   Rodape
   -------------------------------------------------------------------------- */

.rodape-app {
    margin-top: var(--esp-12);
    padding-block: var(--esp-6) var(--esp-8);
    border-top: var(--borda-fina) solid var(--cor-borda);
    background-color: var(--cor-superficie);
}

.rodape-app__disclaimer {
    margin-bottom: var(--esp-6);
}

.rodape-app__linhas {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
}

.rodape-app__marca {
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-sm);
}

.rodape-app__marca strong {
    color: var(--cor-texto);
}

.rodape-app__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-4);
    font-size: var(--fonte-sm);
}

.rodape-app__links a {
    color: var(--cor-texto-secundario);
}

.rodape-app__links a:hover {
    color: var(--cor-accent-texto);
}

.rodape-app__fontes {
    max-width: var(--largura-maxima-texto);
    color: var(--cor-texto-terciario);
    font-size: var(--fonte-xs);
    line-height: var(--altura-linha-base);
}

/* --------------------------------------------------------------------------
   Container e secao
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--largura-maxima-conteudo);
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--esp-4);
}

.container--estreito {
    max-width: var(--largura-maxima-estreita);
}

.container--texto {
    max-width: var(--largura-maxima-texto);
}

.tabela-envolvente.mercados-tabela {
    display: none;
}

.secao {
    padding-block: var(--esp-8);
}

.secao--compacta {
    padding-block: var(--esp-6);
}

.secao__cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-bottom: var(--esp-5);
}

.secao__titulo {
    font-size: var(--fonte-lg);
}

.secao__descricao {
    margin-top: var(--esp-1);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-sm);
}

.secao__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    margin-top: var(--esp-3);
}


/* --------------------------------------------------------------------------
   Grid de conteudo
   --------------------------------------------------------------------------
   auto-fit com minmax resolve a maioria dos casos sem media query: o card
   reflui sozinho de 1 para 4 colunas conforme o espaco disponivel.
   -------------------------------------------------------------------------- */

.grade {
    display: grid;
    gap: var(--esp-4);
}

.grade--metricas {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--largura-minima-card-metrica)), 1fr));
}

.grade--cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--largura-minima-card)), 1fr));
}

.grade--noticias {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--largura-minima-card-noticia)), 1fr));
}

.grade--duas {
    grid-template-columns: 1fr;
}

.grade--painel {
    grid-template-columns: 1fr;
}

/* Utilitarios de pilha, para nao repetir margin em componente. */
.pilha {
    display: flex;
    flex-direction: column;
}

.pilha--2 { gap: var(--esp-2); }
.pilha--3 { gap: var(--esp-3); }
.pilha--4 { gap: var(--esp-4); }
.pilha--6 { gap: var(--esp-6); }

.linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.linha--2 { gap: var(--esp-2); }
.linha--3 { gap: var(--esp-3); }
.linha--4 { gap: var(--esp-4); }
.linha--entre { justify-content: space-between; }
.linha--fim { justify-content: flex-end; }

/* ==========================================================================
   TABLET - a partir de 768px
   ========================================================================== */

@media (min-width: 768px) {
    .casca-app {
        display: grid;
        grid-template-columns: var(--largura-barra-lateral) 1fr;
        grid-template-areas: 'lateral conteudo';
    }

    .casca-app[data-lateral='recolhida'] {
        grid-template-columns: var(--largura-barra-lateral-recolhida) 1fr;
    }

    .barra-lateral {
        display: flex;
    }

    .cabecalho-app [data-recolher-lateral] {
        display: inline-flex;
    }

    .cabecalho-app__acoes .botao--secundario span {
        display: inline;
    }

    .barra-inferior {
        display: none;
    }

    .conteudo-app {
        padding-bottom: var(--esp-8);
    }

    .cabecalho-app {
        padding-inline: var(--esp-6);
    }

    .container {
        padding-inline: var(--esp-6);
    }

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

    .secao {
        padding-block: var(--esp-10);
    }

    .carrossel-noticia__slide {
        --largura-slide-carrossel: calc((100% - var(--esp-3)) / 2);
    }

    .tabela-envolvente.mercados-tabela {
        display: block;
    }

    .cartao.mercados-lista,
    nav.mercados-ordem {
        display: none;
    }
}

/* ==========================================================================
   DESKTOP - a partir de 1024px
   ========================================================================== */

@media (min-width: 1024px) {
    .cabecalho-app__assinatura {
        display: block;
    }

    .grade--painel {
        grid-template-columns: 2fr 1fr;
    }
}

/* ==========================================================================
   DESKTOP LARGO - a partir de 1280px
   ========================================================================== */

@media (min-width: 1280px) {
    .container {
        padding-inline: var(--esp-8);
    }
}

/* ==========================================================================
   MONITOR GRANDE - a partir de 1920px
   ==========================================================================
   O conteudo nao cresce indefinidamente: a largura maxima segura a linha de
   leitura e o respiro lateral aumenta.
   ========================================================================== */

@media (min-width: 1920px) {
    .secao {
        padding-block: var(--esp-12);
    }

    .grade--metricas {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--largura-minima-card-metrica-larga)), 1fr));
    }
}