/* Bolsa — folha de estilo do v2 (redesenho de 2026-08-28).
 *
 * Duas ideias mandam aqui, e nenhuma é decorativa.
 *
 * 1. **A cor é toda para ESTADO; nenhuma para navegação.** Base preta, vermelho e verde, escolha
 *    dele a 28/08. Como vermelho é a cor do perigo nesta app (quedas, degraus tocados, o
 *    desmentido), gastá-lo também em "carrega aqui" fazia um número vermelho deixar de querer
 *    dizer alguma coisa — que é precisamente o trabalho da app. Por isso o que se toca
 *    distingue-se por SUBLINHADO e chevron, nunca por cor.
 *
 * 2. **Três classes de texto onde o v1 tinha uma.** No v1, a explicação didática, o aviso de
 *    qualidade do dado e o desmentido do número ao lado eram todos `.nota` — não dava para saber,
 *    de relance, se um parágrafo em itálico era para aprender ou para não acreditar no número
 *    acima. Aqui: `.porque` dobra (didática), `.aviso` fica sempre à vista (qualidade do dado),
 *    `.desmentido` fica sempre à vista e pesa (contradiz o número que está mesmo ao lado).
 *
 * Sem web fonts e sem CDN: a CSP em `_headers` permite `font-src 'self'` e a Action não publica
 * ficheiros de fonte. `system-ui` é o que há, e chega.
 */

/* ---------- paleta: três estados de tema, de propósito ----------
   Sem atributo segue o sistema; `claro`/`escuro` são a escolha dele, pelo botão em Definições.
   `data-theme` é o que o visualizador de Artifacts carimba — a mesma folha serve o ficheiro
   local e a fotografia publicada, sem duplicar paleta. Contraste medido, não estimado: todos os
   pares de texto passam 4,5:1 nos dois temas. */
:root{
  --bg:#f6f6f7; --card:#ffffff; --line:#dededf; --ink:#0d0d0f; --mut:#5a5a63;
  --acc:#c8102e; --ok:#0a7a4c; --amb:#8a5b00; --red:#c8102e;
  --okbg:#e4f3ec; --ambbg:#f8efdb; --redbg:#fbe9eb; --neubg:#eeeef0;
  --sombra:0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]):not([data-theme="light"]){
    --bg:#08080a; --card:#131316; --line:#2b2b31; --ink:#f2f2f4; --mut:#9b9ba4;
    --acc:#ff4d4d; --ok:#3ad17f; --amb:#f0b429; --red:#ff4d4d;
    --okbg:#0d2a1c; --ambbg:#2c2208; --redbg:#2e1113; --neubg:#1c1c21;
    --sombra:none;
  }
}
:root[data-tema="escuro"], :root[data-theme="dark"]:not([data-tema="claro"]){
  --bg:#08080a; --card:#131316; --line:#2b2b31; --ink:#f2f2f4; --mut:#9b9ba4;
  --acc:#ff4d4d; --ok:#3ad17f; --amb:#f0b429; --red:#ff4d4d;
  --okbg:#0d2a1c; --ambbg:#2c2208; --redbg:#2e1113; --neubg:#1c1c21;
  --sombra:none;
}

/* Aliases e cores de SÉRIE.
   `--txt` é o nome que o código transportado do v1 usa para a tinta; segue `--ink` sozinho, e
   assim o motor de gráficos veio sem lhe tocar numa linha.
   `--blue` é a cor da 1.ª série em comparação — e é a única cor fora do sistema estado/identidade
   que sobrevive, de propósito: duas séries sobrepostas num gráfico precisam de matizes
   distinguíveis, e isso é IDENTIDADE DE SÉRIE, não estado. Usar vermelho aqui faria uma linha de
   comparação parecer um alarme. */
:root{--txt:var(--ink); --blue:#0b57d0}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]):not([data-theme="light"]){--blue:#6aa9ff}
}
:root[data-tema="escuro"], :root[data-theme="dark"]:not([data-tema="claro"]){--blue:#6aa9ff}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); line-height:1.5; font-size:16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  /* espaço para a barra fixa: sem isto o último cartão fica debaixo dela e não se lê */
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
}
.wrap{max-width:600px;margin:0 auto;padding:12px 16px 0}

/* ---------- cabeçalho: sem um único botão ----------
   O v1 tinha cinco (atualizar · copiar para o Claude · atualizar preços · chave · tema) e comiam
   o primeiro ecrã inteiro antes de aparecer um número. Duas dessas ações já acontecem sozinhas
   (refrescarSeVelho, 70 min, mais visibilitychange/pageshow) e as outras foram para Definições.
   O "copiar para o Claude" saiu de vez: o texto que ele gerava constrói-se do dados.js publicado,
   que uma sessão cloud vai buscar sozinha — só os limiares e a posição editados NESTE aparelho é
   que não são visíveis de fora, e para isso serve o "exportar estado", em Definições. */
header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
h1{font-size:20px;margin:0;font-weight:700;letter-spacing:-.02em;flex:0 0 auto}
.stamp{font-size:12px;color:var(--mut);margin-left:auto;text-align:right;line-height:1.35;min-width:0}
.eng{background:none;border:0;padding:6px;margin:-6px -6px -6px 0;font-size:18px;color:var(--mut);
  cursor:pointer;line-height:1;min-width:44px;min-height:44px}

/* ---------- secções do Hoje (27/09) ----------
   Um nível acima do cartão: o que a secção responde. Maior e em minúsculas, para não se confundir
   com o título do cartão (pequeno, em maiúsculas), que diz de onde vem o número. */
.seccao{font-size:21px;font-weight:700;letter-spacing:-.015em;margin:28px 2px 10px;text-wrap:balance}
.seccao:first-child{margin-top:2px}
.seccao .sm{font-size:14px;font-weight:500;margin-left:4px}

/* ---------- cartões ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;
  margin-bottom:12px;box-shadow:var(--sombra)}
/* ⚠️ O `overflow-x:auto` NÃO vive no cartão. No v1 vivia, e por isso "sem scroll horizontal ao
   nível do documento" era verdade num cartão que cortava os euros por dentro (26/08). Quem rola
   é o invólucro da tabela; assim um cartão que corte é detetável — e o teste de disposição
   compara scrollWidth com clientWidth CARTÃO A CARTÃO. */
.rolar{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px}
.card.acento{border-left-width:4px}
.card.ok{border-left-color:var(--ok)} .card.amb{border-left-color:var(--amb)}
.card.red{border-left-color:var(--red)} .card.neu{border-left-color:var(--mut)}

.ttl{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;margin-bottom:10px}
.enorme{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.big{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.mid{font-size:21px;font-weight:700}
.sub{font-size:14px;color:var(--mut);margin-top:6px}
.sm{font-size:14px;color:var(--mut)}
.nd{color:var(--mut);font-style:italic}
.leve{font-weight:600;color:var(--mut);font-size:17px}
.up{color:var(--ok)} .dn{color:var(--red)} .neutro{color:var(--mut)} .ambar{color:var(--amb)}

/* ---------- linhas e tabelas ---------- */
/* `flex-wrap` é a rede de segurança da linha: quando o rótulo e o valor não cabem lado a lado a
   390 px, o valor desce para a sua própria linha em vez de empurrar o documento para fora do ecrã.
   Sem isto a auditoria das fontes ("confere 0,00000%") transbordava 8 px — e 8 px chegam para
   pôr a página inteira a andar de lado no telemóvel. */
.row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:16px}
.row>:first-child{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.row:last-child{border-bottom:0}
.row .v{font-weight:700;text-align:right;white-space:nowrap;min-width:0;flex:0 0 auto;margin-left:auto}
/* `.livre` para quando o VALOR é texto e não um número. O `nowrap` existe para não partir
   "2,67pp −0,20" a meio; aplicado a uma frase (as condições da regra do semáforo, por exemplo)
   empurrava o documento inteiro para 673 px de largura num ecrã de 390. Medido, não suposto. */
.row .v.livre{white-space:normal;overflow-wrap:anywhere;flex:1 1 100%;text-align:left}
/* 27/09: à esquerda. Uma frase alinhada à direita em várias linhas lê-se aos saltos — a direita é
   para números, que se comparam pela casa das unidades; texto lê-se a partir da margem. */
/* A anotação que acompanha um número ("−0,20 em 20 obs", "+0,39% 5d") desce para a sua própria
   linha em vez de alargar a linha inteira. Era a última causa de transbordo a 390 px: o valor
   e a anotação juntos, com `nowrap`, davam 424 px de documento num ecrã de 390. */
.row .v .sm{display:block;font-weight:600;margin-top:2px}
/* A segunda linha do lado do NOME (percentil, data, «segundo o crédito»): simétrica da do valor.
   Linha a linha, fica uma grelha 2×2 — nome e valor em cima, contexto dos dois em baixo. */
.row .linha{display:block;margin-top:2px;font-weight:400}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.n{text-align:right;white-space:nowrap}
/* Linha de referência dentro de uma tabela — a fasquia, a base rate, o total. É a linha
   contra a qual as outras se lêem, e por isso tem fundo em vez de cor de texto: a cor de texto
   está toda reservada para estado (subir/descer/perigo). */
tr.destaque td{background:var(--neubg);font-weight:600}
/* A tabela de mercados tem 7 colunas e a 16 px não cabe em 390: rola dentro do seu invólucro
   (como sempre), mas o NOME fica preso à esquerda — senão, ao ler o 1A, já não se sabe de que
   linha é o número. Fundo explícito, senão os números passam por baixo e leem-se os dois. */
.rolar th:first-child,.rolar td:first-child{position:sticky;left:0;background:var(--card);z-index:1}
/* E larga o suficiente para o nome não se partir em três linhas («Banco Comercial Português»):
   as colunas dos números rolam, o nome não precisa. */
.rolar td:first-child{min-width:9.5rem}
.legenda{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--mut);margin-top:8px}

/* ---------- pastilhas e etiquetas ----------
   Neutras por omissão (contorno, não cor): uma pastilha de percentil não é um estado, é um
   número. Cor só quando há mesmo estado a comunicar. */
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;
  border:1px solid var(--line);color:var(--mut);white-space:nowrap;vertical-align:middle}
.pill.ok{background:var(--okbg);color:var(--ok);border-color:transparent}
.pill.amb{background:var(--ambbg);color:var(--amb);border-color:transparent}
.pill.red{background:var(--redbg);color:var(--red);border-color:transparent}
.pill.forte{background:var(--neubg);color:var(--ink);border-color:transparent}

/* ---------- o semáforo, desenhado e não emoji ----------
   Os emoji do v1 (🟢🟡🔴) têm no Android um aspeto que não é o do resto da app e não se deixam
   colorir pela paleta. Isto é um círculo em SVG que usa a cor de estado — a mesma que o resto do
   cartão. O estado nunca depende só da cor: vem sempre com a palavra ao lado. */
.farol{display:inline-block;width:.86em;height:.86em;border-radius:50%;vertical-align:baseline;
  margin-right:.28em;background:currentColor}

/* ---------- os três textos ---------- */
/* 1. didática — dobra, e o que ele abrir fica aberto neste aparelho */
.porque{margin-top:10px}
.porque>summary{font-size:15px;color:var(--mut);font-weight:600;cursor:pointer;list-style:none;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  padding:6px 0;min-height:40px;display:flex;align-items:center}
.porque>summary::-webkit-details-marker{display:none}
.porque>summary::after{content:" ›";margin-left:4px}
.porque[open]>summary::after{content:" ⌄"}
.porque p{font-size:15px;color:var(--mut);margin:2px 0 0;line-height:1.55}
.porque p+p{margin-top:9px}
/* 2. qualidade do dado — nunca dobra */
.aviso{display:flex;gap:8px;font-size:15px;line-height:1.5;background:var(--ambbg);
  color:var(--amb);border-left:3px solid var(--amb);border-radius:0 8px 8px 0;
  padding:10px 12px;margin-top:12px}
/* 3. desmentido do número ao lado — nunca dobra, e pesa */
.desmentido{display:flex;gap:8px;font-size:15px;line-height:1.5;background:var(--redbg);
  color:var(--red);border-left:3px solid var(--red);border-radius:0 8px 8px 0;
  padding:10px 12px;margin-top:12px;font-weight:600}

/* ---------- abrir um bloco grande ----------
   O v1 desenhava as tabelas gigantes sempre por inteiro: 2856 px só a de indicadores, ×2
   símbolos, num ecrã de 17999 px. Aqui nascem fechadas com uma linha de resumo — nenhuma linha
   desaparece, deixam é de aparecer todas ao mesmo tempo. */
.abrir{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;flex-wrap:wrap;
  background:none;border:0;border-top:1px solid var(--line);margin-top:10px;padding:11px 0 2px;
  font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;
  min-height:44px}
.abrir .q{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.abrir .s{color:var(--mut);font-weight:600;font-size:14px;text-align:right;min-width:0;overflow-wrap:anywhere}
.aberto{margin-top:10px}

/* ---------- botões e campos ---------- */
button{font:inherit}
.btn{font-size:15px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);cursor:pointer;min-height:44px}
.btn.pri{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn.mini{font-size:14px;padding:7px 11px;min-height:38px}
.bar{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 0}
input,select{font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink);max-width:100%}
input{width:92px}
input.larga{width:100%}
input[type="date"]{width:auto}
.chip{font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:99px;
  background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap;min-height:36px}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip:disabled{opacity:.42;cursor:default}
a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- degraus da escada ---------- */
/* 2×2 no telemóvel, 4 lado a lado quando há largura. Quatro colunas a 390 px só cabiam com letra
   de 10,5 px — e «falta 16,07%» é a leitura que importa neste cartão, não um rótulo. */
.rungs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
@media(min-width:520px){.rungs{grid-template-columns:repeat(4,1fr)}}
.rg{min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;
  font-size:14px;color:var(--mut)}
.rg b{display:block;font-size:18px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.rg.hit{background:var(--ambbg);border-color:var(--amb);color:var(--amb)}
.rg.hit b{color:var(--amb)}

/* ---------- alertas e banners ---------- */
#alertas{margin:0 0 10px}
.al{display:flex;gap:8px;align-items:baseline;background:var(--redbg);color:var(--red);
  border:1px solid var(--red);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:15px}
.al .qd{margin-left:auto;font-size:14px;opacity:.85;white-space:nowrap}
.al.calmo{background:var(--okbg);color:var(--ok);border-color:transparent}
.aviso-obsoleto{background:var(--red);color:#fff;padding:10px 12px;border-radius:10px;
  font-size:15px;line-height:1.5;margin:0 0 12px;font-weight:600}
.aviso-obsoleto a,.aviso-obsoleto button{color:#fff}

/* ---------- gráficos ---------- */
svg.spark{display:block;width:100%;height:44px;overflow:visible;margin-top:9px}
svg.chart{display:block;width:100%;height:150px;overflow:visible}
.abrivel{cursor:pointer;border-radius:9px}
#gwrap{position:relative;margin-top:6px;touch-action:none}
#gwrap svg{display:block;width:100%;height:auto;overflow:visible}
.leitura{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;min-height:24px;font-size:15px}
.leitura .qd{color:var(--mut);font-size:14px}
.legenda{font-size:14px;color:var(--mut);margin-top:8px}

/* ---------- notícias ---------- */
.new{display:block;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;
  text-decoration:none;color:var(--ink)}
.new:last-child{border-bottom:0}
.new .meta{font-size:14px;color:var(--mut);margin-top:4px}

/* ---------- barra de destinos, fixa em baixo ----------
   Em baixo e não em cima: é onde o polegar chega num telemóvel. Quatro destinos e mais nada —
   Definições vive na engrenagem do cabeçalho, porque não é um sítio onde se vai todos os dias.
   Mantém o id `tabs` e o `button.on` do v1: o arranque faz scrollIntoView do ativo e há testes
   que os procuram por esse nome. */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
  background:var(--card);border-top:1px solid var(--line);
  padding:4px 0 env(safe-area-inset-bottom)}
#tabs button{flex:1;min-width:0;background:none;border:0;cursor:pointer;padding:6px 2px 7px;
  font-size:12px;font-weight:700;color:var(--mut);min-height:56px}
#tabs button i{display:block;font-style:normal;font-size:20px;line-height:1.3}
#tabs button.on{color:var(--acc)}

/* ---------- classes herdadas do v1 ----------
   Usadas pelo motor de gráficos e pela camada de rede, que vieram transportados sem alteração.
   `.nota` aqui é curta e local ao painel de estatísticas do gráfico; a prosa didática longa dos
   ecrãs vive em `.porque`, que dobra. */
.nota{font-size:14px;color:var(--mut);margin-top:8px;line-height:1.5}
.grid{display:grid;gap:10px;grid-template-columns:1fr}
.qd{color:var(--mut);font-size:14px}
@media(min-width:520px){.grid.g3{grid-template-columns:repeat(3,1fr)}}

footer{text-align:center;margin:20px 0 14px;font-size:14px;color:var(--mut);line-height:1.5}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.hide{display:none!important}

/* Ecrã largo: duas colunas, nada de exclusivo. O telemóvel é o caso normal (ele abre-a no
   Chrome de Android), o desktop é o caso excecional — ao contrário do que a maioria assume. */
@media(min-width:760px){
  .wrap{max-width:900px;padding-bottom:0}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .g2>.card{margin-bottom:0}
}