/**
 * Classes utilitárias — substituem os atributos style= do HTML.
 *
 * POR QUE ESTE ARQUIVO EXISTE
 *
 * A CSP com `style-src 'self'` sem `'unsafe-inline'` bloqueia tanto o
 * bloco <style> quanto o ATRIBUTO style="...". O bloco pode carregar um
 * nonce; o atributo não tem onde carregar carimbo nenhum. Então todo
 * style= precisa virar classe.
 *
 * POR QUE ATÔMICAS, E NÃO UMA CLASSE POR VALOR
 *
 * Medido em 2026-09-09: são 373 atributos com 187 valores DISTINTOS, dos
 * quais 119 aparecem uma única vez. Uma classe por valor daria 187
 * classes quase todas de uso único — indireção sem reuso, que lê pior
 * que o style= que substituiu.
 *
 * Decompondo em declarações, sobram 144 distintas, e as ~40 mais
 * frequentes cobrem 70% das ocorrências. Daí a escolha: utilitárias
 * atômicas, combináveis, nomeadas em português como o resto do projeto.
 *
 * ONDE ELE É CARREGADO
 *
 * Nos 6 layouts e nas 2 telas de impressão (que são páginas autônomas,
 * sem layout). O projeto tem TRÊS arquiteturas de CSS convivendo —
 * tenant.css, publico.css/landing.css e Bootstrap+<style> no admin — e
 * este arquivo é o único comum a todas.
 *
 * Item 4 do PENDENCIAS.md, etapa 2.
 */

/* ── Cores ────────────────────────────────────────────────────────────
   O fallback existe porque --cor-texto-suave e --cor-erro são definidas
   em tenant.css e publico.css, mas NÃO no contexto do painel master
   (que usa Bootstrap + <style> inline). Hoje o admin não usa estas
   classes; o fallback impede que passe a usar e o texto suma. */
.texto-suave    { color: var(--cor-texto-suave, #6b7280); }
.texto-primaria { color: var(--cor-primaria, #2563eb); }
.texto-erro     { color: var(--cor-erro, #dc2626); }

/* ── Alinhamento de texto ─────────────────────────────────────────── */
.texto-direita { text-align: right; }
.texto-centro  { text-align: center; }

/* ── Margem: zerar ────────────────────────────────────────────────── */
.sem-margem       { margin: 0; }
.sem-margem-topo  { margin-top: 0; }
.sem-margem-baixo { margin-bottom: 0; }

/* ── Margem: escala em px, a mesma que já era usada nos style= ─────
   Não inventei uma escala nova de propósito: manter os mesmos valores
   garante que a conversão seja pixel a pixel, sem "aproveitar para
   arrumar". Arrumar espaçamento é outra tarefa, e misturar as duas
   tornaria impossível saber se uma diferença visual foi intencional. */
.margem-topo-2   { margin-top: 2px; }
.margem-topo-6   { margin-top: 6px; }
.margem-topo-8   { margin-top: 8px; }
.margem-topo-10  { margin-top: 10px; }
.margem-topo-12  { margin-top: 12px; }
.margem-topo-14  { margin-top: 14px; }
.margem-topo-16  { margin-top: 16px; }
.margem-topo-20  { margin-top: 20px; }
.margem-topo-24  { margin-top: 24px; }

.margem-baixo-4  { margin-bottom: 4px; }
.margem-baixo-6  { margin-bottom: 6px; }
.margem-baixo-8  { margin-bottom: 8px; }
.margem-baixo-10 { margin-bottom: 10px; }
.margem-baixo-12 { margin-bottom: 12px; }
.margem-baixo-14 { margin-bottom: 14px; }
.margem-baixo-16 { margin-bottom: 16px; }
.margem-baixo-20 { margin-bottom: 20px; }
.margem-baixo-24 { margin-bottom: 24px; }

/* Lista aninhada dentro de um aviso/ajuda — recuo do marcador. */
.lista-recuada { margin: 6px 0 0 18px; }

/* ── Padding ──────────────────────────────────────────────────────── */
.sem-padding { padding: 0; }
.padding-8   { padding: 8px; }

/* ── Flex ─────────────────────────────────────────────────────────── */
.linha-flex   { display: flex; }
.itens-centro { align-items: center; }
.flex-quebra  { flex-wrap: wrap; }
.espalha      { justify-content: space-between; }
.ao-fim       { justify-content: flex-end; }
.ao-centro    { justify-content: center; }
.gap-6        { gap: 6px; }
.gap-8        { gap: 8px; }
.gap-10       { gap: 10px; }
.gap-12       { gap: 12px; }

/* ── Tipografia ───────────────────────────────────────────────────── */
.fonte-mono   { font-family: monospace; }
.peso-600     { font-weight: 600; }
.peso-700     { font-weight: 700; }
.maiusculas   { text-transform: uppercase; }
.espaco-letras { letter-spacing: .5px; }

.fonte-105 { font-size: 1.05rem; }
.fonte-095 { font-size: 0.95rem; }
.fonte-090 { font-size: 0.9rem; }
.fonte-088 { font-size: 0.88rem; }
.fonte-085 { font-size: 0.85rem; }
.fonte-080 { font-size: 0.8rem; }
.fonte-075 { font-size: 0.75rem; }

/* ── Display ──────────────────────────────────────────────────────── */
.em-linha { display: inline; }
.bloco    { display: block; }

/* SEM `!important` de propósito. Vários pontos alternam a visibilidade
   por JavaScript com `elemento.style.display = 'block'`, e estilo inline
   só vence a classe se a classe NÃO for !important. Foi essa a armadilha
   nº 1 registrada pelo salão: usar a `.d-none` do Bootstrap (que tem
   !important) fez um painel de QR Code nunca mais aparecer, sem erro
   nenhum na tela. */
.oculto { display: none; }

/* ── Dimensão ─────────────────────────────────────────────────────── */
.largura-total  { width: 100%; }
.largura-maxima { max-width: 100%; }

/* ── Diversos ─────────────────────────────────────────────────────── */
.sem-quebra      { white-space: nowrap; }
.quebra-linhas   { white-space: pre-line; }
.sem-sublinhado  { text-decoration: none; }
.cursor-clique   { cursor: pointer; }
.cursor-bloqueado { cursor: not-allowed; }
.coluna-inteira  { grid-column: 1 / -1; }
.objeto-contem   { object-fit: contain; }
.objeto-cobre    { object-fit: cover; }

/* ── Segunda rodada ───────────────────────────────────────────────────
   Acrescentadas depois de medir o que mais bloqueava a conversão. Só
   entraram as declarações REUTILIZÁVEIS; as específicas de uma tela
   (largura de coluna de tabela, altura de imagem, espaçamento de letra
   de código) ficam em bloco <style> próprio da página, na etapa 4 —
   virar classe global algo usado uma vez só é indireção sem reuso. */

/* Bloco de texto com o espaçamento padrão do projeto abaixo. */
.bloco-espacado    { margin: 0 0 14px; }
.bloco-espacado-6  { margin: 0 0 6px; }

.em-linha-bloco    { display: inline-block; }
.linha-flex-inline { display: inline-flex; }
.grade             { display: grid; }
.flex-cresce       { flex: 1; }
.centralizado      { margin: 0 auto; }
.margem-esq-10     { margin-left: 10px; }
.gap-14            { gap: 14px; }

.tabela-colapsada  { border-collapse: collapse; }
.borda-fina        { border: 1px solid var(--cor-borda, #d1d5db); }
.fundo-suave       { background: var(--cor-fundo-suave, rgba(0,0,0,0.04)); }
.texto-sucesso     { color: var(--cor-sucesso, #16a34a); }

.peso-normal       { font-weight: normal; }
.fonte-082         { font-size: 0.82rem; }
.fonte-092         { font-size: 0.92rem; }
.fonte-110         { font-size: 1.1rem; }
.fonte-200         { font-size: 2rem; }
.fonte-250         { font-size: 2.5rem; }

.altura-maxima     { max-height: 100%; }

/* ── Terceira rodada — necessárias pelos estilos dinâmicos (etapa 3) ── */
.fonte-100      { font-size: 1rem; }
.padding-14-16  { padding: 14px 16px; }

/* ── Quarta rodada — larguras de coluna e afins (etapa 4B) ────────────
   Larguras percentuais de coluna de tabela SE REPETEM entre as telas de
   listagem, então são utilitárias de verdade. As larguras em pixel de
   imagem e miniatura continuam sendo classe local da página. */
.largura-1p  { width: 1%; }
.largura-10  { width: 10%; }
.largura-12  { width: 12%; }
.largura-13  { width: 13%; }
.largura-14  { width: 14%; }
.largura-18  { width: 18%; }
.largura-22  { width: 22%; }

.largura-max-60  { max-width: 60px; }
.largura-max-280 { max-width: 280px; }
.altura-max-200  { max-height: 200px; }

.coluna-flex   { flex-direction: column; }
.itens-fim     { align-items: end; }
.gap-4         { gap: 4px; }
.rolagem-x     { overflow-x: auto; }

.texto-padrao  { color: var(--cor-texto); }
.peso-400      { font-weight: 400; }
.peso-500      { font-weight: 500; }
.fonte-078     { font-size: 0.78rem; }
.fonte-125     { font-size: 1.25rem; }
.fonte-140     { font-size: 1.4rem; }
.borda-arredondada-4 { border-radius: 4px; }
.borda-arredondada-6 { border-radius: 6px; }

/* ── Quinta rodada — componentes que se repetem entre telas ──────────
   Diferente das utilitárias atômicas acima: aqui cada classe é um
   COMPONENTE, com várias declarações que só fazem sentido juntas. Entram
   aqui, e não em bloco de página, porque aparecem em duas ou mais telas
   — que é a diferença entre componente e estilo local. */

/* Campo do código de 6 dígitos do 2FA (painel master e do tenant). */
.espaco-codigo { letter-spacing: .4em; }

/* Logo pequena na navbar. */
.logo-mini { background: #fff; object-fit: contain; padding: 2px; }

/* Faixa de filtros dos relatórios: colunas que se ajustam sozinhas. */
.grade-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

/* Prévia da imagem escolhida, nos formulários de cliente e veículo.
   Nasce visível; quem começa escondido soma a classe .oculto. */
.previa-imagem {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: var(--cor-fundo-cartao);
}

/* Barra de botões no rodapé de um formulário/ficha. */
.barra-acoes { display: flex; gap: 10px; margin: 24px 0; }

/* Campo somente-leitura no painel master (usa variável do Bootstrap). */
.campo-travado { background: var(--bs-secondary-bg); cursor: not-allowed; }

/* Cartão clicável da página de Relatórios. */
.card-relatorio {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}