/*
 * Breakpoints do design system.
 * Fonte: docs/knowledge-base/design-system/spec.md, seção 4. Mobile-first.
 *
 *   mobile  < 640px      -> layout padrão, nav inferior fixa (admin/cliente)
 *   tablet  640-1023px   -> 2 colunas, nav inferior vira topo em alguns casos
 *   desktop >= 1024px    -> sidebar fixa (admin), conteúdo centralizado max 1200px
 *
 * CSS puro (sem pré-processador) não permite `@media` com valor de custom property, então os
 * limites acima (639px / 640px / 1023px / 1024px) são a fonte única de verdade: qualquer novo
 * arquivo CSS que precise de uma media query própria deve repetir exatamente estes valores. A
 * materialização como mixins de um pré-processador (Sass, etc.) é decisão de tooling ainda não
 * tomada (ver "Em aberto" em componentes-compartilhados/spec.md) — por ora, estes são utilitários
 * de classe reaproveitáveis em vez de mixins.
 */

.only-mobile,
.only-tablet,
.only-desktop {
    display: none;
}

/* mobile: < 640px */
@media (max-width: 639px) {
    .only-mobile { display: block; }
    .hide-mobile { display: none !important; }
}

/* tablet: 640-1023px */
@media (min-width: 640px) and (max-width: 1023px) {
    .only-tablet { display: block; }
    .hide-tablet { display: none !important; }
}

/* desktop: >= 1024px */
@media (min-width: 1024px) {
    .only-desktop { display: block; }
    .hide-desktop { display: none !important; }
}

/* Conteúdo centralizado em desktop, largura máxima 1200px (ver seção 4 da spec). */
.desktop-max-width {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}