/*
|------------------------------------------------------------------------------
| A MARCA DO PPG NEXUS DENTRO DA ÁREA AUTENTICADA
|------------------------------------------------------------------------------
|
| O painel roda sobre o Tabler (Backpack theme-tabler 2.1), com a pele `atlas`;
| este arquivo é a última camada da cascata. Ele faz três coisas, nesta ordem:
|
|   1. FONTES E TOKENS — troca as variáveis do Tabler pelos tokens do produto,
|      nos DOIS modos de cor. O modo escuro é o padrão (`defaultColorMode`), e
|      o layout o escreve no `<html>` do lado do servidor.
|   2. CORREÇÕES DO MODO ESCURO — o que o CSS do tema e do Backpack erra no
|      escuro (texto de campo a 50%, variáveis que não existem, fundo de hover
|      apagado). Cada regra diz qual regra do pacote ela corrige.
|   3. ACABAMENTO E UTILITÁRIOS — barra superior, marca, cabeçalho de página,
|      cartões, entrada, e os utilitários que o Tabler não traz.
|
| Nada de reimplementar componente: botão, cartão, tabela, alerta e formulário
| continuam sendo do Tabler, só na cor e na tipografia certas (§6.5 do design
| system: "como não virar dois sistemas visuais").
|
| ── DE ONDE VÊM AS CORES ──────────────────────────────────────────────────────
|
| Da paleta oficial (NAVY #172033, TEAL #20B58A, CYAN #168FE0, BLUE #1550B5,
| VIOLET #7040E0) e das escalas OKLCH de
| `docs/discovery/22-BRAND-AND-DESIGN-SYSTEM.md`, as mesmas de
| `resources/css/app.css`. As superfícies escuras (#0C1322, #11192A, #1B2539,
| #1F2A3F) estendem a família navy para baixo pelo mesmo método: matiz 264°,
| luminância em degraus, croma modulado.
|
| O CONTRASTE FOI MEDIDO (WCAG 2.1), e não estimado. Os pares de cada modo
| estão anotados ao lado dos tokens; o critério é 4,5:1 para texto e 3:1 para
| borda de controle, foco e gráfico — inclusive sobre os fundos `-lt` (a cor a
| 10%) e sobre o brilho do fundo da página.
|
| O ESCURO NÃO É O CLARO INVERTIDO. No claro, a ação é NEXUS BLUE com texto
| branco (7,38:1). No escuro, o mesmo azul como TEXTO daria 2,21:1 sobre navy —
| e o Tabler usa a mesma variável para botão, link, badge e gráfico. Por isso
| as cores de ação e de estado sobem para os degraus 300-400 da escala oficial,
| e o texto SOBRE elas (`--tblr-*-fg`) passa a ser navy: é a regra do manual
| para superfície escura (§2.1, "superfície escura — link: blue-300").
*/

/* ── 1. Fontes ───────────────────────────────────────────────────────────── */

/*
 * As mesmas WOFF2 auto-hospedadas do site público (`public/vendor/fonts`). A
 * CSP é `font-src 'self'`; caminho relativo para funcionar também se o
 * sistema for servido fora da raiz do domínio.
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../vendor/fonts/inter-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../../vendor/fonts/manrope-variable.woff2') format('woff2');
}

/* ── 2. Tokens ───────────────────────────────────────────────────────────── */

/*
 * CLARO — e também o que vale na IMPRESSÃO.
 *
 * O bloco escuro abaixo está dentro de `@media screen`: papel não tem modo
 * escuro, e uma lista impressa em texto claro sobre branco seria ilegível.
 *
 * `:root` e `[data-bs-theme=dark]` têm a mesma especificidade; o bloco claro
 * vem ANTES para que o escuro vença na tela.
 */
:root,
[data-bs-theme=light],
[data-menu-theme=light] {
    color-scheme: light;

    /* Constantes da marca — iguais nos dois modos. */
    --nx-navy: #172033;
    --nx-gradient-brand: linear-gradient(135deg, #20B58A 0%, #168FE0 35%, #1550B5 65%, #7040E0 100%);
    --nx-gradient-dark: linear-gradient(135deg, #005A42 0%, #004F82 35%, #002D7D 65%, #5314B7 100%);
    --nx-font-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Borda de controle (campo, seleção, caixa de marcar) e anel de foco. */
    --nx-control-border: #8694AF;   /* navy-500 — 3,06:1 sobre branco */
    --nx-focus: #0081CE;            /* cyan-600 — 4,17:1 sobre branco */

    /* A escala neutra do Tabler É a família navy (antes: cinza arroxeado do Backpack). */
    --tblr-gray-50: #F5F7FA;
    --tblr-gray-100: #E9EDF4;
    --tblr-gray-200: #D6DDEA;
    --tblr-gray-300: #BCC6DA;
    --tblr-gray-400: #A0ADC6;
    --tblr-gray-500: #8694AF;
    --tblr-gray-600: #6F7C96;
    --tblr-gray-700: #57637D;
    --tblr-gray-800: #404C64;
    --tblr-gray-900: #2A354C;
    --tblr-gray-950: #172033;
    --tblr-gray: #57637D;
    --tblr-gray-dark: #172033;

    --tblr-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --tblr-border-radius: 8px;
    --tblr-border-radius-lg: 12px;

    /* Superfícies e texto. */
    --tblr-body-bg: #F5F7FA;
    --tblr-body-bg-rgb: 245, 247, 250;
    --tblr-body-color: #172033;            /* 15,16:1 sobre o fundo */
    --tblr-body-color-rgb: 23, 32, 51;
    --tblr-emphasis-color: #0C1322;
    --tblr-emphasis-color-rgb: 12, 19, 34;
    --tblr-heading-color: #172033;
    --tblr-secondary-color: #57637D;       /* navy-700 — 6,02:1 sobre branco */
    --tblr-secondary-color-rgb: 87, 99, 125;
    --tblr-bg-surface: #FFFFFF;
    --tblr-bg-surface-primary: #FFFFFF;
    --tblr-bg-surface-secondary: #F5F7FA;
    --tblr-bg-surface-tertiary: #F5F7FA;
    --tblr-bg-forms: #FFFFFF;
    --tblr-border-color: #D6DDEA;
    --tblr-border-color-translucent: rgba(23, 32, 51, .10);
    --tblr-border-active-color: #8694AF;
    --tblr-navbar-border-color: #D6DDEA;
    --tblr-shadow-card: 0 1px 3px rgba(23, 32, 51, .08), 0 1px 2px rgba(23, 32, 51, .04);
    --tblr-shadow-card-hover: 0 4px 12px rgba(23, 32, 51, .10), 0 1px 3px rgba(23, 32, 51, .06);
    --nx-table-head-bg: #E9EDF4;           /* navy-100 — o fundo do cabeçalho de tabela (§5.7) */
    --atlas-table-head-color: #404C64;     /* 7,34:1 sobre navy-100 */

    /* Ação — NEXUS BLUE, texto branco (7,38:1). Hover escurece (AC-02). */
    --tblr-primary: #1550B5;
    --tblr-primary-rgb: 21, 80, 181;
    --tblr-primary-fg: #FFFFFF;
    --tblr-primary-darken: #0743A4;
    --tblr-primary-text-emphasis: #0743A4;
    --tblr-primary-bg-subtle: #F2F7FF;
    --tblr-primary-border-subtle: #C9DEFF;
    --tblr-tabler: #1550B5;
    --tblr-link-color: #1550B5;
    --tblr-link-color-rgb: 21, 80, 181;
    --tblr-link-hover-color: #0743A4;
    --tblr-link-hover-color-rgb: 7, 67, 164;
    --tblr-focus-ring-color: rgba(0, 129, 206, .35);
    --bg-switch-checked-color: #1550B5;

    /* Estados — todos com texto branco ≥ 5,7:1 e texto sobre o próprio `-lt` ≥ 4,9:1. */
    --tblr-secondary: #57637D;
    --tblr-secondary-rgb: 87, 99, 125;
    --tblr-secondary-fg: #FFFFFF;
    --tblr-muted: #57637D;
    --tblr-muted-rgb: 87, 99, 125;
    --tblr-success: #007557;               /* teal-700 */
    --tblr-success-rgb: 0, 117, 87;
    --tblr-success-fg: #FFFFFF;
    --tblr-success-darken: #005A42;
    --tblr-info: #0068A7;                  /* cyan-700 */
    --tblr-info-rgb: 0, 104, 167;
    --tblr-info-fg: #FFFFFF;
    --tblr-warning: #8A5600;               /* amber-700 — o Tabler põe texto branco em warning */
    --tblr-warning-rgb: 138, 86, 0;
    --tblr-warning-fg: #FFFFFF;
    --tblr-danger: #B7191C;                /* red-700 */
    --tblr-danger-rgb: 183, 25, 28;
    --tblr-danger-fg: #FFFFFF;
    --tblr-danger-darken: #92000B;
    --tblr-teal: #005A42;                  /* teal-800 — "pago", "estorno" */
    --tblr-teal-rgb: 0, 90, 66;
    --tblr-teal-fg: #FFFFFF;
    --tblr-orange: #984B16;                /* derivada, matiz 50° — "exige justificativa" */
    --tblr-orange-rgb: 152, 75, 22;
    --tblr-orange-fg: #FFFFFF;
    --tblr-dark: #172033;
    --tblr-dark-rgb: 23, 32, 51;
    --tblr-light: #F5F7FA;
    --tblr-form-valid-color: #007557;
    --tblr-form-valid-border-color: #007557;
    --tblr-form-invalid-color: #B7191C;
    --tblr-form-invalid-border-color: #B7191C;
}

/*
 * ESCURO — o padrão da área autenticada.
 *
 * Superfícies (família navy estendida):
 *   #0C1322 fundo da página · #11192A campo e rodapé de cartão (recuo) ·
 *   #172033 cartão, menu e barra (NEXUS NAVY) · #1B2539 cabeçalho de tabela ·
 *   #1F2A3F linha ativa · #2A354C borda decorativa (navy-900).
 *
 * Texto (pior caso medido, sobre #1F2A3F):
 *   #E9EDF4 corpo 12,24:1 · #A0ADC6 secundário 6,36:1 · #8694AF atenuado 4,70:1.
 *
 * Ação e estados (sobre o cartão · sobre o próprio `-lt` · texto navy sobre o
 * preenchimento):
 *   primary #7CACFF 7,13 · 5,95 · 7,13     success #53C49D 7,55 · 6,31 · 7,55
 *   info    #63B4F7 7,28 · 6,04 · 7,28     warning #E89928 6,99 · 5,96 · 6,99
 *   danger  #FA857A 6,74 · 5,77 · 6,74     teal #8AD9BA 9,85 · orange #F6A55F 8,11
 *
 * Não-texto: borda de campo #6F7C96 3,87:1 · foco #63B4F7 7,28:1.
 */
@media screen {
    [data-bs-theme=dark],
    [data-menu-theme=dark] {
        color-scheme: dark;

        --nx-control-border: #6F7C96;     /* navy-600 — 3,87:1 sobre o cartão */
        --nx-focus: #63B4F7;              /* cyan-400 — 7,28:1 sobre o cartão */

        --tblr-body-bg: #0C1322;
        --tblr-body-bg-rgb: 12, 19, 34;
        --tblr-body-color: #E9EDF4;
        --tblr-body-color-rgb: 233, 237, 244;
        --tblr-emphasis-color: #FFFFFF;
        --tblr-emphasis-color-rgb: 255, 255, 255;
        --tblr-heading-color: #F5F7FA;
        --tblr-secondary-color: #A0ADC6;
        --tblr-secondary-color-rgb: 160, 173, 198;
        --tblr-tertiary-color: #8694AF;
        --tblr-tertiary-color-rgb: 134, 148, 175;
        --tblr-secondary-bg: #1B2539;
        --tblr-secondary-bg-rgb: 27, 37, 57;
        --tblr-tertiary-bg: #11192A;
        --tblr-tertiary-bg-rgb: 17, 25, 42;

        --tblr-bg-surface: #172033;
        --tblr-bg-surface-primary: #172033;
        --tblr-bg-surface-secondary: #11192A;
        --tblr-bg-surface-tertiary: #1B2539;
        --tblr-bg-surface-dark: #0C1322;
        --tblr-bg-forms: #11192A;
        --tblr-active-bg: #1F2A3F;
        --tblr-bg-main-color: #0C1322;

        --tblr-border-color: #2A354C;
        --tblr-border-color-translucent: rgba(160, 173, 198, .16);
        --tblr-border-active-color: #6F7C96;
        --tblr-dark-mode-border-color: #2A354C;
        --tblr-dark-mode-border-color-translucent: rgba(160, 173, 198, .16);
        --tblr-dark-mode-border-active-color: #6F7C96;
        --tblr-light-border-subtle: #2A354C;
        --tblr-navbar-border-color: #2A354C;

        --tblr-shadow-card: 0 1px 2px rgba(3, 7, 17, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
        --tblr-shadow-card-hover: 0 10px 28px rgba(3, 7, 17, .55);
        --tblr-shadow-dropdown: 0 18px 44px rgba(3, 7, 17, .6), 0 0 0 1px rgba(160, 173, 198, .12);
        --tblr-box-shadow: 0 1px 2px rgba(3, 7, 17, .45);
        --tblr-shadow-input: none;
        --nx-table-head-bg: #1B2539;         /* a superfície que este arquivo já reservava ao cabeçalho de tabela */
        --atlas-table-head-color: #A0ADC6;   /* 6,78:1 sobre #1B2539 */

        --tblr-primary: #7CACFF;             /* blue-400 */
        --tblr-primary-rgb: 124, 172, 255;
        --tblr-primary-fg: #172033;
        --tblr-primary-darken: #A6C7FF;      /* no escuro o hover CLAREIA: sobe o contraste com o texto navy */
        --tblr-primary-lt: color-mix(in oklab, var(--tblr-primary) 10%, transparent);
        --tblr-primary-text-emphasis: #C9DEFF;
        --tblr-primary-bg-subtle: rgba(124, 172, 255, .12);
        --tblr-primary-border-subtle: rgba(124, 172, 255, .35);
        --tblr-tabler: #7CACFF;
        --tblr-link-color: #A6C7FF;          /* blue-300 — 9,48:1, o link do manual sobre escuro */
        --tblr-link-color-rgb: 166, 199, 255;
        --tblr-link-hover-color: #C9DEFF;
        --tblr-link-hover-color-rgb: 201, 222, 255;
        --tblr-focus-ring-color: rgba(99, 180, 247, .45);
        --bg-switch-checked-color: #7CACFF;

        --tblr-secondary: #A0ADC6;
        --tblr-secondary-rgb: 160, 173, 198;
        --tblr-secondary-fg: #172033;
        --tblr-secondary-lt: color-mix(in oklab, var(--tblr-secondary) 10%, transparent);
        --tblr-muted: #8694AF;
        --tblr-muted-rgb: 134, 148, 175;
        --tblr-success: #53C49D;             /* teal-400 */
        --tblr-success-rgb: 83, 196, 157;
        --tblr-success-fg: #172033;
        --tblr-success-darken: #8AD9BA;
        --tblr-success-lt: color-mix(in oklab, var(--tblr-success) 10%, transparent);
        --tblr-info: #63B4F7;                /* cyan-400 */
        --tblr-info-rgb: 99, 180, 247;
        --tblr-info-fg: #172033;
        --tblr-info-lt: color-mix(in oklab, var(--tblr-info) 10%, transparent);
        --tblr-warning: #E89928;             /* amber-400 */
        --tblr-warning-rgb: 232, 153, 40;
        --tblr-warning-fg: #172033;
        --tblr-warning-lt: color-mix(in oklab, var(--tblr-warning) 10%, transparent);
        --tblr-danger: #FA857A;              /* red-400 */
        --tblr-danger-rgb: 250, 133, 122;
        --tblr-danger-fg: #172033;
        --tblr-danger-darken: #FFADA3;
        --tblr-danger-lt: color-mix(in oklab, var(--tblr-danger) 10%, transparent);
        --tblr-teal: #8AD9BA;                /* teal-300 */
        --tblr-teal-rgb: 138, 217, 186;
        --tblr-teal-fg: #172033;
        --tblr-teal-lt: color-mix(in oklab, var(--tblr-teal) 10%, transparent);
        --tblr-orange: #F6A55F;
        --tblr-orange-rgb: 246, 165, 95;
        --tblr-orange-fg: #172033;
        --tblr-orange-lt: color-mix(in oklab, var(--tblr-orange) 10%, transparent);
        /* `dark` continua escuro: o Backpack o usa como fundo de menu no escuro. */
        --tblr-dark: #0C1322;
        --tblr-dark-rgb: 12, 19, 34;
        --tblr-light: #F5F7FA;
        --tblr-form-valid-color: #53C49D;
        --tblr-form-valid-border-color: #53C49D;
        --tblr-form-invalid-color: #FA857A;
        --tblr-form-invalid-border-color: #FA857A;
    }
}

/*
|------------------------------------------------------------------------------
| 3. CORREÇÕES DO MODO ESCURO
|------------------------------------------------------------------------------
|
| `color-adjustments.css` e `style.css` do tema foram escritos para a paleta
| roxa do Backpack, e no escuro deixam defeitos de LEITURA — não de gosto.
| Cada regra abaixo repete o seletor do pacote (mesma especificidade, carregada
| depois) ou o supera por pouco, nunca com um seletor genérico que atropele o
| resto. O comentário diz o que o pacote fazia.
*/
@media screen {
    /*
     * O FUNDO DA PÁGINA: navy com o brilho da marca no topo — teal à esquerda,
     * azul ao centro, violeta à direita, como a diagonal do símbolo.
     *
     * Pintado uma vez e rola com a página: nada de `background-attachment:
     * fixed`, que repinta a cada rolagem. Texto atenuado (#8694AF) sobre o
     * ponto mais claro do brilho: 4,92:1.
     */
    [data-bs-theme=dark] body {
        background-color: var(--tblr-body-bg);
        background-image:
            radial-gradient(56rem 26rem at 6% -8rem, rgba(32, 181, 138, .12), transparent 70%),
            radial-gradient(48rem 24rem at 94% -10rem, rgba(112, 64, 224, .14), transparent 70%),
            radial-gradient(64rem 22rem at 50% -12rem, rgba(21, 80, 181, .18), transparent 72%);
        background-repeat: no-repeat;
    }

    /*
     * CAMPOS. O pacote pinta o TEXTO DIGITADO a 50% de opacidade (4,35:1,
     * reprova AA) e a borda com `primary-border-subtle`, que no tema original é
     * roxo. Aqui: texto cheio e borda de controle com 3,87:1.
     */
    [data-bs-theme=dark] input:not(input[type=hidden]).form-control:not(:disabled),
    [data-bs-theme=dark] textarea.form-control:not(:disabled),
    [data-bs-theme=dark] select.form-control:not(:disabled),
    [data-bs-theme=dark] select.form-select:not(:disabled) {
        background-color: var(--tblr-bg-forms);
        border-color: var(--nx-control-border);
        color: var(--tblr-body-color);
    }

    [data-bs-theme=dark] input:not(input[type=hidden]).form-control:not(:disabled):focus,
    [data-bs-theme=dark] textarea.form-control:not(:disabled):focus,
    [data-bs-theme=dark] select.form-control:not(:disabled):focus,
    [data-bs-theme=dark] select.form-select:not(:disabled):focus {
        border-color: var(--tblr-primary);
        box-shadow: 0 0 0 3px var(--tblr-focus-ring-color);
    }

    /*
     * `rgba(var(--tblr-light-text), .5)` usa uma variável que o Tabler 1.4 não
     * tem: a declaração era descartada e o placeholder saía da cor do texto
     * digitado — um campo vazio parecia preenchido. navy-500: 5,74:1.
     */
    [data-bs-theme=dark] ::placeholder,
    [data-bs-theme=dark] .form-control::placeholder {
        color: #8694AF !important;
        opacity: 1;
    }

    [data-bs-theme=dark] span.input-group-text {
        border-color: var(--nx-control-border);
    }

    /*
     * CAIXA DE MARCAR E RÁDIO. Desmarcada, o pacote a enchia com a cor de
     * borda primária — parecia marcada. E a borda translúcida do Tabler some
     * sobre navy (1,3:1); controle precisa de 3:1 para ser encontrado.
     */
    [data-bs-theme=dark] input[type=checkbox]:not(:checked).form-check-input,
    [data-bs-theme=dark] input[type=radio]:not(:checked).form-check-input {
        background-color: var(--tblr-bg-forms);
        border: 1px solid var(--nx-control-border);
    }

    /* O visto e o ponto do Tabler são BRANCOS: sobre o azul claro, 2,3:1. Os mesmos desenhos, em navy. */
    [data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
        --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23172033' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
    }

    [data-bs-theme=dark] .form-check-input:checked[type=radio] {
        --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23172033' cx='8' cy='8' /%3e%3c/svg%3e");
    }

    [data-bs-theme=dark] .form-switch .form-check-input:checked {
        --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23172033'/%3e%3c/svg%3e");
    }

    /*
     * SELECT2 (campos de relação e filtros do CRUD). As variáveis do pacote
     * apontam para a mesma `--tblr-light-text` inexistente, e a opção destacada
     * põe texto branco sobre a cor primária — que aqui é clara.
     */
    html[data-bs-theme=dark] {
        --bp-select2-container-border-color: var(--nx-control-border);
        --bp-select2-focus-color: var(--tblr-body-color);
        --bp-select2-dropdown-bg: var(--tblr-bg-surface);
        --bp-select2-option-selected-bg: #1F2A3F;
        --bp-select2-option-selected-color: var(--tblr-primary);
        --bp-select2-search-bg: var(--tblr-bg-forms);
        --bp-select2-search-color: var(--tblr-body-color);
        --bp-select2-rendered-color: var(--tblr-body-color);
        --bp-select2-placeholder-color: #8694AF;
        --bp-select2-choice-color: #172033;
        --bp-select2-choice-border-color: var(--tblr-primary);
        --bp-select2-selection-border-color: var(--nx-control-border);
        --select2-selected-item-background: var(--tblr-primary);
        --select2-selected-item-color: #172033;
        --bp-form-disabled-color: rgba(233, 237, 244, .5);
        --bp-tinymce-content-bg: #11192A;
        --bp-tinymce-content-color: #E9EDF4;
    }

    [data-bs-theme=dark] span.select2-selection.select2-selection--single,
    [data-bs-theme=dark] .select2-selection.select2-selection--multiple ul.select2-selection__rendered {
        border-color: var(--nx-control-border) !important;
        border-radius: var(--tblr-border-radius) !important;
    }

    /* PAGINAÇÃO: a página atual vinha com texto claro sobre o azul claro. */
    [data-bs-theme=dark] .pagination {
        --tblr-pagination-active-color: var(--tblr-primary-fg);
    }

    [data-bs-theme=dark] ul.pagination li.paginate_button.page-item.active a.page-link {
        color: var(--tblr-primary-fg) !important;
    }

    /*
     * RETORNO DE HOVER. `style.css` zera o fundo de TODO link em hover no escuro
     * (`a:not(.btn):hover { background-color: transparent }`) — e com ele o
     * realce dos itens de menu e das linhas clicáveis do painel.
     */
    [data-bs-theme=dark] a.dropdown-item:not(.btn):hover,
    [data-bs-theme=dark] a.dropdown-item:not(.btn):focus-visible,
    [data-bs-theme=dark] a.list-group-item-action:not(.btn):hover {
        background-color: rgba(160, 173, 198, .10);
        color: var(--tblr-emphasis-color);
    }

    [data-bs-theme=dark] .dropdown-item.active,
    [data-bs-theme=dark] a.dropdown-item.active:not(.btn):hover {
        background-color: rgba(124, 172, 255, .16);
        color: #FFFFFF;
    }

    /* `bg-dark-lt` ("cancelado", "arquivado") escreve com a cor `dark`: navy sobre navy. 7,58:1. */
    [data-bs-theme=dark] .bg-dark-lt {
        color: #BCC6DA !important;
        background-color: rgba(188, 198, 218, .12) !important;
    }

    [data-bs-theme=dark] .table {
        --tblr-table-hover-bg: rgba(160, 173, 198, .06);
        --tblr-table-striped-bg: rgba(160, 173, 198, .04);
    }

    /* A confirmação de exclusão do CRUD (SweetAlert): título e texto herdavam cinza-escuro. */
    [data-bs-theme=dark] .swal-title,
    [data-bs-theme=dark] .swal-text {
        color: var(--tblr-body-color);
    }
}

/*
 * O "CANCELAR" DA CONFIRMAÇÃO DO CRUD — nos dois modos.
 *
 * `style.css` força `color: #fff !important` num botão que o SweetAlert pinta
 * de #EFEFEF: branco sobre cinza-claro, 1,1:1. O defeito já existia no claro;
 * aqui o botão ganha o fundo e o texto medidos do tom secundário.
 */
.swal-button--cancel,
.swal-button--cancel:not([disabled]):hover {
    background-color: var(--tblr-secondary);
    color: var(--tblr-secondary-fg) !important;
}

/*
|------------------------------------------------------------------------------
| O CABEÇALHO DE TABELA TEM FUNDO — nos dois modos
|------------------------------------------------------------------------------
|
| O tema QUER pintar o cabeçalho: `style.css` declara
| `background: var(--tblr-bg-surface-tertiary)` em `.table thead th`. Seis
| linhas ANTES, no mesmo arquivo e no mesmo seletor, ele declara
| `background-color: transparent !important` — e `!important` vence a declaração
| normal que vem depois, não importa a ordem. O cabeçalho fica transparente, e a
| intenção do pacote nunca chega à tela.
|
| Isso não é decoração, por dois motivos:
|
|   · O CABEÇALHO DA LISTA FLUTUA. O CRUD roda com a extensão FixedHeader do
|     DataTables (`useFixedHeader` em `config/backpack/operations/list.php`): ao
|     rolar, uma CÓPIA do cabeçalho fica presa no topo, POR CIMA das linhas.
|     Cabeçalho sem fundo próprio deixa as linhas passarem por baixo e serem
|     lidas através dele — é o defeito clássico do cabeçalho preso.
|   · A MEDIÇÃO DESTE ARQUIVO SUPÕE ESTE FUNDO. `--atlas-table-head-color` está
|     anotado como "7,34:1 sobre navy-100" no claro e "6,78:1 sobre #1B2539" no
|     escuro. Sobre o cartão — #FFFFFF e #172033 — os pares reais são outros. O
|     fundo que faltava é o que torna a anotação verdadeira.
|
| É também o §5.7 do design system: "Cabeçalho: fundo navy-100, texto navy-800
| (7,34)".
|
| `!important` porque a declaração do pacote também é `!important`: sem ele esta
| regra perde. Mesma razão do `text-capitalize` do título, mais abaixo.
|
| NÃO ACRESCENTAR `position: sticky` AQUI, e o motivo é de mecanismo:
|
|   · na lista do CRUD quem prende o cabeçalho já é o FixedHeader, e a soma dos
|     dois desenha DOIS cabeçalhos;
|   · nas tabelas de Blade próprio (`<x-table>`) o `sticky` não pegaria: elas
|     vivem dentro de `.table-responsive`, e `overflow-x: auto` faz do wrapper o
|     scrollport do `sticky` — um scrollport que nunca rola na vertical, porque
|     quem rola é a página. Prender o cabeçalho ali é mexer no componente, não
|     no CSS.
*/
.table thead th,
.table tfoot th {
    background-color: var(--nx-table-head-bg) !important;
}

/*
|------------------------------------------------------------------------------
| 4. ACABAMENTO — tipografia, barra superior, marca, cabeçalho e cartões
|------------------------------------------------------------------------------
*/

/* O foco visível é requisito: cyan-600 no claro (4,17:1), cyan-400 no escuro (7,28:1). */
:focus-visible {
    outline: 2px solid var(--nx-focus);
    outline-offset: 2px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * TÍTULOS EM MANROPE, TEXTO EM INTER — a dupla do site público (§3.1).
 *
 * Só onde há título: página, cartão, estado vazio e o número do indicador.
 * Em corpo pequeno a Manrope perde legibilidade, e ali a Inter continua.
 */
h1,
h2,
.h1,
.h2,
.page-title,
.card-title,
.empty-title,
.nx-kpi-value,
[bp-section=page-heading] {
    font-family: var(--nx-font-display);
    letter-spacing: -0.015em;
}

.page-header h1,
[bp-section=page-heading] {
    font-weight: 700;
    color: var(--tblr-heading-color);
}

.card-title {
    font-weight: 600;
}

/* Rótulo de botão em 600 (§5.1): em 500 ele se confunde com texto corrido. */
.btn {
    --tblr-btn-font-weight: 600;
}

.dropdown-menu {
    --tblr-dropdown-border-radius: var(--tblr-border-radius-lg);
}

/*
 * CARTÕES — borda de um pixel e, no escuro, um brilho de 2,5% no topo: o
 * bastante para o cartão se separar do fundo sem sombra pesada.
 */
.card {
    --tblr-card-border-color: var(--tblr-border-color);
    --tblr-card-box-shadow: var(--tblr-shadow-card);
}

@media screen {
    [data-bs-theme=dark] .card {
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 7rem);
    }
}

/*
 * O INDICADOR CLICÁVEL responde ao ponteiro: borda na cor de ação e 1px de
 * elevação, em 150ms (§7: movimento só como retorno de estado).
 */
.nx-kpi {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.nx-kpi .card {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.nx-kpi:hover .card,
a.nx-kpi:focus-visible .card {
    border-color: rgba(var(--tblr-primary-rgb), .6);
    box-shadow: var(--tblr-shadow-card-hover);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    a.nx-kpi .card {
        transition: none;
    }

    a.nx-kpi:hover .card,
    a.nx-kpi:focus-visible .card {
        transform: none;
    }
}

.nx-kpi-value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
}

/*
|------------------------------------------------------------------------------
| A BARRA SUPERIOR NUMA LINHA SÓ — navy nos dois modos
|------------------------------------------------------------------------------
|
| Marca, menu, sino e usuário na mesma faixa. O menu é agrupado por área para
| caber; o que estas regras garantem é que, se faltar espaço, nada QUEBRA para
| uma segunda linha nem se sobrepõe:
|
|   · abaixo de 1280px a PALAVRA da marca sai e o símbolo fica — medido: com a
|     palavra, em 1200px o último grupo do menu encostava no sino e o nome do
|     usuário quebrava em duas linhas;
|   · entre 992px e 1199px saem também os ícones do menu, e o menu do usuário
|     mostra só as iniciais (isso já é do tema);
|   · o nome do usuário tem largura máxima, com reticências — nome social longo
|     não empurra o menu.
|
| A faixa flutua sobre o fundo como a pele `atlas` desenha (margem, raio,
| borda). O seletor com id é o do tema; a classe a mais é o que o faz vencer.
*/
body[bp-layout="horizontal"] .single-top-bar #navbar-menu .navbar.nx-topbar,
.navbar.nx-topbar-mobile {
    --tblr-navbar-bg: #172033;
    --tblr-navbar-color: #BCC6DA;          /* navy-300 — 9,47:1 */
    --tblr-navbar-hover-color: #FFFFFF;
    --tblr-navbar-active-color: #FFFFFF;
    background: #172033;
    color: #BCC6DA;
    border: 1px solid rgba(160, 173, 198, .14);
    box-shadow: 0 8px 24px rgba(3, 7, 17, .22);
}

.navbar.nx-topbar-mobile {
    border-width: 0 0 1px;
    box-shadow: none;
}

.nx-topbar-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .25rem;
}

/* A marca: símbolo com 28px e palavra com 14px — a proporção da assinatura horizontal. */
.nx-brand {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}

.nx-marca {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
}

.nx-marca-simbolo {
    width: auto;
    height: 28px;
}

.nx-marca-nome {
    width: auto;
    height: 14px;
}

.nx-menu-nav {
    min-width: 0;
}

.nx-menu {
    flex-direction: row;
    flex-wrap: nowrap;
}

.nx-menu > .nav-item {
    position: relative;
}

.nx-menu > .nav-item > .nav-link {
    white-space: nowrap;
    border-radius: var(--tblr-border-radius);
}

.nx-menu .nav-icon {
    margin-right: .375rem;
}

/* Hover e item aberto: branco sobre um véu de 6% — vence o `a:not(.btn):hover` do tema. */
.nx-topbar .nx-menu > .nav-item > .nav-link,
.nx-topbar-mobile .nx-tools .nav-link,
.nx-topbar .nx-tools .nav-link {
    color: #BCC6DA;
}

.nx-topbar .nx-menu > .nav-item > .nav-link:hover,
.nx-topbar .nx-menu > .nav-item > .nav-link.show,
.nx-topbar .nx-menu > .nav-item.active > .nav-link,
.nx-topbar .nx-tools .nav-link:hover,
.nx-topbar-mobile .nx-tools .nav-link:hover {
    color: #FFFFFF;
}

.nx-topbar .nx-menu > .nav-item > .nav-link:hover,
.nx-topbar .nx-menu > .nav-item > .nav-link.show {
    background-color: rgba(255, 255, 255, .06);
}

/*
 * O ITEM ATIVO GANHA A BARRA DA MARCA — um dos três lugares em que o manual
 * admite o gradiente na interface interna (§7, "barra ativa da navegação"). Ela
 * substitui o sublinhado de 2px na cor primária que o Tabler desenha.
 */
.navbar-expand-lg .nx-menu > .nav-item.active::after {
    right: .75rem;
    bottom: -.3125rem;
    left: .75rem;
    height: 2px;
    border: 0;
    border-radius: 2px;
    background: var(--nx-gradient-brand);
}

.nx-tools {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    .nx-topbar .nx-marca-nome {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .nx-menu > .nav-item > .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }

    .nx-menu .nav-icon {
        display: none;
    }
}

.nx-menu-dropdown {
    padding: .375rem;
}

.nx-menu-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    border-radius: 6px;
}

/* As iniciais sobre o gradiente ESCURO da marca: branco com 8,25:1 no pior ponto (§1.10). */
.nx-user .avatar {
    background-image: var(--nx-gradient-dark);
    color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.nx-topbar .nx-user-name,
.nx-topbar-mobile .nx-user-name {
    max-width: 12rem;
    overflow: hidden;
    color: #F5F7FA;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1399.98px) {
    .nx-topbar .nx-user-name {
        max-width: 10rem;
    }
}

/* Texto secundário na barra e nos menus dela: navy-400, 7,19:1 sobre navy. */
.nx-topbar .nx-tools .text-secondary,
.nx-topbar-mobile .text-secondary {
    color: #A0ADC6 !important;
}

/* O sino e o contador; o menu do usuário. */
.nx-bell-icon {
    font-size: 1.35rem;
}

.nx-bell-count {
    position: absolute;
    top: 0;
    right: -.125rem;
    min-width: 1.15rem;
    padding: .15rem .3rem;
    border-radius: 999px;
    font-size: .625rem;
    line-height: 1;
}

.nx-bell-menu {
    width: 23rem;
    max-width: calc(100vw - 2rem);
    padding: 0;
}

.nx-bell-list {
    max-height: 60vh;
    overflow-y: auto;
}

/* O ícone de ajuda — mesmo tamanho do sino ao lado, mesmo painel estreito. */
.nx-guide-icon {
    font-size: 1.35rem;
}

.nx-guide-menu {
    width: 18rem;
    max-width: calc(100vw - 2rem);
    padding: 0;
}

/*
 * A LINHA DE PAPEL DO GUIA DA PLATAFORMA — `<details>` nativo com cara de
 * `.card`. O marcador padrão do navegador (o triângulo) some porque já existe
 * o `.nx-guide-chevron` ao lado, e ele gira quando o `<details>` abre — sem
 * JavaScript nenhum, é `[open]` puro de CSS.
 */
.nx-guide-summary {
    cursor: pointer;
    list-style: none;
}

.nx-guide-summary::-webkit-details-marker {
    display: none;
}

.nx-guide-summary:hover {
    background: var(--tblr-bg-surface-secondary);
}

.nx-guide-chevron {
    transition: transform .15s ease;
}

.nx-guide-details[open] .nx-guide-chevron {
    transform: rotate(180deg);
}

.nx-empty-icon {
    font-size: 2rem;
}

.nx-user-menu {
    min-width: 15rem;
}

.nx-user-role {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * O TÍTULO DAS TELAS DE CATÁLOGO SEM `text-capitalize`.
 *
 * O Backpack põe a classe no `<h1>` de toda operação de CRUD, e ela serve ao
 * inglês: "Categorias docentes" saía "Categorias Docentes". Os títulos já
 * chegam escritos como devem ser lidos — mesma decisão da trilha.
 *
 * `!important` porque o utilitário do Bootstrap também é `!important`: sem
 * ele esta regra perdia, e o título continuava capitalizado (medido no
 * navegador em `programa/catalogos/categorias-docentes`).
 */
h1[bp-section="page-heading"].text-capitalize {
    text-transform: none !important;
}

/*
|------------------------------------------------------------------------------
| O QUE O TABLER NÃO TEM — e só isso
|------------------------------------------------------------------------------
|
| Entra aqui o utilitário que o framework REALMENTE não oferece, nunca uma
| versão própria do que ele já desenha.
*/

/*
 * Texto guardado em `textarea` — justificativa de banca, parecer de recurso,
 * observação de candidatura — chega com quebras de linha que o autor digitou.
 * Sem `pre-line`, o HTML as colapsa em espaço e três parágrafos viram um bloco
 * corrido: o conteúdo não se perde, mas a leitura sim.
 */
.nx-pre-line {
    white-space: pre-line;
}

/*
 * Título de trabalho acadêmico passa de 200 caracteres com frequência. Numa
 * tabela de seis colunas, um título por extenso produz a linha de sete alturas
 * ao lado de linhas de uma — e a varredura vertical deixa de funcionar. Duas
 * linhas bastam para reconhecer o trabalho; o título inteiro está no detalhe.
 * `text-truncate` do Bootstrap corta em UMA linha, cedo demais.
 */
.nx-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * A CAIXA DE MARCAR CONTINUA QUADRADA.
 *
 * O Tabler usa `--tblr-border-radius` também na caixa de marcar, que tem 20px
 * de lado. Com o raio dos botões, ela fica redonda o bastante para parecer
 * rádio — e a pessoa lê a forma antes do rótulo: "Manter conectado" desenhado
 * como rádio sugere que existe outra opção. O rádio de verdade segue redondo.
 */
.form-check-input[type="checkbox"] {
    border-radius: 4px;
}

/*
 * O TEXTO DE AJUDA NÃO MEXE NO CAMPO.
 *
 * A ajuda mora DEPOIS do campo nas duas áreas — `.form-hint` em `x-field` e
 * `.help-block` no Backpack —, e por isso os campos de uma mesma linha começam
 * na mesma altura. O que falta a CSS garantir são três coisas, todas escopadas
 * a formulário:
 *
 * 1. PALAVRA LONGA QUEBRA. Um endereço, uma chave como `production_submission`
 *    ou um nome de arquivo não têm onde quebrar, e numa coluna `col-md-6`
 *    alargavam a coluna até empurrar a vizinha para fora da linha.
 * 2. A COLUNA NÃO CRESCE PELO CONTEÚDO. Item de `.row` é item flex, e item
 *    flex não encolhe abaixo do conteúdo mínimo sem `min-width: 0`.
 * 3. AS DUAS ÁREAS FALAM IGUAL. O `common.css` do Backpack pinta `.help-block`
 *    com um cinza fixo (#73818f) que no escuro fica abaixo do contraste; a
 *    ajuda passa a usar o texto secundário do tema, como `.form-hint`.
 *
 * E o espaço entre campos: o wrapper padrão do Backpack é
 * `form-group col-sm-12 mb-3`, e o catálogo que declara a própria coluna
 * (`col-md-6`) perdia o `mb-3` — os campos lado a lado ficavam mais juntos que
 * os de linha inteira. A margem vem aqui, uma vez, e não em cada controller.
 */
form .form-hint,
form .help-block {
    overflow-wrap: anywhere;
}

form .form-control + .form-hint,
form .form-select + .form-hint,
form .nx-data + .form-hint,
form .invalid-feedback + .form-hint,
form .form-check + .form-hint {
    margin-top: .25rem;
}

form .help-block {
    color: var(--tblr-secondary);
}

form .row > [class*="col-"],
form .row > [bp-field-wrapper] {
    min-width: 0;
}

form .row > [bp-field-wrapper].form-group {
    margin-bottom: 1rem;
}

/*
 * O CALENDÁRIO POR TRÁS DO CAMPO DE DATA (`components/partials/campo-de-data`).
 *
 * O campo à vista é texto em `dd/mm/aaaa`; o seletor nativo fica exatamente
 * sobre ele, invisível e sem receber clique, para que o calendário aberto por
 * `showPicker()` apareça ancorado no campo que a pessoa clicou. `display: none`
 * não serve: o navegador recusa abrir o calendário de um campo que não está
 * sendo desenhado. Escopado ao próprio componente — nada fora dele muda.
 */
.nx-data .nx-data-seletor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/*
|------------------------------------------------------------------------------
| PAINÉIS — os poucos utilitários que o Tabler não traz
|------------------------------------------------------------------------------
*/

/* Numeral tabular: coluna de número que não alinha é coluna que se lê duas vezes. */
table td,
table th,
.nx-num {
    font-variant-numeric: tabular-nums;
}

/* Barra horizontal de distribuição: o preenchimento vem no atributo `style`. */
.nx-bar {
    height: .5rem;
    border-radius: 999px;
    background: var(--tblr-border-color);
    overflow: hidden;
}

.nx-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--tblr-primary);
}

/* Colunas mensais em SVG: o texto do eixo herda a cor secundária. */
.nx-chart text {
    fill: var(--tblr-secondary);
    font-size: 11px;
}

/* A linha do tempo do discente. */
.nx-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nx-steps > li {
    flex: 1 1 8rem;
    min-width: 8rem;
    border-top: 3px solid var(--tblr-border-color);
    padding-top: .5rem;
}

.nx-steps > li.nx-step-done {
    border-top-color: var(--tblr-success);
}

.nx-steps > li.nx-step-current {
    border-top-color: var(--tblr-primary);
}

.nx-steps > li.nx-step-late {
    border-top-color: var(--tblr-danger);
}

/* Série mensal em colunas: a altura de cada coluna vem no atributo `style`. */
.nx-trend {
    display: flex;
    align-items: stretch;
    gap: .3rem;
    height: 8.5rem;
}

.nx-trend-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nx-trend-value {
    font-size: .6875rem;
    line-height: 1rem;
    text-align: center;
    color: var(--tblr-secondary);
    white-space: nowrap;
    overflow: hidden;
}

.nx-trend-track {
    position: relative;
    flex: 1 1 auto;
}

.nx-trend-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 2px;
    border-radius: .25rem .25rem 0 0;
    background: var(--tblr-primary);
}

/* O mês corrente em destaque: mais escuro no claro, mais claro no escuro. */
.nx-trend-col:last-child .nx-trend-bar {
    background: var(--tblr-primary-darken, var(--tblr-primary));
}

.nx-trend-label {
    margin-top: .25rem;
    font-size: .6875rem;
    text-align: center;
    color: var(--tblr-secondary);
    white-space: nowrap;
}

/* Agenda do painel: a data em bloco à esquerda. */
.nx-date {
    flex: 0 0 3rem;
    text-align: center;
    line-height: 1.1;
}

.nx-date-day {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
}

.nx-date-month {
    display: block;
    font-size: .6875rem;
    text-transform: uppercase;
    color: var(--tblr-secondary);
}

/*
|------------------------------------------------------------------------------
| 5. A ENTRADA — o palco da marca
|------------------------------------------------------------------------------
|
| Fundo navy com o brilho das cores da marca e uma grade fina que se apaga nas
| bordas. Só CSS: nenhuma imagem a mais e nada que dependa de JavaScript. O
| bloco tem `data-bs-theme="dark"` fixo (`resources/views/auth/layout.blade.php`).
|
| Contraste sobre o ponto mais claro do brilho: frase (#BCC6DA) 7,7:1; texto
| secundário (#A0ADC6) acima de 6:1; link (#A6C7FF) acima de 7:1.
*/
.nx-auth-body {
    background-color: #0C1322;
}

.nx-auth {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    background-color: #0C1322;
}

.nx-auth::before,
.nx-auth::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nx-auth::before {
    z-index: -2;
    background:
        radial-gradient(42rem 32rem at 12% 20%, rgba(32, 181, 138, .18), transparent 70%),
        radial-gradient(40rem 30rem at 88% 8%, rgba(112, 64, 224, .22), transparent 70%),
        radial-gradient(48rem 34rem at 62% 108%, rgba(21, 80, 181, .30), transparent 70%);
}

.nx-auth::after {
    z-index: -1;
    background-image:
        linear-gradient(rgba(160, 173, 198, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 173, 198, .07) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 45%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 30% 45%, #000 20%, transparent 75%);
}

.nx-auth-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(160, 173, 198, .16);
    box-shadow: 0 24px 64px rgba(3, 7, 17, .55);
}

/* A barra de 3px no topo — o "cartão em destaque" do manual (§5.2). */
.nx-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--nx-gradient-brand);
}

.nx-auth-marca {
    border-radius: var(--tblr-border-radius);
}

/* A assinatura vertical com 300px de largura: a frase fica acima do mínimo de 120px do manual (§9.3). */
.nx-marca-assinatura {
    display: block;
    width: 18.75rem;
    max-width: 100%;
    height: auto;
}

.nx-auth-marca-compacta .nx-marca-simbolo {
    height: 40px;
}

.nx-auth-marca-compacta .nx-marca-nome {
    height: 20px;
}

.nx-auth-lead {
    max-width: 28rem;
    color: #BCC6DA;
    font-size: 1.0625rem;
    line-height: 1.6;
}