/* IGP App · estilos. Identidade: azul-marinho #05142A, azul elétrico #0099FF localizado, General Sans (títulos), Inter (texto),
   IBM Plex Mono (números), rótulos em maiúsculas pequenos e espaçados. Plataforma: iOS 27 adaptado à web. */

/* ---------- Fontes (locais, sem CDN) ---------- */
@font-face { font-family: "General Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/general-sans-400.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/general-sans-500.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/general-sans-600.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/general-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --f-titulo: "General Sans", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --f-texto: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --abas-altura: 64px;
  --barra-altura: 48px;
  --raio: 20px;
  --raio-m: 14px;
  --raio-p: 10px;
  --facil: cubic-bezier(.22, 1, .36, 1);
  --z-barra: 10;
  --z-abas: 20;
  --z-aviso: 30;

  /* tema claro (padrão quando o sistema é claro) */
  --bg: #F2F6FC;
  --superficie: #FFFFFF;
  --superficie-2: #E8EFF9;
  --superficie-3: #D9E4F3;
  --linha: rgba(5, 20, 42, .10);
  --linha-forte: rgba(5, 20, 42, .20);
  --tinta: #05142A;
  --tinta-2: #1E3357;
  --tinta-3: #556B8F;
  --tinta-4: #7A8DA9;
  --marca: #0099FF;
  --marca-tinta: #0062CC;
  --marca-suave: rgba(0, 153, 255, .12);
  --sobre-marca: #05142A;
  --alta: #0B7A52;
  --queda: #C62828;
  --atencao: #8A5A00;
  --alta-ponto: #1DB97C;
  --atencao-ponto: #E0B23A;
  --neutro-ponto: #9AAAC4;
  --vidro: rgba(242, 246, 252, .84);
  --vidro-borda: rgba(255, 255, 255, .75);
  --sombra: 0 10px 30px rgba(5, 20, 42, .14), 0 1px 2px rgba(5, 20, 42, .06);
  --grafico-grade: rgba(5, 20, 42, .08);
  --grafico-ibov: #4B6388;
  --grafico-cdi: #7A8DA9;
}

@media (prefers-color-scheme: dark) {
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])) {
    --bg: #05142A;
    --superficie: #0C1F3D;
    --superficie-2: #122A4D;
    --superficie-3: #1A3560;
    --linha: rgba(210, 228, 255, .12);
    --linha-forte: rgba(210, 228, 255, .24);
    --tinta: #FFFFFF;
    --tinta-2: #D2E4FF;
    --tinta-3: #8FA7CB;
    --tinta-4: #6B82A6;
    --marca: #0099FF;
    --marca-tinta: #2FA6FF;
    --marca-suave: rgba(0, 153, 255, .16);
    --sobre-marca: #05142A;
    --alta: #3DDC97;
    --queda: #FF7A7A;
    --atencao: #F2C94C;
    --alta-ponto: #3DDC97;
    --atencao-ponto: #F2C94C;
    --neutro-ponto: #6B82A6;
    --vidro: rgba(7, 26, 54, .8);
    --vidro-borda: rgba(210, 228, 255, .14);
    --sombra: 0 14px 40px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
    --grafico-grade: rgba(210, 228, 255, .10);
    --grafico-ibov: #9FB4D6;
    --grafico-cdi: #6B82A6;
  }
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) {
  color-scheme: dark;
  --bg: #05142A;
  --superficie: #0C1F3D;
  --superficie-2: #122A4D;
  --superficie-3: #1A3560;
  --linha: rgba(210, 228, 255, .12);
  --linha-forte: rgba(210, 228, 255, .24);
  --tinta: #FFFFFF;
  --tinta-2: #D2E4FF;
  --tinta-3: #8FA7CB;
  --tinta-4: #6B82A6;
  --marca: #0099FF;
  --marca-tinta: #2FA6FF;
  --marca-suave: rgba(0, 153, 255, .16);
  --sobre-marca: #05142A;
  --alta: #3DDC97;
  --queda: #FF7A7A;
  --atencao: #F2C94C;
  --alta-ponto: #3DDC97;
  --atencao-ponto: #F2C94C;
  --neutro-ponto: #6B82A6;
  --vidro: rgba(7, 26, 54, .8);
  --vidro-borda: rgba(210, 228, 255, .14);
  --sombra: 0 14px 40px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
  --grafico-grade: rgba(210, 228, 255, .10);
  --grafico-ibov: #9FB4D6;
  --grafico-cdi: #6B82A6;
}
:root:has(> head > meta[name="color-scheme"][content="light"]) { color-scheme: light; }

/* ---------- Base ---------- */
*, ::before, ::after { box-sizing: border-box; }
html {
  font-size: 17px;
  font: -apple-system-body; /* WebKit: tamanho de texto dinâmico do iOS; nos outros navegadores fica 17px */
  font-family: var(--f-texto);
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--f-texto);
  line-height: 1.47;
  color: var(--tinta);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titulo); font-weight: 600; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--marca-tinta); }
img { max-width: 100%; height: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--marca-suave); }

.pular { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; translate: -50% -200%; z-index: var(--z-aviso); padding: 10px 16px; border-radius: 999px; background: var(--marca); color: var(--sobre-marca); font-weight: 600; text-decoration: none; }
.pular:focus-visible { translate: -50% 0; }
.sem-js { padding: 24px 16px; text-align: center; }

/* ---------- Vocabulário tipográfico ---------- */
.rotulo { display: block; font: 600 .66rem/1.3 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.rotulo-marca { font: 600 .72rem/1.3 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.titulo-secao { font: 600 1.25rem/1.25 var(--f-titulo); letter-spacing: -.01em; margin: 0 0 10px; }
.prosa { font-size: 1rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; max-width: 65ch; }
.legenda { font-size: .8rem; line-height: 1.45; color: var(--tinta-3); text-wrap: pretty; }
.numero { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.positivo { color: var(--alta); }
.negativo { color: var(--queda); }
.icone-inline { width: 1em; height: 1em; vertical-align: -.15em; stroke: currentColor; }
svg use { pointer-events: none; }
svg:not(.sprite) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Estrutura: telas que rolam uma a uma ---------- */
main { position: fixed; inset: 0; margin-inline: auto; max-width: 720px; }
.view {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--abas-altura) + env(safe-area-inset-bottom, 0px) + 32px);
}
.view[hidden] { display: none; }
.view[data-ativa] { view-transition-name: tela; }
.conteudo > * + * { margin-top: 24px; }
.bloco { padding: 0 16px; }
.conteudo > .bloco:first-child { padding-top: 4px; }

/* Barra compacta (sticky) que aparece quando o título grande sai de cena */
.barra {
  position: sticky; top: 0; z-index: var(--z-barra);
  display: flex; align-items: center; justify-content: center;
  min-height: calc(var(--barra-altura) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
}
.barra::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--linha);
  opacity: 0;
}
.barra-titulo { font: 600 1rem/1 var(--f-titulo); color: var(--tinta); opacity: 0; transform: translateY(8px); }
.barra-acoes { position: absolute; right: 16px; top: env(safe-area-inset-top, 0px); height: var(--barra-altura); display: flex; align-items: center; gap: 8px; }

@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  .barra::before { animation: barra-fundo linear both; animation-timeline: scroll(nearest); animation-range: 28px 64px; }
  .barra-titulo { animation: barra-titulo linear both; animation-timeline: scroll(nearest); animation-range: 40px 76px; }
}
@keyframes barra-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes barra-titulo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Plano B (Safari < 26, Firefox): app.js marca .is-rolado quando o título grande some */
.barra::before, .barra-titulo { transition: opacity .2s ease-out, transform .2s ease-out; }
.view.is-rolado .barra::before, .view.is-rolado .barra-titulo { opacity: 1; transform: none; }

/* Título grande */
.cabecalho { padding: 2px 16px 14px; }
.titulo-grande { font: 700 2rem/1.15 var(--f-titulo); letter-spacing: -.02em; color: var(--tinta); outline: none; }
.titulo-grande:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; }
.cabecalho-marca .titulo-grande { display: flex; align-items: center; min-height: 2.3rem; }
.logo-chip { display: inline-flex; align-items: center; }
.logo-chip img { width: 92px; height: auto; display: block; }
:root:not(:has(> head > meta[name="color-scheme"][content="dark"])) .logo-chip { padding: 7px 11px; border-radius: 11px; background: #05142A; }
@media (prefers-color-scheme: dark) {
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])) .logo-chip { padding: 0; background: transparent; }
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .logo-chip { padding: 0; background: transparent; }
.status { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 .82rem/1.35 var(--f-texto); color: var(--tinta-3); }
.status .numero { font-weight: 400; }

/* Ponto "ao vivo" */
.ponto { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--alta-ponto); }
.ponto::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: .6; animation: pulso 2.2s var(--facil) infinite; }
.ponto-neutro { background: var(--neutro-ponto); }
.ponto-neutro::before { animation: none; opacity: 0; }
.ponto-atencao { background: var(--atencao-ponto); }
.ponto-atencao::before { animation: none; opacity: 0; }
@keyframes pulso { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } }

/* Puxar para atualizar */
.puxar {
  position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: calc(var(--z-barra) + 1);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: env(safe-area-inset-top, 0px);
  color: var(--tinta-3); font: 500 .78rem var(--f-texto);
  transform: translateY(calc(var(--puxa, 0px) - 100%));
  opacity: var(--puxa-opacidade, 0);
  pointer-events: none;
}
.puxar-anel { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--linha-forte); border-top-color: var(--marca); transform: rotate(var(--puxa-rot, 0deg)); }
.view.is-atualizando .puxar { --puxa: 52px; --puxa-opacidade: 1; transition: transform .25s var(--facil); }
.view.is-atualizando .puxar-anel { animation: gira .8s linear infinite; }
.view.is-solto .puxar { transition: transform .25s var(--facil), opacity .2s; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Barra de abas (vidro, flutuante) ---------- */
.abas {
  position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: var(--z-abas);
  margin-inline: auto; max-width: 520px; height: var(--abas-altura);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px;
  border-radius: 999px;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra);
  view-transition-name: abas;
}
.abas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; border-radius: 999px;
  color: var(--tinta-3); text-decoration: none;
  font: 500 .64rem/1 var(--f-texto); letter-spacing: .01em;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.abas a:active { background: var(--superficie-2); }
.abas svg { width: 25px; height: 25px; }
.abas a[aria-current="page"] { color: var(--marca-tinta); background: var(--marca-suave); font-weight: 600; }
.abas a:focus-visible { outline-offset: -2px; }

/* ---------- Grupos e linhas (listas no estilo do sistema) ---------- */
.grupo { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.grupo > * + * { border-top: 1px solid var(--linha); }
.grupo-titulo { padding: 14px 16px 0; }
.linha {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px;
  margin: 0; text-align: left; background: none; border: 0; border-radius: 0; color: inherit; text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.linha:focus-visible { outline-offset: -3px; }
.linha:not(:disabled):active { background: var(--superficie-2); }
.linha:disabled { cursor: not-allowed; }
.linha-icone { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-tinta); }
.linha-icone svg { width: 20px; height: 20px; }
.linha:disabled .linha-icone { background: var(--superficie-2); color: var(--tinta-4); }
.linha-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-titulo { font: 500 1rem/1.3 var(--f-texto); color: var(--tinta); }
.linha-sub { font: 400 .82rem/1.4 var(--f-texto); color: var(--tinta-3); text-wrap: pretty; }
.linha-sub.uma-linha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-sub.duas-linhas { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.linha-icone-atencao { background: color-mix(in srgb, var(--atencao-ponto) 22%, transparent); color: var(--atencao); }
.botao-icone.is-girando svg { animation: gira .8s linear infinite; }
.linha-chevron { flex: none; color: var(--tinta-4); display: grid; place-items: center; }
.linha-chevron svg { width: 20px; height: 20px; }
.selo { flex: none; font: 600 .58rem/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); border: 1px solid var(--linha-forte); border-radius: 999px; padding: 5px 8px; }

/* ---------- Botões ---------- */
.botao-principal {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 0 20px;
  border: 0; border-radius: var(--raio-m); background: var(--marca); color: var(--sobre-marca);
  font: 600 1rem var(--f-texto); cursor: pointer; transition: transform .15s var(--facil), filter .15s;
}
.botao-principal:active { transform: scale(.985); filter: brightness(.94); }
.botao-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta);
  font: 600 .94rem var(--f-texto); cursor: pointer;
}
.botao-secundario:active { background: var(--superficie-2); }
.botao-capsula { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--marca); color: var(--sobre-marca); font: 600 .8rem/1 var(--f-texto); text-align: center; white-space: nowrap; cursor: pointer; }
.botao-capsula::after { content: ""; position: absolute; inset: -6px; }
.botao-capsula:active { filter: brightness(.94); }
.botao-icone { position: relative; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--superficie-2); color: var(--tinta-2); display: grid; place-items: center; cursor: pointer; }
.botao-icone::after { content: ""; position: absolute; inset: -4px; }
.botao-icone svg { width: 20px; height: 20px; }
.botao-icone:active { background: var(--superficie-3); }
.so-instalado, .so-navegador { display: none; }
body.is-instalado .so-instalado { display: flex; }
body:not(.is-instalado) .so-navegador { display: flex; }
.barra-acoes .so-navegador { display: inline-flex; }
body.is-instalado .barra-acoes .so-navegador { display: none; }

/* ---------- Controle segmentado ---------- */
.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0; padding: 3px; border: 0; border-radius: 12px; background: var(--superficie-2); }
.segmento { position: relative; }
.segmento input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmento span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px; font: 600 .86rem var(--f-texto); color: var(--tinta-3); white-space: nowrap; transition: background-color .2s, color .2s; }
.segmento svg { width: 16px; height: 16px; }
.segmento input:checked + span { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(5, 20, 42, .14); }
.segmento input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 1px; }
.segmentos-pequeno { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; }
.segmentos-pequeno .segmento span { min-height: 32px; padding: 0 12px; font-size: .78rem; }

/* ---------- Folha (sheet) ---------- */
.folha {
  position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 720px; max-height: calc(100dvh - 32px);
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 12px); border: 0; border-radius: 26px 26px 0 0;
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); overflow: auto;
}
.folha::backdrop { background: rgba(5, 20, 42, .55); }
.folha[open] { animation: folha-sobe .45s var(--facil) both; }
.folha[open]::backdrop { animation: aparece .3s ease-out both; }
.folha.is-fechando { animation: folha-desce .22s ease-in both; }
.folha.is-fechando::backdrop { animation: some .22s ease-in both; }
.folha-alca { width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--linha-forte); }
.folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 0 20px; }
.folha-titulo { font: 700 1.35rem/1.2 var(--f-titulo); letter-spacing: -.015em; }
.folha-corpo { padding: 12px 20px 0; display: grid; gap: 18px; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.passo { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.passo-numero { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-tinta); font: 600 .9rem var(--f-mono); }
.passo-texto strong { display: block; font: 600 1rem/1.3 var(--f-texto); margin-bottom: 2px; }
.passo-texto p { font-size: .9rem; line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
@keyframes folha-sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes folha-desce { from { transform: none; } to { transform: translateY(100%); } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes some { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Avisos ---------- */
.sem-conexao {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); z-index: var(--z-aviso);
  max-width: calc(100% - 32px); padding: 9px 14px; border-radius: 999px;
  background: var(--tinta); color: var(--bg); font: 500 .8rem/1.3 var(--f-texto); box-shadow: var(--sombra);
  animation: aparece .25s ease-out both;
}
.sem-conexao[hidden] { display: none; }
.aviso { font-size: .78rem; line-height: 1.5; color: var(--tinta-3); text-wrap: pretty; }
.rodape { padding: 8px 16px 0; display: grid; gap: 10px; }
.rodape .aviso { padding-top: 16px; border-top: 1px solid var(--linha); }

/* ---------- Esqueleto de carregamento ---------- */
.esqueleto-bloco { display: grid; gap: 12px; padding: 16px; }
.esqueleto { display: block; height: 14px; border-radius: 7px; width: 100%; background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-3) 50%, var(--superficie-2) 75%); background-size: 200% 100%; animation: brilho 1.4s linear infinite; }
.esqueleto-alto { height: 40px; width: 60%; }
.esqueleto-grafico { height: 160px; border-radius: 12px; }
.esqueleto-bloco .esqueleto:nth-child(1) { width: 38%; }
.esqueleto-bloco .esqueleto:nth-child(3) { width: 86%; }
.esqueleto-bloco .esqueleto:nth-child(4) { width: 70%; }
.esqueleto-bloco .esqueleto-grafico { width: 100%; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Estado vazio / erro */
.vazio { padding: 28px 20px; border-radius: var(--raio); border: 1px dashed var(--linha-forte); display: grid; gap: 8px; justify-items: start; }
.vazio h2 { font-size: 1.1rem; }
.vazio p { color: var(--tinta-2); font-size: .94rem; text-wrap: pretty; }

/* ---------- Início ---------- */
.gestao { padding: 8px 16px 0; }
.gestao-valor { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; font: 400 2.9rem/1 var(--f-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.gestao-valor .moeda, .gestao-valor .escala { font-size: 1.15rem; letter-spacing: 0; color: var(--tinta-3); }
.desempenho { margin: 0 16px; }
.desempenho-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 0; }
.desempenho-topo .legenda { font-size: .74rem; }
.retornos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px 4px; }
.retorno { display: grid; gap: 6px; align-content: start; }
.retorno-valor { font: 400 1.45rem/1.1 var(--f-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.retorno-ref { display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; align-items: baseline; font: 400 .72rem/1.4 var(--f-mono); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.retorno-ref span:nth-child(odd) { font-family: var(--f-texto); font-weight: 500; letter-spacing: .02em; }
.grafico { margin: 6px 0 0; padding: 0 6px; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 16px 14px; font: 500 .74rem/1.3 var(--f-texto); color: var(--tinta-3); }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda .amostra { width: 14px; height: 0; border-top: 2.5px solid var(--marca); border-radius: 2px; }
.grafico-legenda .amostra-ibov { border-color: var(--grafico-ibov); border-top-width: 2px; }
.grafico-legenda .amostra-cdi { border-color: var(--grafico-cdi); border-top-style: dashed; border-top-width: 2px; }
.grafico-legenda .numero { color: var(--tinta-2); }
.grafico-controle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px 0; }
.grafico .linha-carteira { stroke: var(--marca); stroke-width: 2.4; }
.grafico .linha-ibov { stroke: var(--grafico-ibov); stroke-width: 1.6; }
.grafico .linha-cdi { stroke: var(--grafico-cdi); stroke-width: 1.4; stroke-dasharray: 4 4; }
.grafico .grade { stroke: var(--grafico-grade); stroke-width: 1; }
.grafico .grade-zero { stroke: var(--linha-forte); }
.grafico .texto { fill: var(--tinta-4); stroke: none; font: 400 .68rem var(--f-mono); }
.grafico .texto-fim { fill: var(--tinta-2); stroke: none; font: 400 .7rem var(--f-mono); }
.grafico .area { stroke: none; }
.grafico .ponto-fim { fill: var(--marca); stroke: var(--superficie); stroke-width: 2; }
.grafico .ponto-fim-ibov { fill: var(--grafico-ibov); }
.grafico .ponto-fim-cdi { fill: var(--grafico-cdi); }
.grafico .fim-carteira { fill: var(--marca-tinta); }
.grafico .fim-ibov { fill: var(--grafico-ibov); }
.grafico .fim-cdi { fill: var(--grafico-cdi); }
.grafico.is-desenhando .linha-carteira { stroke-dasharray: var(--comp); stroke-dashoffset: var(--comp); animation: traca .9s var(--facil) forwards; }
@keyframes traca { to { stroke-dashoffset: 0; } }
.atalhos { margin: 0 16px; }
.inicio-nota { padding: 0 16px; }

/* ---------- Hoje (cartões por assunto que se expandem no lugar) ---------- */
.cartoes-dica { padding: 0 16px; }
.cartoes { display: grid; gap: 12px; padding: 0 16px; }
.cartao {
  position: relative; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  scroll-margin-top: calc(var(--barra-altura) + env(safe-area-inset-top, 0px) + 8px);
  transition: border-color .25s ease-out;
}
.cartao[data-aberto] { border-color: var(--linha-forte); }
.cartao-cabeca { position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; min-height: 64px; padding: 14px 14px 14px 16px; border-radius: inherit; }
.cartao-cabeca:has(.cartao-botao:active) { background: var(--superficie-2); }
.cartao-texto { display: grid; gap: 4px; min-width: 0; }
.cartao-assunto { color: var(--tinta-3); }
.cartao-destaque .cartao-assunto { color: var(--marca-tinta); }
.cartao-titulo { margin: 0; font: 600 1.06rem/1.3 var(--f-titulo); letter-spacing: -.01em; text-wrap: balance; }
.cartao-botao { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cartao-botao::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cartao-botao:focus-visible { outline: none; }
.cartao-botao:focus-visible::after { outline: 2px solid var(--marca); outline-offset: -3px; border-radius: var(--raio); }
.cartao-botao .regime-ponto { display: inline-block; width: 10px; height: 10px; margin: 0 8px 1px 0; vertical-align: middle; }
.cartao-resumo { font: 400 .88rem/1.45 var(--f-texto); color: var(--tinta-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: pretty; }
.cartao[data-aberto] .cartao-resumo { display: none; }
.cartao-contagem { font: 400 .72rem/1 var(--f-mono); color: var(--tinta-3); padding: 6px 8px; border-radius: 999px; background: var(--superficie-2); white-space: nowrap; }
.cartao-chevron { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--superficie-2); color: var(--tinta-3); transition: transform .35s var(--facil); }
.cartao-chevron svg { width: 18px; height: 18px; transform: rotate(90deg); }
.cartao[data-aberto] .cartao-chevron { transform: rotate(180deg); }
.cartao-corpo { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--facil), visibility 0s linear .4s; }
.cartao[data-aberto] .cartao-corpo { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--facil), visibility 0s; }
.cartao-interno { min-height: 0; overflow: hidden; }
.cartao-conteudo { display: grid; gap: 12px; padding: 0 16px 18px; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease-out, transform .25s var(--facil); }
.cartao[data-aberto] .cartao-conteudo { opacity: 1; transform: none; transition-delay: .08s; }
.cartao-conteudo > p { font-size: 1rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; max-width: 65ch; }
.cartao-conteudo > p.legenda { font-size: .8rem; }
.cartao-destaque { border-color: var(--linha-forte); }
.cartao-destaque .cartao-titulo { font: 700 1.3rem/1.2 var(--f-titulo); letter-spacing: -.02em; }
.cartao-destaque .cartao-abertura { font-size: 1.06rem; }
.cartao-link { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font: 600 .9rem var(--f-texto); color: var(--marca-tinta); text-decoration: none; }
.cartao-link svg { width: 16px; height: 16px; }
.ideias { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ideia { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.ideia p { font-size: 1rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.ticker { display: inline-block; font: 500 .78rem/1 var(--f-mono); letter-spacing: .04em; padding: 7px 8px; border-radius: 8px; background: var(--marca-suave); color: var(--marca-tinta); }
.fechamento { padding-top: 8px; }
.edicao-fechamento { font-size: 1rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.edicao-assinatura { margin-top: 8px; }
/* notícias dentro do cartão do assunto */
.noticias-lista { list-style: none; margin: 0; padding: 0; }
.noticia { padding: 13px 0; border-top: 1px solid var(--linha); content-visibility: auto; contain-intrinsic-size: auto 120px; }
.noticia:first-child { border-top: 0; padding-top: 2px; }
.noticia-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 5px; font: 500 .74rem/1.3 var(--f-texto); color: var(--tinta-3); }
.noticia-fonte { font-weight: 600; color: var(--tinta-2); }
.noticia-quando { font-family: var(--f-mono); font-weight: 400; }
.noticia-relevante { font: 600 .6rem/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--marca-suave); color: var(--marca-tinta); }
.noticia-titulo { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; font: 600 1rem/1.38 var(--f-texto); color: var(--tinta); text-decoration: none; text-wrap: pretty; }
.noticia-titulo svg { width: 18px; height: 18px; margin-top: 3px; color: var(--tinta-4); }
.noticia-titulo:active { opacity: .7; }
.cabeca { display: block; margin-top: 6px; font: 600 .66rem/1.6 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--marca-tinta); }
.noticia-toggle { position: relative; display: inline-flex; align-items: center; gap: 2px; min-height: 30px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--tinta-3); font: 600 .78rem var(--f-texto); cursor: pointer; -webkit-appearance: none; appearance: none; }
.noticia-toggle::after { content: ""; position: absolute; inset: -7px -12px -7px 0; }
.noticia-toggle svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .3s var(--facil); }
.noticia[data-aberto] .noticia-toggle svg { transform: rotate(-90deg); }
.noticia-ementa { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s var(--facil), visibility 0s linear .3s; }
.noticia[data-aberto] .noticia-ementa { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s var(--facil), visibility 0s; }
.noticia-ementa-interno { min-height: 0; overflow: hidden; }
.ementa { padding-top: 4px; font: 400 .9rem/1.5 var(--f-texto); color: var(--tinta-2); text-wrap: pretty; max-width: 65ch; }
.veiculos { margin-top: 6px; font: 500 .74rem/1.3 var(--f-texto); color: var(--tinta-3); }
.noticias-nota { padding-top: 4px; }

/* ---------- Carteira ---------- */
.tabela-retornos { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-retornos th { padding: 12px 10px 6px; text-align: right; font: 600 .66rem/1.3 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.tabela-retornos th:first-child { text-align: left; padding-left: 16px; }
.tabela-retornos th:last-child, .tabela-retornos td:last-child { padding-right: 16px; }
.tabela-retornos td { padding: 11px 10px; text-align: right; font: 400 .96rem/1.2 var(--f-mono); border-top: 1px solid var(--linha); white-space: nowrap; }
.tabela-retornos td:first-child { text-align: left; padding-left: 16px; font: 500 .94rem/1.3 var(--f-texto); color: var(--tinta-2); white-space: normal; }
.tabela-retornos tr.carteira td:first-child { color: var(--tinta); font-weight: 600; }
.defasagem { padding: 14px 16px 12px; display: grid; gap: 6px; }
.defasagem .legenda { max-width: 60ch; }
.posicoes, .movimentos { list-style: none; margin: 0; padding: 0; }
.posicao { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px 12px; align-items: center; padding: 12px 16px 14px; }
.posicao-ticker { font: 500 .9rem/1.2 var(--f-mono); letter-spacing: .02em; color: var(--tinta); }
.posicao-empresa { font: 400 .94rem/1.3 var(--f-texto); color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.posicao-peso { font: 400 1rem/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.posicao-barra { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--superficie-2); overflow: hidden; }
.posicao-barra::before { content: ""; display: block; height: 100%; width: calc(var(--peso, 0) * 100%); border-radius: inherit; background: var(--marca); }
.movimento { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 13px 16px; }
.movimento time { font: 400 .82rem/1.5 var(--f-mono); color: var(--tinta-3); }
.movimento-tipo { font: 500 1rem/1.3 var(--f-texto); }
.movimento-detalhe { margin-top: 2px; }

/* ---------- Mercado ---------- */
.regime { margin: 0 16px; padding: 18px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); }
.regime-topo { display: flex; align-items: center; gap: 10px; }
.regime-ponto { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--atencao-ponto); }
.regime-ponto.calmo { background: var(--alta-ponto); }
.regime-titulo { font: 600 1.35rem/1.2 var(--f-titulo); letter-spacing: -.015em; }
.regime-texto { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.regime-explica { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.indicador { padding: 14px 16px 16px; display: grid; gap: 10px; }
.indicador-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.indicador-nome { font: 600 1rem/1.3 var(--f-texto); }
.indicador-dist { font: 400 .82rem/1.3 var(--f-mono); color: var(--tinta-3); }
.ifr { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.ifr-trilho { position: relative; height: 6px; border-radius: 3px; background: var(--superficie-2); margin: 6px 0; }
.ifr-zona { position: absolute; top: 0; bottom: 0; left: 70%; right: 0; border-radius: 0 3px 3px 0; background: var(--atencao-ponto); opacity: .85; }
.ifr-marca { position: absolute; top: 50%; left: calc(var(--v, 0) * 1%); width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--tinta); border: 3px solid var(--superficie); box-shadow: 0 0 0 1px var(--linha-forte); }
.ifr-valor { display: grid; justify-items: end; gap: 3px; font: 400 1.4rem/1 var(--f-mono); letter-spacing: -.02em; }
.ifr-escala { grid-column: 1; display: flex; justify-content: space-between; font: 400 .66rem/1 var(--f-mono); color: var(--tinta-4); }
.ifr-escala .marca-70 { position: relative; left: 20%; }
.eleicao { margin: 0 16px; padding: 18px 16px; border-radius: var(--raio); border: 1px dashed var(--linha-forte); display: grid; gap: 6px; }
.eleicao .selo { justify-self: start; margin-bottom: 4px; }
.eleicao h2 { font-size: 1.15rem; }
.eleicao p { color: var(--tinta-2); font-size: .94rem; text-wrap: pretty; }

/* ---------- IGP ---------- */
.destaque-numero { margin-top: 16px; display: grid; gap: 2px; }
.destaque-numero .numero { font-size: 1.6rem; line-height: 1.15; }
.destaque-numero[hidden] { display: none; }

/* ---------- Transições entre telas (View Transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(tela) { animation: some .12s ease-out both; }
::view-transition-new(tela) { animation: aparece .2s ease-out both; }
::view-transition-group(abas) { animation-duration: 0s; }

/* ---------- Telas maiores ---------- */
@media (min-width: 720px) {
  .cabecalho, .bloco, .gestao, .edicao, .noticias, .rodape { padding-left: 24px; padding-right: 24px; }
  .desempenho, .atalhos, .regime, .eleicao { margin-left: 24px; margin-right: 24px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ponto::before { animation: none; opacity: 0; }
  .esqueleto { animation: none; }
  .folha[open], .folha[open]::backdrop, .folha.is-fechando, .folha.is-fechando::backdrop { animation: none; }
  .grafico.is-desenhando .linha-carteira { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .view.is-atualizando .puxar-anel { animation: none; }
  .barra::before, .barra-titulo, .abas a, .segmento span, .botao-principal { transition: none; }
  .cartao, .cartao-corpo, .cartao-conteudo, .cartao-chevron, .noticia-ementa, .noticia-toggle svg { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}