/* ============================================================================
   23-ux-gestao.css — CAMADA DE CORRECAO UX/UI · TELAS DE GESTAO
   Data: 2026-08-11   (onda 3: RH, Servidor, Faturamento, Faturamento SUS)
   Escopo: #view-rh · #view-servidor · #view-faturamento · #view-faturamento-sus

   O QUE E ESTA CAMADA
   Correcoes visuais apuradas na auditoria de CSS/markup dos quatro paineis de
   gestao. E a ULTIMA folha da cascata (carrega depois de aurora-*,
   22-glass-uniform, 00-mobile-foundation e autocomplete), entao vence por
   ORDEM sempre que a especificidade empata — por isso quase nada aqui precisa
   de !important.

   REVERSAO
   100% aditiva e escopada por view: remover a linha
   <link rel="stylesheet" href="css/23-ux-gestao.css"> do index.html devolve o
   sistema exatamente ao estado anterior. As secoes sao numeradas pelo item da
   auditoria para permitir reversao item a item.

   REGRA DE OURO
   Nenhum token global e redefinido em :root. Os tokens novos (--ctl-h,
   --tbl-max) vivem escopados na propria view.

   !IMPORTANT
   So onde a regra vencida tambem usa !important ou e style inline. Cada
   ocorrencia traz na linha o arquivo:linha que esta sendo vencido.

   ARMADILHA DE ESPECIFICIDADE DESTE PROJETO
   10-capacitacao-intranet.css:913+ ataca com
   `:is(#view-portal, ..., #view-rh, ...) > .panel-container > header`.
   O :is() assume a especificidade do argumento MAIS especifico — a lista tem
   IDs, entao o seletor vale (1,0,1) e as vezes mais. Onde uma regra daqui nao
   pegar, repetir o id no seletor resolve.

   INDICE
     RH  (#view-rh)
     01 · altura unica dos controles das barras de ferramentas   (item 2)
     02 · cabecalho da coluna numerica alinhado ao numero        (item 3)
     03 · cabecalho de tabela grudento + teto de rolagem         (item 3)
     04 · grade dos graficos de treinamento com breakpoint  [MQ] (item 1/4)
     05 · fim do cartao dentro de cartao nos graficos            (item 1)
     06 · estado "carregando" com a mesma caixa do vazio         (item 6)
     07 · pesos de fonte que a Poppins nao tem (750/650)         (item 7)
     08 · foco de teclado e disabled que faltavam                (item 6)

     SERVIDOR (#view-servidor)
     09 · altura unica dos controles                             (item 2)
     10 · altura unica dos campos do formulario (date/time/num)  (item 2)
     11 · cabecalho grudento + teto de rolagem nas listas        (item 3)
     12 · pesos de fonte 750 -> 700                              (item 7)
     13 · foco de teclado e disabled que faltavam                (item 6)

     FATURAMENTO (#view-faturamento)
     14 · altura unica no cabecalho e na barra de filtros        (item 2)
     15 · colunas de dinheiro alinhadas a DIREITA                (item 3) *
     16 · numeros centralizados -> a direita (producao)          (item 3)
     17 · cabecalho grudento + teto de rolagem                   (item 3)
     18 · grades de KPI sem orfao na ultima linha           [MQ] (item 4)
     19 · hover / foco / disabled ausentes                       (item 6)
     20 · hex cravado que nao inverte no tema escuro             (item 7)

     FATURAMENTO SUS (#view-faturamento-sus)
     21 · topbar: campo de competencia e botoes na mesma base    (item 2)
     22 · faixas de aviso (.filters) centradas verticalmente     (item 1)
     23 · competencia sem lancamento nao pode parecer quebrada   (item 6) *
     24 · cabecalho grudento + teto de rolagem                   (item 3)
     25 · hover/foco no cartao clicavel da esteira               (item 6)
     26 · pesos de fonte 750/650 -> 700/600                      (item 7)

   [MQ] = media query. Media query NAO adiciona especificidade: toda regra
   daqui que sobrescreve algo que o sistema ajusta em @media precisa
   RE-DECLARAR aquele breakpoint aqui.
   ============================================================================ */


/* ############################################################################
   #                                   RH                                     #
   ############################################################################ */

#view-rh{
  --ctl-h: 38px;   /* altura unica de qualquer controle de barra */
  --tbl-max: min(64vh, 680px);
}


/* ============================================================================
   01 · RH — ALTURA UNICA DOS CONTROLES DAS BARRAS DE FERRAMENTAS  [auditoria 2]

   PROBLEMA: quatro alturas na MESMA .au-toolbar do cabecalho de secao —
     .field.search   padding:10px 13px + input 14.5px  ~44px (aurora-core.css:133/141)
     .au-fld select  padding:9px 12px  + 13px          ~38px (aurora-p-rh.css:452)
     .au-fld input   idem, mas date/month/file medem diferente no Chrome
     .btn            padding:9px 14px  + 13px          ~40px (aurora-core.css:84)
   aurora-p-rh.css:513 ja alinhou os RODAPES (align-items:flex-end), o que
   escondeu metade do sintoma: os topos seguem em degrau. O token
   --btn-height:36px (01-tokens.css:90) existe e o kit .aur o ignora.

   CORRECAO: token de altura escopado + height fixo com padding-block:0. Os
   controles do kit ja sao inline-flex/align-items:center, entao a altura fixa
   nao corta conteudo. Escopado em .au-toolbar para nao tocar nos campos dos
   formularios (que sao empilhados, nao enfileirados).
   ============================================================================ */

#view-rh.aur .au-toolbar > .btn,
#view-rh.aur .au-toolbar > .au-fld > input,
#view-rh.aur .au-toolbar > .au-fld > select,
#view-rh.aur .au-toolbar > .field.search{
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-block: 0;
  box-sizing: border-box;
}

/* o input de arquivo precisa do respiro interno do botao nativo "Escolher
   arquivo"; mantem a altura, devolve o padding lateral */
#view-rh.aur .au-toolbar > .au-fld > input[type="file"]{
  padding-inline: 10px;
  display: flex;
  align-items: center;
}

/* .rh-check tinha padding-top:16px (aurora-p-rh.css:389) para "empurrar" a
   caixa ate a linha dos campos rotulados. Com align-items:flex-end na toolbar
   o padding-top nao move nada — era valor magico fora da escala. Trocado por
   altura de controle, que e o que realmente alinha. */
#view-rh .rh-check,
#view-rh .rh-trein-filtro{
  padding-top: 0;
  min-height: var(--ctl-h);
}


/* ============================================================================
   02 · RH — CABECALHO DA COLUNA NUMERICA ALINHADO AO NUMERO      [auditoria 3]

   PROBLEMA: o JS marca a celula numerica com .sla, que o kit alinha a direita
   (aurora-core.css:254), mas o <th> correspondente fica a esquerda —
   `Horas +` a esquerda com `12,50` a direita na mesma coluna. Ocorre em:
     js/app/rh.js:836-838   ranking do dashboard   (col 3,4,5)
     js/app/rh.js:1529-1531 relatorio importado    (col 6,7,8)
     js/app/rh.js:700       banco de horas         (col 6 = Saldo atual)
   E ha colunas puramente numericas SEM classe alguma, coladas a esquerda:
     js/app/rh.js:1361-1365 arquivos salvos        (col 4..8)
     js/app/rh.js:272       treinamentos, Nota     (col 4)

   CORRECAO: o alinhamento e do CONJUNTO coluna, nao da celula. Como o markup
   nao carrega classe de coluna, o gancho possivel e o indice — por isso cada
   regra esta ancorada no ID do container e comentada com a origem.
   ============================================================================ */

/* ranking de saldo — js/app/rh.js:830-840 (5 colunas, 3..5 numericas) */
#view-rh #rh-dashboard-top .au-table thead th:nth-child(n+3){ text-align: right; }

/* relatorio importado — js/app/rh.js:1521-1534 (11 colunas, 6..8 numericas) */
#view-rh #rh-report-list .au-table thead th:nth-child(6),
#view-rh #rh-report-list .au-table thead th:nth-child(7),
#view-rh #rh-report-list .au-table thead th:nth-child(8){ text-align: right; }

/* banco de horas — js/app/rh.js:692-704 (9 colunas, 6 = Saldo atual) */
#view-rh #rh-bank-list .au-table thead th:nth-child(6){ text-align: right; }

/* arquivos salvos — js/app/rh.js:1355-1366 (9 colunas, 4..8 numericas, sem classe) */
#view-rh #rh-import-batches-list .au-table thead th:nth-child(n+4):nth-child(-n+8),
#view-rh #rh-import-batches-list .au-table tbody td:nth-child(n+4):nth-child(-n+8){
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* treinamentos concluidos — js/app/rh.js:270-272 (6 colunas, 4 = Nota) */
#view-rh #rh-trein-body .au-table thead th:nth-child(4),
#view-rh #rh-trein-body .au-table tbody td:nth-child(4){
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   03 · RH — CABECALHO GRUDENTO + TETO DE ROLAGEM DA TABELA       [auditoria 3]

   PROBLEMA: nenhuma tabela do RH tem cabecalho fixo. Banco de horas, ponto e
   relatorio importado passam facil de 200 linhas e o usuario rola ate perder
   de vista o que cada coluna significa.

   POR QUE SO `position:sticky` NAO RESOLVE: .au-table-wrap declara
   `overflow-x:auto` (aurora-core.css:331). Pelo spec, quando um eixo e
   diferente de `visible` o outro computa para `auto` — o wrap JA e um
   contexto de rolagem, e sem altura ele nunca rola no eixo Y. O sticky
   ficaria ancorado num container que nao se move: efeito zero. Por isso a
   correcao e um par — teto de altura no wrap E sticky no th.

   O th usa a mesma superficie de vidro do cartao (var(--glass) + blur) para
   nao virar um remendo opaco sobre o painel translucido.
   ============================================================================ */

#view-rh.aur .au-table-wrap{
  max-height: var(--tbl-max);
  overflow: auto;
  scrollbar-width: thin;
}

#view-rh.aur .au-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--glass);
}


/* ============================================================================
   04 · RH — GRADE DOS GRAFICOS DE TREINAMENTO COM BREAKPOINT  [MQ][auditoria 4]

   PROBLEMA: views/rh.html:440 usa
     <div id="rh-trein-graf" class="grid" style="grid-template-columns:1.4fr 1fr">
   O kit tem o breakpoint certo (aurora-core.css:305-307 coloca .grid em uma
   coluna abaixo de 920px), mas ESTILO INLINE VENCE MEDIA QUERY. No celular os
   dois graficos continuam lado a lado em 1.4fr/1fr e ficam ilegiveis.

   !important obrigatorio: e a unica forma de vencer o style inline.
   ============================================================================ */

@media (max-width: 900px){
  #view-rh #rh-trein-graf{
    grid-template-columns: 1fr !important;   /* vence o style inline de views/rh.html:440 */
  }
}


/* ============================================================================
   05 · RH — FIM DO CARTAO DENTRO DE CARTAO NOS GRAFICOS          [auditoria 1]

   PROBLEMA: os dois blocos de #rh-trein-graf sao <section class="glass"> com
   sombra e borda completas DENTRO de #rh-panel-treinamentos, que ja e um
   .rh-card de vidro (aurora-p-rh.css:309). Vidro sobre vidro com duas sombras.
   Os paineis do dashboard ja resolveram isso (aurora-p-rh.css:425-431:
   box-shadow:none + borda fina); aqui a mesma regra nao foi aplicada porque o
   markup nao usa .rh-dashboard-panel.

   CORRECAO: mesmo tratamento dos paineis do dashboard — sub-bloco chapado.
   ============================================================================ */

#view-rh #rh-trein-graf > .glass{
  box-shadow: none;
  border: 1px solid var(--glass-brd);
  border-radius: 18px;
}
#view-rh #rh-trein-graf > .glass::after{ content: none; }   /* fio iridescente do kit (aurora-core.css:65) so no cartao externo */


/* ============================================================================
   06 · RH — ESTADO "CARREGANDO" COM A MESMA CAIXA DO VAZIO       [auditoria 6]

   PROBLEMA: js/app/rh.js:56 devolve o estado de carregamento como
   `<p class="k-sub">Carregando...</p>` — uma linha de texto cinza solta no
   lugar onde vai aparecer uma tabela inteira. Erro e vazio usam .au-empty
   (js/app/rh.js:58-60), uma caixa tracejada centralizada. Sao tres estados do
   MESMO momento com duas linguagens diferentes: durante o carregamento o
   painel parece que nao carregou.

   CORRECAO: quando o <p class="k-sub"> e o UNICO filho do container de lista
   (ou seja, e o estado de carregamento e nao a legenda "Mostrando X de Y" que
   convive com a tabela em js/app/rh.js:690), ele recebe a caixa do .au-empty.
   ============================================================================ */

#view-rh [id^="rh-"][id$="-list"] > p.k-sub:only-child,
#view-rh #rh-trein-body > p.k-sub:only-child,
#view-rh #rh-dashboard-cards > p.k-sub:only-child,
#view-rh #rh-ferias-totals > p.k-sub:only-child,
#view-rh #rh-staff-totals > p.k-sub:only-child{
  grid-column: 1 / -1;
  margin: 0;
  padding: 30px 22px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .3);
}
body.theme-dark #view-rh [id^="rh-"][id$="-list"] > p.k-sub:only-child,
body.theme-dark #view-rh #rh-trein-body > p.k-sub:only-child,
body.theme-dark #view-rh #rh-dashboard-cards > p.k-sub:only-child{
  background: rgba(255, 255, 255, .04);
}


/* ============================================================================
   07 · RH — PESOS DE FONTE QUE A POPPINS NAO TEM                 [auditoria 7]

   PROBLEMA: index.html:88 carrega Poppins 400;500;600;700;800. As folhas
   pedem 750 e 650, que o navegador arredonda para 700 — o CSS diz uma coisa
   e a tela mostra outra, e a proxima pessoa a mexer acha que tem um peso
   intermediario disponivel.
     aurora-core.css:186  .k-val       font-weight:750
     aurora-core.css:224  .pt b        font-weight:650
     aurora-core.css:277  .t-stats b   font-weight:750
     aurora-p-rh.css:286  .rh-q b      font-weight:750

   CORRECAO: declarar o peso que a fonte realmente tem. ZERO mudanca visual —
   e higiene de codigo, para o arquivo parar de mentir.
   ============================================================================ */

#view-rh.aur .k-val,
#view-rh.aur .t-stats b,
#view-rh .rh-q b{ font-weight: 700; }
#view-rh.aur .pt b{ font-weight: 600; }


/* ============================================================================
   08 · RH — FOCO DE TECLADO E DISABLED QUE FALTAVAM              [auditoria 6]

   PROBLEMA: o kit da anel de foco a button/input/select (aurora-core.css:302)
   e nao a <a class="btn"> nem a <textarea>. O RH usa ancora com cara de botao
   (js/app/rh.js:273, "Certificado"), que fica sem foco visivel. E campo
   desabilitado nao tem nenhum estado proprio — so o do botao existe
   (aurora-core.css:370).
   ============================================================================ */

#view-rh.aur a.btn:focus-visible,
#view-rh.aur textarea:focus-visible,
#view-rh.aur summary:focus-visible{
  outline: 2px solid var(--brand2);
  outline-offset: 2px;
}
#view-rh.aur a.btn{ text-decoration: none; }

#view-rh.aur input:disabled,
#view-rh.aur select:disabled,
#view-rh.aur textarea:disabled{
  opacity: .55;
  cursor: not-allowed;
  background: rgba(92, 111, 58, .06);
}
body.theme-dark #view-rh.aur input:disabled,
body.theme-dark #view-rh.aur select:disabled,
body.theme-dark #view-rh.aur textarea:disabled{ background: rgba(147, 185, 80, .08); }

/* linha da tabela sob o cursor ja tem hover; falta o alvo de teclado quando a
   linha tem acoes dentro (o <details> do relatorio importado) */
#view-rh.aur .au-table tbody tr:focus-within{ background: rgba(92, 111, 58, .07); }


/* ############################################################################
   #                                SERVIDOR                                  #
   ############################################################################ */

#view-servidor{
  --ctl-h: 38px;
  --fld-h: 40px;
  --tbl-max: min(64vh, 680px);
}


/* ============================================================================
   09 · SERVIDOR — ALTURA UNICA DOS CONTROLES                     [auditoria 2]

   PROBLEMA: na mesma linha do cabecalho convivem
     .intranet-header .btn        padding:9px 14px  (aurora-p-servidor.css:90)
     .btn.btn-danger              idem, mas o legado 11-refinos.css:567 ainda
                                  disputa cor/borda
   e nas secoes, .au-toolbar mistura .btn do kit com .srv-crosslink
   (aurora-p-servidor.css:300), que e um .intranet-menu-item disfarcado de
   botao — mesmo padding, altura diferente porque o item de menu traz
   border:1px transparent e o .btn.primary do kit nao tem borda
   (aurora-core.css:92).
   ============================================================================ */

#view-servidor .intranet-header .btn,
#view-servidor .au-sec-head .au-toolbar > .btn,
#view-servidor .intranet-menu-item.srv-crosslink{
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-block: 0;
  box-sizing: border-box;
}


/* ============================================================================
   10 · SERVIDOR — ALTURA UNICA DOS CAMPOS DO FORMULARIO          [auditoria 2]

   PROBLEMA: o formulario de ausencia (views/servidor.html:179-223) poe numa
   grade de 2 colunas: select, input[type=date], input[type=time],
   input[type=number] e input[type=text]. O Chrome desenha date/time com
   spinner e icone de calendario e mede ~4px a mais que um text com o MESMO
   padding — as duas colunas ficam com linhas de alturas diferentes e o rotulo
   da direita desalinha do da esquerda a partir da segunda linha.

   CORRECAO: altura explicita para todos os controles de uma linha. textarea e
   file ficam de fora (crescem/medem por conta propria, de proposito).
   ============================================================================ */

#view-servidor .au-form .au-fld > input:not([type="file"]),
#view-servidor .au-form .au-fld > select{
  height: var(--fld-h);
  min-height: var(--fld-h);
  padding-block: 0;
  box-sizing: border-box;
}


/* ============================================================================
   11 · SERVIDOR — CABECALHO GRUDENTO + TETO DE ROLAGEM           [auditoria 3]
   Mesmo par teto+sticky da secao 03; ver la o motivo de o sticky sozinho nao
   funcionar dentro de .au-table-wrap.
   ============================================================================ */

#view-servidor .au-table-wrap{
  max-height: var(--tbl-max);
  overflow: auto;
  scrollbar-width: thin;
}
#view-servidor .au-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--glass);
}


/* ============================================================================
   12 · SERVIDOR — PESOS DE FONTE 750 -> 700                      [auditoria 7]
   aurora-p-servidor.css:79 (titulo do header), :192 (h3 das secoes) e :255
   (h4 dos grupos do formulario) pedem 750; a Poppins carregada em
   index.html:88 nao tem. Sem mudanca visual — ver secao 07.
   ============================================================================ */

#view-servidor .intranet-header-title,
#view-servidor #servidor-main-content h3,
#view-servidor .srv-group-head h4,
#view-servidor.aur .k-val,
#view-servidor.aur .t-stats b{ font-weight: 700; }
#view-servidor.aur .pt b{ font-weight: 600; }


/* ============================================================================
   13 · SERVIDOR — FOCO DE TECLADO E DISABLED QUE FALTAVAM        [auditoria 6]
   Mesmo buraco da secao 08: o kit nao cobre <a class="btn"> nem <textarea>,
   e o painel do servidor tem textarea em quase todo formulario
   (views/servidor.html:237, 241, 275, 345).
   ============================================================================ */

#view-servidor.aur a.btn:focus-visible,
#view-servidor.aur textarea:focus-visible{
  outline: 2px solid var(--brand2);
  outline-offset: 2px;
}
#view-servidor.aur a.btn{ text-decoration: none; }

#view-servidor.aur input:disabled,
#view-servidor.aur select:disabled,
#view-servidor.aur textarea:disabled{
  opacity: .55;
  cursor: not-allowed;
  background: rgba(92, 111, 58, .06);
}
body.theme-dark #view-servidor.aur input:disabled,
body.theme-dark #view-servidor.aur select:disabled,
body.theme-dark #view-servidor.aur textarea:disabled{ background: rgba(147, 185, 80, .08); }

/* o campo "quieto" da identidade (aurora-p-servidor.css:269) tira a borda para
   ler como confirmacao; sem borda o foco precisa marcar mais forte */
#view-servidor .srv-quiet input:focus-visible{
  outline: 2px solid var(--brand2);
  outline-offset: 1px;
}


/* ############################################################################
   #                              FATURAMENTO                                 #
   ############################################################################ */

#view-faturamento{
  --ctl-h: 34px;   /* = min-height ja imposto aos botoes do cabecalho em
                      10-capacitacao-intranet.css:988 */
  --tbl-max: min(66vh, 700px);
}


/* ============================================================================
   14 · FATURAMENTO — ALTURA UNICA NO CABECALHO E NOS FILTROS     [auditoria 2]

   PROBLEMA A (cabecalho, js/fat/02.js:23-28): a .fat-toolbar tem
     #fat-competencia  style inline `padding:5px 8px`  ~28px  (js/fat/02.js:24)
     .btn.btn-sm       padding:5px 12px + 13px         ~31px  (05-buttons.css:45)
     e 10-capacitacao-intranet.css:985-994 ainda forca
     width/min-width/max-width:120px + min-height:34px nos MESMOS botoes.
   Resultado: tres alturas (28 / 31 / 34) numa faixa de 4 controles.

   PROBLEMA B (barra de filtros, css/16/02.css:432-446): .fatd-filter > input
   mede ~41px e .fatd-filter-actions > .btn.btn-sm ~31px, com
   align-items:flex-end — os botoes ficam 10px mais baixos que os campos.

   CORRECAO: uma altura por barra. O select do cabecalho precisa de !important
   porque o valor que ele esta vencendo e ESTILO INLINE.
   ============================================================================ */

#view-faturamento .fat-header .btn,
#view-faturamento .fat-toolbar > .btn{
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-block: 0;
  box-sizing: border-box;
}

#view-faturamento .fat-toolbar .fat-comp-wrap{
  height: var(--ctl-h);
  box-sizing: border-box;
}
#view-faturamento .fat-toolbar #fat-competencia{
  height: var(--ctl-h) !important;        /* vence o style inline de js/fat/02.js:24 */
  min-height: var(--ctl-h) !important;    /* idem */
  padding: 0 10px !important;             /* idem */
  border-radius: 9px !important;          /* idem */
  box-sizing: border-box;
  font: inherit;
}

/* barra de filtros das demandas */
#view-faturamento .fatd-filters{ --ctl-h: 40px; }
#view-faturamento .fatd-filter > input,
#view-faturamento .fatd-filter > select,
#view-faturamento .fatd-filter-actions > .btn{
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-block: 0;
  box-sizing: border-box;
}


/* ============================================================================
   15 · FATURAMENTO — COLUNAS DE DINHEIRO A DIREITA               [auditoria 3]

   PROBLEMA (o mais grave do lote): metade das tabelas do painel financeiro
   renderiza valor em real colado a ESQUERDA, junto de texto. `R$ 1.240,00` e
   `R$ 980,50` deixam de alinhar pela virgula e a coluna vira uma escada.
   Onde: as tabelas SEM classe dentro de .fat-table-wrap —
     js/fat/02.js:834-843  Consolidado por tipo de veiculo (4 col: 2,3,4 sao numero)
     js/fat/02.js:858-868  Guias recentes                 (5 col: 5 e o valor)
     js/fat/03.js:934-944  Consolidado por motorista      (5 col: 2,3,4 sao numero)
   A tabela de guias (js/fat/03.js:353) NAO entra aqui: ela ja marca th e td
   com .num e css/16/02.css:508 resolve.

   CORRECAO: as tres tabelas nao tem id nem classe propria, so o painel que as
   hospeda. O gancho estavel e a ASSINATURA da tabela — quantas colunas o
   cabecalho tem — via :has(). Assim a regra deixa de valer sozinha se alguem
   mudar o numero de colunas, em vez de alinhar a coluna errada em silencio.
   :not([colspan]) preserva a linha de estado vazio, que e centralizada
   (.fat-empty, 10-capacitacao-intranet.css:538).
   ============================================================================ */

/* dashboard · 4 colunas = Consolidado por tipo de veiculo (tudo menos a 1a) */
#view-faturamento #fat-panel-dashboard table:has(thead th:nth-child(4):last-child) th:not(:first-child),
#view-faturamento #fat-panel-dashboard table:has(thead th:nth-child(4):last-child) td:not(:first-child):not([colspan]),
/* dashboard · 5 colunas = Guias recentes (so a ultima, que e o valor) */
#view-faturamento #fat-panel-dashboard table:has(thead th:nth-child(5):last-child) th:last-child,
#view-faturamento #fat-panel-dashboard table:has(thead th:nth-child(5):last-child) td:last-child:not([colspan]),
/* relatorios · 5 colunas = Consolidado por motorista (2..4; a 5a e data) */
#view-faturamento #fat-panel-relatorios table:has(thead th:nth-child(5):last-child) th:nth-child(n+2):nth-child(-n+4),
#view-faturamento #fat-panel-relatorios table:has(thead th:nth-child(5):last-child) td:nth-child(n+2):nth-child(-n+4):not([colspan]){
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   16 · FATURAMENTO — NUMEROS CENTRALIZADOS -> A DIREITA          [auditoria 3]

   PROBLEMA: a tabela de producao/acompanhamento centraliza os numeros —
     js/fat/04.js:606  .fat-prod-table .fat-acomp-num{text-align:center}
     js/fat/04.js:610  .fat-prod-table th{text-align:center}
   Numero centralizado nao alinha por casa decimal: `1.240` e `98` ficam
   deslocados um do outro e a coluna deixa de ser comparavel de relance —
   exatamente o que a coluna Contratado/Usado/Saldo existe para permitir.

   NAO precisa de !important: o <style> injetado pelo JS entra depois no
   documento, mas usa (0,1,1); daqui atacamos com (1,1,2).
   ============================================================================ */

#view-faturamento .fat-prod-table th:nth-child(n+3),
#view-faturamento .fat-prod-table .fat-acomp-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   17 · FATURAMENTO — CABECALHO GRUDENTO + TETO DE ROLAGEM        [auditoria 3]

   PROBLEMA: as tabelas do faturamento sao as mais longas do sistema (guias da
   competencia, procedimentos do contrato) e nenhuma fixa o cabecalho.
   js/fat/05.js:135 ATE declara `position:sticky` no thead da .fat-acomp-table
   — mas .fat-acomp-table-wrap (js/fat/05.js:132) so tem overflow-x:auto e sem
   altura nunca rola no eixo Y, entao aquele sticky nunca teve efeito.

   CORRECAO: teto de altura nos wraps + sticky no th. Ver o racional completo
   na secao 03.
   ============================================================================ */

#view-faturamento .fat-table-wrap,
#view-faturamento .fatd-table-wrap,
#view-faturamento .fat-prod-wrap,
#view-faturamento .fat-acomp-table-wrap{
  max-height: var(--tbl-max);
  overflow: auto;
  scrollbar-width: thin;
}

#view-faturamento .fat-table-wrap > table > thead th,
#view-faturamento .fatd-table thead th,
#view-faturamento .fat-prod-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}
/* a .fat-acomp-table tem a coluna do procedimento congelada a esquerda
   (position:sticky;left:0 em js/fat/05.js:136). O CANTO — o th que e sticky nos
   dois eixos ao mesmo tempo — precisa de z-index maior que as duas camadas,
   senao a primeira coluna passa por cima do proprio cabecalho ao rolar. */
#view-faturamento .fat-acomp-table thead th.fat-acomp-proc{ z-index: 3; }

/* NOTA: .fatd-table e .fat-prod-table usam border-collapse:collapse
   (css/16/02.css:502, js/fat/04.js:608). Sticky em <th> com collapse so passou
   a funcionar a partir do Chrome 91 / Firefox 59 — nos navegadores do parque
   atual funciona; em WebView muito antigo o cabecalho apenas nao gruda, sem
   quebrar layout. */


/* ============================================================================
   18 · FATURAMENTO — GRADES DE KPI SEM ORFAO NA ULTIMA LINHA [MQ][auditoria 4]

   PROBLEMA A: css/16/02.css:448 fixa .fatd-kpis em `repeat(5,1fr)` e o
   breakpoint de 1000px cai para `repeat(2,1fr)`. O JS emite exatamente 5 KPIs
   (js/fat/04.js:19-25 e :224-230): em duas colunas sobra UM cartao sozinho na
   terceira linha, com metade da largura — o classico orfao.

   PROBLEMA B: .fat-metrics e .fat-report-metrics usam
   `repeat(auto-fit,minmax(180px,1fr))` (10-capacitacao-intranet.css:475).
   auto-fit COLAPSA as trilhas vazias, entao o ultimo cartao de uma linha
   incompleta se estica pela largura inteira e parece outro componente. O JS
   emite 3 (js/fat/02.js:776-780) e 4 (js/fat/03.js:924-927) cartoes — contagem
   fixa, entao a grade pode ser fixa tambem.
   ============================================================================ */

#view-faturamento .fat-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
#view-faturamento .fat-report-metrics{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px){
  /* [MQ] re-declara o breakpoint de css/16/02.css:449 para o orfao nao voltar */
  #view-faturamento .fatd-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-faturamento .fatd-kpis > .fatd-kpi:last-child:nth-child(odd){ grid-column: 1 / -1; }
  #view-faturamento .fat-report-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  #view-faturamento .fat-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-faturamento .fat-metrics > .fat-metric-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
}
@media (max-width: 520px){
  #view-faturamento .fat-metrics,
  #view-faturamento .fat-report-metrics,
  #view-faturamento .fatd-kpis{ grid-template-columns: 1fr; }
}


/* ============================================================================
   19 · FATURAMENTO — HOVER / FOCO / DISABLED AUSENTES            [auditoria 6]

   PROBLEMA: a linha da tabela sem classe (.fat-table-wrap > table) nao tem
   hover nenhum — em tabela larga com rolagem horizontal o olho perde a linha.
   E campo desabilitado nao tem estado proprio em lugar algum do painel.
   ============================================================================ */

#view-faturamento .fat-table-wrap > table > tbody > tr{ transition: background .16s; }
#view-faturamento .fat-table-wrap > table > tbody > tr:hover{ background: rgba(92, 111, 58, .07); }
body.theme-dark #view-faturamento .fat-table-wrap > table > tbody > tr:hover{ background: rgba(147, 185, 80, .10); }

#view-faturamento.aur a.btn:focus-visible,
#view-faturamento.aur textarea:focus-visible,
#view-faturamento.aur summary:focus-visible{
  outline: 2px solid var(--brand2);
  outline-offset: 2px;
}
#view-faturamento.aur input:disabled,
#view-faturamento.aur select:disabled,
#view-faturamento.aur textarea:disabled{
  opacity: .55;
  cursor: not-allowed;
}
/* .fat-side-item ja tem hover (css/16/02.css:603); falta o alvo de teclado */
#view-faturamento .fat-side-item:focus-visible{
  outline: 2px solid var(--brand2);
  outline-offset: -2px;
}


/* ============================================================================
   20 · FATURAMENTO — HEX CRAVADO QUE NAO INVERTE NO ESCURO       [auditoria 7]

   PROBLEMA: as superficies de tabela vem de hex claros escritos a mao e sem
   par no tema escuro. No escuro sobra faixa clara dentro do painel escuro:
     fat-skin.css:8-13    th  background:#eff1eb; color:#394820  (!important)
     fat-skin.css:16      .fat-prod-row:hover background:#f5f7f2 (!important)
     js/fat/04.js:610     .fat-prod-table th background:#eff1eb
     js/fat/04.js:605     .fat-prod-row:hover background:#fdf6e3 (creme)
     js/fat/05.js:135-137 .fat-acomp-table thead th / .fat-acomp-proc  #eff1eb/#fff
   22-glass-uniform.css:52-64 ja trocou os WRAPPERS por vidro, mas nao os
   cabecalhos nem as celulas congeladas — que e justamente o que fica claro.

   !important necessario: fat-skin.css usa !important nas mesmas propriedades.
   ============================================================================ */

body.theme-dark #view-faturamento .fat-prod-table th,
body.theme-dark #view-faturamento .fat-acomp-table thead th,
body.theme-dark #view-faturamento .fatd-table th{
  background: rgba(147, 185, 80, .12) !important;   /* vence fat-skin.css:8-13 */
  color: var(--ink) !important;                     /* vence fat-skin.css:11 */
  border-bottom-color: var(--line) !important;      /* vence fat-skin.css:12 */
}
body.theme-dark #view-faturamento .fat-acomp-table td.fat-acomp-proc{
  background: rgba(38, 44, 30, .96);                /* js/fat/05.js:136 crava #fff */
  color: var(--ink);
}
body.theme-dark #view-faturamento .fat-acomp-table thead th.fat-acomp-proc{
  background: rgba(147, 185, 80, .12) !important;   /* vence fat-skin.css:9 */
}
body.theme-dark #view-faturamento .fat-prod-row:hover{
  background: rgba(147, 185, 80, .12) !important;   /* vence fat-skin.css:16 */
}
body.theme-dark #view-faturamento .fat-prod-table td,
body.theme-dark #view-faturamento .fat-acomp-table td{
  border-color: var(--line) !important;             /* vence fat-skin.css:15 */
  color: var(--ink);
}
body.theme-dark #view-faturamento .fat-acomp-table tfoot td{
  background: rgba(147, 185, 80, .10);              /* js/fat/05.js:145 crava #f6f7f3 */
}


/* ############################################################################
   #                            FATURAMENTO SUS                               #
   ############################################################################ */

#view-faturamento-sus{
  --ctl-h: 38px;
  --tbl-max: min(64vh, 680px);
}


/* ============================================================================
   21 · FAT SUS — TOPBAR NA MESMA LINHA DE BASE                   [auditoria 2]

   PROBLEMA: faturamento-sus.js:704-712 poe dentro de .actions um .au-fld
   (rotulo EM CIMA do input, ~58px de altura total) ao lado de tres .btn
   (~38px) e de um .k-tag. .aur .actions usa align-items:center
   (aurora-core.css:81): os botoes flutuam no MEIO do campo, com a borda
   inferior do input passando por baixo deles. E o primeiro bloco da tela.

   CORRECAO: alinhar pelo rodape (o rotulo sobe, os controles casam) e dar a
   mesma altura ao input e aos botoes.
   ============================================================================ */

#view-faturamento-sus .topbar .actions{ align-items: flex-end; }
#view-faturamento-sus .topbar .actions > .btn,
#view-faturamento-sus .topbar .actions .au-fld > input{
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-block: 0;
  box-sizing: border-box;
}
#view-faturamento-sus .topbar .actions > .k-tag{ margin-bottom: 9px; }


/* ============================================================================
   22 · FAT SUS — FAIXAS DE AVISO CENTRADAS VERTICALMENTE         [auditoria 1]

   PROBLEMA: as faixas de aviso reusam .filters, que e uma barra de FILTROS —
   `align-items:flex-end` (aurora-core.css:130) existe para casar rotulo+campo.
   Numa faixa de aviso (faturamento-sus.js:726, 732, 797, 853) os elementos sao
   um chip, um paragrafo que quebra em 2-3 linhas e um botao: com flex-end o
   chip e o botao grudam no rodape do paragrafo e a faixa fica torta.
   ============================================================================ */

#view-faturamento-sus .filters{ align-items: center; }
/* a linha de chips de contrato (faturamento-sus.js:829) e um filtro de verdade
   e ja alinha sozinha; so garante que o wrapper nao herde altura estranha */
#view-faturamento-sus .filters > .chips{ flex-wrap: wrap; }


/* ============================================================================
   23 · FAT SUS — COMPETENCIA SEM LANCAMENTO                      [auditoria 6]

   PROBLEMA: quando a competencia escolhida nao tem lote, TODOS os KPIs vao a
   zero e o painel fica identico a um painel quebrado. O JS ja faz a parte
   dificil (faturamento-sus.js:726-731): emite a faixa .fatsus-vazio dizendo
   "o painel esta funcionando" e um botao para a ultima competencia com valor.
   Só que .fatsus-vazio NAO TEM UMA LINHA DE CSS em lugar nenhum — a faixa sai
   com a aparencia neutra de mais um filtro e passa despercebida.

   CORRECAO: (a) a faixa ganha o tom de aviso do sistema e vira a coisa mais
   visivel do bloco; (b) os KPIs zerados que vem DEPOIS dela sao rebaixados,
   deixando explicito que o zero e um dado e nao uma falha. O gancho e o
   irmao geral `~`: os KPIs so amortecem quando a faixa existe.
   ============================================================================ */

#view-faturamento-sus .fatsus-vazio{
  align-items: center;
  gap: 12px;
  border-left: 3px solid var(--warn);
  background: rgba(198, 138, 44, .10);
}
#view-faturamento-sus .fatsus-vazio > .k-tag.alert{
  color: var(--warn);
  background: rgba(198, 138, 44, .16);
}
#view-faturamento-sus .fatsus-vazio > .btn.primary{ flex: none; }

/* KPIs zerados logo abaixo da faixa: presentes, legiveis, mas em segundo plano */
#view-faturamento-sus .fatsus-vazio ~ .kpis > .kpi{ opacity: .78; }
#view-faturamento-sus .fatsus-vazio ~ .kpis > .kpi .k-val{ color: var(--ink-soft); }
#view-faturamento-sus .fatsus-vazio ~ .kpis > .kpi:hover{ opacity: 1; }

body.theme-dark #view-faturamento-sus .fatsus-vazio{ background: rgba(255, 184, 119, .12); }
body.theme-dark #view-faturamento-sus .fatsus-vazio > .k-tag.alert{
  color: var(--warn);
  background: rgba(255, 184, 119, .16);
}


/* ============================================================================
   24 · FAT SUS — CABECALHO GRUDENTO + TETO DE ROLAGEM            [auditoria 3]
   Mesmo par teto+sticky da secao 03. As tabelas do fatsus (helper `table()`
   em faturamento-sus.js:55) ja alinham dinheiro a direita com .ta-r — este e
   o unico defeito de tabela que sobrou no painel.
   ============================================================================ */

#view-faturamento-sus .au-table-wrap{
  max-height: var(--tbl-max);
  overflow: auto;
  scrollbar-width: thin;
}
#view-faturamento-sus .au-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--glass);
}


/* ============================================================================
   25 · FAT SUS — HOVER/FOCO NO CARTAO CLICAVEL DA ESTEIRA        [auditoria 6]

   PROBLEMA: os cartoes da esteira (faturamento-sus.js:765) tem onclick e
   nenhuma pista de que sao clicaveis — nem cursor, nem hover, nem foco.
   20-panel-console.css:882-889 tentou cobrir isso com
   `#view-faturamento-sus div[onclick*="openKanban"]`, mas o elemento e um
   <article>, nao um <div>: a regra e MORTA desde que o painel foi reescrito.
   Aqui o gancho e o elemento real.
   ============================================================================ */

#view-faturamento-sus article.glass[onclick]{
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
#view-faturamento-sus article.glass[onclick]:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(57, 70, 36, .32);
}
#view-faturamento-sus article.glass[onclick]:focus-visible{
  outline: 2px solid var(--brand2);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  #view-faturamento-sus article.glass[onclick]{ transition: none; }
  #view-faturamento-sus article.glass[onclick]:hover{ transform: none; }
}


/* ============================================================================
   26 · FAT SUS — PESOS DE FONTE 750/650 -> 700/600               [auditoria 7]
   Ver secao 07: a Poppins de index.html:88 nao tem 650 nem 750.
   ============================================================================ */

#view-faturamento-sus.aur .k-val,
#view-faturamento-sus.aur .t-stats b{ font-weight: 700; }
#view-faturamento-sus.aur .pt b{ font-weight: 600; }


/* ============================================================================
   FIM · 23-ux-gestao.css
   ============================================================================ */