/* ===================================================================== * GTSI System - Alimentação — TEMA ESCURO + CIANO (identidade oficial) * Fonte ÚNICA de cores/components. Todas as telas (login, dashboard e o * DRE da 1D) consomem estas variáveis — não repintar tela por tela. * * Base escura alinhada aos painéis DRE atuais (slate). Destaque = ciano * #00B4D8 (cor oficial do GTSI System). Emerald/rose preservados para a * semântica financeira do DRE (receita/lucro vs despesa/negativo). * Contraste texto/fundo AA. * ===================================================================== */ :root{ /* superfícies */ --bg: #0B0F14; /* base da página */ --bg-elev: #0F141B; /* topo/superfícies elevadas */ --card: #151B23; /* cartões */ --card-2: #1B232D; /* cartões internos / hover */ --border: #232D38; /* bordas sutis: SEPARADOR (decorativo) */ --border-2: #2C3845; /* [a11y 06/09/2026] BORDA DE COMPONENTE INTERATIVO — botão, campo, aba. 🔴 O dono: "existem varios botoes ... o botao apagado que nao conseguimos ver pelo fato da cor". Metade disso era texto quase preto herdado do primário; a outra metade é ESTA: `--border` dá 1,24:1 sobre --card, e a WCAG 1.4.11 exige 3:1 para o limite visual de um componente. O botão secundário não tinha FORMA — num botão só-emoji sobrava o glifo solto, que foi exatamente a descrição dele ("só aparecia o emoji"). ⚠️ #5C6E82 = 3,30:1 sobre --card, 3,53 sobre --bg-elev, 3,61 sobre --bg. O portão sugeriu #4B5A6B; refiz a conta e dá 2,45 — não passava. *Número de laudo também se confere.* `--border` continua onde é decorativo (linha de tabela, divisória de seção). */ --border-int:#5C6E82; /* texto */ --text: #E6EDF3; /* texto primário (AA sobre --bg) */ --text-muted:#9AA7B4; /* secundário */ /* [a11y 02/09/2026] Era #6B7785: 3,79:1 sobre --card e 4,21:1 sobre --bg — reprova o AA de 4,5:1 em TODO fundo do sistema, e é a cor do rótulo de cada campo e do cabeçalho de cada tabela. #8A96A3 dá 5,02:1 e 5,57:1, e continua um degrau abaixo de --text-muted (7,06). */ --text-dim: #8A96A3; /* terciário/legendas */ /* destaque oficial — ciano */ --accent: #00B4D8; --accent-h: #33C6E6; /* hover: ciano mais claro */ --accent-press:#0096B4; --on-accent: #04141A; /* texto sobre botão ciano (AA) */ --accent-soft:rgba(0,180,216,.12); --accent-ring:rgba(0,180,216,.30); /* semântica financeira (preservada do DRE) */ --pos: #10B981; /* receita / lucro / positivo */ --pos-2: #34D399; --neg: #F87171; /* despesa / negativo */ --warn: #FBBF24; /* alerta / parcial */ --radius: 14px; --shadow: 0 10px 40px rgba(0,0,0,.45); --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } *{box-sizing:border-box} html,body{height:100%;max-width:100%;overflow-x:hidden} /* trava: página nunca fica mais larga que a tela (mobile não "encolhe pra caber") */ body{ margin:0; background: radial-gradient(1200px 600px at 50% -10%, rgba(0,180,216,.07), transparent 60%), var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; } a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-h)} /* ── Marca ───────────────────────────────────────────────── */ .gtsi-brand{display:flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans',var(--font)} .gtsi-brand .bt{font-weight:800;color:var(--text)} .gtsi-brand .bc{font-weight:700;color:var(--accent)} /* "Alimentação" em ciano */ /* ── Cartão ──────────────────────────────────────────────── */ .gtsi-card{ background:linear-gradient(180deg, var(--card) 0%, var(--bg-elev) 100%); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); } /* ── Inputs ──────────────────────────────────────────────── */ .gtsi-label{display:block;font-size:11px;letter-spacing:.6px;color:var(--text-dim); text-transform:uppercase;font-weight:600;margin:14px 0 6px} .gtsi-input{ width:100%;padding:12px;border:1px solid var(--border-int);border-radius:10px; background:#0C1117;color:var(--text);font-size:14px;font-family:inherit; } .gtsi-input::placeholder{color:var(--text-dim)} .gtsi-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} /* ── Botão ───────────────────────────────────────────────── */ .gtsi-btn{ width:100%;margin-top:22px;padding:12px;border:none;border-radius:10px; background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px; cursor:pointer;transition:background .15s, transform .05s; } .gtsi-btn:hover{background:var(--accent-h)} .gtsi-btn:active{background:var(--accent-press);transform:translateY(1px)} /* ── Mensagem de erro ────────────────────────────────────── */ .gtsi-erro{ background:rgba(248,113,113,.10);border-left:3px solid var(--neg);color:#FCA5A5; padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:8px; } /* ── Topbar ──────────────────────────────────────────────── */ .gtsi-top{ display:flex;align-items:center;justify-content:space-between; padding:16px 24px;background:var(--bg-elev);border-bottom:1px solid var(--border); } .gtsi-link-sair{color:var(--neg);font-size:13px} .gtsi-link-sair:hover{color:#FCA5A5} /* ── Utilitários ─────────────────────────────────────────── */ .gtsi-muted{color:var(--text-muted)} /* [a11y 06/09/2026] Texto que SÓ o leitor de tela lê. Nasceu do chip de mês sem * dado: eu tinha trocado `opacity:.32` por cor legível e posto `aria-disabled`, * mas `aria-disabled` num SEM role é ignorado pela tecnologia assistiva, e * `title` em não é anunciado. Ou seja: o estado "sem dado" ficou dito só * por COR e traço tracejado — invisível para quem não vê. Aqui a informação vira * texto de verdade, fora da tela mas dentro da leitura. * ⚠️ `clip-path` + 1px: o `display:none` esconderia da leitura também. */ .gtsi-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .gtsi-dim{color:var(--text-dim)} .gtsi-ok{color:var(--pos);font-weight:600} .gtsi-kv{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;margin-top:16px;font-size:14px} /* [regressão visual 06/09/2026] A coluna de rótulo era 160px FIXOS. Em tela de 320px sobram ~124px para o valor, e "tenant_scope_scan ✓" nao cabe: medido `div.gtsi-ok right=327` contra `clientWidth 320` — o `overflow-x:hidden` do body APARAVA o final em silencio. ⚠️ Nao e so o dashboard: `.gtsi-kv` desenha tambem o cabecalho do pedido na Auditoria (Valor / Abertura / Observacao) e os marketplaces do DRE. Consertar no tema conserta as duas que ficam; a terceira (marketplaces do DRE) traz a propria grade e NUNCA teve o defeito — medido: 0 vazamentos em 320px la. A mensagem do commit anterior dizia "as tres" e estava errada; sao DUAS. Abaixo de 420px o par vira uma coluna so. 🔴 ESTE COMENTARIO JA MATOU A REGRA UMA VEZ (06/09/2026). Eu fechei o bloco aqui no meio e deixei 6 linhas de texto CRU na folha: o parser entra em recuperacao de erro, engole o bloco `{...}` seguinte — a `@media` inteira — e NAO AVISA NADA. `php -l` nao le CSS, o `grep` achava a regra intacta, e o vazamento de 320px voltou em silencio. Pior: os "0 desalinhados" que eu medi no DRE eram falso-verde — alinhou porque a regra estava MORTA, nao porque o `:not()` funcionou. 🔑 *Regra de CSS se prova pelo `document.styleSheets` do navegador, nunca pelo texto do arquivo.* ⚠️ E nao escreva o terminador de comentario DENTRO do comentario nem entre crases: o parser nao le aspas, e eu fiz exatamente isso na frase que descreve o defeito. Ha assercao para o balanco de abre-e-fecha. ⚠️ A 1ª versão desta regra alcançava TAMBÉM a variante de coluna automática do DRE (marketplaces), que traz a própria grade e não vira uma coluna. Lá a grade não mudava (estilo inline vence media query) mas o `margin-top` do rótulo passava, jogando o rótulo 8px ABAIXO do valor em 3 linhas de cada card. *Metade de uma regra aplicada é uma regra errada* — mesma família de "sobrescrever metade de um par cor/fundo". Daí o `:not(.gtsi-kv--auto)`. */ @media (max-width:420px){ .gtsi-kv:not(.gtsi-kv--auto){grid-template-columns:1fr;gap:2px 0} .gtsi-kv:not(.gtsi-kv--auto) .k{margin-top:8px} } .gtsi-kv .k{color:var(--text-muted)} /* =================================================================== * COMPONENTES DO DRE (reusados por todos os painéis 1D — não repintar) * =================================================================== */ /* Coluna central única: conteúdo e barras alinham no mesmo eixo (estilo organizado/centralizado) */ :root{--container:1280px;--gutter:24px} .gtsi-wrap{max-width:var(--container);margin:0 auto;padding:20px var(--gutter)} /* Barras full-bleed (fundo de ponta a ponta) com o CONTEÚDO alinhado à coluna central */ .gtsi-top,.gtsi-nav,.gtsi-filters,.gtsi-chips{ padding-left:calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)) !important; padding-right:calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)) !important; } /* Navegação por painel */ .gtsi-nav{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--border);padding:0 20px;background:var(--bg-elev)} .gtsi-tab{padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px} .gtsi-tab:hover{color:var(--text)} .gtsi-tab.active{color:var(--accent);border-bottom-color:var(--accent)} .gtsi-subnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} /* 🔴 [design-reviewer 26/08/2026] Esta classe nasceu para e é usada em 51