/* Faturação (mod-faturacao). Prefixo fat-.   Ticket 9c75e38e.

   A MOLDURA É DO DESIGN SYSTEM, não daqui: `.ds-lst` + `.ds-lst-cab` +
   `.ds-lst-cab-acoes` (cabeçalho), `.ds-lst-kpis`/`.ds-lst-kpi` (os contadores, que
   aqui são FILTROS), `.ds-chips`/`.ds-chip` (período e estado), `.ds-filters` (o painel
   colapsável), `.ds-table` com `.ds-td-hero`/`.ds-td-actions`/`.ds-cell-muted`/
   `.ds-cell-num` (tabela em desktop, cartões abaixo dos 768 px), `.ds-totals` e
   `.ds-empty`. Clonar qualquer uma delas com prefixo próprio é o que fez o módulo
   irmão nascer torto a 390 px — ver o cabeçalho do mod-contas-pagar.css.

   Aqui fica só o que é MESMO deste ecrã: a marca das linhas em atraso e as duas
   etiquetas do estado da integração. */

/* --- a linha em atraso -------------------------------------------------------------
   Uma fatura que ficou por emitir num mês anterior é ARRASTADA para esta vista, e sobe
   ao topo da lista. Sem uma marca visual, ela lê-se como uma linha igual às outras que
   por acaso tem uma data antiga — e era exactamente assim que ela desaparecia da vista
   de quem fatura, que é o problema que este ecrã veio resolver.

   A barra vai à ESQUERDA e não como fundo colorido: em cartão (abaixo dos 768 px) um
   fundo inteiro a vermelho põe o texto a nadar, e a `.ds-table` já pinta as suas
   próprias linhas alternadas. */
.fat-linha.is-atrasada > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--error-600, #DA0A0D);
}

.fat-data {
    display: block;
    font-variant-numeric: tabular-nums;
}

/* ---- UMA SUB-LINHA CINZENTA POR CÉLULA (15/09/2026) ---------------------------------
   A mesma regra do ecrã irmão (mod-contrato-faturas.css), pedida pelo dono com a palavra
   «sobrepostas»: cada célula leva o seu valor e, por baixo, no máximo UMA linha pequena.
   A célula da Data tinha duas candidatas — o atraso e a data prevista — e a que fica é a
   que muda o comportamento de quem lê: «há 12 dias» decide por onde se começa, a prevista
   só identifica (e vive no `title` da célula). Quem escolhe é o `subData()` do
   mod-faturacao.js; estas classes só desenham. */

/* «há 12 dias» — a distância, por baixo da data. É a informação que decide a ordem de
   trabalho quando há dez linhas em atraso e não se sabe por qual começar. */
.fat-atraso {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--error-600, #DA0A0D);
}

/* «prevista 01-09-2026» — a data do PLANO, por baixo da data do documento, e SÓ quando as
   duas diferem (15/09/2026). A célula mostra a data com que a fatura existe no Moloni; a
   prevista fica identificada pelo nome, em cinzento, para se perceber num relance qual é
   qual. Iguais, esta linha não aparece — a mesma data escrita duas vezes é ruído. */
.fat-prevista {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-500, #6B7280);
}

/* «30 dias» / «pronto pagamento» — o porquê da data de vencimento, na mesma célula.
   Cinzento e não vermelho: é a condição de pagamento do contrato, não um alarme. */
.fat-prazo {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--neutral-500, #6B7280);
}

/* «n.º M2026 17» — o número FINAL do documento do Moloni, por baixo do estado
   (15/09/2026). Vai à vista e não num `title` porque é a única coisa da linha que serve
   para procurar a fatura noutro sítio: no Moloni, no extrato, no email do cliente. Em
   `tabular-nums` para as colunas de números ficarem alinhadas entre linhas. */
.fat-doc {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-500, #6B7280);
}

/* AS REFERÊNCIAS SEM ARTIGO NO MOLONI (15/09/2026). Duas peças: a marca por baixo do
   código do contrato, e a linha de resumo por cima da tabela. As duas deliberadamente
   DISCRETAS — o dono pediu «chip/aviso discreto, não um alarme»: o contrato está bem, o
   que falta é uma peça no catálogo do outro lado. Nenhuma delas é vermelha. */
.fat-sem-artigo {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--warning-700, #B45309);
}

/* =====================================================================================
   O LINK DO CONTRATO É UM ALVO DE TOQUE A SÉRIO        (gate responsivo, 21/09/2026)
   -------------------------------------------------------------------------------------
   Este ecrã é o único da família onde a LINHA NÃO ABRE NADA: nas listas irmãs
   (contratos, propostas, produções) a linha é `role="button"` e abre a ficha, e o link
   lá dentro é por isso um ATALHO — vale-lhe a régua AA da WCAG 2.5.8, 24 px. Aqui a
   agenda é uma lista de trabalho por fazer, não de fichas para abrir: a linha tem
   «Emitir», «Reverter» e o par de ver, e um clique em qualquer outro sítio não faz nem
   deve fazer nada.

   Ora sem linha clicável o link do contrato é um alvo AUTÓNOMO, e aí a régua é a AAA da
   2.5.5: 44 px. Ele media 76,6 × 20,8 px — cinco links × quatro larguras = as 20
   críticas que o gate acusava neste ecrã, e que vinham de trás deste trabalho todo.

   A correção é dar-lhe mesmo os 44 px de altura. Um pseudo-elemento a alargar a área
   de toque também servia ao dedo, mas o gate mede o `getBoundingClientRect` do próprio
   elemento. Custa ~23 px de altura ao cartão do telemóvel, numa célula só. Acima de 768 px a tabela volta a ser tabela e o link volta a ser texto.

   ⚠️ Fica AQUI e não no `.ds-lst-cli` partilhado do style.css: a mesma classe serve 14
   módulos, e nos outros a linha JÁ é um alvo de 44 px — impor-lhes isto engordava
   cartões inteiros para corrigir um problema que eles não têm. */
.fat-linha .ds-lst-cli {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (min-width: 768px) {
    .fat-linha .ds-lst-cli {
        display: inline;
        min-height: 0;
    }
}

/* A REFERÊNCIA A CRIAR NO MOLONI vai a negrito e na cor da própria sub-linha; o nome
   que vem da linha do contrato fica em tom secundário, para não se ler como parte do
   artigo (dono, 23/09/2026). Ver `refHtml` no mod-faturacao.js. */
.fat-ref { font-weight: var(--fw-bold, 700); }
.fat-ref-nome {
    font-weight: normal;
    color: var(--text-3, #6E6668);
}

/* A MESMA SUB-LINHA, EM TOM DE INFORMAÇÃO         (21/09/2026)
   Quando a referência sem artigo está numa linha de PRODUÇÃO, ela não trava esta
   fatura: só a que levar a produção. Dizer isso a âmbar, ao lado das que travam mesmo,
   era ensinar a ignorar o âmbar — que é o defeito que o aviso das «outra escrita» já
   tinha corrigido uma vez, a 16/09. Azul: é informação, não é trabalho parado. */
.fat-artigo-brando {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--info-700, #1d4ed8);
}

.fat-aviso-artigos {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-2, #F7F5F5);
    border: 1px solid var(--border-1, #E5E0E0);
    color: var(--text-3, #5B5355);
    font-size: var(--txt-sm, 13px);
    line-height: 1.45;
}

.fat-aviso-artigos svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--warning-600, #D97706);
}

.fat-aviso-artigos strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--text-1, #1B1719);
}

/* A NOTA QUE NÃO TRAVA NADA          (referência normalizada, 16/09/2026)
   Gémea da `.cfat-artigos--info`: a referência foi encontrada com outra escrita, a fatura
   sai, e o ecrã diz qual corresponde a qual. Sem moldura nem âmbar — dar-lhe o aspeto do
   aviso que trava era ensinar quem fatura a ignorar o aviso que trava. */
.fat-aviso-artigos--info {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.fat-aviso-artigos--info svg {
    color: var(--text-4, #8A8386);
}

/* A FILA DE CONTROLOS da coluna de ações        (arrumação visual, 15/09/2026)
   Gémeo do `.cfat-acoes` do mod-contrato-faturas.css — os dois ecrãs mostram o mesmo
   plano de faturas e a coluna das ações tem de se ler igual nos dois. O `inline-flex` dá
   o mesmo intervalo entre botões em tabela (>= 768 px, onde a célula é `text-align:
   right`) e em cartão (onde a `.ds-td-actions` já é `flex` com `justify-content:
   flex-end`); sem ele o intervalo era o espaço em branco do HTML e mudava com a
   indentação do template. */
.fat-acoes {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    vertical-align: middle;
}

/* OITO COLUNAS NÃO CABEM EM 1095 px             (16/09/2026, ticket 9c75e38e)

   Este ecrã tem oito colunas — duas a mais do que a aba «Faturação» da ficha, porque
   aqui aparecem o CONTRATO e o CLIENTE. Acima dos 768 px o design system põe todas as
   células em `white-space: nowrap`, por isso a largura MÍNIMA da tabela era a soma do
   valor mais comprido de cada coluna: 1435 px, contra 1095 px de contentor numa janela
   de 1440 com o menu aberto. A tabela rola — é a regra da casa — mas o que se via em
   repouso era o selo do estado partido ao meio pela borda direita, e a coluna das ações
   fora do ecrã. Era isso que o dono fotografava.

   Três medidas, todas para a mesma conta:

   · as três colunas de TEXTO (Contrato, Cliente, Descrição) passam a `ds-td-wrap`, que
     é a classe que o design system tem para isto — deixam de exigir a linha inteira e
     passam a quebrar;
   · o mínimo delas desce dos 180 px por omissão para 120. Os 180 são a medida certa
     para uma tabela de cinco ou seis colunas; em oito, três mínimos de 180 sozinhos
     comem 540 px do contentor e é isso que empurra o estado para fora. Não é um número
     apertado às cegas: com espaço as colunas ficam bem acima dele (160 px cada a
     1440), o mínimo só manda quando a janela encolhe;
   · a fila de botões pode quebrar. Com dois botões («Emitir» e «Reverter») a coluna
     exigia 211 px em TODAS as linhas, mesmo nas seis que só têm um. Quando há espaço
     ficam lado a lado como sempre; só quando não há é que passam a duas linhas.

   Com isto, e com as sub-linhas a poderem quebrar (regra do design system), a largura
   mínima cai de 1435 para ~890 px: a tabela cabe INTEIRA a 1440, 1329 e 1024, sem corte
   nenhum e sem rolamento. A 768 rola mesmo — oito colunas não cabem em 719 px sem
   esconder informação — mas agora a barra de rolamento está encostada à última linha,
   e não escondida debaixo do cartão dos totais. */
@media (min-width: 768px) {
    .fat-linha td.ds-td-wrap {
        min-width: 120px;
    }

    .fat-linha td.ds-td-actions {
        white-space: normal;
    }

    .fat-acoes {
        flex-wrap: wrap;
    }
}

/* «Emitir» + olho e «Reverter» + olho numa linha só, ONDE HÁ ESPAÇO (09/10/2026). Até
   aqui era o «Emitir» desligado das faturas já emitidas que alargava a coluna; sem ele a
   tabela encolhia-a ao mínimo e o olho caía para a linha de baixo mesmo a 1440. Só a
   partir de 1440: medido, a 1280 os 168 px punham a tabela a rolar de lado — e não
   rolar é a regra deste ecrã (o bloco de cima). Abaixo, os botões quebram como sempre. */
@media (min-width: 1440px) {
    .fat-linha td.ds-td-actions {
        min-width: 168px;   /* 93 (Reverter) + 8 + 32 (olho) + 2 × 16 de preenchimento */
    }
}

/* O aviso de que a ronda ao Moloni falhou. Usa a mensagem de serviço da casa
   (`ds-analise-erro`) mas mais estreita e sem ocupar a largura toda do ecrã: é uma nota
   sobre a frescura dos dados, não uma avaria da página — a lista continua a servir. */
.fat-aviso-sinc {
    margin: 0 0 12px;
}

/* «A verificar os artigos no Moloni…» — só aparece quando a verificação passou o teto
   (8 s) e o resto do ecrã já se pintou. Tom de nota, com o spinner da casa. */
.fat-aviso-verificar {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    margin: 0 0 12px;
    font-size: var(--txt-sm, 0.8125rem);
    color: var(--text-3, #6E6668);
}

/* O lugar da etiqueta do Moloni no cabeçalho, enquanto carrega — a altura e a largura
   de uma `.ds-tag` com «Moloni ligado». */
.fat-skel-etiqueta {
    display: inline-block;
    width: 116px;
    height: 24px;
    border-radius: var(--r-full, 999px);
    vertical-align: middle;
}

/* O LADO A LADO EM CARTÃO FOI DESFEITO             (16/09/2026, ticket 9c75e38e)

   Aqui estava um bloco que punha `.fat-data`, `.fat-atraso`, `.fat-prazo`,
   `.fat-prevista` e `.fat-doc` em `display: inline` com `margin-left: 8px` abaixo
   dos 768 px, para poupar altura. Poupava — e dava «VENCIMENTO 20-08-2026 pronto
   pagamento» tudo na mesma linha, espremido contra a margem do cartão, que foi o que
   o dono fotografou. O `display: inline` nem sequer fazia falta para isso: numa `<td>`
   que é `display: flex`, qualquer filho é um item de flex e é blocado à mesma; quem
   os punha lado a lado era o próprio flex. Agora cada sub-linha declara-se com
   `ds-cell-sub` e o design system põe-na na linha de baixo, alinhada à direita.

   A margem à esquerda foi-se com eles: numa linha própria, ela só desalinhava a
   sub-linha da direita da célula.

   E o limite era `max-width: 768px`, que casa com o `min-width: 768px` do design
   system EXACTAMENTE a 768 px — a largura em que a tabela já é tabela e as datas
   ficavam numa só linha, a inchar a coluna «Data» de 137 px para 221. O que fica
   deste bloco passa a parar a 767.98 px. */
@media (max-width: 767.98px) {
    /* O cartão inteiro leva a marca à esquerda — o `td:first-child` deixa de ser a
       primeira coluna de uma linha e passa a ser a primeira linha de um cartão. */
    .fat-linha.is-atrasada > td:first-child {
        box-shadow: none;
    }

    .fat-linha.is-atrasada {
        box-shadow: inset 3px 0 0 0 var(--error-600, #DA0A0D);
    }
}

/* --- estado da integração ----------------------------------------------------------
   Diz-se ANTES de se carregar em «Emitir», não depois. QUATRO cores para quatro coisas
   diferentes — a tag tinha duas e metia no mesmo âmbar «esta app não tem integração» e
   «estás num ambiente de testes», que foi o que fez o dono ler o módulo como incompleto
   (ticket 9c75e38e, 06/09): verde a sério, azul de ambiente de testes, âmbar de
   emissão manual, vermelho de avaria. */
.fat-tag-ok,
.fat-tag-off,
.fat-tag-sim,
.fat-tag-erro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.fat-tag-ok {
    color: var(--success-700, #15803d);
}

.fat-tag-off {
    color: var(--warning-700, #92400e);
}

/* Azul, e não âmbar: o ambiente de testes não é um aviso de que algo está mal — é a
   legenda de onde se está. Âmbar aqui lia-se como defeito da app. */
.fat-tag-sim {
    color: var(--info-700, #1d4ed8);
}

.fat-tag-erro {
    color: var(--error-700, #b91c1c);
}

/* --- «Gerar planos em falta» (ticket 9c75e38e, 15/09) -------------------------------
   A modal é a `ds-modal` do design system e a tabela da pré-visualização é a `ds-table`
   — aqui fica só o que é MESMO deste ecrã: a tira de totais, a lista do «por decidir» e
   a marca dos avisos. Clonar a moldura com prefixo próprio é o que fez o módulo irmão
   nascer torto a 390 px. */
body.fat-modal-aberto {
    overflow: hidden;
}

.fat-modal-head-txt {
    min-width: 0;
}

/* Os cinco números do topo. `.ds-kpi` (informativo) e NÃO `.ds-lst-kpi`: aqui não se
   filtra nada — são a leitura do que vai acontecer se se carregar no botão.
   Cinco desde 16/09/2026: entrou o «períodos para trás», que é o número que diz o que
   NÃO vai ser criado — e era o que faltava na véspera do estrago. */
.fat-previa-totais {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

/* --------------------------------------------------------------- progresso dos lotes -
   A geração deixou de caber num pedido só e passou a ser uma sequência de lotes: sem
   uma barra, o ecrã ficava parado durante um minuto sobre trabalho que estava a ser
   feito — que foi exactamente como o «Tempo limite excedido» de 15/09 se leu. */
.fat-progresso {
    display: grid;
    gap: 8px;
    padding: 28px 4px;
}

.fat-progresso-txt {
    font-size: 14px;
    color: var(--text-muted, #64748b);
    text-align: center;
}

.fat-progresso-barra {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2, #f1f5f9);
    overflow: hidden;
}

.fat-progresso-barra>span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--text, #0f172a);
    transition: width .25s ease;
    /* um lote que não mexe o número deixaria a barra a zero sem explicação: a largura
       mínima mostra que há alguma coisa a acontecer desde o primeiro lote */
    min-width: 2px;
}

/* --------------------------------------------------------- o que fica para trás ------
   Números, não alarme: isto é o histórico que a app DEIXA de criar, e a cor de aviso
   punha-o a competir com os contratos que precisam mesmo de decisão. */
.fat-tras {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    color: var(--text-muted, #64748b);
}

.fat-tras-eur {
    font-size: 11px;
    opacity: .85;
}

/* A marca do contrato renovado. Discreta de propósito — não é erro nem decisão: é a
   explicação de porque é que o total do plano não bate com o total das linhas. */
.fat-renov {
    margin-left: 6px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    cursor: help;
}

.fat-previa-titulo--neutro {
    color: var(--text-muted, #64748b);
}

/* A condição de pagamento é uma frase inteira (151 caracteres no pior caso real) e o
   nome do cliente também estica. Sem um tecto de largura, essas duas colunas sozinhas
   empurram os números para fora do ecrã — e a tabela vive dentro de uma modal, onde
   não há para onde crescer. O texto inteiro fica no `title`. */
.fat-cond,
.fat-cliente {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 190px;
}

.fat-cliente {
    -webkit-line-clamp: 2;
    max-width: 170px;
}

.fat-aviso {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    color: var(--warning-700, #92400e);
    max-width: 180px;
    /* a `.ds-table` não deixa o texto partir; um aviso de uma linha só esticava a
       coluna até 487 px e punha a tabela inteira a rolar de lado */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A tabela tem sete colunas e vive dentro de uma modal: num tablet a moldura é mais
   estreita do que elas, e sem um piso de largura o navegador espremia a coluna dos
   avisos até a linha ficar com cinco vezes a altura das outras. Com o piso, a tabela
   rola de lado dentro do seu `.ds-table-wrap` — que é o padrão da casa para tabelas
   largas — e cada coluna mantém-se legível. Só acima dos 768: abaixo disso a
   `.ds-table` já é uma pilha de cartões, onde a largura não é problema nenhum. */
@media (min-width: 768px) {
    /* 980 e não 880 desde 16/09/2026: entrou a coluna «Para trás». */
    .fat-previa-tabela {
        min-width: 980px;
    }
}

.fat-previa-nada {
    margin: 0 0 4px;
    color: var(--text-muted, #64748b);
}

.fat-previa-decidir {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #e2e8f0);
}

.fat-previa-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--warning-700, #92400e);
}

.fat-previa-nota {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
}

.fat-previa-lista {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.fat-previa-lista li {
    font-size: 13px;
}

.fat-previa-motivo {
    display: block;
    color: var(--text-muted, #64748b);
}

/* ⚠️ 767 e NÃO 768: a `.ds-table` do design system vira cartões em
   `@media (min-width: 768px)` pela negativa, ou seja ABAIXO de 768 — a 768 certos ela
   ainda é tabela. Com o corte a 768 os tectos de largura saíam enquanto a tabela ainda
   era tabela, e a coluna dos avisos esticava a linha para cinco vezes a altura. Num
   cartão a frase tem a largura toda e os tectos não fazem sentido; numa tabela fazem. */
@media (max-width: 767px) {
    .fat-previa-totais {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Num cartão a célula é «rótulo à esquerda, valor à direita»: a coluna empilhada do
       «Para trás» punha o valor por baixo do número, desalinhado do resto. */
    .fat-tras {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    .fat-cond,
    .fat-cliente,
    .fat-aviso {
        max-width: none;
    }
}