/* =====================================================================================
   mod-fatura-vista.css — a vista da fatura (prefixo fvis-)
   -------------------------------------------------------------------------------------
   Só o que o design system NÃO dá. A modal, os botões, os selos e a tabela são todos
   `ds-*`; aqui fica a arrumação interna: os dois blocos de identificação, a tira de
   totais e a moldura do PDF.

   MOBILE-FIRST, como toda a casa: a base é a coluna única de 320 px e as media queries
   só ALARGAM. A tabela de linhas herda o comportamento de cartões do `.ds-table` abaixo
   de 768 px — é por isso que cada `<td>` leva `data-label` no JS.
   ===================================================================================== */

.fvis-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ⚠️ NADA AQUI DENTRO ENCOLHE.                        (defeito apanhado no ecrã, 21/09)
   O corpo da modal é uma coluna flex com altura limitada e `overflow: auto`, e num
   contentor assim os filhos têm `flex-shrink: 1` por omissão. Isso sozinho ainda não
   fazia mal — o `min-height: auto` segurava-os pelo conteúdo. Mas a caixa da tabela tem
   `overflow-x: auto` (para a tabela larga rolar dentro dela em vez de a página rolar de
   lado), e um item com overflow diferente de `visible` passa a ter `min-height: 0`:
   deixou de haver chão. A 320 px a caixa encolheu a ZERO com uma tabela de 644 px lá
   dentro, e o ecrã mostrava a frase de enquadramento seguida dos totais, sem uma única
   linha pelo meio — sem erro nenhum na consola, e a tabela existia mesmo no DOM.
   Medido: `.fvis-tabela-caixa` a 0 px de altura, `.fvis-tabela` a 644 px.
   Isto vale para TODOS os filhos, não só para a tabela: qualquer bloco novo com
   overflow próprio cairia na mesma armadilha. */
.fvis-body > * { flex: 0 0 auto; }

/* ---- topo: selo do estado + descrição da linha ---- */
.fvis-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fvis-descricao {
    font-size: 13px;
    color: var(--text-secondary, #475569);
    min-width: 0;
}

/* ---- avisos ---- */
.fvis-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.45;
}

.fvis-aviso svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.fvis-aviso--erro {
    background: var(--danger-50, #fef2f2);
    border-color: #fecaca;
    color: #991b1b;
}

.fvis-aviso--info {
    background: var(--info-50, #eff6ff);
    border-color: #bfdbfe;
    color: #1e40af;
}

/* ---- identificação: cliente | documento ---- */
.fvis-ident {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.fvis-ident-bloco {
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 12px 14px;
    min-width: 0;
}

.fvis-ident-tit {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    margin-bottom: 6px;
}

.fvis-ident-nome {
    font-size: 15px;
    font-weight: 650;
    color: var(--text-primary, #0f172a);
    overflow-wrap: anywhere;
}

.fvis-ident-sub {
    font-size: 12.5px;
    color: var(--text-secondary, #475569);
    overflow-wrap: anywhere;
}

.fvis-campo {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: 13px;
    min-width: 0;
}

.fvis-rot { color: var(--text-muted, #64748b); }

.fvis-val {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ---- a frase que diz se em baixo está uma previsão ou um documento ---- */
.fvis-enquadra {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted, #64748b);
}

/* ---- tabela das linhas ---- */
.fvis-tabela-caixa {
    /* Sem isto a tabela larga empurra o corpo da modal e a página ganha rolamento
       lateral a 320 px — a regra da casa é a barra ficar DENTRO do contentor. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fvis-tabela { width: 100%; }
.fvis-tabela .fvis-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvis-tabela .fvis-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.fvis-tabela .fvis-total-linha { font-weight: 650; }

.fvis-desc { min-width: 0; }

/* ⚠️ O NOME E O PERÍODO SÃO UM BLOCO SÓ, e por isso vivem num `div` próprio.
   Abaixo de 768 px o `.ds-table` do design system vira cartões e cada `<td>` passa a
   `display: flex` (rótulo à esquerda, valor à direita). Com os dois `span` soltos, o
   `td` tratava-os como DOIS itens do flex e punha-os lado a lado: o nome espremido em
   três linhas de duas palavras e o período ao lado dele, como se fossem colunas
   diferentes. Com o `div` pelo meio o `td` vê um item só, e lá dentro eles empilham. */
.fvis-desc-cx { min-width: 0; text-align: left; }

.fvis-desc-nome { display: block; overflow-wrap: anywhere; }

.fvis-desc-sub {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted, #64748b);
    overflow-wrap: anywhere;
}

.fvis-marca {
    color: var(--warning-600, #d97706);
    font-weight: 700;
    margin-left: 2px;
}

.fvis-nota,
.fvis-vazio {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

/* ---- totais ---- */
.fvis-totais {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    width: 100%;
    max-width: 320px;
}

.fvis-tot-linha {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    padding: 3px 0;
}

.fvis-tot-linha strong { font-variant-numeric: tabular-nums; }

.fvis-tot-final {
    border-top: 1px solid var(--border, #e2e8f0);
    margin-top: 4px;
    padding-top: 7px;
    font-size: 15px;
}

.fvis-tot-pago strong { color: var(--success-600, #16a34a); }
.fvis-tot-divida strong { color: var(--danger-600, #dc2626); }

/* ---- as duas abas: Documento | Detalhe ---- */
.fvis-abas {
    display: flex;
    gap: 4px;
    margin-left: auto;
    background: var(--surface-2, #f1f5f9);
    border-radius: 999px;
    padding: 3px;
}

.fvis-aba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 36px de altura e não 44: é um atalho DENTRO de um alvo maior (a barra), e a
       régua do gate para esses é a AA — 24px. Ver tools/responsive-audit.js, check 4. */
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary, #475569);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.fvis-aba:hover { color: var(--text-primary, #0f172a); }

.fvis-aba.is-on {
    background: var(--surface, #fff);
    color: var(--text-primary, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.fvis-aba:focus-visible {
    outline: 2px solid var(--primary-500, #DA0A0D);
    outline-offset: 1px;
}

/* ---- a frase que diz de onde veio o papel ---- */
.fvis-origem {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}

.fvis-origem:empty { display: none; }

.fvis-painel[hidden] { display: none; }

.fvis-painel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ---- o PDF embebido: é o conteúdo principal, não um extra ---- */
.fvis-pdf {
    width: 100%;
    /* Uma folha A4 tem 1,414 de altura por 1 de largura. O `aspect-ratio` dá-lhe a
       forma certa em vez de uma altura fixa que corta a página ao meio num ecrã
       estreito e deixa tarja branca num largo. O `max-height` impede que num
       telemóvel deitado a folha empurre o rodapé para fora da modal. */
    aspect-ratio: 1 / 1.414;
    max-height: 72vh;
    min-height: 300px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: var(--surface-2, #f8fafc);
}

/* ---- rodapé: a nota à esquerda, os botões à direita ---- */
.fvis-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.fvis-rodape-nota {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
    min-width: 0;
}

.fvis-rodape-nota:empty { display: none; }

.fvis-rodape-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* ---- o par na coluna das ações dos dois ecrãs ---- */

/* Vive aqui, e não no CSS de cada ecrã, pela mesma razão que o HTML dele: é um par, e
   um par que se estilize em dois sítios acaba diferente nos dois. Os 4 px (contra os 8
   entre os botões vizinhos) são o que diz ao olho que estes dois andam juntos. */
.fvis-par {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---- o N.º OP da agência, por baixo da descrição nos dois ecrãs (758a62f4) ----
   Uma sub-linha DECLARADA (`ds-cell-sub`): o design system passa-a para a linha de baixo
   em cartão e não a deixa alargar a coluna em tabela. Aqui só a arrumação de dentro — o
   número (ou o botão que o indica) e o clipe do PDF lado a lado. */
.fvis-op {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* Onde fica a sub-linha. A regra geral das sub-linhas (`.ds-table tbody td:not(.ds-td-hero)
   > .ds-cell-sub`, mais específica do que `.fvis-op`) punha-a em bloco e alinhada à DIREITA:
   em tabela o botão ia parar ao fundo da coluna Descrição, longe do texto a que pertence
   (verificação de 19/10/2026). Em cartão (< 768 px) a direita está certa — é onde está o
   valor; em tabela fica por baixo do início da descrição. */
.ds-table tbody td:not(.ds-td-hero) > .ds-cell-sub.fvis-op {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .ds-table tbody td:not(.ds-td-hero) > .ds-cell-sub.fvis-op {
        justify-content: flex-start;
        text-align: left;
    }
    /* o botão é «ghost»: o ícone começava 13 px (12 de enchimento + 1 de borda) à direita da
       descrição. Recuado o mesmo, o ícone fica a direito com o texto de cima. */
    .ds-table tbody td:not(.ds-td-hero) > .ds-cell-sub.fvis-op > .fvis-op-btn:first-child {
        margin-left: -13px;
    }
}

.fvis-op-btn {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
}

.fvis-op-btn > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* «Falta o N.º OP» num contrato de agência: âmbar e não vermelho — é trabalho por fazer
   antes de emitir, não um erro. A mesma cor das referências sem artigo no Moloni. */
.fvis-op-falta {
    color: var(--warning-700, #B45309);
}

.fvis-op-txt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-600, #4b5563);
}

/* o formulário (modal pequena) */
.fvis-op-agencia {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--neutral-600, #4b5563);
}

.fvis-op-agencia svg { flex: 0 0 auto; margin-top: 2px; }

.fvis-op-ficheiro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fvis-op-fich-nome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.fvis-op-fich-tam,
.fvis-op-fich-vazio {
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

.fvis-op-fich-acoes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

/* a digitalização da OP no visor (o PDF usa a moldura `.fvis-pdf` da fatura) */
.fvis-op-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Mobile-first, como o resto do ficheiro: em cartão (a base) a sub-linha alinha à direita
   como as outras do cartão; em tabela (768 px para cima) volta à esquerda, por baixo da
   descrição. */
.ds-table tbody td > .fvis-op { justify-content: flex-end; }

@media (min-width: 768px) {
    .ds-table tbody td > .fvis-op { justify-content: flex-start; }
}

/* ---- esqueleto de carregamento ---- */
.fvis-sk {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fvis-sk-linha {
    height: 18px;
    border-radius: 8px;
    background: linear-gradient(90deg,
            var(--surface-2, #f1f5f9) 25%,
            var(--surface-3, #e2e8f0) 37%,
            var(--surface-2, #f1f5f9) 63%);
    background-size: 400% 100%;
    animation: fvis-sk 1.3s ease-in-out infinite;
}

.fvis-sk-linha:nth-child(2) { width: 82%; }
.fvis-sk-linha:nth-child(4) { width: 64%; }
.fvis-sk-linha:nth-child(5) { width: 45%; }

@keyframes fvis-sk {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .fvis-sk-linha { animation: none; }
}

/* =====================================================================================
   A PARTIR DE 640 px há espaço para as duas colunas e para o rodapé numa linha só.
   ===================================================================================== */
@media (min-width: 640px) {
    .fvis-ident { grid-template-columns: 1fr 1fr; }

    .fvis-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .fvis-rodape-btns { flex-wrap: nowrap; }
}