/* ===========================================================================
   Os widgets do Fluxus ERP dentro dos blocos da tela inicial. É só deste projeto (não existe no BASE) e entra
   pelo _views/pagina-extra-cabeca.html, depois do widgets.css.

   O cartão do widgets.css muda com a largura da janela: foi feito para a linha inteira do painel. Na home ele fica
   num bloco que o usuário alarga e encolhe (home.js), e quem manda é o tamanho do bloco:
   - a largura, por consulta ao contêiner (aqui);
   - a altura, pelo widgets-bloco.js: quantas linhas de meses cabem (wg-linhas, wg-mes-fora, wg-cabem) e quando
     nem uma linha cabe e o cartão fica compacto (wg-compacto). O botão de ver todos os meses muda a altura do bloco,
     e o cartão não abre dentro dele (wg-aberto, do widgets.js).
   A régua da home (hm-regua), onde ela mede a altura que o widget pede, segue a largura, mas não o que o script
   decide pela altura: lá o cartão é medido no tamanho normal, com uma linha de meses.
   =========================================================================== */

.pg .hm-bloco-widget > .hm-widget{
    container: wg-bloco / inline-size;
}

/* ---- bloco estreito (três ou quatro colunas no computador): o topo como o do celular, com o detalhe na linha de
        baixo, e o botão de ver todos os meses só com a seta (o texto dele continua para o leitor de tela) ---- */
@container wg-bloco (max-width: 479.98px){
    .pg .hm-bloco-widget .fx-app.wg{
        padding: 14px 14px 16px 14px;
        border-radius: 16px;
    }

    .pg .hm-bloco-widget .wg .wg-topo{
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "icone titulo botao"
            "detalhe detalhe detalhe";
        row-gap: 8px;
        margin-bottom: 12px;
    }

    .pg .hm-bloco-widget .wg .wg-icone{
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 1.1rem;
    }

    .pg .hm-bloco-widget .wg .wg-detalhe{
        margin: 0;
    }

    .pg .hm-bloco-widget .wg .wg-legenda{
        margin-left: 0;
    }

    .pg .hm-bloco-widget .wg .wg-largo{
        display: none;
    }

    .pg .hm-bloco-widget .wg .wg-estreito{
        display: inline;
    }

    .pg .hm-bloco-widget .wg .wg-todos:not(.wg-expande){
        gap: 0;
        padding: 6px 9px;
        font-size: 0;
    }

    .pg .hm-bloco-widget .wg .wg-todos:not(.wg-expande) i{
        font-size: 0.95rem;
    }
}

/* ---- as linhas de meses que cabem na altura do bloco; os outros meses ficam para o botão de ver todos ---- */
.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-linhas .wg-meses{
    grid-auto-rows: auto;
    row-gap: 10px;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg .wg-mes-fora{
    display: none;
}

/* todos os meses já estão à mostra e o bloco está na altura de uma linha: o botão sai */
.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-cabem .wg-todos:not(.wg-expande){
    display: none;
}

/* a régua mede o cartão fechado mesmo quando ele chega aberto (o widgets.js lembra o aberto das telas de app) */
@media (min-width: 768px){
    .pg .hm-bloco-widget.hm-regua .wg.wg-aberto .wg-meses{
        grid-template-rows: auto;
        grid-auto-rows: 0;
        row-gap: 0;
        overflow: hidden;
    }
}

/* ---- compacto: nem uma linha de meses cabe na altura do bloco. O topo fica numa linha só, sem o detalhe, e cada
        mês só com o nome e o número principal (o valor, ou o saldo) ---- */
.pg .hm-bloco-widget:not(.hm-regua) .fx-app.wg.wg-compacto{
    padding: 8px 14px 10px 14px;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-topo{
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icone titulo botao";
    row-gap: 0;
    margin-bottom: 6px;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-detalhe{
    display: none;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-icone{
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 1rem;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-titulo{
    -webkit-line-clamp: 1;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-mes{
    padding: 6px 10px;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-mes > :not(.wg-mes-topo, .wg-valor, .wg-saldo){
    display: none;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-mes-topo{
    min-height: 20px;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-valor{
    margin-top: 2px;
    font-size: 1.25rem;
}

.pg .hm-bloco-widget:not(.hm-regua) .wg.wg-compacto .wg-saldo{
    margin-top: 2px;
    padding-top: 0;
    border-top: 0;
}