/* ============================================================================ ATT — base do sistema de design Servido em /portal-static/att-base.css · depende de att-tokens.css Vocabulário com prefixo .att- para conviver com as classes existentes (.st-*, .k-*, .cell, .slice…) durante a migração das superfícies. Princípios que este arquivo impõe: - Todo controle tem os 7 estados: default, hover, focus, active, disabled, loading, error. Nada entra em produção com metade deles. - Nada de `button{width:100%}` global. Era isso que fazia os botões do /kafka virarem barras empilhadas: .k-btn não resetava width e o flex-wrap quebrava cada um numa linha. - Conteúdo largo rola no PRÓPRIO container (.att-scroll-x). O nunca rola na horizontal. - Densidade no desktop, alvo de 44px no toque. São cenas diferentes. ========================================================================== */ /* ------------------------------------------------------------------ reset -- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; /* Zero arraste horizontal na página, em qualquer superfície. */ max-width: 100%; overflow-x: hidden; } body { max-width: 100%; overflow-x: hidden; min-height: 100vh; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); background-color: var(--bg); background-image: radial-gradient(at 22% -8%, var(--bg-gradient-a) 0%, transparent 55%), radial-gradient(at 100% 0%, var(--bg-gradient-b) 0%, transparent 40%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv05' 1, 'ss03' 1; } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } [hidden] { display: none !important; } /* --------------------------------------------------------------- tipografia */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-base); } p { max-width: 68ch; } /* prosa; dado e UI compacta correm mais */ strong, b { font-weight: 700; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Números tabulares em qualquer lugar que compare valores em coluna. */ .att-num, td.att-num, th.att-num { font-variant-numeric: tabular-nums; text-align: right; } /* Micro-caps em mono — o vocabulário de rótulo herdado dos terminais. É o que dá o caráter de instrumento sem custar legibilidade. */ .att-eyebrow { font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-faint); } .att-eyebrow--brand { color: var(--warm); letter-spacing: var(--ls-caps-wide); display: inline-flex; align-items: center; gap: var(--sp-2); } .att-eyebrow--brand::before { content: ""; width: 13px; height: 13px; border-radius: 3px; background: linear-gradient(135deg, var(--att-blue) 0%, var(--accent) 100%); box-shadow: 0 0 0 3px var(--accent-soft); flex: none; } /* No tema claro o amarelo não pode ser texto (≈1.6:1 sobre branco). */ [data-theme="light"] .att-eyebrow--brand { color: var(--accent); } .att-mono { font-family: var(--font-mono); } .att-muted { color: var(--text-muted); } .att-faint { color: var(--text-faint); } /* Título de seção com a barrinha âmbar — herdado do FND/CHP. */ .att-section-title { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); font-weight: 700; color: var(--text); } .att-section-title::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--warm); flex: none; } /* Divisor "a partir daqui é detalhe técnico" — a camada do princípio 3. */ .att-divider { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-10) 0 var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-faint); } .att-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ------------------------------------------------------------------- foco -- */ /* Não existia em NENHUMA das 6 superfícies antes disto. */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } /* Não roubar o anel de quem já tem o próprio tratamento. */ .att-btn:focus-visible, .att-input:focus-visible, .att-chip:focus-visible, .att-tile:focus-visible, .att-tab:focus-visible { box-shadow: var(--focus-ring); } /* ---------------------------------------------------------------- surfaces -- */ .att-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); } .att-card--raised { background: var(--surface-raised); } .att-card--flush { padding: 0; overflow: hidden; } /* ---------------------------------------------------------------- controles */ .att-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-2); } .att-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); } .att-input, .att-select, .att-textarea { width: 100%; padding: var(--sp-3) var(--sp-3); background: var(--surface-sunken); color: var(--text); /* --border-interactive, não --border: é fronteira de componente e precisa de 3:1. O portal antigo usava a borda decorativa e dava ~1.3:1. */ border: 1px solid var(--border-interactive); border-radius: var(--r-md); font-size: var(--fs-sm); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .att-textarea { min-height: 7rem; resize: vertical; } .att-input::placeholder, .att-textarea::placeholder { color: var(--text-faint); } .att-input:hover:not(:disabled), .att-select:hover:not(:disabled), .att-textarea:hover:not(:disabled) { border-color: var(--border-strong); } .att-input:focus-visible, .att-select:focus-visible, .att-textarea:focus-visible { border-color: var(--accent); background: var(--surface); } .att-input:disabled, .att-select:disabled, .att-textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--surface); } /* Estado de erro: cor + texto. Nunca só cor. */ .att-input[aria-invalid="true"], .att-select[aria-invalid="true"], .att-textarea[aria-invalid="true"] { border-color: var(--danger); } .att-field-error { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--danger); margin-top: var(--sp-2); } .att-field-error::before { content: "!"; font-weight: 700; flex: none; } /* Checkbox e radio: alvo grande o suficiente no toque. */ .att-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); cursor: pointer; padding: var(--sp-1) 0; } .att-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-fill); flex: none; } /* Agrupamento real de campos relacionados. */ .att-fieldset { border: none; } .att-fieldset > legend { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-2); padding: 0; } /* ----------------------------------------------------------------- botões --- */ /* Largura por conteúdo. Quem quiser cheio pede .att-btn--block. */ .att-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); min-height: 40px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--accent-fill); color: var(--text-on-accent); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .att-btn:hover:not(:disabled) { background: var(--accent-hover); text-decoration: none; } .att-btn:active:not(:disabled) { transform: translateY(1px); } .att-btn:disabled, .att-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .att-btn--secondary { background: transparent; color: var(--text); border-color: var(--border-interactive); } .att-btn--secondary:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--text); } .att-btn--ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .att-btn--ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--text); } /* Ação destrutiva/de risco: não é vermelha em repouso, para não gritar sem motivo, mas assume o vermelho na intenção (hover/foco). */ .att-btn--danger { background: transparent; color: var(--danger); border-color: var(--border-interactive); } .att-btn--danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); } .att-btn--warm { background: var(--warm); color: var(--text-on-warm); } .att-btn--warm:hover:not(:disabled) { filter: brightness(1.08); background: var(--warm); } .att-btn--sm { padding: var(--sp-2) var(--sp-3); min-height: 32px; font-size: var(--fs-xs); } .att-btn--lg { padding: var(--sp-4) var(--sp-6); min-height: 48px; font-size: var(--fs-base); } .att-btn--block { width: 100%; } .att-btn--icon { padding: var(--sp-2); min-width: 40px; } /* Carregando: o botão informa e trava, sem sumir da tela. */ .att-btn[data-loading="true"] { pointer-events: none; opacity: .75; position: relative; } .att-btn[data-loading="true"]::after { content: ""; width: 0.9em; height: 0.9em; flex: none; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: att-spin .7s linear infinite; } @keyframes att-spin { to { transform: rotate(360deg); } } /* Barra de ações: os botões ficam em linha e NÃO esticam. */ .att-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .att-actions > .att-btn { flex: 0 0 auto; } /* ------------------------------------------------------------ pill / badge - */ /* Triplas por estado, para nenhuma superfície improvisar combinação. */ .att-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 2px var(--sp-3); border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .03em; white-space: nowrap; } .att-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .att-pill--bare::before { display: none; } .att-pill--ok { background: var(--ok-soft); color: var(--ok-fg); border-color: var(--ok); } .att-pill--warn { background: var(--warn-soft); color: var(--warn-fg); border-color: var(--warn); } .att-pill--danger { background: var(--danger-soft); color: var(--danger-fg); border-color: var(--danger); } .att-pill--info { background: var(--info-soft); color: var(--info-fg); border-color: var(--info); } .att-pill--neutral{ background: var(--surface-raised); color: var(--text-muted); border-color: var(--border); } /* ------------------------------------------------------------------ chip --- */ /* Filtro selecionável. Estado NUNCA só por cor: o selecionado ganha peso, marca e aria-pressed. */ .att-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); min-height: 34px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .04em; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-interactive); border-radius: var(--r-pill); cursor: pointer; user-select: none; transition: all var(--t-fast) var(--ease); } .att-chip:hover { color: var(--text); border-color: var(--border-strong); } .att-chip[aria-pressed="true"] { color: var(--text-on-accent); background: var(--accent-fill); border-color: var(--accent-fill); font-weight: 700; } .att-chip[aria-pressed="true"]::after { content: "✓"; font-size: .85em; } /* ------------------------------------------------------------------ tabela -- */ .att-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .att-table th, .att-table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); } .att-table th { color: var(--text-muted); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; } .att-table tbody tr:hover { background: var(--accent-soft); } /* Numero em coluna: alinha a direita. Esta regra existe porque `.att-num` (la em cima, na secao de tipografia) NAO vencia dentro da tabela: `.att-table th, .att-table td { text-align: left }` tem a MESMA especificidade (0,1,1) e vem depois no arquivo, entao o `left` ganhava por ordem. O efeito era silencioso — `font-variant-numeric` aplicava, o alinhamento nao — e toda coluna de valor das seis superficies renderizava a esquerda, contra a intencao declarada. Aferido em 18/08/2026: getComputedStyle(td.att-num).textAlign === 'left'. */ .att-table th.att-num, .att-table td.att-num { text-align: right; } .att-table tbody tr:last-child td { border-bottom: none; } /* Cabeçalho fixo em tabela longa. */ .att-table--sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); } /* Container de rolagem para conteúdo largo. É ESTE o contrato de mobile: a tabela rola aqui dentro, o nunca rola na horizontal. */ .att-scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } /* Dica visual de que ainda há conteúdo à direita. */ .att-scroll-x[data-overflowing="true"] { background-image: linear-gradient(to left, var(--surface-sunken), transparent 2.5rem); background-position: right; background-repeat: no-repeat; background-size: 2.5rem 100%; } /* ------------------------------------------------------------------ estados - */ /* Vazio que ensina, em vez de "nada aqui". */ .att-empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } .att-empty__title { color: var(--text); font-weight: 600; margin-bottom: var(--sp-2); } /* Esqueleto de carregamento — não spinner no meio do conteúdo. */ .att-skel { background: linear-gradient(90deg, var(--surface-raised) 25%, var(--border) 50%, var(--surface-raised) 75%); background-size: 200% 100%; border-radius: var(--r-sm); animation: att-shimmer 1.4s ease-in-out infinite; } @keyframes att-shimmer { to { background-position: -200% 0; } } .att-skel--text { height: 1em; margin: .25em 0; } /* Aviso de dado velho / origem indisponível. Princípio 1: a tela diz. */ .att-notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); } .att-notice--warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-fg); } .att-notice--danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-fg); } .att-notice--info { background: var(--info-soft); border-color: var(--info); color: var(--info-fg); } /* Sucesso PERSISTENTE — "cadastro recebido", "e-mail confirmado". Faltava, e a ausência apareceu em três lugares do Demandas ao mesmo tempo: cada um improvisou uma aparência diferente (um usou `--info`, outro um pill verde com texto ao lado) para a mesma categoria de mensagem. O tom `ok` já existia como TRIPLA auditada nos dois temas; só não tinha variante de notice. Acrescentado em 03/09/2026 com o refactor do Demandas. */ .att-notice--ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-fg); } /* Indicador ao-vivo. */ .att-live { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--text-faint); letter-spacing: .05em; } .att-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; animation: att-pulse 2.2s ease-in-out infinite; } .att-live[data-stale="true"] .att-live__dot { background: var(--warn); animation: none; } .att-live[data-stale="dead"] .att-live__dot { background: var(--danger); animation: none; } @keyframes att-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---------------------------------------------------------------- utilidade - */ .att-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--sp-6) var(--sp-5); } .att-wrap--narrow { max-width: 460px; } .att-wrap--wide { max-width: 1560px; } .att-stack > * + * { margin-top: var(--sp-4); } .att-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .att-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } /* Só para leitor de tela — usado nos rótulos que a tela mostra por forma. */ .att-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Pular para o conteúdo: primeira parada do teclado. */ .att-skip { position: absolute; left: var(--sp-3); top: var(--sp-3); z-index: var(--z-toast); padding: var(--sp-3) var(--sp-4); background: var(--surface); color: var(--text); border: 1px solid var(--border-interactive); border-radius: var(--r-md); transform: translateY(-200%); transition: transform var(--t-base) var(--ease); } .att-skip:focus { transform: translateY(0); text-decoration: none; } /* ============================================== toque e telas pequenas ===== */ /* Densidade continua no desktop; o alvo cresce onde o dedo é o ponteiro. */ @media (pointer: coarse) { .att-btn { min-height: var(--touch-min); } .att-btn--sm { min-height: 38px; } .att-chip { min-height: var(--touch-min); padding-inline: var(--sp-4); } .att-input, .att-select, .att-textarea { min-height: var(--touch-min); } .att-check { padding: var(--sp-2) 0; } .att-check input { width: 1.25rem; height: 1.25rem; } .att-table th, .att-table td { padding: var(--sp-3); } } @media (max-width: 760px) { .att-wrap { padding: var(--sp-4) var(--sp-4); } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } /* Ação em coluna no celular: alvo cheio, sem botão apertado do lado do outro. */ .att-actions--stack-sm { flex-direction: column; align-items: stretch; } .att-actions--stack-sm > .att-btn { width: 100%; } } @media (max-width: 420px) { .att-wrap { padding: var(--sp-3); } } /* ------------------------------------------------------- movimento reduzido */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .att-live__dot { animation: none !important; } } /* --------------------------------------------------------------- impressão -- */ @media print { body { background: #fff; color: #000; } .att-card { border: 1px solid #999; box-shadow: none; } .att-scroll-x { overflow: visible; } }