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

   Origem: Dashboard Django / static/css/mobile/carteira/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 / CARTEIRA - LAYOUT

   Estilos da aba Carteira. A fundacao (variaveis, corpo, cabecalho e
   conteudo) fica em static/css/mobile/base.css.
   ======================================== */

/* ----- Botao flutuante de registrar -----
   No desktop este botao fica no topo da tela. No celular o topo e a area
   mais dificil de alcancar com o polegar, entao ele vira um botao
   redondo flutuante no canto inferior direito, logo acima da barra de
   abas — padrao consagrado em aplicativo.

   O verde neon e o mesmo do desktop (.btn-neon-registrar em
   static/css/componentes/botoes.css), inclusive o filter que da o brilho. */

.app-botao-registrar {
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.22);
    backdrop-filter: blur(20px);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 0 10px rgba(34, 197, 94, 0.35),
        0 0 20px rgba(34, 197, 94, 0.22),
        0 0 35px rgba(34, 197, 94, 0.11),
        0 4px 8px rgba(34, 197, 94, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    /* Sem este filter o botao fica visivelmente mais escuro e sem o
       neon — e ele que clareia, satura e acrescenta o brilho externo. */
    filter: brightness(1.15) saturate(1.25) drop-shadow(0 0 6px rgba(34, 197, 94, 0.5));
}

.app-botao-registrar:active {
    transform: scale(0.94);
}

.app-botao-registrar svg {
    width: 26px;
    height: 26px;
}

/* ----- Cards de resumo -----
   Seguem os filtros do topo (carteira + tipo) — diferente da aba
   Distribuicao, onde os cards mostram sempre o total geral. */

.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;
    background: rgba(0, 206, 209, 0.16);
    border: 1px solid rgba(0, 206, 209, 0.5);
    border-radius: 12px;
}

/* Numero de Transacoes ocupa a linha toda, ja que os outros dois cards
   preenchem a primeira linha da grade 2 colunas. */
.app-card-resumo-largo {
    grid-column: 1 / -1;
}

.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;
}

/* ----- Filtros ----- */

.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;
}

/* Os dois filtros do topo (Carteira e Autocustodia/Corretora) usam o
   turquesa dos cards de resumo, logo abaixo deles. O grupo de baixo
   (Criptomoeda, Origem, Tipo de Transacao, Limpar) fica no azul. */
.app-filtros-campos-topo .app-campo {
    border-color: rgba(0, 206, 209, 0.5);
    background: rgba(0, 206, 209, 0.16);
}

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

/* 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);
}

/* ----- Lista de transacoes -----
   Cards empilhados, nao tabela — nao ha largura para ~10 colunas. */

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

.app-lista-transacoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-transacao {
    padding: 10px 12px;
    /* Mesmo azul-indico dos filtros e dos blocos da Distribuicao. O selo
       verde (Compra) / vermelho (Venda) nao faz parte disto — continua
       com sua propria cor (.app-transacao-compra/-venda). */
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.45);
    border-radius: 12px;
}

.app-transacao-topo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-transacao-cripto {
    font-size: 13px;
    font-weight: 700;
    color: var(--app-texto);
}

.app-transacao-tipo {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.app-transacao-compra {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.app-transacao-venda {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.app-transacao-data {
    margin-left: auto;
    font-size: 12px;
    color: var(--app-texto-fraco);
}

.app-transacao-quantidade {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--app-texto);
}

.app-transacao-rodape {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--app-texto-fraco);
}

.app-lista-vazia {
    margin: 0;
    padding: 20px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--app-texto-fraco);
}