/* =====================================================================================
   EFICÁCIA CRM — mod-folhas.css
   -------------------------------------------------------------------------------------
   SÓ o que o design-system.css NÃO cobre para o módulo Folhas de Obra.
   Tudo o resto (cards, tabelas→cartões, filtros, modais, KPIs, badges, skeletons,
   barra de ações fixa) vem de design-system.css com as classes ds-.

   Mobile-first: as regras base são para telemóvel; os @media (min-width: …) fazem
   crescer para tablet/desktop. Alvos de toque ≥ 44 px. Zero scroll horizontal.
   ===================================================================================== */

/* --------------------------------------------------------------------------
   0. Raiz do módulo
   -------------------------------------------------------------------------- */
.mod-folhas-mount { min-width: 0; }
.mod-folhas { min-width: 0; }
.mod-folhas *,
.mod-folhas *::before,
.mod-folhas *::after { box-sizing: border-box; }

/* O contentor do módulo nunca pode empurrar a página para o lado */
.mod-folhas img,
.mod-folhas svg { max-width: 100%; }

/* --------------------------------------------------------------------------
   1. Chips de filtros ativos (corrige a persistência silenciosa — B11/B17)
   -------------------------------------------------------------------------- */
/* O layout vem do `.ds-lst-chips` partilhado; aqui fica só o rótulo
   («N filtros ativos») que é próprio deste módulo. */

.fo-chips-rot {
    font-size: var(--text-xs, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500, #64748b);
    margin-right: 2px;
}
.fo-chips .ds-lst-chip { max-width: 100%; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   2. Listagem — sinal de risco (venda a zero com custo — B23)
   -------------------------------------------------------------------------- */
.fo-risco {
    display: inline-flex;
    vertical-align: -3px;
    color: var(--warning-600, #d97706);
}
.fo-risco svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   3. Detalhe — auditoria, observações da linha, anexos
   -------------------------------------------------------------------------- */
.fo-auditoria {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--neutral-200, #e2e8f0);
    font-size: var(--text-xs, 12px);
    color: var(--neutral-400, #94a3b8);
}

/* "Obs:" dentro da célula Produto (é aqui que vive o código do suporte) */
.fo-obs-linha {
    margin-top: 4px;
    font-size: var(--text-xs, 12px);
    line-height: 1.55;
    color: var(--neutral-500, #64748b);
    overflow-wrap: anywhere;
}
.fo-obs-linha b { color: var(--neutral-600, #475569); font-weight: 700; }
.fo-obs-linha p { margin: 0 0 4px; }
.fo-obs-linha p:last-child { margin-bottom: 0; }
.fo-obs-linha ul,
.fo-obs-linha ol { margin: 0 0 4px; padding-left: 18px; }

.fo-anexo-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.fo-anexo-tag svg { width: 13px; height: 13px; }

/* Linha de artigo anulada: fora dos totais (B5) e visualmente esbatida */
.fo-linha-anulada { opacity: 0.55; }
.fo-linha-anulada .ds-cell-primary,
.fo-linha-anulada .ds-cell-ref { text-decoration: line-through; }

/* --------------------------------------------------------------------------
   4. KPIs da vista contabilística
   -------------------------------------------------------------------------- */
.fo-kpis { --ds-kpi-min: 190px; }
.fo-kpi-dica {
    margin-top: 8px;
    font-size: var(--text-xs, 12px);
    line-height: 1.45;
    color: var(--neutral-400, #94a3b8);
}
/* Em telemóvel os 3 KPIs empilham a largura toda (nunca reduzir o tipo) */
@media (max-width: 519px) {
    .fo-kpis { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. Modal de artigo — margem em tempo real (antídoto ao B23)
   -------------------------------------------------------------------------- */
.fo-margem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--neutral-200, #e2e8f0);
    background: var(--neutral-50, #f8fafc);
    min-width: 0;
}
.fo-margem-rot {
    font-size: var(--text-xs, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500, #64748b);
}
.fo-margem-val {
    font-size: var(--text-lg, 18px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: auto;
}
.fo-margem-val span { font-size: var(--text-sm, 14px); font-weight: 600; opacity: 0.75; }
.fo-margem--pos { border-color: var(--success-200, #bbf7d0); background: var(--success-50, #f0fdf4); }
.fo-margem--pos .fo-margem-val { color: var(--success-600, #16a34a); }
.fo-margem--neg { border-color: var(--error-200, #fecaca); background: var(--error-50, #fef2f2); }
.fo-margem--neg .fo-margem-val { color: var(--error-600, #dc2626); }
.fo-margem--zero .fo-margem-val { color: var(--neutral-600, #475569); }
.fo-margem-aviso {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    color: var(--error-600, #dc2626);
    min-width: 0;
}
.fo-margem-aviso svg { width: 14px; height: 14px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   6. Zona de upload (dropzone) + anexo escolhido
   -------------------------------------------------------------------------- */
.fo-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
    min-height: 92px;
    padding: 16px;
    border: 2px dashed var(--neutral-200, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    background: var(--neutral-25, #fcfcfd);
    color: var(--neutral-500, #64748b);
    font-size: var(--text-sm, 14px);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
}
.fo-dropzone svg { width: 22px; height: 22px; color: var(--neutral-400, #94a3b8); flex-shrink: 0; }
.fo-dropzone:hover,
.fo-dropzone:focus-visible {
    border-color: var(--primary-400, #ef4444);
    background: var(--primary-50, #fef2f2);
    color: var(--neutral-700, #334155);
    outline: none;
}
.fo-dropzone.is-drag {
    border-color: var(--primary-500, #dc2626);
    background: var(--primary-50, #fef2f2);
}
.fo-dropzone span { min-width: 0; overflow-wrap: anywhere; }

.fo-anexo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--success-200, #bbf7d0);
    background: var(--success-50, #f0fdf4);
    min-width: 0;
}
.fo-anexo-nome {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: var(--success-700, #15803d);
    overflow-wrap: anywhere;
}
.fo-anexo-nome svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Fila de ficheiros do modal "Adicionar Ficheiro" (spec §5.4): vários de cada
   vez, lista verde com remoção individual. */
.fo-fila {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.fo-fila-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--success-200, #bbf7d0);
    background: var(--success-50, #f0fdf4);
    min-width: 0;
}

/* --------------------------------------------------------------------------
   7. Campo de etiquetas de email (Para / CC)
   -------------------------------------------------------------------------- */
.fo-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: var(--ds-control-h-md, 44px);
    padding: 6px 10px;
    border: 1px solid var(--neutral-200, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    background: var(--neutral-0, #fff);
    min-width: 0;
}
.fo-tags:focus-within {
    border-color: var(--primary-400, #ef4444);
    box-shadow: var(--ds-ring, 0 0 0 3px rgba(220, 38, 38, 0.12));
}
.fo-tags-lista {
    display: contents;
}
.fo-tags-input {
    flex: 1 1 140px;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-sm, 14px);
    color: var(--neutral-800, #1e293b);
    height: 30px;
    padding: 0;
}

/* --------------------------------------------------------------------------
   8. Lista de ficheiros — coluna de seleção + barra de seleção
   -------------------------------------------------------------------------- */
.fo-td-check { width: 52px; }
.mod-folhas .fo-td-check .ds-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
}

/* Em cartões (mobile) a checkbox fica no topo do cartão, alinhada à esquerda */
.mod-folhas .ds-table tbody td.fo-td-check {
    justify-content: flex-start;
    border-bottom: 1px solid var(--neutral-100, #f1f5f9);
    padding-top: 10px;
}
.mod-folhas .ds-table tbody td.fo-td-check::before { content: 'Selecionar'; }

.fo-barra-selecao {
    justify-content: space-between;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--neutral-25, #fcfcfd);
    flex-wrap: wrap;
}
.fo-selecao-info {
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: var(--neutral-600, #475569);
    font-variant-numeric: tabular-nums;
    flex: 1 1 100%;
    min-width: 0;
}
.fo-selecao-erro { color: var(--error-600, #dc2626); }
@media (min-width: 768px) {
    .fo-barra-selecao { position: static; padding-bottom: 12px; }
    .fo-selecao-info { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   9. Estados auxiliares
   -------------------------------------------------------------------------- */
.fo-help-aviso { color: var(--warning-600, #d97706) !important; font-weight: 600; }

.ds-combobox.is-disabled { opacity: 0.6; }
.ds-combobox.is-disabled .ds-combobox-control { background: var(--neutral-50, #f8fafc); cursor: not-allowed; }
.ds-richtext.is-disabled { opacity: 0.7; background: var(--neutral-50, #f8fafc); }
.ds-richtext.is-disabled .ds-richtext-content { cursor: not-allowed; }

/* Grelha do modal de artigo: 13 campos legíveis sem scroll horizontal */
.fo-modal-artigo { min-width: 0; }
.fo-modal-artigo .ds-form-grid { gap: 14px; }
@media (min-width: 768px) {
    .fo-modal-artigo .ds-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fo-modal-artigo .ds-col-full { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .fo-modal-artigo .ds-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fo-modal-artigo .ds-col-full { grid-column: 1 / -1; }
}

/* Telemóvel em paisagem (844×390): o corpo da modal tem de continuar utilizável */
@media (max-height: 520px) {
    .fo-dropzone { min-height: 64px; padding: 10px; }
    .fo-margem { padding: 8px 10px; }
    .fo-margem-val { font-size: var(--text-base, 16px); }
    .fo-modal-artigo .ds-form-grid { gap: 10px; }
}

/* --------------------------------------------------------------------------
   8.1 RODAPÉ DAS MODAIS DESTE MÓDULO — o rótulo não sai do botão

   O `.ds-modal-footer` dá aos botões `flex: 1 1 auto; min-width: 0` para eles
   dividirem a largura em telemóvel. Só que o `.ds-btn` é `white-space: nowrap`:
   o que o flex ENCOLHE é a CAIXA, o texto fica do tamanho que é. A 320px, na
   modal «Encomendar a Fornecedor» (3 botões), medido:

       Fechar            caixa  81px
       Gerar documento   caixa 101px  ·  rótulo precisa 110px  → sai 18px fora
       Enviar email      caixa  86px  ·  rótulo precisa  77px  → sai  8px fora

   O rótulo de «Gerar documento» acabava em x=226 e o botão «Enviar email»
   começava em x=218: as palavras montavam-se uma na outra e a última ficava
   cortada pela margem do ecrã.

   A correção é deixar de encolher e passar a MUDAR DE LINHA. `flex-shrink: 0`
   garante que a caixa nunca fica menor do que o seu conteúdo (nada transborda,
   com qualquer rótulo e em qualquer idioma) e `flex-wrap: wrap` manda para
   baixo o que já não cabe; `flex-grow: 1` faz o que desce ocupar a linha toda,
   que em toque é uma vantagem — mais área para o dedo.

   Só abaixo de 768px: acima, o rodapé é centrado e sempre coube.
   Escopado por `.fo-modal-overlay` (a marca posta em `modal()`, mod-folhas.js)
   porque o overlay vive no `<body>` e uma regra sem escopo mexia nas modais dos
   outros dez módulos.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .fo-modal-overlay .ds-modal-footer {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .fo-modal-overlay .ds-modal-footer > .ds-btn {
        flex: 1 0 auto;
        min-width: 0;
    }
    /* «Fechar»/«Cancelar» é o único que não cresce: é a saída, não a ação. */
    .fo-modal-overlay .ds-modal-footer > .ds-btn--ghost { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   9.1 PAINEL DO MÓDULO (spec-frontend/dashboards-folhas.md)
   -------------------------------------------------------------------------
   Mobile-first: base = telemóvel, com o painel COLAPSADO por omissão. A lista
   continua a ser o que importa — o painel abre-se quando se quer, não ocupa
   dois ecrãs de scroll antes da primeira folha.

   Os níveis de cor não são escolhidos aqui: o botão traz a classe
   `ds-alerta--*` do MOD.alertas e esta folha só lhe lê a `border-color`.
   Um vocabulário, uma paleta, em toda a app.
   -------------------------------------------------------------------------- */
/* Mesma casca dos outros nove módulos: faixa de KPIs + painel «Análise»,
   empilhados com o mesmo respiro. A moldura própria (caixa com borda e
   fundo à volta de tudo) foi apagada — era ela que fazia este painel
   parecer outra coisa. */
.fo-dash {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
    min-width: 0;
}

/* O interruptor do painel deixou de viver aqui: passou a ser
   `.ds-analise-toggle` no ds-listagem.css — o MESMO botão nos dez
   módulos (MOD.listagem.painelAnalise). A faixa de KPIs também saiu
   do colapsável: fica sempre visível, por cima do painel. */

/* O corpo é o `.ds-analise-corpo` partilhado; aqui só se acrescenta o
   respiro interior que o painel das folhas de obra sempre teve. */
.fo-dash .ds-analise-corpo:not(:empty) { padding-top: var(--sp-1, 4px); }
.fo-dash-accoes { display: flex; justify-content: flex-end; }

/* ---- mostradores ---- */
/* A FILA e a do `ds-lst-kpis` (flex com rolamento horizontal). Aqui so se diz
   que estes cartoes podem crescer: sao cinco, com nota e aviso, e a largura
   minima de 96 px da moldura deixava-os apertados num ecra largo. */
.fo-dash-kpis > .fo-dash-kpi {
    min-width: 180px;
    flex: 1 1 180px;
    max-width: 340px;
}
/* `--r-lg` (14px) e `--sp-2/--sp-3` no padding: é o mesmo objeto que o
   `.ds-lst-kpi` da moldura, e a folha era a única a desenhá-lo a 10px de
   canto e a 10/12 de recuo. O que fica diferente — a barra de nível à
   esquerda e o fundo tingido — é DELIBERADO: aqui os mosaicos são
   avisos ("301 encomendas em atraso"), não filtros de estado. */
/* O CARTAO E O `ds-lst-kpi` DA MOLDURA — aqui so o que os outros nao tem.

   Ate 21/08 esta classe desenhava a sua propria caixa: borda esquerda de 3 px,
   fundo tingido pelo nivel e o rotulo por cima do numero. Funcionava, mas era
   a UNICA listagem assim, e ao lado de Propostas ou Equipamentos lia-se como
   outra aplicacao. Passa a herdar a caixa partilhada; o que fica e a nota, o
   aviso e o sinal da margem, que os outros mostradores nao tem. */
.fo-dash-kpi {
    /* A nota e o aviso sao duas linhas de texto que os outros nao levam: sem
       este minimo, os cinco mostradores ficavam de alturas diferentes conforme
       a nota coubesse ou nao numa linha. */
    min-height: 76px;
    font: inherit;
}

/* Niveis — a cor mudou de sitio, nao desapareceu.

   Estava no fundo do cartao (`--danger-50`, `--warning-50`, `--brand-50`) e
   numa borda esquerda grossa. Passa a viver no PONTO antes do rotulo, que e
   onde as outras nove listagens a poem (`--kpi-cor`, via `data-cor`). O
   `data-nivel` fica no elemento para quem depender dele, e o nivel continua a
   ser dito por extenso aos leitores de ecra.

   Um cartao branco com um ponto vermelho continua a gritar «critico» sem
   pintar um quinto da pagina — e cinco cartoes tingidos lado a lado tiravam a
   hierarquia a todos ao mesmo tempo. */
/* O `ds-lst-kpi-rot` ja da o tamanho, o peso, as maiusculas e o ponto da cor.
   Aqui so se levanta o `white-space: nowrap` dele: «Abertas ha mais de 30 dias»
   nao cabe numa linha a 320 px, e cortada com reticencias deixava de dizer
   quantos dias — que e a unica coisa que aquele mostrador tem para dizer. */
.fo-dash-kpi-rot {
    white-space: normal;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* O tamanho e o peso vem do `ds-lst-kpi-n`. Fica a quebra, para «52 038,67 €»
   nao sangrar do cartao a 320 px. */
.fo-dash-kpi-n { overflow-wrap: anywhere; }
.fo-dash-kpi-n--neg { color: var(--danger-600, #c10e3a); }
.fo-dash-kpi-n--pos { color: var(--success-600, #059669); }
.fo-dash-kpi-nota,
.fo-dash-kpi-aviso {
    font-size: var(--txt-xs, 12px);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.fo-dash-kpi-nota { opacity: .9; }
.fo-dash-kpi-aviso { opacity: .78; font-style: italic; }

/* Os `grid-template-columns` que aqui estavam morreram com a grelha: a fila
   passou a ser o flex rolavel do `ds-lst-kpis`, e uma propriedade de grelha
   num contentor flex nao faz nada — ficaria a mentir a quem a lesse. O
   crescimento dos cartoes esta no `flex` la em cima.

   O numero maior no desktop fica: e a mesma escala que os outros modulos usam
   acima dos 1024 px. */
@media (min-width: 1024px) {
    .fo-dash-kpi-n { font-size: var(--txt-2xl, 26px); }
}

/* ---- gráficos ---- */
.fo-dash-graficos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}
.fo-dash-graf {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px 12px;
    border: 1px solid var(--border, #e4e0e0);
    border-radius: var(--r-md, 10px);
    background: var(--surface-alt, #fcfbfb);
}
.fo-dash-graf-tit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--txt-sm, 14px);
    font-weight: 700;
    color: var(--text-1, #1b1618);
}
.fo-dash-graf-sub {
    font-size: var(--txt-xs, 12px);
    font-weight: 400;
    color: var(--text-3, #6e6668);
    line-height: 1.35;
}
/* A altura é fixa e o Chart.js desenha dentro dela: sem isto o canvas
   responsivo cresce sem fim e empurra a lista para fora do ecrã. */
.fo-dash-graf-caixa {
    position: relative;
    height: 220px;
    min-width: 0;
}
.fo-dash-graf-caixa canvas { max-width: 100%; }

@media (min-width: 768px) {
    .fo-dash-graf-caixa { height: 260px; }
}
@media (min-width: 1200px) {
    .fo-dash-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- listas acionáveis ---- */
.fo-dash-listas {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border, #e4e0e0);
    border-radius: var(--r-md, 10px);
    overflow: hidden;
}
.fo-dash-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--surface-alt, #fcfbfb);
    border-bottom: 1px solid var(--border, #e4e0e0);
}
.fo-dash-tabs::-webkit-scrollbar { display: none; }
.fo-dash-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-3, #6e6668);
    font: inherit;
    font-size: var(--txt-sm, 14px);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.fo-dash-tab[aria-selected="true"] {
    color: var(--text-1, #1b1618);
    border-bottom-color: var(--brand-500, #da0a0d);
    background: var(--surface, #fff);
}
.fo-dash-cont {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ink-100, #f1eeee);
    color: var(--text-2, #423b3d);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fo-dash-tab[aria-selected="true"] .fo-dash-cont {
    background: var(--brand-50, #fff1f1);
    color: var(--brand-700, #930c0e);
}

.fo-dash-painel { padding: 8px 10px 10px; min-width: 0; }
.fo-dash-painel:focus-visible { outline: 2px solid var(--brand-500, #da0a0d); outline-offset: -2px; }

.fo-dash-lista { list-style: none; margin: 0; padding: 0; min-width: 0; }
.fo-dash-lista > li + li { border-top: 1px solid var(--border, #e4e0e0); }

.fo-dash-lin {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 9px 6px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    min-width: 0;
}
.fo-dash-lin:hover { background: var(--surface-alt, #fcfbfb); }
.fo-dash-lin-corpo { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.fo-dash-lin-tit {
    font-size: var(--txt-sm, 14px);
    font-weight: 600;
    color: var(--text-1, #1b1618);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.fo-dash-lin-ref {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6e6668);
}
.fo-dash-lin-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6e6668);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.fo-dash-lin-fim {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex: 0 0 auto;
    text-align: right;
}
.fo-dash-lin-n {
    font-size: var(--txt-sm, 14px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-1, #1b1618);
    white-space: nowrap;
}
.fo-dash-lin-n--neg { color: var(--danger-600, #c10e3a); }
.fo-dash-lin-sub {
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6e6668);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fo-dash-nota,
.fo-dash-vazio {
    margin: 8px 4px 0;
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6e6668);
    line-height: 1.45;
}
.fo-dash-nota--sec { padding-top: 8px; border-top: 1px dashed var(--border, #e4e0e0); }
.fo-dash-vazio { margin: 16px 4px; text-align: center; }
.fo-dash-nota .ds-tag { vertical-align: middle; }

/* Alvos de toque no telemóvel: as linhas e os mostradores são botões reais. */
@media (max-width: 767px) {
    .fo-dash-lin { min-height: 56px; }
    .fo-dash-kpi { min-height: 84px; }
}

/* --------------------------------------------------------------------------
   10. Alvos de toque ≥ 44×44 px em mobile (critério de aceitação)
   -------------------------------------------------------------------------
   O design system usa alturas compactas (sm = 36 px, ícone = 36 px, botão do
   editor = 34 px). Abaixo de 768 px o módulo cresce esses alvos para 44 px sem
   mexer no tamanho do texto — inclui as modais, que vivem fora de .mod-folhas.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .mod-folhas .ds-btn--sm,
    .ds-modal .ds-btn--sm {
        min-height: 44px;
    }
    .mod-folhas .ds-icon-btn,
    .ds-modal .ds-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .mod-folhas .ds-richtext-btn,
    .ds-modal .ds-richtext-btn {
        width: 44px;
        height: 44px;
    }
    .mod-folhas .ds-modal-close,
    .ds-modal .ds-modal-close,
    .mod-folhas .ds-card-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .mod-folhas .ds-tag-x,
    .ds-modal .ds-tag-x {
        min-width: 32px;
        min-height: 32px;
    }
    .mod-folhas .ds-combobox-clear,
    .ds-modal .ds-combobox-clear {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    /* Ligações e rótulos: cresce a área de toque, não o tipo */
    .mod-folhas .ds-breadcrumb a,
    .mod-folhas .ds-field-ro-value a.ds-link,
    .mod-folhas .ds-pagesize label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .mod-folhas .ds-pagesize .ds-select,
    .mod-folhas .ds-pagination .ds-page-btn {
        min-height: 44px;
        height: 44px;
    }
    /* A barra de paginação fica com duas linhas confortáveis */
    .mod-folhas .ds-pagination { row-gap: 4px; }
}

/* --------------------------------------------------------------------------
   11. Filtros em bottom-sheet (mobile) — spec §11
   O design system colapsa os filtros num acordeão; abaixo de 768px este
   módulo promove o painel aberto a folha inferior, com backdrop e barra de
   ações fixa (Procurar / Limpar Filtro sempre visíveis, sem scroll).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .mod-folhas .ds-filters.is-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(15, 23, 42, 0.48);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        animation: foSheetFade 0.16s ease-out;
    }
    .mod-folhas .ds-filters.is-open .ds-filters-body {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 901;
        max-height: 84vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--neutral-0, #fff);
        border-top: 1px solid var(--neutral-200, #e5e7eb);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 34px rgba(15, 23, 42, 0.24);
        padding: 20px 16px 12px;
        gap: 14px;
        animation: foSheetUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* pega da folha */
    .mod-folhas .ds-filters.is-open .ds-filters-body::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--neutral-300, #d1d5db);
    }
    /* barra de ações fixa no fundo da folha */
    .mod-folhas .ds-filters.is-open .ds-filters-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin: 4px -16px 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--neutral-0, #fff);
        border-top: 1px solid var(--neutral-200, #e5e7eb);
        box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.06);
    }
    .mod-folhas .ds-filters.is-open .ds-filters-actions > .ds-btn {
        flex: 1 1 0;
        min-height: 44px;
    }
    /* o corpo da página não deve rolar por trás da folha */
    body.fo-sheet-aberta { overflow: hidden; }
}

@keyframes foSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes foSheetFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   12. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fo-dropzone { transition: none; }
    .mod-folhas .ds-filters.is-open .ds-filters-body,
    .mod-folhas .ds-filters.is-open::before { animation: none; }
}

/* --------------------------------------------------------------------------
   13. Controlos próprios (MOD.campos) — geometria dentro deste módulo

   O `.cp` nasce `width:100%` porque serve um campo de formulário, que ocupa a
   coluna toda. O «Por página» do paginador é outra coisa: um controlo de barra
   que se media pelo conteúdo (10 / 25 / 30 / 50) e que, esticado, empurrava o
   pager para longe. Devolve-se-lhe a largura que tinha.

   Preso à classe `fo-cp-pagina`, que é este módulo que a pede ao montar — assim
   não há hipótese de a regra ir parar ao paginador de outro ecrã.
   -------------------------------------------------------------------------- */
.cp.fo-cp-pagina {
    width: auto;
    min-width: 0;
}

.cp.fo-cp-pagina .cp-txt {
    flex: 0 1 auto;
    width: 3.5ch;
    min-width: 3.5ch;
    font-size: var(--text-xs);
}

/* Em toque o alvo volta aos 44px, como os botões do pager ao lado. */
/* Largura E ponteiro: a auditoria corre a 320-414px SEM emular toque, e um
   telemóvel a sério cumpre as duas. Basta uma para o alvo subir. */
@media (max-width: 768px), (pointer: coarse) {
    .cp.fo-cp-pagina .cp-gatilho { min-height: 44px; }
    /* 44px de largura, e não 3.5ch: em toque o alvo é o elemento, e uma
       caixa de 28px falhava o mínimo mesmo com o gatilho a 79px. */
    .cp.fo-cp-pagina .cp-txt {
        font-size: max(16px, var(--text-xs));
        width: var(--ds-touch, 44px);
        min-width: var(--ds-touch, 44px);
    }
}

/* --------------------------------------------------------------------------
   12. ALVOS DE TOQUE DAS AÇÕES DE LINHA (Tabela de Artigos)

   Os dois botões de ícone de cada linha — imprimir a encomenda e mandá-la por
   email — ficavam a 30x30 a partir de 768px. Não é acidente nem descuido deste
   módulo: é o `design-system.css`, que dentro de `@media (min-width: 768px)`
   aperta `.ds-table--compact .ds-icon-btn` para 30px para a sub-tabela ficar
   densa. E o `mobile-toque.css`, que repõe os 44px, é todo ele
   `@media (max-width: 767px)` — a partir de 768px não existe.

   O resultado é o ponto cego: num tablet de 768 ou 1024 o dedo é o mesmo dedo,
   e os dois alvos ficavam com 30x30 (medido com `hasTouch`: `pointer: coarse`
   e `hover: none` nas duas larguras). Abaixo de 768px estavam certos, e por
   isso nenhuma passagem por viewports os apanhava.

   A condição certa não é a LARGURA, é o PONTEIRO: `(pointer: coarse)` é
   verdadeiro no telemóvel e no tablet, e falso no portátil onde 30px com um
   rato é confortável e a densidade da tabela é uma vantagem. Ninguém perde nada
   e o dedo passa a ter os 44px que esta casa exige (WCAG 2.5.5).

   Especificidade: `.ds-table--compact .ds-icon-btn` (0,2,0) é a regra que se
   ultrapassa; `.ds-table--compact .fo-acoes-linha .ds-icon-btn` (0,3,0) ganha
   por especificidade E por ordem (mod-folhas.css vem depois no index.html),
   sem `!important` e sem tocar no design system.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .ds-table--compact .fo-acoes-linha .ds-icon-btn,
    .fo-acoes-linha .ds-icon-btn {
        width: var(--toque-min, 44px);
        height: var(--toque-min, 44px);
        min-width: var(--toque-min, 44px);
        min-height: var(--toque-min, 44px);
    }
    /* O grupo deixa de encolher os botões quando a célula é estreita. */
    .fo-acoes-linha { gap: 4px; flex-wrap: nowrap; }
    .fo-acoes-linha .ds-icon-btn { flex: 0 0 auto; }
}

/* --- imagem de capa da lista de ficheiros (reunião 21/08) --- */
.fo-capa { padding: 14px 16px 0; }
.fo-capa img { max-height: 160px; max-width: 100%; border-radius: 12px;
    border: 1px solid rgba(15, 12, 41, .08); display: block; }
/* botão de link público já com token ativo */
.ds-icon-btn.is-ativo { color: #15803D; }