/* =====================================================================
   home.css — folha de estilo da pagina inicial (design "Gabinete").

   VALORES: nao estao aqui. A paleta, os raios e as pilhas de tipos vivem
   todos no tokens.css, que e partilhado com o style.css e tem de ser
   carregado ANTES desta folha. Esta so tem regras.

   O index.html carrega o tokens.css e esta folha, e nao carrega o
   style.css. Isto e deliberado: as paginas /joao, /margarida, /status e
   /entrada usam o style.css, e assim a pagina inicial pode ser revertida
   sem tocar nelas.

   COBERTURA OBRIGATORIA: o app.js escreve HTML dentro de #tese, #macro e
   #noticias com nomes de classe fixos. Todos os que a pagina inicial usa
   estao estilizados aqui:
     tese     texto-longo, texto-clamp, expandido, mostrar-mais
     macro    macro-item, macro-linha, macro-nome-grupo, macro-nome,
              macro-regiao, valor, macro-desc
     noticias noticia, noticia-com-rel, rel, noticia-corpo,
              noticia-titulo, noticia-meta, noticia-vazia
     comuns   estado-vazio, oculto, mostrar-controlos, disparar-estado,
              barra-progresso, barra-progresso-fill, noticias-filtro,
              filtro-campo, botao-disparar, botao-link

   Se um dia se acrescentar uma classe nova no app.js para esta pagina,
   tem de vir tambem para aqui, senao aparece sem estilo.

   Paleta: pedra palida com um sussurro de verde, tinta petroleo, latao
   fosco. O latao aparece em quatro sitios apenas -- data, sobrancelha,
   etiquetas de regiao e numeros de relevancia. E o que o faz ler-se como
   detalhe e nao como decoracao. Os valores estao no tokens.css.
   ===================================================================== */

html { color-scheme: light; }
html[data-tema="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

/* O hidden tem de ganhar a qualquer display de classe (mesma nota do
   style.css original: sem isto, uma regra display:flex mantem visivel um
   elemento marcado com hidden). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--pedra);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =====================================================================
   Cabecalho
   ===================================================================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--pedra) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--regua) 70%, transparent);
}
.topo-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.marca {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 20;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.marca em { font-style: italic; color: var(--petroleo); }

.topo-nav { display: flex; align-items: center; gap: 3px; }
.nav-pessoa {
  font-size: 0.795rem;
  font-weight: 500;
  color: var(--tinta-media);
  text-decoration: none;
  padding: 6px 13px;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.nav-pessoa:hover { color: var(--petroleo); background: var(--superficie); }

.toggle-tema {
  flex: none;
  margin-left: 7px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--regua);
  background: var(--superficie);
  border-radius: 999px;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: color .2s ease, border-color .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; }

/* =====================================================================
   Abertura
   A frase grande e preenchida pelo script do index.html, que levanta a
   primeira frase da tese depois de o app.js a desenhar. Se nao houver
   tese, a frase fica vazia e a seccao encolhe sem partir nada.
   ===================================================================== */
.abertura {
  position: relative;
  overflow: hidden;
  padding: 76px 32px 60px;
}
.abertura::before {
  content: "";
  position: absolute;
  inset: -40% 20% auto -10%;
  height: 480px;
  background: radial-gradient(ellipse at 30% 40%,
    color-mix(in srgb, var(--latao) 13%, transparent), transparent 62%);
  pointer-events: none;
}
html[data-tema="dark"] .abertura::before { opacity: .5; }
.abertura-inner { position: relative; max-width: 1060px; margin: 0 auto; }

.datalinha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.665rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--latao);
  margin-bottom: 26px;
}
.datalinha .traco { width: 26px; height: 1px; background: var(--latao); opacity: .55; flex: none; }

.frase {
  font-family: var(--serif);
  font-variation-settings: "opsz" 60;
  font-size: clamp(1.85rem, 4.1vw, 3.05rem);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: -0.021em;
  margin: 0;
  max-width: none;
}
.frase:not(:empty) { margin-bottom: 30px; }

.abertura-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 20px;
  border-top: 1px solid var(--regua);
  font-size: 0.775rem;
  color: var(--tinta-fraca);
  max-width: none;
}
.abertura-meta b { color: var(--tinta-media); font-weight: 600; }

/* =====================================================================
   Banda de indicadores macro
   O #macro e a grelha; cada .macro-item do app.js e uma celula.
   O .mostrar-controlos que o app.js acrescenta no fim ocupa a largura
   toda, senao entrava na grelha como se fosse mais um indicador.
   ===================================================================== */
.banda { padding: 0 32px; }
.banda-inner { max-width: 1060px; margin: 0 auto; }

.banda-cabec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.banda-titulo {
  margin: 0;
  font-size: 0.645rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--latao);
}
.cartao-data { font-family: var(--mono); font-size: 0.665rem; color: var(--tinta-fraca); }

#macro {
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  overflow: hidden;
}
#macro.estado-vazio { display: block; padding: 22px 24px; }

.macro-item {
  padding: 20px 22px;
  border-right: 1px solid var(--regua);
  border-bottom: 1px solid var(--regua);
  transition: background .25s ease;
}
.macro-item:hover { background: var(--superficie-2); }

/* Inverte a linha do app.js (nome a esquerda, valor a direita) para
   valor em cima e nome por baixo, sem tocar no HTML gerado. */
.macro-linha {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 9px;
}
.macro-item .valor {
  font-family: var(--serif);
  font-variation-settings: "opsz" 32;
  font-size: 1.72rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  color: var(--tinta);
}
.macro-nome-grupo {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.macro-nome { font-size: 0.7rem; font-weight: 600; color: var(--tinta-media); }
.macro-regiao {
  font-size: 0.565rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--latao);
}
.macro-desc {
  margin: 8px 0 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--tinta-fraca);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#macro .mostrar-controlos {
  grid-column: 1 / -1;
  border-top: 1px solid var(--regua);
  margin: 0;
  padding: 12px;
}

/* =====================================================================
   O ensaio (a tese)
   O #tese recebe markdown do app.js. O botao de "Mostrar mais" do clamp
   e inserido como IRMAO logo a seguir ao #tese, nao la dentro.
   ===================================================================== */
/* O padding fica no elemento EXTERIOR e o max-width no INTERIOR, como na
   .abertura e na .banda. Ter os dois no mesmo elemento com box-sizing:
   border-box comia o padding ao max-width: a coluna dava 996px uteis aos
   1280px em vez dos 1060px da abertura e da banda. */
.ensaio { padding: 74px 32px 0; }
.ensaio-corpo { max-width: 1060px; margin: 0 auto; }

.sobrancelha {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.645rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--latao);
  margin-bottom: 22px;
}
.sobrancelha .traco { flex: 1; height: 1px; background: var(--regua); }

.texto-longo p {
  font-family: var(--serif);
  font-variation-settings: "opsz" 16;
  font-size: 1.115rem;
  line-height: 1.72;
  margin: 0 0 var(--texto-longo-p);
  color: var(--tinta);
}
.texto-longo p:first-of-type {
  font-size: 1.26rem;
  line-height: 1.6;
  color: var(--tinta-media);
}
.texto-longo h3,
.texto-longo h4 {
  font-family: var(--sans);
  font-size: 0.685rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--tinta-fraca);
  margin: var(--texto-longo-h-cima) 0 var(--texto-longo-h-baixo);
}
.texto-longo h3:first-child,
.texto-longo h4:first-child { margin-top: 0; }
.texto-longo ul,
.texto-longo ol {
  font-family: var(--serif);
  font-variation-settings: "opsz" 16;
  font-size: 1.06rem;
  line-height: 1.68;
  margin: 0 0 var(--texto-longo-p);
  padding-left: 22px;
}
.texto-longo li { margin: 6px 0; }
.texto-longo strong { font-weight: 600; color: var(--tinta); }
.texto-longo em { font-style: italic; }
.texto-longo a { color: var(--petroleo); text-underline-offset: 3px; }

/* --- Tabelas e citacoes do markdown ---------------------------------- */
/* O renderizador do app.js emite
     <div class="md-tabela-scroll"><table class="md-tabela">…</table></div>
   e <blockquote class="md-citacao">. Os nomes sao proprios de proposito:
   nao colidem com a .carteira-tabela nem com a .reco-calc-tabela do
   style.css, que ficam intocadas.

   A tabela vai toda a var(--mono): em tabela o monoespacado alinha as
   colunas e o serif do ensaio nao. As celulas de numeros levam md-dir, e
   e ai que o tabular-nums faz diferenca -- e a mesma razao pela qual a
   .carteira-tabela ja o faz nas suas celulas .num.

   O overflow-x na caixa de fora nao e decoracao: uma tabela de
   carteira-alvo com peso, justificacao e riscos nao cabe num telemovel e,
   sem isto, rebenta a caixa em vez de deslizar. */
.md-tabela-scroll {
  margin: 26px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-radius: var(--raio-peq);
  box-shadow: var(--sombra-1);
}
.md-tabela {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--tinta);
}
.md-tabela th,
.md-tabela td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--regua);
}
.md-tabela th {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--latao);
  white-space: nowrap;
  background: var(--superficie-2);
}
.md-tabela tbody tr:last-child td { border-bottom: none; }
.md-tabela tbody tr:hover { background: var(--superficie-2); }
/* As de numeros. O seletor tem duas classes de proposito, para ganhar ao
   text-align: left das celulas, que tem 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: 26px 0;
  padding: 2px 0 2px 20px;
  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(--tinta-media);
}
/* A .texto-longo a frente nao e por acaso: sem ela, a regra
   .texto-longo p:first-of-type (o paragrafo de entrada, maior e mais
   claro) apanhava tambem o primeiro paragrafo de DENTRO da citacao,
   porque o :first-of-type conta os irmaos dentro do blockquote. */
.texto-longo .md-citacao p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 var(--texto-longo-p);
}
/* Ancorada ao ultimo filho, seja ele qual for, e nao so a um <p>: uma
   citacao que acabe numa lista ficava com a margem de baixo pendurada.
   E o padrao do style.css, mas com a .texto-longo a frente -- copiar de
   la a regra tal e qual (.md-citacao > :last-child, sem prefixo) trocava
   um bug por outro, porque perdia a especificidade contra a regra de
   paragrafo acima e o <p> final voltava a ter margem. */
.texto-longo .md-citacao > :last-child { margin-bottom: 0; }

/* Corte do texto longo. O degrade tem de terminar na cor por tras do
   ensaio, que aqui e a pedra (o ensaio nao esta dentro de um cartao). */
.texto-clamp { max-height: 20em; overflow: hidden; position: relative; }
.texto-clamp::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5em;
  background: linear-gradient(transparent, var(--pedra));
  pointer-events: none;
}
.texto-clamp.expandido { max-height: none; overflow: visible; }
.texto-clamp.expandido::after { display: none; }

/* =====================================================================
   As fontes (noticias analisadas)
   ===================================================================== */
/* Mesma divisao do .ensaio: padding fora, max-width dentro. Aqui o
   elemento interior nao existia e foi preciso acrescentar a
   .fontes-inner no index.html a envolver o cabecalho, o estado, a barra
   e o #noticias. */
.fontes { padding: 76px 32px 90px; }
.fontes-inner { max-width: 1060px; margin: 0 auto; }
.fontes-cabec {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.fontes-titulo {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 30;
  font-size: 1.52rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.fontes-sub { margin: 5px 0 0; font-size: 0.76rem; color: var(--tinta-fraca); }
.cabec-botoes { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Filtro por dia/mes/ano */
.noticias-filtro { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.filtro-campo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 0.665rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tinta-fraca);
}
.noticias-filtro select {
  font: inherit;
  font-size: 0.775rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-radius: var(--raio-peq);
  padding: 6px 9px;
  width: 106px;
}
.noticias-filtro select:focus { outline: 2px solid var(--latao); outline-offset: 1px; }

/* Lista de noticias */
#noticias {
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
#noticias.estado-vazio { padding: 22px 26px; }

.noticia {
  padding: 22px 26px;
  border-bottom: 1px solid var(--regua);
  transition: background .22s ease;
}
.noticia:last-child { border-bottom: none; }
.noticia:hover { background: var(--superficie-2); }

.noticia-com-rel {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.rel {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--latao);
  font-feature-settings: "tnum" 1;
  text-align: right;
  line-height: 1.25;
  padding-top: 1px;
  margin-right: 0;
  min-width: 0;
}
.noticia-corpo { min-width: 0; }
.noticia-titulo {
  font-family: var(--serif);
  font-variation-settings: "opsz" 22;
  font-size: 1.075rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.008em;
  margin-bottom: 7px;
}
.noticia a { color: inherit; text-decoration: none; }
.noticia a:hover { color: var(--petroleo); text-decoration: underline; text-underline-offset: 3px; }
.noticia-meta {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--tinta-media);
  margin-top: 3px;
}
/* A segunda .noticia-meta de cada item e a linha da fonte e da hora. */
.noticia-meta + .noticia-meta {
  font-size: 0.685rem;
  color: var(--tinta-fraca);
  margin-top: 9px;
}
.noticia-vazia { padding: 22px 26px; color: var(--tinta-fraca); font-size: 0.85rem; }

/* =====================================================================
   Controlos comuns
   ===================================================================== */
.botao-disparar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font: inherit;
  font-size: 0.77rem;
  font-weight: 600;
  padding: 8px 17px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--petroleo);
  background: var(--petroleo);
  color: #FBFCFA;
  transition: transform .18s ease, box-shadow .18s ease, background .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: .5; cursor: default; transform: none; box-shadow: none; }
.botao-disparar--pequeno { padding: 7px 15px; font-size: 0.75rem; }
.botao-disparar--secundario {
  background: none;
  color: var(--petroleo);
  border-color: var(--regua);
}
.botao-disparar--secundario:hover { background: var(--superficie); border-color: var(--petroleo); }
html[data-tema="dark"] .botao-disparar--secundario { color: var(--petroleo); }

.botao-link {
  font: inherit;
  font-size: 0.735rem;
  color: var(--tinta-fraca);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.botao-link:hover { color: var(--petroleo); }

/* "Mostrar mais" / "Mostrar menos": serve o clamp da tese (irmao do
   #tese) e os colapsos incrementais da macro e das noticias. */
.mostrar-mais {
  font: inherit;
  font-family: var(--sans);
  font-size: 0.785rem;
  font-weight: 600;
  color: var(--petroleo);
  background: none;
  border: none;
  padding: 8px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap .2s ease;
}
.mostrar-mais:hover { gap: 12px; }
.mostrar-controlos {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}
.mostrar-controlos .mostrar-mais { padding: 0; }
#noticias .mostrar-controlos { padding: 16px; margin-top: 0; border-top: 1px solid var(--regua); }

.oculto { display: none !important; }

.estado-vazio { color: var(--tinta-fraca); font-size: 0.9rem; }

.disparar-estado { margin: 0 0 8px; font-size: 0.82rem; color: var(--tinta-fraca); }
.disparar-estado--ok { color: var(--positivo); }
.disparar-estado--erro { color: var(--negativo); }

.barra-progresso {
  height: 3px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--regua);
  overflow: hidden;
}
.barra-progresso-fill {
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: var(--latao);
  animation: barra-desliza 1.15s ease-in-out infinite;
}
@keyframes barra-desliza {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* --- Acessibilidade -------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--latao);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Entrada orquestrada -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .surge { opacity: 0; transform: translateY(14px); animation: surgir .8s cubic-bezier(.2,.7,.3,1) forwards; }
  .d1 { animation-delay: .05s; }
  .d2 { animation-delay: .14s; }
  .d3 { animation-delay: .23s; }
  .d4 { animation-delay: .32s; }
  @keyframes surgir { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .barra-progresso-fill { animation: none; width: 100%; opacity: .5; }
}

/* --- Responsivo ------------------------------------------------------ */
@media (max-width: 940px) {
  #macro { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .topo-inner { padding: 12px 20px; }
  .abertura { padding: 46px 20px 40px; }
  .banda, .ensaio, .fontes { padding-left: 20px; padding-right: 20px; }
  .ensaio { padding-top: 52px; }
  .fontes { padding-top: 54px; padding-bottom: 60px; }
  #macro { grid-template-columns: 1fr; }
  .macro-item { border-right: none; }
  .noticia { padding: 18px; }
  .noticia-com-rel { grid-template-columns: 42px minmax(0,1fr); gap: 16px; }
  .rel { font-size: 1.05rem; }
  .texto-longo p { font-size: 1.055rem; }
  .texto-longo p:first-of-type { font-size: 1.15rem; }
  .noticias-filtro select { width: 92px; }
}