/* ══════════════════════════════════════════════════════════════════════
   TABELAS.CSS — modelos de tabela do Observatório Agroalimentar dos Açores
   ══════════════════════════════════════════════════════════════════════

   Dois modelos, construídos sobre a mesma base visual (fundo claro
   azulado, cabeçalho dourado/navy, tipo de letra Arial escalável):

   1) SIMPLES   — uma linha de cabeçalho, Ilha + colunas numéricas.
                  Classes: .leite-table  (ou .bovinos-table)
                  Wrapper: <div class="table-wrapper"><table class="leite-table">…

   2) AGRUPADA  — cabeçalho a duas linhas, colunas agrupadas por escalão,
                  com suporte a "inverter tabela" e coluna(s) de rótulo
                  fixas ao fazer scroll horizontal. Cantos arredondados
                  (10px) via moldura exterior que recorta o scroll interno.
                  Classes: .leite-table.dim-table
                  Wrapper: <div class="table-wrapper table-wrapper--grouped">
                             <div class="table-scroll"><table class="leite-table dim-table">…

   Convenção de cores para variações (%) — aplica-se às duas modelos, em
   qualquer página: célula com classe .col-pct fica azul por omissão
   (positivo/neutro); acrescentar .pct-down torna-a vermelho escuro
   (negativo). Usar sempre esta convenção em vez de cores ad hoc por página.

   Além das tabelas em si, este ficheiro também define o indicador que
   costuma ficar por cima delas — cartão azul do produto + cartões
   dourados Preço médio/Mín./Máx. (classes .pc-stats-*, ver secção
   "INDICADOR DE TABELA" mais abaixo). Ao editar este ficheiro, confirmar
   sempre que essas classes continuam definidas — é comum aparecerem
   referenciadas no HTML/JS de uma página de Preços sem nenhum CSS a
   dar-lhes forma, se esta secção for apagada ou movida por engano.

   Como aplicar numa página:
     <link rel="stylesheet" href="tabelas.css">
   e usar as classes/wrapper acima. Larguras de coluna (col.c-*) e o
   conteúdo das notas continuam específicos de cada página.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700&display=swap');

:root {
    --data-font-scale: 1;
}

/* ── Controlo de tamanho de letra (botões A- / A+ no subcabeçalho) ── */
.font-size-control { display: flex; align-items: center; gap: 4px; margin-right: 14px; }
.fs-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.7);
    font-family: Lato, sans-serif;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 3px 7px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fs-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.45); }

/* ══ WRAPPER — base partilhada pelos dois modelos ══ */
.table-wrapper {
    margin-bottom: 16px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    overflow-x: visible; /* modelo Simples: sem scroll, tooltips nunca são cortadas */
}

/* ── Nota-título — para quando uma tabela não tem cabeçalho de secção
   próprio; funciona visualmente como o título da tabela, em tons de azul
   claro (a mesma família de cor usada nos gráficos). Colar directamente
   por cima de .table-wrapper (sem espaço entre as duas). ── */
.table-note-title {
    background: #EAF2F8;
    color: #232F5D;
    font-family: Lato, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    padding: 8px 14px;
    border-radius: 10px 10px 0 0;
    border: 1px solid #6190B5;
    border-bottom: none;
}
.table-note-title::before {
    content: '*';
    margin-right: 4px;
    opacity: .6;
    font-weight: 400;
    font-style: normal;
}
.table-note-title + .table-wrapper {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}
.table-note-title + .table-wrapper .leite-table thead tr:first-child th:first-child,
.table-note-title + .table-wrapper .bovinos-table thead tr:first-child th:first-child { border-top-left-radius: 0; }
.table-note-title + .table-wrapper .leite-table thead tr:first-child th:last-child,
.table-note-title + .table-wrapper .bovinos-table thead tr:first-child th:last-child { border-top-right-radius: 0; }

/* ── Título dourado incorporado na tabela — para quando a tabela precisa
   de um título próprio e visível (não uma nota discreta em itálico, como
   .table-note-title), na cor de destaque do projeto (#E1C233). Colar
   directamente por cima de .table-wrapper (sem espaço entre as duas). ── */
.table-title-gold {
    background: #E1C233;
    color: #1a2548;
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 10px 10px 0 0;
    border: 1px solid #E1C233;
    border-bottom: none;
}
.table-title-gold-sub {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: rgba(26,37,72,.75);
    margin-top: 2px;
}
.table-title-gold + .table-wrapper {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}
.table-title-gold + .table-wrapper .leite-table thead tr:first-child th:first-child,
.table-title-gold + .table-wrapper .bovinos-table thead tr:first-child th:first-child { border-top-left-radius: 0; }
.table-title-gold + .table-wrapper .leite-table thead tr:first-child th:last-child,
.table-title-gold + .table-wrapper .bovinos-table thead tr:first-child th:last-child { border-top-right-radius: 0; }

/* Modelo Simples — cantos arredondados diretamente nas células de canto
   (seguro porque não há rowspan no corpo da tabela). */
.table-wrapper:not(.table-wrapper--grouped) .leite-table thead tr:first-child th:first-child,
.table-wrapper:not(.table-wrapper--grouped) .bovinos-table thead tr:first-child th:first-child { border-top-left-radius: 10px; }
.table-wrapper:not(.table-wrapper--grouped) .leite-table thead tr:first-child th:last-child,
.table-wrapper:not(.table-wrapper--grouped) .bovinos-table thead tr:first-child th:last-child { border-top-right-radius: 10px; }
.table-wrapper:not(.table-wrapper--grouped) .leite-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.table-wrapper:not(.table-wrapper--grouped) .leite-table tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.table-wrapper:not(.table-wrapper--grouped) .leite-table tfoot tr:last-child td:first-child,
.table-wrapper:not(.table-wrapper--grouped) .bovinos-table tfoot tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.table-wrapper:not(.table-wrapper--grouped) .leite-table tfoot tr:last-child td:last-child,
.table-wrapper:not(.table-wrapper--grouped) .bovinos-table tfoot tr:last-child td:last-child { border-bottom-right-radius: 10px; }

/* Modelo Agrupada — moldura exterior recorta, camada interior faz scroll.
   Evita o problema de arredondamento quebrado por células com rowspan
   (ex. tabela invertida, onde a 1ª célula "real" de uma linha varia). */
.table-wrapper.table-wrapper--grouped {
    overflow: hidden;
    background: transparent;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.table-wrapper--grouped .table-scroll {
    overflow-x: auto;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #E1C233 #1a3060;
}
/* A moldura exterior (overflow:hidden + radius) recorta esta camada
   interior quadrada — por isso os cantos ficam sempre arredondados,
   mesmo com rowspan no cabeçalho (Ilha) ou na tabela invertida. */
.table-wrapper--grouped .table-scroll::-webkit-scrollbar { height: 8px; }
.table-wrapper--grouped .table-scroll::-webkit-scrollbar-track { background: #1a3060; border-radius: 4px; }
.table-wrapper--grouped .table-scroll::-webkit-scrollbar-thumb { background: #E1C233; border-radius: 4px; }

/* Coluna(s) de rótulo fixas ao fazer scroll horizontal — só tem efeito
   dentro de um wrapper com scroll (modelo Agrupada); no modelo Simples
   (sem overflow) fica inerte, sem qualquer efeito visual. */
.leite-table th.col-ilha:nth-child(1),
.leite-table td.col-ilha:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
}
.leite-table th.col-ilha:nth-child(2),
.leite-table td.col-ilha:nth-child(2) {
    position: sticky;
    left: 150px;
    z-index: 2;
}
.leite-table td.col-ilha:nth-child(1),
.leite-table td.col-ilha:nth-child(2) { background-color: #ffffff; }
.leite-table th.col-ilha:nth-child(1),
.leite-table th.col-ilha:nth-child(2) { background-color: #6190B5; }
/* Fundo explícito por estado de linha — "inherit" numa coluna sticky é a
   causa mais comum de linhas finas parasitas (seam) ao fazer scroll,
   porque o browser compõe a camada sticky separadamente da linha. */
.leite-table tbody tr:nth-child(even) td.col-ilha { background-color: #d7dbe1; }
.leite-table tbody tr:hover td.col-ilha { background-color: #f0e9c9; }
.leite-table thead th.col-ilha { z-index: 4; background: #6190B5; }
.leite-table td.col-ilha.dim-row-label { background-color: rgba(97,144,181,0.12) !important; }
.leite-table td.col-ilha.dim-total-geral { background-color: rgba(225,194,51,0.06) !important; }
.leite-table tr.row-total td.col-ilha { background-color: #E1C233 !important; }

/* ══ TABELA — regras partilhadas pelos modelos Simples e Agrupada ══ */
.leite-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
    font-family: Lato, sans-serif;
    font-size: calc(14px * var(--data-font-scale, 1));
}
.leite-table.dim-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
/* Variante para tabelas agrupadas com nº de colunas dinâmico (ex. anos
   variáveis) combinado com rowspan no cabeçalho — table-layout:fixed
   infere colunas a mais nesse cenário. Usar .dim-fluid quando as colunas
   não são fixas/estáticas como no modelo de Dimensão. */
.leite-table.dim-table.dim-fluid { table-layout: auto; }

.leite-table thead tr { background: #6190B5; }

.leite-table thead th {
    color: #ffffff;
    font-weight: 700;
    padding: 6px 3px;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    font-size: calc(13px * var(--data-font-scale, 1));
    vertical-align: middle;
    border-right: 1px solid rgba(225,194,51,0.5);
    /* Fundo explícito no <th> (não chega o fundo do <tr>) — necessário para
       qualquer tabela com scroll vertical interno e cabeçalho "sticky"
       (position:sticky; top:0 aplicado por página, ex. #tornadoPaisHost):
       sem isto o cabeçalho fica fixo mas transparente ao colar no topo,
       porque o browser compõe a camada sticky à parte da linha. */
    background-color: #6190B5;
}
.leite-table thead th:last-child { border-right: none; }

/* ── Scroll vertical interno com cabeçalho fixo — para tabelas do modelo
   Simples muito compridas dentro de um cartão (ex. lista de Países em
   "Comércio por País e Produto"). A página só precisa de definir a altura
   máxima (ex. #tornadoPaisHost { max-height:300px; overflow-y:auto; }); as
   regras de fixação do cabeçalho e da barra de scroll ficam centralizadas
   aqui para nunca reintroduzirem o problema do fundo transparente acima. ── */
.table-wrapper--vscroll,
#tornadoPaisHost { overflow-y: auto; }
.table-wrapper--vscroll .leite-table thead th,
#tornadoPaisHost .leite-table thead th { position: sticky; top: 0; z-index: 3; }
.table-wrapper--vscroll .table-wrapper,
#tornadoPaisHost .table-wrapper { box-shadow: none; }
.table-wrapper--vscroll::-webkit-scrollbar,
#tornadoPaisHost::-webkit-scrollbar { width: 6px; }
.table-wrapper--vscroll::-webkit-scrollbar-thumb,
#tornadoPaisHost::-webkit-scrollbar-thumb { background: rgba(35,47,93,.2); border-radius: 4px; }

/* ── Título + nota de painel de tabela (ex. "Países" / "Produtos" em
   "Comércio por País e Produto", tabela de Produtos por baixo) — mesma
   escala tipográfica em toda a página: título 15px/800 em --chart-axis,
   nota 11px itálico na MESMA cor do título (sem esbater a opacidade, para
   não parecer uma cor diferente da usada nos títulos/notas vizinhos). ── */
.tornado-panel-title,
.produto-table-hdr {
    color: var(--chart-axis, #232F5D);
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
}
.tornado-panel-sub {
    display: block;
    color: var(--chart-axis, #232F5D);
    font-family: Lato, sans-serif;
    font-size: 11px;
    font-style: italic;
    margin-top: 1px;
}

.leite-table tbody tr {
    background: #ffffff;
    border-bottom: 1px solid rgba(225,194,51,0.4);
    transition: background 0.15s;
}
.leite-table tbody tr:hover { background: #f0e9c9; }
.leite-table tbody tr:nth-child(even) { background: #d7dbe1; }
.leite-table tbody tr:nth-child(even):hover { background: #f0e9c9; }

.leite-table td {
    padding: 5px 6px;
    border-right: 1px solid rgba(225,194,51,0.5);
    color: #232F5D;
    font-weight: 600;
    font-size: calc(15px * var(--data-font-scale, 1));
}
.leite-table td:last-child { border-right: none; }

.col-ilha { font-weight: 700; text-align: left; white-space: nowrap; }

.col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-left: 3px;
    padding-right: 5px;
}

.col-pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: calc(12px * var(--data-font-scale, 1));
    padding-left: 2px;
    padding-right: 4px;
}
.leite-table td.col-pct,
.bovinos-table td.col-pct {
    color: #6190B5;
}
/* Convenção do projeto para variações (%) — usar em qualquer tabela:
   .col-pct sozinho = azul (positivo/neutro, valor por omissão).
   .col-pct.pct-down = vermelho vivo (variação negativa). */
.leite-table td.col-pct.pct-down,
.bovinos-table td.col-pct.pct-down {
    color: var(--chart-value-negative, #e53935);
}

.row-total { background: #E1C233 !important; }
.row-total td { color: #ffffff !important; font-weight: 700; }
.row-total .col-pct { color: #ffffff !important; }
.row-total .col-pct.pct-down { color: #b71c1c !important; }
.row-total .cell-nd { color: rgba(255,255,255,0.7) !important; }

.cell-nd { color: rgba(35,47,93,0.4) !important; font-style: italic; font-size: calc(12px * var(--data-font-scale, 1)); }
.cell-nd-tag {
    color: rgba(35,47,93,0.4);
    font-style: italic;
    font-size: 10px;
    font-weight: 500;
    margin-left: 4px;
    cursor: help;
}
.row-confidencial { opacity: 0.85; }

.merge-flag {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    color: #E1C233;
    font-size: 9px;
}
.merge-flag svg { width: 13px; height: 13px; fill: #E1C233; cursor: default; flex-shrink: 0; }

.th-note {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
}
.th-note svg { width: 13px; height: 13px; fill: #ffffff; opacity: 0.85; cursor: default; }

/* Tooltip genérico para .th-note, .merge-flag e células com data-tip */
.has-tip { position: relative; }
.has-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a2548;
    color: rgba(255,255,255,0.85);
    font-family: Lato, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 230px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
}
.has-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(255,255,255,0.1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
}
.has-tip:hover::after, .has-tip:hover::before { opacity: 1; }

.tip-right::after { left: 100%; bottom: 50%; transform: translateY(50%) translateX(8px); }
.tip-right::before {
    left: 100%;
    bottom: 50%;
    transform: translateY(50%);
    border: 5px solid transparent;
    border-right-color: rgba(255,255,255,0.1);
    border-top-color: transparent;
}

/* ── Notas abaixo da tabela ── */
.table-notes {
    margin-top: 10px;
    padding: 10px 16px;
    border-left: 1px solid rgba(255,255,255,0.6);
    background: rgba(225,194,51,0.04);
}
.table-notes p { color: #ffffff; font-family: Lato, sans-serif; font-size: 11px; line-height: 1.6; }
.table-notes strong { color: #ffffff; }
.note-mark { color: #E1C233; font-weight: 700; margin-right: 4px; }

/* ── Barra de ferramentas da tabela (ex. botão "Inverter tabela") ── */
.table-toolbar { display: flex; gap: 8px; margin-bottom: 10px; justify-content: flex-end; }
.tbl-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: rgba(255,255,255,0.6);
    font-family: Lato, sans-serif;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.tbl-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.tbl-btn.active { background: rgba(225,194,51,0.15); border-color: rgba(225,194,51,0.5); color: #E1C233; }
.tbl-btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

/* ══ MODELO AGRUPADA — extensões específicas de .dim-table ══ */
.dim-row-label { font-weight: 700; color: #232F5D; vertical-align: middle; background: rgba(97,144,181,0.12); }
.dim-metric-label { font-weight: 500; color: rgba(35,47,93,0.75); white-space: nowrap; }

.dim-table thead tr:first-child th.dim-group-head {
    font-size: calc(12.5px * var(--data-font-scale, 1));
    color: #232F5D;
    border-right: 2px solid rgba(35,47,93,0.3);
    border-bottom: 1px solid rgba(35,47,93,0.2);
}
.dim-table thead tr:first-child th.dim-group-head:nth-of-type(odd) { background: #E1C233; }
.dim-table thead tr:first-child th.dim-group-head:nth-of-type(even) { background: #cda51c; }
.dim-table thead th.dim-total-geral,
.dim-table tfoot td.dim-total-geral,
.dim-table thead tr:first-child th.dim-group-head.dim-total-geral {
    background: #232F5D !important;
    color: #E1C233 !important;
}
.dim-table thead tr:last-child th.dim-total-geral { color: #E1C233; font-weight: 700; }
.dim-table tbody td.dim-total-geral { background: rgba(225,194,51,0.06); font-weight: 600; }
/* Interseção "linha de Total" × "coluna Total Geral" — sem esta regra, essas
   células ficavam navy/dourado (realce de coluna) dentro de uma linha de
   Total que é toda dourado/branco, criando um canto com cores destoantes.
   A linha de Total ganha sempre prioridade visual sobre o realce de coluna. */
.dim-table tfoot tr.row-total td.dim-total-geral {
    background: #E1C233 !important;
    color: #ffffff !important;
}
.dim-group-sub { display: block; font-size: calc(10.5px * var(--data-font-scale, 1)); font-weight: 500; opacity: 0.85; }
.dim-table thead tr:last-child th { font-size: calc(11px * var(--data-font-scale, 1)); }

/* ══ MODELO SIMPLES — variante .bovinos-table (estrutura de colunas própria) ══ */
.bovinos-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
    font-family: Lato, sans-serif;
    font-size: calc(13.5px * var(--data-font-scale, 1));
}
.bovinos-table thead tr { background: #6190B5; }
.bovinos-table thead th {
    padding: 6px 4px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid rgba(225,194,51,0.5);
    white-space: normal;
    line-height: 1.25;
    word-break: break-word;
    font-size: calc(13px * var(--data-font-scale, 1));
}
.bovinos-table thead th:first-child { text-align: left; }
.bovinos-table thead th:last-child { border-right: none; }
.bovinos-table tbody tr {
    background: #ffffff;
    border-bottom: 1px solid rgba(225,194,51,0.4);
    transition: background 0.15s;
}
.bovinos-table tbody tr:hover { background: #f0e9c9; }
.bovinos-table tbody tr:nth-child(even) { background: #d7dbe1; }
.bovinos-table tbody tr:nth-child(even):hover { background: #f0e9c9; }
.bovinos-table td {
    padding: 5px 4px;
    color: #232F5D;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid rgba(225,194,51,0.5);
    font-size: calc(14.5px * var(--data-font-scale, 1));
}
.bovinos-table td:first-child { text-align: left; color: #232F5D; font-weight: 700; }
.bovinos-table td:last-child { border-right: none; }
.bovinos-table td.bt-total { color: #232F5D; font-weight: 700; background: rgba(97,144,181,0.12); }
.bovinos-table th.bt-total { background: #4f7ea3; }
.bovinos-table tfoot tr { border-top: 2px solid rgba(225,194,51,0.7); background: #E1C233; }
.bovinos-table tfoot td {
    padding: 6px 4px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.35);
    font-size: calc(14.5px * var(--data-font-scale, 1));
}
.bovinos-table tfoot td:first-child { text-align: left; }
.bovinos-table tfoot td:last-child { border-right: none; }

/* ── Variante de cabeçalho dourado — para usar sobre fundo azul claro
   (ex. painéis de detalhe em cartoes.css). Mantém o resto do modelo
   .leite-table (linhas, col-num, col-pct, row-total) inalterado. ── */
.table-yellow-head thead th {
    background: #E1C233 !important;
    color: #1a2548 !important;
}

/* ── Célula composta — duas grandezas relacionadas numa só célula (ex. %
   de composição de uma classificação + o valor absoluto em cabeças/kg),
   alinhadas em colunas de largura fixa para que a leitura vertical entre
   linhas fique consistente (em vez de texto corrido de largura variável). ── */
.col-num-split {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
}
.col-num-split-pct {
    min-width: 54px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #232F5D;
}
.col-num-split-val {
    min-width: 66px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: #5a6b8c;
}

/* ── Célula de variação — valor principal (var. % da representação) numa
   linha, com uma segunda linha discreta de apoio (nº de cabeças/kg e a %
   que esse valor representa nesse ano). Usada em tabelas com muita
   informação por célula, para separar visualmente o essencial do detalhe. ── */
.col-num-var {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.col-num-var-main { font-weight: 700; font-variant-numeric: tabular-nums; }
.col-num-var-main.var-up      { color: var(--chart-value-positive, #185FA5); }
.col-num-var-main.var-down    { color: var(--chart-value-negative, #e53935); }
.col-num-var-main.var-neutral { color: var(--chart-value-neutral, #5a6b8c); }
.col-num-var-sub { font-size: 10px; color: #5a6b8c; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   INDICADOR DE TABELA (.pc-stats-row) — fila de cartões por cima de uma
   tabela: uma caixa azul de destaque (produto/artigo em foco) + 1-3
   cartões dourados (Preço médio, Mín., Máx., etc.), sempre colada
   diretamente por cima do .table-wrapper correspondente. Usada em todas
   as páginas de Preços (Leite, Carne...) — ver renderStats() nessas
   páginas, que só gera o HTML; toda a aparência vem daqui.

   Como aplicar numa página (o JS só precisa de gerar este HTML — sem
   travessões/separadores escritos no JS, o CSS trata disso):
     <div class="pc-stats-row">
         <div class="pc-stats-peca">
             <span class="pc-stats-peca-grupo">Bovino</span><span class="pc-stats-peca-produto">Novilho · Cachaço</span>
         </div>
         <div class="pc-stats-card pc-stats-card--media">
             <div class="pc-stats-card-label">Preço médio</div>
             <div class="pc-stats-card-value">0,88<small> €/litro</small></div>
         </div>
         <div class="pc-stats-card">
             <div class="pc-stats-card-label">Mín. médio</div>
             <div class="pc-stats-card-value pc-stats-card-value--min">0,72<small> €/litro</small></div>
         </div>
         <div class="pc-stats-card">
             <div class="pc-stats-card-label">Máx. médio</div>
             <div class="pc-stats-card-value pc-stats-card-value--max">1,17<small> €/kg</small></div>
         </div>
     </div>

   .pc-stats-peca-produto mostra sempre o separador "—" automaticamente
   (::before daqui, NUNCA escrito no HTML/JS da página — nem "&mdash;" nem
   "-" à mão nas strings). Quando não há um grupo distinto a mostrar antes
   do produto, a página simplesmente omite o <span class="pc-stats-peca-grupo">
   — o CSS deteta isso via :first-child e não desenha separador nenhum.

   REGRA DE OURO: o conteúdo do .pc-stats-peca-produto tem SEMPRE de ser
   exatamente o mesmo texto que já aparece no título da tabela (barra
   dourada, .pc-table-title-text — normalmente "{descLabel}{getPecaLabel
   Sufixo(grupo)}") — nunca outra combinação/fórmula à parte. Nalgumas
   páginas o campo "peça" é também onde vive a segmentação de marca
   (Regional/Nacional/Marca Branca, ex. Iogurte/Leite); nesses casos
   getPecaLabelSufixo já devolve " · Segmento" e esse texto tem de se
   ACRESCENTAR ao produto (nunca substituí-lo) — foi exatamente esse erro
   (mostrar só o segmento, perdendo o produto) que motivou esta regra.
   A classe .pc-stats-peca-sub (linha extra discreta) fica disponível para
   outros casos que precisem de uma segunda linha, mas por omissão a
   segmentação já vai embutida no próprio produto, tal como no título.

   Quando não há dados para os filtros escolhidos, usar um único cartão
   vazio: <div class="pc-stats-row"><div class="pc-stats-card pc-stats-card--vazio">Sem dados</div></div>

   IMPORTANTE: estas classes ficam SÓ aqui — nunca as redefinir/duplicar
   no <style> de uma página específica, para não voltar a haver páginas
   com o HTML/JS destes cartões pronto mas sem nenhum CSS a dar-lhes forma. ── */
.pc-stats-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pc-stats-peca {
    flex: 1 1 200px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #6190B5;
    color: #ffffff;
    border-radius: 10px;
    padding: 14px 18px;
    font-family: Lato, sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
/* Grupo (ex. "Bovino"/"Leite") — mesmo estilo do produto, sem nada
   próprio; existe como classe à parte só para o seletor :first-child do
   separador (acima) conseguir distinguir "há grupo antes" de "é o próprio
   produto que abre o cartão". */
.pc-stats-peca-grupo { font: inherit; color: inherit; }
/* O separador entre grupo e produto é sempre gerado aqui (::before) —
   nunca escrito nas strings de HTML/JS da página. Quando não há grupo (o
   produto é o próprio :first-child, ex. nada mais específico selecionado),
   o separador desaparece sozinho — a página não precisa de o condicionar. */
.pc-stats-peca-produto::before {
    content: " — ";
}
.pc-stats-peca-produto:first-child::before {
    content: none;
}
/* Segmentação de marca / tipo de apresentação — linha extra, mais discreta,
   só presente quando o filtro tem um valor diferente de "Todos" (ver
   comentário acima). */
.pc-stats-peca-sub {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    margin-top: 4px;
    letter-spacing: .2px;
}
.pc-stats-card {
    flex: 1 1 160px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #ffffff;
    border: 2px solid #E1C233;
    border-radius: 10px;
    padding: 12px 16px;
}
.pc-stats-card--media { border-width: 3px; }
.pc-stats-card--vazio {
    flex: 1 1 100%;
    color: rgba(35,47,93,.4);
    font-family: Lato, sans-serif;
    font-size: 12.5px;
    font-style: italic;
    border-style: dashed;
}
.pc-stats-card-label {
    color: var(--chart-axis, #232F5D);
    font-family: Lato, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 4px;
}
.pc-stats-card-value {
    color: var(--chart-axis, #232F5D);
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.pc-stats-card-value small { font-size: 12px; font-weight: 600; margin-left: 2px; }
.pc-stats-card-value--min { color: var(--chart-value-positive, #185FA5); }
.pc-stats-card-value--max { color: var(--chart-value-negative, #e53935); }

@media (max-width: 700px) {
    .pc-stats-row { gap: 8px; }
    .pc-stats-peca { font-size: 14px; padding: 10px 12px; }
    .pc-stats-card { padding: 8px 10px; }
    .pc-stats-card-value { font-size: 18px; }
}