/* ─────────────────────────────────────────────────────────────────────────────
   WPX Fiscal Hub — Estilos customizados

   As variáveis vivem em `tokens.css`, carregado ANTES deste arquivo pelo
   `base.html`. O `:root` que existia aqui declarava os MESMOS nomes com valores
   diferentes dos do `base.html` (`--wpx-cinza` era #f0f4f8 aqui e #f5f6f8 lá),
   e como este arquivo era carregado por 5 páginas via `extra_head` — depois do
   `<style>` do base — o fundo mudava de tom entre /dashboard e /nfs.

   ── Por que existe uma "camada de reskin" de componentes do Bootstrap ────────
   As 15 telas usam `.card`, `.btn`, `.table`, `.form-control` puros do
   Bootstrap. Revestir esses seletores aqui muda todas de uma vez, sem que um
   agente precise abrir cada template. As ondas seguintes (macros e telas)
   trocam a marcação; esta camada é o que faz o sistema já parecer o mockup
   enquanto isso.

   Nenhum literal de cor abaixo — tudo sai de `tokens.css`.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Reskin dos componentes do Bootstrap
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cartão ─────────────────────────────────────────────────────────────────
   O mockup separa áreas por borda e fundo, não por sombra. Sombra forte numa
   tela cheia de tabelas vira ruído — por isso `--wpx-shadow-card` é 1 px. */
.card {
    background-color: var(--wpx-surface-card);
    border: 1px solid var(--wpx-border);
    border-radius: var(--wpx-radius-md);
    box-shadow: var(--wpx-shadow-card);
}

.card-header {
    background-color: var(--wpx-surface-card);
    border-bottom: 1px solid var(--wpx-border);
    padding: var(--wpx-space-4) var(--wpx-space-5);
    font-size: var(--wpx-fs-card-title);
    font-weight: var(--wpx-fw-semibold);
    color: var(--wpx-text);
}
.card-header:first-child {
    border-radius: var(--wpx-radius-md) var(--wpx-radius-md) 0 0;
}

.card-body   { padding: var(--wpx-space-5); }
.card-footer {
    background-color: var(--wpx-surface-card);
    border-top: 1px solid var(--wpx-border);
    padding: var(--wpx-space-4) var(--wpx-space-5);
}

.card-title {
    font-size: var(--wpx-fs-card-title);
    font-weight: var(--wpx-fw-semibold);
    color: var(--wpx-text);
}

/* Bootstrap pinta o header dessas variantes por cima; aqui só o raio importa. */
.card > .table:last-child { border-bottom-left-radius: var(--wpx-radius-md); }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-border-radius: var(--wpx-radius-sm);
    border-radius: var(--wpx-radius-sm);
    font-size: var(--wpx-fs-body);
    font-weight: var(--wpx-fw-medium);
    padding: 0.4375rem var(--wpx-space-4);
    transition: background-color var(--wpx-transition),
                border-color var(--wpx-transition),
                color var(--wpx-transition);
}
.btn-sm { font-size: var(--wpx-fs-small); padding: 0.25rem var(--wpx-space-3); }
.btn-lg { font-size: var(--wpx-fs-card-title); padding: var(--wpx-space-3) var(--wpx-space-6); }

.btn-primary {
    --bs-btn-bg: var(--wpx-primary);
    --bs-btn-border-color: var(--wpx-primary);
    --bs-btn-hover-bg: var(--wpx-primary-hover);
    --bs-btn-hover-border-color: var(--wpx-primary-hover);
    --bs-btn-active-bg: var(--wpx-primary-active);
    --bs-btn-active-border-color: var(--wpx-primary-active);
    --bs-btn-disabled-bg: var(--wpx-primary);
    --bs-btn-disabled-border-color: var(--wpx-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--wpx-primary);
    --bs-btn-border-color: var(--wpx-primary);
    --bs-btn-hover-bg: var(--wpx-primary);
    --bs-btn-hover-border-color: var(--wpx-primary);
    --bs-btn-active-bg: var(--wpx-primary-active);
    --bs-btn-active-border-color: var(--wpx-primary-active);
}

/* Secundário do mockup é um botão branco de borda, não o cinza do Bootstrap. */
.btn-outline-secondary {
    --bs-btn-color: var(--wpx-text);
    --bs-btn-border-color: var(--wpx-border-strong);
    --bs-btn-hover-color: var(--wpx-text-strong);
    --bs-btn-hover-bg: var(--wpx-surface-sunken);
    --bs-btn-hover-border-color: var(--wpx-border-strong);
    --bs-btn-active-color: var(--wpx-text-strong);
    --bs-btn-active-bg: var(--wpx-surface-sunken);
    --bs-btn-active-border-color: var(--wpx-border-strong);
}

.btn:focus-visible { box-shadow: 0 0 0 3px var(--wpx-focus-ring); }

/* ── Formulários ────────────────────────────────────────────────────────── */
.form-control, .form-select {
    font-size: var(--wpx-fs-body);
    color: var(--wpx-text);
    background-color: var(--wpx-surface-card);
    border: 1px solid var(--wpx-border-strong);
    border-radius: var(--wpx-radius-sm);
    padding: 0.4375rem var(--wpx-space-3);
}
/* O `padding` acima é atalho e zera o espaço que o Bootstrap reserva à direita
   para a seta do select — sem esta linha, o rótulo passa POR BAIXO da seta em
   todo select estreito do sistema. */
.form-select { padding-right: var(--wpx-space-8); }
.form-control:focus, .form-select:focus {
    border-color: var(--wpx-primary);
    box-shadow: 0 0 0 3px var(--wpx-focus-ring);
}
.form-control::placeholder { color: var(--wpx-text-subtle); }
.form-control-sm, .form-select-sm { font-size: var(--wpx-fs-small); }

.form-label {
    font-size: var(--wpx-fs-label);
    font-weight: var(--wpx-fw-medium);
    color: var(--wpx-text-label);
    margin-bottom: var(--wpx-space-1);
}
.form-text { font-size: var(--wpx-fs-small); color: var(--wpx-text-subtle); }

.input-group-text {
    font-size: var(--wpx-fs-body);
    color: var(--wpx-text-muted);
    background-color: var(--wpx-surface-sunken);
    border-color: var(--wpx-border-strong);
    border-radius: var(--wpx-radius-sm);
}

.form-check-input:checked {
    background-color: var(--wpx-primary);
    border-color: var(--wpx-primary);
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--wpx-focus-ring); }

/* ── Tabelas ─────────────────────────────────────────────────────────────
   Cabeçalho claro com rótulo escuro (o mockup não usa faixa navy). Linha de
   38 px vem do token, medida no mockup. */
.table {
    --bs-table-color: var(--wpx-text);
    --bs-table-border-color: var(--wpx-border);
    font-size: var(--wpx-fs-body);
    margin-bottom: 0;
}
.table > thead th {
    background-color: var(--wpx-surface-sunken);
    color: var(--wpx-text-label);
    font-size: var(--wpx-fs-label);
    font-weight: var(--wpx-fw-semibold);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--wpx-border-strong);
    white-space: nowrap;
}
.table > tbody > tr { vertical-align: middle; }
.table > :not(caption) > * > * { padding: var(--wpx-space-2) var(--wpx-space-4); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--wpx-surface-sunken); }

/* ── Células de número e de texto longo ──────────────────────────────────────
   Duas coisas estragam uma tabela de valores, e as duas apareceram na tela do
   BEM-I em 17/08/2026:

   • **valor quebrando em duas linhas.** "R$ 21.481,32" virava "R$" numa linha e
     "21.481,32" na outra, e a linha da tabela crescia. `.wpx-num` proíbe a
     quebra e liga `tabular-nums`, que dá a todos os dígitos a MESMA largura —
     sem isso os valores não alinham na vertical mesmo com `text-end`.
   • **texto longo empilhando.** A observação de um item tem de 0 a 200
     caracteres; deixá-la fluir faz cada linha ter uma altura diferente.
     `.wpx-cell-trunc` corta em UMA linha com reticências. Quem usa deve pôr o
     texto completo no `title` — cortar sem isso ESCONDE informação, e é
     justamente na mensagem comprida (a de erro) que ela importa.

   ⚠️ **`.wpx-cell-trunc` vai num `<div>` DENTRO da célula, não no `<td>`.** Numa
   tabela de layout automático (o padrão) o navegador dimensiona cada coluna pelo
   conteúdo e ignora o `max-width` da célula; com `nowrap` junto, a coluna cresce
   em vez de cortar e o resultado é pior que o problema original. Num elemento de
   bloco interno o limite vale, e a coluna passa a ser limitada por ele. */
.wpx-num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wpx-cell-trunc {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 1400px) {
    .wpx-cell-trunc { max-width: 14rem; }
}

/* ── Texto auxiliar ─────────────────────────────────────────────────────────
   As 15 telas usam `.text-muted` do Bootstrap, que aponta para
   `--bs-secondary-color` — um cinza que não é o nosso e não passa por
   `tokens.css`. Redirecionar aqui fecha o vazamento em todas de uma vez, sem
   que nenhuma precise trocar de classe. O `!important` é para empatar com o do
   próprio Bootstrap; `wpx.css` vem depois dele, então vence. */
.text-muted { color: var(--wpx-text-muted) !important; }

/* ── Alertas ────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--wpx-radius-md);
    border-width: 1px;
    font-size: var(--wpx-fs-body);
    padding: var(--wpx-space-3) var(--wpx-space-4);
}
.alert-success { --bs-alert-bg: var(--wpx-success-bg); --bs-alert-color: var(--wpx-success-fg); --bs-alert-border-color: var(--wpx-success-bg); }
.alert-danger  { --bs-alert-bg: var(--wpx-danger-bg);  --bs-alert-color: var(--wpx-danger-fg);  --bs-alert-border-color: var(--wpx-danger-bg); }
.alert-warning { --bs-alert-bg: var(--wpx-warn-bg);    --bs-alert-color: var(--wpx-warn-fg);    --bs-alert-border-color: var(--wpx-warn-bg); }
.alert-info    { --bs-alert-bg: var(--wpx-info-bg);    --bs-alert-color: var(--wpx-info-fg);    --bs-alert-border-color: var(--wpx-info-bg); }
.alert-secondary { --bs-alert-bg: var(--wpx-neutral-bg); --bs-alert-color: var(--wpx-neutral-fg); --bs-alert-border-color: var(--wpx-neutral-bg); }

/* ── Modal e dropdown ───────────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--wpx-border);
    border-radius: var(--wpx-radius-lg);
    box-shadow: var(--wpx-shadow-overlay);
}
.modal-header, .modal-footer { border-color: var(--wpx-border); }
.modal-title { font-size: var(--wpx-fs-h2); font-weight: var(--wpx-fw-semibold); color: var(--wpx-text-strong); }

.dropdown-menu {
    border: 1px solid var(--wpx-border);
    border-radius: var(--wpx-radius-md);
    box-shadow: var(--wpx-shadow-raised);
    font-size: var(--wpx-fs-body);
    padding: var(--wpx-space-1);
}
.dropdown-item { border-radius: var(--wpx-radius-sm); }
.dropdown-item:active { background-color: var(--wpx-primary); }

/* ── Abas ───────────────────────────────────────────────────────────────── */
.nav-tabs { border-bottom-color: var(--wpx-border-strong); }
.nav-tabs .nav-link {
    color: var(--wpx-text-muted);
    font-size: var(--wpx-fs-body);
    font-weight: var(--wpx-fw-medium);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--wpx-text); border-bottom-color: var(--wpx-border-strong); }
.nav-tabs .nav-link.active {
    color: var(--wpx-primary);
    background: none;
    border-bottom-color: var(--wpx-primary);
}

/* ── Paginação ──────────────────────────────────────────────────────────── */
.pagination { --bs-pagination-border-color: var(--wpx-border-strong); font-size: var(--wpx-fs-body); }
.pagination .page-link { color: var(--wpx-text); }
.pagination .page-link:hover { background-color: var(--wpx-surface-sunken); }
.pagination .page-item.active .page-link {
    background-color: var(--wpx-primary);
    border-color: var(--wpx-primary);
    color: var(--wpx-on-navy);
}

/* ── Barra de progresso ─────────────────────────────────────────────────── */
.progress { background-color: var(--wpx-surface-sunken); border-radius: var(--wpx-radius-pill); }
.progress-bar { background-color: var(--wpx-info-solid); }

/* ═══════════════════════════════════════════════════════════════════════════
   2. Componentes do hub
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Chips de estado ────────────────────────────────────────────────────────
   Par fundo+texto sempre — chip com cor só de fundo obriga a distinguir estado
   por matiz, o que a WCAG desaconselha. Todo chip leva ícone + texto + cor. */
.wpx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wpx-space-1);
    padding: 0.125rem var(--wpx-space-2);
    border-radius: var(--wpx-radius-pill);
    font-size: var(--wpx-fs-small);
    font-weight: var(--wpx-fw-medium);
    line-height: 1.6;
    white-space: nowrap;
}
.wpx-chip--info    { background: var(--wpx-info-bg);    color: var(--wpx-info-fg); }
.wpx-chip--warn    { background: var(--wpx-warn-bg);    color: var(--wpx-warn-fg); }
.wpx-chip--success { background: var(--wpx-success-bg); color: var(--wpx-success-fg); }
.wpx-chip--danger  { background: var(--wpx-danger-bg);  color: var(--wpx-danger-fg); }
.wpx-chip--neutral { background: var(--wpx-neutral-bg); color: var(--wpx-neutral-fg); }

/* ── Badges de classificação (marcação legada das telas de NF) ──────────── */
.badge {
    font-size: var(--wpx-fs-small);
    font-weight: var(--wpx-fw-medium);
    border-radius: var(--wpx-radius-pill);
    padding: 0.25rem var(--wpx-space-2);
}
.badge-pendente     { background-color: var(--wpx-neutral-bg) !important; color: var(--wpx-neutral-fg) !important; }
.badge-lancamento   { background-color: var(--wpx-info-bg)    !important; color: var(--wpx-info-fg)    !important; }
.badge-cancelada    { background-color: var(--wpx-neutral-bg) !important; color: var(--wpx-text)       !important; }
.badge-paytrack     { background-color: #EDE9FE              !important; color: #6D28D9              !important; }
.badge-lancada_ant  { background-color: var(--wpx-success-bg) !important; color: var(--wpx-success-fg) !important; }

/* ── Badge de status (tabela) — mesmo par fundo+texto dos chips ─────────── */
.badge-status-aguardando  { background-color: var(--wpx-warn-bg)    !important; color: var(--wpx-warn-fg)    !important; }
.badge-status-na_fila     { background-color: var(--wpx-info-bg)    !important; color: var(--wpx-info-fg)    !important; }
.badge-status-processando { background-color: var(--wpx-info-bg)    !important; color: var(--wpx-info-fg)    !important; }
.badge-status-sucesso     { background-color: var(--wpx-success-bg) !important; color: var(--wpx-success-fg) !important; }
.badge-status-erro        { background-color: var(--wpx-danger-bg)  !important; color: var(--wpx-danger-fg)  !important; }
.badge-status-ignorado    { background-color: var(--wpx-neutral-bg) !important; color: var(--wpx-neutral-fg) !important; }
.badge-status-cancelada   { background-color: var(--wpx-neutral-bg) !important; color: var(--wpx-text)       !important; }
.badge-status-paytrack    { background-color: #EDE9FE              !important; color: #6D28D9              !important; }

/* ── Linhas coloridas da tabela de NFs ─────────────────────────────────────
   Tom suave: a linha inteira pintada forte briga com o chip de estado, que é
   quem deve carregar a informação. */
.nf-cfop-pendente        { background-color: var(--wpx-warn-bg) !important; }
.nf-cfop-pendente:hover  { background-color: #FDEBCB !important; }
.nf-erro                 { background-color: var(--wpx-danger-bg) !important; }
.nf-erro:hover           { background-color: #FADCDC !important; }
.nf-sucesso              { background-color: var(--wpx-success-bg) !important; }
.nf-sucesso:hover        { background-color: #DCF1E2 !important; }
.nf-processando          { background-color: var(--wpx-info-bg) !important; }

/* ── Tabela de NFs ──────────────────────────────────────────────────────── */
.table-nfs { font-size: var(--wpx-fs-body); }
.table-nfs thead th {
    background-color: var(--wpx-surface-sunken);
    color: var(--wpx-text-label);
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
    border-bottom: 1px solid var(--wpx-border-strong);
}
.table-nfs tbody tr { vertical-align: middle; }
.table-nfs .chave-acesso {
    font-family: var(--wpx-font-mono);
    font-size: var(--wpx-fs-small);
    letter-spacing: 0.02em;
    word-break: break-all;
}

/* ── Robô — estado rodando ─────────────────────────────────────────────── */
.robo-ativo { animation: pulse-robo 1.5s ease-in-out infinite; }
@keyframes pulse-robo {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .robo-ativo { animation: none; }
}

/* ── Card de status do robô ────────────────────────────────────────────── */
.card-robo-rodando { border-left: 3px solid var(--wpx-success-solid); }
.card-robo-parado  { border-left: 3px solid var(--wpx-neutral-fg); }

/* ── Botão de iniciar lançamento ───────────────────────────────────────── */
.btn-iniciar-robo {
    font-size: var(--wpx-fs-card-title);
    padding: var(--wpx-space-3) var(--wpx-space-8);
    letter-spacing: 0.01em;
}

/* ── Chave de acesso formatada ────────────────────────────────────────── */
.chave-formatada {
    font-family: var(--wpx-font-mono);
    font-size: var(--wpx-fs-label);
    letter-spacing: 0.06em;
    background: var(--wpx-surface-sunken);
    border: 1px solid var(--wpx-border-strong);
    border-radius: var(--wpx-radius-sm);
    padding: var(--wpx-space-2) var(--wpx-space-3);
    word-break: break-all;
}

/* ── Barra de filtros ─────────────────────────────────────────────────── */
.filtros-bar {
    background: var(--wpx-surface-card);
    border: 1px solid var(--wpx-border);
    border-radius: var(--wpx-radius-md);
    padding: var(--wpx-space-3) var(--wpx-space-4);
}
.filtros-bar .form-select,
.filtros-bar .form-control { font-size: var(--wpx-fs-body); }

/* ── KPI ────────────────────────────────────────────────────────────────
   Sem a barra lateral colorida do estilo antigo: no mockup o KPI é um card
   limpo com ícone em quadrado suave. */
.kpi-card {
    background: var(--wpx-surface-card);
    border: 1px solid var(--wpx-border);
    border-radius: var(--wpx-radius-md);
    box-shadow: var(--wpx-shadow-card);
    /* Contexto para as `@container` abaixo: o número escala com o CARD, não com
       a janela. Sem isto, `vw` faria o número encolher ao abrir a barra lateral
       num monitor largo e estourar num estreito — o oposto do necessário. */
    container-type: inline-size;
}
.kpi-card .kpi-numero {
    font-size: var(--wpx-fs-kpi);
    font-weight: var(--wpx-fw-bold);
    color: var(--wpx-text-strong);
    line-height: var(--wpx-lh-tight);
    /* Dígitos de largura fixa: sem isto o número "dança" a cada atualização por
       JS, porque `1` é mais estreito que `8` na Inter. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* ⚠️ **Valor longo não cabe em 2rem.** Quatro KPIs numa linha dão card de ~325px;
   descontando padding e o quadrado do ícone sobram ~220px, e `R$ 528.775,19` em
   32px bold pede ~258px — estoura para fora do card (visto em 18/08/2026 na tela
   da folha). Encolher TODO `kpi-numero` seria pior: os contadores curtos do
   dashboard (`1248`, `12`) perderiam presença sem motivo.
   Então quem encolhe é só o valor longo, e a medida é `cqi` (1% da largura do
   card), o que faz a regra valer em qualquer grade — 2, 3 ou 4 por linha.
   Quem marca a classe é a macro `metric_card` (por tamanho do texto) ou
   `ajustarKpisLongos()` do `wpx.js`, para os KPIs preenchidos por JS. */
.kpi-card .kpi-numero--longo {
    font-size: clamp(1.15rem, 6.8cqi, var(--wpx-fs-kpi));
}
.kpi-card .kpi-label {
    font-size: var(--wpx-fs-small);
    font-weight: var(--wpx-fw-medium);
    color: var(--wpx-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Cabeçalho de página (H1 + subtítulo + ações) ─────────────────────── */
.wpx-page-header {
    display: flex;
    align-items: flex-start;
    gap: var(--wpx-space-4);
    margin-bottom: var(--wpx-space-6);
}
.wpx-page-header h1 {
    font-size: var(--wpx-fs-h1);
    font-weight: var(--wpx-fw-bold);
    color: var(--wpx-text-strong);
    line-height: var(--wpx-lh-tight);
    margin: 0;
}
.wpx-page-header .subtitulo {
    font-size: var(--wpx-fs-body);
    color: var(--wpx-text-muted);
    margin: var(--wpx-space-1) 0 0;
}
.wpx-page-header .acoes { margin-left: auto; display: flex; gap: var(--wpx-space-2); flex-shrink: 0; }

/* ── Cabeçalho co-marcado das telas de consórcio ──────────────────────────
   WPX + o banco do lote, para não restar dúvida de qual fechamento está
   aberto: as duas telas são quase idênticas e trocar Itaú por Santander no
   meio do mês custa caro. Um `.wpx-page-header` comum vem logo abaixo com o
   H1 — esta faixa é só a identificação visual.

   A cor do banco entra por `--banco`, definida na classe modificadora. Assim
   um banco novo é uma regra de três linhas, não uma cópia do bloco inteiro. */
.wpx-banco-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wpx-space-4);
    padding: var(--wpx-space-4) var(--wpx-space-5);
    margin-bottom: var(--wpx-space-5);
    border: 1px solid var(--wpx-border-strong);
    border-radius: var(--wpx-radius-lg);
    box-shadow: var(--wpx-shadow-card);
    /* Fundo branco chapado sob os logos e um véu da cor do banco só na ponta
       direita. O degradê NÃO pode passar por baixo dos logos: no SVG do Itaú
       as letras "itaú" são FUROS no quadrado laranja, então qualquer fundo
       colorido vaza por dentro das letras e o logo sai errado. */
    background:
        linear-gradient(100deg,
            var(--wpx-surface-card) 0%,
            var(--wpx-surface-card) 58%,
            color-mix(in srgb, var(--banco) 10%, var(--wpx-surface-card)) 100%);
    border-top: 3px solid var(--banco);
}
.wpx-banco-header--itau      { --banco: var(--wpx-banco-itau); }
.wpx-banco-header--santander { --banco: var(--wpx-banco-santander); }

/* `color-mix` não existe em navegador antigo: sem ele a faixa fica branca, que
   é um estado aceitável — a borda superior colorida continua identificando. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .wpx-banco-header { background: var(--wpx-surface-card); }
}

.wpx-banco-header__marcas {
    display: flex;
    align-items: center;
    gap: var(--wpx-space-4);
    min-width: 0;
}
/* Altura por logo, não largura: as proporções são incomparáveis (o Itaú é um
   quadrado, o Santander é 5,7:1 e a WPX 3,6:1). Casar pela altura óptica é o
   que faz as três marcas parecerem do mesmo tamanho. */
.wpx-banco-header__wpx   { height: 34px; width: auto; }
.wpx-banco-header__banco { width: auto; }
.wpx-banco-header--itau      .wpx-banco-header__banco { height: 38px; }
.wpx-banco-header--santander .wpx-banco-header__banco { height: 26px; }

.wpx-banco-header__divisor {
    width: 1px;
    align-self: stretch;
    min-height: 32px;
    background: var(--wpx-border-strong);
    flex-shrink: 0;
}

/* Etiqueta à direita: some antes dos logos quando falta largura. */
.wpx-banco-header__etiqueta {
    margin-left: auto;
    font-size: var(--wpx-fs-small);
    font-weight: var(--wpx-fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--banco);
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .wpx-banco-header__etiqueta { display: none; }
    .wpx-banco-header__wpx   { height: 26px; }
    .wpx-banco-header--itau      .wpx-banco-header__banco { height: 30px; }
    .wpx-banco-header--santander .wpx-banco-header__banco { height: 20px; }
}

/* ── Estado vazio ─────────────────────────────────────────────────────── */
.wpx-empty {
    text-align: center;
    padding: var(--wpx-space-8) var(--wpx-space-6);
    color: var(--wpx-text-muted);
}
.wpx-empty .bi { font-size: 2rem; color: var(--wpx-text-subtle); display: block; margin-bottom: var(--wpx-space-3); }
.wpx-empty h3 { font-size: var(--wpx-fs-card-title); font-weight: var(--wpx-fw-semibold); color: var(--wpx-text); }

/* ── Toast de feedback ────────────────────────────────────────────────── */
.toast-wpx { min-width: 280px; }

/* ── Dropdown de classificação ────────────────────────────────────────── */
.dropdown-classificacao .dropdown-item {
    font-size: var(--wpx-fs-body);
    padding: 0.375rem var(--wpx-space-4);
}

/* ── Barra de progresso fina ──────────────────────────────────────────────
   `.progress-extracao` é o nome legado (nasceu na tela de extração de CFOP) e
   segue valendo porque aquela tela o usa; para qualquer barra nova, prefira
   `.wpx-progress-slim`, que não amarra o estilo a um módulo. */
.progress-extracao,
.wpx-progress-slim { height: 8px; border-radius: var(--wpx-radius-pill); }

/* ── Quadrado do ícone de KPI e ponto de status ────────────────────────────
   Consumidos pelas macros `metric_card` e `status_dot` (`_macros/ui.html`). */
.wpx-kpi-icone {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--wpx-radius-sm);
    font-size: var(--wpx-fs-card-title);
}
.wpx-kpi-icone--info    { background: var(--wpx-info-bg);    color: var(--wpx-info-fg); }
.wpx-kpi-icone--warn    { background: var(--wpx-warn-bg);    color: var(--wpx-warn-fg); }
.wpx-kpi-icone--success { background: var(--wpx-success-bg); color: var(--wpx-success-fg); }
.wpx-kpi-icone--danger  { background: var(--wpx-danger-bg);  color: var(--wpx-danger-fg); }
.wpx-kpi-icone--neutral { background: var(--wpx-neutral-bg); color: var(--wpx-neutral-fg); }

.wpx-dot {
    width: 8px; height: 8px;
    border-radius: var(--wpx-radius-pill);
    display: inline-block;
    flex-shrink: 0;
}
.wpx-dot--info    { background: var(--wpx-info-solid); }
.wpx-dot--warn    { background: var(--wpx-warn-solid); }
.wpx-dot--success { background: var(--wpx-success-solid); }
.wpx-dot--danger  { background: var(--wpx-danger-solid); }
.wpx-dot--neutral { background: var(--wpx-neutral-fg); }

/* ── Utilitários ──────────────────────────────────────────────────────── */
.min-w-0 { min-width: 0; }        /* deixa texto longo truncar dentro de flex */
.cursor-pointer { cursor: pointer; }
.text-mono { font-family: var(--wpx-font-mono); }
.fs-xs { font-size: var(--wpx-fs-small); }
.fw-semibold { font-weight: var(--wpx-fw-semibold); }

/* ── HTMX indicator ───────────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator  { display: inline-block; }