/* ==========================================================================
ESCALA DE BREAKPOINTS - fonte unica deste arquivo
==========================================================================
Todo @media deste arquivo usa um destes seis valores e nenhum outro. Antes
havia doze valores distintos (1600, 1439, 1280, 1180, 1100, 1039, 900, 740,
720, 699, 520, 460), cada um nascido de uma correcao pontual: dois degraus a
80px de distancia nao descrevem dois dispositivos, descrevem duas sessoes de
trabalho diferentes.
520px telefone
720px telefone grande / tablet retrato
900px tablet - abaixo daqui a sidebar vira gaveta sobreposta
1180px laptop pequeno
1439px desktop - acima daqui cabe a fita de 12 chips de mes
2000px ultrawide (min-width) - o conteudo para de esticar e centraliza
As quatro larguras auditadas caem cada uma em uma faixa distinta: 376 (<=520),
720, 900 e 1180. 1440 e 2200 cobrem as duas faixas largas.
Por que comentario e nao custom property: media query nao le var(). O valor
tem que ser literal na condicao, entao a unica forma de ter fonte unica sem
pre-processador - e este projeto nao tem, por decisao - e esta tabela mais a
disciplina de nao inventar um setimo valor. Se um layout precisar de um
degrau novo, ele entra AQUI primeiro.
Sincronia com o JS: src/app.js decide por matchMedia nos mesmos degraus
(520, 720, 900, 1439, 2000). Mudar um valor aqui sem mudar la desalinha o
CSS do comportamento.
========================================================================== */
/* ==========================================================================
TEMA E CORES - Apple HIG
Primitivas seguem a especificacao atual. Componentes usam apenas tokens
semanticos para preservar significado, contraste e adaptacao entre temas.
========================================================================== */
/* Fontes locais do Loba BI Design System; subconjuntos latinos. */
@font-face {
font-family: "IBM Plex Sans";
src: url("./assets/fonts/IBMPlexSans-400.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("./assets/fonts/IBMPlexSans-500.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("./assets/fonts/IBMPlexSans-600.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("./assets/fonts/IBMPlexSans-700.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("./assets/fonts/IBMPlexMono-400.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("./assets/fonts/IBMPlexMono-500.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("./assets/fonts/IBMPlexMono-600.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Condensed";
src: url("./assets/fonts/IBMPlexSansCondensed-500.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Condensed";
src: url("./assets/fonts/IBMPlexSansCondensed-600.woff2?v=20261017-design-system-v1") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer theme {
:root {
color-scheme: light;
--appearance-color-scheme: light;
/* Chevron dos selects nativos (regra única no fim do arquivo). */
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233a3a3c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Fundamentos do Loba BI Design System; comuns aos dois temas. */
--space-0: 0;
--space-0\.5: 2px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--duration-tooltip-delay: 2000ms;
--easing-standard: cubic-bezier(0.2, 0, 0, 1);
--easing-exit: cubic-bezier(0.4, 0, 1, 1);
--z-base: 0;
--z-table-header: 1;
--z-matrix-toolbar: 2;
--z-matrix-sticky: 3;
--z-matrix-loading: 8;
--z-local-overlay: 10;
--z-toolbar: 30;
--z-category-trigger: 40;
--z-filter-menu: 30;
--z-combobox-menu: 60;
--z-date-popover: 80;
--z-sidebar-scrim: 99;
--z-sidebar: 100;
--z-open-filter: 100;
--z-category-menu: 200;
--z-help-popover: 410;
--z-tooltip: 1000;
--z-dialog: 9990;
--z-dropdown-scrim: 9998;
--z-dropdown-trigger: 9999;
--z-dropdown-menu: 10000;
--z-date-preset: 10002;
--z-global-loading: 10010;
--opacity-disabled: 0.45;
--opacity-loading: 0.68;
--font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
--font-mono: "IBM Plex Mono", Consolas, "SFMono-Regular", Menlo, monospace;
--font-condensed: "IBM Plex Sans Condensed", "Arial Narrow", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
/* Cores fixas */
--system-black: #000000;
--system-off-black: #111111;
--system-off-white: #eeeeee;
--system-white: #ffffff;
--system-clear: transparent;
/* Cores de sistema - aparencia clara */
--system-red: rgb(233 21 45);
--system-red-destructive: #C4162C;
--system-orange: rgb(197 83 0);
--system-yellow: rgb(161 106 0);
--system-green: rgb(0 137 50);
--system-mint: rgb(0 133 117);
--system-teal: rgb(0 129 152);
--system-cyan: rgb(0 126 174);
/* MARCA (fork edita aqui): a cor de destaque. Editar --brand-accent aqui e nas
variantes escuro/alto-contraste abaixo muda o accent em TODA a UI (curva,
matriz, controles, links, foco), via --system-blue/--finance-accent. Texto
e logos ficam em src/brand.js. */
--brand-accent: rgb(63, 153, 222);
--brand-accent-secondary: rgb(117, 121, 227);
--system-blue: var(--brand-accent);
--system-indigo: var(--brand-accent-secondary);
--system-purple: rgb(176 47 194);
--system-pink: rgb(231 18 77);
--system-brown: rgb(149 109 81);
--system-gray: rgb(142 142 147);
--system-gray-2: rgb(174 174 178);
--system-gray-3: rgb(199 199 204);
--system-gray-4: rgb(209 209 214);
--system-gray-5: rgb(229 229 234);
--system-gray-6: rgb(242 242 247);
--system-gray-7: rgb(249, 249, 252);
/* Conteudo e hierarquia */
--label-primary: rgb(17, 17, 17);
--label-secondary: rgb(60 60 67 / 0.6);
--label-tertiary: rgb(60 60 67 / 0.3);
--label-quaternary: rgb(60 60 67 / 0.18);
--label-inverse: var(--system-white);
--placeholder-text: rgb(60 60 67 / 0.3);
--separator: rgb(60 60 67 / 0.29);
--separator-opaque: rgb(198 198 200);
--fill-primary: rgb(120 120 128 / 0.2);
--fill-secondary: rgb(120 120 128 / 0.16);
--fill-tertiary: rgb(118 118 128 / 0.12);
--fill-quaternary: rgb(116 116 128 / 0.08);
--background-primary: var(--system-gray-7);
--background-secondary: var(--system-gray-4);
--background-tertiary: var(--system-gray-3);
--background-grouped: var(--system-gray-7);
--background-grouped-secondary: var(--system-gray-4);
--background-grouped-tertiary: var(--system-gray-3);
/* #91: superficies semanticas do painel de Configuracoes/Usuarios/Status. O
corpo do painel (.settings-panel) iguala o card do Dashboard
(--background-primary, com a borda propria do painel); os chips e cabecalhos
internos (.settings-panel__status, .system-status__refresh, th) usam um fill
sutil. Ambos referenciam tokens theme-aware, entao valem para claro e escuro
sem redefinir no bloco [data-theme="dark"]. Antes eram indefinidos -> o painel
resolvia para transparente e destoava do fundo das outras paginas. */
--secondary-system-background: var(--background-primary);
--tertiary-system-background: var(--fill-tertiary);
--link: var(--system-blue);
--accent: var(--system-blue);
--focus-ring: var(--system-blue);
--shadow-color: rgb(0 0 0 / 0.18);
/* Navegacao */
--navigation-background: var(--background-primary);
--navigation-surface: var(--background-secondary);
--navigation-selection: var(--system-gray-4);
--navigation-item-background: var(--system-clear);
--navigation-item-hover-background: var(--fill-quaternary);
--navigation-item-pressed-background: var(--fill-secondary);
--navigation-item-selected-background: color-mix(in srgb, var(--system-blue) 13%, var(--navigation-background));
--navigation-item-selected-border: color-mix(in srgb, var(--system-blue) 48%, var(--separator));
--navigation-label: var(--label-primary);
--navigation-label-secondary: var(--label-secondary);
/* Controles e relatorios */
--control-background: var(--background-primary);
--control-hover-background: var(--fill-quaternary);
--control-link-label: color-mix(in srgb, var(--system-blue) 62%, var(--label-primary));
--control-selected-background: var(--system-blue);
--control-selected-label: var(--system-white);
--control-destructive: var(--system-red-destructive);
--finance-accent: var(--system-blue);
--finance-accent-label: var(--system-white);
--rule-value-background: color-mix(in srgb, var(--finance-accent) 18%, var(--background-primary));
--rule-value-label: var(--label-primary);
--rule-operator-label: var(--system-purple);
/* Valores (R$ e %) das tabelas do Financeiro, 20/10/2026: com o IBM Plex
os 12 px de antes (Arial) ficaram ~6% mais largos e mais pesados; 10,5 px
ocupam menos que o Arial antigo. Futuro ajuste por usuário (backlog)
troca só este token. */
--financial-value-font-size: 10.5px;
/* #165: aliases semanticos do painel de custos. Os componentes abaixo
consomem apenas este nivel; a paleta de sistema continua sendo a
primitiva substituivel por tema. */
--cost-accent: var(--system-cyan);
--cost-warning: var(--system-orange);
--cost-critical: var(--system-red);
--cost-selected-background: var(--cost-accent);
--cost-progress-fill: var(--cost-accent);
--table-outline: var(--system-white);
--table-frame-border: var(--system-gray-4);
--table-surface-background: var(--system-gray-7);
--table-cell-background: var(--system-gray-5);
--table-emphasis-background: var(--system-gray-3);
--table-grid: var(--system-gray-7);
--table-group-gap: var(--system-gray-7);
--table-header-background: var(--table-emphasis-background);
--table-header-label: var(--label-primary);
--table-row-header-background: var(--table-emphasis-background);
--table-row-header-label: var(--label-primary);
/* O par abaixo é o zebrado das linhas, e ele precisa de DOIS valores. Os
dois apontavam para `--table-cell-background`, então toda tabela pintava
a mesma cor duas vezes e a alternância não existia no tema claro (o
escuro sempre teve o par distinto, por isso o defeito era só aqui).
`--table-row-alternate-background` fica no tom da célula de propósito:
é o tom FORTE, usado também por linha de grupo e totalizador. Quem
clareia é a linha comum, para que nada que hoje é gray-5 mude. */
--table-row-background: var(--system-gray-6);
--table-row-alternate-background: var(--table-cell-background);
--table-total-background: var(--table-emphasis-background);
--table-total-label: var(--label-primary);
--table-tree-control: var(--label-primary);
--table-tree-control-background: var(--system-black);
--table-tree-control-label: var(--system-white);
--table-tree-control-expanded-background: var(--system-white);
--table-tree-control-expanded-label: var(--system-black);
/* Matrizes operacionais: texto sistemico por aparencia e divisorias
legiveis. Entram aqui, dentro do `@layer theme`, porque sao declaracao
UNICA - nenhum outro ponto do arquivo redeclara as duas. Token sem
concorrente nao e afetado por camada em cascata (ver secao 21.2 do
handoff: a camada perde de qualquer coisa fora dela, e o que nao tem
concorrente nao perde de nada). */
--matricial-table-label: var(--system-black);
--matricial-table-divider: color-mix(in srgb, var(--system-black) 38%, var(--table-cell-background));
--result-header-background: var(--finance-accent);
--result-header-label: var(--system-white);
--result-cell-background: color-mix(in srgb, var(--finance-accent) 18%, var(--background-primary));
--result-cell-label: var(--label-primary);
--category-valid-background: var(--system-green);
--category-valid-cell: color-mix(in srgb, var(--system-green) 18%, var(--background-primary));
--category-invalid-background: var(--status-warning-fill);
--category-invalid-cell: var(--status-warning-fill);
--metadata-label: rgb(60 60 67 / 0.76);
--standard-shadow: 0 6px 8px var(--shadow-color);
--shadow-small: 0 1px 3px var(--shadow-color);
--shadow-modal: 0 1px 2px var(--shadow-color), 0 8px 20px var(--shadow-color), 0 28px 72px var(--shadow-color);
--shadow-popover: 0 1px 2px var(--shadow-color), 0 8px 20px var(--shadow-color), 0 20px 48px var(--shadow-color);
--skeleton-surface-background: var(--system-gray-5);
--skeleton-cell-background: var(--system-gray-4);
--skeleton-cell-alternate-background: var(--system-gray-5);
--skeleton-emphasis-background: var(--system-gray-3);
--skeleton-grid: var(--system-gray-2);
--skeleton-shimmer: rgb(255 255 255 / 0.48);
--status-positive-fill: color-mix(in srgb, var(--system-green) 15%, var(--background-primary));
--status-negative-fill: color-mix(in srgb, var(--system-red) 12%, var(--background-primary));
/* Aviso (24/10/2026): todo aviso é amarelo, nunca neutro. Fundo, borda/traço e
texto/ícone do aviso; texto ≥ 7:1 sobre o fundo nos dois temas. */
--status-warning-fill: rgb(255 244 194);
--status-warning-border: rgb(217 166 0);
--status-warning-label: rgb(107 74 0);
--page-content-background: var(--system-gray-5);
--summary-positive-label: color-mix(in srgb, var(--system-green) 56%, var(--system-black));
--summary-negative-label: color-mix(in srgb, var(--system-red) 58%, var(--system-black));
/* Tom das % nos totalizadores de FUNDO FORTE no modo YoY (linha de caixa
verde; coluna TOTAL azul/indigo da result). O tom do tema
(--summary-*-label) e escuro no claro e some nesses fundos. Aqui uso o tom
CLARO (o mesmo do dark-mode) e o mantenho nos DOIS temas: definido so neste
:root e nao redefinido no bloco escuro, porque esses fundos sao os mesmos
verde/azul saturados em claro e escuro. --system-green e identico nos dois
temas; --system-red so muda de matiz, ambos claros. */
--total-cell-tone-positive: color-mix(in srgb, var(--system-green) 18%, var(--system-white));
--total-cell-tone-negative: color-mix(in srgb, var(--system-red) 18%, var(--system-white));
/* Series analiticas - todas derivadas da paleta de sistema */
--chart-blue: var(--system-blue);
--chart-indigo: var(--system-indigo);
--chart-orange: var(--system-orange);
--chart-purple: var(--system-purple);
--chart-pink: var(--system-pink);
--chart-violet: color-mix(in srgb, var(--system-indigo) 55%, var(--system-purple));
--chart-yellow: var(--system-yellow);
--chart-red: var(--system-red);
--chart-teal: var(--system-teal);
--chart-green: var(--system-green);
--chart-cyan: var(--system-cyan);
--chart-sky: color-mix(in srgb, var(--system-blue) 65%, var(--system-cyan));
--engineering-realized-background: var(--system-blue);
}
:root[data-theme="dark"] {
color-scheme: dark;
--appearance-color-scheme: dark;
--status-warning-fill: rgb(59 50 12);
--status-warning-border: rgb(168 138 18);
--status-warning-label: rgb(244 208 26);
/* Chevron dos selects nativos (regra única no fim do arquivo). */
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e5e5ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Cores de sistema - aparencia escura */
--system-red: rgb(251, 81, 86);
--system-red-destructive: #FF6E6E;
--system-orange: rgb(245, 137, 55);
--system-yellow: rgb(244, 208, 26);
--system-green: rgb(0 137 50);
--system-mint: rgb(51, 199, 177);
--system-teal: rgb(27, 184, 198);
--system-cyan: rgb(35, 184, 238);
--brand-accent: rgb(63, 153, 222);
--brand-accent-secondary: rgb(117, 121, 227);
--system-purple: rgb(234 141 255);
--system-pink: rgb(255 138 196);
--system-brown: rgb(219 166 121);
--system-gray: rgb(142 142 147);
--system-gray-2: rgb(99 99 102);
--system-gray-3: rgb(72 72 74);
--system-gray-4: rgb(58 58 60);
--system-gray-5: rgb(44 44 46);
--system-gray-6: rgb(28 28 30);
--system-gray-7: rgb(20, 20, 22);
--label-primary: rgb(255 255 255);
--label-secondary: rgb(235 235 245 / 0.6);
--label-tertiary: rgb(235 235 245 / 0.3);
--label-quaternary: rgb(235 235 245 / 0.18);
--label-inverse: var(--system-black);
--placeholder-text: rgb(235 235 245 / 0.3);
--separator: rgba(108, 108, 112, 0.7);
--separator-opaque: rgb(56 56 58);
--fill-primary: rgb(120 120 128 / 0.36);
--fill-secondary: rgb(120 120 128 / 0.32);
--fill-tertiary: rgb(118 118 128 / 0.24);
--fill-quaternary: rgb(118 118 128 / 0.18);
--background-primary: var(--system-gray-7);
--background-secondary: var(--system-gray-5);
--background-tertiary: var(--system-gray-4);
--background-grouped: var(--system-gray-7);
--background-grouped-secondary: var(--system-gray-5);
--background-grouped-tertiary: var(--system-gray-4);
--shadow-color: rgba(69, 69, 69, 0.28);
--navigation-selection: var(--system-gray-4);
--control-selected-background: var(--system-blue);
--control-selected-label: var(--system-white);
--finance-accent-label: var(--system-white);
--table-outline: rgb(255 255 255 / 0.62);
--table-surface-background: var(--system-gray);
--table-cell-background: var(--system-gray-4);
--table-emphasis-background: var(--system-gray-6);
--table-grid: rgb(255 255 255 / 0.62);
--table-group-gap: color-mix(in srgb, var(--system-white) 62%, var(--table-header-background));
--table-header-background: var(--table-emphasis-background);
--table-header-label: var(--label-primary);
--table-row-header-background: var(--table-emphasis-background);
--table-row-header-label: var(--label-primary);
--table-row-background: var(--table-cell-background);
--table-row-alternate-background: var(--system-gray-5);
--table-total-background: var(--table-emphasis-background);
--table-total-label: var(--label-primary);
--table-tree-control: var(--label-primary);
--matricial-table-label: var(--system-white);
--matricial-table-divider: color-mix(in srgb, var(--system-white) 46%, var(--table-cell-background));
--result-cell-background: color-mix(in srgb, var(--finance-accent) 32%, var(--background-secondary));
--result-cell-label: var(--label-primary);
--metadata-label: rgb(235 235 245 / 0.76);
--standard-shadow: 0 6px 20px var(--shadow-color);
--skeleton-surface-background: var(--system-gray-5);
--skeleton-cell-background: var(--system-gray-4);
--skeleton-cell-alternate-background: var(--system-gray-5);
--skeleton-emphasis-background: var(--system-gray-3);
--skeleton-grid: var(--system-gray-2);
--skeleton-shimmer: rgb(255 255 255 / 0.12);
--page-content-background: var(--system-gray-2);
--summary-positive-label: color-mix(in srgb, var(--system-green) 18%, var(--system-white));
--summary-negative-label: color-mix(in srgb, var(--system-red) 18%, var(--system-white));
}
@media (prefers-contrast: more) {
:root {
--system-red: rgb(233 21 45);
--system-orange: rgb(197 83 0);
--system-yellow: rgb(161 106 0);
--system-green: rgb(0 137 50);
--system-mint: rgb(0 133 117);
--system-teal: rgb(0 129 152);
--system-cyan: rgb(0 126 174);
--brand-accent: rgb(30 110 244);
--brand-accent-secondary: rgb(86 74 222);
--system-purple: rgb(176 47 194);
--system-pink: rgb(231 18 77);
--system-brown: rgb(149 109 81);
--system-gray: rgb(108 108 112);
--system-gray-2: rgb(142 142 147);
--system-gray-3: rgb(174 174 178);
--system-gray-4: rgb(188 188 192);
--system-gray-5: rgb(216 216 220);
--system-gray-6: rgb(235 235 240);
}
:root[data-theme="dark"] {
--system-red: rgb(255 97 101);
--system-orange: rgb(255 160 86);
--system-yellow: rgb(254 223 67);
--system-green: rgb(74 217 104);
--system-mint: rgb(84 223 203);
--system-teal: rgb(59 221 236);
--system-cyan: rgb(109 217 255);
--brand-accent: rgb(92 184 255);
--brand-accent-secondary: rgb(167 170 255);
--system-purple: rgb(234 141 255);
--system-pink: rgb(255 138 196);
--system-brown: rgb(219 166 121);
--system-gray: rgb(174 174 178);
--system-gray-2: rgb(124 124 128);
--system-gray-3: rgb(84 84 86);
--system-gray-4: rgb(68 68 70);
--system-gray-5: rgb(54 54 56);
--system-gray-6: rgb(36 36 38);
}
}
}
/* #164 Utilizacao agregada: densidade de painel, sem tabela individual. */
.usage-page {
grid-template-rows: auto minmax(0, 1fr);
}
.usage-page__heading {
align-items: center;
}
.usage-periods {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px;
padding: 3px;
border: 1px solid var(--separator);
border-radius: 9px;
background: var(--tertiary-system-background);
}
.usage-periods button {
min-height: 34px;
padding: 6px 11px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--label-secondary);
font: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.usage-periods button[aria-pressed="true"] {
background: var(--control-selected-background);
color: var(--control-selected-label);
box-shadow: 0 1px 3px var(--shadow-color);
}
.usage-periods button:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.usage-periods button:disabled {
cursor: wait;
opacity: 0.68;
}
.usage-feedback {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.usage-grid {
min-height: 0;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: max-content;
align-content: start;
gap: 12px;
padding: 1px;
}
.usage-summary,
.usage-panel--wide,
.usage-empty-state {
grid-column: 1 / -1;
}
.usage-summary {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.usage-metric {
--usage-tone: var(--label-secondary);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
min-width: 0;
padding: 14px;
border: 1px solid var(--separator);
border-top: 3px solid var(--usage-tone);
border-radius: 8px;
background: var(--secondary-system-background);
}
.usage-metric.is-blue { --usage-tone: var(--accent); }
.usage-metric.is-green { --usage-tone: var(--summary-positive-label); }
.usage-metric__icon {
width: 22px;
height: 22px;
color: var(--usage-tone);
}
.usage-metric > div {
min-width: 0;
}
.usage-metric__label,
.usage-metric small {
display: block;
color: var(--label-secondary);
}
.usage-metric__label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.usage-metric strong {
display: block;
overflow: hidden;
margin-top: 5px;
font-size: clamp(18px, 1.7vw, 25px);
line-height: 1.05;
text-overflow: ellipsis;
white-space: nowrap;
}
.usage-metric small {
min-height: 28px;
margin-top: 6px;
font-size: 10px;
line-height: 1.35;
}
.usage-panel {
min-height: 0;
padding-bottom: 12px;
}
.usage-panel > header {
padding: 13px 14px 10px;
border-bottom: 1px solid var(--separator);
}
.usage-panel > header h3,
.usage-panel > header p {
margin: 0;
}
.usage-panel > header h3 {
font-size: 14px;
}
.usage-panel > header p {
margin-top: 3px;
color: var(--label-secondary);
font-size: 11px;
}
.usage-bars {
display: grid;
gap: 9px;
padding: 13px 14px 2px;
}
.usage-bar {
display: grid;
grid-template-columns: minmax(110px, 0.9fr) minmax(100px, 2fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
font-size: 11px;
}
.usage-bar > span:first-child {
overflow: hidden;
color: var(--label-secondary);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.usage-bar__track {
overflow: hidden;
height: 8px;
border-radius: 99px;
background: var(--tertiary-system-background);
}
.usage-bar__fill {
display: block;
height: 100%;
border-radius: inherit;
background: var(--accent);
}
.usage-bar strong {
min-width: 54px;
text-align: right;
}
.usage-daily {
overflow-x: auto;
display: flex;
align-items: stretch;
gap: 8px;
min-height: 156px;
padding: 15px 14px 4px;
}
.usage-daily__item {
display: grid;
grid-template-rows: 18px 100px 24px;
justify-items: center;
flex: 1 0 44px;
gap: 5px;
min-width: 44px;
color: var(--label-secondary);
font-size: 9px;
}
.usage-daily__item strong {
color: var(--label-primary);
font-size: 10px;
}
.usage-daily__item > span:nth-child(2) {
align-self: end;
width: min(22px, 70%);
min-height: 8px;
border-radius: 4px 4px 2px 2px;
background: var(--accent);
}
.usage-daily__item > span:last-child {
text-align: center;
white-space: nowrap;
}
.usage-recurrence {
display: flex;
align-items: baseline;
gap: 10px;
padding: 14px 14px 10px;
}
.usage-recurrence strong {
color: var(--accent);
font-size: 28px;
}
.usage-recurrence span {
color: var(--label-secondary);
font-size: 11px;
}
.usage-reasons {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 0 14px;
}
.usage-reasons > div {
display: grid;
gap: 3px;
padding: 9px;
border: 1px solid var(--separator);
border-radius: 6px;
background: var(--tertiary-system-background);
}
.usage-reasons span,
.usage-reasons small {
color: var(--label-secondary);
font-size: 10px;
}
.usage-reasons strong {
font-size: 15px;
}
@media (max-width: 1180px) {
.usage-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.usage-periods {
justify-content: flex-start;
}
}
@media (max-width: 720px) {
.usage-grid,
.usage-summary {
grid-template-columns: minmax(0, 1fr);
}
.usage-panel,
.usage-summary,
.usage-panel--wide,
.usage-empty-state {
grid-column: 1;
}
.usage-periods {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.usage-metric {
grid-template-columns: auto minmax(0, 1fr);
}
}
@media (max-width: 520px) {
.usage-page {
padding: 10px;
}
.usage-bar {
grid-template-columns: minmax(90px, 1fr) minmax(70px, 1.2fr) auto;
gap: 7px;
}
.usage-reasons {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
BASE E ESTRUTURA GLOBAL
========================================================================== */
/* Tabelas usam faixas externas apenas quando a barra está visível e necessária.
Demais superfícies mantêm barras sobrepostas, sem alterar sua geometria. */
:root {
--scrollbar-thumb: var(--label-secondary);
--scrollbar-thumb-hover: var(--label-secondary);
--scrollbar-thumb-active: var(--label-primary);
scrollbar-color: var(--scrollbar-thumb) transparent;
}
* { box-sizing: border-box; }
:root[data-scrollbars-ready],
:root[data-scrollbars-ready] * { scrollbar-width: none; }
:root[data-scrollbars-ready]::-webkit-scrollbar,
:root[data-scrollbars-ready] *::-webkit-scrollbar { width: 0; height: 0; }
.scroll-surface-rail {
position: fixed;
top: 0;
left: 0;
z-index: 6;
width: 16px;
height: 16px;
padding: 0;
background: transparent;
cursor: pointer;
touch-action: none;
user-select: none;
}
[data-table-scroll-surface] {
--table-surface-inset-inline: 0px;
--table-surface-inset-block-end: 0px;
}
:root[data-scrollbars-ready]:not([data-scrollbars="hidden"]) [data-table-scroll-vertical] {
max-inline-size: calc(100% - var(--table-surface-inset-inline) - var(--table-surface-inset-inline) - 16px);
margin-inline-end: calc(var(--table-surface-inset-inline) + 16px);
}
:root[data-scrollbars-ready]:not([data-scrollbars="hidden"]) [data-table-scroll-horizontal] {
margin-block-end: calc(var(--table-surface-inset-block-end) + 16px);
}
[data-table-scroll-surface] > .scroll-surface-rail {
background: var(--table-header-background);
}
:root[data-scrollbars="hidden"] .scroll-surface-rail,
.scroll-surface-rail[hidden] { display: none; }
.scroll-surface-rail__thumb {
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;
border-radius: var(--radius-pill);
background: var(--scrollbar-thumb);
}
.scroll-surface-rail:hover .scroll-surface-rail__thumb { background: var(--scrollbar-thumb-hover); }
.scroll-surface-rail.is-dragging .scroll-surface-rail__thumb { background: var(--scrollbar-thumb-active); }
.scroll-surface-rail:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (forced-colors: active) {
.scroll-surface-rail__thumb { background: ButtonText; }
.scroll-surface-rail:focus-visible { outline-color: Highlight; }
}
html {
height: 100%;
overflow: visible;
}
body {
margin: 0;
height: 100%;
overflow: hidden;
background: var(--background-grouped);
color: var(--label-primary);
color-scheme: var(--appearance-color-scheme);
font-family: var(--font-sans);
}
/* Controles nativos não herdam a fonte do documento: sem isto, botões, campos e
selects caem na fonte do sistema (Arial) e destoam do Design System. */
button,
input,
select,
textarea {
font-family: inherit;
}
.app-shell {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
width: 100%;
max-width: 100vw;
height: 100vh;
min-height: 0;
overflow: hidden;
transition: grid-template-columns 160ms ease;
}
.app-shell.is-collapsed {
grid-template-columns: 0 minmax(0, 1fr);
}
/* Splash de boot dissolvido da camada RESPONSIVIDADE (leva 14 do #10). E um
overlay global (fixed, inset:0, z-index alto) e classes unicas, sem concorrente
de cascata em lugar nenhum: move puro, a casa e a estrutura global. */
/* Splash de boot ------------------------------------------------------------
Cobre a janela entre o index.html chegar e o dashboard ter dados. Quem
justifica a peça e o retorno de /.auth/login/aad: ali a espera soma o perfil
de acesso e a primeira consulta, e sem isto a tela fica crua.
E removido do DOM pelo app.js (removeBootSplash), nao ocultado. Enquanto o no
existir ele tampa a tela, entao qualquer caminho de saida do boot - inclusive
erro e acesso negado - tem que passar pela remocao.
Onde calibrar: --boot-splash-logo-width (tamanho da marca).
#136: o splash e DARK FIXO nos dois temas (decisao do dono) — por isso as
cores abaixo sao literais, e nao tokens: token de tema inverte com o tema, e
aqui a pintura nao pode inverter. A barra passou de indeterminada (sliver em
loop) para percentual REAL, dirigido por marcarBootSplash no app.js. */
.boot-splash {
--boot-splash-logo-width: 72px;
position: fixed;
inset: 0;
z-index: 10010;
display: grid;
place-content: center;
justify-items: center;
gap: 20px;
background: #0b0b0c;
padding: 24px;
}
/* Monograma Lo (o mesmo do login e do favicon): L branco e "o" azul sobre o
fundo escuro dos dois temas. */
.boot-splash__logo {
width: var(--boot-splash-logo-width);
height: auto;
}
.boot-splash__track {
width: min(220px, 60vw);
height: 5px;
overflow: hidden;
border-radius: 999px;
background: rgb(255 255 255 / 0.14);
}
.boot-splash__bar {
position: relative;
width: 0%;
height: 100%;
overflow: hidden;
border-radius: inherit;
/* Barra sólida e branca: o splash é escuro nos dois temas. */
background: rgb(255 255 255);
transition: width 160ms linear;
}
.boot-splash__status {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
width: min(220px, 60vw);
column-gap: 12px;
}
.boot-splash__label {
margin: 0;
color: rgb(235 235 245 / 0.72);
font-size: 13px;
}
.boot-splash__percent {
color: rgb(255 255 255 / 0.92);
font-size: 13px;
font-variant-numeric: tabular-nums;
font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.boot-splash__bar {
transition: none;
}
}
/* ==========================================================================
NAVEGACAO LATERAL - Sidebar, modulos e paginas
========================================================================== */
.sidebar {
position: relative;
display: flex;
min-height: 0;
flex-direction: column;
overflow: hidden;
background: var(--system-gray);
transition: width 120ms ease, opacity 120ms ease;
}
.sidebar::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background-color: var(--system-gray);
pointer-events: none;
}
.icon-button-close {
position: absolute;
top: 24px;
right: 8px;
z-index: 2;
width: 32px;
height: 32px;
border: 2px;
border-radius: var(--radius-sm);
background: var(--system-clear);
cursor: pointer;
display: grid;
place-items: center;
padding: var(--space-0);
}
.icon-button-close::before {
content: "";
transform: rotate(45deg);
transition: border-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}
.sidebar-container {
min-height: 0;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
/* Abrir módulos pode exigir rolagem sem mudar a largura dos botões. */
transition: opacity 120ms ease;
margin: 0;
border-radius: 0;
border-top: 1px solid var(--label-primary);
will-change: opacity, transform;
}
.app-shell.is-collapsed .sidebar > * {
opacity: 0;
pointer-events: none;
}
.brand {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--label-primary);
padding: 0 18px;
}
.brand__logo {
display: block;
width: 156px;
max-width: 100%;
height: auto;
object-fit: contain;
}
.page-list {
padding: 12px;
}
.page-section {
margin-top: 0px;
}
.page-section:first-child {
margin-top: -24px;
}
.page-section__title {
height: 18px;
display: flex;
align-items: center;
color: var(--label-primary);
font-family: var(--font-mono);
letter-spacing: 0;
font-size: 12px;
font-weight: 500;
margin-top: 32px;
text-transform: uppercase;
}
.page-section__items {
display: grid;
gap: 6px;
margin-top: 2px;
}
.page-button {
position: relative;
height: 32px;
width: 100%;
margin-top: 1px;
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
overflow: hidden;
padding: 0 8px 0 10px;
letter-spacing: 0;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
transition: background-color 130ms ease, color 130ms ease, box-shadow 130ms ease, transform 80ms ease;
}
/* Qualificador de domínio (% Loba / ERP) despriorizado: menor e mais opaco que o
nome-base, no título da página e no botão da sidebar (#88). Herda a cor do
contexto (currentColor) e só reduz a opacidade — assim segue legível tanto no
botão ativo (que inverte fundo/texto de forma diferente em cada tema) quanto
no título. */
.report-name__qualifier {
font-size: 0.82em;
font-weight: 500;
opacity: 0.6;
}
.page-button:not(.is-active):not(:disabled):not(.page-button--disabled):active {
transform: translateY(1px);
}
.page-button:not(:disabled):not(.page-button--disabled):focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.page-button.is-active {
filter: none;
pointer-events: none;
}
.page-button.is-active::before {
position: absolute;
top: 5px;
bottom: 5px;
left: 0;
width: 4px;
border-radius: 0 999px 999px 0;
content: "";
background: var(--system-blue);
pointer-events: none;
}
.page-button.is-active:hover,
.page-button.is-active:active {
filter: none;
pointer-events: none;
}
.page-button--disabled {
filter: opacity(60%);
cursor: not-allowed;
background: color-mix(in srgb, var(--system-gray) 55%, var(--label-primary));
position: relative;
height: 32px;
width: 100%;
margin-top: 2px;
border: 0;
border-radius: var(--radius-sm);
color: color-mix(in srgb, var(--system-white) 90%, var(--system-clear));
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
overflow: hidden;
padding: 0 8px 0 10px;
letter-spacing: 0;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
transition: background 130ms ease, color 130ms ease;
}
/* Cores da navegacao lateral. Vinham de `APLICACAO SEMANTICA DOS TEMAS POR
COMPONENTE`, que aplicava cor a distancia da forma; leva 5 do #10. A posicao
de cada bloco foi medida com o CSSOM (`scripts/prova-visual/cascata.mjs`):
nenhuma destas declaracoes cruza concorrente de mesma especificidade daqui
ate onde estava. */
.sidebar,
.brand {
background: var(--navigation-background);
color: var(--navigation-label);
}
.sidebar::after,
.brand {
border-color: var(--separator);
}
.sidebar-container {
border-color: var(--separator);
background: var(--navigation-background);
}
:root[data-theme="light"] .brand__logo {
filter: invert(1);
}
:root[data-theme="dark"] .brand__logo {
filter: none;
}
.app-shell.is-financeiro .page-button.is-active::before {
background: var(--finance-accent);
}
/* Cabecalho de modulo da sidebar e botao de voltar. Vinham da camada
SIDEBAR CONTINUA; as seis sao LIVRE no oraculo da cascata - nenhum
concorrente de mesma especificidade em lugar nenhum do arquivo - entao
pousam na casa do proprio componente, que e esta secao. */
.sidebar-module-heading {
position: relative;
display: grid;
height: 48px;
flex: 0 0 48px;
place-items: center;
overflow: hidden;
}
.sidebar-module-heading .sidebar-module-label {
height: 32px;
margin: 0;
transform: translateX(0);
transition: transform 190ms ease;
}
/* #135: fade de entrada a cada troca de titulo (o texto ja assentou sincrono
no JS; so a opacidade anima). Animacao, e nao transition, para reiniciar por
reflow em trocas seguidas. */
.sidebar-module-heading .sidebar-module-label.is-trocando {
animation: sidebar-titulo-fade 240ms ease;
}
@keyframes sidebar-titulo-fade {
from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.sidebar-module-heading .sidebar-module-label.is-trocando {
animation: none;
}
}
.sidebar-module-heading.has-back .sidebar-module-label {
transform: translateX(13px);
}
.sidebar-module-heading .sidebar-back {
position: absolute;
z-index: 2;
top: 8px;
left: 8px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
margin: 0;
padding: 0;
border-radius: 999px;
opacity: 0;
transform: translateX(-12px);
pointer-events: none;
transition: opacity 190ms ease, transform 190ms ease, filter 140ms ease;
}
.sidebar-module-heading .sidebar-back.is-visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.sidebar-module-heading .sidebar-back:hover,
.sidebar-module-heading .sidebar-back:focus-visible {
background: var(--system-clear);
filter: brightness(0.72);
}
/* A disputa do botao de pagina, vinda da faixa que a leva 8 nomeou. Ela estava
em tres pontos afastados do arquivo; a leva 8 juntou os tres na ordem
original, e a 9 trouxe o grupo para a casa dele. A ordem e o unico criterio -
as tres regras empatam em especificidade, e foi so por isso que a terceira
precisou existir. O piso medido e a regra de `.page-button` desta mesma secao,
acima; teto, nenhum.
Aqui existia a PRIMEIRA das duas copias identicas de
`.page-button.page-button--disabled` (mesmo seletor, mesmas quatro
declaracoes, mesmos valores). A segunda continua no fim desta secao, abaixo.
Apagada, nao movida, na leva 10 - e sem medir nada, porque nao ha o que
medir: duas regras de mesmo seletor empatam em especificidade e a de baixo
vem depois, entao a de cima nunca era a declaracao vencedora de propriedade
nenhuma em elemento nenhum. O que existe entre as duas nao muda isso - o que
vence a de cima tambem esta antes da de baixo, e perde para ela. */
.sidebar-back:hover {
background: var(--navigation-selection);
color: var(--navigation-label);
}
/* Ajustes finais mantidos no fim da cascata. */
.page-button.page-button--disabled,
.page-button.page-button--disabled:hover,
.page-button.page-button--disabled:focus-visible { background: var(--system-clear); color: inherit; filter: none; opacity: 0.36; }
/* ==========================================================================
AREA DE TRABALHO E TOPO - Workspace, topbar e conta
========================================================================== */
.workspace {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
/* A coluna nunca foi declarada, e coluna implicita e dimensionada pelo
CONTEUDO: bastava a topbar pedir mais do que a area de trabalho tem para a
coluna crescer e ser recortada pelo `overflow: hidden` daqui. O sintoma nao
e scroll horizontal - e conteudo cortado no canto direito, invisivel para o
criterio binario do scroll.mjs. Medido no card #31 na faixa de 901-920px,
onde a sidebar ainda ocupa 280px: a topbar pedia 626,5px numa coluna de
621px. Com `minmax(0, 1fr)` a coluna e a largura da regiao, e quem cede e o
titulo, que ja tem reticencias. */
grid-template-columns: minmax(0, 1fr);
min-width: 0;
min-height: 0;
max-width: 100%;
overflow: hidden;
background: var(--background-grouped);
color: var(--label-primary);
}
.topbar {
height: 72px;
display: flex;
align-items: center;
gap: 14px;
padding: 0 12px 0 6px;
border-bottom: 1px solid var(--system-gray);
background-color: var(--system-black);
color: var(--system-white);
}
/* Estados comuns: componentes novos entram nesta família, sem copiar estados
para folhas de página. Variantes semânticas conservam sua seleção própria. */
:is(
.icon-button, .icon-button-close, .topbar-icon-button, .topbar-icon-text-button, .status-pill, .matrix-tree-toggle,
.financial-control-button, .financial-matrix-toolbar__select,
.financial-value-mode__switch, .financial-value-mode__info,
.filter-select, .filter-chips button, .filter-menu button, .filter-menu__check,
:is(.source-switcher select, .source-switcher__trigger), .theme-menu__trigger, .theme-menu__item, .account-menu__item,
.engineering-filter select, .engineering-filter input,
.engineering-date-field__value, .engineering-date-field__toggle,
.engineering-date-inputs input, .engineering-date-popover__actions button,
.engineering-calendar__navigation, .engineering-calendar__days button,
.engineering-date-preset__trigger, .engineering-date-preset__option,
.assistente-modal button, .assistente-modal input, .assistente-modal textarea,
.assistente-modal__botao, .settings-access-form input, .settings-access-form select,
.settings-access-table select, .settings-access-combobox__option,
.api-keys-form input, .api-keys-form select, .api-keys-form textarea, .api-keys-saved input,
.notification-item__action, .procurement-ranking__name, .procurement-data-details > summary,
button.summary-card
) {
transition: background-color var(--duration-fast) var(--easing-standard),
border-color var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard),
box-shadow var(--duration-fast) var(--easing-standard),
opacity var(--duration-fast) var(--easing-standard);
}
:is(
.icon-button, .icon-button-close, .topbar-icon-button, .topbar-icon-text-button, .status-pill, .matrix-tree-toggle,
.financial-control-button, .financial-matrix-toolbar__select,
.financial-value-mode__switch, .financial-value-mode__info,
.filter-select, .filter-chips button, .filter-menu button, .filter-menu__check,
.filter-menu__search input, :is(.source-switcher select, .source-switcher__trigger),
.theme-menu__trigger, .theme-menu__item, .account-menu__item,
.engineering-filter select, .engineering-filter input,
.engineering-date-field__value, .engineering-date-field__toggle,
.engineering-date-inputs input, .engineering-date-popover__actions button,
.engineering-calendar__navigation, .engineering-calendar__days button,
.engineering-date-preset__trigger, .engineering-date-preset__option,
.assistente-modal button, .assistente-modal input, .assistente-modal textarea,
.assistente-modal__botao, .settings-access-form input, .settings-access-form select,
.settings-access-table select, .settings-access-combobox__option,
.api-keys-form input, .api-keys-form select, .api-keys-form textarea, .api-keys-saved input,
.notification-item__action, .procurement-ranking__name, .procurement-data-details > summary,
button.summary-card
):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
:where(
.icon-button, .icon-button-close, .topbar-icon-button, .topbar-icon-text-button, .status-pill, .matrix-tree-toggle,
.financial-control-button, .financial-matrix-toolbar__select,
.financial-value-mode__switch, .financial-value-mode__info,
.filter-select, .filter-chips button, .filter-menu button, .filter-menu__check,
.theme-menu__trigger, .theme-menu__item, .account-menu__item,
.engineering-date-field__toggle, .engineering-date-popover__actions button,
.engineering-calendar__navigation, .engineering-calendar__days button,
.engineering-date-preset__trigger, .engineering-date-preset__option,
.assistente-modal button, .assistente-modal__botao, .settings-access-combobox__option,
.notification-item__action, .procurement-ranking__name, .procurement-data-details > summary,
button.summary-card
):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
:is(
.icon-button, .icon-button-close, .topbar-icon-button, .topbar-icon-text-button, .status-pill, .matrix-tree-toggle,
.financial-control-button, .financial-matrix-toolbar__select,
.financial-value-mode__switch, .financial-value-mode__info,
.filter-select, .filter-chips button, .filter-menu button, .filter-menu__check,
.theme-menu__trigger, .theme-menu__item, .account-menu__item,
.engineering-date-field__toggle, .engineering-date-popover__actions button,
.engineering-calendar__navigation, .engineering-calendar__days button,
.engineering-date-preset__trigger, .engineering-date-preset__option,
.assistente-modal button, .assistente-modal__botao, .settings-access-combobox__option,
.notification-item__action, .procurement-ranking__name, .procurement-data-details > summary,
button.summary-card
):active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
box-shadow: inset 0 0 0 var(--space-12) var(--fill-secondary);
}
/* :disabled e ARIA compartilham a mesma tinta; o estado pendente não muda a caixa. */
:is(
.icon-button, .icon-button-close, .topbar-icon-button, .topbar-icon-text-button, .status-pill, .matrix-tree-toggle,
.financial-matrix-toolbar__select,
.financial-value-mode__switch, .financial-value-mode__info,
.filter-select, .filter-chips button, .filter-menu button, .filter-menu__check,
:is(.source-switcher select, .source-switcher__trigger), .theme-menu__trigger, .theme-menu__item, .account-menu__item,
.engineering-filter select, .engineering-filter input,
.engineering-date-field__value, .engineering-date-field__toggle,
.engineering-date-inputs input, .engineering-date-popover__actions button,
.engineering-calendar__navigation, .engineering-calendar__days button,
.engineering-date-preset__trigger, .engineering-date-preset__option,
.assistente-modal button, .assistente-modal input, .assistente-modal textarea,
.assistente-modal__botao, .settings-access-form input, .settings-access-form select,
.settings-access-table select, .settings-access-combobox__option,
.api-keys-form input, .api-keys-form select, .api-keys-form textarea, .api-keys-saved input,
.notification-item__action, .procurement-ranking__name,
button.summary-card
):is(:disabled, [aria-disabled="true"]) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}
:is(
.icon-button, .icon-button-close, .topbar-icon-button, .topbar-icon-text-button, .status-pill, .matrix-tree-toggle,
.financial-control-button, .financial-matrix-toolbar__select,
.filter-select, .filter-chips button, .filter-menu,
.engineering-date-field, .engineering-filter input, .engineering-filter select,
.assistente-modal button, .assistente-modal__botao, .assistente-modal__caixa, .summary-card, .settings-panel,
.notification-item__action, .procurement-ranking__name
)[aria-busy="true"] {
opacity: var(--opacity-loading);
cursor: progress;
}
.icon-button {
width: 32px;
height: 32px;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
cursor: pointer;
display: grid;
place-items: center;
padding: var(--space-1);
}
.icon-button::before {
content: "";
background: var(--system-gray-5);
box-shadow: 0 -5px 0 var(--system-gray-5), 0 5px 0 var(--system-gray-5);
transition: background var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}
.icon-button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--label-primary);
}
.icon-button:focus-visible,
.icon-button-close:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.icon-button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge)::before {
background: var(--system-white);
box-shadow: 0 -5px 0 var(--system-white), 0 5px 0 var(--system-white);
}
.app-shell.is-collapsed .topbar .icon-button {
margin-left: var(--space-2);
}
.app-shell:not(.is-collapsed) .topbar .icon-button {
visibility: hidden;
pointer-events: none;
width: 0px;
height: 0px;
}
.eyebrow {
color: var(--label-primary);
font-size: 11px;
font-weight: 700;
margin-bottom: 8px;
}
h1 {
margin: 2px 0 0;
font-size: 18px;
}
.source-switcher {
display: flex;
flex-direction: column;
align-items: left;
gap: 3px;
margin-left: 24px;
color: var(--system-gray-5);
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
}
.source-switcher__control {
display: grid;
margin-bottom: 13px;
}
.source-switcher__select { position: relative; min-width: 0; width: 128px; max-width: 100%; }
.source-switcher select[hidden] { display: none; }
.source-switcher__control > .filter-select__chevron {
grid-area: 1 / 1;
justify-self: end;
margin-right: var(--space-1);
pointer-events: none;
}
:is(.source-switcher select, .source-switcher__trigger) {
grid-area: 1 / 1;
appearance: none;
width: 100%;
height: 28px;
border: 1px solid var(--system-gray);
border-radius: var(--radius-sm);
background: var(--system-gray-5);
color: var(--label-primary);
font-size: 11px;
font-weight: 800;
padding: var(--space-0) var(--space-6) var(--space-0) var(--space-2);
}
/* Acoes de filtro da topbar: exibir/ocultar o painel e limpar (card #31).
Ficam encostadas no seletor de origem, a esquerda, e nao em .topbar-actions.
Sao um grupo so para que cada degrau da escala precise posicionar UM
elemento, e nao dois - foi isso que permitiu caber no grid de 520px. */
.topbar-filter-actions {
display: flex;
align-items: center;
gap: 8px;
}
.topbar-filter-actions[hidden] {
display: none;
}
/* Botao de icone + rotulo da topbar. Mesma altura e mesmo raio dos vizinhos;
o rotulo some em 720px, no mesmo degrau em que .status-pill vira so icone. */
.topbar-icon-text-button {
height: 32px;
display: inline-flex;
align-items: center;
gap: var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
cursor: pointer;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.3px;
text-transform: uppercase;
padding: var(--space-0) var(--space-2);
white-space: nowrap;
transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard);
}
.topbar-icon-text-button .ui-icon {
width: 17px;
height: 17px;
flex: 0 0 17px;
color: currentColor;
font-size: 17px;
}
.topbar-icon-text-button:disabled {
cursor: not-allowed;
opacity: var(--opacity-disabled);
}
.account-menu {
position: relative;
margin-left: auto;
}
.status-pill {
height: 32px;
display: inline-grid;
grid-auto-flow: column;
align-items: center;
gap: var(--space-2);
background: var(--label-primary);
border: 1px solid var(--label-primary);
border-radius: var(--radius-sm);
color: var(--system-white);
cursor: pointer;
font-size: 12px;
font-weight: 700;
/* Sem respiro vertical: a altura é fixa (32px) e o grid já centraliza. Com
8px em cima e embaixo sobravam 14px para um ícone de 18px, e ícone e nome
desciam 2px do centro (19/10/2026). */
padding: 0 var(--space-3);
transition: background var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}
.status-pill:hover,
.status-pill[aria-expanded="true"] {
border-color: var(--system-gray);
background: var(--label-primary);
box-shadow: 0 2px 8px color-mix(in srgb, var(--system-black) 18%, var(--system-clear));
}
.status-pill:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.status-pill__icon {
width: 18px;
height: 18px;
display: grid;
place-items: center;
margin: auto;
border-radius: var(--radius-pill);
background: var(--system-gray-5);
}
.account-menu__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: var(--z-combobox-menu);
min-width: 180px;
overflow: hidden;
border: 1px solid var(--system-gray);
border-radius: var(--radius-md);
background: var(--label-primary);
box-shadow: 0 12px 24px color-mix(in srgb, var(--system-white) 26%, var(--system-clear));
padding: var(--space-3);
}
.account-menu__item {
width: 100%;
height: 28px;
display: inline-grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: var(--status-negative-fill);
color: var(--system-red);
cursor: pointer;
font-size: 12px;
font-weight: 800;
padding: var(--space-0) var(--space-2);
margin: var(--space-1) var(--space-0);
text-align: left;
}
.account-menu__item:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge),
.account-menu__item:focus-visible {
filter: opacity(70%);
}
.account-menu__icon {
width: 22px;
height: 22px;
display: block;
}
/* Cores da barra do topo, do seletor de origem e do menu de conta. Vinham de
`APLICACAO SEMANTICA`; leva 5 do #10. */
.topbar {
border-color: var(--system-gray);
background: var(--navigation-background);
color: var(--navigation-label);
}
.source-switcher {
color: var(--navigation-label-secondary);
}
:is(.source-switcher select, .source-switcher__trigger) {
border-color: var(--separator-opaque);
background: var(--control-background);
color: var(--label-primary);
}
/* Tres controles, em ordem de documento: tema, valores, conta. Das colunas
antigas (1fr 32px 1fr + os tres controles) sairam as DUAS do meio, que so
existiam para centralizar o botao de filtros - ele foi para a esquerda, junto
do seletor de origem, no card #31.
O `1fr` da frente FICA, e nao e enfeite: e ele, com `flex: 1 1 auto`, que faz
deste grupo o unico elemento elastico da topbar. Trocado por `max-content`,
a barra deixa de ter onde ceder e transborda a coluna da area de trabalho na
faixa de 901-921px - onde a sidebar ainda esta aberta com 280px e sobra
pouca largura. Como `.workspace` recorta em vez de rolar, isso nao aparece
como scroll horizontal: aparece como conteudo cortado. */
/* #96: as ações (tema, visibilidade de valores, conta) ficam SEMPRE encostadas
à direita. O grid `[1fr max max max]` anterior contava com o
#topbarThemeSlot para ocupar a coluna flexível; quando o slot está `hidden`
(páginas de financeiro), o botão de visibilidade caía na coluna 1fr e escorria
para o mero-esquerda da topbar — daí ele "mudar de posição" entre páginas.
Flex com justify-content: flex-end agrupa os filhos à direita
independentemente de o slot de tema estar vazio, cheio ou ausente. */
.topbar-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
margin-left: auto;
}
.topbar-actions .account-menu {
margin-left: 0;
}
/* A topbar mede a PROPRIA largura, nao a do viewport: com a sidebar aberta,
1024px de tela viram 744px de barra, e os rotulos (Limpar, Exportar, conta)
pediam ~920px. `.topbar-actions` tem min-width 0 e justify flex-end, entao o
excesso vazava para a esquerda, por cima do filtro e do seletor de origem.
Abaixo de 980px de barra os tres controles de texto viram so icone - a mesma
UX do degrau de 720px - e quem cede e o titulo, com reticencias. */
.topbar {
container: topbar / inline-size;
}
@container topbar (max-width: 980px) {
.topbar > div:has(#pageTitle) {
min-width: 0;
}
#pageTitle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.source-switcher,
.topbar-filter-actions {
flex: 0 0 auto;
}
.topbar-actions {
min-width: max-content;
}
.status-pill > .account-menu__label,
.topbar .topbar-icon-text-button__label {
display: none;
}
.topbar .topbar-icon-text-button {
width: 32px;
justify-content: center;
padding: var(--space-0);
}
.topbar .status-pill {
width: 44px;
min-width: 44px;
gap: var(--space-1);
justify-content: center;
padding: var(--space-0);
}
}
.status-pill {
border-color: var(--separator);
background: var(--navigation-selection);
color: var(--navigation-label);
}
.status-pill__icon,
.account-menu__icon,
.filter-menu__search-icon,
.filter-eye__icon {
color: currentColor;
line-height: 2;
}
.status-pill:hover,
.status-pill[aria-expanded="true"] {
border-color: var(--system-blue);
background: var(--navigation-selection);
box-shadow: 0 2px 8px var(--shadow-color);
}
.status-pill:focus-visible {
outline-color: var(--system-blue);
}
.account-menu__panel {
border-color: var(--separator);
background: var(--background-primary);
box-shadow: var(--standard-shadow);
}
.account-menu__item {
color: var(--label-primary);
}
/* Topbar, pilula de status aberta e menu de conta por dentro. Vinham da
camada SIDEBAR CONTINUA. O piso e desta secao mesmo: `.account-menu__panel`
sobrescreve a L793, `.account-menu__item` a L912 e o hover a L826 - as tres
ficam a poucas linhas daqui, que e o que a dissolucao procura. */
.topbar {
position: relative;
}
/* Eram DOIS blocos de seletor identico, um logo abaixo do outro, e o de baixo
so repetia em longhand (`background-color` + `background-image`) o mesmo
`background` que o de cima ja declarava. Viraram um. As cinco marcas de
prioridade cairam junto: medidas elemento a elemento, com o menu aberto de
verdade, nenhuma delas trocava o vencedor - venciam por serem as ultimas, e
continuam sendo. */
.topbar .status-pill[aria-expanded="true"] {
border-color: var(--separator);
background: var(--system-gray-3);
color: var(--label-primary);
transition: none;
}
.account-menu__panel {
min-width: min(340px, calc(100vw - 24px));
border-radius: var(--radius-md);
padding: var(--space-2);
}
.account-menu__item {
display: grid;
width: 100%;
min-height: 36px;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: var(--space-2) var(--space-3);
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--label-primary);
text-align: left;
cursor: pointer;
transition: background var(--duration-fast) var(--easing-standard);
}
.account-menu__item.is-destructive { color: var(--control-destructive); }
.account-menu__item:hover:not(:disabled),
.account-menu__item:focus-visible { background: var(--control-hover-background); filter: none; transform: none; }
.account-menu__item:active:not(:disabled) { background: var(--navigation-item-pressed-background); }
.account-menu__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.account-menu__icon { width: 20px; height: 20px; color: currentColor; }
.account-menu__preference { grid-template-columns: minmax(0, 1fr) auto; }
.account-menu__preference > span:first-child { white-space: normal; }
.account-menu__separator { margin: var(--space-2) 0; border-top: 1px solid var(--separator); }
.account-menu__chevron { width: 16px; height: 16px; transform: rotate(180deg); transition: transform var(--duration-fast) var(--easing-standard); }
.status-pill[aria-expanded="true"] .account-menu__chevron { transform: rotate(0deg); }
.account-menu__switch { width: 28px; height: 16px; padding: 2px; border-radius: var(--radius-pill); background: var(--fill-secondary); }
.account-menu__switch::before { content: ""; display: block; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--label-secondary); }
.account-menu__preference[aria-checked="true"] .account-menu__switch { background: var(--label-primary); }
.account-menu__preference[aria-checked="true"] .account-menu__switch::before { background: var(--label-inverse); transform: translateX(12px); }
/* Os icones da topbar, vindos da faixa que a leva 8 nomeou. Esta e a casa
deles, e a leva 8 nao pode traze-los porque a janela medida so permitia subir:
`.topbar .finance-filter-visibility` e `.topbar .values-visibility-toggle` tem
teto em `.theme-menu__trigger[aria-expanded="true"]`, de `MENU DE TEMA`, la
embaixo - e esta secao esta bem acima dele. Piso medido: nenhum. */
.topbar .topbar-icon-button {
display: inline-grid;
place-items: center;
border: 0;
background: var(--navigation-item-background);
color: var(--navigation-label);
cursor: pointer;
width: var(--space-8);
height: var(--space-8);
padding: var(--space-0);
border-radius: var(--radius-sm);
box-shadow: none;
}
.topbar .finance-filter-visibility {
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
}
.topbar .values-visibility-toggle {
border: 0;
background: var(--system-clear);
color: var(--navigation-label);
}
.topbar .topbar-icon-button:not(.finance-filter-visibility):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge),
.topbar .topbar-icon-button:not(.finance-filter-visibility):focus-visible {
background: var(--system-gray-6);
color: var(--navigation-label);
}
.topbar .finance-filter-visibility:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--system-gray-6);
color: var(--label-primary);
}
.topbar .finance-filter-visibility:focus-visible {
background: var(--system-clear);
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.topbar .finance-filter-visibility.is-panel-visible:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
color: var(--finance-accent);
}
.topbar .topbar-icon-button .ui-icon {
color: var(--icon-button-label, currentColor);
}
/* ==========================================================================
CONTEXTO FINANCEIRO - Regime, metadados raiz e painel de filtros
========================================================================== */
.embed-frame {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
padding: 8px;
width: 100%;
min-width: 0;
min-height: 0;
max-width: 100%;
/* Unica regiao de rolagem vertical da pagina. Antes disto, `.workspace`
(abaixo) ficava com `overflow: hidden` e nenhum ancestral rolava - uma
pagina cujo conteudo passasse da altura da tela era simplesmente cortada,
sem barra de rolagem em lugar nenhum. Ancorar aqui, e nao em `.workspace`,
e o que importa: `.workspace` tambem contem o `.topbar` (titulo, menu,
conta) como irmao de `.embed-frame` no mesmo grid - se `.workspace`
rolasse, o cabecalho rolava junto e sumia da tela (era exatamente isso
que `.workspace:has(.analytics-chart)` fazia, e por isso essa excecao foi
removida abaixo em vez de generalizada). */
overflow-x: hidden;
overflow-y: auto;
}
.finance-context-bar {
/* `position: relative` vinha da ex-camada CONTROLE DE VISIBILIDADE DOS FILTROS
(dissolvida na leva 12 do #10). Era a UNICA declaracao de `position` sobre
este seletor no arquivo, entao vence de qualquer posicao - fundida aqui, na
casa do componente. */
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
min-width: 0;
margin-bottom: 10px;
margin-top: 2px;
}
.finance-context-category { min-width: 0; flex: 1 1 200px; max-width: 320px; }
.finance-context-category[hidden] { display: none; }
.finance-context-category .financial-category-multiselect { max-width: 100%; min-width: 0; }
.finance-context-category .financial-matrix-toolbar__select { min-width: 0; font-size: 12px; }
.finance-regime-tabs {
display: flex;
align-items: center;
gap: 8px;
}
.finance-regime-tabs__icon {
width: 17px;
height: 17px;
flex: 0 0 17px;
}
.finance-context-bar.is-regime-compact .finance-regime-tabs__button {
width: 38px;
min-width: 38px;
flex: 0 0 38px;
padding: 0;
}
.finance-context-bar.is-regime-compact .finance-regime-tabs__button > span:not(.ui-icon) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.filter-panel {
position: relative;
width: 100%;
height: auto;
margin-bottom: var(--space-3);
overflow: visible;
background: var(--system-gray-6);
border-radius: var(--radius-sm);
/* 12px embaixo, e nao 52px: os 40px extras existiam para caber a faixa de
acoes posicionada em absoluto no rodape do painel, que saiu no card #31. */
padding: var(--space-3);
transition: max-height var(--duration-fast) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard), padding var(--duration-fast) var(--easing-standard), border-width var(--duration-fast) var(--easing-standard);
}
.filter-grid {
display: grid;
width: 100%;
align-self: left;
grid-template-columns:
minmax(96px, 0.65fr)
minmax(228px, 1.45fr)
minmax(154px, 1.15fr)
minmax(170px, 1.25fr)
minmax(130px, 0.95fr)
minmax(140px, 1fr);
grid-template-areas:
"ano tri centro agrupamento classe empresa"
"months months assunto grupo subgrupo fase";
/* Altura do conteúdo, nunca fixa: com 56px o controle comia o respiro de
baixo do cartão (8 + rótulo 15 + 8 + controle 24 + 8 = 63). */
grid-template-rows: auto auto;
gap: 8px;
min-width: 0;
}
.filter-card--ano {
grid-area: ano;
}
.filter-card--tri {
grid-area: tri;
}
.filter-card--centro {
grid-area: centro;
}
.filter-card--agrupamento {
grid-area: agrupamento;
}
.filter-card--classe {
grid-area: classe;
}
.filter-card--empresa {
grid-area: empresa;
}
.filter-card--months {
grid-area: months;
}
.filter-card--grupo {
grid-area: grupo;
}
.filter-card--assunto {
grid-area: assunto;
}
.filter-card--subgrupo {
grid-area: subgrupo;
}
.filter-card--fornecedor {
grid-area: fornecedor;
}
.filter-card--fase {
grid-area: fase;
}
.filter-card {
position: relative;
width: 100%;
min-width: 0;
overflow: visible;
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-2);
transition: background var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}
.filter-card--second {
transition: opacity var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
width: 100%;
}
.filter-card--extended {
display: none;
}
.filter-panel.is-extended-family .filter-grid {
grid-template-columns:
minmax(96px, 0.55fr)
minmax(124px, 1fr)
minmax(150px, 1fr)
minmax(176px, 1.2fr)
minmax(224px, 1.8fr)
minmax(120px, 0.75fr);
grid-template-areas:
"ano tri agrupamento centro classe empresa"
"months assunto grupo subgrupo fornecedor fase";
}
.filter-panel.is-extended-family .filter-card--extended {
display: block;
}
.filter-panel.is-filter-grid-medium .filter-grid,
.filter-panel.is-filter-grid-medium.is-extended-family .filter-grid {
grid-template-columns:
minmax(104px, 0.65fr)
minmax(140px, 0.9fr)
minmax(176px, 1.15fr)
minmax(192px, 1.3fr);
grid-template-rows: repeat(3, minmax(56px, auto));
}
.filter-panel.is-filter-grid-medium .filter-grid {
grid-template-areas:
"ano months fase empresa"
"tri classe centro agrupamento"
"assunto grupo subgrupo subgrupo";
}
.filter-panel.is-filter-grid-medium.is-extended-family .filter-grid {
grid-template-areas:
"ano tri centro agrupamento"
"classe empresa months fornecedor"
"assunto grupo subgrupo fase";
}
.filter-panel.is-filter-grid-narrow .filter-grid,
.filter-panel.is-filter-grid-narrow.is-extended-family .filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(6, minmax(56px, auto));
}
.filter-panel.is-filter-grid-narrow .filter-grid {
grid-template-areas:
"ano empresa"
"months fase"
"tri classe"
"agrupamento centro"
"assunto grupo"
"subgrupo subgrupo";
}
.filter-panel.is-filter-grid-narrow.is-extended-family .filter-grid {
grid-template-areas:
"ano empresa"
"months fase"
"tri classe"
"agrupamento centro"
"assunto grupo"
"fornecedor subgrupo";
}
.filter-panel.is-filter-grid-single .filter-grid,
.filter-panel.is-filter-grid-single.is-extended-family .filter-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-auto-rows: minmax(56px, auto);
}
.filter-panel.is-filter-grid-single .filter-grid {
grid-template-areas:
"ano"
"tri"
"months"
"empresa"
"fase"
"agrupamento"
"centro"
"classe"
"assunto"
"grupo"
"subgrupo";
}
.filter-panel.is-filter-grid-single.is-extended-family .filter-grid {
grid-template-areas:
"ano"
"tri"
"months"
"empresa"
"fase"
"agrupamento"
"centro"
"classe"
"assunto"
"grupo"
"subgrupo"
"fornecedor";
}
.filter-card__label {
display: block;
width: 100%;
margin-bottom: var(--space-2);
color: var(--system-black);
font-size: 11px;
font-weight: 850;
letter-spacing: 0.35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-select {
width: 100%;
height: 24px;
border-radius: var(--radius-sm);
display: flex;
justify-content: space-between;
border: 0;
background: var(--system-white);
color: var(--system-black);
cursor: pointer;
font-size: 11px;
font-weight: 650;
padding: var(--space-1);
}
.filter-select__value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-self: center;
}
.filter-select span:last-child,
.filter-select__chevron {
width: 6px;
height: 6px;
border-right: 1.5px solid var(--label-primary);
border-bottom: 1.5px solid var(--label-primary);
transform: translateY(-2px) rotate(45deg);
align-self: center;
}
.filter-menu {
position: absolute;
right: 6px;
left: 6px;
top: 100%;
z-index: var(--z-filter-menu);
width: auto;
min-width: 0;
max-height: 280px;
overflow: auto;
border: 1px solid var(--system-gray);
border-radius: var(--radius-sm);
box-sizing: border-box;
background: var(--system-white);
box-shadow: 0 8px 16px color-mix(in srgb, var(--system-black) 24%, var(--system-clear));
}
.filter-menu button {
width: 100%;
height: 24px;
overflow: hidden;
border: 0;
background: var(--system-clear);
color: var(--system-black);
cursor: pointer;
font-size: 10px;
font-weight: 650;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
padding: var(--space-0) var(--space-2);
}
.filter-menu--wide {
min-width: 0;
}
.filter-menu button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--system-gray-5);
}
.filter-chips {
display: grid;
width: 100%;
grid-template-columns: 1fr;
gap: var(--space-1);
}
.filter-chips button {
min-width: 0;
width: 100%;
height: 24px;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-white);
color: var(--system-black);
cursor: pointer;
font-size: 11px;
font-weight: 650;
padding: var(--space-1) var(--space-2);
white-space: nowrap;
}
.filter-chips button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge),
.filter-select:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
.filter-chips--quarters {
grid-template-columns: repeat(4, 1fr);
}
.filter-chips--quarters button {
min-width: 54px;
}
.filter-select--quarter {
display: none;
}
.filter-menu--quarter {
top: 100%;
}
.filter-chips button:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) {
background: var(--system-black);
color: var(--system-white);
}
.filter-chips--months {
grid-template-columns: repeat(12, minmax(20px, 1fr));
gap: var(--space-1);
}
.filter-chips--months button {
min-width: 0;
padding: var(--space-1) 2px;
/* Doze meses dividem ~25 px cada a 1440 px: "MAR" em Plex comum pedia 28 px
e vazava o botão. A condensada cabe sem reduzir o corpo do texto. */
font-family: var(--font-condensed);
font-size: clamp(9px, 0.75vw, 11px);
}
.filter-select--month {
display: none;
}
.filter-panel.is-extended-family .filter-select--quarter,
.filter-panel.is-extended-family .filter-select--month {
display: flex;
height: 24px;
align-items: center;
padding: var(--space-0) var(--space-1) var(--space-0) var(--space-1);
}
.filter-panel.is-extended-family .filter-chips--quarters,
.filter-panel.is-extended-family .filter-chips--months {
display: none;
}
.filter-menu--month {
top: 100%;
padding: var(--space-2);
}
.filter-menu__search {
position: sticky;
top: 0;
z-index: 2;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
min-height: 28px;
border-bottom: 1px solid var(--system-gray-5);
background: var(--system-white);
color: var(--label-primary);
padding: var(--space-1) var(--space-1) var(--space-2);
}
.filter-menu__search--dropdown {
padding: var(--space-1) var(--space-2) var(--space-2);
}
.filter-menu__search-icon {
display: block;
width: 10px;
height: 10px;
}
.filter-menu__search input {
width: 100%;
min-width: 0;
border: 0;
background: var(--system-clear);
color: var(--system-black);
font: inherit;
font-size: 10px;
outline: 0;
}
.filter-menu__check-all,
.filter-menu__check {
display: grid;
grid-template-columns: var(--space-4) minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: 24px;
color: var(--system-black);
font-size: 10px;
font-weight: 700;
text-align: left;
cursor: pointer;
padding: var(--space-1);
}
.filter-menu__check-all {
border: 0;
border-bottom: 1px solid var(--system-gray-5);
background: var(--system-clear);
}
.filter-menu button.filter-menu__check-all {
font-size: 10px;
}
.filter-menu__check input {
width: var(--space-4);
height: var(--space-4);
margin: var(--space-0);
accent-color: var(--label-primary);
}
.filter-menu__check span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-eye {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
display: grid;
place-items: center;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
cursor: pointer;
padding: var(--space-0);
}
/* O seletor carrega `.ui-icon` de proposito. O icone generico `.ui-icon` e
declarado bem depois deste bloco (secao MODULOS E PAINEIS) e diz
`display: inline-block`; com a mesma especificidade, quem vem depois vence.
Este `display: grid` vinha de uma camada de correcao e so ganhava por marca
de prioridade. Somar a classe generica ao seletor e o jeito de a regra
especifica vencer a generica sem marca nenhuma - e o span do
`index.html:114` sempre tem as duas classes. */
.ui-icon.filter-eye__icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
}
.filter-eye__icon--hidden,
.filter-eye.is-hidden .filter-eye__icon--visible {
display: none;
}
.filter-eye.is-hidden .filter-eye__icon--hidden {
display: block;
}
.filter-eye:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: color-mix(in srgb, var(--system-white) 40%, var(--system-clear));
}
/* O botao de limpar filtros mora na topbar (card #31); as dimensoes dele estao
com os demais controles do topo, em AREA DE TRABALHO E TOPO. A faixa de acoes
que existia aqui - recolher + contador + limpar - saiu junto: o recolher
parcial virou o exibir/ocultar do painel inteiro, no botao da topbar. */
.filter-panel.is-clearing .filter-card {
animation: clearPulse var(--duration-fast) var(--easing-standard);
}
@keyframes clearPulse {
50% {
filter: brightness(1.08);
}
}
.mock-report {
border: 1px solid var(--system-gray-5);
background: var(--system-white);
}
.mock-report__table {
display: grid;
gap: 1px;
padding: 1px;
background: var(--system-white);
}
.mock-row {
display: grid;
grid-template-columns: minmax(180px, 1.8fr) repeat(6, minmax(82px, 1fr)) minmax(94px, 1.1fr);
min-height: 32px;
font-size: 10px;
font-weight: 700;
}
.mock-row span {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
border-right: 1px solid var(--system-white);
overflow: hidden;
padding: 0 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
.mock-row span:first-child {
justify-content: flex-start;
}
.mock-row span:last-child {
border-right: 0;
font-weight: 800;
}
.mock-row--dark {
background: var(--label-primary);
color: var(--system-white);
}
.mock-row--gray {
background: var(--system-gray-5);
color: var(--system-black);
}
.mock-row--blue {
background: var(--result-header-background);
color: var(--system-white);
}
.mock-report__footer {
height: 72px;
margin-top: 10px;
background: var(--result-header-background);
}
.report-status {
align-self: start;
width: 100%;
border: 1px solid var(--system-gray-5);
border-radius: 6px;
background: var(--system-white);
color: var(--label-primary);
font-size: 12px;
font-weight: 800;
padding: 16px;
}
.report-status--inline {
align-self: start;
}
.real-report {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
min-height: 0;
max-width: 100%;
overflow: visible;
gap: 10px;
}
.report-visual-host {
/* A DFC Contabilidade não tem resumo. O host cresce mesmo sendo o único
filho: uma segunda linha vazia de grid deixava a matriz na faixa auto. */
flex: 1 1 0;
display: grid;
width: 100%;
min-width: 0;
min-height: 0;
max-width: 100%;
overflow: hidden;
}
.report-visual-host:has(.analytics-chart),
.report-skeleton--analytics .report-skeleton__visual {
/* 480px plot + 24px title + 8px gap + 16px frame padding. */
min-height: max(50vh, 528px);
overflow-x: auto;
overflow-y: visible;
}
.report-skeleton {
display: flex;
flex: 1 1 0;
flex-direction: column;
width: 100%;
min-width: 0;
min-height: 0;
max-width: 100%;
gap: 10px;
}
.report-skeleton__summary {
flex: 0 0 auto;
}
.report-skeleton__card {
min-width: 0;
}
/* Aqui existia `.report-skeleton__meta`. Apagada na leva 10, nao movida: o no
nao existe. `renderReportSkeleton` monta summary, card, visual, dual, chart,
toolbar, table, row e shine - nunca meta -, e a busca por
`report-skeleton__meta` no repositorio inteiro so encontrava este arquivo. O
`mortas.mjs` confirmou com 0 elemento em 9 paginas x 2 temas, com os
esqueletos montados pelos geradores do proprio app; os controles da mesma
varredura (`__card`, `__summary`) deram vivos, que e o que torna este zero
uma medida e nao um silencio. A irma de `CORRECOES` caiu na leva 4 pelo mesmo
motivo. */
.report-skeleton__visual {
flex: 1 1 0;
display: grid;
min-width: 0;
min-height: 0;
gap: 0;
}
.report-skeleton--tables .report-skeleton__visual {
grid-template-rows: auto minmax(0, 1fr) auto;
}
/* O tom e o gradiente sao os MESMOS dos demais skeletons (o grupo semantico de
TEMA E CORES pinta os shines com `--background-secondary` e brilho de
`--background-primary` 72%); o chart ficava fora do grupo e destoava no tema
claro (era `--system-gray-5`: 229 contra 209). Do #12, item 1. */
.report-skeleton__chart {
position: relative;
min-height: 0;
height: 100%;
overflow: hidden;
border: 14px solid var(--background-secondary);
border-radius: 6px;
background: var(--background-secondary);
}
.report-skeleton__chart::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, var(--system-clear), color-mix(in srgb, var(--background-primary) 72%, var(--system-clear)), var(--system-clear));
animation: report-skeleton-shine 1.15s ease-in-out infinite;
}
.report-skeleton__toolbar {
display: grid;
align-items: center;
min-width: 0;
overflow: hidden;
}
.report-skeleton__toolbar-tabs,
.report-skeleton__toolbar-category {
display: flex;
align-items: center;
gap: 8px;
}
.report-skeleton__toolbar-tabs {
grid-area: tabs;
}
.report-skeleton__toolbar-category {
grid-area: category-mode;
justify-self: end;
}
.report-skeleton__toolbar :is(.report-skeleton__toolbar-tabs, .report-skeleton__toolbar-category)
.report-skeleton__shine--button {
width: clamp(38px, 7vw, 112px);
height: 32px;
}
.report-skeleton__toolbar-category .report-skeleton__shine--icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
}
.report-skeleton__table {
display: grid;
min-width: 0;
overflow: hidden;
border: 1px solid var(--system-white);
border-radius: 4px;
background: var(--system-white);
padding: 2px;
gap: 2px;
}
.report-skeleton__table--result {
margin-top: 14px;
border-color: var(--system-white);
border-radius: 4px;
background: var(--system-white);
}
.report-skeleton__row {
display: grid;
grid-template-columns: minmax(270px, 1.6fr) repeat(11, minmax(96px, 1fr));
gap: 2px;
}
/* Cores do contexto financeiro e do painel de filtros. Vinham de `APLICACAO
SEMANTICA`; leva 5 do #10. A ordem interna do grupo do `.filter-clear` e a
do arquivo antigo, e ela importa: os quatro blocos empatam em especificidade
e o de `:not(:disabled)` so vale por vir depois - esta comentado no lugar. */
:is(.app-shell.is-financeiro, .real-report, .financial-matrix-visual)[data-regime="caixa"] {
--finance-accent: var(--system-blue);
--control-selected-background: var(--system-blue);
--result-header-background: var(--system-blue);
--result-cell-background: color-mix(in srgb, var(--system-blue) 18%, var(--background-primary));
}
:is(.app-shell.is-financeiro, .real-report, .financial-matrix-visual)[data-regime="competencia"] {
--finance-accent: var(--system-indigo);
--control-selected-background: var(--system-indigo);
--result-header-background: var(--system-indigo);
--result-cell-background: color-mix(in srgb, var(--system-indigo) 18%, var(--background-primary));
}
:root[data-theme="dark"] :is(.app-shell.is-financeiro, .real-report, .financial-matrix-visual)[data-regime="caixa"] {
--result-cell-background: color-mix(in srgb, var(--system-blue) 32%, var(--background-secondary));
}
:root[data-theme="dark"] :is(.app-shell.is-financeiro, .real-report, .financial-matrix-visual)[data-regime="competencia"] {
--result-cell-background: color-mix(in srgb, var(--system-indigo) 32%, var(--background-secondary));
}
.finance-regime-tabs__button[data-regime="caixa"].is-active {
border-color: var(--system-blue);
background: var(--system-blue);
color: var(--finance-accent-label);
pointer-events: none;
}
.finance-regime-tabs__button[data-regime="competencia"].is-active {
border-color: var(--system-indigo);
background: var(--system-indigo);
color: var(--finance-accent-label);
pointer-events: none;
}
/* Painel de filtros no tema claro. Especificidade maior que qualquer
`.filter-panel` do arquivo, entao a posicao aqui e livre. */
:root:not([data-theme="dark"]) .filter-panel {
background: var(--system-gray-7);
}
.filter-card,
.filter-card.has-filter {
background: var(--system-gray-3);
}
.filter-card__label,
.filter-select,
.filter-chips button,
.filter-menu button,
.filter-menu__check-all,
.filter-menu__check,
.filter-menu__search input {
color: var(--label-primary);
}
.filter-select,
.filter-chips button,
.filter-menu,
.filter-menu__search {
background: var(--control-background);
}
/* Filtro com selecao ativa: o select assume o acento financeiro. Especificidade
maior que todo `.filter-select` do arquivo, posicao livre. */
.filter-card.has-filter .filter-select {
border-color: var(--finance-accent);
background: var(--finance-accent);
color: var(--finance-accent-label);
}
.filter-card.has-filter .filter-select:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
.filter-menu {
border-color: var(--separator-opaque);
box-shadow: var(--standard-shadow);
}
.filter-menu button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge),
.filter-menu__check:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
/* O grid só se aplica a opções visíveis. :where preserva a especificidade
original: a busca respeita [hidden] sem alterar padding/fundo dos botões. */
.filter-menu__option:where(:not([hidden])) {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: 24px;
border: 0;
background: var(--control-background);
color: var(--label-primary);
cursor: pointer;
padding: var(--space-1) var(--space-1);
text-align: left;
}
.filter-menu__option-checkbox {
position: relative;
display: block;
width: var(--space-4);
height: var(--space-4);
border: 1px solid var(--label-secondary);
border-radius: var(--radius-sm);
background: var(--control-background);
}
.filter-menu__option:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) .filter-menu__option-checkbox {
border-color: var(--finance-accent);
background: var(--finance-accent);
}
.filter-menu__option:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) .filter-menu__option-checkbox::after {
position: absolute;
top: 1px;
left: 4px;
width: 3px;
height: 7px;
border-right: 2px solid var(--system-white);
border-bottom: 2px solid var(--system-white);
content: "";
transform: rotate(45deg);
}
.filter-menu__option-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-menu__option-description {
display: block;
margin-top: var(--space-1);
color: var(--label-secondary);
font-size: 11px;
font-weight: 400;
line-height: 1.4;
text-transform: none;
white-space: normal;
}
.filter-menu__search,
.filter-menu__check-all {
border-color: var(--separator);
}
.filter-select span:last-child,
.filter-select__chevron {
border-color: var(--label-primary);
}
.filter-chips button:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) {
background: var(--control-selected-background);
color: var(--control-selected-label);
}
.filter-clear:focus-visible {
outline: 2px solid var(--focus-ring);
}
.filter-clear {
background: var(--system-clear);
color: var(--label-secondary);
}
.filter-clear:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--system-gray-6);
}
.filter-clear:disabled,
.filter-clear:disabled:hover {
background: var(--system-clear);
color: var(--label-secondary);
}
/* Depois dos blocos de `:hover` e `:focus-visible` de propósito: os tres tem a
mesma especificidade, e este e o que vale para o botao habilitado. */
.filter-clear:not(:disabled) {
color: var(--label-primary);
}
/* Painel de filtros e barra de contexto financeiro. Vinham da camada
SIDEBAR CONTINUA. Pisos nesta secao: `.filter-panel` sobre a L1010 e
`.finance-context-bar` sobre a L941. O bloco `@media (max-width: 1180px)`
logo abaixo veio inteiro, com a media preservada - ele PRECISA ficar depois
de `.finance-context-bar > .module-heading__meta`, que e o concorrente que
ele sobrescreve. */
.filter-panel {
grid-row: 1;
width: 100%;
min-width: 0;
max-width: 100%;
margin: var(--space-0);
border: 0;
border-bottom: 1px solid var(--separator);
border-radius: 0;
}
.finance-context-bar {
grid-row: 2;
margin: 12px 8px 10px;
}
/* Aqui existia `.finance-context-bar { position: relative }`. Apagada na leva
10: `CONTROLE DE VISIBILIDADE DOS FILTROS` abre com a MESMA regra, mesmo
seletor e mesmo valor, e e a ultima do arquivo a declarar `position` sobre
este seletor. Empate de especificidade decidido por ordem: a de la vencia
sempre, esta nunca. A distancia entre as duas nao entra na conta - o que
vencesse esta tambem esta antes da de la. */
/* Responsividade dos seletores/chips de trimestre e mes, dissolvida da camada
RESPONSIVIDADE (leva 14 do #10). O piso destes seletores e esta secao
(~L1538-1584). O bloco max-1439 troca os chips pelos selects compactos nos
degraus estreitos; o min-2000 devolve os chips na familia estendida e vence a
base (0,2,0) por ESPECIFICIDADE (0,3,0), entao a posicao nao entra na conta. O
bloco max-1180 dos MESMOS seletores desceu com ENGENHARIA (piso mais tardio
dele) com valor IDENTICO - ordem irrelevante. */
@media (max-width: 1439px) {
.filter-chips--quarters,
.filter-chips--months {
display: none;
}
.filter-select--quarter,
.filter-select--month {
display: flex;
}
}
@media (min-width: 2000px) {
.filter-panel.is-extended-family :is(.filter-select--quarter, .filter-select--month) {
display: none;
}
.filter-panel.is-extended-family :is(.filter-chips--quarters, .filter-chips--months) {
display: grid;
}
}
/* ==========================================================================
CARREGAMENTO - Skeletons dos relatorios
========================================================================== */
.report-skeleton__shine {
position: relative;
overflow: hidden;
display: block;
background: var(--system-gray-5);
}
.report-skeleton__shine::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, var(--system-clear), color-mix(in srgb, var(--system-white) 78%, var(--system-clear)), var(--system-clear));
animation: report-skeleton-shine 1.15s ease-in-out infinite;
}
.report-skeleton__shine--short {
width: 54px;
height: 10px;
border-radius: 999px;
}
.report-skeleton__shine--strong {
width: min(170px, 60%);
height: 18px;
border-radius: 999px;
}
.report-skeleton__shine--pill {
width: 190px;
height: 25px;
border: 1px solid var(--system-gray-5);
border-radius: 999px;
background: var(--system-white);
}
.report-skeleton__shine--button,
.report-skeleton__shine--select {
height: 28px;
border-radius: 5px 5px 0 0;
}
.report-skeleton__shine--select {
height: 32px;
border-radius: 0;
}
.report-skeleton__shine--cell {
height: 26px;
}
.report-skeleton__row:first-child .report-skeleton__shine--cell {
background: var(--label-primary);
}
.report-skeleton__row .report-skeleton__shine--cell:first-child {
background: var(--label-primary);
}
.report-skeleton__table--result .report-skeleton__row:first-child .report-skeleton__shine--cell,
.report-skeleton__table--result .report-skeleton__row .report-skeleton__shine--cell:first-child {
background: var(--result-header-background);
}
/* ESQUELETO DO FINANCEIRO. Vindo de `CORRECOES FINAIS` na leva 4 do #10.
Pode morar aqui, ao contrario do resto daquela secao, porque toda regra
deste bloco vence seus concorrentes por ESPECIFICIDADE e nao por posicao:
elas qualificam o esqueleto pela familia (`--financial`, `--matricial`,
`--detail`) ou por `:not(.report-skeleton--analytics)`, contra as regras de
uma classe so que ficam acima e na camada de tema. A ordem INTERNA do bloco
foi preservada inteira - o fundo da celula e depois refinado por
`:nth-child(even)` e por `:first-child`, e trocar essa ordem apagaria o
refinamento. */
/* Skeletons do financeiro seguem a familia do visual carregado. */
.report-skeleton:not(.report-skeleton--analytics) .report-skeleton__card {
background: var(--background-primary);
}
/* Havia aqui uma regra para `.report-skeleton__meta`. Ela foi apagada, e nao
movida: `report-skeleton__meta` nao e criado por nenhum ponto do JS - o
`renderReportSkeleton` monta summary, visual, toolbar, table, row e shine, e
mais nada. A sonda de cobertura do `capture.mjs` foi quem apontou. A regra
generica `.report-skeleton__meta` de `CARREGAMENTO` estava na mesma situacao
e caiu na leva 10, com a mesma prova: zero elemento em 9 paginas x 2 temas
com os esqueletos montados pelos geradores do app (`mortas.mjs`), e zero
ocorrencia de `report-skeleton__meta` no JS. Nao ha mais nenhuma. */
.report-skeleton:not(.report-skeleton--analytics) .report-skeleton__visual {
gap: 0;
min-height: 0;
}
.report-skeleton__dual {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
min-width: 0;
min-height: 0;
gap: 12px;
}
/* O mesmo intervalo sólido da grade carregada, sem linhas altas artificiais. */
.report-skeleton--financial .report-skeleton__visual {
grid-template-rows: auto minmax(0, 1fr) auto;
--skeleton-row-gap: 1px;
}
/* Celulas do financeiro esticam com a linha (a altura fixa de 26px vira
minimo), para a linha poder crescer quando a tabela absorve a altura do
visual. Do #12, item 3. */
.report-skeleton--financial .report-skeleton__shine--cell {
height: auto;
min-height: 24px;
}
.report-skeleton--matricial .report-skeleton__visual {
grid-template-rows: minmax(0, 1fr);
}
.report-skeleton--detail .report-skeleton__visual {
grid-template-rows: minmax(0, 1fr);
}
.report-skeleton--matricial .report-skeleton__dual,
.report-skeleton--matricial .report-skeleton__table,
.report-skeleton--detail .report-skeleton__table {
height: 100%;
}
.report-skeleton--matricial .report-skeleton__dual,
.report-skeleton--matricial .report-skeleton__table {
min-height: 0;
}
.report-skeleton--detail .report-skeleton__table {
min-height: 0;
}
.report-skeleton:not(.report-skeleton--analytics) .report-skeleton__table {
border: 2px solid var(--table-frame-border);
border-radius: 4px;
background: var(--table-grid);
padding: 0;
gap: var(--skeleton-row-gap, 1px) 1px;
overflow: hidden;
}
.report-skeleton:not(.report-skeleton--analytics) .report-skeleton__row {
grid-template-columns: minmax(270px, 1.6fr) repeat(var(--skeleton-columns, 11), minmax(72px, 1fr));
gap: 1px;
background: var(--table-frame-border);
}
/* Matriz ocupa a altura disponível sem esticar as linhas de dados. */
.report-skeleton--financial .report-skeleton__table--matrix {
min-height: 0;
grid-auto-rows: 26px;
align-content: start;
}
.report-skeleton--financial .report-skeleton__table--matrix {
position: relative;
}
.report-skeleton--financial .report-skeleton__table--matrix > .report-skeleton__row:last-child {
position: absolute;
inset: auto 0 0;
min-height: 26px;
background: var(--table-header-background);
}
.report-skeleton--matricial .report-skeleton__row {
grid-template-columns: minmax(230px, 1.7fr) repeat(var(--skeleton-columns, 5), minmax(68px, 1fr));
}
.report-skeleton--detail .report-skeleton__row {
grid-template-columns: minmax(76px, 0.55fr) repeat(var(--skeleton-columns, 9), minmax(110px, 1fr));
}
.report-skeleton:not(.report-skeleton--analytics) .report-skeleton__shine--cell {
background: var(--table-row-background);
}
.report-skeleton--financial .report-skeleton__table--matrix
.report-skeleton__row:nth-child(even):not(:first-child) .report-skeleton__shine--cell {
background: var(--table-row-alternate-background);
}
.report-skeleton--matricial .report-skeleton__row:nth-child(even) .report-skeleton__shine--cell,
.report-skeleton--detail .report-skeleton__row:nth-child(even) .report-skeleton__shine--cell {
background: var(--table-row-alternate-background);
}
.report-skeleton:not(.report-skeleton--analytics)
.report-skeleton__row:first-child .report-skeleton__shine--cell,
.report-skeleton:not(.report-skeleton--analytics)
.report-skeleton__row .report-skeleton__shine--cell:first-child {
background: var(--table-emphasis-background);
}
/* A tabela detalhada nao possui coluna hierarquica escura. */
.report-skeleton--detail .report-skeleton__row:not(:first-child)
.report-skeleton__shine--cell:first-child {
background: var(--table-row-background);
}
.report-skeleton--detail .report-skeleton__row:nth-child(even):not(:first-child)
.report-skeleton__shine--cell:first-child {
background: var(--table-row-alternate-background);
}
/* As duas matrizes operacionais mantem tipografia e grade da familia matricial. */
.report-skeleton--matricial .report-skeleton__table {
border-color: var(--matricial-table-divider);
background: var(--matricial-table-divider);
}
.report-skeleton--matricial .report-skeleton__row {
background: var(--matricial-table-divider);
}
.report-skeleton--financial .report-skeleton__table--result {
margin-top: var(--space-3);
border-color: var(--table-frame-border);
background: var(--table-grid);
}
.report-skeleton--financial .report-skeleton__table--result .report-skeleton__shine--cell {
background: var(--result-cell-background);
}
.report-skeleton--financial
.report-skeleton__table--result .report-skeleton__row:first-child .report-skeleton__shine--cell,
.report-skeleton--financial
.report-skeleton__table--result .report-skeleton__row .report-skeleton__shine--cell:first-child {
background: var(--result-header-background);
}
.report-skeleton:not(.report-skeleton--analytics) .report-skeleton__shine::after {
background: linear-gradient(
90deg,
var(--system-clear),
color-mix(in srgb, var(--label-primary) 18%, var(--system-clear)),
var(--system-clear)
);
}
@media (max-width: 1180px) {
.report-skeleton__dual {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.report-skeleton__toolbar {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "tabs category-mode";
gap: var(--space-2);
}
}
@media (max-width: 520px) {
.report-skeleton__toolbar-tabs .report-skeleton__shine--button {
width: 38px;
}
}
/* Filtros altos não podem reduzir o relatório a zero no telefone. O mesmo
mínimo pertence aos dois estados; a rolagem continua no embed-frame. */
@media (max-width: 720px) {
.embed-frame > .real-report:has(> .report-visual-host),
.embed-frame > .real-report:has(> .report-skeleton) {
min-height: min(480px, 80svh);
}
}
@keyframes report-skeleton-shine {
100% {
transform: translateX(100%);
}
}
/* ==========================================================================
RESUMO DO RELATORIO - Cards, etiquetas e metadados
========================================================================== */
.report-header {
flex: 0 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
min-width: 0;
gap: 8px;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
gap: 8px;
margin: 8px 0;
}
.summary-card {
min-height: 56px;
display: grid;
align-content: center;
gap: var(--space-1);
border: 1px solid var(--system-clear);
border-radius: var(--radius-md);
background: var(--system-white);
padding: var(--space-2) var(--space-3);
}
.summary-card span {
color: var(--system-gray);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
}
.summary-card.is-positive span,
.summary-card.is-negative span {
color: var(--system-white);
}
.summary-card strong {
color: var(--system-black);
font-size: 16px;
font-weight: 850;
}
/* O valor do cartao ganha tom de sinal. Vinha da ultima camada dissolvida na
leva 2, que declarava isto para vencer por ordem uma copia identica em
AJUSTES DE UX; a copia foi apagada nesta leva, entao aqui a regra ganha por
especificidade e a posicao e livre. */
.summary-card.is-positive strong {
color: var(--summary-positive-label);
}
.summary-card.is-negative strong {
color: var(--summary-negative-label);
}
/* Cores do cartao de resumo. Vinham de `APLICACAO SEMANTICA DOS TEMAS POR
COMPONENTE`; leva 5 do #10. */
/* Bloco proprio, e nao mais uma entrada na lista de seis seletores que declara
a moldura do cartao: aquela lista pinta tambem as tres molduras de tabela, e
por isso foi para o fim da secao TABELA DETALHADA (o porque esta escrito la).
A sombra e so do cartao de resumo, entao ela fica aqui. */
.summary-card {
box-shadow: var(--standard-shadow);
}
.summary-card span,
.detail-note {
color: var(--label-secondary);
}
.summary-card strong {
color: var(--label-primary);
}
/* Cartao de resumo no tema claro: fundo de superficie e rotulo em preto.
Especificidade maior que todo `.summary-card` do arquivo, posicao livre. */
:root:not([data-theme="dark"]) .summary-card {
background: var(--background-primary);
}
:root:not([data-theme="dark"]) .summary-card span {
color: var(--system-black);
}
/* Densidade das paginas detalhadas e Analytics. Vinha da camada RESUMOS DENSOS
(dissolvida na leva 11 do #10); a casa e esta secao, onde `.summary-grid` e
`.summary-card` sao declarados. Os irmaos de media em 900px e 720px continuam
nas secoes ANALYTICS e RESPONSIVIDADE de proposito: o piso de cada bloco esta
na secao mais tardia (ver os comentarios de la). Como todo concorrente de
mesma especificidade de `.summary-grid--dense` mora em @media a partir da
L8264, mover a base e o degrau de 1439 para ca nao inverte cascata nenhuma. */
.summary-grid--dense {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
}
.summary-grid--dense .summary-card {
min-width: 0;
}
.summary-grid--dense .summary-card :is(span, strong) {
overflow: visible;
text-overflow: clip;
white-space: nowrap;
}
/* O degrau de 1439px: quatro colunas fixas em vez do auto-fit acima. O valor
original era max-width: 1280px; subiu para 1439 na escala e nao desceu, porque
a faixa 1181-1280 no auto-fit enfia oito colunas de ~116px onde cabem quatro
de ~240px, e um valor como "R$ 876.991.305" nao cabe em 116px. */
@media (max-width: 1439px) {
.summary-grid--dense {
grid-template-columns: repeat(4, minmax(min(100%, 150px), 1fr));
}
}
/* ==========================================================================
TABELAS FINANCEIRAS - Estrutura compartilhada
========================================================================== */
.report-table-wrap {
width: 100%;
min-width: 0;
max-width: 100%;
min-height: 0;
overflow-x: auto;
overflow-y: auto;
border: 1px solid var(--system-gray-5);
background: var(--system-white);
box-shadow: var(--standard-shadow);
}
.report-table {
width: 100%;
min-width: min(900px, 100%);
border-collapse: collapse;
background: var(--system-black);
}
.report-table th,
.report-table td {
min-width: 96px;
height: 30px;
padding: 0 8px;
white-space: nowrap;
font-size: 10px;
font-weight: 750;
text-align: right;
}
/* Only descriptive text clips; supplier names keep their intrinsic width. */
.report-table th:where(:not(.table-cell--supplier)),
.report-table td:where(:not(.table-cell--supplier)) {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
}
table :is(th, td).table-cell--supplier {
white-space: nowrap;
overflow-wrap: normal;
}
.report-table th:first-child,
.report-table td:first-child {
min-width: 220px;
text-align: left;
}
.report-table th:first-child:where(:not(.table-cell--supplier)),
.report-table td:first-child:where(:not(.table-cell--supplier)) {
max-width: 340px;
}
.report-table :is(th, td).is-matrix-filter-cell {
box-sizing: border-box;
cursor: pointer;
padding: 0 4px;
transition: filter 140ms ease;
}
.report-table :is(th, td).is-matrix-filter-cell:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
filter: brightness(0.94);
}
/* A marca de prioridade aqui NAO e residuo de camada: as linhas de total,
resultado e caixa declaram `font-weight: 900` com especificidade maior que
este seletor (elas somam mais elementos), e uma celula zerada precisa ficar
leve mesmo dentro delas. Sem ela seria preciso repetir este seletor dentro
de cada uma daquelas quatro regras. */
.report-table :is(th, td).is-zero-value,
.report-table :is(th, td).is-zero-value > .matrix-filter-button {
font-weight: 300 !important;
}
.matrix-filter-button {
--matrix-filter-padding-inline: 8px;
box-sizing: border-box;
display: block;
width: 100%;
max-width: 100%;
height: 100%;
min-width: 0;
margin: 0;
overflow: hidden;
border: 0;
background: var(--system-clear);
color: inherit;
cursor: pointer;
font: inherit;
font-weight: inherit;
letter-spacing: 0;
line-height: inherit;
padding: 0 var(--matrix-filter-padding-inline);
text-align: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
.matrix-filter-button--value {
/* A célula numérica já tem padding. Preservar seu botão de teclado não
deve deslocar o texto que antes era reescrito diretamente no td. */
--matrix-filter-padding-inline: 0px;
}
.matrix-filter-button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
/* Dentro da tabela quem escurece no hover e a celula inteira, e nao o botao:
dois filtros aninhados escureceriam duas vezes. Vence por especificidade. */
.report-table .matrix-filter-button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
filter: none;
}
.matrix-filter-button:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.matrix-filter-button--row {
flex: 1 1 auto;
text-align: left;
}
.report-table :is(th, td).is-cross-filter-dimmed,
.summary-card.is-cross-filter-dimmed {
opacity: 0.4;
}
.report-table :is(th, td).is-cross-filter-selected,
.report-table :is(th, td).is-cross-filter-context {
position: relative;
z-index: 1;
box-shadow: none;
opacity: 1;
}
.summary-card.is-cross-filter-selected {
position: relative;
z-index: 1;
box-shadow: inset 0 0 0 2px var(--system-black);
opacity: 1;
}
.report-table :is(th, td) {
transition: opacity 120ms ease, box-shadow 120ms ease;
}
.report-table thead th {
font-family: var(--font-condensed);
position: sticky;
top: 0;
z-index: 2;
background: var(--system-black);
color: var(--system-white);
}
.report-table tbody tr.is-dark th,
.report-table tbody tr.is-light th {
background: var(--label-primary);
color: var(--system-white);
}
.report-table tbody tr.is-dark td {
background: var(--system-gray-5);
color: var(--label-primary);
}
.report-table tbody tr.is-light th,
.report-table tbody tr.is-light td {
background: var(--system-white);
color: var(--label-primary);
}
.report-table tbody tr.is-light th {
background: var(--label-primary);
color: var(--system-white);
}
.report-table tbody tr.is-cash-total th,
.report-table tbody tr.is-cash-total td,
.report-table tbody tr.is-cash-total td.is-total-column {
background: var(--table-header-background);
background-clip: padding-box;
color: var(--table-header-label);
font-weight: 900;
}
.report-table tbody tr.is-total th,
.report-table tbody tr.is-total td {
background: var(--result-header-background);
color: var(--system-white);
font-weight: 900;
}
.report-table tbody tr.is-result th,
.report-table tbody tr.is-result td {
background: var(--result-header-background);
color: var(--system-white);
font-weight: 900;
}
.financial-matrix__table tbody tr:is(.is-cash-total, .is-total, .is-matricial-total) > :is(th, td) {
position: sticky;
bottom: 0;
z-index: 3;
background-clip: border-box;
}
.financial-matrix__table tbody tr:is(.is-cash-total, .is-total, .is-matricial-total) > :is(th, td)::before {
content: "";
position: absolute;
inset: -10px -1px auto;
height: 10px;
background: var(--table-group-gap);
pointer-events: none;
}
.financial-matrix-visual .financial-matrix__table tbody tr.matrix-footer-spacer > td {
height: 0;
padding: 0;
border: 0;
background: var(--background-secondary);
}
.financial-matrix__table .matrix-row-heading {
padding: 0;
}
.matrix-row-label {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
height: 30px;
padding-left: calc(6px + (var(--matrix-level, 0) * 18px));
padding-right: 8px;
}
.matrix-row-label__text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.matrix-tree-toggle,
.matrix-tree-spacer {
flex: 0 0 16px;
width: 16px;
height: 16px;
}
.matrix-tree-toggle {
display: grid;
place-items: center;
border: 1px solid currentColor;
border-radius: var(--radius-sm);
background: var(--system-black);
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
padding: var(--space-0);
}
.matrix-tree-toggle:hover,
.matrix-tree-toggle:focus-visible {
background: var(--label-primary);
}
.report-table tbody tr.is-light .matrix-tree-toggle {
background: var(--system-black);
}
.report-table tbody tr.is-light .matrix-tree-toggle:hover,
.report-table tbody tr.is-light .matrix-tree-toggle:focus-visible {
background: var(--label-primary);
color: var(--system-gray-5);
}
.report-table tbody tr.is-level-1 th:first-child {
font-weight: 800;
}
/* Cores da tabela de relatorio compartilhada. Vinham de `APLICACAO SEMANTICA`;
leva 5 do #10. As duas regras de cabecalho desta familia NAO estao aqui: elas
empatam em especificidade (0,1,2) com `.financial-result-table thead th`, que
e declarada na secao seguinte, e so valem por vir depois dela. Estao no fim
de MATRIZ FINANCEIRA, com o porque escrito no lugar. */
.report-table,
.mock-report__table {
background: var(--table-grid);
}
.report-table tbody tr.is-dark td {
background: var(--table-row-alternate-background);
color: var(--label-primary);
}
.report-table tbody tr.is-light td {
background: var(--table-row-background);
color: var(--label-primary);
}
/* ==========================================================================
MATRIZ FINANCEIRA E RESULTADOS - Toolbar, expansao e tabela secundaria
========================================================================== */
.financial-matrix-visual {
--matrix-row-header-width: 300px;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
max-width: 100%;
/* O tamanho vem da área de conteúdo, inclusive durante a transição dos
filtros. Só a matriz cede; toolbar e resultado conservam altura natural. */
height: 100%;
min-height: 0;
overflow: visible;
gap: 0;
}
.financial-matrix-visual > :is(.report-table-wrap.financial-matrix, .financial-matrix__split) {
flex: 1 1 0;
min-height: 0;
overflow: auto;
}
.financial-matrix-toolbar {
flex: 0 0 auto;
display: grid;
grid-template-columns: minmax(420px, 1fr) minmax(220px, 290px) auto;
width: 100%;
min-width: 0;
max-width: 100%;
overflow: hidden;
gap: 24px;
padding: 0;
align-items: flex-start;
}
.financial-matrix-toolbar__tabs {
display: flex;
background: var(--system-clear);
height: 32px;
margin-bottom: 0;
width: fit-content;
gap: 14px;
}
.financial-matrix-toolbar__category {
display: flex;
align-items: center;
gap: 16px;
height: 32px;
}
.financial-matrix-toolbar button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 100%;
border-radius: var(--radius-sm);
background: var(--system-gray-5);
color: var(--system-black);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
padding: var(--space-0) var(--space-6);
white-space: nowrap;
}
.financial-matrix-toolbar__button-icon {
width: 17px;
height: 17px;
flex: 0 0 17px;
}
.financial-matrix-toolbar button:not([aria-disabled="true"]):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
.financial-matrix-toolbar button.is-selected:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
filter: brightness(1);
}
.financial-matrix-toolbar__tabs button.is-selected {
background: var(--system-black);
color: var(--system-white);
border: 0px solid var(--system-white);
pointer-events: none;
}
.financial-matrix-toolbar__select {
width: 100%;
height: 32px;
border: 1px solid var(--system-gray-5);
border-radius: var(--radius-sm);
background: var(--system-white);
color: var(--system-black);
font: inherit;
font-size: 11px;
padding: var(--space-0) var(--space-2);
cursor: pointer;
transition: filter var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
.financial-matrix-toolbar__select:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge),
.financial-matrix-toolbar__select:focus-visible {
background: var(--control-hover-background);
}
.financial-matrix-toolbar__category .financial-matrix-toolbar__rules {
width: 32px;
min-width: 32px;
flex: 0 0 32px;
padding: 0;
}
.financial-matrix-toolbar__category button.is-selected {
background: var(--result-header-background);
color: var(--finance-accent-label);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table-wrap {
border: 1px solid var(--system-white);
border-radius: 4px;
background: var(--system-gray-5);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table {
width: max-content;
min-width: 100%;
table-layout: fixed;
border-spacing: 2px;
background: var(--system-white);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .matrix-row-header-column {
width: var(--matrix-row-header-width);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table th,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table td {
min-width: 102px;
height: 26px;
font-size: 12px;
font-weight: 750;
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table :is(th, td):not(:first-child) {
max-width: none;
}
/* Só os valores: rótulos de linha e cabeçalhos seguem com 12 px. Vale para a
tabela principal e para a de resultado. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table tbody td:not(:first-child),
.financial-result-table tbody td:not(:first-child) {
font-size: var(--financial-value-font-size);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table th:first-child,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table td:first-child {
box-sizing: border-box;
width: var(--matrix-row-header-width);
min-width: var(--matrix-row-header-width);
max-width: var(--matrix-row-header-width);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table thead th {
background: var(--label-primary);
color: var(--system-white);
font-size: 13px;
font-weight: 900;
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody th {
background: var(--label-primary);
color: var(--system-white);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-dark td {
background: var(--system-gray-5);
color: var(--label-primary);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-light td {
background: var(--system-white);
color: var(--label-primary);
}
/* A ENFASE DE FUNDO da linha de grupo vale so no nivel RAIZ (#123). Antes valia
em qualquer `is-group-row`, e nas paginas DFC/DRE isso significava TODA linha:
nenhuma delas e folha, entao a tabela inteira ficava num tom so e o zebrado
nunca aparecia. Enfase que se aplica a tudo nao destaca nada. O peso e o
espacamento continuam em toda linha de grupo - o que passou a distinguir o
nivel raiz e o fundo, nao a tipografia. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-group-row td {
color: var(--system-black);
font-weight: 900;
padding-right: 4px;
}
/* Alias semantico no lugar do `--system-gray-5` cru (regra 13, achado do Gemini
no PR #124). O alias certo e o da FAIXA FORTE, nao `--table-cell-background`
como ele sugeriu: os dois empatam no claro (229,229,234), mas no escuro
`--table-cell-background` e 58,58,60 e levaria a linha raiz de 44,44,46 para
58,58,60 - a raiz perderia a enfase justamente onde ela importa. Com o alias
da faixa forte o computado nao muda em nenhum dos dois temas. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-group-row.is-root-row td {
background: var(--table-row-alternate-background);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-root-row th,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-root-row td {
border-top: 10px solid var(--table-surface-background);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-root-row:first-child th,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-root-row:first-child td {
border-top: 0;
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table .is-total-column {
background: var(--table-total-background);
color: var(--table-total-label);
font-weight: 900;
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-cash-total th,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-cash-total td:not(.is-total-column) {
background: var(--table-header-background);
background-clip: padding-box;
color: var(--table-header-label);
font-weight: 900;
padding-right: 4px;
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-cash-total .is-total-column {
background: var(--table-header-background);
background-clip: padding-box;
color: var(--table-header-label);
font-weight: 900;
padding-right: 4px;
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .matrix-row-label {
height: 26px;
padding-left: calc(8px + (var(--matrix-level, 0) * 18px));
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .matrix-tree-toggle {
background: var(--system-black);
color: var(--system-gray-5);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .matrix-tree-toggle:hover {
background: var(--label-primary);
color: var(--system-gray-5);
}
.report-table-wrap.financial-result-table {
flex: 0 0 auto;
margin: 14px 0 0;
border-color: var(--system-white);
border-radius: 4px;
}
.financial-result-table .report-table {
width: max-content;
min-width: 100%;
border-spacing: 2px;
background: var(--system-white);
}
.financial-result-table thead th,
.financial-result-table tbody th {
background: var(--result-header-background);
color: var(--result-header-label);
font-weight: 900;
}
.financial-result-table tbody td {
background: var(--result-cell-background);
color: var(--result-cell-label);
font-weight: 900;
}
.financial-result-table .is-total-column {
background: var(--result-header-background);
color: var(--result-header-label);
}
.financial-result-table th:first-child {
width: var(--matrix-row-header-width);
min-width: var(--matrix-row-header-width);
max-width: var(--matrix-row-header-width);
}
/* RESIDUO MEDIDO (leva de doc do #10, 02/08) - estas marcas de total-column NAO
vencem concorrente legitimo, ao contrario das marcas que os comentarios das
secoes seguintes descrevem. A coluna de total ja e pintada, com o MESMO valor
e SEM marca, pela regra-base `.financial-matrix__table .is-total-column`
(secao MATRIZ FINANCEIRA, L~3199) no cabecalho; a celula de total do CORPO e
sobrescrita pelo emphasis com marca (`...tbody tr:not(.is-cash-total)
td.is-total-column`, L~7874); a celula de caixa (regra logo abaixo) tem a
maior especificidade e ja vence o `is-cash-total > *` (L~7892, mesmo verde);
e os bracos `.report-table tr.is-total` da regra irma (L~3502) vencem a base
L~2866 por ORDEM. Medido: retirando as marcas de {esta, a de caixa, a irma
L~3502} de uma vez, 0 mudanca de pixel em 260 elementos x {caixa,competencia}
x {claro,escuro}. Marca retirada; as declaracoes ficam (redundantes com a base
L~3199 - colapsar a duplicata e uma tarefa de tidy separada). NAO reintroduzir
a marca: se parecer que precisa, a base ou o emphasis e que devem mudar. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table thead th.is-total-column,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr:not(.is-cash-total) td.is-total-column {
background: var(--table-total-background);
color: var(--table-total-label);
font-weight: 900;
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-cash-total td.is-total-column {
background: var(--table-header-background);
background-clip: padding-box;
color: var(--table-header-label);
font-weight: 900;
}
.financial-matrix--matricial .financial-matrix__split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
min-width: 0;
min-height: 0;
overflow: auto;
}
.financial-matrix--matricial .report-table-wrap {
min-height: 0;
border: 1px solid var(--system-white);
border-radius: 0 4px 4px 4px;
background: var(--system-gray-5);
}
.financial-matrix--matricial .report-table {
width: max-content;
min-width: 100%;
border-spacing: 1px;
background: var(--system-white);
}
.financial-matrix--matricial .report-table th,
.financial-matrix--matricial .report-table td {
min-width: 94px;
height: 24px;
font-size: 11px;
font-weight: 700;
}
.financial-matrix--matricial .report-table th:first-child,
.financial-matrix--matricial .report-table td:first-child {
min-width: 300px;
max-width: 460px;
}
.financial-matrix--matricial .financial-matrix__table thead th {
background: var(--system-gray-5);
color: var(--result-header-background);
font-weight: 900;
border-bottom: 2px solid var(--system-black);
}
.financial-matrix--matricial .financial-matrix__table thead th:first-child,
.financial-matrix--matricial .financial-matrix__table tbody th {
border-right: 3px solid var(--system-black);
}
/* O `th` saiu destes dois seletores: a primeira coluna é a âncora de leitura da
tabela e não pode andar junto com a faixa das linhas — na matriz principal ela
sempre foi pintada à parte, pelo par `--table-row-header-*`. Ver a regra que
as unifica em CORES QUE VEM DEPOIS DA FORMA (#123). */
.financial-matrix--matricial .financial-matrix__table tbody tr.is-dark td {
background: var(--system-gray-5);
color: var(--system-black);
}
.financial-matrix--matricial .financial-matrix__table tbody tr.is-light td {
background: var(--system-white);
color: var(--system-black);
}
/* A marca FICA (load-bearing, medido na prova FULL): sem ela a faixa vence e o
`color` computado do cabecalho da matricial cai de preto puro (0,0,0) para
`--label-primary` (17,17,17) no tema claro - 5166 propriedades computadas
mudam (color e os derivados de currentColor: border/outline/caret/text-stroke)
so na matricial-cneg/light. O texto pintado nao muda (quem pinta e o
`-webkit-text-fill-color`), mas a nao-regressao aqui e por propriedade
computada, nao por pixel - entao a marca de cor tem de ficar. */
.financial-matrix--matricial .financial-matrix__table tbody th {
color: var(--result-header-background) !important;
font-weight: 800;
}
.financial-matrix--matricial .financial-matrix__table tbody tr.is-matricial-total th,
.financial-matrix--matricial .financial-matrix__table tbody tr.is-matricial-total td {
background: var(--system-white);
color: var(--result-header-background);
font-weight: 900;
}
.financial-matrix--matricial .matrix-row-label {
height: 24px;
padding-left: calc(8px + (var(--matrix-level, 0) * 18px));
}
.financial-matrix--matricial .matrix-tree-toggle {
background: var(--system-white);
color: var(--system-gray);
border-color: var(--system-gray);
}
@media (max-width: 1180px) {
.financial-matrix--matricial .financial-matrix__split {
grid-template-columns: minmax(0, 1fr);
}
}
/* Esqueleto de recarga das tabelas da matriz: uma faixa que varre por cima do
conteudo antigo enquanto o novo nao chega. Sem concorrente no arquivo. */
.financial-matrix-visual.is-tables-loading > :is(.report-table-wrap, .financial-matrix__split) {
position: relative;
pointer-events: none;
}
.financial-matrix-visual.is-tables-loading > :is(.report-table-wrap, .financial-matrix__split)::after {
content: "";
position: absolute;
z-index: 8;
inset: 0;
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--table-surface-background) 84%, transparent) 0%,
color-mix(in srgb, var(--label-primary) 16%, var(--table-surface-background)) 50%,
color-mix(in srgb, var(--table-surface-background) 84%, transparent) 100%
);
background-size: 220% 100%;
opacity: 0.72;
animation: matrix-table-loading 700ms linear infinite;
}
@keyframes matrix-table-loading {
from { background-position: 180% 0; }
to { background-position: -40% 0; }
}
.report-table--detail th,
.report-table--detail td {
min-width: 120px;
text-align: left;
}
/* Cores da matriz financeira, da tabela de resultado e - por imposicao da
cascata - do cabecalho da tabela de relatorio. Vinham de `APLICACAO
SEMANTICA`; leva 5 do #10.
`.report-table thead th` (0,1,2) empata com `.financial-result-table thead th`
(0,1,2), declarada nesta secao, e so vence por vir depois. Subir a regra para
a secao TABELAS FINANCEIRAS, que seria a casa dela, rebaixaria o cabecalho de
todas as tabelas em silencio - medido com o CSSOM antes de mover. */
.report-table thead th,
.report-table tbody tr.is-dark th,
.report-table tbody tr.is-light th {
background: var(--table-row-header-background);
color: var(--table-row-header-label);
}
.report-table thead th {
background: var(--table-header-background);
color: var(--table-header-label);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table-wrap,
.financial-matrix--matricial .report-table-wrap {
border-color: var(--table-grid);
background: var(--background-secondary);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table,
.financial-matrix--matricial .report-table {
background: var(--table-grid);
}
/* A matricial entrou nestas duas regras no #123: a primeira coluna dela era
pintada pelo zebrado das linhas e sumia dentro da tabela. Unificar aqui, em
vez de escrever um par novo, é o que garante o "igual à matriz principal"
por construção — se o token mudar, muda nas duas. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash, .financial-matrix--matricial) .financial-matrix__table thead th,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash, .financial-matrix--matricial) .financial-matrix__table tbody th {
background: var(--table-row-header-background);
color: var(--table-row-header-label);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash, .financial-matrix--matricial) .financial-matrix__table thead th {
background: var(--table-header-background);
color: var(--table-header-label);
}
/* Mesma restricao ao nivel raiz da secao da forma (#123): a linha de grupo
comum volta a obedecer o zebrado, e so a raiz mantem o tom forte. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-dark td,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-group-row.is-root-row td {
background: var(--table-row-alternate-background);
color: var(--label-primary);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-light td {
background: var(--table-row-background);
color: var(--label-primary);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-root-row th,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-root-row td {
border-bottom-color: var(--table-grid);
}
.financial-result-table .report-table {
background: var(--table-grid);
}
/* Regra irma do bloco de total-column da secao MATRIZ FINANCEIRA (L~3273): os
bracos de matriz apenas repetem a base L~3199 (redundantes, mesmo valor); os
bracos `.report-table tr.is-total` sao os uteis - vencem a base L~2866 por
ORDEM (mesma especificidade, vem depois), sem precisar de marca. Marca
retirada na mesma medicao de residuo descrita em L~3273. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table thead th.is-total-column,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr:not(.is-cash-total) td.is-total-column,
.report-table tbody tr.is-total th,
.report-table tbody tr.is-total td {
background: var(--table-total-background);
color: var(--table-total-label);
}
/* GRUPO load-bearing do cabecalho do result-table (esta regra + as duas de
regime logo abaixo). Cuidado: cada marca deste grupo, retirada SOZINHA, parece
inerte - uma irma de mesmo valor cobre - mas o grupo NAO e removivel. Medido
na perturbacao maxima (as tres retiradas de uma vez, em caixa E competencia,
claro E escuro): 12 celulas de cabecalho perdem a cor do regime (azul/indigo)
e caem para `--result-header-background` em TODOS os quatro combos. O regime e
quem pinta o cabecalho no visual renderizado; esta regra de result-header e o
piso semantico logo abaixo dele. As marcas ficam. */
.financial-result-table thead th,
.financial-result-table tbody th,
.financial-result-table .is-total-column {
background: var(--result-header-background) !important;
color: var(--result-header-label) !important;
}
/* Regime financeiro: cor semantica aplicada no visual renderizado. Ganha por
PRIORIDADE do result-header acima (grupo trava-mutuo, medido - ver o comentario
dele). Sem a marca, o azul/indigo do regime perde para o
`--result-header-background` daquela regra. */
.financial-matrix-visual[data-regime="caixa"] .financial-result-table :is(thead th, tbody th, .is-total-column) {
background: var(--system-blue) !important;
}
.financial-matrix-visual[data-regime="competencia"] .financial-result-table :is(thead th, tbody th, .is-total-column) {
background: var(--system-indigo) !important;
}
.financial-matrix-visual[data-regime="caixa"] .financial-result-table tbody td:not(.is-total-column) {
background: color-mix(in srgb, var(--system-blue) 18%, var(--background-primary));
}
.financial-matrix-visual[data-regime="competencia"] .financial-result-table tbody td:not(.is-total-column) {
background: color-mix(in srgb, var(--system-indigo) 18%, var(--background-primary));
}
:root[data-theme="dark"] .financial-matrix-visual[data-regime="caixa"] .financial-result-table tbody td:not(.is-total-column) {
background: color-mix(in srgb, var(--system-blue) 32%, var(--background-secondary));
}
:root[data-theme="dark"] .financial-matrix-visual[data-regime="competencia"] .financial-result-table tbody td:not(.is-total-column) {
background: color-mix(in srgb, var(--system-indigo) 32%, var(--background-secondary));
}
/* Botao de filtro no cabecalho: a cor acompanha a celula. O `color: inherit`
puxa a cor que o grupo do result-header (com marca) ja pintou na celula, e as
cores especificas (result-header-label, table-total-label, system-white)
vencem por especificidade/ordem sem precisar de marca. Medido 0 pixel nos 4
combos (caixa/competencia x claro/escuro), com thead/tbody/total/cash-total.
As marcas cairam. */
.financial-result-table :is(th, td) > .matrix-filter-button,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table :is(th, td) > .matrix-filter-button {
background: var(--system-clear);
color: inherit;
}
.financial-result-table thead th > .matrix-filter-button,
.financial-result-table tbody th > .matrix-filter-button,
.financial-result-table .is-total-column > .matrix-filter-button {
color: var(--result-header-label);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table thead th.is-total-column > .matrix-filter-button,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr:not(.is-cash-total) td.is-total-column > .matrix-filter-button {
color: var(--table-total-label);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-cash-total :is(th, td) > .matrix-filter-button {
color: inherit;
}
.financial-result-table tbody td:not(.is-total-column) {
background: var(--result-cell-background);
color: var(--result-cell-label);
}
.financial-matrix-toolbar button {
border-color: transparent;
background: transparent;
color: var(--label-primary);
border-radius: var(--radius-sm);
box-shadow: none;
}
.financial-matrix-toolbar__tabs button.is-selected {
border-color: var(--separator-opaque);
background: var(--label-primary);
color: var(--label-inverse);
}
/* Um unico componente visual para os controles de regime e categorizacao.
Os containers continuam cuidando apenas de layout/compactacao; borda,
sombra, tipografia e hover pertencem ao botao compartilhado. */
.financial-control-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-width: 136px;
height: 32px;
padding: var(--space-0) var(--space-4);
border: 1px solid var(--separator);
border-radius: var(--radius-sm);
background: var(--control-background);
color: var(--label-primary);
cursor: pointer;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 900;
letter-spacing: 0.5px;
box-shadow: var(--shadow-small);
transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), filter var(--duration-fast) var(--easing-standard);
white-space: nowrap;
}
.financial-control-button:not(.is-active):not(.is-selected):not([aria-disabled="true"]):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-background);
color: var(--label-primary);
filter: brightness(0.9);
}
.financial-control-button:disabled,
.financial-control-button[aria-disabled="true"] {
cursor: not-allowed;
box-shadow: none;
}
.financial-control-button:is(:disabled, [aria-disabled="true"]) > :not(.control-tooltip) {
opacity: var(--opacity-disabled);
}
.financial-category-count {
position: absolute;
top: -7px;
right: -7px;
display: grid;
place-items: center;
min-width: 18px;
height: 18px;
box-sizing: border-box;
padding-inline: var(--space-1);
border-radius: var(--radius-pill);
background: var(--status-warning-fill);
color: var(--status-warning-label);
font-size: 10px;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
}
.financial-category-count[hidden] { display: none; }
/* Categorizados usa accent; Sem categoria é uma vista neutra com aviso semântico. */
.financial-control-button.is-selected,
.financial-control-button:is([aria-pressed="true"], [aria-selected="true"]),
.financial-matrix-toolbar__category button.is-selected {
border-color: var(--finance-accent);
background: var(--finance-accent);
color: var(--finance-accent-label);
}
.financial-control-button:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.financial-control-button:not(.is-active):not(.is-selected):active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
filter: brightness(0.85);
}
.financial-matrix-toolbar__select {
border-color: var(--separator);
background: var(--control-background);
color: var(--label-primary);
}
/* `.is-filtered` e aplicado pelo JS ao gatilho do multiselect de categorias
(src/financial-matrix.js), nunca a este select - a regra abaixo nao tem
elemento hoje. Preservada como estava; remover e decisao de outra leva. */
.financial-matrix-toolbar__select.is-filtered {
border-color: var(--finance-accent);
background: var(--finance-accent);
color: var(--finance-accent-label);
}
.financial-matrix-toolbar__select.is-filtered:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .matrix-tree-toggle,
.financial-matrix--matricial .matrix-tree-toggle {
border-color: var(--table-tree-control);
background: var(--system-clear);
color: var(--table-tree-control);
opacity: 1;
transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .matrix-tree-toggle:hover,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .matrix-tree-toggle:focus-visible,
.financial-matrix--matricial .matrix-tree-toggle:hover,
.financial-matrix--matricial .matrix-tree-toggle:focus-visible {
background: var(--label-primary);
color: var(--system-gray-5);
}
.financial-matrix--matricial .financial-matrix__table tbody tr.is-dark td {
background: var(--table-row-alternate-background);
color: var(--label-primary);
}
.financial-matrix--matricial .financial-matrix__table tbody tr.is-light td,
.financial-matrix--matricial .financial-matrix__table tbody tr.is-matricial-total th,
.financial-matrix--matricial .financial-matrix__table tbody tr.is-matricial-total td {
background: var(--table-row-background);
color: var(--result-header-background);
}
:root[data-theme="dark"] .financial-matrix--matricial .financial-matrix__table :is(th, td) {
color: var(--label-primary) !important;
}
/* Host visual da matriz, base da toolbar e moldura da tabela de resultado.
Vinham da camada SIDEBAR CONTINUA. `.financial-matrix-toolbar` sobrescreve a
L2611 e `.report-table-wrap.financial-result-table` a L2827, as duas desta
secao. As regras de GRADE da toolbar nao vieram junto: o piso delas e a
L5596, la na faixa sem cabecalho - ver o grupo de la.
Aqui existiam mais duas regras, e as duas cairam na leva 10 porque a secao
`CONTROLES DA TOOLBAR`, logo abaixo, abre repetindo as duas:
- `.report-visual-host:has(.financial-matrix-visual), .financial-matrix-visual`
com `overflow: visible` - copia exata, so escrita numa linha so;
- `.financial-matrix-toolbar` com as MESMAS cinco declaracoes e os mesmos
valores, em ordem interna diferente (`overflow` antes de `align-items` em
vez de depois). Ordem dentro do bloco so muda vencedor entre atalho e
longhand da mesma familia, e estas cinco - `position`, `z-index`,
`overflow`, `align-items`, `column-gap` - nao tem nenhuma relacao dessas
entre si. Mesmo seletor, mesmo efeito, e a de baixo vinha depois.
O que a L2611 e a L2827 sobrescreviam continua sobrescrito: quem apagou nao
foi a regra que ganhava, foi a que ja perdia. */
.report-table-wrap.financial-result-table {
position: relative; z-index: 2; overflow: auto;
box-shadow: var(--standard-shadow);
}
/* ==========================================================================
CONTROLES DA TOOLBAR - Multiselect de categorias, R$/YoY e dropdown modal
========================================================================== */
/* Nao e duplicata de `MATRIZ FINANCEIRA E RESULTADOS`, logo acima: la esta a
toolbar, aqui estao os controles que moram dentro dela. Esta secao veio da
faixa que a leva 8 nomeou, e subiu com o mecanismo de dropdown modal na mesma
ordem interna de sempre - menos o `@media (max-width: 1180px)` que fechava a
secao, que ficou preso ao fim de `MODULOS E PAINEIS`, abaixo, com a explicacao
no proprio bloco. Ele sobrescreve uma regra que mora la.
A janela foi medida com `scripts/prova-visual/cascata.mjs`: os pisos de
`.financial-matrix-toolbar`, `.financial-matrix-toolbar__tabs` e
`.financial-matrix-toolbar__category` estao em `MATRIZ FINANCEIRA E
RESULTADOS`, acima; os de `.finance-context-bar` estao em
`CONTEXTO FINANCEIRO`, acima tambem; e os unicos tetos (`.filter-panel` e
`.financial-matrix-toolbar`) estao em `RESPONSIVIDADE`, no fim do arquivo.
O oraculo e CEGO para `body.is-dropdown-modal-open` - a classe nunca esta
ligada durante a varredura -, entao a faixa cruzada foi conferida a mao,
propriedade por propriedade: as unicas quatro marcas de `cursor` do arquivo
sao as deste mecanismo, e viajaram juntas; nada no arquivo declara sobre
`.dropdown-dismiss-layer`; e das seis classes que o JS hospeda, so
`.engineering-filter` ficou abaixo desta secao - empate de `position` com
valor IDENTICO (`relative`), que inverter nao muda. `.engineering-filter-bar`
nao declara nenhuma dessas propriedades em lugar nenhum do arquivo. */
.report-visual-host:has(.financial-matrix-visual),
.financial-matrix-visual {
overflow: visible;
}
.financial-matrix-toolbar {
position: relative;
z-index: 30;
align-items: center;
overflow: visible;
column-gap: 24px;
}
.financial-matrix-toolbar__value-mode,
.financial-category-multiselect {
min-width: 0;
isolation: isolate;
}
/* Aqui existia uma copia exata de `.financial-category-multiselect >
.financial-matrix-toolbar__select` (mesmas cinco declaracoes, mesmos
valores) que a copia da secao SIDEBAR CONTINUA repetia mais abaixo. Mesmo
seletor e mesmos valores: quem vinha depois vencia tudo, e esta nao pintava
nada. Apagada, nao movida.
A leva 10 apagou mais tres do mesmo feitio, e as tres eram repetidas pelo
grupo que veio da ex-faixa, ~170 linhas abaixo NESTA MESMA secao:
- `.financial-category-multiselect` (position/z-index/width/min-width) - a de
baixo repete as quatro com os mesmos valores e ainda acrescenta
`isolation: isolate`, que ja vinha de `.financial-matrix-toolbar__value-mode,
.financial-category-multiselect` acima;
- `.financial-category-multiselect:has(...__menu:not([hidden]))` com
`z-index: 100` - copia exata;
- `.financial-category-multiselect__menu` com as sete declaracoes de posicao
e tamanho - copia exata.
Nenhuma delas era a vencedora de coisa alguma: mesmo seletor empata em
especificidade, e a copia de baixo vinha depois. */
.financial-category-multiselect__option:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) .filter-menu__option-checkbox::after {
height: 4px;
}
/* Aqui existiam duas coisas, e as duas eram repeticao:
- uma copia exata de `.report-table-wrap.financial-result-table` que a secao
SIDEBAR CONTINUA repetia mais abaixo, declaracao por declaracao;
- a segunda das TRES copias de `.theme-menu--sidebar`. As tres viraram uma
so, que agora mora junto de `.theme-menu--topbar`; o `z-index: 10` desta
aqui foi junto, que era a unica declaracao dela que vencia. */
/* Controles globais de valores, multisselecao e movimento dos filtros. */
.values-visibility-toggle .ui-icon {
color: inherit;
}
.values-visibility-toggle:hover .ui-icon,
.values-visibility-toggle:focus-visible .ui-icon {
filter: brightness(0.72);
}
.filter-panel {
max-height: 520px;
opacity: 1;
transform-origin: top;
}
.filter-panel.is-visibility-hidden {
max-height: 0;
overflow: hidden;
border-bottom-width: 0;
opacity: 0;
padding-top: var(--space-0);
padding-bottom: var(--space-0);
pointer-events: none;
}
.financial-matrix-toolbar {
align-items: center;
margin-bottom: 0;
}
.financial-matrix-toolbar__tabs {
margin-bottom: 0;
}
.financial-category-multiselect {
position: relative;
min-width: 0;
}
.financial-category-multiselect > .financial-matrix-toolbar__select {
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
}
.financial-category-multiselect__chevron {
width: 6px;
height: 6px;
flex: none;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
}
.financial-category-multiselect__menu {
position: absolute;
z-index: 60;
top: 100%;
right: 0;
left: 0;
width: 100%;
min-width: 0;
max-height: 300px;
overflow: auto;
border: 1px solid var(--separator);
border-radius: var(--radius-sm);
background: var(--background-primary);
box-shadow: var(--standard-shadow);
padding: var(--space-1);
}
.financial-category-multiselect__menu[hidden] { display: none; }
.financial-category-multiselect__option {
width: 100%;
height: 28px;
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--label-primary);
font-size: 10px;
padding: var(--space-0) var(--space-2);
text-align: left;
}
.financial-category-multiselect__option:is(:hover, :focus-visible) {
background: var(--control-hover-background);
}
.financial-category-multiselect__option:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: -2px;
}
.financial-category-multiselect__option.is-parent {
border-top: 1px solid var(--separator);
font-weight: 850;
}
.financial-category-multiselect__option:first-child { border-top: 0; }
.financial-category-multiselect__option:not(.is-parent) { padding-left: var(--space-4); }
/* Aqui existia
`.financial-category-multiselect__option.is-selected .filter-menu__option-checkbox`
(border-color e background, os dois `--finance-accent`). Apagada na leva 10:
a copia exata esta ~220 linhas abaixo, nesta mesma secao, junto da regra que
desenha a propria caixa de marcacao - que e a casa dela. Mesmo seletor, mesmo
corpo, e a de baixo vinha depois. */
.financial-category-multiselect__option:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) .filter-menu__option-checkbox::after {
content: "";
width: 7px;
height: var(--space-4);
border-bottom: 2px solid var(--finance-accent-label);
border-left: 2px solid var(--finance-accent-label);
transform: translateY(-1px) rotate(-45deg);
}
.report-table-wrap.financial-result-table {
box-shadow: var(--standard-shadow);
}
/* Daqui para baixo estava a 400 linhas deste bloco, no fim da faixa, para onde
a leva 7 empurrou tudo que vinha da camada `SIDEBAR CONTINUA`. Subiu INTEIRO
e em ordem, e a ordem interna e o que o torna correto: cada regra continua
depois do piso que o `cascata.mjs` mediu - o multiselect depois de
`.financial-category-multiselect` acima, o interruptor R$/YoY antes de
`.finance-context-value-mode`, e o mecanismo de dropdown modal depois dos
dois `z-index` que ele precisa vencer (toolbar 30, multiselect 40), que e a
razao de ele nunca poder ser distribuido.
O `@media (max-width: 1180px)` do fim veio junto, como bloco de midia
inteiro e com a condicao: ele sobrescreve `.finance-context-value-mode`, que
esta logo acima dele. Regra de dentro de `@media` nunca entra em plano de
recorte - tira-la do bloco muda a LARGURA em que ela vale sem mudar uma linha
do conteudo. */
.financial-category-multiselect { position: relative; z-index: var(--z-category-trigger); width: 100%; min-width: 280px; isolation: isolate; }
.financial-category-multiselect:has(.financial-category-multiselect__menu:not([hidden])) { z-index: var(--z-open-filter); }
.financial-category-multiselect > .financial-matrix-toolbar__select {
width: 100%; min-width: 280px; height: 32px; min-height: 32px; padding: var(--space-0) var(--space-3);
}
.financial-matrix-toolbar button.financial-matrix-toolbar__select {
font-size: 11px;
}
.financial-category-multiselect__menu {
top: 100%;
right: 0;
left: 0;
z-index: var(--z-category-menu);
width: 100%;
min-width: 0;
max-height: 320px;
}
/* Seletor R$ / YoY: somente o switch executa a troca de modo. */
.financial-matrix-toolbar__value-mode {
position: relative;
display: grid;
grid-template-columns: minmax(30px, 0.6fr) 42px minmax(48px, 1fr);
align-items: center;
overflow: visible;
}
/* Sem `color` aqui: o mesmo seletor reaparece mais abaixo nesta secao, dentro
de `.financial-value-mode__label, --currency, --yoy`, declarando
`var(--label-primary)`. Mesma especificidade e mais embaixo, entao o
`var(--value-switch-accent)` que ficava nesta linha nunca pintou nada. */
.financial-value-mode__label {
font-size: 12px;
font-weight: 800;
line-height: 1;
text-align: center;
-webkit-user-select: none;
user-select: none;
}
.financial-value-mode__switch-wrap {
position: relative;
display: grid;
place-items: center;
width: 42px;
height: 30px;
justify-self: center;
}
.financial-value-mode__switch {
position: relative;
width: 40px;
height: 22px;
padding: var(--space-0);
border: 1px solid var(--separator);
border-radius: var(--radius-pill);
background: var(--system-gray-3);
cursor: pointer;
}
.financial-value-mode__switch::after {
content: "";
position: absolute;
top: 1px;
left: 2px;
width: 18px;
height: 18px;
border-radius: var(--radius-pill);
/* Habilitado = indigo cheio. O `color-mix(... 72%, --system-gray-7)` deslavava
o knob e o fazia parecer translucido mesmo com o switch ativo. O estado
desabilitado ainda esmaece pela `opacity: 0.8` de `.is-disabled` (L~4194). */
background: var(--finance-accent);
transition: transform var(--duration-fast) var(--easing-standard);
}
.financial-value-mode__switch.is-yoy::after { transform: translateX(18px); }
.financial-value-mode__switch-wrap.is-disabled { cursor: help; }
/* So `cursor`: o `opacity: 0.5` que estava aqui perdia para o `0.8` do mesmo
seletor, mais abaixo nesta secao. */
.financial-value-mode__switch-wrap.is-disabled .financial-value-mode__switch { cursor: help; }
.control-tooltip {
position: absolute;
/* #96: abre ABAIXO do switch (antes `bottom: 100%+7px`, subia por cima do
painel de filtros que fica logo acima da barra de contexto e ficava atras
dele). z-index no topo para todo tooltip aparecer na frente de tudo. */
z-index: var(--z-tooltip);
top: calc(100% + 7px);
/* Alinhado pela direita, como o antigo popover do YoY logo
abaixo. Centralizado (left: 50% + translate(-50%)) ele passava 24px da
borda da tela sempre que a barra empilhava: o interruptor fica perto da
margem direita em 900px e 376px, e metade dos 240px caia fora. Em 1440px
sobrava espaco e o defeito nao aparecia - por isso so quebrava no
estreito. */
right: 0;
width: max-content;
max-width: 240px;
padding: var(--space-2) var(--space-2);
border: 1px solid var(--separator);
border-radius: var(--radius-md);
background: var(--background-secondary);
box-shadow: var(--standard-shadow);
color: var(--label-primary);
font-size: 11px;
font-weight: 700;
line-height: 1.3;
white-space: normal;
opacity: 0;
pointer-events: none;
transform: translate(0, -4px);
transition: opacity var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}
.control-tooltip.is-visible {
opacity: 1;
transform: translate(0, 0);
}
.financial-value-mode__yoy-area {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding-right: var(--space-3);
}
/* O bloco que estava aqui era copia exata de um identico mais abaixo nesta
mesma secao - mesmo seletor, mesma declaracao, mesmo valor. Apagado. */
.financial-value-mode__info {
display: grid;
place-items: center;
padding: var(--space-0);
border: 0;
background: transparent;
color: var(--label-secondary);
cursor: pointer;
}
.financial-value-mode__info {
position: absolute;
top: 50%;
right: 0;
width: 14px;
height: 14px;
transform: translateY(-50%);
}
.financial-value-mode__info:is(:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge), :focus-visible) { background: var(--control-hover-background); }
/* O multiselect de categorias reutiliza o mesmo checkbox dos filtros. */
.financial-category-multiselect__option .filter-menu__option-checkbox {
position: relative;
display: block;
width: var(--space-4);
height: var(--space-4);
box-sizing: border-box;
border: 1px solid var(--label-secondary);
border-radius: var(--radius-sm);
background: var(--control-background);
}
.financial-category-multiselect__option:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) .filter-menu__option-checkbox {
border-color: var(--finance-accent);
background: var(--finance-accent);
}
.financial-category-multiselect__option:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) .filter-menu__option-checkbox::after {
position: absolute;
top: 1px;
left: 4px;
width: 3px;
height: 7px;
border: 0;
border-right: 2px solid var(--system-white);
border-bottom: 2px solid var(--system-white);
content: "";
transform: rotate(45deg);
}
.financial-value-mode__label,
.financial-value-mode__label--currency,
.financial-value-mode__label--yoy {
color: var(--label-primary);
}
.financial-value-mode__switch-wrap.is-disabled .financial-value-mode__switch {
opacity: var(--opacity-disabled);
}
.financial-value-mode__switch-wrap.is-disabled .financial-value-mode__switch::after {
background: var(--separator);
}
.financial-value-mode__yoy-area.is-disabled .financial-value-mode__label {
opacity: var(--opacity-disabled);
}
.financial-value-mode__info .ui-icon {
display: block;
overflow: hidden;
}
.financial-value-mode__info .ui-icon {
width: 14px;
height: 14px;
font-size: 12px;
}
/* Dropdowns funcionam como modais leves enquanto a lista estiver aberta. */
.dropdown-dismiss-layer {
position: fixed;
z-index: 9998;
inset: 0;
background: color-mix(in srgb, var(--system-black) 30%, transparent);
pointer-events: auto;
}
.dropdown-dismiss-layer[hidden] { display: none; }
body.is-dropdown-modal-open,
body.is-dropdown-modal-open * {
cursor: default !important;
}
body.is-dropdown-modal-open :is(.filter-menu, .financial-category-multiselect__menu),
body.is-dropdown-modal-open :is(.filter-menu, .financial-category-multiselect__menu, .engineering-date-popover) * {
pointer-events: auto;
}
body.is-dropdown-modal-open :is(.filter-menu, .financial-category-multiselect__menu, .engineering-date-popover) {
z-index: 10000;
}
body.is-dropdown-modal-open :is(.filter-menu, .financial-category-multiselect__menu) button {
cursor: pointer !important;
}
body.is-dropdown-modal-open .engineering-date-popover button,
body.is-dropdown-modal-open button.is-dropdown-modal-trigger {
cursor: pointer !important;
}
body.is-dropdown-modal-open :is(.filter-menu, .financial-category-multiselect__menu) input {
cursor: text !important;
}
/* As tres marcas de `z-index`/`overflow` deste mecanismo sairam: sao classes
que o JS poe no elemento no momento em que abre o dropdown, e nada mais no
arquivo declara essas propriedades sobre elas. Nao havia concorrente para
vencer. As de `cursor` logo acima FICAM, e o motivo e o oposto: a regra
`body.is-dropdown-modal-open *` pinta `cursor: default` com marca sobre TODO
elemento da pagina, e as excecoes (botao, campo de texto) so a alcancam com
marca tambem. Ali e marca contra marca, de proposito. */
.is-dropdown-modal-trigger {
position: relative;
z-index: 9999;
}
.is-dropdown-modal-layer {
position: relative;
z-index: 9999;
overflow: visible;
}
.finance-context-value-mode {
position: static;
/* #96: `start` (nao `center`): ancora o switch na borda ESQUERDA da coluna 2,
que comeca logo depois das abas de regime (coluna 1, largura estavel). Com
`center` a posicao seguia o centro da coluna 2 (`minmax(160px,1fr)`), que se
movia quando o reportMeta (coluna 3) trocava de largura no reload (skeleton
150/210/280px vs pilulas finais) — o switch escorregava para a esquerda e
voltava a cada troca. Ancorado a esquerda, ele nao se move no loading. */
justify-self: start;
width: 150px;
min-width: 150px;
transform: none;
}
.financial-matrix-toolbar,
.report-skeleton__toolbar {
grid-template-columns: max-content minmax(0, 1fr) max-content;
grid-template-areas: "tabs . category-mode";
gap: 8px;
padding: var(--space-2);
border: 2px solid var(--table-frame-border);
border-bottom: 0;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background: var(--table-header-background);
}
.financial-matrix-toolbar__tabs {
grid-area: tabs;
}
.financial-category-multiselect {
grid-area: category-select;
justify-self: end;
}
.financial-matrix-toolbar__category {
grid-area: category-mode;
justify-self: end;
}
.financial-matrix-toolbar__tabs,
.financial-matrix-toolbar__category {
gap: 8px;
}
.financial-matrix-toolbar button {
padding-inline: var(--space-3);
}
.financial-category-multiselect,
.financial-category-multiselect > .financial-matrix-toolbar__select {
width: 100%;
min-width: 200px;
max-width: 320px;
}
.financial-matrix-toolbar.is-category-compact .financial-matrix-toolbar__category button,
.financial-matrix-toolbar.is-tabs-compact .financial-matrix-toolbar__tabs button {
width: 38px;
min-width: 38px;
padding: var(--space-0);
}
.financial-matrix-toolbar.is-category-compact .financial-matrix-toolbar__category button > span:not(.ui-icon, .financial-category-count, .control-tooltip),
.financial-matrix-toolbar.is-tabs-compact .financial-matrix-toolbar__tabs button > span:not(.ui-icon) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.financial-matrix-toolbar.is-category-compact .financial-category-multiselect__menu {
right: auto;
left: 0;
width: min(320px, calc(100vw - 32px));
}
.financial-matrix-toolbar.is-stacked {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "tabs" "category-mode";
}
.financial-matrix-toolbar.is-stacked .financial-matrix-toolbar__tabs { grid-area: tabs; }
.financial-matrix-toolbar.is-stacked .financial-category-multiselect { grid-area: category-select; }
.financial-matrix-toolbar.is-stacked .financial-matrix-toolbar__category { grid-area: category-mode; }
.financial-matrix-toolbar.is-stacked .financial-category-multiselect,
.financial-matrix-toolbar.is-stacked .financial-category-multiselect > .financial-matrix-toolbar__select {
width: 100%;
max-width: none;
}
/* ==========================================================================
TABELA DETALHADA - Q12 e Q13
========================================================================== */
.detail-table-wrap {
min-height: 0;
border: 8px solid var(--system-white);
border-radius: 6px;
background: var(--system-white);
}
/* Q12/Q13 usam toda a linha elastica do relatorio. Assim o scroller vertical
termina na borda direita da area visivel e percorre toda a altura util, em
vez de ficar limitado a altura intrinseca de um bloco curto. Q74 conserva a
altura propria da pagina de engenharia logo abaixo. */
.real-report:has(.detail-table-wrap:not(.detail-table-wrap--q74, .detail-table-wrap--raw)),
.report-visual-host:has(.detail-table-wrap:not(.detail-table-wrap--q74, .detail-table-wrap--raw)) {
height: 100%;
min-height: 0;
}
.detail-table-wrap:not(.detail-table-wrap--q74, .detail-table-wrap--raw) {
height: 100%;
max-height: 100%;
}
.detail-table-wrap .report-table {
width: max-content;
min-width: 100%;
border-spacing: 1px;
background: var(--system-gray-5);
}
.detail-table-wrap .report-table th,
.detail-table-wrap .report-table td {
height: 24px;
color: var(--label-primary);
font-size: 13px;
font-weight: 500;
padding: 0 8px;
}
.detail-table-wrap .report-table thead th {
background: var(--system-white);
color: var(--label-primary);
font-weight: 800;
text-align: center;
border-bottom: 2px solid var(--system-gray);
}
.detail-table-wrap .report-table tbody tr.is-detail-light td {
background: var(--system-white);
}
.detail-table-wrap .report-table tbody tr.is-detail-dark td {
background: var(--system-white);
}
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(1),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(2),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(3),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(6),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(7),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(14),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(15),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(16),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(18),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(20),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table tbody td:nth-child(21) {
text-align: center;
}
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(1),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(1),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(6),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(6),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(7),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(7),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(14),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(14),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(15),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(15),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(16),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(16),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(18),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(18),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(20),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(20),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(21),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(21) {
min-width: 58px;
}
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(4),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(4),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(5),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(5),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(8),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(8),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(9),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(9),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(10),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(10),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(11),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(11),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table th:nth-child(12),
.detail-table-wrap:where(:not(.detail-table-wrap--raw)) .report-table td:nth-child(12) {
min-width: 210px;
}
.detail-table-wrap .report-table tfoot th,
.detail-table-wrap .report-table tfoot td {
position: sticky;
bottom: 0;
z-index: 2;
background: var(--system-white);
color: var(--label-primary);
font-size: 18px;
font-weight: 900;
border-top: 2px solid var(--system-gray);
}
.detail-table-wrap .report-table tfoot td {
text-align: center;
}
.tone-positive {
color: var(--label-primary);
}
.tone-negative {
color: var(--system-red);
}
.detail-note {
border-bottom: 1px solid var(--system-gray-5);
background: var(--system-white);
color: var(--system-gray);
font-size: 11px;
font-weight: 800;
padding: 8px;
}
.engineering-detail-report:not(.additional-table-report) {
height: 100%;
grid-template-rows: auto auto auto minmax(0, 1fr);
}
.engineering-detail-report:not(.additional-table-report):has(> [data-shared-filter-panel][hidden]),
.engineering-detail-report:not(.additional-table-report):has(> .filter-panel-anchor) {
grid-template-rows: auto auto minmax(0, 1fr);
}
.engineering-detail-filters {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.engineering-detail-summary {
min-width: 0;
}
.engineering-detail-visual,
.detail-table-wrap--q74 {
height: 100%;
min-height: 0;
}
.detail-table-wrap--q74 .report-table th,
.detail-table-wrap--q74 .report-table td {
min-width: 96px;
text-align: center;
white-space: nowrap;
}
.detail-table-wrap--q74 .report-table th:nth-child(2),
.detail-table-wrap--q74 .report-table td:nth-child(2),
.detail-table-wrap--q74 .report-table th:nth-child(4),
.detail-table-wrap--q74 .report-table td:nth-child(4),
.detail-table-wrap--q74 .report-table th:nth-child(7),
.detail-table-wrap--q74 .report-table td:nth-child(7) {
min-width: 260px;
text-align: left;
}
.detail-table-wrap--q74 .report-table th:nth-child(3),
.detail-table-wrap--q74 .report-table td:nth-child(3),
.detail-table-wrap--q74 .report-table th:nth-child(5),
.detail-table-wrap--q74 .report-table td:nth-child(5),
.detail-table-wrap--q74 .report-table th:nth-child(6),
.detail-table-wrap--q74 .report-table td:nth-child(6) {
min-width: 110px;
text-align: left;
}
.detail-table-wrap--q74 .report-table th:nth-child(n + 11):nth-child(-n + 20),
.detail-table-wrap--q74 .report-table td:nth-child(n + 11):nth-child(-n + 20) {
min-width: 140px;
text-align: right;
}
/* Cores da tabela detalhada, e o bloco que pinta cartao de resumo e as tres
molduras de tabela num seletor so. Vinham de `APLICACAO SEMANTICA`; leva 5
do #10.
Aquele bloco fica AQUI, e nao junto do cartao de resumo, por medida: ele
declara `border-color` e concorre em especificidade igual com `.report-status`
(L1459), `.summary-card` (L1904), `.report-table-wrap` (L1949) e
`.detail-table-wrap` (L2671) - as duas ultimas escrevem `border` no ATALHO,
com 1px cinza e 8px branca. Subir o bloco entrega a moldura das tabelas
detalhadas para elas. */
.summary-card,
.report-status,
.mock-report,
.report-table-wrap,
.detail-table-wrap,
.detail-note {
border-color: var(--system-clear);
background: var(--system-gray-7);
color: var(--label-primary);
}
.detail-table-wrap,
.detail-table-wrap .report-table,
.detail-table-wrap .report-table thead th,
.detail-table-wrap .report-table tfoot th,
.detail-table-wrap .report-table tfoot td {
background: var(--background-primary);
color: var(--label-primary);
}
.detail-table-wrap .report-table {
background: var(--separator);
}
.detail-table-wrap .report-table tbody tr.is-detail-light td {
background: var(--table-row-background);
color: var(--label-primary);
}
.detail-table-wrap .report-table tbody tr.is-detail-dark td {
background: var(--table-row-alternate-background);
color: var(--label-primary);
}
/* ==========================================================================
ANALYTICS - Graficos de curva e barras
========================================================================== */
.analytics-chart {
display: grid;
width: 100%;
height: 100%;
min-width: 0;
min-height: 360px;
overflow: hidden;
border: 14px solid var(--system-gray-5);
border-radius: 9px;
background: var(--system-gray-5);
padding: 8px 18px 14px;
color: var(--system-black);
}
.analytics-title {
min-height: 18px;
color: var(--label-primary);
font-size: 13px;
font-weight: 700;
text-align: center;
}
.analytics-chart--curve {
grid-template-rows: auto minmax(0, 1fr);
min-height: 528px;
border: 0;
background: var(--system-gray-5);
padding: 8px;
}
.analytics-chart--curve svg {
width: 100%;
height: 100%;
min-height: 0;
overflow: visible;
background: var(--system-gray-5);
}
.analytics-grid-line {
stroke: var(--system-gray);
stroke-dasharray: 3 4;
stroke-width: 1;
}
.analytics-zero-line {
stroke: var(--system-black);
stroke-width: 2;
}
.analytics-y-axis-label {
fill: var(--system-black);
font-family: var(--font-condensed);
font-size: 12px;
font-weight: 750;
text-anchor: start;
}
.analytics-curve-line {
fill: none;
stroke: var(--system-blue);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.35;
}
.analytics-curve-dot {
fill: var(--system-black);
stroke: var(--system-white);
stroke-width: 1;
cursor: pointer;
}
.analytics-point-label {
fill: var(--system-green);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 900;
text-anchor: middle;
}
.analytics-point-label.is-negative {
fill: var(--system-red);
}
.analytics-axis-label {
fill: var(--system-black);
font-family: var(--font-condensed);
font-size: 13px;
font-weight: 700;
text-anchor: end;
}
.analytics-chart--bar {
grid-template-rows: auto minmax(0, 1fr);
align-content: stretch;
gap: 8px;
min-height: 368px;
border: 0;
background: var(--system-gray-5);
padding: 8px;
}
.analytics-row {
display: grid;
grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr) minmax(126px, 0.2fr);
align-items: center;
gap: 10px;
min-height: 32px;
color: var(--label-primary);
font-size: 13px;
font-weight: 700;
}
.analytics-bar-wrap {
height: 22px;
background: linear-gradient(to right, var(--system-clear) 49.7%, var(--system-black) 49.7%, var(--system-black) 50.3%, var(--system-clear) 50.3%);
}
.analytics-bar {
width: var(--bar-width, 10%);
height: 22px;
background: var(--system-blue);
}
.analytics-bar.is-negative {
margin-left: auto;
background: var(--system-green);
}
.analytics-row strong {
display: inline-grid;
min-height: 30px;
align-content: center;
justify-content: end;
border-radius: 5px;
background: var(--system-white);
color: var(--system-green);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 900;
padding: 4px 8px;
text-align: center;
}
.analytics-row strong.is-negative {
color: var(--system-red);
}
/* Cores dos graficos de curva e de barra. Vinham de `APLICACAO SEMANTICA`;
leva 5 do #10. Cada bloco tem um gemeo de mesmo seletor mais acima nesta
secao, e e por isso que o grupo fica no FIM dela. */
.analytics-chart,
.analytics-chart--curve svg {
border-color: var(--background-secondary);
background: var(--background-secondary);
color: var(--label-primary);
}
.analytics-title,
.analytics-row {
color: var(--label-primary);
}
.analytics-grid-line {
stroke: var(--separator-opaque);
}
.analytics-zero-line {
stroke: var(--label-primary);
}
.analytics-y-axis-label,
.analytics-axis-label {
fill: var(--label-primary);
}
.analytics-curve-dot {
fill: var(--label-primary);
stroke: var(--background-primary);
}
.analytics-bar-wrap {
background: linear-gradient(to right, var(--system-clear) 49.7%, var(--label-primary) 49.7%, var(--label-primary) 50.3%, var(--system-clear) 50.3%);
}
.analytics-row strong {
background: var(--background-primary);
}
/* Geometria das barras divergentes: trilho, eixo do zero, barra e o valor ao
lado. Vinham da camada SIDEBAR CONTINUA. Piso nesta secao: a barra
sobrescreve a L3594 e o valor a L3614. O tooltip do grafico NAO veio para ca
- o concorrente dele e a L7244, na segunda secao ANALYTICS. */
.analytics-chart--bar .analytics-row:hover,
.analytics-chart--bar .analytics-row:focus-visible {
filter: brightness(0.8);
}
.analytics-chart--bar .analytics-bar-wrap {
position: relative;
height: 22px;
overflow: visible;
background: var(--system-clear);
}
.analytics-bar-axis {
position: absolute;
z-index: 2;
top: -3px;
bottom: -3px;
left: calc(50% - 1px);
width: 2px;
background: var(--label-primary);
pointer-events: none;
}
.analytics-chart--bar .analytics-bar {
position: absolute;
top: 0;
width: var(--bar-size, 1%);
max-width: 50%;
height: 22px;
margin: 0;
}
.analytics-chart--bar .analytics-bar.is-positive {
left: 50%;
background: var(--system-green);
}
.analytics-chart--bar .analytics-bar.is-negative {
right: 50%;
left: auto;
background: var(--system-red);
}
.analytics-chart--bar .analytics-row > strong {
color: var(--system-green);
}
.analytics-chart--bar .analytics-row > strong.is-negative {
color: var(--system-red);
}
/* Familia do grafico de barras/curva, tooltip, breadcrumb, navegacao de nivel,
eixos e zoom da curva. Era a camada tardia "ANALYTICS - Barras divergentes,
tooltip e interacao" (2a vez); dissolvida na leva 13 do #10 para dentro da
regiao do componente ANALYTICS, logo apos a 1a secao. Move puro: as regras
continuam DEPOIS das da 1a secao (a regiao intervencente nao tem concorrente
.analytics de mesma especificidade), entao a cascata nao muda. Comentarios
internos abaixo ainda dizem "primeira/segunda secao ANALYTICS" e citam linhas
antigas (L7244, L6842) - as duas secoes agora sao ESTA; refs a limpar depois. */
.analytics-chart--bar {
position: relative;
align-content: stretch;
gap: 8px;
}
.analytics-chart--bar .analytics-row {
grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr) minmax(220px, 1fr);
border-radius: 3px;
background: var(--system-gray-5);
cursor: pointer;
transition: filter 140ms ease, opacity 140ms ease;
padding-left: 8px;
}
/* Analytics: titulo fixo, corpo centralizado e superficies coerentes com tabelas. */
.analytics-chart--bar {
grid-template-rows: auto minmax(0, 1fr);
align-content: stretch;
border: 0;
background: var(--system-gray-5);
padding: 8px;
}
.analytics-chart--curve {
align-content: stretch;
gap: var(--space-2);
background: var(--system-gray-5);
}
.analytics-title {
position: relative;
z-index: 2;
align-self: start;
width: 100%;
min-height: 24px;
flex: none;
color: var(--label-primary);
}
.analytics-content {
min-width: 0;
min-height: 0;
background: var(--system-gray-6);
padding: 8px;
border-radius: 6px;
}
.analytics-content--curve {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
overflow: hidden;
min-height: 480px;
border-radius: 0;
background: var(--system-gray-5);
padding: 0;
}
.analytics-curve-y-axis {
position: sticky;
z-index: 3;
left: 0;
display: grid;
width: 18px;
min-height: 480px;
padding: 0;
border: 0;
background: var(--system-clear);
}
.analytics-curve-y-scale {
width: 18px;
height: 100%;
margin: 0;
appearance: none;
border: 0;
outline: 0;
background: var(--system-clear);
/* Mesma cor do regime ativo que a curva; o accent-color preenche a bolinha e
a trilha abaixo dela com o mesmo tom. */
accent-color: var(--finance-accent);
cursor: ns-resize;
direction: rtl;
writing-mode: vertical-lr;
}
.analytics-curve-y-scale::-webkit-slider-runnable-track {
width: 4px;
border: 0;
border-radius: 999px;
/* Da bolinha para baixo preenchido com a cor do regime; acima, trilho neutro.
--curve-y-fill (0..1, setado no JS) e a fracao a partir da base. */
background: linear-gradient(
to top,
var(--finance-accent) 0 calc(var(--curve-y-fill, 0.5) * 100%),
var(--system-gray) calc(var(--curve-y-fill, 0.5) * 100%) 100%
);
}
.analytics-curve-y-scale::-webkit-slider-thumb {
width: 14px;
height: 14px;
appearance: none;
margin-left: -5px;
border: 0;
border-radius: 999px;
background: var(--finance-accent);
}
.analytics-curve-y-scale:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--label-primary);
outline-offset: 2px;
}
.analytics-curve-y-labels {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 78px;
padding: calc(56px * var(--analytics-curve-zoom)) 8px var(--analytics-curve-x-axis-height, 92px);
border-right: 1px solid var(--system-gray);
background: var(--system-gray-7);
color: var(--label-primary);
font-size: calc(10px * var(--analytics-curve-zoom));
font-weight: 650;
white-space: nowrap;
}
.analytics-curve-y-labels span {
display: block;
line-height: 1;
text-align: right;
}
.analytics-curve-plot {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-width: 0;
min-height: 480px;
overflow: hidden;
border: 7px solid var(--system-gray);
border-radius: 6px;
background: var(--system-gray-7);
padding: 8px;
}
.analytics-curve-viewport {
/* A altura vem da moldura (.analytics-curve-plot, 480 px já com borda e
respiro). 480 px aqui somavam 30 px à moldura e cortavam o pé dos rótulos
do eixo X, além de desalinhar as marcas do eixo Y. */
min-width: 0;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
background: var(--system-gray-7);
padding-left: 8px;
}
.analytics-curve-stage {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
}
/* Só existe dentro de .analytics-curve-stage: a altura é a da moldura. */
.analytics-echarts-host {
width: 100%;
height: 100%;
min-height: 0;
border-radius: 0;
background: var(--system-gray-7);
}
.analytics-curve-x-axis {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
height: var(--analytics-curve-x-axis-height, calc(88px * var(--analytics-curve-zoom)));
overflow: hidden;
border-top: 1px solid var(--system-gray);
background: var(--system-gray-7);
pointer-events: none;
}
.analytics-curve-x-label {
position: absolute;
top: 0;
display: block;
width: var(--analytics-curve-label-slot, calc(92px * var(--analytics-curve-zoom)));
height: var(--analytics-curve-x-axis-height, calc(88px * var(--analytics-curve-zoom)));
overflow: visible;
padding: 0;
border: 0;
background: var(--system-clear);
cursor: pointer;
pointer-events: auto;
transform: translateX(-50%);
}
.analytics-curve-x-label span {
font-family: var(--font-condensed);
position: absolute;
top: 8px;
left: 50%;
display: -webkit-box;
width: var(--analytics-curve-label-slot, 92px);
max-height: calc(2.3em * var(--analytics-curve-zoom));
overflow: hidden;
padding: 2px 3px;
border-radius: 4px;
color: var(--label-primary);
font-size: calc(10px * var(--analytics-curve-zoom));
font-weight: 650;
line-height: 1.15;
text-align: start;
white-space: normal;
transform: translateX(-100%) rotate(-45deg);
transform-origin: right top;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.analytics-curve-x-label:is(:hover, :focus-visible) span {
background: var(--system-gray-6);
}
.analytics-curve-visual-zoom {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 16px;
}
.analytics-curve-visual-zoom__button {
position: relative;
display: grid;
width: 24px;
height: 24px;
place-items: center;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
color: var(--label-primary);
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease, filter 140ms ease;
}
.analytics-curve-visual-zoom__button .ui-icon {
width: 18px;
height: 18px;
}
.analytics-curve-visual-zoom__button:not(:disabled):is(:hover, :focus-visible) {
background: var(--system-gray-6);
filter: brightness(0.82);
}
.analytics-curve-visual-zoom__button.is-selected {
background: var(--system-gray-6);
color: var(--finance-accent);
}
.analytics-curve-visual-zoom__value {
min-width: 34px;
color: var(--label-primary);
font-size: 11px;
font-weight: 700;
text-align: center;
}
.analytics-curve-visual-zoom__button:disabled {
cursor: default;
opacity: 0.3;
}
.analytics-content--curve svg {
display: block;
width: 100%;
height: 100%;
/* Renderer SVG do echarts: o svg preenche o host, que ja tem o fundo; sem
padding, senao o grid do echarts (que mede o host) fica deslocado. */
padding: 0;
background: var(--system-clear);
}
.analytics-header {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
align-items: start;
width: 100%;
min-height: 24px;
}
.analytics-header::after {
content: "";
}
.analytics-header .analytics-title {
grid-column: 2;
}
.analytics-level-navigation {
display: inline-flex;
grid-column: 1;
align-items: center;
align-self: start;
justify-self: start;
gap: 3px;
}
.analytics-level-navigation__button {
display: grid;
width: 22px;
height: 22px;
place-items: center;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
color: var(--label-primary);
cursor: pointer;
}
.analytics-level-navigation__button:not(:disabled):is(:hover, :focus-visible) {
filter: brightness(0.8);
}
.analytics-level-navigation__button:disabled {
opacity: 0.3;
cursor: default;
}
.analytics-level-navigation__button .ui-icon {
font-size: 19px;
}
.analytics-level-navigation__indicator {
min-width: 72px;
color: var(--label-primary);
font-size: 13px;
font-weight: 750;
text-align: center;
}
.analytics-content--bar {
display: grid;
align-content: start;
gap: var(--space-1);
overflow: auto;
min-height: 320px;
border: 7px solid var(--system-gray);
border-radius: 6px;
background: var(--system-gray-7);
padding: 8px;
}
.analytics-content--bar .analytics-row strong {
background: var(--system-clear);
}
.analytics-responsive-label {
display: block;
min-width: 0;
max-width: 100%;
max-height: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.analytics-responsive-label--wrap {
display: -webkit-box;
white-space: normal;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--analytics-label-lines, 1);
}
.analytics-chart--bar .analytics-row.is-cross-filter-dimmed {
opacity: 0.4;
}
.analytics-chart--bar .analytics-row.is-cross-filter-selected,
.analytics-chart--curve :is(.analytics-curve-dot, .analytics-axis-label).is-cross-filter-selected {
opacity: 1;
}
.analytics-chart--curve :is(.analytics-curve-dot, .analytics-axis-label).is-cross-filter-dimmed {
opacity: 0.4;
}
.analytics-breadcrumb {
appearance: none;
display: inline-block;
padding: 2px 4px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--label-primary);
cursor: pointer;
font: inherit;
opacity: 1;
transition: background-color 140ms ease, filter 140ms ease;
}
.analytics-breadcrumb:hover,
.analytics-breadcrumb:focus-visible {
background: var(--system-gray-4);
filter: brightness(0.82);
}
.analytics-breadcrumb-current,
.analytics-breadcrumb-separator {
color: var(--label-primary);
opacity: 0.7;
}
.analytics-breadcrumb-separator {
margin: 0 2px;
}
/* Tooltip de gráfico em HTML (LobaUI.charts.htmlTooltip), com a anatomia do
tooltip do ECharts: título e uma linha "• Série: valor" por série, com a
bolinha na cor da série. Componente compartilhado: não redefinir por tela. */
.chart-tooltip {
position: absolute;
z-index: 10;
display: grid;
min-width: 132px;
gap: var(--space-1);
padding: var(--space-2) var(--space-3);
transform: translate(-50%, calc(-100% - 10px));
border: 1px solid var(--separator);
border-radius: var(--radius-md);
background: var(--background-primary);
box-shadow: var(--standard-shadow);
color: var(--label-primary);
font-size: 12px;
font-variant-numeric: tabular-nums;
pointer-events: none;
white-space: nowrap;
}
.chart-tooltip[hidden] {
display: none;
}
.chart-tooltip strong {
color: var(--label-primary);
}
.chart-tooltip__row {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--label-primary);
}
.chart-tooltip__dot {
width: 8px;
height: 8px;
flex: none;
border-radius: var(--radius-pill);
}
/* Vinha da camada SIDEBAR CONTINUA, tambem como bloco de midia inteiro. Pousa
nesta secao, e nao em RESUMOS DENSOS junto do irmao de 1439px, porque a linha
do grafico de barras sobrescreve a L6842 - que esta AQUI. As duas regras deste
bloco tem piso em secoes diferentes, e o bloco inteiro vai para a mais tardia.
Dentro dele existia `.finance-filter-visibility { right: auto; transform: none }`,
apagada na leva 6: ela so desfazia uma centralizacao em absoluto que tambem ja
tinha sido apagada, e sem esta a regra base ja declara `position: relative` e
`transform: none`. */
@media (max-width: 900px) {
.summary-grid--dense {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.analytics-chart--bar .analytics-row {
grid-template-columns: minmax(150px, 0.42fr) minmax(220px, 1fr) minmax(150px, 0.42fr);
}
}
/* ==========================================================================
MODULOS E PAINEIS - Navegacao, dashboard e engenharia
========================================================================== */
.ui-icon {
display: inline-block;
flex: 0 0 auto;
font-size: 20px;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: var(--ui-icon-source) center / contain no-repeat;
mask: var(--ui-icon-source) center / contain no-repeat;
vertical-align: -0.125em;
}
.finance-context-bar[hidden],
.filter-panel[hidden],
[data-shared-filter-panel][hidden],
#filterClear[hidden],
.sidebar-back[hidden],
.sidebar-module-label[hidden] {
display: none;
}
.sidebar-container.is-sliding-out {
animation: sidebar-content-out 180ms ease-in both;
}
.sidebar-container.is-sliding-in {
animation: sidebar-content-in 180ms ease-out both;
}
@keyframes sidebar-content-out {
to {
opacity: 0;
transform: translateX(-22px);
}
}
@keyframes sidebar-content-in {
from {
opacity: 0;
transform: translateX(-22px);
}
}
.icon-button-close::before,
.icon-button::before {
display: none;
content: none;
}
.icon-button-close .ui-icon,
.icon-button .ui-icon {
font-size: 24px;
transition: filter var(--duration-fast) var(--easing-standard);
color: var(--navigation-label);
}
.icon-button-close .ui-icon {
opacity: 1;
}
.icon-button .ui-icon {
opacity: 0.6;
}
.icon-button-close:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) .ui-icon,
.icon-button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) .ui-icon {
color: var(--icon-button-label, var(--system-white));
}
/* Tema claro escurece o icone em vez de clarea-lo; o hover e feito com filtro,
e nao com troca de cor. As tres regras vencem as de cima por especificidade
(`:root` + `:not()` + `:is()`), nao por ordem - posicao aqui e livre. */
:root:not([data-theme="dark"]) :is(.icon-button-close, .icon-button):not(.icon-button--muted) .ui-icon {
color: var(--icon-button-label, #444444);
}
:root:not([data-theme="dark"]) :is(.icon-button-close, .icon-button):not(.icon-button--muted):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) .ui-icon {
filter: brightness(0.38);
}
:root[data-theme="dark"] :is(.icon-button-close, .icon-button):not(.icon-button--muted):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) .ui-icon {
filter: brightness(0.68);
}
.icon-button-close:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge),
.icon-button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--navigation-selection);
}
/* Ajuda contextual: icone discreto de 16 px, com os estados do icon-button. */
.icon-button.icon-button--muted .ui-icon {
width: 16px;
height: 16px;
color: var(--icon-button-label, var(--label-secondary));
opacity: 1;
}
.icon-button.icon-button--muted:is(:hover, :focus-visible) .ui-icon {
color: var(--icon-button-label, var(--label-primary));
}
.sidebar-back {
width: fit-content;
height: 32px;
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
margin: 8px;
border: 0;
border-radius: 4px;
background: var(--system-clear);
text-transform: uppercase;
color: var(--system-gray-5);
cursor: pointer;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
padding: 0 8px;
text-align: left;
}
.sidebar-back:hover {
background: var(--label-primary);
}
.sidebar-back .ui-icon {
font-size: 18px;
}
.sidebar-module-label {
height: 32px;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
margin: 8px;
color: var(--system-gray-5);
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
padding: 0 8px;
/* #135: o titulo agora e dinamico (nome do modulo aberto); a caixa alta que
antes vinha do texto fixo do HTML passa a ser do estilo, e o teto de
largura protege nomes longos de estourar o cabecalho de 48px. */
text-transform: uppercase;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-list--dashboard {
display: grid;
align-content: start;
gap: 8px;
padding: 14px 8px 18px;
}
.module-button {
position: relative;
width: 100%;
min-height: 48px;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
gap: 8px;
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
padding: 8px 24px 8px 8px;
text-align: left;
}
.module-button:not(.is-active):active {
transform: translateY(1px);
}
.module-button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.module-button__icon {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: var(--radius-sm);
background: var(--label-primary);
color: var(--result-cell-background);
font-size: 22px;
}
/* Aqui existia `.module-button.is-active .module-button__icon { color:
var(--system-white) }`. Apagada na leva 10: o bloco de COR do mesmo
componente, ~1.000 linhas abaixo nesta mesma secao, repete o mesmo seletor
com o mesmo `color` e ainda acrescenta o `background`. Toda declaracao desta
aqui reaparecia la, com valor identico e depois - entao ela nunca pintava
nada. */
.module-button__chevron {
position: absolute;
top: 50%;
right: 4px;
width: 16px;
height: 16px;
color: var(--system-white);
font-size: 16px;
line-height: 16px;
pointer-events: none;
transform: translateY(-50%);
}
.module-button__copy {
display: grid;
min-width: 0;
gap: 3px;
}
.module-button__copy strong,
.module-button__copy small {
overflow: hidden;
letter-spacing: 0;
text-overflow: ellipsis;
}
.module-button__copy strong {
font-size: 13px;
}
/* Descrição do módulo SEMPRE em 1 linha (regra do Arthur, quebrou 2 vezes):
2 linhas deixam um módulo mais alto que os outros. O texto cabe na largura
medida; a reticência só protege contra texto novo longo demais, que
tests/sidebar-sections.test.cjs barra antes de chegar à tela. */
.module-button__copy small {
color: var(--system-gray);
font-size: 10px;
line-height: 1.25;
white-space: nowrap;
}
.page-section--engineering {
margin-top: 12px;
}
.page-section--engineering .page-section__title {
margin-top: 32px;
}
.page-button--with-icon {
height: auto;
min-height: 32px;
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
justify-content: center;
column-gap: 8px;
padding-top: 6px;
padding-bottom: 6px;
white-space: normal;
}
.page-button--with-icon .ui-icon {
font-size: 18px;
}
.page-button--with-icon.is-active .ui-icon {
color: var(--system-blue);
}
.page-button--financial:not(.is-active) .ui-icon {
color: var(--navigation-label-secondary);
}
.page-button--financial.is-active .ui-icon {
color: var(--finance-accent);
}
.page-button--with-icon small {
grid-column: 2;
color: var(--chart-yellow);
font-family: var(--font-sans);
font-size: 8px;
font-weight: 600;
line-height: 1.2;
padding-top: 2px;
text-transform: uppercase;
}
.embed-frame--module {
grid-template-rows: minmax(0, 1fr);
padding: 10px;
}
.real-report--module {
display: block;
overflow: auto;
color-scheme: light;
gap: 0;
padding-block-start: var(--space-3);
}
.executive-dashboard,
.engineering-report {
width: 100%;
min-width: 0;
min-height: 100%;
color: var(--label-primary);
}
.executive-dashboard {
display: grid;
height: auto;
min-height: 0;
grid-template-rows: auto auto minmax(0, 1fr);
align-content: start;
gap: 10px;
}
.executive-dashboard:has(> [data-shared-filter-panel][hidden]),
.executive-dashboard:has(> .filter-panel-anchor) {
grid-template-rows: auto minmax(0, 1fr);
}
.real-report--dashboard {
height: calc(100% - 10px);
min-height: 0;
overflow: auto;
}
.module-heading--dashboard {
display: flex;
}
.dashboard-mini-filters {
display: grid;
grid-template-columns: minmax(230px, 280px) minmax(170px, 220px);
justify-content: stard;
gap: 8px;
padding-inline: 2px;
}
/* Faixa de contexto dos módulos (23/10/2026): sem título nem linha embaixo,
só os chips à direita, como a linha de contexto do Financeiro. O título fica
escondido para leitor de tela (createModuleHeading). */
.module-heading {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space-2);
min-width: 0;
border-bottom: 0;
padding: 0 2px;
margin-top: 0;
}
.module-heading h2,
.module-heading p {
margin: 0;
}
.module-heading h2 {
color: var(--label-primary);
font-size: clamp(16px, 1.35vw, 20px);
letter-spacing: 0;
white-space: nowrap;
}
.module-heading p {
max-width: 740px;
margin-top: 4px;
color: var(--system-gray);
font-size: clamp(11px, 0.82vw, 12px);
line-height: 1.35;
white-space: nowrap;
}
.module-heading__meta {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
}
.module-heading__meta span,
.module-heading__meta-item,
.engineering-count {
white-space: nowrap;
border-radius: var(--radius-pill);
border: 1px solid transparent;
background: var(--fill-tertiary);
color: var(--metadata-label);
font-size: 12px;
font-weight: 500;
padding: var(--space-1) var(--space-2);
}
.finance-context-bar > .module-heading__meta {
min-width: 0;
margin-left: auto;
justify-content: flex-end;
}
.module-heading__meta-skeleton {
position: relative;
width: 150px;
height: 26px;
overflow: hidden;
}
.module-heading__meta-skeleton:nth-child(2) {
width: 210px;
}
.module-heading__meta-skeleton:nth-child(3) {
width: 280px;
}
/* A pilula do esqueleto herda o fundo `--background-primary` de
`.module-heading__meta span`, entao o brilho generico dos shines (mistura de
`--background-primary`) sumia sobre ela nos DOIS temas. O gradiente daqui usa
`--label-primary`, que contrasta com o fundo da pilula em qualquer tema — a
mesma receita do shine das tabelas financeiras. Do #12, item 2. */
.module-heading__meta-skeleton::after {
position: absolute;
inset: 0;
content: "";
transform: translateX(-100%);
background: linear-gradient(
90deg,
var(--system-clear),
color-mix(in srgb, var(--label-primary) 18%, var(--system-clear)),
var(--system-clear)
);
animation: report-skeleton-shine 1.15s ease-in-out infinite;
}
.dashboard-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
gap: 8px;
}
/* Nao ha `min-height` aqui de proposito. Havia um de 96px, e ele era letra
morta: os tres filhos tem `min-height: 24px` cada, o gap e 8px e o padding
vertical 24px, entao o cartao mede 116px no MELHOR caso (rotulo e nota em
uma linha) e cresce dai para cima quando o texto quebra. O piso de 96px
nunca foi alcancado em largura ou tema nenhum. Removido em 31/07 pelo #11:
apagar um piso que o conteudo ja ultrapassa e teorema, nao calibracao.
Onde calibrar a altura, de fato: os `min-height: 24px` de span/strong/small
e o `gap` abaixo. Medido: gap 6px + strong 20px levam o cartao a 108px. */
.dashboard-kpi {
position: relative;
display: grid;
align-content: space-between;
gap: 8px;
overflow: visible;
border: 1px solid var(--system-gray-5);
border-radius: 6px;
background: var(--system-white);
padding: 12px 12px 12px 18px;
}
.dashboard-kpi::before {
position: absolute;
inset: 0 auto 0 0;
width: 5px;
content: "";
background: var(--system-blue);
}
.dashboard-kpi--positive::before {
background: var(--system-green);
}
.dashboard-kpi--negative::before {
background: var(--system-red);
}
.dashboard-kpi > span {
color: var(--system-gray);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
min-height: 24px;
height: auto;
align-content: start;
}
.dashboard-kpi > strong {
color: var(--label-primary);
font-family: var(--font-mono);
font-size: 17px;
letter-spacing: 0;
min-height: 24px;
height: auto;
align-content: center;
white-space: nowrap;
}
.dashboard-kpi > small {
color: var(--system-gray);
font-size: 10px;
line-height: 1.3;
min-height: 24px;
height: auto;
align-content: end;
}
.dashboard-grid {
display: grid;
min-height: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto;
gap: 10px;
}
.dashboard-panel {
min-width: 0;
overflow: hidden;
border: 1px solid var(--system-gray-5);
border-radius: 6px;
background: var(--system-white);
}
.dashboard-panel > h3 {
margin: 0;
border-bottom: 1px solid var(--system-gray-5);
color: var(--label-primary);
font-size: 12px;
letter-spacing: 0;
padding: 9px 11px;
}
.engineering-bars,
.engineering-project-list {
display: grid;
gap: 8px;
padding: 12px;
}
.engineering-bar-row > span:first-child {
overflow: hidden;
color: var(--label-secondary);
font-size: 11px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-content {
display: grid;
min-width: 0;
align-content: start;
gap: 10px;
}
.executive-kpis {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.executive-kpi {
display: flex;
min-width: 0;
flex-direction: column;
gap: 6px;
padding: 10px 10px 10px 16px;
}
/* Simetria entre os cartões (regra do dono): título, valor, histórico e link
ocupam a mesma faixa em todos os cartões da linha. Se um título quebra em
duas linhas, os vizinhos reservam a mesma altura e os valores ficam
alinhados. Cartão sem histórico deixa a faixa vazia em vez de subir o link. */
@supports (grid-template-rows: subgrid) {
.executive-kpis {
grid-auto-rows: auto;
}
.executive-kpi {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 6px;
}
.executive-kpi > .executive-kpi__header { grid-row: 1; }
.executive-kpi > .executive-kpi__body { grid-row: 2; align-self: start; }
.executive-kpi > .executive-sparkline,
.executive-kpi > .executive-history-empty { grid-row: 3; }
.executive-kpi > .executive-kpi__destination { grid-row: 4; align-self: end; }
}
.executive-kpi__header,
.executive-panel__header {
display: flex;
min-width: 0;
align-items: flex-start;
justify-content: space-between;
gap: 4px;
}
.executive-message {
min-width: 0;
margin: 0;
color: var(--label-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
.executive-kpi__body {
display: grid;
min-width: 0;
gap: 4px;
}
.executive-kpi__destination:focus-visible,
.dashboard-context-chip > button:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
}
.executive-subtitle,
.executive-comparison,
.executive-secondary,
.executive-history-empty,
.executive-scope,
.executive-kpi__destination {
margin: 0;
color: var(--label-secondary);
font-size: 10px;
line-height: 1.35;
}
.executive-subtitle {
min-height: 27px;
}
.executive-value,
.executive-secondary,
.executive-comparison,
.executive-data-table .is-number {
font-variant-numeric: tabular-nums;
text-align: right;
}
.executive-value {
font-family: var(--font-mono);
font-size: 17px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.executive-comparison.is-favourable {
color: var(--summary-positive-label);
}
.executive-comparison.is-unfavourable {
color: var(--summary-negative-label);
}
.executive-kpi__destination {
align-self: flex-end;
margin-top: auto;
max-width: 100%;
min-height: 24px;
border: 0;
border-radius: 3px;
padding: 3px 0;
background: transparent;
font-family: inherit;
text-align: right;
/* Mesmo azul legível do Ver mais/Ver menos: o fundo de controle selecionado
dava 2,9:1 sobre o cartão claro (WCAG AA pede 4,5:1). */
color: var(--control-link-label);
cursor: pointer;
}
.executive-kpi__destination:hover {
text-decoration: underline;
}
.executive-kpi__destination:active {
background: var(--navigation-item-pressed-background);
}
.executive-sparkline {
min-width: 0;
height: 30px;
margin-top: auto;
}
.executive-history-empty {
margin-top: auto;
padding-block: 5px;
}
.executive-attention-empty {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--summary-positive-label);
font-size: 12px;
line-height: 1.35;
}
.executive-attention-empty > span:first-child {
flex: none;
font-size: 18px;
}
.executive-values-hidden .executive-attention-empty > span:first-child {
visibility: hidden;
}
/* Aviso no cartão (ex.: "Valor atípico"): amarelo do aviso, nunca neutro. */
.executive-warning {
display: inline-flex;
align-items: center;
border: 1px solid var(--status-warning-border);
border-radius: 4px;
padding: 3px 6px;
background: var(--status-warning-fill);
color: var(--status-warning-label);
font-weight: 600;
font-size: 10px;
line-height: 1.35;
}
.executive-progress-warnings {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0 10px 8px;
list-style: none;
}
.executive-progress-warnings > li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
color: var(--label-secondary);
font-size: 10px;
line-height: 1.35;
}
.executive-kpi-help .procurement-table-wrap {
max-height: 220px;
margin-top: 10px;
}
.executive-kpi-help .executive-data-table th,
.executive-kpi-help .executive-data-table td {
min-width: 72px;
padding: 5px 8px;
font-size: 10px;
/* Palavra nunca quebra no meio ("Comparaçã/o"): só quebra entre palavras. */
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
/* Rótulo do indicador numa linha só; o valor é que quebra entre palavras. */
.executive-kpi-help .executive-data-table tbody th {
white-space: nowrap;
}
.executive-panel--variance {
grid-column: 1 / -1;
}
.executive-panel__header {
min-height: var(--module-panel-header-min-height, 58px);
padding: 8px 10px 4px;
}
.executive-panel__header .executive-subtitle {
margin-top: 4px;
min-height: 0;
}
.executive-panel > .executive-scope {
padding: 0 10px 6px;
}
.executive-chart {
width: 100%;
height: 168px;
}
.executive-panel--variance .executive-chart {
height: 148px;
}
/* VSO no padrão de release: o painel ocupa a largura toda; gráfico trimestral
à esquerda, tabela do trimestre (T/T e A/A) à direita. */
.executive-panel--market {
grid-column: 1 / -1;
}
.executive-market {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
}
.executive-market__chart .executive-chart {
height: 220px;
}
.executive-market__side {
display: grid;
gap: var(--space-3);
min-width: 0;
}
.executive-market__release th,
.executive-market__release td {
white-space: nowrap;
}
.executive-market__inventory {
margin: 0;
padding: 0 var(--space-3) var(--space-3);
color: var(--label-secondary);
font-size: 12px;
}
.executive-market__inventory strong {
color: var(--label-primary);
}
.executive-delinquency {
display: grid;
gap: var(--space-2);
margin: var(--space-3) var(--space-3) var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--separator);
}
.executive-delinquency__title {
margin: 0;
color: var(--label-secondary);
font-size: 12px;
}
.executive-delinquency__title strong {
color: var(--label-primary);
}
/* Faixas de atraso: barra sólida, do atraso curto (amarelo) ao longo (vermelho). */
.executive-delinquency__bar {
display: flex;
height: 10px;
overflow: hidden;
border-radius: 999px;
background: var(--system-gray-5);
}
.executive-delinquency__segment.is-1 { background: var(--chart-yellow); }
.executive-delinquency__segment.is-2 { background: var(--chart-orange); }
.executive-delinquency__segment.is-3 { background: var(--chart-red); }
.executive-delinquency__segment.is-4 { background: var(--chart-pink); }
.executive-delinquency__segment.is-5 { background: var(--chart-purple); }
.executive-delinquency__legend .is-1 .executive-delinquency__dot { color: var(--chart-yellow); }
.executive-delinquency__legend .is-2 .executive-delinquency__dot { color: var(--chart-orange); }
.executive-delinquency__legend .is-3 .executive-delinquency__dot { color: var(--chart-red); }
.executive-delinquency__legend .is-4 .executive-delinquency__dot { color: var(--chart-pink); }
.executive-delinquency__legend .is-5 .executive-delinquency__dot { color: var(--chart-purple); }
.executive-delinquency__dot {
margin-right: var(--space-1);
}
.executive-delinquency__legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-4);
margin: 0;
padding: 0;
list-style: none;
color: var(--label-secondary);
font-size: 12px;
}
.executive-delinquency__legend strong {
color: var(--label-primary);
}
@media (max-width: 1180px) {
.executive-market {
grid-template-columns: minmax(0, 1fr);
}
}
.executive-data-details {
min-width: 0;
}
.executive-scope > summary {
width: fit-content;
cursor: pointer;
}
.executive-scope > summary:hover {
color: var(--label-primary);
}
.executive-scope > summary:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
}
.executive-scope > p {
margin: 4px 0 0;
}
.executive-panel > .executive-data-details {
padding: 0 10px 6px;
}
.executive-data-table th:first-child {
text-align: left;
}
.dashboard-context-chip {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dashboard-context-chip > button {
min-height: 24px;
padding: 2px 6px;
font-size: 10px;
}
/* Seis trilhas preenchem as duas linhas: tres cartoes de 2 e dois de 3. */
@media (max-width: 1439px) {
.executive-kpis {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.executive-kpi {
grid-column: span 2;
}
.executive-kpi:nth-child(n + 4) {
grid-column: span 3;
}
}
@media (max-width: 900px) {
.dashboard-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 720px) {
.executive-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.executive-kpi,
.executive-kpi:nth-child(n + 4) {
grid-column: auto;
}
.executive-kpi:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 520px) {
.executive-kpis {
grid-template-columns: minmax(0, 1fr);
}
}
.engineering-report {
display: grid;
height: auto;
min-height: 0;
grid-template-rows: auto auto auto minmax(0, 1fr);
align-content: start;
gap: 8px;
}
.engineering-report:has(> [data-shared-filter-panel][hidden]),
.engineering-report:has(> .filter-panel-anchor) {
grid-template-rows: auto auto minmax(0, 1fr);
}
.real-report--engineering {
height: 100%;
min-height: 0;
overflow: auto;
}
.additional-table-report {
height: 100%;
grid-template-rows: auto auto minmax(240px, 1fr) auto;
}
.additional-table-report:has(> [data-shared-filter-panel][hidden]),
.additional-table-report:has(> .filter-panel-anchor) {
grid-template-rows: auto minmax(240px, 1fr) auto;
}
.additional-table-visual {
min-height: 0;
}
.detail-table-wrap--raw {
height: 100%;
max-height: 100%;
}
.detail-table-wrap--raw .report-table th,
.detail-table-wrap--raw .report-table td {
min-width: 100px;
text-align: left;
white-space: nowrap;
}
.detail-table-wrap--raw .report-table td.value-cell {
text-align: right;
}
/* Cabeçalho das tabelas detalhadas alinhado com o conteúdo da coluna: a regra
geral `.detail-table-wrap .report-table thead th` centralizava o título
enquanto o texto da coluna ficava à esquerda. */
.detail-table-wrap--raw .report-table thead th {
text-align: left;
}
.detail-table-wrap--raw .report-table thead th.is-value-column {
text-align: right;
}
.additional-table-report .additional-table-toolbar,
.additional-table-report .additional-table-load-status {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--label-secondary);
}
.additional-table-actions {
display: flex;
align-items: center;
gap: 6px;
}
.additional-table-toolbar .module-heading__meta {
min-width: 0;
max-width: 100%;
margin-left: auto;
justify-content: flex-end;
}
.additional-table-toolbar .module-heading__meta-item {
max-width: 100%;
overflow-wrap: anywhere;
}
.additional-table-columns-button:focus-visible {
outline: 2px solid var(--finance-accent);
outline-offset: 2px;
}
.additional-table-load-status {
min-height: 20px;
}
.additional-table-load-status:empty {
display: none;
}
.additional-table-search__field {
display: flex;
align-items: center;
height: 32px;
border: 1px solid var(--separator);
border-radius: 4px;
background: var(--control-background);
color: var(--label-primary);
}
.additional-table-search__field:focus-within {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.additional-table-search__field input {
min-width: 0;
width: 100%;
height: 100%;
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-size: 11px;
font-weight: 650;
padding: 4px;
}
.additional-table-search__clear {
display: grid;
place-items: center;
flex: 0 0 28px;
height: 28px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--label-secondary);
cursor: pointer;
}
.additional-table-search__clear:hover {
background: var(--control-hover-background);
}
.additional-table-search__clear[hidden] {
display: none;
}
.engineering-select-filter__menu.additional-table-columns {
position: fixed;
min-width: 0;
max-height: min(60vh, 360px);
overflow: auto;
}
.additional-table-columns .filter-menu__option-label {
white-space: normal;
overflow-wrap: anywhere;
}
.engineering-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
border: 1px solid var(--system-gray-5);
border-radius: 6px;
gap: 8px;
background: var(--system-gray-5);
padding: 8px;
}
.engineering-filter {
position: relative;
display: grid;
min-width: 0;
gap: var(--space-1);
color: var(--system-gray);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
}
.engineering-filter select {
width: 100%;
min-width: auto;
height: 32px;
overflow: hidden;
border: 1px solid var(--system-gray-5);
border-radius: var(--radius-sm);
background: var(--system-white);
color: var(--label-primary);
font-size: 11px;
font-weight: 650;
padding: var(--space-1);
text-overflow: ellipsis;
white-space: nowrap;
}
.engineering-date-field {
width: 100%;
min-width: auto;
height: 32px;
display: grid;
grid-template-columns: 19px minmax(0, 1fr) 20px;
align-items: center;
gap: var(--space-2);
overflow: hidden;
border: 1px solid var(--system-gray-5);
border-radius: var(--radius-sm);
background: var(--system-white);
color: var(--label-primary);
padding: var(--space-0) var(--space-1);
text-align: left;
}
.engineering-date-field .ui-icon {
color: var(--system-gray);
font-size: 18px;
}
.engineering-date-field__value {
width: 100%;
min-width: 0;
height: 100%;
border: 0;
outline: 0;
background: transparent;
color: inherit;
font-family: inherit;
padding: var(--space-0);
overflow: hidden;
font-size: 11px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.engineering-date-field:focus-within {
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 22%, transparent);
}
.engineering-date-field__value[aria-invalid="true"] {
color: var(--summary-negative-label);
}
.engineering-date-field__toggle {
width: 20px;
height: 100%;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: inherit;
padding: var(--space-0);
cursor: pointer;
}
.engineering-date-field__toggle:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-background);
}
.engineering-date-field__toggle:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.engineering-date-field__error:not([hidden]) {
display: block;
text-transform: none;
}
.engineering-date-field__chevron {
width: 6px;
height: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translateY(-2px);
}
.engineering-date-field[data-expanded="true"] .engineering-date-field__chevron {
transform: rotate(225deg) translate(-2px, -1px);
}
.engineering-date-popover {
position: absolute;
z-index: var(--z-date-popover);
top: 100%;
left: 0;
width: min(280px, 100vw);
overflow: visible;
border: 1px solid var(--system-gray-5);
border-radius: var(--radius-md);
background: var(--system-white);
box-shadow: var(--standard-shadow);
color: var(--label-primary);
text-transform: none;
}
.engineering-date-popover[hidden] {
display: none;
}
.engineering-date-popover__header {
min-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
border-bottom: 1px solid var(--system-gray-5);
background: var(--system-white);
padding: var(--space-0) var(--space-4);
}
.engineering-date-popover__header strong {
font-size: 12px;
letter-spacing: 0;
}
.engineering-date-inputs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2) var(--space-2);
border-bottom: 1px solid var(--separator);
background: var(--background-primary);
padding: var(--space-2) var(--space-4);
}
.engineering-date-inputs label {
display: grid;
min-width: 0;
gap: var(--space-1);
}
.engineering-date-inputs label > span {
color: var(--label-secondary);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.engineering-date-inputs input {
width: 100%;
min-width: 0;
height: 30px;
border: 1px solid var(--separator);
border-radius: var(--radius-sm);
outline: 0;
background: var(--control-background);
color: var(--label-primary);
font: 700 11px var(--font-mono);
padding: var(--space-0) var(--space-2);
}
.engineering-date-inputs input:focus {
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 22%, transparent);
}
.engineering-date-inputs input[aria-invalid="true"] {
border-color: var(--summary-negative-label);
}
.engineering-date-inputs__error {
min-height: 11px;
grid-column: 1 / -1;
color: var(--summary-negative-label);
font-size: 9px;
font-weight: 700;
}
.engineering-date-calendars {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.engineering-calendar {
padding: var(--space-2);
}
.engineering-calendar header {
height: 32px;
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 30px;
align-items: center;
}
.engineering-calendar header strong {
grid-column: 2;
grid-row: 1;
}
.engineering-calendar__navigation:last-child {
grid-column: 3;
}
.engineering-calendar header strong {
justify-self: center;
font-size: 12px;
letter-spacing: 0;
}
.engineering-calendar__navigation {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
color: var(--label-primary);
}
/* Aqui existia `.engineering-calendar__navigation:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) { filter:
brightness(0.82) }`. Apagada na leva 10: a copia exata esta em
`CORES QUE VEM DEPOIS DA FORMA`, no fim do arquivo, junto do `color` do mesmo
botao. Mesmo seletor, mesmo corpo, e a de la vem depois. */
.engineering-calendar__navigation .ui-icon {
font-size: 18px;
}
.engineering-calendar__week,
.engineering-calendar__days {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.engineering-calendar__week span {
height: 22px;
display: grid;
place-items: center;
color: var(--system-gray);
font-size: 10px;
font-weight: 800;
}
.engineering-calendar__days > span,
.engineering-calendar__days button {
height: 24px;
margin-top: var(--space-1);
}
.engineering-calendar__days button {
position: relative;
z-index: 0;
width: 100%;
min-width: 0;
justify-self: center;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
color: var(--system-gray);
font-size: 11px;
padding: var(--space-0);
}
.engineering-calendar__days button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge):not(:disabled) {
background: var(--status-positive-fill);
}
.engineering-calendar__days button.is-in-range {
background: var(--result-cell-background);
color: var(--label-primary);
}
.engineering-calendar__days button.is-range-edge {
background: var(--result-cell-background);
color: var(--system-white);
font-weight: 800;
}
.engineering-calendar__days button.is-range-start:not(.is-range-end) {
background: linear-gradient(to right, var(--system-clear) 0 50%, var(--result-cell-background) 50% 100%);
}
.engineering-calendar__days button.is-range-end:not(.is-range-start) {
background: linear-gradient(to right, var(--result-cell-background) 0 50%, var(--system-clear) 50% 100%);
}
.engineering-calendar__days button.is-range-edge::before {
position: absolute;
z-index: -1;
inset: 0;
width: 24px;
height: 24px;
margin: auto;
border-radius: var(--radius-pill);
background: var(--result-header-background);
content: "";
}
.engineering-calendar__days button.is-single-day {
background: var(--system-clear);
}
.engineering-calendar__days button.is-today:not(.is-range-edge) {
box-shadow: inset 0 0 0 1px var(--result-header-background);
border-radius: var(--radius-sm);
}
/* Cores dos botoes de modulo e de pagina, do fundo da area de trabalho e dos
icones que herdam de `.ui-icon`. Vinham de `APLICACAO SEMANTICA`; leva 5 do
#10. Ficam AQUI, e nao junto da forma la em cima, por dois motivos medidos:
a forma destes botoes foi redeclarada nesta secao, e `.ui-icon` (L3000)
declara `font-size` com a MESMA especificidade dos tres blocos de icone -
descer mais que isto entrega o tamanho do icone para a regra generica. */
.page-section__title,
.module-button__copy small {
color: var(--navigation-label-secondary);
}
.page-button,
.sidebar-back,
.sidebar-module-label {
color: var(--navigation-label);
}
.module-button {
border-color: var(--separator);
background: var(--navigation-item-background);
color: var(--navigation-label);
}
.module-button:not(.is-active):hover {
background: var(--navigation-item-hover-background);
color: var(--navigation-label);
}
.module-button:not(.is-active):active {
border-color: var(--separator-opaque);
background: var(--navigation-item-pressed-background);
}
.module-button.is-active {
border-color: var(--navigation-item-selected-border);
background: var(--navigation-item-selected-background);
box-shadow: inset 4px 0 0 var(--accent);
color: var(--navigation-label);
}
.module-button:focus-visible {
outline-color: var(--focus-ring);
}
.module-button {
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 80ms ease;
}
.module-button:not(.is-active):hover {
opacity: 1;
}
.page-button {
background: var(--navigation-item-background);
color: var(--navigation-label);
}
.page-button:not(.is-active):not(:disabled):not(.page-button--disabled):hover {
background: var(--navigation-item-hover-background);
}
.page-button:not(.is-active):not(:disabled):not(.page-button--disabled):active {
background: var(--navigation-item-pressed-background);
box-shadow: inset 0 0 0 1px var(--separator);
}
.page-button.is-active,
.page-button.is-active:hover,
.page-button.is-active:active {
background: var(--navigation-item-selected-background);
color: var(--navigation-label);
box-shadow: inset 0 0 0 1px var(--navigation-item-selected-border);
opacity: 1;
}
.page-button:not(:disabled):not(.page-button--disabled):focus-visible {
outline-color: var(--focus-ring);
}
.module-button__icon {
background: var(--system-gray);
color: var(--navigation-label-secondary);
transition: background-color 150ms ease, color 150ms ease;
}
.module-button:not(.is-active):hover .module-button__icon {
background: var(--system-gray);
color: var(--navigation-label);
}
.module-button.is-active .module-button__icon {
background: var(--system-blue);
color: var(--system-white);
}
.module-button.is-single-page.is-active {
cursor: default;
pointer-events: none;
}
.module-button__chevron {
color: var(--navigation-label);
}
.app-shell.is-financeiro .module-button[data-module="financeiro"].is-active {
box-shadow: inset 4px 0 0 var(--finance-accent);
}
.app-shell.is-financeiro .module-button[data-module="financeiro"].is-active .module-button__icon {
background: var(--finance-accent);
}
.status-pill__icon,
.account-menu__icon {
font-size: 18px;
}
.filter-menu__search-icon {
color: var(--label-secondary);
font-size: 22px;
}
.filter-eye__icon {
/* color/font-size vinham da ex-camada CONTROLE DE VISIBILIDADE (venciam por
ordem sobre os valores originais label-primary/22px); a camada tambem trazia
`transition` e width/height. width/height eram REDUNDANTES -
`.ui-icon.filter-eye__icon` (secao CONTEXTO FINANCEIRO, 0,2,0) ja os fixa em
22px, e o span tem sempre as duas classes (index.html:120). Fundido aqui na
leva 12 do #10: esta e a ultima declaracao de cor sobre o seletor, na secao
"cores depois da forma", por construcao. */
color: var(--system-white);
font-size: 18px;
transition: filter var(--duration-fast) var(--easing-standard);
}
.workspace,
.embed-frame,
.real-report,
.real-report--module {
/* `--module-content-background` e o parametro por modulo: variavel nao disputa
especificidade com a regra do tema claro logo abaixo, entao um modulo que a
define ganha nos DOIS temas sem nenhum override empilhado.
Hoje NENHUM modulo define - a Administracao era a unica e deixou de ser em
2026-08-05, a pedido do Arthur. O parametro continua aqui de proposito: e o
ponto de extensao para quando um modulo (ou um fork) precisar de fundo
proprio, e sem ele a alternativa seria empilhar override. */
background: var(--module-content-background, var(--system-gray-3));
color: var(--label-primary);
color-scheme: var(--appearance-color-scheme);
}
/* O tema claro usa um cinza proprio para o fundo do conteudo. Vence a regra
acima por especificidade - :root:not([data-theme="dark"]) soma dois niveis -
e nao por vir depois, entao a posicao aqui e livre. */
:root:not([data-theme="dark"]) :is(.workspace, .embed-frame, .real-report, .real-report--module) {
background: var(--module-content-background, var(--page-content-background));
}
.executive-dashboard,
.engineering-report {
color: var(--label-primary);
}
.module-heading {
border-color: var(--separator);
}
.module-heading h2,
.dashboard-kpi > strong,
.dashboard-panel h3,
.engineering-bar-row > strong,
.engineering-project b,
.development-state h2 {
color: var(--label-primary);
}
.dashboard-project-filter {
position: relative;
}
.dashboard-project-filter .filter-select {
height: 30px;
}
.dashboard-project-filter__menu {
top: 100%;
right: 0;
left: auto;
width: 100%;
max-height: 340px;
}
.engineering-select-filter .filter-select {
height: 30px;
}
.engineering-select-filter__menu {
top: 100%;
right: 0;
left: 0;
width: 100%;
max-height: 340px;
}
.dashboard-panel h3 {
border-color: var(--separator);
}
.engineering-filters {
border-color: var(--separator);
background: var(--background-secondary);
}
.engineering-filter {
color: var(--label-secondary);
}
.engineering-filter select,
.engineering-date-field,
.engineering-date-popover,
.engineering-date-popover__header {
border-color: var(--separator);
background: var(--background-primary);
color: var(--label-primary);
}
/* Moldura do relatorio embutido. Vinha da camada SIDEBAR CONTINUA.
A casa obvia de `.embed-frame` seria AREA DE TRABALHO (L920), mas o piso
medido e a L3934 (`.embed-frame--module`), aqui dentro: pousar antes dela
devolveria o padding do quadro de modulo. O destino e imposto pelo
concorrente, nao pela familia do seletor. */
.embed-frame {
grid-template-rows: auto auto minmax(0, 1fr);
padding: 0;
}
.embed-frame > :is(.real-report, .report-status) {
grid-row: 3;
width: calc(100% - 16px);
margin-right: 8px;
margin-bottom: 12px;
margin-left: 8px;
}
.embed-frame > .real-report--dashboard {
margin-bottom: 8px;
}
/* Este bloco de midia NAO subiu junto com `CONTROLES DA TOOLBAR`, e o motivo e
o mesmo que ja o prendeu duas vezes: ele sobrescreve regras que ficaram
abaixo, e um bloco de midia que sobrescreve uma regra tem que vir DEPOIS
dela. Agora sao duas - `.finance-context-value-mode`, cuja outra copia esta em
`CONTROLES DA TOOLBAR`, acima, e
`.finance-context-bar > .module-heading__meta` desta mesma secao, poucas
linhas acima.
A segunda so apareceu na leva 9, e por um motivo que vale registrar: as duas
regras empatam em `justify-content: flex-end`, com valor IDENTICO, entao o
`cascata.mjs` nao a conta como concorrente - ele so olha valor diferente.
Quem a pegou foi a conferencia de ordem entre homonimos do
`verifica-ordem.py`, em segundos e antes de qualquer captura. Inverter aqui
nao mudaria pixel nenhum; o que nao se pode e perder a pre-condicao que torna
valida a conferencia de inversoes sobre as outras 1.121 declaracoes.
Pela terceira vez a mesma licao (secoes 22.2, 28.3 e 29.3 do handoff): o que
sobrevive por posicao nao pode ser tratado como se sobrevivesse por merito. */
@media (max-width: 1180px) {
.finance-context-bar {
gap: 8px;
}
.finance-context-bar > .module-heading__meta {
justify-content: flex-end;
}
}
/* Bloco min-2000 (centragem ultrawide) dissolvido da camada RESPONSIVIDADE
(leva 14 do #10). PRECISA vir depois de `.embed-frame > :is(.real-report,
.report-status)` (L6518), que sobrescreve o mesmo seletor (0,2,0) com valor
DIFERENTE - senao a centragem se perde no ultrawide. Por isso pousa aqui, no
piso mais tardio do bloco, e nao em CONTEXTO (filter-grid/finance-context-bar,
anteriores). Nenhum outro min-width compete com esses tres seletores. */
@media (min-width: 2000px) {
.filter-grid,
.finance-context-bar,
.embed-frame > :is(.real-report, .report-status) {
width: min(1920px, calc(100% - 16px));
margin-right: auto;
margin-left: auto;
}
}
/* ==========================================================================
ENGENHARIA - KPIs, paineis, barras, projetos e tabela
========================================================================== */
/* Esta secao veio da faixa que a leva 8 nomeou, e esta agora onde ela sempre
deveria estar: logo depois de `MODULOS E PAINEIS`, que e onde mora o resto do
modulo de engenharia. A janela foi medida com
`scripts/prova-visual/cascata.mjs` na leva 8 e reconfirmada na 9 - o unico
piso fora desta secao e o de `.engineering-project-list`, na regra
`.variance-list, .broker-list, ...` de `MODULOS E PAINEIS`, acima, e todos os
tetos ficam abaixo. Ela cruzou apenas `AUTENTICACAO`, que so declara
`.login-*`: zero seletor e zero classe em comum, medido.
Aqui esta a FORMA destes componentes. A COR deles esta em `CORES QUE VEM
DEPOIS DA FORMA`, bem mais abaixo, e a separacao nao e de gosto: cada regra de
la empata em especificidade com a regra de forma daqui e so vence por vir
depois. `.engineering-kpi`, `.engineering-progress-ring::before`,
`.engineering-stacked-bar`, `.engineering-table`, `.engineering-table th/td`,
`.engineering-table thead th` e `.engineering-project small` tem teto la
embaixo. Juntar as duas pontas exige reescrever regra, nao mover bloco.
O que esta secao nao pode e DESCER: `.engineering-panel--packages`,
`.engineering-panel--projects` e `.engineering-project-list` sao sobrescritos
pelo `@media (max-width: 900px)` de `ESQUELETO DE MODULO`, abaixo. */
.engineering-calendar__days button:disabled {
color: var(--system-gray);
opacity: var(--opacity-disabled);
-webkit-text-fill-color: var(--system-gray);
cursor: default;
}
/* Sao OITO KPIs, numero fixo no codigo (`src/app.js`, renderEngineering). Com
o piso de coluna em 150px o auto-fit produzia SETE colunas em 1440px com a
barra lateral aberta — a vista padrao — e o oitavo cartao (SPI) caia sozinho
numa segunda linha, custando 71px de altura para um cartao so. Ali o
conteudo tem 1144px: com piso de 150px, oito colunas pediriam 8x150 + 7x7 =
1249 e nao cabiam; com 130px pedem 8x130 + 7x7 = 1089 e cabem, e o `1fr`
entao distribui a sobra (cada coluna sai com 136,9px). De quebra, o 3+3+2
de 900px vira 4+4.
Decidido em 31/07 (#11). Onde calibrar: o 130px desta linha. */
.engineering-count {
border-radius: var(--radius-pill);
justify-self: end;
}
.engineering-grid {
display: grid;
min-height: 0;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: auto minmax(0, 1fr);
gap: 9px;
}
.engineering-panel--packages {
grid-column: span 6;
}
.engineering-panel--projects {
grid-column: span 6;
}
.engineering-panel--table {
display: grid;
min-height: 40vh;
grid-column: 1 / -1;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.engineering-bar-row {
display: grid;
grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1.6fr) 104px;
align-items: center;
gap: 8px;
}
.engineering-bar-row--header {
align-items: end;
}
.engineering-bar-row--header > span:first-child,
.engineering-bar-row--header > strong,
.engineering-stacked-bar__header small {
color: var(--label-secondary);
font: 800 10px var(--font-mono);
text-transform: uppercase;
}
.engineering-stacked-bar__header {
display: flex;
justify-content: space-between;
}
.engineering-bar-row--header > strong {
text-align: right;
}
.engineering-stacked-bar {
position: relative;
height: 22px;
display: flex;
overflow: hidden;
background: var(--system-gray-5);
}
.engineering-stacked-bar i {
position: relative;
display: block;
min-width: 0;
height: 100%;
overflow: visible;
}
.engineering-stacked-bar .is-realized {
background: var(--engineering-realized-background);
}
.engineering-stacked-bar .is-pending {
background: var(--background-tertiary);
}
.engineering-stacked-bar__value {
position: absolute;
z-index: 1;
top: 50%;
display: block;
max-width: 150px;
overflow: hidden;
font: 800 8px var(--font-mono);
line-height: 1;
pointer-events: none;
text-overflow: ellipsis;
transform: translateY(-50%);
white-space: nowrap;
}
.engineering-stacked-bar__value.is-realized-value {
left: 0;
color: var(--label-primary);
padding: 4px 5px;
}
.engineering-stacked-bar__value.is-pending-value {
right: 0;
color: var(--label-primary);
padding: 4px 5px;
text-align: right;
}
.engineering-bar-row:not(.engineering-bar-row--header) > strong {
color: var(--label-primary);
font: 700 11px var(--font-mono);
text-align: right;
}
.engineering-project {
--engineering-project-tone: var(--system-blue);
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.engineering-project-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px 18px;
padding: 14px 15px;
}
.engineering-progress-ring {
width: 80px;
height: 80px;
display: grid;
place-content: center;
border-radius: 50%;
}
.engineering-progress-ring::before {
grid-area: 1 / 1;
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--system-white);
content: "";
}
.engineering-progress-ring strong {
position: relative;
grid-area: 1 / 1;
align-self: center;
justify-self: center;
font: 700 11px var(--font-mono);
}
.engineering-project > span:last-child {
display: grid;
min-width: 0;
gap: 3px;
}
.engineering-project b,
.engineering-project small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Um empreendimento filtrado usa a linha inteira: na meia coluna o desvio
("acima R$ 2.786.925") era cortado com reticências ao lado de espaço vazio. */
.engineering-project:only-child {
grid-column: 1 / -1;
}
.engineering-project b {
color: var(--label-primary);
font-size: 12px;
}
.engineering-project small {
color: var(--system-gray);
font-size: 9px;
}
.engineering-project.is-positive {
--engineering-project-tone: var(--system-green);
}
.engineering-project.is-negative {
--engineering-project-tone: var(--system-red);
}
.engineering-project small em {
color: var(--engineering-project-tone);
font-style: normal;
font-weight: 800;
}
.engineering-table-wrap {
min-height: 40vh;
overflow: auto;
}
.engineering-table {
width: 100%;
min-width: 1120px;
border-collapse: separate;
border-spacing: 1px;
background: var(--system-gray-5);
color: var(--label-primary);
font-size: 10px;
}
.engineering-table th,
.engineering-table td {
height: 25px;
background: var(--system-gray-6);
padding: 0 7px;
text-align: right;
white-space: nowrap;
}
.engineering-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--label-primary);
color: var(--system-white);
font-weight: 800;
}
.engineering-table tbody tr:nth-child(even) th,
.engineering-table tbody tr:nth-child(even) td {
background: var(--system-gray-6);
}
.engineering-table th:first-child,
.engineering-table th:nth-child(2) {
max-width: 230px;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
}
.engineering-table .is-negative {
color: var(--system-red);
font-weight: 800;
}
.engineering-table .is-positive {
color: var(--system-green);
font-weight: 800;
}
/* Bloco max-1180 dissolvido da camada RESPONSIVIDADE (leva 14 do #10). Piso
mais tardio deste bloco e ENGENHARIA: `.dashboard-panel, .engineering-panel
{ grid-column: 1/-1 }` (0,1,0) vence `.engineering-panel--packages/--projects`
(0,1,0, span 6, L6654) e `.dashboard-panel--cash/...` (span 8/4, L5711) POR
POSICAO - entao vem depois delas. O bloco max-900 do esqueleto (L7142) repete
`1/-1` com valor identico (ordem irrelevante). filter-grid e filter-chips/select
tem piso anterior (CONTEXTO) e concorrentes mais estreitos (720/520) que ficam
depois, no fim do arquivo: ordem base<1180<720<520 preservada. */
@media (max-width: 1180px) {
.filter-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-areas:
"ano agrupamento centro empresa"
"months classe assunto fase"
"tri grupo subgrupo subgrupo";
grid-template-rows: repeat(3, 56px);
}
.filter-panel.is-extended-family .filter-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-areas:
"ano centro agrupamento empresa"
"months classe assunto fase"
"tri grupo subgrupo fornecedor";
grid-template-rows: repeat(3, 56px);
}
.filter-chips--quarters,
.filter-chips--months {
display: none;
}
.filter-select--quarter,
.filter-select--month {
display: flex;
}
.dashboard-panel,
.engineering-panel {
grid-column: 1 / -1;
}
}
/* ==========================================================================
AUTENTICACAO - Pagina de login
========================================================================== */
/* Daqui ate o fim do `@media (max-width: 720px)` e a pagina de login, e so ela.
O que vinha depois - engenharia, esqueleto, toolbar, menu de tema, calendario
e o interruptor R$/YoY - vivia sob este mesmo cabecalho por falta de
divisoria, nao por parentesco: 1.583 linhas com um titulo que descrevia as
106 primeiras. As oito secoes abaixo sao a leva 8 do card #10.
A pagina de login integra a prova visual em ambos os temas e em todas as
larguras. Qualquer regra `.login-*` alterada deve permanecer no conjunto de
seletores medidos por `scripts/prova-visual/capture.mjs`. */
.login-page {
min-height: 100%;
background: #0b0b0c;
color: #f5f5f7;
}
/* Login (19/10/2026, canvas "Login Loba BI", direção B "Vista aérea"): foto
aérea de um loteamento da Loba em tela cheia, véu escuro da esquerda para a
direita, logo no topo, destaque embaixo à esquerda e cartão de acesso embaixo
à direita. Escuro nos dois temas, como o splash: cores literais de propósito,
token de tema inverteria. */
.login-shell {
position: relative;
isolation: isolate;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
gap: 64px;
padding: 64px clamp(24px, 6.5vw, 96px);
}
.login-photo,
.login-scrim {
position: absolute;
inset: 0;
pointer-events: none;
}
.login-photo {
z-index: -2;
}
.login-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.login-scrim {
z-index: -1;
background: linear-gradient(90deg, rgb(11 11 12 / 0.92) 0%, rgb(11 11 12 / 0.72) 42%, rgb(11 11 12 / 0.2) 100%);
}
.login-brand-panel {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 64px;
min-width: 0;
}
.login-wordmark {
width: 176px;
height: auto;
}
.login-hero {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
max-width: 640px;
}
.login-monogram {
width: 120px;
height: auto;
}
.login-hero__eyebrow {
margin: 0;
color: #7ab8ea;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 2.6px;
text-transform: uppercase;
}
.login-hero__title {
margin: 0;
font-size: clamp(36px, 3.9vw, 56px);
font-weight: 600;
line-height: 1.143;
letter-spacing: -1px;
}
/* Cartão e destaque alinhados pela base, como no canvas. */
.login-auth-panel {
align-self: end;
min-width: 0;
}
.login-auth {
display: grid;
gap: var(--space-6);
padding: var(--space-10);
border: 1px solid rgb(255 255 255 / 0.14);
border-radius: 16px;
background: rgb(16 16 18 / 0.78);
box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
/* O destaque à esquerda já diz "Loba Business Intelligence". */
.login-auth__eyebrow {
display: none;
}
.login-auth h1 {
margin: 0;
color: #f5f5f7;
font-size: 30px;
font-weight: 600;
line-height: 1.267;
}
.login-auth__description {
margin: calc(var(--space-3) - var(--space-6)) 0 0;
color: #c7c7cc;
font-size: 15px;
line-height: 1.6;
}
/* Motivo de o usuário ter caído aqui: sessão expirada ou inatividade (#129).
Escondido por `hidden` até o script do login preencher. Cartão escuro: tinta
clara translúcida, texto claro (contraste > 12:1). */
.login-auth__aviso {
margin: 0;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgb(255 255 255 / 0.14);
background: rgb(255 255 255 / 0.06);
color: #f5f5f7;
font-size: 14px;
line-height: 1.45;
}
.login-primary {
width: 100%;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
border: 0;
border-radius: 10px;
background: #ffffff;
color: #111111;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background var(--duration-fast) var(--easing-standard);
}
.login-primary:hover {
background: #e5e5ea;
}
.login-primary:focus-visible {
outline: 2px solid #3f99de;
outline-offset: 3px;
}
.login-primary__microsoft-logo {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
.login-auth__notice {
display: block;
color: #aeaeb2;
font-size: 13px;
line-height: 1.54;
}
/* Empilhado: logo no topo, destaque logo acima do cartão e o botão de entrar
visível sem rolar. Véu de cima para baixo; até 600px a foto vem em recorte
vertical (login.html). */
@media (max-width: 900px) {
.login-shell {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
gap: var(--space-8);
padding: var(--space-10) var(--space-6) var(--space-8);
}
.login-scrim {
background: linear-gradient(180deg, rgb(11 11 12 / 0.6) 0%, rgb(11 11 12 / 0.74) 45%, rgb(11 11 12 / 0.92) 100%);
}
.login-brand-panel {
gap: var(--space-8);
}
.login-wordmark {
width: 120px;
}
.login-hero {
gap: var(--space-4);
}
.login-monogram {
width: 72px;
}
.login-hero__eyebrow {
font-size: 12px;
letter-spacing: 2.2px;
}
.login-hero__title {
font-size: 30px;
line-height: 1.2;
letter-spacing: -0.5px;
}
/* No tablet o cartão não estica até a borda. */
.login-auth-panel {
width: 100%;
max-width: 520px;
}
.login-auth {
gap: var(--space-5);
padding: 28px var(--space-6);
}
.login-auth h1 {
font-size: 24px;
}
}
/* Celular baixo (iPhone SE): o cartão continua visível sem rolar. */
@media (max-width: 900px) and (max-height: 740px) {
.login-monogram {
width: 56px;
}
.login-hero__title {
font-size: 26px;
}
.login-auth__description {
display: none;
}
}
/* ==========================================================================
ESTADOS DE MODULO - Em desenvolvimento e vazio
========================================================================== */
.development-state {
height: 100%;
min-height: 320px;
display: grid;
place-content: center;
justify-items: center;
border: 1px dashed var(--system-gray-5);
border-radius: 6px;
background: var(--system-white);
color: var(--system-gray);
text-align: center;
}
.development-state .ui-icon {
color: var(--system-gray);
font-size: 42px;
}
.development-state h2 {
margin: 10px 0 3px;
color: var(--label-primary);
font-size: 18px;
}
.development-state p {
margin: 0;
font-size: 12px;
}
/* ==========================================================================
ESQUELETO DE MODULO - Carregamento de dashboard e engenharia
========================================================================== */
/* Os dois blocos de midia do fim (`520px` e `900px`) fazem parte do esqueleto,
e o de 900px carrega tambem `.dashboard-panel, .engineering-panel` e
`.engineering-date-calendars, .engineering-project-list`, que sao o TETO de
tres regras de `ENGENHARIA`, acima. E por isso que `ENGENHARIA` nao pode
descer para ca nem esta secao subir para la. */
.module-skeleton {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 0;
}
.module-skeleton__content {
display: grid;
min-width: 0;
min-height: 0;
gap: var(--module-content-gap, var(--space-3));
align-content: start;
}
.module-skeleton__context {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
min-width: 0;
min-height: 30px;
gap: var(--space-2);
}
.module-skeleton__context-tabs {
display: flex;
flex: 1 1 auto;
gap: var(--space-2);
}
.module-skeleton__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
min-width: 0;
gap: var(--space-3);
}
.module-skeleton__grid--full { grid-template-columns: minmax(0, 1fr); }
.module-skeleton__shine {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--background-secondary);
}
.module-skeleton__shine::after {
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, var(--system-clear), color-mix(in srgb, var(--background-primary) 72%, var(--system-clear)), var(--system-clear));
content: "";
animation: report-skeleton-shine 1.15s ease-in-out infinite;
}
.module-skeleton__card .report-skeleton__shine { max-width: 100%; }
/* Text placeholders inherit the real component's typographic line boxes. */
.module-skeleton__card .report-skeleton__shine--short,
.module-skeleton__card .report-skeleton__shine--strong { height: 1lh; }
.module-skeleton__card .report-skeleton__shine--strong { width: 70%; }
.module-skeleton__card .report-skeleton__shine--note,
.module-skeleton__card .report-skeleton__shine--title { height: 2lh; width: 100%; }
.module-skeleton__card .executive-message { width: 100%; }
.module-skeleton__card .report-skeleton__shine--chart { width: 100%; height: 28px; }
.module-skeleton__panel {
display: grid;
align-content: start;
gap: var(--space-2);
padding: var(--space-3);
}
.module-skeleton__plot { min-height: var(--module-chart-min-height, 220px); }
.module-skeleton--table .module-skeleton__content,
.module-skeleton--engineering-detail .module-skeleton__content {
height: 100%;
grid-template-rows: auto minmax(0, 1fr);
}
.module-skeleton--engineering-detail .module-skeleton__content {
grid-template-rows: auto auto minmax(0, 1fr);
}
@media (max-width: 900px) {
.module-skeleton__grid {
grid-template-columns: minmax(0, 1fr);
}
.dashboard-panel,
.engineering-panel {
grid-column: 1 / -1;
}
.engineering-date-popover {
width: min(320px, calc(100vw - 38px));
}
.engineering-date-calendars,
.engineering-project-list {
grid-template-columns: minmax(0, 1fr);
}
.module-heading {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.module-heading__meta {
justify-content: flex-end;
}
}
/* ==========================================================================
MENU DE TEMA - Gatilho, painel e itens
========================================================================== */
/* O menu de tema e o mesmo componente em dois lugares - `--sidebar` e
`--topbar` - e por isso nao tem casa em nenhuma das duas secoes de navegacao.
Medido nesta leva: o bloco nao tem piso nenhum FORA dele, e tem teto em
`CONTROLE DE VISIBILIDADE DOS FILTROS` (`.theme-menu__trigger`,
`.theme-menu__trigger .ui-icon` e `.theme-menu__trigger[aria-expanded]`).
Pode subir; nao pode descer.
E ele que obriga `BOTAO DE PAGINA E ICONES DA TOPBAR` a vir ANTES desta
secao: `.theme-menu__trigger[aria-expanded="true"]` empata em especificidade
com `.topbar .finance-filter-visibility` e so vence por vir depois. */
.theme-menu {
position: relative;
}
.topbar-theme-slot,
.theme-menu--topbar {
width: 32px;
height: 32px;
flex: 0 0 32px;
align-self: center;
}
.topbar-theme-slot {
display: flex;
align-items: center;
justify-content: center;
}
.theme-menu--topbar .theme-menu__trigger {
width: 32px;
height: 32px;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
}
.theme-menu--topbar .theme-menu__trigger:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge),
.theme-menu--topbar .theme-menu__trigger[aria-expanded="true"] {
background: var(--navigation-selection);
}
.theme-menu__trigger {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid var(--separator);
border-radius: var(--radius-sm);
background: var(--navigation-selection);
color: var(--navigation-label);
cursor: pointer;
padding: var(--space-0);
}
.theme-menu__trigger[aria-expanded="true"] {
border-color: var(--system-blue);
color: var(--system-blue);
}
.theme-menu__trigger:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.theme-menu__trigger .ui-icon {
font-size: 22px;
}
/* Botao de exibir/ocultar o painel de filtros (`.finance-filter-visibility`,
index.html:100). Vivia na ex-camada CONTROLE DE VISIBILIDADE DOS FILTROS;
dissolvida na leva 12 do #10. O botao REUSA a classe `.theme-menu__trigger`
(index.html:100: `theme-menu__trigger topbar-icon-button finance-filter-
visibility`), entao suas regras precisam vir DEPOIS das de `.theme-menu__trigger`
acima para venc-las por ordem na mesma especificidade - em especial
`.finance-filter-visibility .ui-icon` (19px) sobre `.theme-menu__trigger
.ui-icon` (22px), as duas (0,2,0). Por isso a casa e aqui, logo apos as regras
do trigger, e nao junto dos overrides de topbar (que sao mais especificos e
venceriam de qualquer lugar). Nenhum concorrente existe entre este ponto e o
fim do arquivo, entao a cascata reproduz a do main. */
.finance-filter-visibility {
position: relative;
top: auto;
left: auto;
display: inline-grid;
width: 32px;
height: 32px;
place-items: center;
padding: var(--space-0);
flex: 0 0 32px;
transform: none;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
color: var(--label-primary);
cursor: pointer;
transition: filter var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
}
.finance-filter-visibility .ui-icon {
color: currentColor;
font-size: 19px;
}
.finance-filter-visibility:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--navigation-selection);
filter: none;
}
/* Card #31: no estado selecionado muda so a COR DO ICONE. Fundo, apenas no
hover (regra acima). */
.finance-filter-visibility.is-panel-visible {
color: var(--finance-accent);
}
.finance-filter-visibility__count {
position: absolute;
right: -4px;
bottom: -4px;
width: var(--space-4);
height: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--finance-accent);
color: var(--finance-accent-label);
font-size: 9px;
font-weight: 850;
line-height: 14px;
text-align: center;
}
.finance-filter-visibility__count[hidden] {
display: none;
}
.finance-filter-visibility[hidden] {
display: none;
}
.theme-menu__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: var(--z-date-popover);
width: 190px;
overflow: hidden;
border: 1px solid var(--separator);
border-radius: var(--radius-md);
background: var(--background-primary);
box-shadow: var(--standard-shadow);
color: var(--label-primary);
padding: var(--space-2);
}
.theme-menu__panel[hidden],
.account-menu__panel[hidden] {
display: none;
}
.theme-menu__item {
width: 100%;
height: 34px;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 18px;
align-items: center;
gap: var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
color: var(--label-primary);
cursor: pointer;
font-size: 12px;
font-weight: 650;
padding: var(--space-0) var(--space-2);
text-align: left;
}
.theme-menu__item:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge),
.theme-menu__item:focus-visible {
background: var(--control-hover-background);
}
.theme-menu__item > .ui-icon {
color: var(--label-secondary);
font-size: 18px;
}
.theme-menu__item:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) {
color: var(--system-blue);
font-weight: 800;
}
.theme-menu__item:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) > .ui-icon {
color: var(--system-blue);
}
.theme-menu__check {
visibility: hidden;
}
.theme-menu__item:is(.is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) .theme-menu__check {
visibility: visible;
}
/* ==========================================================================
SELETOR DE PERIODO - Popover de data e presets
========================================================================== */
/* `.engineering-date-popover button` nao e medido por prova nenhuma: o popover
existe no DOM desde o boot, mas os botoes Limpar/Aplicar so nascem quando o
calendario e montado (secao 28.9 do handoff). Nada aqui foi movido. */
.engineering-date-popover__actions {
display: flex;
gap: var(--space-2);
}
.engineering-date-popover__actions button {
height: auto;
border: 0;
background: var(--system-clear);
font-size: 10px;
font-weight: 800;
padding: var(--space-1) var(--space-1);
cursor: pointer;
}
.engineering-date-popover__clear { color: var(--system-red); }
.engineering-date-popover__apply { color: var(--system-blue); }
.engineering-date-popover__actions button:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) { background: var(--control-hover-background); }
.engineering-date-popover__actions button:disabled { opacity: var(--opacity-disabled); }
.engineering-date-preset {
position: relative;
min-width: 0;
}
.engineering-date-preset__trigger {
position: relative;
min-width: 125px;
border: 0;
background: var(--system-clear);
color: var(--label-primary);
font-size: 10px;
font-weight: 800;
padding: var(--space-1) var(--space-3) var(--space-1) var(--space-0);
cursor: pointer;
text-align: left;
}
.engineering-date-preset__trigger::after {
position: absolute;
top: 50%;
right: 2px;
width: 6px;
height: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
content: "";
transform: translateY(-65%) rotate(45deg);
}
.engineering-date-preset__menu {
position: absolute;
z-index: var(--z-date-preset);
top: 100%;
left: -8px;
min-width: 155px;
overflow: hidden;
border: 1px solid var(--separator-opaque);
border-radius: var(--radius-sm);
background: var(--control-background);
box-shadow: var(--standard-shadow);
padding: var(--space-1);
}
.engineering-date-preset__menu[hidden] { display: none; }
.engineering-date-preset__option {
width: 100%;
min-height: 26px;
border: 0;
border-radius: var(--radius-sm);
background: var(--system-clear);
color: var(--label-primary);
font-size: 10px;
font-weight: 700;
padding: var(--space-1) var(--space-2);
cursor: pointer;
text-align: left;
}
.engineering-date-preset__option:is(:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge), .is-selected) {
background: var(--control-hover-background);
}
/* ==========================================================================
ASSISTENTE INTELLIGENCE - Chat (#81)
========================================================================== */
/* Componente novo com namespace proprio (.assistente-chat*): nenhuma regra
anterior ou posterior fala destes seletores, entao FORMA e COR moram juntas
aqui sem disputa de cascata — inclusive com a faixa `CORES QUE VEM DEPOIS DA
FORMA` logo abaixo, que nao alcanca este namespace. Tokens sempre pelo alias
semantico (regra 13 do style-guide). */
.assistente-chat-layout {
/* Aliases locais do componente: preservam a hierarquia pedida sem expor
tokens de paleta nas regras que consomem cor (style-guide, regra 13). */
--assistente-surface-bar: var(--background-primary);
--assistente-surface-content: color-mix(in srgb, var(--background-primary) 82.5%, var(--background-secondary));
--assistente-surface-field: var(--page-content-background);
display: flex;
gap: 16px;
width: 100%;
height: 100%;
min-height: 420px;
}
[data-theme="dark"] .assistente-chat-layout {
--assistente-surface-content: color-mix(in srgb, var(--background-primary) 66.667%, var(--background-secondary));
--assistente-surface-field: var(--background-secondary);
}
.assistente-chat {
display: flex;
flex-direction: column;
gap: 16px;
height: 100%;
min-height: 420px;
max-width: 880px;
margin: 0 auto;
width: 100%;
min-width: 0;
/* O #reportRoot e um scroller (overflow-y: auto) e o form senta rente ao
fundo dele: sem esta folga o anel de foco do input (2px + offset 1px,
desenhado para FORA) e decepado na borda de baixo — media exata: input
bottom = scroller bottom = 848, outline precisa ate 851. */
padding-bottom: 6px;
}
.assistente-chat__historico {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
padding: 8px 4px;
}
.assistente-chat__vazio {
margin: auto;
display: grid;
justify-items: center;
gap: 10px;
text-align: center;
max-width: 520px;
color: var(--label-secondary);
}
.assistente-chat__vazio .ui-icon {
width: 40px;
height: 40px;
color: var(--brand-accent);
}
/* O reset global do portal so cobre box-sizing: e
chegam aqui com a
margem default do navegador (13,5px medidos no balao), que distorce o
padding dos baloes e os gaps do estado vazio (achado do Gemini, PR #127). */
.assistente-chat__vazio h2,
.assistente-chat__vazio p,
.assistente-chat__mensagem p {
margin: 0;
}
.assistente-chat__vazio h2 {
font-size: 17px;
font-weight: 650;
color: var(--label-primary);
}
.assistente-chat__vazio p {
font-size: 13px;
line-height: 1.5;
}
.assistente-chat__mensagem {
max-width: 78%;
padding: 10px 14px;
border-radius: 14px;
font-size: 13.5px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.assistente-chat__mensagem--usuario {
align-self: flex-end;
/* O par --control-selected-* mede 3,08:1 no tema escuro (reprova o AA de
4,5:1). Este par e o mesmo do botao Perguntar: 4,57 claro / 6,82 escuro,
medidos no computado contra o fundo real em 2026-08-10. */
background: var(--brand-accent);
color: var(--label-inverse);
border-bottom-right-radius: 4px;
}
.assistente-chat__mensagem--assistente {
align-self: flex-start;
background: var(--background-grouped-secondary);
color: var(--label-primary);
border: 1px solid var(--separator);
border-bottom-left-radius: 4px;
}
.assistente-chat__mensagem--assistente.is-pending {
color: var(--label-tertiary);
font-style: italic;
}
.assistente-chat__mensagem--erro {
align-self: flex-start;
background: var(--status-negative-fill);
color: var(--label-primary);
border: 1px solid var(--separator);
border-bottom-left-radius: 4px;
}
.assistente-chat__meta {
position: relative;
display: block;
margin-top: 6px;
font-size: 11px;
color: var(--label-primary);
}
/* Balao da IA com Markdown (#133): o pre-wrap do balao generico serviria texto
cru; com o MD ja estruturado em blocos ele dobraria cada espaco em quebra. E
dentro do balao a tinta secundaria do .assistente-md (calibrada para o
modal de instrucoes) cede a primaria, que e a tinta do proprio balao. */
.assistente-chat__mensagem--md {
white-space: normal;
}
.assistente-chat__mensagem--md .assistente-md p,
.assistente-chat__mensagem--md .assistente-md li {
font-size: 13.5px;
color: var(--label-primary);
}
/* Feedback util/inutil (ADR-002): tinta primaria de proposito — 11px nao e
texto grande, e label-secondary (alfa 0,6) reprovaria o AA de 4,5:1 como o
contador de consumo ja reprova. */
.assistente-chat__feedback {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.assistente-chat__feedback-botao {
position: relative;
border: 1px solid var(--separator);
background: none;
color: var(--label-primary);
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
}
.assistente-chat__feedback-botao:hover,
.assistente-chat__feedback-botao:focus-visible {
background: var(--background-grouped-tertiary);
}
.assistente-chat__feedback small {
font-size: 11px;
color: var(--label-primary);
}
.assistente-chat__feedback-botao[aria-pressed="true"] {
background: var(--control-selected-background);
color: var(--label-inverse);
border-color: var(--label-primary);
}
.assistente-chat__feedback-botao:focus-visible,
.ai-team :is(button, input, select):focus-visible,
.assistente-chat__meta:focus-visible {
outline: 2px solid var(--label-primary);
outline-offset: 3px;
}
.assistente-chat__feedback-botao:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.assistente-chat__comentario {
flex-basis: 100%;
display: grid;
gap: 8px;
justify-items: start;
}
.assistente-chat__comentario[hidden] { display: none; }
.assistente-chat__comentario label {
display: grid;
gap: 6px;
width: 100%;
font-size: 12px;
}
.assistente-chat__comentario textarea {
width: 100%;
min-height: 60px;
resize: none;
border: 1px solid var(--separator);
border-radius: 6px;
padding: 8px;
background: var(--control-background);
color: var(--label-primary);
font: inherit;
}
.assistente-chat__detalhe {
display: none;
position: absolute;
inset-inline-start: 0;
bottom: calc(100% + 4px);
padding: var(--space-2) var(--space-2);
border: 1px solid var(--separator);
border-radius: var(--radius-md);
background: var(--background-primary);
color: var(--label-primary);
font-size: 12px;
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
.assistente-chat__meta:is(:hover, :focus-visible) .assistente-chat__detalhe,
.assistente-chat__feedback-botao:is(:hover, :focus-visible) .assistente-chat__detalhe {
display: block;
}
/* Limites da equipe: tabela administrativa e lateral não modal de histórico.
Custos usam os mesmos aliases do painel Custos do Sistema. */
.ai-own-budget {
flex: 0 0 auto;
padding: 8px 24px;
border-bottom: 1px solid var(--separator);
}
.ai-own-budget__content {
display: grid;
gap: 6px;
}
.ai-own-budget p {
margin: 0;
color: var(--label-secondary);
font-size: 12px;
}
.ai-budget {
display: grid;
gap: 4px;
min-width: 150px;
font-variant-numeric: tabular-nums;
}
.ai-budget__text {
color: var(--label-primary);
font-size: 12px;
}
.ai-budget__summary {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.ai-budget__detail {
color: var(--label-secondary);
font-size: 11px;
}
.ai-budget__track {
height: 5px;
overflow: hidden;
border-radius: 3px;
background: var(--separator);
}
.ai-budget__fill {
display: block;
height: 100%;
background: var(--cost-progress-fill);
}
.ai-budget__fill.is-warning {
background: var(--cost-warning);
}
.ai-budget__fill.is-critical {
background: var(--cost-critical);
}
.ai-team__heading {
display: grid;
gap: 12px;
}
.ai-team__heading > .settings-access-feedback { margin: 0; }
.ai-team__heading > .settings-access-feedback:empty { display: none; }
.ai-team__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.ai-team__intro {
max-width: 72ch;
margin: 0;
color: var(--label-secondary);
font-size: 13px;
line-height: 1.5;
}
.ai-team__month {
display: grid;
gap: 5px;
flex: 0 0 auto;
color: var(--label-secondary);
font-size: 12px;
}
.ai-team__month select,
.ai-team__budget-editor input {
height: 36px;
padding: 0 8px;
border: 1px solid var(--separator);
border-radius: 6px;
background: var(--control-background);
color: var(--label-primary);
font: inherit;
font-size: 12px;
}
.ai-team__month select {
cursor: pointer;
}
.ai-team__layout {
display: grid;
gap: 18px;
min-width: 0;
min-height: 0;
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
}
.ai-team__layout.is-history-open {
grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
}
.ai-team__table-panel {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
.ai-team__table-wrap {
flex: 0 1 auto;
min-height: 0;
overflow: auto;
}
.ai-team__table {
min-width: 1020px;
}
.ai-team__table th {
position: sticky;
top: 0;
z-index: 1;
background: var(--table-header-background);
}
.ai-team__table tbody tr {
cursor: pointer;
}
.ai-team__table tbody tr:hover {
background: var(--table-row-alternate-background);
}
.ai-team__email {
overflow-wrap: anywhere;
}
.ai-team__user {
border: 0;
padding: 8px 0;
background: none;
color: var(--label-primary);
font: inherit;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.ai-team__user:hover {
text-decoration: underline;
}
.ai-team__budget-editor {
display: grid;
grid-template-columns: minmax(90px, 1fr) auto;
align-items: center;
gap: 5px;
min-width: 180px;
}
.ai-team__budget-editor input {
width: 100%;
}
.ai-team__budget-editor input[aria-invalid="true"] {
border-color: var(--cost-critical);
}
.ai-team__save-status {
grid-column: 1 / -1;
font-size: 11px;
color: var(--label-secondary);
}
.ai-team__save-status:empty { display: none; }
.ai-team__spend {
min-width: 220px;
}
.ai-team__pagination {
display: flex;
flex: 0 0 auto;
justify-content: flex-end;
align-items: center;
gap: 12px;
margin-top: 12px;
font-size: 12px;
color: var(--label-secondary);
}
.ai-team__loading {
min-height: 160px;
padding: 20px;
color: var(--label-secondary);
}
.ai-team__drawer {
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr);
min-width: 0;
min-height: 0;
border: 1px solid var(--separator);
border-radius: 8px;
background: var(--background-primary);
}
.ai-team__drawer-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--separator);
}
.ai-team__drawer h2 {
margin: 0;
font-size: 15px;
overflow-wrap: anywhere;
}
.ai-team__drawer-email {
padding: 0 14px;
font-size: 12px;
color: var(--label-secondary);
overflow-wrap: anywhere;
}
.ai-team__drawer > .settings-access-feedback {
padding-inline: 14px;
}
.ai-team__drawer-content {
min-height: 0;
overflow-y: auto;
padding: 14px;
}
.ai-team__history {
display: grid;
gap: 7px;
margin-bottom: 10px;
}
.ai-team__history .assistente-historico__item {
min-width: 0;
overflow-wrap: anywhere;
}
.ai-team__history [aria-pressed="true"] {
border-color: var(--label-primary);
}
.ai-team__transcript {
margin-top: 18px;
}
.ai-team__transcript h3 {
font-size: 15px;
overflow-wrap: anywhere;
}
.ai-team__message {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--separator);
}
.ai-team__message h4 {
margin: 0 0 8px;
font-size: 13px;
}
.ai-team__message-meta {
display: block;
margin-top: 10px;
color: var(--label-secondary);
font-size: 11px;
}
.ai-team__feedback {
display: grid;
gap: 5px;
margin-top: 10px;
padding: 10px;
border: 1px solid var(--separator);
border-radius: 6px;
font-size: 12px;
color: var(--label-primary);
}
.ai-team__feedback p {
margin: 0;
line-height: 1.5;
}
@media (max-width: 1180px) {
.ai-team__layout.is-history-open {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-auto-rows: max-content;
align-content: start;
overflow-y: auto;
}
}
@media (max-width: 720px) {
.ai-team__toolbar {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.ai-team__pagination {
justify-content: space-between;
gap: 7px;
}
.ai-own-budget {
padding-inline: 14px;
}
}
/* --- Composer (padrao Claude): caixa unica com textarea auto-crescente,
enviar embutido no canto inferior direito e rodape de controles.
line-height FIXO em 20px: o auto-grow do JS clampa scrollHeight em 11 linhas
(11*20 + 20 de padding = 240px) e a conta so fecha com a linha em pixel
inteiro. Borda e anel de foco moram no __campo (:focus-within), nao no
textarea. --- */
.assistente-composer {
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--separator);
padding-top: 12px;
}
.assistente-composer__campo {
position: relative;
border: 1px solid var(--separator-opaque);
border-radius: 12px;
background: var(--control-background);
}
.assistente-composer__campo:focus-within {
outline: 2px solid var(--brand-accent);
outline-offset: 1px;
}
.assistente-composer__input {
display: block;
width: 100%;
height: 40px; /* 1 linha em repouso; o JS assume daqui */
max-height: 240px; /* 11 linhas; cinto-e-suspensorio do clamp */
padding: 10px 44px 10px 12px; /* 44 a direita = zona do botao de enviar */
border: none;
outline: none; /* o anel e do __campo via :focus-within */
background: transparent;
color: var(--label-primary);
resize: none;
overflow-y: hidden; /* o JS liga auto ao bater no teto */
font: inherit;
font-size: 13.5px;
line-height: 20px;
}
.assistente-composer__input:disabled {
color: var(--label-quaternary);
}
/* Enviar: 28x28 fixo, flex centrado, padding 0 — o hitbox e um quadrado e o
icone cai no centro geometrico dele. Era o padding assimetrico que
descentralizava o botao antigo. */
.assistente-composer__enviar {
position: absolute;
right: 7px;
bottom: 7px; /* (42-28)/2: centrado no campo de 1 linha */
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 8px;
background: transparent;
color: var(--label-tertiary);
cursor: pointer;
}
.assistente-composer__enviar .ui-icon {
font-size: 18px;
}
.assistente-composer__enviar:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 1px;
}
.assistente-composer__enviar[aria-disabled="true"]:hover {
background: var(--control-hover-background);
color: var(--label-secondary);
}
/* Com texto: par provado nos dois temas (4,57 claro / 6,82 escuro). */
.assistente-composer__enviar.is-pronto {
background: var(--brand-accent);
color: var(--label-inverse);
}
.assistente-composer__enviar.is-pronto:hover {
filter: brightness(1.08);
}
.assistente-composer__enviar:disabled {
background: transparent;
color: var(--label-quaternary);
cursor: default;
filter: none;
}
/* Rodapé com o consumo da conversa; roteamento fica no servidor. */
.assistente-composer__rodape {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 28px;
}
.assistente-composer__consumo {
font-size: 11.5px;
/* Custo e informacao funcional em 11,5px, nao metadata decorativa. O
label-primary passa AA nos dois temas; o secondary translucido reprovava
no fundo real do composer (#142). */
color: var(--label-primary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.assistente-chat__barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--separator);
}
.assistente-chat__barra-grupo {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.assistente-chat__acao {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--separator-opaque);
border-radius: 8px;
background: var(--control-background);
color: var(--label-secondary);
cursor: pointer;
}
.assistente-chat__acao:hover {
background: var(--control-hover-background);
color: var(--label-primary);
}
.assistente-chat__acao .ui-icon {
width: 18px;
height: 18px;
}
/* Skills vivem na pagina do Chat, nao em dialogo: uma coluna lateral com
scrollers internos e rodape explicativo sempre visivel. */
.assistente-skills {
flex: 0 0 420px;
min-width: 0;
min-height: 0;
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
border: 1px solid var(--separator-opaque);
border-radius: 14px;
overflow: hidden;
background: var(--assistente-surface-content);
box-shadow: 0 8px 24px var(--shadow-color);
}
.assistente-skills__topo,
.assistente-skills__rodape {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--assistente-surface-bar);
}
.assistente-skills__topo {
justify-content: space-between;
border-bottom: 1px solid var(--separator);
}
.assistente-skills__topo h2 {
margin: 0;
font-size: 15px;
color: var(--label-primary);
}
.assistente-skills__topo-acoes {
display: flex;
align-items: center;
gap: 4px;
}
.assistente-skills__fechar,
.assistente-ajuda-botao {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: var(--label-primary);
cursor: pointer;
}
.assistente-skills__fechar:hover,
.assistente-ajuda-botao:hover {
background: var(--control-hover-background);
}
.assistente-skills__catalogo {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: 8px;
min-height: 0;
padding: 10px 12px;
border-bottom: 1px solid var(--separator);
background: var(--assistente-surface-bar);
}
.assistente-skills__busca {
display: flex;
gap: 4px;
align-items: center;
}
.assistente-skills__busca-campo {
width: 100%;
min-width: 0;
padding: 7px 9px;
border: 1px solid var(--separator-opaque);
border-radius: 8px;
background: var(--control-background);
color: var(--label-primary);
font: inherit;
font-size: 12px;
}
.assistente-skills__lista {
display: grid;
align-content: start;
gap: 12px;
min-height: 0;
overflow-y: auto;
}
.assistente-skills__grupo {
display: grid;
align-content: start;
gap: 5px;
}
.assistente-skills__grupo h3 {
margin: 0 0 2px;
color: var(--label-primary);
font-size: 12px;
font-weight: 650;
}
.assistente-skills__resultado {
margin: 0;
color: var(--label-secondary);
font-size: 11px;
}
.assistente-skills__item,
.assistente-skills__nova {
flex: 0 0 auto;
display: grid;
gap: 2px;
padding: 7px 10px;
border: 1px solid var(--separator-opaque);
border-radius: 8px;
background: var(--control-background);
color: var(--label-primary);
font: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.assistente-skills__item span {
color: var(--label-secondary);
font-size: 11px;
}
.assistente-skills__item strong {
display: flex;
align-items: center;
gap: 6px;
overflow-wrap: anywhere;
}
.assistente-skills__item .ui-icon,
.assistente-instrucoes__fonte .ui-icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
.assistente-skills__item:hover,
.assistente-skills__nova:hover {
background: var(--control-hover-background);
}
.assistente-skills :is(button, input):focus-visible,
.assistente-modal :is(button, textarea):focus-visible,
.assistente-skill-proposta :is(button, summary):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.assistente-skills__nova {
place-items: center;
border-style: dashed;
color: var(--label-primary);
}
.assistente-skills__painel {
min-height: 0;
padding: 12px 14px;
overflow: hidden;
}
.assistente-skills__painel > .assistente-instrucoes__painel {
height: 100%;
}
.assistente-skills__vazio {
margin: auto;
padding: 24px 14px;
color: var(--label-primary);
font-size: 13px;
line-height: 1.5;
text-align: center;
}
.assistente-skills__rodape {
align-items: flex-start;
border-top: 1px solid var(--separator);
}
.assistente-skills__rodape p {
flex: 1;
margin: 0;
color: var(--label-primary);
font-size: 12px;
line-height: 1.45;
}
.assistente-ajuda {
color: var(--label-primary);
}
.assistente-ajuda .assistente-md p,
.assistente-ajuda .assistente-md li {
color: var(--label-primary);
}
/* Modal do Chat (historico e instrucoes): backdrop proprio, caixa central. */
.assistente-modal {
position: fixed;
inset: 0;
/* Abaixo dos dropdown-layers (9998/9999) e acima de todo o resto — e o
mesmo scrim do .dropdown-dismiss-layer, o padrao de modal leve da casa. */
z-index: var(--z-dialog);
display: grid;
place-items: center;
padding: var(--space-6);
/* `--system-black` cru aqui e deliberado, contra a regra 13. O scrim nao tem
alias semantico no sistema, e `--system-black` e a UNICA entrada da paleta
sem contraparte no tema escuro (definida uma vez, sem override) — nao ha
troca de tema para centralizar, que e o que a regra protege. E o mesmo
valor e a mesma expressao do `.dropdown-dismiss-layer`, o outro scrim do
portal. Criar o alias custaria uma custom property NOVA em `:root`, que
entra no getComputedStyle de TODO elemento e sujaria as 820 combinacoes da
prova por zero pixel de diferenca. Se virar alias um dia, e num card que
re-baseline a prova e converta os dois scrims juntos. */
background: color-mix(in srgb, var(--system-black) 48%, transparent);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: assistente-modal-scrim var(--duration-fast) var(--easing-standard);
}
.assistente-modal__caixa {
width: min(720px, 100%);
max-height: min(80vh, 640px);
display: flex;
flex-direction: column;
background: var(--background-primary);
border: 1px solid var(--separator-opaque);
border-radius: var(--radius-lg);
overflow: hidden;
/* Sombra em 3 camadas sobre --shadow-color, que troca por tema (0.18 no
claro / 0.28 no escuro): contato, ambiente e projecao. No escuro a
separacao vem do trio scrim 48% + borda + halo. */
box-shadow: var(--shadow-modal);
animation: assistente-modal-entrada var(--duration-fast) var(--easing-standard);
}
.assistente-modal__caixa--instrucoes {
width: 50vw;
height: 90vh;
max-height: 90vh;
}
.assistente-modal__caixa--ajuda {
width: min(680px, 100%);
}
@keyframes assistente-modal-scrim {
from { opacity: 0; }
}
@keyframes assistente-modal-entrada {
from {
opacity: 0;
transform: scale(0.97) translateY(8px);
}
}
@media (prefers-reduced-motion: reduce) {
.assistente-modal,
.assistente-modal__caixa {
animation: none;
}
}
/* Faixa do topo (e do rodapé) de todo diálogo do portal um tom abaixo do
corpo, como o painel de filtros (23/10/2026). Mora no componente: cada
diálogo herda pelo `.assistente-modal`, sem cor própria por tela. */
.assistente-modal {
--assistente-surface-bar: var(--system-gray-6);
}
.assistente-modal__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-4);
border-bottom: 1px solid var(--separator);
background: var(--assistente-surface-bar);
}
.assistente-modal__topo h2 {
margin: var(--space-0);
font-size: 15px;
font-weight: 700;
color: var(--label-primary);
}
.assistente-modal__fechar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--label-secondary);
cursor: pointer;
}
.assistente-modal__fechar:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
.assistente-modal__corpo {
padding: var(--space-4) var(--space-4) var(--space-4);
overflow-y: auto;
}
/* Altura acompanha o conteúdo (árvore recolhida não deixa área vazia) até o
limite da janela; acima disso a tabela rola por dentro. */
.categorization-rules-dialog {
width: min(1360px, 100%);
height: auto;
max-height: calc(100dvh - 48px);
}
.categorization-rules__header {
display: grid;
grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
}
.categorization-rules__header > .categorization-rules__chip {
justify-self: end;
}
.categorization-rules__legend-list dt {
margin-top: var(--space-2);
font-weight: 400;
}
.categorization-rules__body {
display: flex;
flex: 0 1 auto;
flex-direction: column;
min-height: 0;
padding: 0;
overflow: hidden;
}
/* A faixa das abas fica oculta nas duas visões; sem esta regra o `display`
abaixo vencia o [hidden] e desenhava uma segunda linha vazia no topo. */
.categorization-rules__toolbar[hidden] { display: none; }
.categorization-rules__toolbar {
display: flex;
align-items: center;
flex: none;
gap: 12px;
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
border-bottom: 1px solid var(--separator);
background: var(--assistente-surface-bar);
}
.categorization-rules__tabs {
flex: 1;
min-width: 0;
height: auto;
gap: 8px;
padding: 3px;
overflow-x: auto;
}
.categorization-rules__tabs[hidden] { display: none; }
.categorization-rules__tabs button,
.categorization-rules__action {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
gap: 7px;
min-height: 32px;
padding: 0 12px;
border: 1px solid var(--separator);
border-radius: var(--radius-sm);
background: var(--control-background);
color: var(--label-primary);
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.categorization-rules__tabs button:hover,
.categorization-rules__action:not(:disabled):hover {
background: var(--control-hover-background);
}
.categorization-rules-dialog :is(button, summary, [tabindex]):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.categorization-rules__action:disabled {
opacity: 0.4;
cursor: default;
}
.categorization-rules__panel {
display: flex;
flex: 1;
flex-direction: column;
gap: 12px;
min-height: 0;
padding: 14px 16px 16px;
overflow: hidden;
}
.categorization-rules__panel > .categorization-rules__action { align-self: flex-start; }
.categorization-rules__table-wrap {
flex: 0 1 auto;
min-height: 0;
overflow: auto;
border: 1px solid var(--table-frame-border);
border-radius: 6px;
}
.categorization-rules__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
color: var(--label-primary);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.categorization-rules__table caption {
padding: 8px 10px;
background: var(--background-primary);
color: var(--label-secondary);
text-align: left;
font-size: 11px;
}
.categorization-rules__table :is(th, td) {
min-width: 44px;
padding: 6px;
border-bottom: 1px solid var(--table-grid);
border-right: 1px solid var(--table-grid);
background: var(--table-row-background);
text-align: right;
}
.categorization-rules__table th:first-child {
position: sticky;
left: 0;
z-index: 2;
text-align: left;
}
.categorization-rules__table:not(.categorization-rules__entries) th:first-child {
width: clamp(240px, 28vw, 380px);
min-width: 240px;
}
.categorization-rules__table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--table-header-background);
color: var(--table-header-label);
white-space: normal;
overflow-wrap: anywhere;
}
.categorization-rules__table thead th:first-child { z-index: 3; }
.categorization-rules__table tbody tr:nth-child(even) > :is(th, td) {
background: var(--table-row-alternate-background);
}
.categorization-rules__table .matrix-row-heading { padding: 0; }
.categorization-rules__table .matrix-row-label { height: auto; min-height: 32px; }
.categorization-rules__table .matrix-row-label > span:not(.matrix-tree-spacer) {
flex: 1;
min-width: 0;
line-height: 1.4;
overflow-wrap: anywhere;
}
/* A árvore de regras segue a tabela dos lançamentos (20/10/2026): fundo
listrado claro, sem o cinza de destaque e sem negrito na regra. A linha-raiz
se marca pelo rótulo em negrito e pelo botão de recolher. */
.categorization-rules__table tbody tr.is-root-row > th {
font-weight: 700;
}
.categorization-rules__disclosure {
display: grid;
place-items: center;
flex: 0 0 26px;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--label-secondary);
cursor: pointer;
}
.categorization-rules__disclosure:hover { background: var(--control-hover-background); }
.categorization-rules__rule-popover {
position: fixed;
z-index: 4;
width: min(520px, calc(100vw - 32px));
max-height: calc(100dvh - 32px);
overflow: auto;
box-sizing: border-box;
padding: 12px 16px;
border: 1px solid var(--separator-opaque);
border-radius: var(--radius-md);
background: var(--background-primary);
box-shadow: var(--standard-shadow);
text-align: left;
font-weight: 400;
line-height: 2;
}
.categorization-rules__rule-popover-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.categorization-rules__rule-popover p { margin: 0; }
.categorization-rules__combinations ol { display: grid; gap: 8px; margin: 0; padding-left: 24px; }
.categorization-rules__combinations li { white-space: pre-wrap; }
.categorization-rules__combinations li::marker { color: var(--label-tertiary); font-size: 10px; }
/* Árvore + regra (pedido do dono): a coluna da árvore tem largura fixa e a da
regra ocupa o resto. A regra é texto corrido numa fonte só; valores ganham
apenas cor e peso, sem caixa nem hover (nada parece botão). */
.categorization-rules__tree { table-layout: fixed; width: 100%; }
.categorization-rules__tree .categorization-rules__col-tree { width: 340px; }
.categorization-rules__tree th:first-child { width: 340px; min-width: 340px; }
.categorization-rules__tree tr > :last-child { font-weight: 400; text-align: left; }
.categorization-rules__rule-cell {
padding: 6px 12px;
vertical-align: middle;
font-family: var(--font-sans);
font-size: 12px;
line-height: 1.5;
color: var(--label-primary);
}
.categorization-rules__rule-line { margin: 0; overflow-wrap: break-word; }
.categorization-rules__rule-line + .categorization-rules__rule-line { margin-top: 2px; }
.categorization-rules__rule-line--muted { color: var(--label-secondary); }
.categorization-rules__rule-line > * { font: inherit; }
/* Coluna do ERP em azul (o mesmo do chip do ERP, sem fundo) e operação em
roxo: cada parte da regra com cor própria; a legenda está no (i) do topo. */
.categorization-rules__field { color: var(--finance-accent); font-weight: 600; }
.categorization-rules__exclusions-note { margin: 8px 0 0; color: var(--label-secondary); font-size: 12px; line-height: 1.5; }
.categorization-rules__operator { color: var(--rule-operator-label); font-weight: 600; }
/* Texto que a regra confere (20/10/2026, Arthur): o mesmo chip mono para
tudo que é nome; azul quando é texto escrito no ERP (Centro de Negócio,
Classe…), cinza neutro quando é nome de categoria do BI. A explicação
(condição, campo, operador) fica em texto corrido, sem chip. */
.categorization-rules__value {
--rule-chip-background: var(--fill-tertiary);
--rule-chip-border: var(--separator);
padding: 0 var(--space-1);
border: 1px solid var(--rule-chip-border);
border-radius: var(--radius-sm);
background: var(--rule-chip-background);
color: var(--rule-value-label);
font-family: var(--font-mono);
font-size: 0.92em;
font-weight: 500;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.categorization-rules__value.categorization-rules__erp {
--rule-chip-background: var(--rule-value-background);
--rule-chip-border: color-mix(in srgb, var(--finance-accent) 45%, transparent);
}
/* No popover, cada valor é um chip inteiro: nunca quebra no meio do nome. */
.categorization-rules__rule-popover .categorization-rules__value {
display: inline-block;
margin: 2px 0;
padding: 2px var(--space-1);
line-height: 1.4;
white-space: nowrap;
vertical-align: middle;
}
.categorization-rules__chip {
height: auto;
min-height: 20px;
padding: 1px 6px;
border-radius: 6px;
cursor: default;
font-size: 11px;
line-height: 1.5;
white-space: normal;
}
.categorization-rules__chip:hover { background: var(--control-background); color: var(--label-secondary); }
.categorization-rules__alert {
position: relative;
flex: none;
width: 32px;
height: 32px;
margin-left: auto;
}
.categorization-rules__alert { --icon-button-label: var(--status-warning-label); color: var(--status-warning-label); }
.categorization-rules__alert.is-active { color: var(--status-warning-label); background: var(--control-hover-background); }
.categorization-rules__alert[aria-disabled="true"] { cursor: default; }
.categorization-rules__alert[aria-disabled="true"] > .ui-icon { opacity: 0.36; }
.categorization-rules__condition-tooltip {
position: fixed;
right: auto;
max-width: min(460px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
box-sizing: border-box;
overflow: auto;
}
.categorization-rules__exclusions {
flex: none;
max-height: 35%;
overflow: auto;
padding: 10px 12px;
border: 1px solid var(--separator);
border-radius: 6px;
background: var(--background-secondary);
color: var(--label-secondary);
font-size: 12px;
}
.categorization-rules__exclusions summary { cursor: pointer; color: var(--label-primary); font-weight: 600; }
.categorization-rules__exclusions ul { display: grid; gap: 10px; margin: 12px 0 0; padding-left: 18px; }
.categorization-rules__exclusions li > span { display: block; margin-top: 2px; }
/* Aviso de ação em cartão amarelo (texto amarelo escurecido no claro para
passar de 4,5:1; no escuro o amarelo do tema já contrasta). */
.categorization-rules__hint {
display: flex;
flex: none;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--status-warning-border);
border-radius: var(--radius-md);
background: var(--status-warning-fill);
color: var(--status-warning-label);
font-size: 12px;
font-weight: 600;
line-height: 1.5;
}
/* (i) vermelho de provável erro de cadastro, ao lado do chip do campo. */
.categorization-rules__typo-cell { white-space: nowrap; }
.categorization-rules__typo-cell > .categorization-rules__value { white-space: normal; }
.categorization-rules__typo { margin-left: var(--space-1); vertical-align: middle; }
.categorization-rules__typo .help-popover__button { --icon-button-label: var(--status-warning-label); width: 22px; height: 22px; color: var(--status-warning-label); }
.categorization-rules__typo .help-popover__button .ui-icon { color: var(--status-warning-label); }
/* O retorno de "marcar como vistos" só aparece quando tem texto. */
.categorization-rules__hint:empty { display: none; }
.categorization-rules__entries thead th { white-space: nowrap; overflow-wrap: normal; }
.categorization-rules__hint > .ui-icon { flex: none; width: 16px; height: 16px; font-size: 16px; background: currentColor; }
.categorization-rules__entries :is(th, td) { text-align: left; font-weight: 400; }
.categorization-rules__entries th:first-child { min-width: 80px; }
.categorization-rules__entries :is(th, td):nth-child(5) { text-align: right; white-space: nowrap; }
.categorization-rules__entries :is(th, td):nth-child(n+6) { min-width: 160px; }
.categorization-rules__entries td .categorization-rules__chip { margin: 2px; }
.categorization-rules__new { border-color: var(--finance-accent); color: var(--finance-accent); }
.categorization-rules__pagination { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; }
.categorization-rules__pagination > span { color: var(--label-secondary); font-size: 11px; }
@media (max-width: 720px) {
.categorization-rules-modal { padding: 8px; }
.categorization-rules-dialog { width: 100%; height: auto; max-height: 92vh; }
.categorization-rules__header { grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr) auto auto; }
.categorization-rules__header > .categorization-rules__chip { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
.categorization-rules__toolbar { padding: 10px; }
.categorization-rules__panel { padding: 12px 10px; }
}
.assistente-modal__caixa--instrucoes .assistente-modal__corpo {
flex: 1;
min-height: 0;
overflow: hidden;
background: var(--assistente-surface-content);
}
.assistente-modal__vazio {
margin: var(--space-6) var(--space-0);
text-align: center;
color: var(--label-tertiary);
font-size: 13px;
}
/* Rodape padronizado: zona esquerda (destrutivas/secundarias) e zona direita
(fluxo principal). Editar/Salvar ficam SEMPRE no ultimo canto direito. */
.assistente-modal__rodape {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--separator);
}
.assistente-modal__caixa--instrucoes .assistente-modal__rodape {
background: var(--assistente-surface-bar);
margin-inline: calc(var(--space-4) * -1);
margin-bottom: calc(var(--space-3) * -1);
padding: var(--space-3) var(--space-4);
}
.assistente-modal__rodape-zona {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.assistente-modal__rodape-nota {
font-size: 12px;
color: var(--label-tertiary);
}
.assistente-modal__botao {
font: inherit;
font-size: 12.5px;
font-weight: 650;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid var(--separator-opaque);
background: var(--control-background);
color: var(--label-primary);
cursor: pointer;
}
.assistente-modal__botao:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge):not(:disabled) {
background: var(--control-hover-background);
}
.assistente-modal__botao--primario {
background: var(--accent);
border-color: var(--accent);
color: var(--label-inverse);
}
.assistente-modal__botao--primario:hover:not(:active):not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
background: var(--accent);
box-shadow: inset 0 0 0 var(--space-12) var(--fill-quaternary);
}
.assistente-modal__botao--perigo {
color: var(--summary-negative-label);
}
/* Lista do historico de conversas. */
.assistente-historico {
display: flex;
flex-direction: column;
gap: 6px;
}
.assistente-historico__item {
display: grid;
grid-template-columns: 84px 1fr auto;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
font: inherit;
font-size: 13px;
padding: 10px 12px;
border: 1px solid var(--separator);
border-radius: 10px;
background: var(--control-background);
color: var(--label-primary);
cursor: pointer;
}
.assistente-historico__item:hover {
background: var(--control-hover-background);
}
.assistente-historico__item.is-atual {
border-color: var(--brand-accent);
}
.assistente-historico__item small {
color: var(--label-tertiary);
font-size: 11px;
white-space: nowrap;
}
.assistente-historico__item span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Instrucoes da IA: abas de arquivo, visao Markdown e editor cru. */
.assistente-instrucoes__abas {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.assistente-instrucoes {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
height: 100%;
min-height: 0;
}
.assistente-instrucoes__painel {
display: flex;
flex-direction: column;
min-height: 0;
}
.assistente-instrucoes__aba {
display: inline-flex;
align-items: center;
gap: 6px;
font: inherit;
font-size: 12px;
font-weight: 600;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid var(--separator-opaque);
background: var(--control-background);
color: var(--label-secondary);
cursor: pointer;
}
/* Badge "Somente leitura": pill vazada sobre currentColor — herda a cor do estado da aba
(secundario em repouso, label-inverse quando ativa), entao funciona nos dois
temas e nos dois estados sem regra extra. */
.assistente-instrucoes__aba-badge {
font-size: 9px;
font-weight: 700;
white-space: nowrap;
padding: 1px var(--space-2);
border-radius: var(--radius-pill);
border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
opacity: 0.85;
}
.assistente-instrucoes__aba.is-ativa {
/* O par "control-selected + label-primary" mede 4,13 claro e 3,08 escuro
(reprova AA). Este e o par ja provado na bolha do usuario e no botao
primario: 4,57 claro e 6,82 escuro. (Sem nome de token com asterisco
aqui dentro: um asterisco-barra fecharia este comentario no meio e ja
engoliu o background desta regra uma vez.) */
background: var(--brand-accent);
color: var(--label-inverse);
border-color: var(--brand-accent);
}
.assistente-instrucoes__fonte {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 10px;
font-size: 12px;
color: var(--label-tertiary);
}
.assistente-instrucoes__visao {
flex: 1;
border: 1px solid var(--separator);
border-radius: 10px;
padding: 12px 14px;
background: var(--assistente-surface-field);
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.assistente-instrucoes__editor {
flex: 1;
width: 100%;
height: 100%;
min-height: 0;
resize: none;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.5;
padding: 12px 14px;
border: 1px solid var(--separator-opaque);
border-radius: 10px;
background: var(--assistente-surface-field);
color: var(--label-primary);
overflow-y: auto;
overflow-x: hidden;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.assistente-instrucoes__visao .assistente-md {
max-width: 72ch;
margin-inline: auto;
}
.assistente-instrucoes__visao .assistente-md p,
.assistente-instrucoes__visao .assistente-md li {
color: var(--label-primary);
}
/* Aba "+ Nova skill": vazada, para nao competir com as abas de conteudo. */
.assistente-instrucoes__aba--nova {
border-style: dashed;
color: var(--label-tertiary);
}
.assistente-instrucoes__campos {
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.assistente-instrucoes__campo {
display: grid;
gap: 4px;
color: var(--label-primary);
font-size: 12px;
}
.assistente-instrucoes__campo input {
width: 100%;
min-width: 0;
padding: 7px 9px;
border: 1px solid var(--separator-opaque);
border-radius: 8px;
background: var(--control-background);
color: var(--label-primary);
font: inherit;
}
/* Campo de titulo (skill nova / editar skill). */
.assistente-instrucoes__titulo {
width: 100%;
margin-bottom: 10px;
padding: 8px 12px;
border: 1px solid var(--separator-opaque);
border-radius: 8px;
background: var(--control-background);
color: var(--label-primary);
font: inherit;
font-size: 14px;
font-weight: 650;
}
.assistente-instrucoes__titulo:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 1px;
}
/* Faixa de confirmacao de exclusao: substitui o rodape enquanto ativa. */
.assistente-modal__confirma {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--status-negative-fill);
font-size: 12.5px;
color: var(--label-primary);
}
.assistente-modal__confirma span {
margin-right: auto;
}
/* Visao Markdown minima: tipografia compacta, sem margens default. */
.assistente-md h3,
.assistente-md h4,
.assistente-md h5,
.assistente-md h6,
.assistente-md blockquote,
.assistente-md p,
.assistente-md ul,
.assistente-md ol,
.assistente-md .assistente-md__tabela,
.assistente-md pre {
margin: 0 0 8px;
}
.assistente-md h3 {
font-size: 14px;
font-weight: 700;
color: var(--label-primary);
}
.assistente-md h4,
.assistente-md h5,
.assistente-md h6 {
font-size: 13px;
font-weight: 650;
color: var(--label-primary);
}
.assistente-md p,
.assistente-md li {
font-size: 13px;
line-height: 1.6;
color: var(--label-secondary);
overflow-wrap: anywhere;
}
.assistente-md :is(h3, h4, h5, h6):not(:first-child) {
margin-top: 16px;
}
.assistente-md ul,
.assistente-md ol {
padding-left: 18px;
}
.assistente-md li > :is(ul, ol) {
margin-block: 4px;
}
.assistente-md blockquote {
padding: 6px 10px;
border-left: 3px solid var(--separator-opaque);
color: var(--label-primary);
font-size: 13px;
line-height: 1.6;
}
.assistente-md hr {
margin-block: 16px;
border: 0;
border-top: 1px solid var(--separator);
}
.assistente-md__insercao {
display: inline;
padding: 2px 6px;
border: 1px solid var(--separator-opaque);
border-radius: 6px;
background: var(--control-hover-background);
color: var(--label-primary);
font-family: inherit;
font-size: 11px;
font-weight: 550;
line-height: 1.8;
box-decoration-break: clone;
}
/* Tabelas do #133 (ranking com R$ e variacao): o wrap rola horizontal para a
tabela nunca estourar o balao do chat nem a coluna do modal. */
.assistente-md .assistente-md__tabela {
--table-surface-inset-block-end: var(--space-2);
overflow-x: auto;
}
.assistente-md table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.assistente-md th,
.assistente-md td {
border: 1px solid var(--separator);
padding: 4px 8px;
text-align: left;
vertical-align: top;
color: var(--label-primary);
}
.assistente-md th {
font-weight: 700;
background: var(--table-row-header-background);
color: var(--table-row-header-label);
}
.assistente-md tbody tr:nth-child(odd) {
background: var(--table-row-background);
}
.assistente-md tbody tr:nth-child(even) {
background: var(--table-row-alternate-background);
}
.assistente-md [data-align="center"] {
text-align: center;
}
.assistente-md [data-align="right"] {
text-align: right;
}
.assistente-md code {
font-family: var(--font-mono);
font-size: 11.5px;
background: var(--background-grouped-tertiary);
border-radius: 4px;
padding: 1px 4px;
}
.assistente-md pre {
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.5;
background: var(--background-grouped-tertiary);
border-radius: 8px;
padding: 10px 12px;
overflow-x: auto;
white-space: pre;
color: var(--label-primary);
}
.assistente-skill-proposta {
display: grid;
gap: 10px;
margin-top: 12px;
padding: 14px;
border: 1px solid var(--separator-opaque);
border-radius: 10px;
background: var(--assistente-surface-field);
color: var(--label-primary);
}
.assistente-skill-proposta h3,
.assistente-skill-proposta p {
margin: 0;
font-size: 13px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.assistente-skill-proposta__slug {
color: var(--label-secondary);
font-variant-numeric: tabular-nums;
}
.assistente-skill-proposta summary {
padding-block: 4px;
font-size: 12px;
cursor: pointer;
}
.assistente-skill-proposta summary:hover {
color: var(--brand-accent);
}
.assistente-skill-proposta details[open] summary {
margin-bottom: 8px;
}
.assistente-skill-proposta > button {
justify-self: start;
}
/* Degrau 720: mensagem ocupa a largura; no rodape do composer o consumo desce
para uma linha propria e os chips ficam a direita. */
@media (min-width: 2000px) {
.assistente-skills {
flex-basis: 460px;
}
}
@media (max-width: 1439px) {
.assistente-skills {
flex-basis: 380px;
}
}
@media (max-width: 1180px) {
.assistente-modal__caixa--instrucoes {
width: 68vw;
}
.assistente-skills {
flex-basis: 340px;
}
}
@media (max-width: 900px) {
.assistente-modal__caixa--instrucoes {
width: 86vw;
}
.assistente-chat-layout {
position: relative;
}
.assistente-skills {
position: absolute;
z-index: 40;
inset: 0 0 0 auto;
width: min(420px, 100%);
}
}
@media (max-width: 720px) {
.assistente-chat__mensagem {
max-width: 100%;
}
.assistente-composer__rodape {
flex-wrap: wrap;
}
.assistente-composer__consumo {
order: 2;
flex-basis: 100%;
}
.assistente-modal__caixa--instrucoes {
width: calc(100vw - 48px);
}
}
/* Degrau 520: modal ganha respiro e o rodape padronizado pode quebrar. */
@media (max-width: 520px) {
.assistente-modal {
padding: var(--space-3);
}
.assistente-modal__caixa {
max-height: min(92vh, 640px);
}
.assistente-modal__caixa--instrucoes {
width: calc(100vw - 24px);
height: 92vh;
max-height: 92vh;
}
.assistente-skills {
width: 100%;
}
.assistente-modal__rodape {
flex-wrap: wrap;
}
}
/* ==========================================================================
CORES QUE VEM DEPOIS DA FORMA - KPI, engenharia, calendario e esqueleto
========================================================================== */
/* Cor de componentes cuja FORMA esta declarada acima, nesta mesma faixa. Nao e
organizacao: cada regra daqui empata em especificidade com a regra de forma e
so vence por vir DEPOIS dela. Os pisos medidos nesta leva com
`scripts/prova-visual/cascata.mjs` estao todos em `ENGENHARIA` -
`.engineering-project small`, `.engineering-kpi`,
`.engineering-progress-ring::before`, `.engineering-stacked-bar`,
`.engineering-table`, `.engineering-table th/td` e
`.engineering-table thead th`.
Vinham de `APLICACAO SEMANTICA DOS TEMAS POR COMPONENTE`, dissolvida na leva
5 do #10, e ficaram nesta faixa porque a forma de cada componente esta aqui.
As tres regras de esqueleto do fim NAO tem piso medido - o esqueleto so
existe entre o clique e a resposta, e o `cascata.mjs` nao o monta. Ficam onde
estao pelo criterio de sempre: o que a sonda nao alcanca nao se mexe. */
.module-heading p,
.dashboard-kpi > span,
.dashboard-kpi > small,
.engineering-bar-row > span:first-child,
.engineering-project small,
.development-state {
color: var(--label-secondary);
}
.engineering-bar-row:not(.engineering-bar-row--header) > span:first-child {
color: var(--label-primary);
}
.dashboard-kpi,
.dashboard-panel,
.development-state {
border-color: var(--separator);
background: var(--background-primary);
}
.engineering-progress-ring::before {
background: var(--background-primary);
}
.engineering-stacked-bar {
background: var(--background-secondary);
}
.engineering-calendar__navigation {
color: var(--label-primary);
}
.engineering-calendar__days button { color: var(--system-gray); }
.engineering-calendar__days button.is-in-range { color: var(--label-primary); }
.engineering-calendar__days button.is-range-edge { color: var(--system-white); }
.engineering-calendar__navigation:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-range-edge) {
background: var(--control-hover-background);
}
.engineering-table {
background: var(--system-gray-5);
color: var(--label-primary);
}
.engineering-table th,
.engineering-table td,
.engineering-table tbody tr:nth-child(even) th,
.engineering-table tbody tr:nth-child(even) td,
.engineering-table tbody tr:nth-child(odd) th,
.engineering-table tbody tr:nth-child(odd) td {
background: var(--system-gray-6);
}
.engineering-table thead th {
background: var(--table-header-background);
color: var(--table-header-label);
}
.report-skeleton__card {
background: var(--background-secondary);
}
/* `.module-heading__meta-skeleton` saiu dos dois grupos abaixo no #12 (item 2):
no primeiro ela era letra morta — perde fundo e borda para
`.module-heading__meta span` (0,1,1) — e no segundo o gradiente de
`--background-primary` era invisivel sobre a propria pilula
`--background-primary`. O brilho correto dela mora na regra propria, na
secao do cabecalho (`.module-heading__meta-skeleton::after`). */
.report-skeleton__visual,
.report-skeleton__table,
.report-skeleton__shine,
.module-skeleton__shine {
border-color: var(--separator);
background: var(--background-secondary);
}
.report-skeleton__shine::after,
.module-skeleton__shine::after {
background: linear-gradient(90deg, var(--system-clear), color-mix(in srgb, var(--background-primary) 72%, var(--system-clear)), var(--system-clear));
}
/* ==========================================================================
INTERIOR DAS TABELAS FINANCEIRAS - moldura, grade, arvore e categorizacao
Leva 4 do #10: aqui estavam DUAS secoes, `AJUSTES DE UX` e `CORRECOES
FINAIS`, e agora ha uma so. O esqueleto de carregamento e os dois tokens da
matricial, que moravam na segunda, sairam para `CARREGAMENTO` e para
`TEMA E CORES`.
POR QUE ESTA SECAO AINDA EXISTE, e o que a proxima leva precisa saber:
quase tudo que sobrou aqui so vence por VIR DEPOIS de `APLICACAO SEMANTICA
DOS TEMAS POR COMPONENTE`. Aquela camada redeclara fundo e cor de
`.report-table`, `.report-table-wrap` e das celulas da matricial com a MESMA
especificidade destas regras (linhas ~5300-5560). Mover qualquer uma delas
para a secao do seu componente - que fica ANTES - e rebaixa-la em silencio.
Medido com o CSSOM do navegador, regra a regra, sobre a celula real.
Ou seja: o desbloqueio desta secao nao esta nela, esta em `APLICACAO
SEMANTICA`. Enquanto aquela camada existir, isto aqui e o fim da cascata das
tabelas financeiras e e onde estas regras tem que morar. Subir a
especificidade para "poder mover" seria empilhar override para nao encarar a
camada - exatamente o que o CLAUDE.md proibe.
========================================================================== */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .report-table-wrap:not(.financial-result-table),
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table {
background: var(--table-surface-background);
}
:is(
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table,
.financial-result-table__table
) {
border-collapse: separate;
border-spacing: 0;
}
:is(
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table,
.financial-result-table__table
) :is(th, td) {
border: 0;
border-right: 1px solid var(--table-grid);
border-bottom: 1px solid var(--table-grid);
}
:is(
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table,
.financial-result-table__table
) tr > :last-child {
border-right: 0;
}
:is(
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table,
.financial-result-table__table
) tbody tr:last-child > * {
border-bottom: 0;
}
/* Cabecalho e coluna hierarquica: a lista foi partida em duas porque as marcas
de prioridade nao eram necessarias nas duas metades. Aqui nao ha concorrente
com marca, e esta regra ja e a ultima entre as de mesma especificidade. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table thead th,
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody th {
background: var(--table-emphasis-background);
color: var(--table-total-label);
}
/* Coluna de total do corpo. As marcas SAIRAM (residuo medido): o concorrente
que as justificava - a regra `thead th.is-total-column, tbody ... td.is-total-
column` da secao MATRIZ FINANCEIRA - teve a propria marca retirada na leva de
dedup (ver L~3287 e L~3527). Sem marca em ninguem, esta regra vence por ORDEM
(mesma especificidade (0,4,3), vem depois): dropar as duas nao muda o `color`
(17,17,17) nem o `background` (--table-emphasis-background, 199,199,204) em
nenhum combo regime x tema. Medido por propriedade computada. NAO reintroduzir
a marca: se parecer que precisa, a base ou o emphasis e que devem mudar. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr:not(.is-cash-total) td.is-total-column {
background: var(--table-emphasis-background);
color: var(--table-total-label);
}
/* O `background` SAIU daqui no #123, e era ele que matava o zebrado da matriz
principal. A regra tem especificidade (0,4,3) e e a ultima a falar sobre a
celula de valor: pintava TODAS com o mesmo tom, entao as regras de faixa
(`tr.is-dark/is-light td`, (0,3,3)) escreviam para a parede. O `color` fica -
ele nao tem concorrente de faixa e nao e disso que se trata.
Onde o tom uniforme antigo continua: `--table-cell-background` e o valor de
`--table-row-alternate-background`, ou seja, a faixa forte segue nele. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr:not(.is-cash-total) td:not(.is-total-column) {
color: var(--label-primary);
}
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-root-row > * {
border-top-color: var(--table-surface-background);
}
/* A linha de caixa some as marcas: com as duplicatas da arvore apagadas, o
unico concorrente com marca era a propria regra de cabecalho acima, que
agora nao tem. Esta regra ja ganha por especificidade (a linha entra no
seletor) e por vir depois. */
:is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash) .financial-matrix__table tbody tr.is-cash-total > * {
background: var(--table-header-background);
background-clip: padding-box;
color: var(--table-header-label);
}
.financial-matrix-toolbar__category button[data-category-mode="uncategorized"]:is(.is-selected, [aria-pressed="true"], [aria-selected="true"]) {
border-color: var(--separator);
background: var(--control-hover-background);
color: var(--label-primary);
}
.financial-matrix-toolbar__category button[data-category-mode="uncategorized"] > .ui-icon { color: var(--status-warning-label); }
.financial-matrix-toolbar__category button[data-category-mode="uncategorized"]:not([aria-disabled="true"]):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-selected, [aria-pressed="true"], [aria-selected="true"]) {
background: var(--control-hover-background);
}
/* Estados interativos finais: arvore, visibilidade e categorizacao. */
.report-table-wrap.financial-matrix,
.report-table-wrap.financial-result-table {
border: 2px solid var(--table-frame-border);
}
.report-table-wrap.financial-matrix {
border-radius: var(--radius-sm);
}
.financial-matrix-toolbar + .report-table-wrap.financial-matrix { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Dos QUATRO blocos de arvore que existiam aqui sobrou UMA declaracao. Todo
`.matrix-tree-toggle` do app vive dentro de `.financial-matrix__table` (0
fora, medido nas duas matrizes), entao o bloco da arvore mais abaixo nesta
secao - que inclui a tabela e a linha no seletor - vencia TODAS as outras
declaracoes por especificidade, antes mesmo de qualquer marca. Cor, fundo,
borda e `cursor` daqui nunca chegaram a pintar pixel nenhum; foram apagadas,
nao movidas.
A `transition` fica, e fica NESTE PONTO DO ARQUIVO: ela empata em
especificidade com a declaracao de `transition` do bloco da arvore que a leva
5 mandou para o fim de MATRIZ FINANCEIRA (L3208, antes em `APLICACAO
SEMANTICA`) e so ganha por vir depois. Subir daqui a troca
por uma transicao de 150ms sem `filter`, e o brilho do hover deixa de ser
animado. O `outline: none` que acompanhava saiu por outro motivo: a regra
generica `.matrix-tree-toggle:hover, :focus-visible` ja declara o MESMO
valor sobre um superconjunto destes elementos. */
:is(.financial-matrix--financial, .financial-matrix--matricial) .matrix-tree-toggle {
transition: filter var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
/* O respiro entre grupos raiz pertence somente as demonstracoes DFC. */
.financial-matrix--financial:not(.financial-matrix--dfc) .financial-matrix__table tbody tr.is-root-row > * {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--table-grid);
}
.financial-matrix--dfc .financial-matrix__table tbody tr.is-root-row:not(:first-child) > * {
border-top: 10px solid var(--table-group-gap);
}
.financial-matrix--dfc .financial-matrix__table tbody tr.is-root-row:first-child > * {
border-top: 0;
}
/* O seletor de origem compartilha a superficie dos controles da topbar. */
.topbar :is(.source-switcher select, .source-switcher__trigger, .status-pill) {
border-color: var(--separator);
background: color-mix(in srgb, var(--navigation-selection) 55%, var(--system-clear));
color: var(--navigation-label);
box-shadow: none;
}
.topbar :is(.source-switcher select, .source-switcher__trigger, .status-pill):hover,
.topbar :is(.source-switcher select, .source-switcher__trigger, .status-pill):focus-visible {
filter: brightness(0.92);
}
/* Os dois sao identificador: (1,0,0) ganha de qualquer seletor de classe do
arquivo sem precisar de marca. */
#segmentSelect,
#accountMenuButton {
border-color: var(--separator);
background: color-mix(in srgb, var(--navigation-selection) 55%, var(--system-clear));
color: var(--navigation-label);
cursor: pointer;
}
/* ARVORE DE EXPANSAO. Este bloco carregava 24 marcas de prioridade, e elas
existiam para vencer uma copia dos mesmos seletores que ficava logo acima,
na antiga `AJUSTES DE UX`. Apagada a copia, sobrou so concorrente de
especificidade MENOR - o mais forte deles e
`.report-table tbody tr.is-light .matrix-tree-toggle` (0,3,2), contra os
(0,4,2) daqui. As marcas cairam todas; quem decide agora e a especificidade,
que e o que estas regras sempre quiseram dizer.
Duas coisas foram apagadas junto, e nao por serem redundantes de estilo:
- `content: none` nos `::before`. Pseudo-elemento sem `content` declarado ja
nao gera caixa; a declaracao dizia o que o navegador ja faria sozinho.
- O par `:nth-child(odd)` / `:nth-child(even)` do estado expandido, que
repetia os mesmos valores do bloco anterior. Ele existia contra uma regra
de paridade que pintasse o botao - e nao existe nenhuma no arquivo: a
paridade das linhas pinta CELULA (`tr.is-dark td`), nunca o controle. */
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle {
appearance: none;
cursor: pointer;
border-color: var(--table-tree-control-label);
background: var(--table-tree-control-background);
color: var(--table-tree-control-label);
-webkit-text-fill-color: var(--table-tree-control-label);
font-size: 12px;
font-weight: 600;
line-height: 1;
opacity: 1;
}
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle:hover,
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle:focus-visible {
border-color: var(--table-tree-control-label);
background: var(--table-tree-control-background);
color: var(--table-tree-control-label);
-webkit-text-fill-color: var(--table-tree-control-label);
filter: brightness(0.78);
}
/* O JS marca o estado expandido em tres lugares (classe na linha, classe no
botao e `aria-expanded`), entao os tres seletores existem de verdade. */
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr.is-expanded .matrix-tree-toggle,
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle.is-expanded,
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle[aria-expanded="true"] {
border-color: var(--table-tree-control-label);
background: var(--table-tree-control-label);
color: var(--table-tree-control-background);
-webkit-text-fill-color: var(--table-tree-control-background);
}
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr.is-expanded .matrix-tree-toggle:hover,
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle.is-expanded:hover,
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle[aria-expanded="true"]:hover,
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr.is-expanded .matrix-tree-toggle:focus-visible,
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle.is-expanded:focus-visible,
:is(.financial-matrix-visual:is(.financial-matrix--financial, .financial-matrix--matricial) .financial-matrix__table, .categorization-rules__table) tbody tr .matrix-tree-toggle[aria-expanded="true"]:focus-visible {
border-color: var(--table-tree-control-label);
background: var(--table-tree-control-label);
color: var(--table-tree-control-background);
-webkit-text-fill-color: var(--table-tree-control-background);
filter: brightness(0.86);
}
/* MATRIZES OPERACIONAIS. Os dois tokens que abriam este bloco subiram para
`TEMA E CORES`; aqui ficou so o uso.
As marcas de `color` e de `-webkit-text-fill-color` FICAM. A de `background`
SAIU no #123, e o motivo esta abaixo. O resto do racional segue valendo:
- As regras de faixa da matricial (`tr.is-dark/is-light`, `thead th`) tem
especificidade 0,3,3, maior que estas (0,3,1/0,3,2). Sem as marcas, a faixa
vence e vaza a sua cor sobre a celula.
- `background` (#123): "a faixa vence" era exatamente o que se QUERIA e nao se
percebeu. Esta marca achatava toda celula da matricial num tom unico, e com
isso matava as duas coisas de uma vez: o zebrado das linhas e a cor propria
da primeira coluna. O fundo volta a ser decidido por quem tem o assunto - a
faixa para a celula de valor, o par `--table-row-header-*` para o `th`. O
tom uniforme antigo (`--table-cell-background`) continua vivo onde deve:
e o valor de `--table-row-alternate-background`, a faixa forte.
- `color`: no CLARO o `color` computado do texto cai de preto puro (0,0,0)
para `--label-primary` (17,17,17). O texto pintado ate segue igual (quem
pinta e o `-webkit-text-fill-color`), MAS a nao-regressao deste repo e por
propriedade COMPUTADA, e tirar a marca de `color` mexe em `color` e em todos
os derivados de currentColor (border/outline/caret/text-stroke): medido 5166
diferencas so na matricial-cneg/light. Marca que vence especificidade maior
legitima nao e entulho - e a unica saida sem inventar seletor mais forte. */
.financial-matrix-visual.financial-matrix--matricial .financial-matrix__table {
border-collapse: separate;
border-spacing: 0;
background: var(--matricial-table-divider);
}
.financial-matrix-visual.financial-matrix--matricial .financial-matrix__table :is(th, td) {
border: 0;
border-right: 1px solid var(--matricial-table-divider);
border-bottom: 1px solid var(--matricial-table-divider);
color: var(--matricial-table-label) !important;
}
/* Estes dois nao sao celula, sao o conteudo dentro dela, e ali nao ha regra de
faixa concorrente - as marcas cairam. */
.financial-matrix-visual.financial-matrix--matricial .financial-matrix__table
:is(.matrix-filter-button, .matrix-row-label__text) {
color: var(--matricial-table-label);
-webkit-text-fill-color: var(--matricial-table-label);
}
.financial-matrix-visual.financial-matrix--matricial .financial-matrix__table
:is(thead th, tbody th, tbody td),
.financial-matrix-visual.financial-matrix--matricial .financial-matrix__table
:is(th, td) > :is(button, span):not(.matrix-tree-toggle) {
color: var(--matricial-table-label) !important;
-webkit-text-fill-color: var(--matricial-table-label) !important;
}
.financial-matrix-visual.financial-matrix--matricial .financial-matrix__table tr > :last-child {
border-right: 0;
}
.financial-matrix-visual.financial-matrix--matricial .financial-matrix__table tbody tr:last-child > * {
border-bottom: 0;
}
/* Modo escuro da primeira coluna, tons suaves de YoY e as celulas clicaveis.
Vinham da camada SIDEBAR CONTINUA. As tres marcas de prioridade que ficam
estao comentadas em cada bloco, com de quem elas ganham - nenhuma foi tocada
nesta leva.
Aqui existiam os dois blocos do atributo ARIA de papel com valor `button` -
um com `cursor: pointer`, outro com `filter: brightness(0.86)` no `:hover`,
os dois sobre `.detail-table-wrap .report-table tbody td`,
`.financial-matrix--matricial .financial-matrix__table :is(th, td)` e
`.summary-card`. Apagados na leva 10, e nao movidos: o atributo NAO EXISTE
no app. O `index.html` usa esse atributo com status, menu, menuitemradio,
menuitem, tablist, tab e menuitemcheckbox; o `financial-matrix.js`, com
group, switch, tooltip, dialog e menuitemcheckbox. O valor `button` nao
aparece em nenhum dos dois, e a unica ocorrencia dele no repositorio inteiro
era esta - o texto foi tirado tambem deste comentario de proposito, para que
a busca continue respondendo zero. O `mortas.mjs` mediu o atributo NU, sem
qualificar: 0 elemento em 9 paginas x 2 temas. Regra que nao alcanca elemento
nao entra na cascata de ninguem. */
/* A primeira coluna usa o tom de CABECALHO no dark mode. Antes acompanhava a
superficie das celulas, e isso so funcionava enquanto a celula tinha um tom
unico: com o zebrado de volta (#123), "acompanhar a celula" virou confundir-se
com uma das duas faixas - a coluna ficava 58,58,60, identico a linha clara, e
deixava de ancorar a leitura. Agora ela usa o mesmo par do tema claro
(`--table-row-header-*`), o que tambem deixa as duas matrizes iguais nos dois
temas. Medido: coluna 28,28,30 contra celulas de 44,44,46 e 58,58,60.
A marca do `background` segue FORA (residuo medido na leva anterior): o
concorrente `td:not(.is-total-column)` alcanca TD, e esta regra alcanca
`th:first-child` - nao disputam o mesmo elemento. */
:root[data-theme="dark"] :is(.financial-matrix--financial, .financial-matrix--dfc-cn-cash)
.financial-matrix__table tbody tr:not(.is-cash-total) > th:first-child {
background: var(--table-row-header-background);
color: var(--label-primary);
}
/* Tons suaves somente quando a matriz estiver exibindo variacao YoY. As duas
marcas FICAM (load-bearing, medido): o texto da celula ja e pintado, com marca
de prioridade, pelo sistema de cor da matriz (a regra de `text-fill-color` da
matricial em L~8104 e a cor de celula em L~8088) e pelo `.value-cell` base;
sem estas duas, a cor da variacao (verde/vermelho) perde para aquele texto.
Medido no modo YoY forcado: retirando as duas, 132 de 167 celulas de tom mudam
de cor em claro E escuro (o verde/vermelho cai para a cor de texto neutra).
Ganha por PRIORIDADE de quem pinta o texto da celula - nao daria para vencer a
marca do `text-fill-color` da matricial sem marca propria. */
.financial-matrix--yoy .value-cell.tone-positive,
.financial-matrix__table tr.is-cash-total .value-cell.tone-positive {
color: var(--summary-positive-label) !important;
}
.financial-matrix--yoy .value-cell.tone-negative,
.financial-matrix__table tr.is-cash-total .value-cell.tone-negative {
color: var(--summary-negative-label) !important;
}
/* A coluna TOTAL da tabela de resultado conserva seu fundo forte e tons
claros. A linha final da matriz usa agora a superficie neutra e os tons
semanticos normais acima. A prioridade vence a regra-base YoY. */
.financial-matrix--yoy .financial-result-table .is-total-column.tone-positive {
color: var(--total-cell-tone-positive) !important;
}
.financial-matrix--yoy .financial-result-table .is-total-column.tone-negative {
color: var(--total-cell-tone-negative) !important;
}
/* A ex-camada CONTROLE DE VISIBILIDADE DOS FILTROS foi dissolvida aqui, na leva
12 do #10. Seus destinos: `.finance-context-bar { position }` fundido na base
de CONTEXTO FINANCEIRO; o cluster `.finance-filter-visibility*` movido para o
fim de AREA DE TRABALHO E TOPO (casa do botao da topbar); `.filter-eye__icon`
fundido na sua declaracao de cor em "CORES QUE VEM DEPOIS DA FORMA". As tres
regras `.filter-eye` (base, :hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) e o par de icone) eram MORTAS - a classe
`.filter-eye` nao existe no DOM (o controle do olho e `.values-visibility-
toggle`, e o span usa `.filter-eye__icon`); confirmado em index.html,
login.html e src/app.js, e por `mortas.mjs`. Apagadas. */
/* ==========================================================================
CONFIGURACOES - Usuarios e acessos
========================================================================== */
/* Aqui vivia `.app-shell[data-module="configuracoes"]` definindo
`--module-content-background: var(--background-primary)`, que dava a
Administracao um fundo proprio (decisao de 2026-07-27, #11).
REVERTIDA em 2026-08-05 a pedido do Arthur: a Administracao passa a usar o
mesmo fundo dos demais modulos. Sem regra nenhuma no lugar - o parametro
`--module-content-background` e opcional por construcao, e nao defini-lo faz
as regras de TEMA E CORES cairem no padrao (`--system-gray-3` no escuro,
`--page-content-background` no claro), que e exatamente o dos outros modulos.
Apagar e a correcao; sobrescrever com o valor padrao seria empilhar camada.
Isto e o que o #91 nao alcancou: aquele card igualou o PAINEL, e o que
destoava era o fundo da area de conteudo, parametrizado aqui. */
.settings-page {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: 100%;
max-width: 1600px;
height: 100%;
min-height: 0;
gap: 12px;
margin: 0 auto;
padding: 14px;
color: var(--label-primary);
}
.settings-page__heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.settings-page__heading h2,
.settings-panel h3 {
margin: var(--space-0);
}
.settings-page__heading p,
.settings-panel p {
margin: var(--space-1) var(--space-0) var(--space-0);
color: var(--label-secondary);
}
.settings-panel__status {
flex: none;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--separator);
border-radius: var(--radius-pill);
background: var(--tertiary-system-background);
color: var(--label-secondary);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.settings-panel__status.is-connected {
border-color: color-mix(in srgb, var(--system-green) 38%, transparent);
background: color-mix(in srgb, var(--system-green) 12%, transparent);
color: var(--system-green);
}
.settings-panel {
min-height: 0;
overflow: hidden;
border: 1px solid var(--separator);
border-radius: var(--radius-md);
background: var(--secondary-system-background);
}
.settings-panel__header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
border-bottom: 1px solid var(--separator);
}
.settings-panel__header > .ui-icon {
color: var(--system-cyan);
}
/* Card de indicador (LobaUI.kpi): rótulo → valor → nota. A grade reserva
três linhas por card e o card herda essas linhas (subgrid): se um rótulo
quebra em duas linhas, os irmãos da mesma fileira reservam as duas e os
valores continuam alinhados. A cor do tom fica na faixa lateral. */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kpi-min, 210px)), 1fr));
gap: var(--space-2);
}
.kpi-card {
position: relative;
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: var(--kpi-row-gap, var(--space-2));
min-width: 0;
padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 5px);
border: 1px solid var(--separator);
border-radius: var(--radius-md);
background: var(--background-primary);
}
.kpi-card::before {
position: absolute;
inset: 0 auto 0 0;
width: 5px;
border-radius: var(--radius-md) 0 0 var(--radius-md);
content: "";
background: var(--system-blue);
}
.kpi-card--positive::before {
background: var(--system-green);
}
.kpi-card--negative::before {
background: var(--system-red);
}
.kpi-card__label {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-2);
color: var(--label-secondary);
font-size: 11px;
font-weight: 800;
line-height: 1.35;
text-transform: uppercase;
}
.kpi-card__value {
align-self: center;
color: var(--label-primary);
font-family: var(--font-mono);
font-size: 17px;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.kpi-card__note {
align-self: end;
color: var(--label-secondary);
font-size: 10px;
line-height: 1.3;
}
.kpi-card--compact {
row-gap: var(--space-1);
padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 5px);
}
.kpi-card--compact .kpi-card__value {
font-size: 13px;
white-space: nowrap;
}
.kpi-card--compact .kpi-card__note:empty {
display: none;
}
/* Ajuda (?) compartilhada (LobaUI.help.popover): diálogo modal ancorado
ao botão, com título, texto, definições e, quando houver, a tabela do
gráfico (variante --data, mais larga). Componente único: não redefinir por
tela. */
.help-popover__panel[hidden] {
display: none;
}
.help-popover {
display: inline-flex;
flex: none;
align-items: center;
}
.help-popover__panel {
position: fixed;
inset: auto;
z-index: var(--z-help-popover);
width: min(360px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
overflow: auto;
overscroll-behavior: contain;
box-sizing: border-box;
margin: 0;
padding: var(--space-4);
border: 1px solid var(--separator);
border-radius: var(--radius-md);
background: var(--background-primary);
color: var(--label-primary);
font-family: inherit;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-transform: none;
white-space: normal;
}
/* Native dialog top layer keeps this scrim above every parent dialog. */
.help-popover__panel::backdrop {
background: color-mix(in srgb, var(--system-black) 48%, transparent);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
html.has-modal-help,
html.has-modal-help body {
overflow: hidden;
overscroll-behavior: none;
}
.help-popover__header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: var(--space-2);
position: sticky;
top: 0;
z-index: var(--z-table-header);
margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
padding: var(--space-4) var(--space-4) var(--space-2);
background: var(--background-primary);
}
/* Balão com a tabela de um gráfico: largo o bastante para as colunas sem
rolagem lateral; cada célula numa linha só. */
.help-popover--data .help-popover__panel {
width: min(600px, calc(100vw - 32px));
}
.help-popover--data .procurement-table th,
.help-popover--data .procurement-table td {
min-width: 0;
white-space: nowrap;
}
.help-popover__title {
display: block;
min-width: 0;
overflow-wrap: anywhere;
font-size: 12px;
}
.help-popover__close {
position: static;
align-self: start;
justify-self: end;
}
.help-popover__panel p {
margin: var(--space-3) 0 0;
}
.help-popover__definitions {
display: grid;
gap: var(--space-1);
margin: var(--space-3) 0 0;
}
.help-popover__definitions dt {
margin-top: var(--space-2);
font-weight: 600;
}
.help-popover__definitions dd {
margin: 0;
color: var(--label-secondary);
}
/* Estado vazio e de falha (LobaUI.states): uma anatomia só para todo o
portal. Tamanho pela variante (inline, panel, page); posição no grid fica
com a classe da tela, nunca a aparência. */
.state-message {
display: grid;
margin: 0;
padding: var(--space-3);
place-content: center;
justify-items: center;
gap: var(--space-2);
color: var(--label-secondary);
font-size: 12px;
line-height: 1.5;
text-align: center;
}
.state-message[hidden] {
display: none;
}
.state-message--panel {
min-height: 128px;
padding: var(--space-5);
}
.state-message--page {
min-height: 220px;
padding: var(--space-6);
font-size: 13px;
}
.state-message__icon {
color: var(--label-secondary);
font-size: 24px;
}
.state-message__title {
color: var(--label-primary);
font-size: 13px;
font-weight: 600;
}
.state-message--error .state-message__icon,
.state-message--error .state-message__title {
color: var(--summary-negative-label);
}
.state-message__text {
max-width: 64ch;
}
.state-message__action {
margin-top: var(--space-1);
}
/* #8/#163 Status do Sistema: painel operacional em leitura progressiva. O
resumo responde primeiro, os cards explicam o essencial e preserva
a informacao de suporte sem transformar a pagina num inventario tecnico. */
.system-status-grid {
min-height: 0;
overflow-y: auto;
display: grid;
grid-auto-rows: max-content;
align-content: start;
gap: 14px;
padding: 1px;
}
.system-status__heading {
align-items: center;
/* O título fica só para leitor de tela (regra 30); os controles seguem a
faixa de contexto das outras páginas, à direita. */
justify-content: flex-end;
}
.system-status__controls {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 0;
}
.system-status__last-read {
color: var(--label-secondary);
font-size: 12px;
white-space: nowrap;
}
.system-status__feedback {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.system-status-summary {
--system-status-tone: var(--system-green);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-width: 0;
padding: 18px 20px;
border: 1px solid color-mix(in srgb, var(--system-status-tone) 44%, var(--separator));
border-left-width: 4px;
border-radius: 10px;
background: color-mix(in srgb, var(--system-status-tone) 8%, var(--secondary-system-background));
}
.system-status-summary.is-warn,
.system-status-panel.is-warn,
.system-status-services.is-warn {
--system-status-tone: var(--status-warning-border);
}
.system-status-summary.is-error,
.system-status-panel.is-error,
.system-status-services.is-error {
--system-status-tone: var(--system-red);
}
.system-status-summary__icon {
width: 36px;
height: 36px;
color: var(--system-status-tone);
}
.system-status-summary__eyebrow {
display: block;
margin-bottom: 3px;
color: var(--label-secondary);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.system-status-summary h3,
.system-status-summary p {
margin: 0;
}
.system-status-summary h3 {
font-size: clamp(17px, 1.5vw, 22px);
}
.system-status-summary p {
margin-top: 4px;
color: var(--label-secondary);
font-size: 13px;
}
.system-status-state {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 30px;
padding: 5px 10px;
border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
border-radius: 999px;
background: color-mix(in srgb, currentColor 10%, transparent);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.system-status-state .ui-icon {
width: 15px;
height: 15px;
}
.system-status-state.is-ok {
color: var(--system-green);
}
.system-status-state.is-warn {
color: var(--status-warning-label);
}
.system-status-state.is-error {
color: var(--system-red);
}
.system-status-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.system-status-panel,
.system-status-services {
--system-status-tone: var(--system-green);
min-width: 0;
border-top: 3px solid var(--system-status-tone);
}
.system-status-panel {
display: grid;
grid-template-rows: auto auto auto 1fr;
}
.system-status-panel__header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 14px 14px 10px;
}
.system-status-panel__header h3,
.system-status-services__header h3,
.system-status-alerts h3 {
margin: 0;
font-size: 15px;
}
.system-status-panel__icon {
width: 24px;
height: 24px;
color: var(--system-status-tone);
}
.system-status-panel__summary {
min-height: 42px;
margin: 0;
padding: 0 14px;
color: var(--label-primary);
font-size: 14px;
font-weight: 750;
line-height: 1.45;
}
.system-status-panel__orientation {
margin: 8px 0 0;
padding: 0 14px 12px;
color: var(--label-secondary);
font-size: 12px;
line-height: 1.45;
}
.system-status-details {
align-self: end;
border-top: 1px solid var(--separator);
}
.system-status-details summary {
min-height: 40px;
padding: 11px 14px;
color: var(--link);
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.system-status-details summary:hover {
background: var(--fill-quaternary);
}
.system-status-details summary:focus-visible,
.system-status__refresh:focus-visible,
.system-status-support__copy:focus-visible {
outline: 3px solid color-mix(in srgb, var(--focus-ring) 54%, transparent);
outline-offset: 2px;
}
.system-status-details__body {
border-top: 1px solid var(--separator);
}
.system-status-metric {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
align-items: baseline;
gap: 12px;
padding: 9px 14px;
border-bottom: 1px solid var(--separator);
}
.system-status-metric:last-child {
border-bottom: 0;
}
.system-status-metric__label {
color: var(--label-secondary);
font-size: 12px;
}
.system-status-metric__value {
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
font-size: 12px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.system-status-services__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px;
border-bottom: 1px solid var(--separator);
}
.system-status-services__header p {
margin: 3px 0 0;
color: var(--label-secondary);
font-size: 12px;
}
.system-status-services__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
padding: 12px;
}
.system-status-service {
display: grid;
min-width: 0;
overflow: hidden;
border: 1px solid var(--separator);
border-radius: 8px;
background: var(--fill-quaternary);
}
.system-status-service > strong,
.system-status-service__primary {
padding-inline: 14px;
}
.system-status-service > strong {
padding-top: 13px;
font-size: 13px;
}
.system-status-service__primary {
min-height: 44px;
padding-top: 4px;
padding-bottom: 11px;
color: var(--label-secondary);
font-size: 12px;
line-height: 1.45;
}
.system-status-service .system-status-details {
align-self: end;
}
.system-status-restart-warning,
.system-status-all-clear {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 12px 14px;
font-size: 12px;
line-height: 1.45;
}
.system-status-restart-warning {
border-bottom: 1px solid var(--status-warning-border);
background: var(--status-warning-fill);
color: var(--status-warning-label);
}
.system-status-restart-warning .ui-icon {
flex: none;
color: var(--status-warning-label);
}
.system-status-all-clear {
border: 1px solid color-mix(in srgb, var(--system-green) 36%, var(--separator));
border-radius: 8px;
background: color-mix(in srgb, var(--system-green) 8%, var(--secondary-system-background));
color: var(--label-secondary);
}
.system-status-all-clear .ui-icon {
flex: none;
color: var(--system-green);
}
.system-status-alerts {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--separator);
border-radius: 8px;
background: var(--secondary-system-background);
}
.system-status-alert {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 3px 9px;
padding: 11px 12px;
border-left: 3px solid var(--system-orange);
border-radius: 6px;
background: var(--fill-quaternary);
}
.system-status-alert.is-error {
border-left-color: var(--system-red);
}
.system-status-alert > .ui-icon {
grid-row: 1 / span 2;
color: var(--system-orange);
}
.system-status-alert.is-error > .ui-icon {
color: var(--system-red);
}
.system-status-alert p {
margin: 0;
color: var(--label-secondary);
font-size: 12px;
line-height: 1.45;
}
.system-status-support {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 10px;
border-top: 1px solid var(--separator);
}
.system-status-support > div {
display: grid;
gap: 3px;
min-width: 0;
}
.system-status-support span {
color: var(--label-secondary);
font-size: 12px;
overflow-wrap: anywhere;
}
.system-status-support__copy span {
color: var(--label-primary);
}
.system-status-support__copy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 40px;
flex: none;
padding: 8px 12px;
border: 1px solid var(--separator);
border-radius: 7px;
background: var(--tertiary-system-background);
color: var(--label-primary);
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.system-status__refresh {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 40px;
flex: none;
padding: 8px 14px;
border: 1px solid var(--separator);
border-radius: 7px;
background: var(--tertiary-system-background);
color: var(--label-primary);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.system-status__refresh:hover {
background: var(--fill-secondary);
}
.system-status__refresh.is-loading .ui-icon {
animation: system-status-refresh-spin 800ms linear infinite;
}
.system-status__refresh:disabled {
opacity: 0.64;
cursor: default;
}
.system-status-empty {
grid-column: 1 / -1;
}
/* #165: custo agregado e owner-only. A leitura principal continua sendo o
status; este painel falha isoladamente e nunca expõe nomes/IDs de recursos. */
.system-costs {
min-width: 0;
overflow: hidden;
border-top: 3px solid var(--cost-accent);
}
.system-costs.is-error {
border-top-color: var(--cost-warning);
}
.system-costs__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px;
border-bottom: 1px solid var(--separator);
}
.system-costs__header h3,
.system-costs__header p,
.system-costs__categories h4,
.system-costs__categories p,
.system-costs__ai h4,
.system-costs__ai h5,
.system-costs__ai p,
.system-costs__reconciliation h4,
.system-costs__reconciliation p,
.system-costs__limitations p {
margin: 0;
}
.system-costs__header h3 {
font-size: 15px;
}
.system-costs__header p,
.system-costs__categories p,
.system-costs__ai p,
.system-costs__reconciliation p,
.system-costs__limitations,
.system-costs__stamp {
color: var(--label-secondary);
font-size: 12px;
line-height: 1.45;
}
.system-costs__periods {
display: inline-flex;
flex: none;
gap: 4px;
padding: 3px;
border: 1px solid var(--separator);
border-radius: 8px;
background: var(--fill-quaternary);
}
.system-costs__periods button {
min-height: 32px;
padding: 5px 10px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--label-secondary);
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.system-costs__periods button:not([aria-pressed="true"]):hover {
background: var(--fill-secondary);
color: var(--label-primary);
}
.system-costs__periods button[aria-pressed="true"] {
background: var(--cost-selected-background);
color: var(--solid-white);
}
.system-costs__periods button:focus-visible {
outline: 3px solid color-mix(in srgb, var(--focus-ring) 54%, transparent);
outline-offset: 2px;
}
.system-costs__metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
border-bottom: 1px solid var(--separator);
}
.system-costs.is-loading {
opacity: 0.72;
}
.system-costs__load-error {
margin: 0;
padding: 12px 14px;
border-top: 1px solid color-mix(in srgb, var(--cost-critical) 42%, var(--separator));
color: var(--cost-critical);
}
.system-costs__metrics article {
display: grid;
align-content: start;
gap: 4px;
min-width: 0;
padding: 14px;
border-right: 1px solid var(--separator);
}
.system-costs__metrics article:last-child {
border-right: 0;
}
.system-costs__metrics article.is-warning {
box-shadow: inset 3px 0 var(--cost-warning);
}
.system-costs__metrics article.is-critical {
box-shadow: inset 3px 0 var(--cost-critical);
}
.system-costs__metrics span,
.system-costs__metrics small {
color: var(--label-secondary);
font-size: 11px;
line-height: 1.4;
}
.system-costs__metrics strong {
color: var(--label-primary);
font-size: 18px;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.system-costs__categories {
display: grid;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--separator);
}
.system-costs__categories h4 {
font-size: 13px;
}
.system-costs__category {
display: grid;
grid-template-columns: minmax(130px, 0.7fr) minmax(120px, 2fr) minmax(110px, auto);
align-items: center;
gap: 10px;
min-width: 0;
font-size: 12px;
}
.system-costs__category > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.system-costs__category > strong {
font-variant-numeric: tabular-nums;
text-align: right;
}
.system-costs__track {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: var(--fill-secondary);
}
.system-costs__track > span {
display: block;
min-width: 2px;
height: 100%;
border-radius: inherit;
background: var(--cost-progress-fill);
}
.system-costs__ai {
display: grid;
gap: 12px;
padding: 14px;
border-bottom: 1px solid var(--separator);
}
.system-costs__reconciliation {
display: grid;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--separator);
}
.system-costs__reconciliation h4 {
font-size: 13px;
}
.system-costs__reconciliation > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.system-costs__reconciliation > div > div {
display: grid;
gap: 4px;
min-width: 0;
padding: 10px;
border: 1px solid var(--separator);
border-radius: 8px;
background: var(--background-secondary);
}
.system-costs__reconciliation strong,
.system-costs__reconciliation span {
font-size: 11px;
line-height: 1.4;
}
.system-costs__reconciliation span {
color: var(--label-secondary);
}
.system-costs__ai h4 {
font-size: 13px;
}
.system-costs__ai-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid var(--separator);
border-radius: 8px;
background: var(--separator);
}
.system-costs__ai-summary > div {
display: grid;
gap: 3px;
min-width: 0;
padding: 10px;
background: var(--background-secondary);
}
.system-costs__ai-summary span,
.system-costs__ai-list small,
.system-costs__ai-notice,
.system-costs__ai-limit {
color: var(--label-secondary);
font-size: 11px;
}
.system-costs__ai-limit {
margin: 0;
}
.system-costs__ai-summary strong,
.system-costs__ai-list strong {
font-variant-numeric: tabular-nums;
}
.system-costs__ai-breakdowns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.system-costs__ai-breakdowns > section {
display: grid;
align-content: start;
gap: 7px;
min-width: 0;
}
.system-costs__ai-breakdowns h5 {
font-size: 12px;
}
.system-costs__ai-list {
display: grid;
max-height: 280px;
overflow: auto;
border: 1px solid var(--separator);
border-radius: 8px;
}
.system-costs__ai-list > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
min-width: 0;
padding: 8px 10px;
border-bottom: 1px solid var(--separator);
font-size: 12px;
}
.system-costs__ai-list > div:last-child {
border-bottom: 0;
}
.system-costs__ai-list span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.system-costs__ai-list small {
grid-column: 1 / -1;
}
.system-costs__limitations {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 12px 14px;
background: var(--fill-quaternary);
}
.system-costs__stamp {
padding: 10px 14px;
border-top: 1px solid var(--separator);
text-align: right;
}
@keyframes system-status-refresh-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.system-status__refresh.is-loading .ui-icon {
animation: none;
}
}
@media (max-width: 1180px) {
.system-status-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.system-status-panel:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 720px) {
.system-status__heading,
.system-status-support {
align-items: stretch;
flex-direction: column;
}
.system-status__controls {
justify-content: space-between;
}
.system-status-summary {
grid-template-columns: auto minmax(0, 1fr);
padding: 15px;
}
.system-status-summary > .system-status-state {
grid-column: 2;
justify-self: start;
}
.system-status-cards {
grid-template-columns: minmax(0, 1fr);
}
.system-status-panel:last-child {
grid-column: auto;
}
.system-status-support__copy {
width: 100%;
}
.system-costs__header {
align-items: stretch;
flex-direction: column;
}
.system-costs__periods {
width: 100%;
}
.system-costs__periods button {
flex: 1;
}
.system-costs__metrics,
.system-costs__limitations {
grid-template-columns: minmax(0, 1fr);
}
.system-costs__metrics article {
border-right: 0;
border-bottom: 1px solid var(--separator);
}
.system-costs__metrics article:last-child {
border-bottom: 0;
}
.system-costs__ai-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.system-costs__ai-breakdowns {
grid-template-columns: minmax(0, 1fr);
}
.system-costs__reconciliation > div {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 520px) {
.system-costs__ai-summary {
grid-template-columns: minmax(0, 1fr);
}
.system-status__controls {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
}
.system-status__last-read {
white-space: normal;
}
.system-status-panel__header,
.system-status-services__header {
align-items: flex-start;
}
.system-status-panel__header {
grid-template-columns: auto minmax(0, 1fr);
}
.system-status-panel__header .system-status-state {
grid-column: 2;
justify-self: start;
}
.system-status-services__header {
flex-direction: column;
}
.system-status-metric {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
}
.system-status-metric__value {
text-align: left;
}
.system-costs__category {
grid-template-columns: minmax(0, 1fr) auto;
}
.system-costs__track {
grid-column: 1 / -1;
grid-row: 2;
}
}
.settings-access-content {
min-height: 0;
display: grid;
align-content: start;
gap: 12px;
overflow: auto;
padding: 14px;
}
.settings-access-form {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
align-items: end;
gap: 10px;
}
.settings-access-form label {
display: grid;
gap: 5px;
color: var(--label-secondary);
/* 12px por decisao de 2026-07-27 (#11): o formulario, onde se digita, fica
MAIOR que o cabecalho da tabela (11px) - a hierarquia invertida e
proposital. */
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.settings-access-form :is(input, select),
.settings-access-table select {
height: 36px;
border: 1px solid var(--separator);
border-radius: var(--radius-sm);
background: var(--control-background);
color: var(--label-primary);
font: inherit;
font-size: 12px;
padding: var(--space-0) var(--space-3);
}
.settings-access-select {
display: inline-grid;
align-items: center;
}
.settings-access-form .settings-access-select {
display: grid;
}
.settings-access-select > select {
grid-area: 1 / 1;
appearance: none;
width: 100%;
padding-right: var(--space-6);
}
.settings-access-select > .filter-select__chevron {
grid-area: 1 / 1;
justify-self: end;
margin-right: var(--space-1);
pointer-events: none;
}
.settings-access-select > select:disabled + .filter-select__chevron {
opacity: var(--opacity-disabled);
}
/* #15 leva 2: combobox de colaboradores. O menu e ancorado no wrapper e nao no
campo, com `left: 0; right: 0` - e o que garante a largura EXATA do input em
qualquer coluna do grid, que era o defeito do `