/* mocosense · sector.css — o painel de um sector, com abas (prefixo sx-)
 * ═══════════════════════════════════════════════════════════════════════════
 * O painel é um ECRÃ e não uma página corrida (ordem do dono, 13-09-2026): uma
 * cabeça numa faixa, a barra de abas, e uma grelha de 12 colunas × 3 linhas
 * que, num computador (≥ 1024 px de largura e ≥ 640 px de altura), CABE NO
 * ECRÃ: a altura dela é a do ecrã menos o cabeçalho da moldura (76 px), a tira
 * do câmbio (64 px) e a cabeça e as abas do painel. No tablet a grelha tem
 * seis colunas e as linhas têm altura fixa; no telemóvel uma coluna, com a
 * altura natural de cada bloco.
 *
 * O lugar de cada bloco chega do ecra-sector.js como propriedades CSS
 * (--sx-c, --sx-r, --sx-w, --sx-h, --sx-wt) pelo CSSOM — a política do
 * domínio é style-src 'self' e o atributo style escrito à mão não corre.
 *
 * Só tokens de /ds/: a escala de dados (--dados-1..5) nos gráficos, nenhum
 * verde nem vermelho de sinal, e o âmbar só para o que está seleccionado (a
 * barra sob o dedo, o balcão escolhido no leque) e para o foco de teclado. */

/* ── o palco mede o ecrã ─────────────────────────────────────────────────── */
/* A moldura dá a todos os ecrãs um respiro de 40 px em cima e 48 px em baixo;
 * um painel precisa desse espaço para a grelha. Quando o palco tem um painel,
 * a moldura passa a coluna flexível com a altura exacta do ecrã, e o respiro
 * encolhe para 16 px — o resto da moldura (as margens laterais, a largura
 * máxima) fica como está. Tudo o que a moldura puser à frente do palco (a tira
 * da recepção, por exemplo) ocupa a sua altura e a grelha encolhe com ela. */
@media (min-width: 1024px) and (min-height: 640px) {
  .mold-ecra:has(> .mold-palco > .sx-painel) {
    display: flex; flex-direction: column;
    block-size: 100vh; block-size: 100dvh; min-block-size: 0;
    padding-block: calc(76px + 16px) calc(64px + 16px);
  }
  .mold-ecra:has(> .mold-palco > .sx-painel) > .mold-palco {
    flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column;
  }
  .mold-ecra:has(> .mold-palco > .sx-painel) .sx-painel { flex: 1 1 auto; min-block-size: 0; }
  .mold-ecra:has(> .mold-palco > .sx-painel) .sx-grelha {
    flex: 1 1 auto; min-block-size: 0;
    grid-template-rows: repeat(var(--sx-linhas, 3), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }
}
/* Entre 1024 e 1099 px a moldura já é a do telemóvel: barra de 56 px em cima,
 * separadores de 72 px em baixo e a tira do câmbio assente neles. */
@media (min-width: 1024px) and (max-width: 1099px) and (min-height: 640px) {
  .mold-ecra:has(> .mold-palco > .sx-painel) {
    padding-block: calc(56px + 12px) calc(72px + 64px + 12px);
  }
}

/* ── o painel ────────────────────────────────────────────────────────────── */
.sx-painel { display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; }

.sx-etiqueta {
  margin: 0; font-size: var(--texto-11, 11px); text-transform: uppercase;
  letter-spacing: .08em; color: var(--secundario); font-weight: 500;
}

/* a faixa calma: quando o painel não se vende, diz-se ao cimo, sem alarme */
.sx-faixa {
  margin: 0; padding: 8px 14px; border-radius: var(--raio-dados, 6px);
  background: var(--superficie); border-inline-start: 3px solid var(--creme-moco);
  font-size: 12px; line-height: 1.5; color: var(--tinta); flex: none;
}

/* ── 1 · a cabeça, numa faixa ────────────────────────────────────────────── */
/* Duas linhas: o sector e os ritmos (numa linha só); o nome, a ficha e o degrau. */
.sx-cabeca { display: flex; flex-direction: column; gap: 0; flex: none; min-inline-size: 0; }
.sx-cabeca-linha { display: flex; align-items: center; gap: 4px 20px; min-inline-size: 0; }
.sx-cabeca-linha--nome { gap: 4px 16px; }
.sx-cabeca-linha > .sx-etiqueta { flex: none; }
.sx-nome {
  margin: 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: 22px; line-height: 1.1; letter-spacing: -.02em; color: var(--tinta); flex: none;
}
/* Numa linha só enquanto couber (a 1280 px cabem os cinco ritmos das redes
 * sociais); num ecrã mais estreito dobra, em vez de cortar um ritmo a meio. */
.sx-ritmos {
  list-style: none; margin: 0; padding: 0; min-inline-size: 0;
  display: flex; flex-wrap: wrap; gap: 0 12px;
  font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums;
}
.sx-ritmo { white-space: nowrap; }
.sx-ritmo + .sx-ritmo::before { content: '/'; margin-inline-end: 12px; color: var(--linha); }
/* a palavra do ritmo a 700 em tinta; o resto em secundário — a distinção é a
 * palavra, nunca a cor */
.sx-ritmo-palavra { font-weight: 700; color: var(--tinta); letter-spacing: .04em; }
.sx-ritmo-resto { color: var(--secundario); }
.sx-ficha-abre {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--azul-moco);
  text-decoration: underline; text-underline-offset: 3px;
}
.sx-ficha-abre:hover { color: var(--tinta); }

.sx-degrau { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
.sx-degrau-rotulo { font-size: 11px; color: var(--secundario); }
.sx-degrau-nome {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--azul-moco); padding: 6px 12px; border-radius: 999px; box-shadow: var(--relevo-in);
}
.sx-degrau-nota { font-size: 11px; color: var(--secundario); }

/* ── 2 · as abas ─────────────────────────────────────────────────────────── */
.sx-abas-fila {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  border-block-end: 1px solid var(--linha); flex: none; min-inline-size: 0;
}
.sx-abas {
  display: flex; gap: 2px; min-inline-size: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.sx-abas::-webkit-scrollbar { display: none; }
.sx-aba {
  flex: none; min-block-size: 44px; padding: 0 14px; margin-block-end: -1px;
  border: 0; border-block-end: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--fonte-texto); font-size: 13px; font-weight: 600; color: var(--secundario);
  white-space: nowrap;
}
.sx-aba:hover { color: var(--tinta); }
/* a aba activa sublinhada na tinta da marca — o âmbar é do foco */
.sx-aba[aria-selected="true"] { color: var(--tinta); border-block-end-color: var(--azul-moco); }
.sx-aba:focus-visible { outline: var(--foco, 2px solid var(--ambar)); outline-offset: -3px; border-radius: 6px 6px 0 0; }
/* a assinatura no canto — a linha que vai em cada captura de ecrã */
.sx-assinatura {
  margin: 0 0 10px; font-size: 11px; color: var(--secundario); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; font-variant-numeric: tabular-nums;
}

/* ── 3 · a grelha ────────────────────────────────────────────────────────── */
.sx-grelha {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 132px; gap: 12px; min-inline-size: 0;
}
.sx-grelha:focus { outline: none; }

/* o bloco: um cartão com relevo de nível 2, e tudo plano lá dentro */
.sx-bloco {
  grid-column: var(--sx-c, auto) / span var(--sx-w, 3);
  grid-row: var(--sx-r, auto) / span var(--sx-h, 1);
  min-inline-size: 0; min-block-size: 0;
  display: flex; flex-direction: column;
  padding: 12px 14px 10px; border-radius: 12px;
  background: var(--fundo); box-shadow: var(--relevo-2);
  overflow: hidden;
  container-type: size;
}
.sx-bloco-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex: none; margin: 0 0 6px; }
.sx-bloco-titulo {
  margin: 0; min-inline-size: 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; line-height: 1.35;
  color: var(--secundario); font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sx-bloco-meta {
  flex: none; font-size: 11px; color: var(--secundario); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sx-bloco--fechado .sx-bloco-meta {
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linha); color: var(--tinta);
}
.sx-bloco-corpo { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.sx-bloco-pe {
  flex: none; margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--secundario);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.sx-vazio { margin: 0; font-size: 13px; line-height: 1.45; color: var(--secundario); }
.sx-codigo { margin: 0; font-family: var(--fonte-mono); font-size: 11px; color: var(--secundario); overflow-wrap: anywhere; }

/* ── kpi ─────────────────────────────────────────────────────────────────── */
.sx-kpi-linha { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.sx-kpi-valor {
  font-family: var(--fonte-display); font-weight: 700; font-size: 30px; line-height: 1.05;
  letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums;
  text-decoration: none; overflow-wrap: anywhere;
}
.sx-kpi-valor:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sx-kpi-valor--data { font-size: 26px; }
.sx-cauda-num { font-size: .6em; font-weight: 600; letter-spacing: -.02em; }
.sx-kpi-unidade { font-size: 12px; color: var(--secundario); white-space: nowrap; }
.sx-kpi-quem { margin: 0; font-size: 12px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a variação em tinta, sem verde nem vermelho: subir não é bom nem mau */
.sx-kpi-var { margin: 0; font-size: 12px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.sx-kpi-faisca { flex: 1 1 0; min-block-size: 0; inline-size: 100%; display: block; margin-block-start: 2px; }
/* o tamanho do arquivo, no fundo do cartão, logo acima do rodapé */
.sx-kpi-arquivo { margin: auto 0 0; font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-kpi-faisca + .sx-kpi-arquivo { margin-block-start: 2px; }
.sx-faisca-linha { stroke: var(--dados-3); stroke-width: 1.6; }
.sx-faisca-ponto { fill: var(--dados-4); }
.sx-faisca-ultimo { fill: var(--azul-moco); }

@container (min-height: 150px) { .sx-kpi-valor { font-size: 36px; } }
@container (min-width: 360px) and (min-height: 150px) { .sx-kpi-valor { font-size: 40px; } }
@container (max-height: 118px) {
  .sx-kpi-valor { font-size: 26px; }
  .sx-kpi-faisca, .sx-faisca { display: none; }
}

/* ── barras ──────────────────────────────────────────────────────────────── */
.sx-barras {
  flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; scrollbar-width: thin; padding-inline-end: 2px;
}
.sx-barra {
  display: grid; grid-template-columns: min(42%, var(--sx-rot, 42%)) minmax(24px, 1fr) var(--sx-val, 7ch);
  align-items: center; column-gap: 10px; min-block-size: 24px; flex: none;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.sx-barra-nome { color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.sx-barra-trilho { display: block; inline-size: 100%; block-size: 8px; }
.sx-barra-valor {
  text-align: end; white-space: nowrap; font-weight: 600; color: var(--tinta); text-decoration: none;
}
.sx-barra-fundo { fill: var(--linha); }
.sx-barra-cheia { fill: var(--dados-3); }
.sx-barra-zero { stroke: var(--secundario); stroke-width: 1; }
/* os sectores sem nomes (B-44): a amplitude do mínimo ao máximo, e a mediana num ponto */
.sx-sector-amplitude { fill: var(--dados-4); }
.sx-sector-mediana { fill: var(--dados-1); stroke: var(--fundo); stroke-width: 1.5; }
.sx-barra:hover .sx-sector-amplitude, .sx-barra:focus-within .sx-sector-amplitude { fill: var(--ambar); }
/* a barra sob o dedo (ou sob o foco) é a seleccionada: acende a âmbar */
.sx-barra:hover .sx-barra-cheia, .sx-barra:focus-within .sx-barra-cheia { fill: var(--ambar); }
.sx-barra:hover .sx-barra-nome, .sx-barra:focus-within .sx-barra-nome { font-weight: 600; }
.sx-barras-nota { margin: 4px 0 0; font-size: 11px; color: var(--secundario); flex: none; }
/* poucas barras: cada uma com mais ar e o traço mais grosso, até 40 px por linha */
.sx-barras--poucas { justify-content: flex-start; }
.sx-barras--poucas .sx-barra { flex: 1 1 0; max-block-size: 40px; min-block-size: 26px; font-size: 13px; }
.sx-barras--poucas .sx-barra-trilho { block-size: 10px; }
/* até quatro barras num bloco alto: cada uma com o nome e o valor por cima e
 * o traço largo por baixo — dois números num cartão de duas linhas não ficam
 * perdidos no topo */
@container (min-height: 250px) {
  .sx-barras--grandes .sx-barra {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome valor" "trilho trilho";
    row-gap: 6px; align-content: center; max-block-size: 84px; min-block-size: 48px;
  }
  .sx-barras--grandes .sx-barra-nome { grid-area: nome; font-size: 13px; }
  .sx-barras--grandes .sx-barra-valor { grid-area: valor; font-family: var(--fonte-display); font-size: 20px; letter-spacing: -.02em; }
  .sx-barras--grandes .sx-barra-trilho { grid-area: trilho; block-size: 12px; }
}
/* num bloco de uma linha, as poucas barras apertam-se para caberem todas */
@container (max-height: 175px) {
  .sx-barras--poucas .sx-barra { min-block-size: 13px; font-size: 11px; line-height: 1.15; }
  .sx-barras--poucas .sx-barra-trilho { block-size: 5px; }
}
@container (max-width: 340px) {
  .sx-barra { grid-template-columns: min(48%, var(--sx-rot, 48%)) minmax(16px, 1fr) var(--sx-val, 7ch); column-gap: 6px; }
}

/* os nomes velados — o vidro vive em painel.css (.mold-veu) */
.sx-nome-velado { display: inline-flex; align-items: center; min-inline-size: 0; }
.sx-nome-sufixo { color: var(--secundario); white-space: nowrap; }

/* ── tabela ──────────────────────────────────────────────────────────────── */
.sx-tabela-caixa { flex: 1 1 auto; min-block-size: 0; overflow: auto; }
.sx-tabela { inline-size: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sx-tabela th, .sx-tabela td { block-size: 28px; padding: 0 8px; text-align: start; vertical-align: middle; white-space: nowrap; }
.sx-tabela thead th {
  position: sticky; inset-block-start: 0; background: var(--fundo);
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500; border-block-end: 1px solid var(--linha);
}
.sx-tabela tbody th { font-weight: 500; color: var(--tinta); }
.sx-tabela tbody tr + tr > * { border-block-start: 1px solid var(--linha); }
.sx-pos { inline-size: 3em; font-size: 11px; color: var(--secundario); }
.sx-td-valor { text-align: end; font-weight: 600; color: var(--tinta); }
.sx-td-valor a { color: inherit; text-decoration: none; }
.sx-td-data { color: var(--secundario); }
.sx-tabela-legenda { text-align: start; caption-side: top; padding: 0 0 8px; font-size: 12px; color: var(--secundario); }

/* ── curva ───────────────────────────────────────────────────────────────── */
.sx-curva { flex: 1 1 0; min-block-size: 0; inline-size: 100%; display: block; }
.sx-curva-base { stroke: var(--linha); stroke-width: 1; }
.sx-curva-guia { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 2 3; }
.sx-curva-linha { stroke: var(--dados-2); stroke-width: 2; stroke-linejoin: round; }
.sx-curva-ponto { fill: var(--fundo); stroke: var(--dados-1); stroke-width: 2; }
.sx-curva-valor { font-family: var(--fonte-texto); font-size: 12px; font-weight: 600; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.sx-curva a:hover .sx-curva-valor, .sx-curva a:focus .sx-curva-valor { fill: var(--ambar); text-decoration: underline; }
.sx-curva-rotulo, .sx-curva-falta { font-family: var(--fonte-texto); font-size: 11px; fill: var(--secundario); }

/* ── leque ───────────────────────────────────────────────────────────────── */
.sx-leque-caixa { flex: 1 1 0; min-block-size: 0; display: flex; border-radius: 6px; }
.sx-leque-caixa:focus-visible { outline: var(--foco, 2px solid var(--ambar)); outline-offset: 3px; }
.sx-leque { flex: 1 1 auto; min-inline-size: 0; inline-size: 100%; block-size: 100%; display: block; }
.sx-leque-eixo { stroke: var(--secundario); stroke-width: 1; }
.sx-leque-ref { stroke: var(--tinta); stroke-width: 1.2; }
.sx-leque-ref-texto, .sx-leque-extremo { font-family: var(--fonte-texto); font-size: 11px; font-variant-numeric: tabular-nums; }
.sx-leque-ref-texto { fill: var(--tinta); }
.sx-leque-extremo { fill: var(--secundario); }
.sx-leque-marca line { stroke: var(--dados-3); stroke-width: 2.2; stroke-linecap: round; }
/* o balcão escolhido acende a âmbar — é o único âmbar do bloco */
.sx-leque-marca--escolhida line { stroke: var(--ambar); stroke-width: 3.6; }
.sx-leque-alvo { fill: transparent; cursor: pointer; }
.sx-leque-escolhido {
  margin: 4px 0 0; flex: none; font-size: 12px; line-height: 1.4; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.sx-leque-nome { font-weight: 600; }
.sx-leque-valor { color: var(--tinta); font-weight: 600; }
/* a taxa do seu banco (14-09-2026, B-45): um campo na linha, e a resposta por baixo */
.sx-leque-sua { margin: 6px 0 0; flex: none; display: flex; align-items: center; gap: 8px; }
.sx-leque-rotulo { font-size: 12px; color: var(--secundario); white-space: nowrap; }
/* 20ch: o exemplo («por exemplo 912,798») tem 18 caracteres e cortava-se a 14
   (revisão do P3, 14-09-2026); encolhe num ecrã estreito. */
.sx-leque-campo {
  inline-size: 20ch; min-inline-size: 0; flex: 0 1 auto; padding: 3px 8px; font: inherit; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--linha); border-radius: 6px;
}
.sx-leque-campo:focus-visible { outline: var(--foco, 2px solid var(--ambar)); outline-offset: 2px; }
.sx-leque-resposta { margin: 4px 0 0; flex: none; font-size: 12px; line-height: 1.4; color: var(--tinta); font-variant-numeric: tabular-nums; }
.sx-leque-resposta:empty { display: none; }

/* ── linha (tempo) e o <Fechado> ─────────────────────────────────────────── */
.sx-tempo-caixa { flex: 1 1 0; min-block-size: 0; display: flex; flex-direction: column; }
.sx-tempo { flex: 1 1 0; min-block-size: 0; inline-size: 100%; display: block; }
.sx-tempo-base { stroke: var(--linha); stroke-width: 1; }
.sx-tempo-linha { stroke: var(--dados-2); stroke-width: 1.8; stroke-linejoin: round; }
.sx-marca { stroke: var(--dados-4); stroke-width: 1.2; fill: none; }
.sx-marca--ultimo { stroke: var(--azul-moco); stroke-width: 2; }
.sx-eixo {
  display: flex; justify-content: space-between; gap: 8px; flex: none; margin: 4px 0 0;
  font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sx-eixo-escala { overflow: hidden; text-overflow: ellipsis; }

.sx-multiplos {
  flex: 1 1 auto; min-block-size: 0;
  display: grid; grid-template-columns: repeat(var(--sx-n, 3), minmax(0, 1fr)); gap: 12px;
}
.sx-multiplo { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; min-block-size: 0; }
.sx-multiplo + .sx-multiplo { border-inline-start: 1px solid var(--linha); padding-inline-start: 12px; }
.sx-multiplo-nome { margin: 0; font-size: 12px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-multiplo-valor { font-family: var(--fonte-display); font-weight: 700; font-size: 18px; color: var(--tinta); text-decoration: none; font-variant-numeric: tabular-nums; }
.sx-multiplo-medida { margin: 0; font-family: var(--fonte-display); font-weight: 700; font-size: 16px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.sx-multiplo-datas { margin: 0; font-size: 11px; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sx-multiplo .sx-tempo { flex: 1 1 0; }

/* o <Fechado>: a medida do que há, a faísca da contagem, e a porta numa linha.
 * Nunca desfoca, nunca esconde a forma. */
.sx-fechado { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-fechado-medida { margin: 0; font-size: 13px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.sx-fechado-num { font-family: var(--fonte-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; }
.sx-fechado-pontos { color: var(--secundario); }
.sx-fechado-datas { margin: 0; font-size: 12px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.sx-faisca { display: block; inline-size: 100%; block-size: 22px; flex: none; margin-block: 2px; }
.sx-faisca-base { stroke: var(--linha); stroke-width: 1; }
/* a forma de uma lista fechada: as linhas, sem valor e sem comprimento */
.sx-fantasmas {
  flex: 1 1 0; min-block-size: 0; overflow: hidden; margin-block-start: 6px;
  display: flex; flex-direction: column;
}
.sx-fantasma {
  display: grid; grid-template-columns: 9ch minmax(24px, 1fr) 3ch; align-items: center; column-gap: 10px;
  min-block-size: 22px; flex: none; font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums;
}
.sx-fantasma-trilho { display: block; block-size: 6px; border-radius: 3px; background: var(--linha); }
.sx-fantasma-valor { text-align: end; }
.sx-portas-linha { margin: auto 0 0; font-size: 12px; line-height: 1.45; color: var(--secundario); }
.sx-fantasmas + .sx-portas-linha { margin-block-start: 6px; }
.sx-portas-curta { display: none; }
.sx-portas-ligacao { color: var(--azul-moco); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
@container (max-width: 380px) {
  .sx-portas-longa { display: none; }
  .sx-portas-curta { display: inline; }
}
@container (max-height: 150px) {
  .sx-fechado--compacto .sx-fechado-num { font-size: 22px; }
  .sx-fechado--compacto .sx-faisca { display: none; }
}

/* ── ligação ─────────────────────────────────────────────────────────────── */
a.sx-bloco--ligacao {
  gap: 4px; text-decoration: none; color: var(--tinta);
  border-inline-start: 3px solid var(--azul-moco);
}
a.sx-bloco--ligacao:hover { color: var(--tinta); box-shadow: var(--relevo-1); }
a.sx-bloco--ligacao:focus-visible { outline: var(--foco, 2px solid var(--ambar)); outline-offset: 3px; }
.sx-ligacao-etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--secundario); font-weight: 600; }
.sx-ligacao-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--azul-moco); }
.sx-ligacao-texto {
  font-size: 12px; line-height: 1.45; color: var(--secundario);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.sx-ligacao-seta {
  margin-block-start: auto; align-self: flex-start;
  display: inline-flex; align-items: center; min-block-size: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--azul-moco); color: var(--creme-moco); font-size: 12px; font-weight: 600;
}
@container (max-height: 118px) { .sx-ligacao-texto { -webkit-line-clamp: 1; } }

/* ── os preços do comércio ───────────────────────────────────────────────── */
.sx-familia-frase { margin: 0 0 4px; font-size: 12px; line-height: 1.45; color: var(--secundario); flex: none; }
.sx-familia-frase b { color: var(--tinta); font-weight: 700; }
.sx-familias {
  flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; scrollbar-width: thin;
}
/* compacto (oito colunas): produto, do mais barato ao mais caro, e a diferença */
.sx-familia {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(48px, 1fr) var(--sx-pou, 12ch);
  align-items: center; column-gap: 12px; min-block-size: 26px; flex: none;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.sx-familia-min-valor, .sx-familia-max-valor, .sx-familia-dispersao, .sx-familia-lojas, .sx-familia-data { display: none; }
.sx-familia-nome { color: var(--tinta); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.sx-familia-trilho { display: block; inline-size: 100%; block-size: 10px; }
.sx-familia-poupanca { text-align: end; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.sx-familia--cabeca { min-block-size: 22px; border-block-end: 1px solid var(--linha); position: sticky; inset-block-start: 0; background: var(--fundo); }
.sx-familia--cabeca > span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--secundario);
  font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sx-familia--cabeca .sx-familia-poupanca { text-align: end; }
.sx-familia-fundo { stroke: var(--linha); stroke-width: 2; stroke-linecap: round; }
.sx-familia-segmento { stroke: var(--dados-4); stroke-width: 4; stroke-linecap: round; }
.sx-familia-min { fill: var(--dados-1); }
.sx-familia-max { fill: var(--dados-3); }
.sx-familia:hover .sx-familia-segmento, .sx-familia:focus-within .sx-familia-segmento { stroke: var(--ambar); }
/* a lista inteira (doze colunas): o mínimo, o máximo, a dispersão, as lojas e a data */
@container (min-width: 900px) {
  .sx-familia {
    grid-template-columns: minmax(0, 1.7fr) 10ch minmax(80px, 1.3fr) 10ch var(--sx-pou, 12ch) 11ch 7ch 10ch;
  }
  .sx-familia-min-valor, .sx-familia-max-valor, .sx-familia-dispersao, .sx-familia-lojas, .sx-familia-data { display: block; }
  .sx-familia-min-valor, .sx-familia-max-valor, .sx-familia-dispersao, .sx-familia-lojas { text-align: end; white-space: nowrap; }
  .sx-familia-data { color: var(--secundario); white-space: nowrap; }
  .sx-familia { min-block-size: 30px; font-size: 13px; }
}

/* ── ecrãs baixos (1024 × 660): o cartão aperta-se e o número fica inteiro ──
 * Medido a 13-09-2026: a 1024 × 660 a moldura é a do telemóvel e cada linha da
 * grelha tem 93 px; com o título em duas linhas o valor saía pelo fundo do
 * cartão. Abaixo de 112 px de altura o título fica numa linha (o nome inteiro
 * vai no title) e sai o que é contexto — o tamanho do arquivo, a faísca, as
 * datas do fechado; abaixo de 100 px sai também a variação. O rodapé (data,
 * cadência, confiança) fica sempre: é a proveniência. */
@container (max-height: 112px) {
  .sx-bloco-titulo { -webkit-line-clamp: 1; }
  .sx-bloco-cabeca { margin-block-end: 2px; }
  .sx-kpi-arquivo, .sx-kpi-quem, .sx-kpi-faisca, .sx-faisca, .sx-fechado-datas, .sx-multiplo-datas { display: none; }
  .sx-kpi-valor { font-size: 24px; }
  .sx-bloco-pe { margin-block-start: 2px; }
  .sx-fechado-num { font-size: 20px; }
  .sx-multiplo-valor, .sx-multiplo-medida { font-size: 15px; }
  .sx-portas-longa { display: none; }
  .sx-portas-curta { display: inline; }
}
/* num fechado de uma linha num ecrã baixo fica a medida e a porta: a pílula
 * «com conta» já diz onde abre */
@container (max-height: 112px) and (max-width: 300px) {
  .sx-fechado .sx-portas-curta { display: none; }
}
@container (max-height: 100px) {
  .sx-kpi-var { display: none; }
}
/* e a grelha perde um pouco de goteira quando o ecrã é baixo */
@media (min-width: 1024px) and (max-height: 720px) {
  .sx-grelha { gap: 10px; }
  .sx-painel { gap: 8px; }
}

/* ── botões e ligações ───────────────────────────────────────────────────── */
.sx-botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding: 0 20px; border-radius: var(--raio-pilula, 999px); border: 0;
  background: var(--azul-moco); color: var(--creme-moco);
  font-family: var(--fonte-texto); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.sx-botao:hover { color: var(--creme-moco); }
.sx-botao--pequeno { padding: 0 16px; font-size: 12px; }
.sx-botao--secundario { background: transparent; color: var(--secundario); border: 1px solid var(--linha); }
.sx-botao--secundario:hover { color: var(--tinta); }

/* ── a <FichaPainel>, num diálogo ────────────────────────────────────────── */
dialog.sx-ficha {
  inline-size: min(760px, calc(100% - 32px)); max-block-size: calc(100dvh - 48px);
  margin: auto; padding: 0; border: 0; border-radius: 12px;
  background: var(--fundo); color: var(--tinta);
  box-shadow: var(--relevo-2), 0 24px 64px rgba(11, 17, 25, .28);
  font-size: 15px; line-height: 1.55; overflow: auto;
}
dialog.sx-ficha::backdrop { background: rgba(11, 17, 25, .45); }
.sx-ficha-topo {
  position: sticky; inset-block-start: 0; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px 14px; background: var(--fundo); border-block-end: 1px solid var(--linha);
}
.sx-ficha-nome { margin: 4px 0 4px; font-family: var(--fonte-display); font-weight: 700; font-size: 20px; color: var(--tinta); }
.sx-ficha-resumo { margin: 0; font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.sx-ficha-seccao { padding: 14px 24px 0; }
.sx-ficha-seccao:last-child { padding-block-end: 24px; }
.sx-ficha-titulo { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--secundario); font-weight: 600; }
.sx-ficha-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-variant-numeric: tabular-nums; }
.sx-ficha-indicador { display: flex; flex-direction: column; gap: 2px; }
.sx-ficha-ind-nome { font-weight: 600; }
.sx-ficha-ind-meta { font-size: 12px; color: var(--secundario); font-family: var(--fonte-mono); overflow-wrap: anywhere; }
.sx-ficha-formula { font-size: 13px; }
.sx-ficha-formula summary { cursor: pointer; color: var(--azul-moco); min-block-size: 32px; display: flex; align-items: center; }
.sx-ficha-formula-texto { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--tinta); }
.sx-ficha-texto { margin: 8px 0 0; }
.sx-ficha-nota { color: var(--secundario); font-size: 13px; }
.sx-ficha-assinatura { font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.sx-ficha .sx-tabela-caixa { max-block-size: 320px; border: 1px solid var(--linha); border-radius: 6px; }
.sx-tabela--manifesto th, .sx-tabela--manifesto td { white-space: normal; block-size: auto; padding-block: 6px; }
.sx-cauda-barra { display: block; inline-size: 100%; block-size: 12px; }
.sx-cauda-fundo { fill: var(--linha); }
.sx-cauda-aberto { fill: var(--azul-moco); }
.sx-portas { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sx-porta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.sx-porta-abre { color: var(--secundario); }

/* ── a placa calma e a espera ────────────────────────────────────────────── */
.sx-placa {
  margin: 12px 0; padding: 20px; border-radius: var(--raio-dados, 6px);
  background: var(--superficie); display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  max-inline-size: 640px;
}
.sx-placa-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta); }
.sx-esqueleto { display: block; }
.sx-esqueleto--cabeca { block-size: 52px; inline-size: 62%; flex: none; }
.sx-esqueleto--abas { block-size: 36px; inline-size: 38%; flex: none; }
.sx-grelha .sx-esqueleto { box-shadow: var(--relevo-in); padding: 0; }

/* foco: âmbar, sempre visível */
.sx-painel :is(a, button, summary):focus-visible { outline: var(--foco, 2px solid var(--ambar)); outline-offset: 2px; }
.sx-ficha :is(a, button, summary):focus-visible { outline: var(--foco, 2px solid var(--ambar)); outline-offset: 2px; }

/* ── o tablet: seis colunas, linhas de altura fixa ───────────────────────── */
@media (max-width: 1023px) {
  .sx-grelha { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: row dense; }
  .sx-bloco { grid-column: auto / span var(--sx-wt, 6); grid-row: auto / span var(--sx-h, 1); }
}

/* ── o telemóvel: uma coluna, cada bloco com a sua altura ────────────────── */
@media (max-width: 720px) {
  .sx-cabeca { gap: 4px; }
  .sx-cabeca-linha { flex-wrap: wrap; align-items: flex-start; }
  .sx-cabeca-linha--nome { align-items: center; }
  .sx-nome { font-size: 20px; }
  .sx-ritmos { flex-wrap: wrap; gap: 0 12px; }
  .sx-ritmo + .sx-ritmo::before { content: none; }
  .sx-degrau { margin-inline-start: 0; flex-wrap: wrap; }
  .sx-abas-fila { flex-direction: column; align-items: stretch; gap: 0; }
  .sx-abas { scroll-snap-type: x proximity; }
  .sx-aba { scroll-snap-align: start; }
  .sx-assinatura { order: 2; margin: 6px 0; white-space: normal; }
  .sx-grelha { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; grid-auto-flow: row; }
  .sx-bloco {
    grid-column: 1 / -1; grid-row: auto;
    container-type: inline-size; min-block-size: 120px;
  }
  .sx-bloco-corpo { overflow: visible; }
  .sx-kpi-faisca { flex: none; block-size: 40px; }
  .sx-barras { flex: none; max-block-size: 336px; }
  .sx-curva { flex: none; block-size: 220px; }
  .sx-leque-caixa { flex: none; block-size: 220px; }
  .sx-tempo-caixa, .sx-tempo { flex: none; }
  .sx-tempo { block-size: 140px; }
  .sx-multiplos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-multiplo:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .sx-multiplo .sx-tempo { block-size: 80px; }
  .sx-familias { flex: none; max-block-size: 360px; }
  .sx-tabela-caixa { flex: none; max-block-size: 360px; }
  .sx-fechado { flex: none; }
  dialog.sx-ficha { inline-size: 100%; max-block-size: 100dvh; border-radius: 0; }
  .sx-ficha-topo, .sx-ficha-seccao { padding-inline: 16px; }
  .sx-esqueleto--cabeca, .sx-esqueleto--abas { inline-size: 100%; }
}

/* quem prefere quietude, fica quieto (a trama do esqueleto já pára em /ds/) */
@media (prefers-reduced-motion: reduce) {
  .sx-painel a, .sx-painel button { transition: none; }
}

/* ── onde: a loja de cada extremo (13-09-2026, B-31) ─────────────────────────
 * Com conta, o nome; sem conta, a posição sob o véu. A linha ganha altura para
 * as duas linhas do nome caberem sem se sobreporem. */
.sx-familia-quem { display: flex; flex-direction: column; justify-content: center; min-inline-size: 0; }
.sx-familia-onde {
  font-size: 11px; line-height: 1.3; color: var(--secundario);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sx-familia-onde b { color: var(--tinta); font-weight: 600; }
.sx-familia--com-onde { min-block-size: 36px; }
.sx-familia-onde-nome { vertical-align: baseline; }
.sx-familias + .sx-portas-linha { margin-block-start: 6px; flex: none; }

/* ── a nota de um bloco, e a frase de um business insight (13-09-2026) ──────
 * A nota diz porque é que o bloco é o que é (os Bilhetes do Tesouro). A frase
 * é o número escrito em português, com a data e a posição na história — o
 * tamanho vem da tipografia da casa, e a frase abre a prova. */
.sx-bloco-nota {
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--secundario);
}
.sx-afirmacao { margin: 0; font-size: 14px; line-height: 1.3; }
.sx-afirmacao-frase { color: var(--tinta); text-decoration: none; }
.sx-afirmacao-frase:hover, .sx-afirmacao-frase:focus-visible { text-decoration: underline; }
.sx-afirmacao-extremos { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: var(--secundario); }
.sx-bloco--afirmacao .sx-ficha-formula { margin-block-start: 2px; font-size: 12px; }
/* O cartão de uma linha não corta o que traz (revisão do P3, 14-09-2026): com
 * os grupos do giro da bolsa e os três meses do Analista, a fórmula e a última
 * linha ficavam escondidas por baixo — visto no Chrome de ensaio. Rola dentro
 * do cartão, como as barras. */
.sx-bloco--afirmacao .sx-bloco-corpo { overflow-y: auto; gap: 2px; }