/* ══════════════════════════════════════════════════════════════════ gecont.css — Identidade Visual Gecont Modo escuro como padrão; .light no activa modo claro. ══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ── Variáveis — Modo Escuro (padrão) ─────────────────────────── */ :root { /* Brand */ --g-blue: #1A3A8F; --g-blue-mid: #2B4FAA; --g-blue-light: #4B6FCC; --g-blue-dark: #0D1B4A; --g-amber: #F5A623; --g-amber-light: #FAC05E; --g-amber-dark: #C47D0A; /* Superfícies — escuro */ --bg-page: #0B1228; --bg-surf: #111B3A; --bg-surf2: #1A2750; --bg-surf3: #223066; --border-c: rgba(75,111,204,0.15); --border-c2: rgba(75,111,204,0.25); /* Texto — escuro */ --text-1: #EEF2FF; --text-2: #8899CC; --text-3: #7A8FC4; /* era #6B7DB8 — elevado para ratio ≥4.5:1 sobre --bg-surf */ /* Status */ --s-pend: #EF4444; --s-decl: #F5A623; --s-env: #22C55E; /* Regimes */ --r-sn: #4B6FCC; --r-lp: #F5A623; --r-mei: #22C55E; /* Anexos */ --anx-i: #3B82F6; --anx-ii: #F97316; --anx-iii: #22C55E; --anx-iv: #A855F7; --anx-v: #EAB308; /* Calc table specific */ --ct-calc-bg: rgba(0,0,0,0.22); /* Hover/zebra da tabela */ --table-hover: rgba(26,58,143,0.10); --table-stripe: rgba(26,58,143,0.04); /* Layout */ --sidebar-w: 220px; --radius: 8px; --radius-lg: 12px; /* Compat com style.css */ --bg-page-old: #0B1228; --bg-card: #111B3A; --bg-dark: #0B1228; --bg-dark2: #111B3A; --bg-dark3: #1A2750; --text-primary: #EEF2FF; --text-muted: #8899CC; --border: rgba(75,111,204,0.2); --accent-blue: #4B6FCC; --accent-green: #22C55E; --accent-orange: #F5A623; --accent-red: #EF4444; --accent-purple: #A855F7; --accent-cyan: #22C55E; --accent: #F5A623; /* ── Dash 4 design tokens — dark mode ──────────────────────────── */ --Dash-Fill-Inverse-Strong: #1A2750; --Dash-Fill-Interactive-Strong:#4B6FCC; --Dash-Fill-Interactive-Weak: rgba(75,111,204,0.18); --Dash-Fill-Primary-Hover: rgba(75,111,204,0.15); --Dash-Fill-Primary-Active: rgba(75,111,204,0.28); --Dash-Fill-Disabled: rgba(75,111,204,0.15); --Dash-Text-Strong: #EEF2FF; --Dash-Text-Primary: #EEF2FF; --Dash-Text-Weak: #8899CC; --Dash-Text-Disabled: rgba(136,153,204,0.55); --Dash-Stroke-Strong: rgba(75,111,204,0.35); --Dash-Stroke-Weak: rgba(75,111,204,0.15); --Dash-Shading-Strong: rgba(0,0,0,0.55); --Dash-Shading-Weak: rgba(0,0,0,0.3); } /* ── Modo Claro ────────────────────────────────────────────────── */ html.light { --bg-page: #F4F6FB; --bg-surf: #FFFFFF; --bg-surf2: #F1F5F9; --bg-surf3: #E8EDF8; --border-c: rgba(0,0,0,0.07); --border-c2: rgba(0,0,0,0.12); --text-1: #0B1228; --text-2: #475569; --text-3: #4A5F70; /* mais escuro que o dark — ratio ≥4.5:1 sobre fundo branco */ /* Status — ajustados para fundo claro */ --s-pend: #DC2626; --s-decl: #B45309; --s-env: #16A34A; /* Regimes — ajustados para fundo claro */ --r-sn: #1D4ED8; --r-lp: #B45309; --r-mei: #16A34A; /* Calc table specific — light */ --ct-calc-bg: rgba(75,111,204,0.06); /* Hover/zebra da tabela — azul visível no fundo claro */ --table-hover: rgba(26,58,143,0.07); --table-stripe: rgba(26,58,143,0.03); /* ── Dash 4 design tokens — light mode (valores originais do Dash) */ --Dash-Fill-Inverse-Strong: #fff; --Dash-Fill-Interactive-Strong:#7f4bc4; --Dash-Fill-Interactive-Weak: rgba(0,30,128,0.04); --Dash-Fill-Primary-Hover: rgba(0,18,77,0.04); --Dash-Fill-Primary-Active: rgba(0,18,77,0.08); --Dash-Fill-Disabled: rgba(0,24,102,0.1); --Dash-Text-Strong: rgba(0,9,38,0.9); --Dash-Text-Primary: rgba(0,18,77,0.87); --Dash-Text-Weak: rgba(0,12,51,0.65); --Dash-Text-Disabled: rgba(0,21,89,0.6); --Dash-Stroke-Strong: rgba(0,18,77,0.45); --Dash-Stroke-Weak: rgba(0,24,102,0.1); --Dash-Shading-Strong: rgba(22,23,24,0.35); --Dash-Shading-Weak: rgba(22,23,24,0.2); /* Compat */ --bg-card: #FFFFFF; --bg-dark: #F4F6FB; --bg-dark2: #FFFFFF; --bg-dark3: #F1F5F9; --text-primary: #0B1228; --text-muted: #475569; --border: rgba(0,0,0,0.1); } /* ── Reset Base ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: 'Inter', 'DM Sans', sans-serif; background: var(--bg-page); color: var(--text-1); font-size: 14px; line-height: 1.5; transition: background 0.25s, color 0.25s; } /* ── Foco visível (navegação por teclado — WCAG 2.4.7) ──────────── */ :focus-visible { outline: 2px solid var(--g-blue-light); outline-offset: 2px; border-radius: 4px; } /* Suprimir outline apenas para mouse (não teclado) */ :focus:not(:focus-visible) { outline: none; } /* ── Bootstrap overrides ────────────────────────────────────────── */ body { background-color: var(--bg-page) !important; color: var(--text-1) !important; } h1, h2, h3, h4 { font-family: 'Inter', 'Syne', sans-serif; font-weight: 600; } /* ── Layout ─────────────────────────────────────────────────────── */ .app-container { display: flex; min-height: 100vh; background: var(--bg-page); } .main-content { margin-left: var(--sidebar-w); flex: 1; padding: 24px; min-height: 100vh; background: var(--bg-page); transition: background 0.25s; } /* ── Sidebar ────────────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--bg-surf); display: flex; flex-direction: column; z-index: 100; border-right: 0.5px solid var(--border-c); transition: background 0.25s; overflow: hidden; } /* Barra de gradiente no topo */ .sidebar::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, var(--g-blue), var(--g-amber)); flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 0.5px solid var(--border-c); } /* Ícone quadrado 30×30 */ .brand-icon { width: 30px; height: 30px; background: var(--g-blue); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; letter-spacing: -0.5px; } .brand-icon .ge { color: var(--g-amber); } .brand-icon .cont { color: #ffffff; } .brand-name { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--text-1); letter-spacing: 0.3px; } .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; overflow-y: auto; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; color: var(--text-2); text-decoration: none; font-size: 0.82rem; font-weight: 500; transition: background 0.15s, color 0.15s; position: relative; } .nav-link .nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; transition: background 0.15s; } .nav-link:hover { background: rgba(26,58,143,0.2); color: var(--text-1); } .nav-link:hover .nav-dot { background: var(--text-2); } .nav-link.active { background: rgba(26,58,143,0.4); color: var(--g-amber); } .nav-link.active .nav-dot { background: var(--g-amber); } .sidebar-footer { padding: 12px 14px; border-top: 0.5px solid var(--border-c); display: flex; align-items: center; justify-content: space-between; } .sidebar-version { font-size: 0.75rem; color: var(--text-2); } /* Toggle modo claro/escuro */ .theme-toggle { background: var(--bg-surf2); border: 0.5px solid var(--border-c2); border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 0.85rem; color: var(--text-2); line-height: 1; transition: background 0.15s, color 0.15s; } .theme-toggle:hover { background: var(--bg-surf3); color: var(--text-1); } /* ── Page header ────────────────────────────────────────────────── */ .page-header { margin-bottom: 24px; } .page-title { font-size: 1.35rem; font-weight: 700; color: var(--text-1); } .page-subtitle { color: var(--text-2); font-size: 0.85rem; margin-top: 3px; } /* ── Panel / Card ───────────────────────────────────────────────── */ .panel { background: var(--bg-surf); border-radius: var(--radius); border: 0.5px solid var(--border-c); padding: 20px; margin-bottom: 20px; transition: background 0.25s, border-color 0.25s; } .panel-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: 16px; } /* ── KPI Cards ──────────────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .kpi-card { background: var(--bg-surf); border-radius: var(--radius); padding: 14px 16px; border: 0.5px solid var(--border-c); cursor: pointer; transition: border-color 0.15s, transform 0.15s, background 0.25s; position: relative; overflow: hidden; } .kpi-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; opacity: 0.6; background: currentColor; } .kpi-card:hover { border-color: var(--border-c2); transform: translateY(-1px); } .kpi-value { font-family: 'Inter', 'Syne', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1; margin-bottom: 5px; } .kpi-label { font-size: 0.75rem; color: var(--text-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } /* ── Data Table (lista de clientes) ─────────────────────────────── */ .data-table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .data-table th { background: var(--bg-surf2); padding: 9px 12px; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); border-bottom: 0.5px solid var(--border-c2); white-space: nowrap; } .data-table th:hover { background: var(--bg-surf3); } .data-table td { padding: 9px 12px; border-bottom: 0.5px solid var(--border-c); color: var(--text-1); transition: background 0.1s; } .data-table tr:hover td { background: var(--table-hover); } .data-table tr:nth-child(even) td { background: var(--table-stripe); } .data-table tr:nth-child(even):hover td { background: var(--table-hover); } .data-table tr:last-child td { border-bottom: none; } /* ── Calculation Table ──────────────────────────────────────────── */ .calc-table-wrap { overflow-x: auto; margin-top: 12px; } .calc-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; } .calc-table th { background: var(--bg-surf2); color: var(--text-3); padding: 7px 5px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; text-align: center; border: 0.5px solid var(--border-c); } .calc-table th.th-section { background: var(--bg-surf3); color: var(--g-amber); font-size: 0.72rem; } .calc-table td { padding: 3px 4px; border: 0.5px solid var(--border-c); text-align: right; vertical-align: middle; } .calc-table td.td-mes { background: var(--bg-surf2); font-weight: 700; text-align: center; color: var(--text-2); white-space: nowrap; } .calc-table td.td-result { background: rgba(34,197,94,0.08); color: var(--s-env); font-weight: 600; } .calc-table td.td-alerta-amarelo { background: rgba(245,166,35,0.1); color: var(--s-decl); } .calc-table td.td-alerta-vermelho { background: rgba(239,68,68,0.1); color: var(--s-pend); } .calc-table tr.row-quarter td { background: rgba(26,58,143,0.2); font-weight: 600; } .calc-table td.td-calc { background: rgba(0,0,0,0.25); color: var(--text-2); font-size: 0.78rem; font-weight: 600; text-align: right; padding: 3px 6px; } .calc-table tr.futuro { opacity: 0.45; } /* Cell input dentro da calc-table */ .cell-input { width: 90px !important; min-width: 70px; text-align: right; font-size: 0.78rem; padding: 2px 5px !important; height: 26px !important; border: 0.5px solid rgba(75,111,204,0.2) !important; border-radius: 4px !important; background: rgba(26,58,143,0.18) !important; color: var(--text-1) !important; } .cell-input:focus { border-color: var(--g-blue-light) !important; outline: none; background: rgba(26,58,143,0.28) !important; } /* Dash Input override para calc tables */ .calc-table .form-control, .calc-table input.form-control { background: rgba(26,58,143,0.18) !important; border: 0.5px solid rgba(75,111,204,0.2) !important; color: var(--text-1) !important; border-radius: 4px !important; padding: 2px 5px !important; height: 26px !important; font-size: 0.78rem !important; } .calc-table .form-control:focus, .calc-table input.form-control:focus { border-color: var(--g-blue-light) !important; outline: none !important; box-shadow: none !important; background: rgba(26,58,143,0.28) !important; } /* Campos calculados (fundo escuro, não editável) */ .calc-table td[style*="f1f5f9"], .calc-table td[style*="f8fafc"] { background: rgba(0,0,0,0.22) !important; } /* ── Painel distribuição / segregação ───────────────────────────── */ .painel-distribuicao { background: var(--bg-surf2); border: 0.5px solid var(--border-c2); border-radius: 6px; padding: 10px; font-size: 0.75rem; min-width: 260px; color: var(--text-1); } .painel-segregacao { background: rgba(34,197,94,0.06); border: 0.5px solid rgba(34,197,94,0.2); border-radius: 6px; padding: 10px; font-size: 0.75rem; min-width: 280px; } .card-texto-nf { background: rgba(75,111,204,0.08); border: 0.5px solid rgba(75,111,204,0.2); border-radius: 6px; padding: 10px; font-size: 0.75rem; min-width: 280px; } /* ── Botão expand ────────────────────────────────────────────────── */ .btn-expand { background: var(--bg-surf2); border: 0.5px solid var(--border-c2); border-radius: 4px; cursor: pointer; padding: 2px 6px; font-size: 0.75rem; color: var(--text-2); line-height: 1; } .btn-expand:hover { background: var(--bg-surf3); color: var(--text-1); } /* ── Form elements ──────────────────────────────────────────────── */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em; } .form-control { width: 100%; padding: 8px 12px; border: 0.5px solid var(--border-c2); border-radius: var(--radius); font-size: 0.875rem; background: var(--bg-surf2); color: var(--text-1); transition: border-color 0.15s, background 0.15s; } .form-control:focus { outline: none; border-color: var(--g-blue-light); box-shadow: 0 0 0 2px rgba(75,111,204,0.15); background: var(--bg-surf3); } .form-control::placeholder { color: var(--text-3); } /* ── Dash 4.x Dropdown — dark-mode override ─────────────────────── */ /* Trigger wrapper */ .dash-dropdown { background: var(--bg-surf2) !important; border: 0.5px solid var(--border-c2) !important; border-radius: var(--radius) !important; font-size: 0.85rem !important; color: var(--text-1) !important; } .dash-dropdown:hover { background: var(--bg-surf3) !important; } /* Placeholder / value text */ .dash-dropdown .dash-dropdown-value { color: var(--text-1) !important; } .dash-dropdown .dash-dropdown-placeholder { color: var(--text-3) !important; } /* Dropdown popup content (the list that opens) */ .dash-dropdown-content { background: var(--bg-surf2) !important; border: 0.5px solid var(--border-c2) !important; border-radius: var(--radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; z-index: 9999 !important; } /* Search box inside dropdown */ .dash-dropdown-search { background: var(--bg-surf3) !important; border: 0.5px solid var(--border-c2) !important; color: var(--text-1) !important; border-radius: 4px !important; } .dash-dropdown-search::placeholder { color: var(--text-3) !important; } /* Options list */ .dash-dropdown-options { background: var(--bg-surf2) !important; } /* Individual option */ .dash-dropdown-option { color: var(--text-1) !important; background: var(--bg-surf2) !important; font-size: 0.875rem !important; } .dash-dropdown-option:hover, .dash-dropdown-option.dash-dropdown-option--highlighted { background: var(--bg-surf3) !important; color: var(--text-1) !important; } .dash-dropdown-option.dash-dropdown-option--selected, .dash-dropdown-option[aria-selected="true"] { background: rgba(26,58,143,0.45) !important; color: var(--text-1) !important; } /* Light mode revert */ html.light .dash-dropdown { background: #fff !important; border-color: rgba(0,0,0,0.15) !important; color: #0B1228 !important; } html.light .dash-dropdown-content { background: #fff !important; border-color: rgba(0,0,0,0.12) !important; } html.light .dash-dropdown-options, html.light .dash-dropdown-option { background: #fff !important; color: #0B1228 !important; } html.light .dash-dropdown-option:hover, html.light .dash-dropdown-option.dash-dropdown-option--highlighted { background: #f1f5f9 !important; } html.light .dash-dropdown-search { background: #f8fafc !important; color: #0B1228 !important; } /* ── Dash Dropdown override (legacy React-Select / Dash <4) ─────── */ .dash-dropdown .Select-control { border: 0.5px solid var(--border-c2) !important; border-radius: var(--radius) !important; background: var(--bg-surf2) !important; color: var(--text-1) !important; font-size: 0.875rem; } .dash-dropdown .Select-value-label { color: var(--text-1) !important; } .dash-dropdown .Select-placeholder { color: var(--text-3) !important; } .dash-dropdown .Select-menu-outer { background: var(--bg-surf2) !important; border: 0.5px solid var(--border-c2) !important; border-radius: var(--radius) !important; } .dash-dropdown .Select-option { background: var(--bg-surf2) !important; color: var(--text-1) !important; } .dash-dropdown .Select-option:hover, .dash-dropdown .Select-option.is-focused { background: var(--bg-surf3) !important; } .dash-dropdown .Select-option.is-selected { background: rgba(26,58,143,0.5) !important; } .dash-dropdown .Select-arrow { border-top-color: var(--text-2) !important; } .dash-dropdown .Select-clear { color: var(--text-2) !important; } /* dbc.Input / dbc.Textarea override */ .form-control[type="text"], .form-control[type="number"], .form-control[type="date"], .form-control[type="password"], input.form-control, textarea.form-control { background: var(--bg-surf2) !important; border: 0.5px solid var(--border-c2) !important; color: var(--text-1) !important; } input.form-control:focus, textarea.form-control:focus { background: var(--bg-surf3) !important; border-color: var(--g-blue-light) !important; box-shadow: 0 0 0 2px rgba(75,111,204,0.15) !important; } textarea.form-control::placeholder { color: var(--text-3) !important; } /* dbc.Select (Bootstrap 5