/* Weex Design System — Responsivo: breakpoints & esqueletos de página */ /* BREAKPOINTS CANÔNICOS (contrato — CSS vars NÃO funcionam dentro de @media, então estes números são definidos SOMENTE aqui e documentados na guideline "Responsivo". Nunca invente um terceiro número numa tela.) COMPACT ≤ 680px telefone — paddings encolhem, nav vira linha rolável MEDIUM 681–960px tablet / janela estreita — rail desce, sidebar admin vira trilho WIDE > 960px desktop — layout de referência (como as telas foram desenhadas) Por que classes e não inline: media query não existe em style="" — estas classes vivem no CSS global (styles.css), que toda tela já carrega no , então pintam imediatamente (sem custo de streaming do DC). */ /* ── ESQUELETO DE PÁGINA DO PARTICIPANTE ── Container + grid principal (conteúdo + rail 308px). Substitui o par inline `max-width:1180px …` + `grid-template-columns: 1fr 308px` repetido nas telas. */ .weex-page { max-width: 1180px; margin: 0 auto; padding: var(--space-24) var(--space-32) var(--space-64); /* Trava anti-scroll-lateral: popovers de hover (tooltips de conquista) e afins ficam no layout mesmo escondidos e, num rail estreito, ultrapassam a borda. `clip` corta só a horizontal SEM virar contêiner de rolagem — logo não quebra o position:sticky (ao contrário de overflow:hidden). */ overflow-x: clip; } .weex-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: var(--space-24); align-items: start; } .weex-page-grid > * { min-width: 0; } /* colunas sempre podem encolher */ /* ── GRIDS ESTRUTURAIS REUTILIZÁVEIS ── */ /* 2 colunas iguais (admin e participante) — empilha no COMPACT */ .weex-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); } /* fileira de KPIs do admin — 4 → 2 no MEDIUM (2×2 segura bem até o telefone) */ .weex-grid-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* ── MEDIUM (≤ 960px) ── */ @media (max-width: 960px) { .weex-page-grid { grid-template-columns: minmax(0, 1fr); } /* rail desce para baixo do conteúdo */ /* Rail marcado como .weex-rail (o Percurso das telas de atividade): em coluna única ele fica SEMPRE DEPOIS do conteúdo (order:1, independente da ordem do DOM). Acima da atividade, ocupando a primeira tela, ele passa a parecer a atividade em si — o contexto se disfarça de conteúdo. Sai do sticky para não flutuar sobre o conteúdo; o próprio componente nasce colapsado numa linha em ≤960, então o rodapé fica curto. */ .weex-page-grid > .weex-rail { order: 1; position: static !important; } .weex-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weex-hide-medium { display: none !important; } } /* ── COMPACT (≤ 680px) ── */ @media (max-width: 680px) { .weex-page { padding: var(--space-16) var(--space-16) var(--space-48); } .weex-grid-2 { grid-template-columns: minmax(0, 1fr); } .weex-hide-compact { display: none !important; } } /* Visível SÓ no compact (ex.: atalho mobile). Use com moderação. */ .weex-only-compact { display: none !important; } @media (max-width: 680px) { .weex-only-compact { display: revert !important; } } /* Tabelas densas do admin nunca espremem colunas: rolam na horizontal. */ .weex-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Rolagem horizontal SÓ no compact para tabelas com cabeçalho fixo (DS Table). No desktop fica overflow:visible pro position:sticky do cabeçalho funcionar — overflow-x:auto criaria uma caixa de scroll que rouba o sticky (ver Table.prompt.md). No celular o sticky é sacrificado de propósito em troca da rolagem lateral. */ .weex-tbl-hscroll { overflow: visible; } @media (max-width: 680px) { .weex-tbl-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .weex-tbl-hscroll table { min-width: 680px; } } /* Bancada de importação (grade virtualizada): no compact a caixa rola na horizontal e as duas faixas (cabeçalho + corpo) recebem largura mínima pra rolarem juntas. */ @media (max-width: 680px) { .weex-bancada-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .weex-bancada-x > div { min-width: 620px; } } /* InsightBanner (admin) — no compact empilha: ícone (linha 1), texto de lado a lado (linha 2) e ação logo abaixo (linha 3). */ @media (max-width: 680px) { .weex-insight { flex-wrap: wrap; align-items: flex-start !important; } .weex-insight .weex-insight-body { flex-basis: 100%; } .weex-insight .weex-insight-action { flex-basis: 100%; } }