/**
 * Utilitários — Modo Cliente (FRONT-002)
 * Pequeno conjunto deliberadamente enxuto — não é um framework utilitário
 * completo (não é Tailwind), só o suficiente para montar as páginas de
 * demonstração sem repetir CSS inline.
 */

.cliente-u-flex { display: flex; }
.cliente-u-flex-coluna { display: flex; flex-direction: column; }
.cliente-u-itens-centro { align-items: center; }
.cliente-u-justifica-entre { justify-content: space-between; }
.cliente-u-gap-1 { gap: var(--cliente-space-1); }
.cliente-u-gap-2 { gap: var(--cliente-space-2); }
.cliente-u-gap-3 { gap: var(--cliente-space-3); }
.cliente-u-gap-4 { gap: var(--cliente-space-4); }

.cliente-u-mt-2 { margin-top: var(--cliente-space-2); }
.cliente-u-mt-4 { margin-top: var(--cliente-space-4); }
.cliente-u-mt-6 { margin-top: var(--cliente-space-6); }
.cliente-u-mb-2 { margin-bottom: var(--cliente-space-2); }
.cliente-u-mb-4 { margin-bottom: var(--cliente-space-4); }

.cliente-u-texto-centro { text-align: center; }
.cliente-u-largura-total { width: 100%; }
.cliente-u-oculto { display: none !important; }

.cliente-u-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cliente-space-3);
}

.cliente-u-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cliente-space-3);
}

/* PORTAL-002 — para grades de atalho com uma quantidade de itens que não
   é necessariamente múltipla de 4 (ex.: 5 atalhos da Home) — auto-fit
   distribui o espaço sem deixar um item sozinho "boiando" numa coluna
   estreita como .cliente-u-grid-4 faria. */
.cliente-u-grid-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--cliente-space-3);
}