/* ===================================================================== Assistente de investimento — folha de estilo do dashboard. Serve o joao.html, o margarida.html, o status.html e o entrada.html. A pagina inicial (index.html) usa o home.css; as duas folhas partilham o tokens.css e por isso desenham com a mesma paleta. VALORES: nao estao aqui. A paleta, os raios e as pilhas de tipos vivem todos no tokens.css, que tem de ser carregado ANTES desta folha. Os nomes antigos (--fundo, --borda, --texto, --texto-fraco, --acento, --foco, --sombra) continuam a funcionar: estao la definidos como referencias aos nomes novos, para nao ser preciso reescrever as mais de mil linhas que os usam. Tema CLARO por defeito; ESCURO ao alternar (botao no cabecalho), com a escolha guardada no browser. O tema vive no atributo data-tema do elemento , posto por um script pequeno no de cada pagina (antes do desenho, para nao haver um flash do tema errado). ===================================================================== */ * { box-sizing: border-box; } /* O atributo hidden tem de ganhar a qualquer display de classe. Sem isto, uma regra como .disparar-confirm { display: flex } mantem o elemento visivel apesar do hidden (mesma especificidade, mas a regra do autor vem depois). */ [hidden] { display: none !important; } html { color-scheme: light; } html[data-tema="dark"] { color-scheme: dark; } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mono, .ticker, .valor { font-family: var(--mono); font-feature-settings: "tnum" 1; } /* --- Cabecalho ------------------------------------------------------ */ /* Fixa no topo e translucida, como na pagina inicial: o conteudo passa por baixo e le-se atraves dela. O color-mix da o fundo semi-opaco sem precisar de uma segunda cor na paleta. */ .topo { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid color-mix(in srgb, var(--regua) 70%, transparent); padding: 26px 0; background: color-mix(in srgb, var(--pedra) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); } .topo-inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; /* mesmo recuo do conteudo, para o titulo alinhar com os blocos */ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .topo h1 { margin: 0; font-family: var(--serif); font-variation-settings: "opsz" 20; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.015em; } .subtitulo { margin: 6px 0 0; color: var(--texto-fraco); font-size: 0.93rem; max-width: 60ch; } /* --- Botao de tema -------------------------------------------------- */ .toggle-tema { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--regua); background: var(--superficie); color: var(--tinta-fraca); cursor: pointer; padding: 0; transition: color 0.2s ease, border-color 0.2s ease; } .toggle-tema:hover { color: var(--latao); border-color: var(--latao); } .toggle-tema .icone { width: 14px; height: 14px; display: block; } .toggle-tema .sol { display: none; } .toggle-tema .lua { display: block; } html[data-tema="dark"] .toggle-tema .sol { display: block; } html[data-tema="dark"] .toggle-tema .lua { display: none; } /* --- Conteudo ------------------------------------------------------- */ .conteudo { max-width: 1080px; margin: 0 auto; padding: 28px 20px 44px; } /* --- Destaque (a ultima recomendacao: o foco da pagina) ------------- */ .destaque { position: relative; background: var(--superficie); border: 1px solid var(--regua); border-top: 2px solid var(--petroleo); border-radius: var(--raio); box-shadow: var(--sombra-1); padding: 24px 26px; margin-bottom: 28px; } /* Rotulo de seccao: o tratamento de latao da pagina inicial. Vale para este .rotulo, para o .cartao h2, para o .carteira-movs-titulo e para o .painel-titulo -- os quatro sao a mesma coisa em sitios diferentes. */ .rotulo { text-transform: uppercase; letter-spacing: 0.17em; font-size: 0.645rem; font-weight: 700; color: var(--latao); margin-bottom: 14px; } /* --- Botao: disparar a decisao a pedido ----------------------------- */ /* Linha do topo do destaque: rotulo a esquerda, botao a direita. */ .destaque-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; } .destaque-topo .rotulo { margin-bottom: 0; } .botao-disparar { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 7px 15px; font: inherit; font-size: 0.8rem; font-weight: 600; color: #FBFCFA; background: var(--petroleo); border: 1px solid var(--petroleo); border-radius: 999px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } html[data-tema="dark"] .botao-disparar { color: #0D1413; } .botao-disparar:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); } .botao-disparar:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; } /* No painel de confirmacao, os botoes sao secundarios: o "Confirmar" e mais pequeno que o botao principal "Disparar decisao agora". */ .botao-disparar--pequeno { padding: 4px 12px; font-size: 0.74rem; } /* Painel de confirmacao (aparece ao carregar; o disparo so e feito ao confirmar). */ .disparar-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; padding: 12px 14px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-peq); font-size: 0.88rem; } .disparar-aviso { color: var(--texto); } .disparar-acoes { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; } .botao-link { font: inherit; font-size: 0.78rem; color: var(--texto-fraco); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .botao-link:hover { color: var(--texto); } /* Mensagem de estado depois de disparar (ou de recusa). Margem curta para a mensagem ficar encostada a barra de progresso que aparece logo por baixo. */ .disparar-estado { margin-bottom: 6px; font-size: 0.88rem; color: var(--texto-fraco); } .disparar-estado--ok { color: var(--positivo); } .disparar-estado--erro { color: var(--negativo); } /* Barra de progresso "a trabalhar" — indeterminada (sem percentagem falsa: o dashboard nao sabe o progresso real do workflow no GitHub). Desliza enquanto corre; o fim deteta-se pela chegada do resultado a base de dados. */ .barra-progresso { height: 3px; margin-bottom: 16px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; } .barra-progresso-fill { height: 100%; width: 38%; border-radius: 999px; background: var(--acento); animation: barra-desliza 1.15s ease-in-out infinite; } @keyframes barra-desliza { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } @media (prefers-reduced-motion: reduce) { .barra-progresso-fill { animation: none; width: 100%; opacity: 0.5; } } /* --- Grelha de modulos ---------------------------------------------- */ .grelha { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .cartao { background: var(--superficie); border: 1px solid var(--regua); border-radius: var(--raio); box-shadow: var(--sombra-1); padding: 20px 22px; } .cartao-largo { grid-column: 1 / -1; } .cartao h2 { margin: 0 0 16px; font-size: 0.645rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.17em; color: var(--latao); } /* Cabecalho de cartao com accao a direita (ex.: botao "Analisar noticias"). */ .cartao-cabec { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; } .cartao-cabec h2 { margin-bottom: 0; } /* --- Recomendacao (ativos) ------------------------------------------ */ .ativo { padding: 13px 0; border-bottom: 1px solid var(--borda); } .ativo:last-child { border-bottom: none; } .ativo:first-of-type { padding-top: 4px; } .ativo-cabec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ticker { font-weight: 700; color: var(--acento); font-size: 0.95rem; } .ativo-nome { color: var(--texto-fraco); font-size: 0.9rem; } .ativo-montante { margin-left: auto; font-weight: 600; font-size: 0.98rem; } .ativo-just { margin: 7px 0 0; font-family: var(--serif); font-variation-settings: "opsz" 16; font-size: 1.115rem; line-height: 1.72; } .ativo-risco { margin: 5px 0 0; font-size: 0.85rem; color: var(--texto-fraco); } .meta-linha { margin-top: 12px; font-size: 0.9rem; } .meta-linha b { color: var(--texto); font-weight: 600; } .pilula { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; border: 1px solid var(--borda); } .conf-alta { color: var(--positivo); border-color: var(--positivo); } .conf-media { color: var(--acento); border-color: var(--acento); } .conf-baixa { color: var(--negativo); border-color: var(--negativo); } /* --- Noticias ------------------------------------------------------- */ .noticia { padding: 11px 0; border-bottom: 1px solid var(--borda); font-size: 0.92rem; } .noticia:last-child { border-bottom: none; } .noticia a { color: var(--texto); text-decoration: none; } .noticia a:hover { text-decoration: underline; text-underline-offset: 2px; } .noticia-meta { color: var(--texto-fraco); font-size: 0.8rem; margin-top: 3px; } .rel { font-family: ui-monospace, monospace; color: var(--acento); font-weight: 600; margin-right: 9px; } /* Noticias: relevancia numa coluna a esquerda; titulo, resumo e fonte alinham todos no inicio do titulo. */ .noticia-com-rel { display: flex; gap: 10px; align-items: baseline; } .noticia-com-rel .rel { flex: none; min-width: 2.2em; margin-right: 0; text-align: right; } .noticia-corpo { flex: 1 1 auto; min-width: 0; } .noticia-titulo { font-size: 0.92rem; } /* --- Macro ---------------------------------------------------------- */ .macro-item { padding: 12px 0; border-bottom: 1px solid var(--borda); } .macro-item:last-child { border-bottom: none; } .macro-item:first-child { padding-top: 2px; } .macro-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.92rem; } .macro-nome { font-weight: 600; } .macro-item .valor { color: var(--acento); font-weight: 600; } .macro-desc { margin: 4px 0 0; font-size: 0.82rem; color: var(--texto-fraco); line-height: 1.45; } /* --- Texto longo (visao de mercado, em markdown) -------------------- */ /* Texto corrido para leitura: serif, com os tamanhos e as entrelinhas do ensaio da pagina inicial. As tabelas, os numeros e os tickers ficam em monoespacado -- em tabela o mono alinha e o serif nao. */ .texto-longo { font-size: 0.92rem; } /* O ESPACAMENTO e o mesmo do ensaio da pagina inicial (as tres --texto-longo-* do tokens.css). O TRATAMENTO dos titulos e que nao e: aqui sao titulos de leitura, em caixa normal e com a cor do texto; na pagina inicial sao rotulos em maiusculas com letter-spacing. E de proposito, e so as margens e que se harmonizaram. */ .texto-longo h3 { font-size: 0.95rem; font-weight: 600; color: var(--texto); margin: var(--texto-longo-h-cima) 0 var(--texto-longo-h-baixo); text-transform: none; letter-spacing: 0; } .texto-longo h4 { font-size: 0.85rem; font-weight: 600; color: var(--texto-fraco); margin: var(--texto-longo-h-cima) 0 var(--texto-longo-h-baixo); text-transform: none; letter-spacing: 0; } .texto-longo h3:first-child, .texto-longo h4:first-child { margin-top: 0; } .texto-longo p { margin: 0 0 var(--texto-longo-p); font-family: var(--serif); font-variation-settings: "opsz" 16; font-size: 1.115rem; line-height: 1.72; } .texto-longo ul, .texto-longo ol { font-family: var(--serif); font-variation-settings: "opsz" 16; font-size: 1.06rem; line-height: 1.68; } .texto-longo ul { margin: 0 0 var(--texto-longo-p); padding-left: 18px; } .texto-longo ol { margin: 0 0 var(--texto-longo-p); padding-left: 20px; } .texto-longo li { margin: 6px 0; } .texto-longo strong { font-weight: 600; color: var(--texto); } .texto-longo em { font-style: italic; } /* --- Expandir / comprimir ------------------------------------------- */ .oculto { display: none !important; } .mostrar-mais { display: block; width: fit-content; margin: 14px auto 0; padding: 4px 12px; font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--texto-fraco); background: transparent; border: 1px solid var(--borda); border-radius: 999px; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .mostrar-mais:hover { color: var(--acento); border-color: var(--acento); } /* Dois botoes lado a lado (noticias: "Mostrar mais" + "Mostrar menos"). O margin:auto do .mostrar-mais e para quando esta sozinho e centrado; dentro deste wrapper anula-se, e o flex trata do alinhamento. */ .mostrar-controlos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .mostrar-controlos .mostrar-mais { margin: 0; } .texto-clamp { max-height: 20em; overflow: hidden; position: relative; } .texto-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5em; background: linear-gradient(transparent, var(--superficie)); pointer-events: none; } .texto-clamp.expandido { max-height: none; overflow: visible; } .texto-clamp.expandido::after { display: none; } /* --- Estado vazio --------------------------------------------------- */ .estado-vazio { color: var(--texto-fraco); font-size: 0.9rem; padding: 4px 0; } /* No destaque, o vazio e um convite: um pouco mais de ar. */ .destaque .estado-vazio { padding: 8px 0 4px; } /* --- Rodape --------------------------------------------------------- */ .rodape { max-width: 1080px; margin: 0 auto; padding: 22px 20px; border-top: 1px solid var(--borda); color: var(--texto-fraco); font-size: 0.82rem; } /* --- Acessibilidade ------------------------------------------------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; } /* --- Movimento (subtil, e desligavel) ------------------------------- */ @media (prefers-reduced-motion: no-preference) { .cartao, .destaque { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .cartao:hover { border-color: var(--realce-borda); } .destaque, .cartao { animation: surgir 0.35s ease both; } @keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } } /* --- Carteira: formulario de movimento ----------------------------- */ .mov-form { margin-bottom: 16px; padding: 14px 16px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-peq); } .mov-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px 14px; } .mov-campo { display: flex; flex-direction: column; gap: 5px; font-size: 0.74rem; font-weight: 600; color: var(--texto-fraco); } .mov-final { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; } .mov-nota-rotulo { font-size: 0.74rem; font-weight: 600; color: var(--texto-fraco); } .mov-nota-controlo { display: flex; align-items: center; gap: 14px; } .mov-nota-controlo input { flex: 1 1 auto; min-width: 140px; } .mov-form input, .mov-form select { font: inherit; font-size: 0.9rem; font-weight: 400; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 7px 9px; width: 100%; } .mov-form input:focus, .mov-form select:focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); } .mov-acoes { display: flex; align-items: center; gap: 14px; flex: none; } /* --- Carteira: tabela de posicoes ----------------------------------- */ #carteira-corpo { overflow-x: auto; } .carteira-tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .carteira-tabela th, .carteira-tabela td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; } .carteira-tabela th { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco); } .carteira-tabela tbody tr:last-child td { border-bottom: none; } .carteira-tabela th.num, .carteira-tabela td.num { text-align: right; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-feature-settings: "tnum" 1; } .carteira-sem-pos { padding: 6px 0 2px; } /* --- Carteira: linha de totais (tfoot alinhado com as colunas) ------- */ /* Os totais vivem num da propria tabela, por isso alinham-se sozinhos com as colunas (Custo total / Valor atual / +/-) e aguentam o scroll horizontal do mobile. Em cobertura parcial o valor atual e o +/- cobrem so as posicoes com preco (o custo cobre todas); a legenda por baixo deixa-o claro, para o alinhamento nao sugerir a comparacao falsa custo-total -> valor-parcial. As celulas .num herdam o mono/tnum e o alinhamento a direita da tabela. */ .carteira-tabela tfoot td { border-bottom: none; } .carteira-tabela tfoot .linha-total td { border-top: 2px solid var(--borda); padding-top: 12px; font-weight: 700; color: var(--texto); } .carteira-tabela tfoot .total-rotulo { font-weight: 600; color: var(--texto-fraco); } .carteira-tabela tfoot .total-meta { padding: 6px 8px 0; font-size: 0.74rem; font-weight: 400; color: var(--texto-fraco); white-space: normal; } /* --- Carteira: historico de movimentos (com a nota) ----------------- */ .carteira-movs { margin-top: 18px; } .carteira-movs-titulo { font-size: 0.645rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.17em; color: var(--latao); margin-bottom: 8px; } .mov-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; font-size: 0.92rem; } .mov-tag { flex: none; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--borda); } .mov-tag--compra { color: var(--positivo); border-color: var(--positivo); } .mov-tag--venda { color: var(--negativo); border-color: var(--negativo); } .mov-detalhe { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-feature-settings: "tnum" 1; color: var(--texto-fraco); } .mov-data { margin-left: auto; color: var(--texto-fraco); font-size: 0.82rem; } .mov-nota { margin-top: 4px; font-style: italic; } /* --- Navegacao por pessoa (home): atalhos /joao e /margarida no cabecalho, agrupados a direita, mesmo a esquerda do botao de tema. As pilulas usam o estilo .botao-disparar--secundario (definido no index.html). --- */ .topo-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* --- Cabecalho das paginas por pessoa: link de volta + nome --------- */ .topo-titulo { display: flex; flex-direction: column; gap: 2px; } .voltar-inicio { font-size: 0.8rem; color: var(--texto-fraco); text-decoration: none; width: fit-content; } .voltar-inicio:hover { color: var(--acento); } /* --- Mobile --------------------------------------------------------- */ @media (max-width: 720px) { .grelha { grid-template-columns: 1fr; } .topo-inner { flex-wrap: wrap; } .ativo-montante { margin-left: 0; } .topo { padding: 20px 0; } .topo-inner { padding: 0 16px; } .conteudo { padding: 22px 16px 36px; } .destaque { padding: 20px 18px; } .cartao { padding: 18px; } .disparar-acoes { margin-left: 0; } .mov-nota-controlo { flex-wrap: wrap; } .mov-nota-controlo input { flex: 1 1 100%; } /* Calculadora da recomendacao: 4 colunas (com "Unidades") apertam em ecra estreito -- encolhe padding e fonte para nao transbordar. */ .reco-calc-tabela { font-size: 0.82rem; } .reco-calc-tabela th, .reco-calc-tabela td { padding: 5px 5px; } .reco-calc-tabela th { font-size: 0.64rem; letter-spacing: 0.02em; } } /* ===================================================================== v1.15 — banner de reavaliacao, painel Opus/GPT, etiqueta de tipo. ===================================================================== */ /* Banner de reavaliacao no topo do destaque (veredicto: manter/ajustar). */ .banner-reaval { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: var(--raio-peq); background: var(--superficie-2); font-size: 0.9rem; } .banner-reaval-veredicto { flex: none; font-weight: 700; } .banner-reaval-mud { color: var(--texto); } .banner-reaval--mantem { border-color: var(--positivo); } .banner-reaval--mantem .banner-reaval-veredicto { color: var(--positivo); } .banner-reaval--ajusta { border-color: var(--acento); } .banner-reaval--ajusta .banner-reaval-veredicto { color: var(--acento); } /* Painel Opus/GPT: concordancia + propostas cruas (recolhiveis) dos modelos. */ .painel { margin-top: 18px; padding: 14px 16px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-peq); } .painel-titulo { font-size: 0.645rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.17em; color: var(--latao); margin-bottom: 8px; } .painel-concordancia { margin: 0; font-size: 0.9rem; } .painel-nota { margin: 10px 0 0; font-size: 0.82rem; color: var(--texto-fraco); } .painel-propostas { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .proposta { border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); } .proposta > summary { cursor: pointer; padding: 8px 12px; font-size: 0.82rem; font-weight: 600; color: var(--texto); list-style: none; } .proposta > summary::-webkit-details-marker { display: none; } .proposta > summary::before { content: "\25B8 "; color: var(--texto-fraco); } .proposta[open] > summary::before { content: "\25BE "; } /* ID concreto do modelo, inline a seguir ao rotulo da proposta ("Proposta do Opus Modelo: claude-opus-5"). E o mesmo caso da .carteira-atualizado -- um anotado a seguir a um titulo, so com um espaco no meio, no markup -- e por isso veste-se da mesma maneira: recuo proprio para nao ficar colado ao rotulo, meio ponto mais pequeno, peso 500 contra os 600 do rotulo, e a cor fraca para ler-se como anotacao e nao como uma segunda parte do titulo. Sem o white-space: nowrap da .carteira-atualizado: aquilo vive num

de uma linha, isto vive dentro do , que tem de poder quebrar no telemovel. */ .proposta-modelo { margin-left: 8px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: var(--texto-fraco); } .proposta-corpo { padding: 0 12px 12px; font-family: var(--serif); font-variation-settings: "opsz" 16; font-size: 1.06rem; line-height: 1.68; } /* Etiqueta do tipo de recomendacao (historico + rodape do destaque). */ .etq { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--borda); color: var(--texto-fraco); vertical-align: middle; } .etq--reaval { color: var(--acento); border-color: var(--acento); } .hist-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .hist-tickers { font-size: 0.92rem; } /* ===================================================================== v1.17 - data de atualizacao nos blocos, filtro de noticias por ano/mes/dia, e nome a direita nas paginas por pessoa. ===================================================================== */ /* Data da ultima atualizacao, a direita do titulo do bloco (no cartao-cabec). */ .cartao-data { font-size: 0.7rem; font-weight: 500; color: var(--texto-fraco); letter-spacing: 0.02em; white-space: nowrap; } .cartao-data:empty { display: none; } /* Hora da ultima atualizacao dos precos, inline a seguir ao titulo da carteira. */ .carteira-atualizado { margin-left: 8px; font-size: 0.72rem; font-weight: 500; color: var(--texto-fraco); letter-spacing: 0.02em; white-space: nowrap; } .carteira-atualizado:empty { display: none; } /* Filtro de noticias por ano/mes/dia (mesmo registo dos campos do formulario). */ .noticias-filtro { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 10px; /* mais perto da lista de noticias */ } .filtro-campo { display: flex; flex-direction: column; gap: 5px; font-size: 0.74rem; font-weight: 600; color: var(--texto-fraco); } .noticias-filtro select { font: inherit; font-size: 0.9rem; font-weight: 400; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 7px 9px; width: 128px; /* largura igual nos tres (senao o "Mes" alarga com os nomes) */ min-width: 0; cursor: pointer; } .noticias-filtro select:focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); } .noticias-filtro .botao-link { align-self: flex-end; padding-bottom: 8px; } .noticia-vazia { color: var(--texto-fraco); font-size: 0.9rem; padding: 6px 0; } /* Paginas por pessoa: nome a direita, ao pe do toggle de tema. */ .pagina-pessoa .topo-inner { align-items: center; } /* ===================================================================== v1.20 — nome compacto nas paginas por pessoa, filtro de noticias no cabecalho, etiqueta de regiao na macro, aviso de sintese degradada, data no titulo do painel e mais/menos-valia na carteira. ===================================================================== */ /* (7a) Nome (Joao/Margarida) na barra de topo. E um

, por isso o seletor tem de vencer o `.topo h1` (1.4rem) por especificidade -- dai o `.topo h1.topo-nome` (um .topo-nome simples era ignorado no tamanho). Fica a 2/3 do titulo (1.4rem -> ~0.93rem), azul (--acento), peso 600. So o texto -- sem pilula, contorno nem fundo; nao e um botao nem um link. */ .topo h1.topo-nome { margin: 0; font-size: 0.93rem; /* 2/3 de 1.4rem (.topo h1) */ font-weight: 600; color: var(--acento); } /* (3) Filtro de noticias movido para o cabecalho da seccao: fica entre o titulo e os botoes (space-between herdado do .cartao-cabec) e mais compacto. Quando esta escondido, o cabecalho volta a ser so titulo + botoes. */ .cartao-cabec--noticias .noticias-filtro { margin: 0; align-items: center; gap: 8px 10px; } .cartao-cabec--noticias .filtro-campo { flex-direction: row; /* rotulo ao lado do select: nao cresce em altura */ align-items: center; gap: 6px; font-size: 0.7rem; } .cartao-cabec--noticias .noticias-filtro select { width: 104px; /* ligeiramente mais pequeno que os 128px da vista antiga */ font-size: 0.82rem; padding: 5px 8px; } .cartao-cabec--noticias .noticias-filtro .botao-link { align-self: center; padding-bottom: 0; } /* (2) Etiqueta de regiao por indicador macro (EUA / Europa / Asia / Petroleo), ao lado do nome; o valor mantem-se a direita da linha. */ .macro-nome-grupo { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .macro-regiao { flex: none; display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-fraco); border: 1px solid var(--borda); } /* (6) Aviso de sintese degradada (decisao final pelo GPT, Opus indisponivel). Mesma forma do banner de reavaliacao, mas com a cor de atencao. */ .banner-degradada { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--negativo); border-radius: var(--raio-peq); background: var(--superficie-2); font-size: 0.9rem; } .banner-degradada-rotulo { flex: none; font-weight: 700; color: var(--negativo); } .banner-degradada-texto { color: var(--texto); } /* (6b) Rotulo discreto do autor da sintese (Decisao pelo Opus). Etiqueta pequena e sobria a condizer com a paleta -- NAO um banner, sem icone de aviso; o caso GPT usa o banner-degradada acima. */ .rotulo-autor { display: inline-block; margin-bottom: 16px; padding: 2px 10px; border: 1px solid var(--borda); border-radius: 999px; font-size: 0.72rem; color: var(--texto-fraco); background: var(--superficie-2); } /* (6c) X compacto para eliminar um item do #historico: encostado a direita, sem fundo nem borda, glifo esbatido que passa a vermelho no hover; area de toque confortavel (~30px) para o telemovel. So no #historico (o cartao principal nao tem X). */ #historico .noticia { position: relative; padding-right: 30px; } .hist-eliminar { position: absolute; top: 4px; right: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--texto-fraco); font-size: 1.2rem; line-height: 1; cursor: pointer; } .hist-eliminar:hover { color: var(--negativo); } .hist-eliminar:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 6px; } /* (6c2) Item do #historico: cabecalho clicavel que abre/fecha o detalhe completo. O estado vive no aria-expanded do .hist-cabec (posto pelo handler); o CSS usa-o para o chevron e para mostrar/esconder o .hist-detalhe. Fechado por defeito. */ .hist-cabec { cursor: pointer; } .hist-chevron { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-right: 2px solid var(--texto-fraco); border-bottom: 2px solid var(--texto-fraco); transform: rotate(-45deg); transition: transform 0.15s ease; vertical-align: middle; } .hist-cabec[aria-expanded="true"] .hist-chevron { transform: rotate(45deg); } .hist-detalhe { display: none; margin-top: 8px; } .hist-cabec[aria-expanded="true"] + .hist-detalhe { display: block; } .hist-cabec:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 6px; } /* (6d) Recomendacao em destaque: cabecalho sempre visivel + corpo dobravel. O estado inicial vem da idade da analise (< 1h aberto, >= 1h dobrado) e e gerido no app.js (classe .reco-dobrada no alvo). */ .reco-cabec { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 2px 0 12px; background: none; border: none; cursor: pointer; text-align: left; color: inherit; font: inherit; } .reco-cabec-info { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .reco-cabec-info .rotulo-autor { margin-bottom: 0; } .reco-quando { color: var(--texto-fraco); font-size: 0.9rem; } .reco-veredicto { font-weight: 700; font-size: 0.85rem; } .reco-veredicto--mantem { color: var(--positivo); } .reco-veredicto--ajusta { color: var(--acento); } .reco-chevron { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--texto-fraco); border-bottom: 2px solid var(--texto-fraco); transform: rotate(45deg); transition: transform 0.15s ease; } .reco-dobrada .reco-chevron { transform: rotate(-135deg); } .reco-dobrada .reco-corpo-dobravel { display: none; } /* (7b) Titulo do painel passa a linha flex: "Painel Opus / GPT" a esquerda e o tipo + data a direita (no lado oposto). O .painel-meta nao herda o maiusculas/espacamento do titulo. */ .painel-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; } .painel-meta { text-transform: none; letter-spacing: normal; font-weight: 500; } /* (4) Mais/menos-valia na carteira: verde se positiva, vermelho se negativa. */ .pl-pos { color: var(--positivo); font-weight: 600; } .pl-neg { color: var(--negativo); font-weight: 600; } /* ===================================================================== v1.21 — calculadora de investimento na recomendacao (reparte um montante pelos pesos da carteira-alvo). ===================================================================== */ .reco-calc { margin-top: 18px; padding: 14px 16px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-peq); } .reco-calc-titulo { font-size: 0.78rem; font-weight: 600; color: var(--texto); margin-bottom: 10px; } .reco-calc-campo { display: flex; align-items: center; gap: 8px; max-width: 240px; } .reco-calc-campo input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.95rem; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; } .reco-calc-campo input:focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); } .reco-calc-moeda { font-weight: 600; color: var(--texto-fraco); } .reco-calc-resultado:not(:empty) { margin-top: 12px; } .reco-calc-tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .reco-calc-tabela th, .reco-calc-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--borda); text-align: left; } .reco-calc-tabela th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-fraco); font-weight: 600; } .reco-calc-tabela td.num, .reco-calc-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; } .reco-calc-tabela tbody tr:last-child td { border-bottom: none; } .reco-calc-nota { margin: 8px 0 0; font-size: 0.8rem; color: var(--texto-fraco); } /* ===================================================================== Tabelas e citacoes do markdown (.md-*) O renderizador do app.js emite
…
e
, com md-dir nas celulas alinhadas a direita e md-centro nas centradas. Os nomes sao proprios de proposito: nao colidem com a .carteira-tabela nem com a .reco-calc-tabela, que ficam intocadas. Segue a linguagem dessas duas (regua fina por baixo de cada linha, cabecalho pequeno em maiusculas na cor fraca) e a nota que esta por cima do bloco .texto-longo: as tabelas, os numeros e os tickers em monoespacado, porque em tabela o mono alinha e o serif nao. Usa o var(--mono) do tokens.css e nao a pilha escrita a mao. Vem no fim do ficheiro de proposito: assim as regras de paragrafo da citacao ganham a .texto-longo p, que tem a mesma especificidade. ===================================================================== */ .md-tabela-scroll { margin: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .md-tabela { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.82rem; line-height: 1.5; color: var(--texto); } .md-tabela th, .md-tabela td { text-align: left; vertical-align: top; padding: 9px 8px; border-bottom: 1px solid var(--borda); } .md-tabela th { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco); white-space: nowrap; } .md-tabela tbody tr:last-child td { border-bottom: none; } /* As celulas de numeros. O seletor tem duas classes de proposito, para ganhar ao text-align: left das celulas (uma classe e um tipo). */ .md-tabela .md-dir { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .md-tabela .md-centro { text-align: center; } .md-citacao { margin: 16px 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--realce-borda); font-family: var(--serif); font-variation-settings: "opsz" 16; font-size: 1.06rem; line-height: 1.68; color: var(--texto-fraco); } .md-citacao p { font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 var(--texto-longo-p); } .md-citacao > :last-child { margin-bottom: 0; }