/* ========================================
   DEMO CELULAR/DESKTOP — CÓPIA DA PLATAFORMA

   Origem: Dashboard Django / static/css/mobile/distribuicao/layout.css

   NÃO editar à mão. Para atualizar quando a plataforma mudar,
   copie o arquivo de origem por cima deste e recoloque este cabeçalho.
   ======================================== */

/* ========================================
   MOBILE / ANALISE GRAFICA - LAYOUT

   Estilos exclusivos da tela de graficos. A fundacao (variaveis, corpo,
   cabecalho e conteudo) fica em static/css/mobile/base.css.
   ======================================== */

/* ----- Cards de resumo -----
   Posicao total da carteira (igual ao Painel de Investimento do
   desktop). Grade 2x2 compacta para caber sem rolar a tela. */

.app-cards-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.app-card-resumo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    /* Fundo mais intenso na cor de destaque — precisa saltar aos olhos
       diante dos cards de filtro e dos blocos de grafico, que usam
       --app-cartao liso. */
    background: rgba(0, 206, 209, 0.16);
    border: 1px solid rgba(0, 206, 209, 0.5);
    border-radius: 12px;
}

.app-card-resumo-rotulo {
    font-size: 11px;
    color: var(--app-texto-fraco);
}

.app-card-resumo-valor {
    font-size: 16px;
    font-weight: 700;
    color: var(--app-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-card-resumo-positivo {
    color: #10b981;
}

.app-card-resumo-negativo {
    color: #ef4444;
}

/* ----- Filtros -----
   Sempre visiveis no topo. O painel que abria por baixo (etapa 15) foi
   revertido: com tres filtros so, nao compensava. */

.app-filtros {
    display: flex;
    flex-direction: column;
    gap: var(--app-margem);
}

.app-filtros-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-campo {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    /* Azul-indico — mesma cor usada no gradiente do grafico de barras.
       Vivo, mas diferente do turquesa dos cards e do verde/vermelho de
       lucro. */
    border: 1px solid rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.14);
    color: var(--app-texto);
    font-size: 13px;
}

/* A lista que abre ao tocar no <select> e desenhada pelo sistema, nao
   pelo nosso CSS geral — precisa de cor propria, opaca (transparencia
   nao funciona nessa lista), senao o Android mostra fundo branco com
   texto claro em cima, ilegivel. */
.app-campo option {
    background: #16233d;
    color: var(--app-texto);
}

.app-campo-botao {
    font-weight: 600;
    color: var(--app-destaque);
}

/* ----- Blocos de grafico ----- */

.app-bloco {
    /* Mesmo azul-indico dos filtros. O numero verde/vermelho de
       lucro/prejuizo, dentro do bloco de Evolucao, nao faz parte disto —
       continua com sua propria cor (.app-resumo-positivo/-negativo). */
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.45);
    border-radius: 14px;
    padding: 12px 8px 8px;
}

.app-bloco-titulo {
    margin: 0 4px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--app-texto);
}

/* Numero em destaque acima do grafico de lucro/prejuizo. No celular o
   usuario quer o valor antes do desenho. */
.app-resumo {
    margin: 0 4px 6px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--app-texto);
}

.app-resumo-positivo {
    color: #10b981;
}

.app-resumo-negativo {
    color: #ef4444;
}

.app-grafico {
    width: 100%;
    height: 260px;
}

.app-grafico-rosca {
    height: 240px;
}