/*
============================================================
 GESTÃO DE SÓCIOS — FLUID RESPONSIVE V2
============================================================

 Objetivo:
 - adaptar a interface à dimensão física/visual do viewport
 - melhorar monitores grandes Full HD / QHD / 4K
 - manter portátil, tablet e telemóvel
 - NÃO alterar impressão, flyers, PNG ou PDF

============================================================
*/


@media screen {

    :root {
        /*
         * Espaçamento lateral fluido.
         */
        --app-gutter:
            clamp(
                12px,
                1.8vw,
                34px
            );

        /*
         * Largura útil da aplicação.
         *
         * 1440px -> mínimo confortável
         * 1920px -> cerca de 1460px
         * QHD/4K -> máximo 1760px
         */
        --app-content-max:
            clamp(
                1280px,
                76vw,
                1760px
            );
    }


    html {
        /*
         * Base normal.
         * Crescimento real acontece apenas
         * quando existe espaço suficiente.
         */
        font-size: 16px;

        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }


    body {
        min-width: 0;
        max-width: 100%;

        text-rendering: optimizeLegibility;

        -webkit-font-smoothing:
            antialiased;

        -moz-osx-font-smoothing:
            grayscale;
    }


    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }


    img,
    video,
    svg {
        height: auto;
    }
}


/*
============================================================
 DESKTOP GRANDE
============================================================
*/

@media screen and (min-width: 1440px) {

    html {
        /*
         * 1440 -> 16px
         * 1920 -> aproximadamente 17.3px
         * 2K/4K -> máximo 18px
         *
         * Isto NÃO é browser zoom.
         * É escala tipográfica responsiva.
         */
        font-size:
            clamp(
                16px,
                0.90vw,
                18px
            );
    }


    /*
     * Containers administrativos mais comuns.
     *
     * :where() dá especificidade zero para não
     * destruir CSS específico das páginas.
     */
    :where(
        .container,
        .pagina,
        .page,
        .conteudo,
        .content,
        .main,
        main,
        .wrapper,
        .page-wrapper,
        .page-content,
        .dashboard-content
    ) {
        width:
            min(
                calc(
                    100% -
                    (
                        var(--app-gutter) * 2
                    )
                ),
                var(--app-content-max)
            );

        max-width:
            var(--app-content-max);

        margin-left: auto;
        margin-right: auto;
    }


    /*
     * Títulos proporcionais.
     *
     * Apenas damos limites de tamanho;
     * estilos específicos continuam válidos.
     */
    :where(h1) {
        font-size:
            clamp(
                1.65rem,
                1.65vw,
                2.15rem
            );
    }


    :where(h2) {
        font-size:
            clamp(
                1.30rem,
                1.28vw,
                1.70rem
            );
    }


    :where(h3) {
        font-size:
            clamp(
                1.05rem,
                1vw,
                1.35rem
            );
    }


    /*
     * Formulários.
     *
     * Evita controlos minúsculos num monitor
     * fisicamente grande.
     */
    :where(
        input,
        select,
        textarea,
        button
    ) {
        line-height: 1.35;
    }


    /*
     * Cartões e painéis ganham espaçamento
     * proporcional sem crescer exageradamente.
     */
    :where(
        .card,
        .painel,
        .panel
    ) {
        --app-card-fluid-gap:
            clamp(
                14px,
                1.1vw,
                22px
            );
    }


    /*
     * Evita imagens comuns a serem esticadas
     * apenas porque existe muito espaço.
     *
     * Não usamos width:100%, portanto uma imagem
     * pequena não é artificialmente ampliada.
     */
    :where(
        img,
        video
    ) {
        max-width: 100%;
    }
}


/*
============================================================
 FULL HD GRANDE — 1920 E SEMELHANTES
============================================================
*/

@media screen
and (min-width: 1680px)
and (max-width: 2199px) {

    /*
     * É precisamente a zona de um monitor
     * 27" 1920x1080.
     */

    body {
        font-size: 1rem;
    }


    :where(
        .container,
        .pagina,
        .page,
        .conteudo,
        .content,
        .main,
        main,
        .wrapper,
        .page-wrapper,
        .page-content,
        .dashboard-content
    ) {
        /*
         * Não deixar a interface espalhar-se
         * pelo monitor inteiro.
         */
        max-width:
            min(
                76vw,
                1500px
            );
    }
}


/*
============================================================
 QHD / 4K
============================================================
*/

@media screen and (min-width: 2200px) {

    html {
        font-size: 18px;
    }


    :where(
        .container,
        .pagina,
        .page,
        .conteudo,
        .content,
        .main,
        main,
        .wrapper,
        .page-wrapper,
        .page-content,
        .dashboard-content
    ) {
        max-width: 1760px;
    }
}


/*
============================================================
 PORTÁTIL
============================================================
*/

@media screen
and (min-width: 901px)
and (max-width: 1439px) {

    html {
        font-size: 16px;
    }

}


/*
============================================================
 TABLET
============================================================
*/

@media screen and (max-width: 900px) {

    html {
        font-size: 16px;
    }


    :where(
        .container,
        .pagina,
        .page,
        .conteudo,
        .content,
        .main,
        main,
        .wrapper,
        .page-wrapper,
        .page-content,
        .dashboard-content
    ) {
        width: 100%;
        max-width: 100%;
    }
}


/*
============================================================
 TELEMÓVEL
============================================================
*/

@media screen and (max-width: 640px) {

    html {
        font-size: 16px;
    }


    body {
        min-width: 0;
    }

}


/*
============================================================
 PROTEÇÃO DE OVERFLOW
============================================================
*/

@media screen {

    :where(
        .container,
        .pagina,
        .page,
        .conteudo,
        .content,
        .main,
        main,
        .wrapper,
        .page-wrapper,
        .page-content,
        .dashboard-content,
        .card,
        .painel,
        .panel
    ) {
        min-width: 0;
    }


    :where(
        .grid,
        .cards
    ) > * {
        min-width: 0;
    }

}