/* ==========================================================
   REVALIDALINK — RESPONSIVIDADE FLUIDA
   Base visual de desenvolvimento: 1366 x 768.

   A resolução de referência define espaçamentos e densidade,
   mas o site não aplica zoom no body. Em telas maiores o
   conteúdo ganha área útil até um limite; em telas menores
   as grades quebram por media queries e o menu vira painel.
========================================================== */

:root {
    --rl-desktop-scale: 1 !important;
    --rl-viewport-height: 100dvh !important;
    --rl-base-largura: 1366px;
    --rl-base-altura: 768px;
    --rl-conteudo-maximo: 1600px;
}

html {
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    overflow-x: hidden;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100% !important;
    min-width: 320px;
    max-width: 100% !important;
    min-height: 100dvh !important;
    overflow-x: hidden;
    zoom: 1 !important;
}

/* Neutraliza regras antigas que ampliavam a página inteira. */
@media (min-width: 1367px) {
    body {
        width: 100% !important;
        min-height: 100dvh !important;
        zoom: 1 !important;
    }
}

/* Estruturas principais ocupam a tela sem ultrapassar a viewport. */
.dashboard,
.pagina-dashboard,
.pagina-checklists,
.pagina-amigos,
.pagina-grupos,
.pagina-salas,
.pagina-cronograma,
.pagina-progresso,
.pagina-mensagens,
.pagina-notificacoes,
.pagina-questoes-provas,
.pagina-professor,
.conteudo-principal {
    min-width: 0;
    max-width: 100%;
}

.conteudo-dashboard,
.conteudo-checklists,
.conteudo-amigos,
.conteudo-grupos,
.conteudo-salas,
.conteudo-cronograma,
.conteudo-progresso,
.conteudo-mensagens,
.conteudo-notificacoes,
.conteudo-questoes-provas,
.prof-main {
    width: 100%;
    max-width: var(--rl-conteudo-maximo);
    margin-inline: auto;
}

:root {
    --rl-largura-referencia: 1366;
    --rl-altura-referencia: 768;
    --rl-sidebar: clamp(232px, 19.2vw, 270px);
    --rl-gap-pagina: clamp(14px, 1.45vw, 24px);
    --rl-padding-pagina: clamp(16px, 2vw, 30px);
    --rl-raio-painel: clamp(14px, 1.25vw, 20px);
    --rl-altura-lista: min(58vh, 560px);
}

html {
    min-width: 320px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body,
.pagina-checklists,
.pagina-dashboard,
.pagina-amigos,
.pagina-grupos,
.pagina-salas,
.pagina-cronograma,
.pagina-progresso {
    min-width: 0;
    overflow-x: hidden;
}

.conteudo-principal,
.conteudo-principal > *,
.conteudo-estacoes,
.conteudo-estacao-oficial,
.conteudo-checklists,
.conteudo-amigos,
.conteudo-grupos,
.conteudo-salas,
.conteudo-cronograma,
.conteudo-progresso {
    min-width: 0;
}

/* Não deixa monitores maiores espalharem demais o conteúdo. */
@media (min-width: 1536px) {
    .conteudo-estacoes,
    .conteudo-estacao-oficial,
    .conteudo-comecar-estudo,
    .conteudo-checklists,
    .conteudo-amigos,
    .conteudo-grupos,
    .conteudo-salas,
    .conteudo-cronograma,
    .conteudo-progresso {
        width: min(100%, 1480px);
        margin-inline: auto;
    }
}

/* Catálogo: mantém três colunas na referência 1366x768. */
.lista-estacoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.35vw, 20px);
    align-items: stretch;
}

.cartao-estacao {
    min-width: 0;
    height: 100%;
}

.cartao-estacao-materia {
    font-size: clamp(0.76rem, 0.72rem + 0.12vw, 0.88rem) !important;
}

.cartao-estacao h3 {
    font-size: clamp(1.13rem, 1.05rem + 0.22vw, 1.32rem) !important;
    line-height: 1.25 !important;
}

.cartao-estacao-assunto {
    font-size: clamp(0.84rem, 0.8rem + 0.12vw, 0.96rem) !important;
    line-height: 1.55 !important;
}

.cartao-estacao-identificacao,
.status-estacao,
.progresso-estacao-cabecalho,
.cartao-estacao-dados span {
    font-size: clamp(0.68rem, 0.65rem + 0.08vw, 0.78rem) !important;
}

.cartao-estacao-dados strong,
.botao-estacao-principal {
    font-size: clamp(0.82rem, 0.78rem + 0.1vw, 0.92rem) !important;
}

/* Listas longas devem crescer até um limite e depois rolar. */
.lista-amigos-estudo,
.lista-amigos-convite-estacao,
.lista-materiais-revisao,
.lista-respostas-revisao,
.lista-checklist-revisao,
.lista-conversas,
.lista-membros,
.lista-solicitacoes,
.painel-lista-rolavel,
[data-lista-rolavel="true"] {
    max-height: var(--rl-altura-lista);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Barra lateral continua utilizável em telas baixas. */
.menu-lateral,
.navegacao-lateral {
    overscroll-behavior: contain;
}

.navegacao-lateral {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

/* Painéis e modais nunca ultrapassam a área visível. */
[role="dialog"],
.modal-conteudo,
.modal-painel,
.painel-modal {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
}

@media (max-width: 1180px) {
    .lista-estacoes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    :root {
        --rl-altura-lista: min(52vh, 460px);
    }

    .lista-estacoes {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .cabecalho-pagina {
        min-height: 76px !important;
        padding-block: 12px !important;
    }

    .conteudo-estacoes,
    .conteudo-estacao-oficial,
    .conteudo-comecar-estudo {
        padding-top: 18px !important;
        padding-bottom: 28px !important;
    }
}