/* IGP App · Raio-X da sua carteira (recursos/raiox.js). Só os tokens do app.css: claro e escuro vêm deles. Sem
   backdrop-filter e sem View Transitions (deram bug no iOS); a folha usa a animação das outras folhas do app. */

/* ---------- Cartão de entrada no Início ---------- */
.raiox-entrada { margin-inline: 16px; }
.raiox-entrada-botao {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; margin: 0; padding: 16px 14px 16px 16px;
  text-align: left; color: inherit; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--superficie); border: 1px solid color-mix(in srgb, var(--marca) 34%, var(--linha)); border-radius: var(--raio);
}
.raiox-entrada-botao:active { background: var(--superficie-2); }
.raiox-entrada-botao:focus-visible { outline-offset: -3px; border-radius: var(--raio); }
.raiox-entrada-icone { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-tinta); }
.raiox-entrada-icone svg { width: 26px; height: 26px; }
.raiox-entrada-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.raiox-entrada-rotulo { color: var(--marca-tinta); }
.raiox-entrada-titulo { font: 600 1.12rem/1.25 var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); }
.raiox-entrada-sub { font: 400 .86rem/1.45 var(--f-texto); color: var(--tinta-3); text-wrap: pretty; }

/* ---------- Folha cheia ---------- */
.folha-raiox { height: calc(100dvh - 32px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }
.raiox-topo { position: sticky; top: 0; z-index: 2; padding-bottom: 10px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.raiox-topo .folha-topo { padding-left: 16px; }
.raiox-topo .folha-titulo { flex: 1; min-width: 0; }
.raiox-voltar svg { transform: rotate(180deg); }
.raiox-voltar[hidden] { display: none; }
.raiox { padding-top: 16px; }
.raiox-secao { display: grid; gap: 8px; }
.raiox-secao > .rotulo { padding-inline: 2px; }
.raiox-arquivo { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.raiox .linha-botao .linha-icone svg { width: 21px; height: 21px; }
.raiox .formulario { gap: 14px; }
.raiox-colar { min-height: 180px; font: 400 .94rem/1.5 var(--f-mono); }

/* a promessa de privacidade: faixa azul suave, como o motivo em destaque do Início */
.raiox-privado { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: var(--raio-m); background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--marca) 32%, transparent); }
.raiox-privado-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--marca); color: var(--sobre-marca); }
.raiox-privado-icone svg { width: 20px; height: 20px; }
.raiox-privado-texto { display: grid; gap: 3px; min-width: 0; }
.raiox-privado-texto strong { font: 700 1.02rem/1.3 var(--f-titulo); letter-spacing: -.005em; color: var(--tinta); }
.raiox-privado-texto p { font: 400 .9rem/1.5 var(--f-texto); color: var(--tinta); text-wrap: pretty; }

/* apagar: ação destrutiva, no vermelho de queda (como o iOS) */
.raiox-apagar .linha-icone { background: color-mix(in srgb, var(--queda) 12%, transparent); color: var(--queda); }
.raiox-apagar .linha-titulo { color: var(--queda); }

/* lendo o PDF */
.raiox-lendo { display: grid; justify-items: center; gap: 10px; padding: 56px 0 40px; text-align: center; }
.raiox-anel { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--linha-forte); border-top-color: var(--marca); animation: gira .8s linear infinite; }
.raiox-lendo-titulo { font: 600 1.06rem/1.3 var(--f-titulo); color: var(--tinta); }

/* ---------- Conferir ---------- */
.raiox-resumo { font-size: .96rem; }
.raiox-cabecas, .raiox-linha-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 36px; gap: 6px; align-items: center; }
.raiox-cabecas { padding: 0 2px; }
.raiox-cabecas .rotulo { font-size: .6rem; }
.raiox-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.raiox-linha { display: grid; gap: 5px; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.raiox .entrada.raiox-ticker, .raiox .entrada.raiox-num { min-height: 46px; padding: 10px 9px; font: 400 1rem/1.2 var(--f-mono); font-variant-numeric: tabular-nums; } /* 1rem: o iOS não dá zoom no campo */
.raiox .entrada.raiox-ticker { letter-spacing: .02em; text-transform: uppercase; }
.raiox .raiox-linha .raiox-num { text-align: right; }
.raiox .entrada::placeholder { color: var(--tinta-4); }
.raiox-nota { padding: 0 2px; font: 400 .78rem/1.4 var(--f-texto); color: var(--tinta-3); text-wrap: pretty; }
.raiox-nota.is-atencao { color: var(--atencao); }
.raiox-outras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.raiox-outras .campo > label { font-size: .86rem; }
.raiox-total-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.raiox-total { font-size: 1.3rem; color: var(--tinta); }
.raiox-precos { display: grid; gap: 10px; }
.raiox-precos:empty { display: none; }
.raiox-precos-texto { font: 400 .9rem/1.5 var(--f-texto); color: var(--tinta-2); text-wrap: pretty; }
.raiox-precos-privado { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: var(--raio-m); background: var(--superficie-2); font: 500 .84rem/1.45 var(--f-texto); color: var(--tinta-2); text-wrap: pretty; }
.raiox-precos-privado svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--marca-tinta); }

/* ---------- Diagnóstico ---------- */
.raiox-total-bloco { display: grid; gap: 4px; }
.raiox-total-valor { margin: 2px 0; font: 400 2.4rem/1.05 var(--f-mono); letter-spacing: -.03em; color: var(--tinta); }
.raiox-fora { color: var(--atencao); }
.raiox-grupo { padding-bottom: 16px; }
.raiox-grupo > * + * { border-top: 0; }
.raiox-grupo-titulo { font: 600 1.08rem/1.3 var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); }
.raiox-grupo-cabeca .legenda { margin-top: 2px; }
.raiox-leituras { list-style: none; margin: 0; padding: 12px 16px 0; display: grid; gap: 10px; }
.raiox-leituras li { position: relative; padding-left: 18px; font: 400 .98rem/1.5 var(--f-texto); color: var(--tinta); text-wrap: pretty; }
.raiox-leituras li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--marca); }
.raiox-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px 16px 2px; }
.raiox-numeros > div { display: grid; align-content: start; gap: 4px; }
/* rótulo que quebra em duas linhas não desalinha os números das três colunas */
@supports (grid-template-rows: subgrid) {
  .raiox-numeros { grid-template-rows: auto auto auto; row-gap: 4px; }
  .raiox-numeros > div { grid-row: span 3; grid-template-rows: subgrid; align-content: stretch; }
  .raiox-numeros dt { align-self: end; }
}
.raiox-numeros dd { margin: 0; }
.raiox-numeros dd.numero { font: 400 1.35rem/1.1 var(--f-mono); letter-spacing: -.02em; color: var(--tinta); }
.raiox-numeros dd.legenda { font-size: .76rem; }
/* barras: finas, pontas arredondadas, ancoradas à esquerda; o número fica sempre escrito ao lado (nunca só a cor) */
.raiox-barras { list-style: none; margin: 0; padding: 14px 16px 0; display: grid; gap: 12px; }
.raiox-barra-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.raiox-barra-nome { min-width: 0; font: 500 .9rem/1.3 var(--f-texto); color: var(--tinta); text-wrap: pretty; }
.raiox-barra-nome.numero { font: 400 .92rem/1.3 var(--f-mono); letter-spacing: .01em; }
.raiox-barra-valor { font: 400 .9rem/1.3 var(--f-mono); color: var(--tinta); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.raiox-ibov { color: var(--tinta-3); }
.is-zero .raiox-barra-nome, .is-zero .raiox-barra-valor { color: var(--tinta-3); }
.raiox-barra { grid-column: 1 / -1; position: relative; display: block; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.raiox-barra::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v, 0) * 100%); border-radius: 4px; background: var(--marca); }
.raiox-barra-resto .raiox-barra::before { background: var(--grafico-ibov); }
/* setores: a sua barra e, por cima do trilho, a marca do peso no Ibovespa (forma diferente, não só cor) */
.raiox-trilho { grid-column: 1 / -1; position: relative; display: block; height: 16px; }
.raiox-trilho .raiox-barra { position: absolute; left: 0; right: 0; top: 4px; }
.raiox-marca-ibov { position: absolute; top: 0; bottom: 0; left: calc(var(--v, 0) * 100%); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--tinta-2); box-shadow: 0 0 0 2px var(--superficie); }
.raiox-legenda-setores { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px 0; font: 500 .76rem/1.3 var(--f-texto); color: var(--tinta-3); }
.raiox-legenda-setores > span { display: inline-flex; align-items: center; gap: 7px; }
.amostra-voce { width: 16px; height: 8px; border-radius: 4px; background: var(--marca); }
.amostra-ibov { width: 3px; height: 14px; border-radius: 2px; background: var(--tinta-2); }
.raiox-explica { padding: 12px 16px 0; }
.raiox-fontes { padding: 0 2px; }
.raiox-convite { padding-bottom: 18px; }

@media (min-width: 720px) {
  .raiox-entrada { margin-inline: 24px; }
  .raiox-outras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .raiox-anel { animation: none; border-top-color: var(--linha-forte); }
}