/* =====================================================================================
   EFICÁCIA CRM — Produções (mod-producoes)
   Aproveita o vocabulário ds-* e os inputs/modais do suporte (sup-*). Só o que é
   específico da página vive aqui, com prefixo prd-.

   AUDITORIA DE FASES (28/08) — o que saiu daqui e porquê

   · `.prd-cab-acoes` FOI-SE. Era um clone da `.ds-lst-cab-acoes` do design system, e
     um clone partido: tinha `margin-left:auto` e `flex-shrink:0`, que são propriedades
     de FLEX, dentro de um `.ds-lst-cab` que é GRID — não faziam rigorosamente nada. E
     faltava-lhe o `grid-column: 1 / -1` da classe verdadeira, que em mobile manda os
     botões para a linha de baixo. Sem ele, os botões ficavam na mesma linha do título
     e esmagavam-no (medido: 7px de largura útil a 390px). O markup usa agora a classe
     do design system (`ds-listagem.css:148-173`).
   · `.prd-kpi*` FOI-SE. Era outro clone — do `.ds-kpi` do design-system.css — com
     cores em hexadecimal à mão. Os KPIs desta página são INFORMATIVOS (não são filtros
     que alternam), por isso a família certa é `.ds-kpi` / `.ds-kpi-grid`, não a
     `.ds-lst-kpi` das listagens. Aqui fica só o que a grelha do DS não dá: o
     tamanho menor do valor quando ele é um NOME e não um número.
   · `.prd-page` deixa de repetir o `display:flex` do `.ds-lst`. Estas regras não estão
     em `@layer`, logo ganhavam à folha de listagem e sobrepunham-lhe o `gap`.
   ===================================================================================== */

.prd-card { padding: 16px; }

/* ---------- filtro de período ---------- */
.prd-filtros {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.prd-filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prd-filtro .ds-input { width: 150px; }
.prd-filtros-acoes { display: flex; gap: 8px; align-items: center; }

/* ---------- KPIs ----------
   A zona é só um contentor: a grelha é a `.ds-kpi-grid` do design system, posta
   DENTRO dela pelo módulo. O esqueleto do MOD.ui traz a sua própria grelha e, se a
   zona fosse grelha, entrava como um único item e encolhia a um quarto da largura. */
.prd-kpis { min-width: 0; }
/* O «produto mais vendido» é um nome, não um número: à escala do `.ds-kpi-value`
   estoura o cartão em duas ou três linhas. */
.prd-kpi-texto { font-size: var(--text-lg); line-height: 1.25; }

/* ---------- gráfico ---------- */
.prd-graf { position: relative; height: 200px; margin-top: 14px; overflow: hidden; }
/* Sem isto o `hidden` do «não há meses para mostrar» perdia para a altura acima e
   ficava uma faixa vazia de 200px. */
.prd-graf[hidden] { display: none; }

/* ---------- tabela ---------- */
.prd-tabela { width: 100%; }
.prd-tabela tbody tr[data-prd-abrir] { cursor: pointer; }
.prd-tabela tbody tr[data-prd-abrir]:hover { background: var(--paper-50, #F7F8FA); }
/* O alinhamento à direita vem do `.ds-th-num`/`.ds-td-num` do design system, que o
   markup passou a usar. A classe privada `.prd-num` sozinha NUNCA chegava a aplicar-se:
   `.ds-table tbody td { text-align: left }` tem mais especificidade do que uma classe
   solta, e as colunas de números estavam à esquerda no desktop desde o primeiro dia.
   Aqui fica só o que o design system não dá: algarismos de largura fixa. */
.prd-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prd-sub { font-size: 12px; color: var(--ink-500, #6E6668); }
/* As ações vão num `<div>` DENTRO da célula, e não na própria célula: no modo
   tabela o `.ds-table tbody td` impõe `display:table-cell` com mais especificidade
   do que uma classe solta, e um `display:flex` aqui nunca chegava a aplicar-se. */
.prd-acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.prd-vazio { color: var(--ink-500, #6E6668); }
/* A célula que só carrega o estado vazio não é um par rótulo:valor — sem isto ficava
   espremida contra a direita (cartão, <768px) ou à esquerda (tabela). A
   especificidade tem de bater a do `.ds-table tbody td`, que é de classe + dois
   elementos; uma classe solta perdia. O `display:block` fica SÓ no modo cartão: no
   modo tabela um `<td>` fora do fluxo da tabela é pedir problemas. */
.prd-tabela tbody td.prd-td-vazio { text-align: center; padding: 26px 16px; border-bottom: none; }
@media (max-width: 767px) {
    .prd-tabela tbody td.prd-td-vazio { display: block; }
}

/* ---------- detalhe ---------- */
.prd-det-meta { font-weight: 600; color: var(--ink-700, #4A4245); margin: 0 0 4px; }
.prd-det-desc { color: var(--ink-600, #5B5355); margin: 0 0 10px; }

@media (max-width: 768px) {
    .prd-filtro .ds-input { width: 130px; }
}

.sup-dialog--larga { max-width: 860px; width: min(92vw, 860px); }

.prd-fichs { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(15, 12, 41, 0.08); border-radius: 12px; background: var(--paper-50, #F7F8FA); }
.prd-fichs-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.prd-fichs-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prd-fichs-lista li { display: flex; align-items: center; gap: 8px; }
.prd-fichs-lista a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-900, #1B1618); font-weight: 600; text-decoration: underline; }

.sup-zona--compacta { padding: 14px; flex-direction: row; gap: 8px; }
.prd-fichs-pend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sup-chip--novo { border-style: dashed; }

/* Célula de grelha que contém combobox leva `min-width: 0` — senão a largura
   intrínseca do input (size=20, ~277px com os ícones) estoura a modal e traz scroll
   horizontal. É a lição do modal de Suporte, 27/08. */
.prd-campo { min-width: 0; }