/* =====================================================================
   SAFIRA — direção visual do NEXUS (D-104, 2026-11-07).

   CAMADA, não reescrita. Carregada por ÚLTIMO (App.razor): redefine os
   TOKENS que o sistema inteiro já consome (`--gps-*`, `--nexus-*`) e
   acrescenta os poucos componentes novos (`nx-*`). Nenhuma regra de
   negócio, rota, permissão ou cálculo depende deste arquivo; removê-lo
   devolve a aparência anterior.

   Fonte única de cada decisão:
     · paleta e raios ............ bloco TOKENS (abaixo)
     · sinal -> cor .............. `.nexus-kpi-negative` e `.db-sinal-neg`
                                   (a cor sai do SINAL, nunca da tela)
     · origem OR/FCST/RE/Projeção  `.nx-src-*` + glifo (cor nunca é a
                                   única pista)
     · "i" / "!" ................. `.nx-m`, `.nx-pop`, `.nx-painel`
     · coluna de ações ........... bloco TABELAS (fixa e inteira)

   Regras vinculantes que este arquivo obedece: grade 4/8, piso .78rem,
   densidade automática (< 1440 de largura ou < 800 de altura), sem caixa
   alta em texto humano, sem reticências em rótulo/código.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOKENS
   A paleta de marca continua a oficial (midnight/royal/icy). Mudam os
   neutros (mais frios, mais contraste), os semânticos (todos >= 4,5:1
   sobre branco) e o raio.
   --------------------------------------------------------------------- */
:root {
    --gps-color-bg: #F2F5F9;
    --gps-color-text: #14212F;
    --gps-color-text-muted: #586878;
    --gps-color-border: #E3E8EF;
    --gps-color-success: #1E7A4A;
    --gps-color-danger: #B3261E;
    --gps-color-warning: #9A5B00;
    --gps-radius: 10px;

    --nx-surface: #FFFFFF;
    --nx-surface-2: #F7F9FC;
    --nx-radius-card: 14px;
    --nx-shadow: 0 1px 2px rgba(11, 31, 59, .06), 0 10px 24px -14px rgba(11, 31, 59, .22);
    --nx-info-bg: #E6EFFB;
    --nx-neg-bg: #FCE9E7;
    --nx-pos-bg: #E3F3EA;
    --nx-warn-bg: #FBF0DC;
    --nx-ring: var(--nexus-icy-blue);

    /* origem do número — cada uma tem também um glifo */
    --nx-src-or: #7A5AA6;
    --nx-src-fcst: #2563B8;
    --nx-src-re: #0B1F3B;
    --nx-src-proj: #0E7490;
}

/* Foco visível e único (anel de 3 px) em todo controle. */
:is(a[href], button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
    outline: 3px solid var(--nx-ring);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   SHELL — barra lateral, cabeçalho, conteúdo
   Larguras, modos (>=1440 aberta · 1024-1439 trilho · <1024 gaveta) e
   itens de menu NÃO mudam: só superfície, estado e contraste.
   --------------------------------------------------------------------- */
.gps-sidebar {
    background: linear-gradient(180deg, #0B1F3B 0%, #0D2748 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.gps-sidebar-menu li a { border-radius: var(--gps-radius); color: #C6D3E6; }
.gps-sidebar-menu li a:hover { background: rgba(255, 255, 255, .1); }
.gps-sidebar-menu li a.active {
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.gps-sidebar-menu li a.active::before { background: var(--nexus-icy-blue); }
.gps-sidebar-menu li a:focus-visible { box-shadow: none; outline: 3px solid var(--nexus-icy-blue); outline-offset: -2px; }

/* Nome e função na barra: dois níveis de leitura, sem reticências. */
.nexus-sidebar-profile-name,
.nexus-sidebar-profile-role {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.gps-header {
    background: var(--nx-surface);
    border-bottom: 1px solid var(--gps-color-border);
    box-shadow: 0 1px 0 rgba(11, 31, 59, .03);
}
.gps-header-user-name { letter-spacing: -.005em; }

.gps-page-header h1 { font-size: 1.55rem; font-weight: 650; letter-spacing: -.01em; }

/* ---------------------------------------------------------------------
   SUPERFÍCIES
   --------------------------------------------------------------------- */
.gps-card,
.nexus-table-wrap,
.nexus-kpi {
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow);
}
.gps-card, .nexus-table-wrap, .nexus-kpi { background: var(--nx-surface); }

.gps-input:hover { border-color: #C5CEDA; }
.gps-input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 184, .18); }

.gps-btn-primary { background: var(--nexus-midnight-blue); }
.gps-btn { border-radius: var(--gps-radius); }

.gps-badge { font-weight: 600; }
.gps-badge-success { background: var(--nx-pos-bg); }
.gps-badge-danger { background: var(--nx-neg-bg); }
.gps-badge-warning { background: var(--nx-warn-bg); color: var(--gps-color-warning); }

/* ---------------------------------------------------------------------
   TABELAS (NexusDataTable)
   · números tabulares, à direita (já em design-system.css);
   · cabeçalho em frase, sem caixa alta;
   · COLUNA DE AÇÕES fixa à direita e inteira: nunca cortada pela rolagem
     e nunca coberta pela barra; o botão não perde palavra;
   · nenhuma reticência escondendo rótulo ou código.
   --------------------------------------------------------------------- */
.nexus-table thead th {
    background: var(--nx-surface-2);
    color: var(--gps-color-text-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}
.nexus-table tbody tr:hover td { background: var(--nx-surface-2); }
.nexus-table tbody td { font-variant-numeric: tabular-nums; }
.nexus-table td.nexus-actions .gps-btn { white-space: nowrap; }

/* Linha cujo estado é grave: marca à esquerda, além da cor. */
.nexus-table tbody tr.is-severe td:first-child { box-shadow: inset 3px 0 0 var(--gps-color-danger); }

/* Rótulos e códigos: quebram, não reticenciam. */
.ac-lista .nexus-table td.ac-responsavel {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}
.visit-month-item { white-space: normal; overflow: visible; text-overflow: clip; }

/* Coluna de ações (NexusAlign.Actions): uma regra por posição, como em design-system.css. */
.nexus-table.nexus-a1-act thead th:nth-child(1),
.nexus-table.nexus-a1-act tbody td:nth-child(1) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a1-act thead th:nth-child(1) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a1-act tbody tr:hover td:nth-child(1) { background: var(--nx-surface-2); }
.nexus-table.nexus-a2-act thead th:nth-child(2),
.nexus-table.nexus-a2-act tbody td:nth-child(2) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a2-act thead th:nth-child(2) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a2-act tbody tr:hover td:nth-child(2) { background: var(--nx-surface-2); }
.nexus-table.nexus-a3-act thead th:nth-child(3),
.nexus-table.nexus-a3-act tbody td:nth-child(3) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a3-act thead th:nth-child(3) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a3-act tbody tr:hover td:nth-child(3) { background: var(--nx-surface-2); }
.nexus-table.nexus-a4-act thead th:nth-child(4),
.nexus-table.nexus-a4-act tbody td:nth-child(4) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a4-act thead th:nth-child(4) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a4-act tbody tr:hover td:nth-child(4) { background: var(--nx-surface-2); }
.nexus-table.nexus-a5-act thead th:nth-child(5),
.nexus-table.nexus-a5-act tbody td:nth-child(5) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a5-act thead th:nth-child(5) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a5-act tbody tr:hover td:nth-child(5) { background: var(--nx-surface-2); }
.nexus-table.nexus-a6-act thead th:nth-child(6),
.nexus-table.nexus-a6-act tbody td:nth-child(6) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a6-act thead th:nth-child(6) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a6-act tbody tr:hover td:nth-child(6) { background: var(--nx-surface-2); }
.nexus-table.nexus-a7-act thead th:nth-child(7),
.nexus-table.nexus-a7-act tbody td:nth-child(7) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a7-act thead th:nth-child(7) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a7-act tbody tr:hover td:nth-child(7) { background: var(--nx-surface-2); }
.nexus-table.nexus-a8-act thead th:nth-child(8),
.nexus-table.nexus-a8-act tbody td:nth-child(8) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a8-act thead th:nth-child(8) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a8-act tbody tr:hover td:nth-child(8) { background: var(--nx-surface-2); }
.nexus-table.nexus-a9-act thead th:nth-child(9),
.nexus-table.nexus-a9-act tbody td:nth-child(9) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a9-act thead th:nth-child(9) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a9-act tbody tr:hover td:nth-child(9) { background: var(--nx-surface-2); }
.nexus-table.nexus-a10-act thead th:nth-child(10),
.nexus-table.nexus-a10-act tbody td:nth-child(10) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a10-act thead th:nth-child(10) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a10-act tbody tr:hover td:nth-child(10) { background: var(--nx-surface-2); }
.nexus-table.nexus-a11-act thead th:nth-child(11),
.nexus-table.nexus-a11-act tbody td:nth-child(11) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a11-act thead th:nth-child(11) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a11-act tbody tr:hover td:nth-child(11) { background: var(--nx-surface-2); }
.nexus-table.nexus-a12-act thead th:nth-child(12),
.nexus-table.nexus-a12-act tbody td:nth-child(12) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a12-act thead th:nth-child(12) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a12-act tbody tr:hover td:nth-child(12) { background: var(--nx-surface-2); }
.nexus-table.nexus-a13-act thead th:nth-child(13),
.nexus-table.nexus-a13-act tbody td:nth-child(13) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a13-act thead th:nth-child(13) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a13-act tbody tr:hover td:nth-child(13) { background: var(--nx-surface-2); }
.nexus-table.nexus-a14-act thead th:nth-child(14),
.nexus-table.nexus-a14-act tbody td:nth-child(14) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a14-act thead th:nth-child(14) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a14-act tbody tr:hover td:nth-child(14) { background: var(--nx-surface-2); }
.nexus-table.nexus-a15-act thead th:nth-child(15),
.nexus-table.nexus-a15-act tbody td:nth-child(15) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a15-act thead th:nth-child(15) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a15-act tbody tr:hover td:nth-child(15) { background: var(--nx-surface-2); }
.nexus-table.nexus-a16-act thead th:nth-child(16),
.nexus-table.nexus-a16-act tbody td:nth-child(16) {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(11, 31, 59, .28);
}
.nexus-table.nexus-a16-act thead th:nth-child(16) { background: var(--nx-surface-2); z-index: 3; }
.nexus-table.nexus-a16-act tbody tr:hover td:nth-child(16) { background: var(--nx-surface-2); }

/* ---------------------------------------------------------------------
   INDICADORES (NexusKpiCard / NexusFinancialCard)
   Hierarquia por severidade: o que exige atenção ganha peso, o ZERO
   recua. O sinal do número define a cor — nunca a tela.
   --------------------------------------------------------------------- */
.nexus-kpi {
    border-left-width: 4px;
    padding: var(--nexus-card-padding);
    gap: 4px;
}
.nexus-kpi-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 1.25; }
.nexus-kpi-value { font-size: 1.45rem; font-weight: 650; }
.nexus-kpi-negative { background-color: var(--nx-neg-bg); background-image: none; }
.nexus-kpi-negative .nexus-kpi-value { color: var(--gps-color-danger); }
.nexus-kpi-warning { background-color: var(--nx-warn-bg); }
.nexus-kpi-warning .nexus-kpi-value { color: var(--gps-color-warning); }
.nexus-kpi-zero { opacity: .82; border-left-color: var(--gps-color-border); box-shadow: none; }
.nexus-kpi-zero .nexus-kpi-value { color: var(--gps-color-text-muted); font-weight: 500; }

/* Valor em tabela/texto: a classe de sinal do produto (NexusFormat.NegativeClass). */
.nexus-negative, .nexus-neg { color: var(--gps-color-danger); }

/* ---------------------------------------------------------------------
   ORIGEM DO NÚMERO — OR ■ · FCST ▲ · RE ● · Projeção ◆
   Selo + faixa tingida no topo do cartão. O glifo é parte do texto: a
   cor repete, não substitui.
   --------------------------------------------------------------------- */
.nx-seal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--nx-seal, var(--gps-color-text-muted));
    background: color-mix(in srgb, var(--nx-seal, #586878) 12%, #fff);
    white-space: nowrap;
}
.nx-src-or { --nx-seal: var(--nx-src-or); }
.nx-src-fcst { --nx-seal: var(--nx-src-fcst); }
.nx-src-re { --nx-seal: var(--nx-src-re); }
.nx-src-proj { --nx-seal: var(--nx-src-proj); }
.nexus-kpi.nx-src-or, .nexus-kpi.nx-src-fcst, .nexus-kpi.nx-src-re, .nexus-kpi.nx-src-proj {
    box-shadow: inset 0 3px 0 var(--nx-seal), var(--nx-shadow);
}
.nexus-kpi.nexus-kpi-zero.nx-src-or, .nexus-kpi.nexus-kpi-zero.nx-src-fcst,
.nexus-kpi.nexus-kpi-zero.nx-src-re, .nexus-kpi.nexus-kpi-zero.nx-src-proj { box-shadow: inset 0 3px 0 var(--gps-color-border); }
.nx-glifo { color: var(--nx-seal); font-size: .78rem; }

/* ---------------------------------------------------------------------
   "i" e "!" — explicação e atenção (NexusInfo)
   --------------------------------------------------------------------- */
.nx-info { position: relative; display: inline-flex; vertical-align: middle; }
.nx-m {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--gps-color-text-muted);
    background: var(--nx-surface);
    color: var(--gps-color-text-muted);
    font: 700 .8rem/1 var(--gps-font);
    cursor: pointer;
}
.nx-m.i { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.nx-m:hover { background: var(--gps-color-text); border-color: var(--gps-color-text); color: var(--nx-surface); }
.nx-m.w { border-color: var(--gps-color-warning); background: var(--nx-warn-bg); color: var(--gps-color-warning); font-size: .85rem; }
.nx-m.w:hover { background: var(--gps-color-warning); color: #fff; }
.nx-m.mini { width: 20px; height: 20px; cursor: default; margin-right: 4px; }

.nx-pop-fundo { position: fixed; inset: 0; z-index: 40; border: 0; padding: 0; background: transparent; cursor: default; }
.nx-pop {
    position: absolute;
    z-index: 41;
    top: calc(100% + 8px);
    left: -8px;
    width: max-content;
    max-width: min(340px, 78vw);
    padding: 12px 16px;
    background: var(--nx-surface);
    color: var(--gps-color-text);
    border: 1px solid var(--gps-color-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px -12px rgba(11, 31, 59, .45);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.45;
    outline: 0;
}
.nx-pop-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.nx-pop-cab strong { font-size: .85rem; }
.nx-pop-fechar {
    border: 0; background: transparent; padding: 2px 4px;
    font: 600 .78rem var(--gps-font); color: var(--gps-color-primary-light);
    cursor: pointer; border-radius: 6px;
}
.nx-pop p { margin: 4px 0; }
.nx-pop p.wn { font-weight: 600; }

/* Painel N3: Avisos desta tela / Como ler esta tela */
.nx-screen-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.nx-av { gap: 6px; }
.nx-como-ler summary { cursor: pointer; font-size: .85rem; color: var(--gps-color-primary-light); min-height: 24px; }
.nx-como-ler-corpo { margin-top: 8px; font-size: .85rem; max-width: 80ch; }
.nx-painel-fundo { position: fixed; inset: 0; z-index: 60; border: 0; padding: 0; background: rgba(5, 12, 24, .42); cursor: default; }
.nx-painel {
    position: fixed; z-index: 61; top: 0; right: 0; bottom: 0;
    width: min(460px, 100%);
    display: flex; flex-direction: column;
    background: var(--gps-color-bg);
    border-left: 1px solid var(--gps-color-border);
    box-shadow: -24px 0 50px -20px rgba(0, 0, 0, .4);
    outline: 0;
}
.nx-painel-cab { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px; background: var(--nx-surface); border-bottom: 1px solid var(--gps-color-border); }
.nx-painel-cab h2 { margin: 0; font-size: 1.1rem; }
.nx-painel-cab p { margin: 4px 0 0; font-size: .78rem; color: var(--gps-color-text-muted); }
.nx-painel-corpo { padding: 16px 24px 32px; overflow-y: auto; }
.nx-painel-corpo h3 { margin: 16px 0 4px; font-size: .9rem; }
.nx-aviso { padding: 8px 0; border-bottom: 1px solid var(--gps-color-border); }
.nx-aviso strong { display: flex; align-items: center; gap: 4px; font-size: .86rem; }
.nx-aviso p { margin: 4px 0 0; font-size: .82rem; color: var(--gps-color-text-muted); }
.nx-aviso p.wn { color: var(--gps-color-text); font-weight: 600; }

/* Celular: alvo de toque de 44 px; o balão vira folha inferior. */
@media (width <= 699px) {
    .nx-m { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border: 0; background: transparent !important; box-shadow: none; }
    .nx-m > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; background: var(--nx-surface); }
    .nx-m.w > span { background: var(--nx-warn-bg); }
    .nx-m.mini { width: 20px; height: 20px; min-width: 0; min-height: 0; }
    .nx-m.mini > span { width: 20px; height: 20px; }
    .nx-info { position: static; }
    .nx-pop {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: auto; max-width: none; max-height: 70vh; overflow-y: auto;
        border-radius: 16px 16px 0 0; padding: 16px 24px 24px;
    }
    .nx-pop-fechar { min-height: 44px; min-width: 44px; }
    .nx-como-ler summary, .nx-av { min-height: 44px; }
}

/* ---------------------------------------------------------------------
   GRÁFICO EBITDA FCST x RE (Dashboard)
   Cor sai do SINAL: abaixo da linha de zero = vermelho; acima = a cor da
   série. O rótulo e a legenda dizem o mesmo (cor nunca é a única pista).
   --------------------------------------------------------------------- */
.db-barra-re.db-sinal-neg { fill: var(--gps-color-danger); }
.db-barra-fcst.db-sinal-neg { stroke: var(--gps-color-danger); stroke-width: 2; }
.db-amostra-negativo { background: var(--gps-color-danger); }
.db-amostra-re { background: var(--nx-src-re); }
.db-amostra-fcst { border-color: var(--nx-src-fcst); }
.db-legenda { font-size: .82rem; }
.db-legenda .nx-glifo { margin-right: 2px; }
.db-coluna-selecionada { fill: var(--nx-info-bg); }
.db-eixo-zero { stroke: var(--gps-color-text); }

/* ---------------------------------------------------------------------
   DENSIDADE AUTOMÁTICA (< 1440 de largura ou < 800 de altura)
   A mesma condição do design-system.css. Reduz espaço e destaque, nunca
   o texto corrente abaixo do piso.
   --------------------------------------------------------------------- */
@media screen and ((width < 1440px) or (height < 800px)) {
    .gps-page-header h1 { font-size: 1.4rem; }
    .nexus-kpi-value { font-size: 1.2rem; }
    .nexus-kpi { padding: 12px; }
    .nx-painel-cab, .nx-painel-corpo { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-m, .nx-pop, .nx-painel { transition: none; animation: none; }
}

/* Chave do sinal na legenda do gráfico (fora da lista, para a lista continuar curta). */
.db-legenda-sinal { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .82rem; }

/* ---------------------------------------------------------------------
   GRAFICO MENSAL — seletor ROL | EBITDA, linha do Orcamento (OR),
   "Ver como tabela" (D-104). So reorganiza numeros ja calculados.
   --------------------------------------------------------------------- */
.db-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.nx-seg { display: inline-flex; border: 1px solid var(--gps-color-border); border-radius: var(--gps-radius); overflow: hidden; background: var(--nx-surface); }
.nx-seg button {
    border: 0; background: var(--nx-surface); color: var(--gps-color-text);
    padding: 0 16px; height: var(--nexus-control-height); min-width: 64px;
    font: 600 .85rem var(--gps-font); cursor: pointer;
}
.nx-seg button + button { border-left: 1px solid var(--gps-color-border); }
.nx-seg button[aria-pressed="true"] { background: var(--nexus-midnight-blue); color: #fff; }
.db-or-linha { fill: none; stroke: var(--nx-src-or); stroke-width: 2.4; stroke-linejoin: round; }
.db-or-ponto { fill: var(--nx-surface); stroke: var(--nx-src-or); stroke-width: 2; }
.db-or-ponto.db-sinal-neg { stroke: var(--gps-color-danger); }
.db-amostra-or { height: 3px; width: 16px; background: var(--nx-src-or); border-radius: 2px; }
.db-grafico-tabela { max-width: 100%; }
.db-tabela-legenda { display: block; text-align: left; font-weight: 650; padding: 8px 16px; caption-side: top; }
.db-tabela-nota { display: block; padding: 8px 16px; font-size: .78rem; color: var(--gps-color-text-muted); }
.db-grafico-tabela th[scope="row"] { font-weight: 600; text-align: left; }
@media (width <= 699px) { .nx-seg button { min-height: 44px; } }

/* ---------------------------------------------------------------------
   DESVIO e PONTE (D-104, aprovados em 2026-11-08): listas acessiveis com barra.
   O zero e o centro do trilho do desvio; negativo em vermelho pelo sinal.
   --------------------------------------------------------------------- */
.db-desvio, .db-ponte { display: grid; gap: 4px; max-width: 880px; }
.db-desvio-linha { display: grid; grid-template-columns: 112px minmax(120px, 1fr) minmax(130px, auto); align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--gps-color-border); font-size: .85rem; }
.db-desvio-linha b { text-align: right; font-variant-numeric: tabular-nums; }
.db-desvio-mes { font-weight: 600; }
.db-desvio-trilho { position: relative; height: 14px; border-radius: 7px; background: var(--nx-surface-2); box-shadow: inset 0 0 0 1px var(--gps-color-border); }
.db-desvio-barra { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; }
.db-desvio-barra.db-sinal-pos { background: var(--gps-color-success); }
.db-desvio-barra.db-sinal-neg { background: var(--gps-color-danger); }
.db-desvio-barra.db-ponte-total { background: var(--nexus-midnight-blue); }
.db-ponte .db-desvio-linha:first-of-type { margin-top: 4px; }
@media (width <= 699px) { .db-desvio-linha { grid-template-columns: 88px minmax(60px, 1fr); } .db-desvio-linha b, .db-desvio-linha .db-valores-ausente { grid-column: 1 / -1; text-align: left; } }