/*
=====================================================
 GESTÃO DE SÓCIOS — RESPONSIVO GLOBAL
=====================================================
 Adaptação automática:
 - monitores grandes
 - portáteis
 - tablets
 - telemóveis
=====================================================
*/

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

body {
    max-width: 100%;
    overflow-x: hidden;
}

/* -------------------------------------------------
   CONTEÚDO PRINCIPAL
------------------------------------------------- */

.container,
.pagina,
.page,
.conteudo,
.content,
.main,
main {
    width: min(100%, 1600px);
    margin-left: auto;
    margin-right: auto;
}

/*
 Espaçamento adapta-se automaticamente à largura.
 Não substitui paddings específicos que sejam
 necessários numa página.
*/
.container,
.pagina,
.page {
    padding-left: clamp(12px, 2vw, 30px);
    padding-right: clamp(12px, 2vw, 30px);
}

/* -------------------------------------------------
   ELEMENTOS FLEXÍVEIS
------------------------------------------------- */

.topo,
.topo-pagina,
.cabecalho,
.acoes,
.botoes,
.botoes-area {
    max-width: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

/* -------------------------------------------------
   FORMULÁRIOS
------------------------------------------------- */

input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
}

/* -------------------------------------------------
   TABELAS
------------------------------------------------- */

.table-wrap,
.tabela-wrap,
.table-container,
.tabela-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

/* -------------------------------------------------
   LISTAS COM SCROLL
------------------------------------------------- */

.lista-scroll {
    max-height: calc(100dvh - 330px) !important;
    min-height: 220px;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* -------------------------------------------------
   MONITORES / DESKTOP
------------------------------------------------- */

@media (min-width: 1400px) {

    .container,
    .pagina,
    .page {
        padding-left: clamp(24px, 2vw, 40px);
        padding-right: clamp(24px, 2vw, 40px);
    }

    .lista-scroll {
        max-height: calc(100dvh - 320px) !important;
    }
}

/* -------------------------------------------------
   PORTÁTEIS / ECRÃS MÉDIOS
------------------------------------------------- */

@media (max-width: 1366px) {

    .container,
    .pagina,
    .page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lista-scroll {
        max-height: calc(100dvh - 285px) !important;
    }

    .card,
    .painel,
    .panel {
        padding: clamp(12px, 1.5vw, 20px);
    }
}

/* -------------------------------------------------
   TABLET
------------------------------------------------- */

@media (max-width: 900px) {

    .container,
    .pagina,
    .page {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .topo,
    .topo-pagina,
    .cabecalho {
        gap: 10px;
    }

    .grid {
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(240px, 100%), 1fr)
        ) !important;
    }

    .lista-scroll {
        max-height: calc(100dvh - 260px) !important;
    }
}

/* -------------------------------------------------
   TELEMÓVEL
------------------------------------------------- */

@media (max-width: 640px) {

    body {
        font-size: 14px;
    }

    .container,
    .pagina,
    .page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .topo,
    .topo-pagina,
    .cabecalho {
        flex-wrap: wrap;
    }

    .cabecalho {
        align-items: stretch;
    }

    .acoes,
    .botoes,
    .botoes-area {
        flex-wrap: wrap;
        gap: 8px;
    }

    .acoes > *,
    .botoes > *,
    .botoes-area > * {
        max-width: 100%;
    }

    .grid {
        grid-template-columns: 1fr !important;
    }

    .card,
    .painel,
    .panel {
        border-radius: 10px;
        padding: 12px;
    }

    h1 {
        font-size: clamp(21px, 6vw, 28px);
    }

    h2 {
        font-size: clamp(18px, 5vw, 23px);
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    .lista-scroll {
        max-height: calc(100dvh - 240px) !important;
        min-height: 180px;
    }

    table {
        white-space: nowrap;
    }
}

/* -------------------------------------------------
   TELEMÓVEIS MUITO PEQUENOS
------------------------------------------------- */

@media (max-width: 420px) {

    .container,
    .pagina,
    .page {
        padding-left: 8px;
        padding-right: 8px;
    }

    .topo-dashboard,
    .topo-link {
        font-size: 13px;
    }

    .lista-scroll {
        max-height: calc(100dvh - 220px) !important;
    }
}

/*
=====================================================
 FASE 2 — SCROLL HORIZONTAL LOCAL
=====================================================

Quando o conteúdo de um bloco ultrapassa a largura
disponível, o scroll fica DENTRO desse bloco.

A página inteira continua sem scroll horizontal.
Funciona em desktop, portátil, tablet e telemóvel.
=====================================================
*/

.card,
.painel,
.panel,
.table-wrap,
.tabela-wrap,
.table-container,
.tabela-container {
    max-width: 100%;
}

/*
 Blocos que contenham tabelas passam a controlar
 o próprio overflow horizontal.
*/
.card:has(table),
.painel:has(table),
.panel:has(table),
.table-wrap,
.tabela-wrap,
.table-container,
.tabela-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
}

/*
 Evita que uma tabela larga seja cortada.
*/
.card:has(table) table,
.painel:has(table) table,
.panel:has(table) table,
.table-wrap table,
.tabela-wrap table,
.table-container table,
.tabela-container table {
    width: max-content;
    min-width: 100%;
    max-width: none;
}

/*
 Em dispositivos tácteis deixa um pequeno espaço
 entre o conteúdo e a barra horizontal.
*/
@media (pointer: coarse) {

    .card:has(table),
    .painel:has(table),
    .panel:has(table),
    .table-wrap,
    .tabela-wrap,
    .table-container,
    .tabela-container {
        padding-bottom: 6px;
    }
}

/*
 Em ecrãs estreitos garantimos que células não são
 esmagadas ao ponto de ficarem ilegíveis.
*/
@media (max-width: 900px) {

    .card:has(table) table,
    .painel:has(table) table,
    .panel:has(table) table,
    .table-wrap table,
    .tabela-wrap table,
    .table-container table,
    .tabela-container table {
        white-space: nowrap;
    }
}