/* ===================================================================== * 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 */ --border-2: #2C3845; /* texto */ --text: #E6EDF3; /* texto primário (AA sobre --bg) */ --text-muted:#9AA7B4; /* secundário */ --text-dim: #6B7785; /* 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-2);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)} .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} .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