/* Frente 09 (rodada 5): consolidado da carteira. Tudo escopado em .r509. Tokens de web/TEMA.md. */
.r509 { --r509-g1: var(--g1, var(--ax-acento)); }
.r509 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* cabeçalho e ações */
.r509 .cab { align-items: flex-end; gap: var(--ax-esp-4); flex-wrap: wrap; }
.r509 .cab .selo { margin-bottom: var(--ax-esp-2); }
.r509-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ax-esp-2); }
.r509-seg, .r509-chips { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ax-raio-m); background: var(--ax-afundada);
  box-shadow: inset 0 1px 2px rgba(10, 11, 31, .08), var(--ax-anel); }
.r509-seg button, .r509-chips button { font: var(--ax-peso-medio) var(--ax-t-pequeno)/1 var(--ax-fonte); color: var(--ax-texto-mudo); background: transparent;
  border: 0; border-radius: calc(var(--ax-raio-m) - 3px); padding: 8px 12px; cursor: pointer; white-space: nowrap;
  transition: color var(--ax-dur-1) var(--ax-curva), background var(--ax-dur-1) var(--ax-curva), box-shadow var(--ax-dur-2) var(--ax-curva); }
.r509-seg button:hover, .r509-chips button:hover { color: var(--ax-texto); }
.r509-seg button[aria-pressed="true"], .r509-chips button[aria-pressed="true"] { color: var(--ax-texto); background: var(--ax-superficie-1);
  box-shadow: var(--ax-anel), 0 1px 2px rgba(10, 11, 31, .08), 0 2px 6px rgba(10, 11, 31, .06); }
.r509-seg button:focus-visible, .r509-chips button:focus-visible { outline: 2px solid var(--ax-acento); outline-offset: 1px; }
.r509-mes input { height: 38px; }

/* filtros */
.r509-filtros { display: flex; flex-wrap: wrap; gap: var(--ax-esp-2); margin: var(--ax-esp-2) 0 var(--ax-esp-4); }
.r509-busca { flex: 1 1 260px; min-width: 0; display: flex; }
.r509-busca input { width: 100%; }
.r509-filtros select { flex: 0 1 auto; min-width: 0; }

/* avisos */
.r509-avisos { list-style: none; margin: 0 0 var(--ax-esp-4); padding: var(--ax-esp-3) var(--ax-esp-4); display: grid; gap: 6px;
  border-radius: var(--ax-raio-l); background: linear-gradient(180deg, var(--ax-alerta-suave), color-mix(in srgb, var(--ax-alerta-suave) 55%, var(--ax-superficie-1)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ax-alerta) 22%, transparent); color: var(--ax-texto-2); font-size: var(--ax-t-pequeno); }
.r509-avisos li { position: relative; padding-left: 16px; }
.r509-avisos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-alerta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-alerta) 18%, transparent); }

/* indicadores do topo */
.r509-herois { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ax-esp-4); margin-bottom: var(--ax-esp-5); }
.r509-kpi { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: var(--ax-esp-5) var(--ax-esp-5) var(--ax-esp-4); border-radius: var(--ax-raio-l);
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ax-acento) 9%, transparent), transparent 60%),
              linear-gradient(180deg, var(--ax-superficie-1), var(--ax-superficie-2));
  box-shadow: var(--ax-anel), inset 0 1px 0 rgba(255, 255, 255, .07), var(--ax-sombra-1);
  transition: transform var(--ax-dur-3) var(--ax-curva), box-shadow var(--ax-dur-3) var(--ax-curva);
  animation: r509-sobe .4s var(--ax-curva) both; }
.r509-kpi:hover { transform: translateY(-2px); box-shadow: var(--ax-anel), inset 0 1px 0 rgba(255, 255, 255, .07), var(--ax-sombra-3); }
.r509-kpi::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ax-acento) 70%, transparent), transparent); opacity: .7; }
.r509-kpi.g1 { background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--ax-roxo) 34%, transparent), transparent 62%), linear-gradient(160deg, #1B1C4A, #101132 70%);
  box-shadow: 0 0 0 1px rgba(166, 111, 254, .22), inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 30px -10px rgba(132, 54, 254, .45), var(--ax-sombra-2); color: #fff; }
.r509-kpi.g1 small, .r509-kpi.g1 p { color: rgba(222, 214, 255, .78); }
.r509-kpi.g1 b { color: #fff; }
.r509-kpi small { font: var(--ax-peso-medio) var(--ax-t-legenda)/1.3 var(--ax-fonte); color: var(--ax-texto-mudo); letter-spacing: .01em; }
.r509-kpi b { font: var(--ax-peso-semi) var(--ax-t-numero)/1.1 var(--ax-fonte); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--ax-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r509-kpi.neg b { color: var(--ax-erro); }
.r509-kpi p { margin: 0; font-size: var(--ax-t-legenda); color: var(--ax-texto-mudo); line-height: 1.45; }
.r509-kpi .r509-pp { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--ax-borda); }
.r509-ks { margin-top: auto; height: 40px; margin-inline: -4px; }
.r509 .up { color: var(--ax-ok); } .r509 .down { color: var(--ax-erro); } .r509 .ne { color: var(--ax-texto-mudo); }
.r509-kpi.g1 .up { color: #6FE3B5; } .r509-kpi.g1 .down { color: #FF9C90; }
.r509-medidor { margin-top: auto; height: 8px; border-radius: 99px; background: var(--ax-afundada); box-shadow: inset 0 1px 2px rgba(10, 11, 31, .12); overflow: hidden; }
.r509-medidor i { display: block; height: 100%; width: var(--m); border-radius: inherit; background: linear-gradient(90deg, var(--ax-roxo-claro), var(--ax-roxo));
  box-shadow: 0 0 10px rgba(132, 54, 254, .45); animation: r509-cresce .8s var(--ax-curva) both; transform-origin: left; }
.r509-herois .r509-kpi:nth-child(2) { animation-delay: .04s; } .r509-herois .r509-kpi:nth-child(3) { animation-delay: .08s; }
.r509-herois .r509-kpi:nth-child(4) { animation-delay: .12s; } .r509-herois .r509-kpi:nth-child(5) { animation-delay: .16s; }

/* caixas */
.r509-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--ax-esp-5); margin-bottom: var(--ax-esp-5); }
.r509-duas.r { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.r509-duas > .box { margin: 0; }
.r509-b { animation: r509-sobe .45s var(--ax-curva) both; }
.r509-bcab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ax-esp-3); margin-bottom: var(--ax-esp-4); }
.r509-bcab h2 { margin: 0 0 2px; }
.r509-bcab .nota { margin: 0; }
.r509-b > .r509-chips { margin-bottom: var(--ax-esp-4); flex-wrap: wrap; }
.r509-fora { margin: var(--ax-esp-3) 0 0; }
.r509-graf { min-height: 290px; }

/* ranking */
.r509-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.r509-rank li { display: grid; grid-template-columns: 26px 30px minmax(0, 1fr) auto; grid-template-rows: auto 6px; column-gap: 10px; row-gap: 5px; align-items: center;
  padding: 8px 10px; border-radius: var(--ax-raio-m); transition: background var(--ax-dur-1) var(--ax-curva); animation: r509-sobe .35s var(--ax-curva) both; animation-delay: var(--d); }
.r509-rank li:hover { background: var(--ax-superficie-3); }
.r509-rank .pos { grid-row: 1 / 3; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: var(--ax-peso-semi) 12px/1 var(--ax-fonte);
  font-variant-numeric: tabular-nums; color: var(--ax-texto-mudo); background: var(--ax-afundada); }
.r509-rank .pos.top { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(10, 11, 31, .18); }
.r509-rank .pos.t1 { background: linear-gradient(145deg, #B98EFF, #7A2FF2); }
.r509-rank .pos.t2 { background: linear-gradient(145deg, #9C98C9, #5F5B8F); }
.r509-rank .pos.t3 { background: linear-gradient(145deg, #D9A86A, #A06A28); }
.r509-rank .r509-av { grid-row: 1 / 3; width: 30px; height: 30px; font-size: 11px; }
.r509-rank .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ax-peso-medio); color: var(--ax-texto); text-decoration: none; }
.r509-rank .nm:hover { color: var(--ax-acento); }
.r509-rank .vl { font-variant-numeric: tabular-nums; font-weight: var(--ax-peso-semi); color: var(--ax-texto); }
.r509-rank li.neg .vl { color: var(--ax-erro); }
.r509-rank .br { grid-column: 3 / 5; height: 6px; border-radius: 99px; background: var(--ax-afundada); overflow: hidden; }
.r509-rank .br i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--ax-roxo-claro), var(--ax-roxo));
  box-shadow: 0 0 8px rgba(132, 54, 254, .35); animation: r509-cresce .7s var(--ax-curva) both; animation-delay: var(--d); transform-origin: left; }
.r509-rank li.neg .br i { background: linear-gradient(90deg, color-mix(in srgb, var(--ax-erro) 60%, #fff), var(--ax-erro)); box-shadow: none; }

/* matriz margem x crescimento */
.r509-matriz { position: relative; height: 320px; margin: 30px 8px 26px 34px; border-radius: var(--ax-raio-m);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: visible;
  box-shadow: var(--ax-anel), inset 0 1px 3px rgba(10, 11, 31, .06); background: var(--ax-superficie-2); }
.r509-matriz .q { position: relative; padding: 10px 12px; font-size: var(--ax-t-legenda); color: var(--ax-texto-mudo); }
.r509-matriz .q span { font-weight: var(--ax-peso-medio); }
.r509-matriz .q1 { order: 2; text-align: right; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--ax-ok) 12%, transparent), transparent 70%); border-top-right-radius: var(--ax-raio-m); }
.r509-matriz .q2 { order: 1; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--ax-info) 8%, transparent), transparent 70%); border-top-left-radius: var(--ax-raio-m); }
.r509-matriz .q3 { order: 4; text-align: right; display: flex; align-items: flex-end; justify-content: flex-end; background: radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--ax-alerta) 10%, transparent), transparent 70%); }
.r509-matriz .q4 { order: 3; display: flex; align-items: flex-end; background: radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--ax-erro) 10%, transparent), transparent 70%); }
.r509-matriz::before, .r509-matriz::after { content: ""; position: absolute; pointer-events: none; background: var(--ax-borda-forte); }
.r509-matriz::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.r509-matriz::after { top: 50%; left: 0; right: 0; height: 1px; }
.r509-matriz .eixo { position: absolute; font: var(--ax-peso-medio) var(--ax-t-legenda)/1 var(--ax-fonte); color: var(--ax-texto-mudo); }
.r509-matriz .ex { left: 50%; bottom: -22px; transform: translateX(-50%); }
.r509-matriz .ey { left: -30px; top: -24px; }
.r509-matriz .bolha .rot.oculto { display: none; }
.r509-matriz .marca { position: absolute; font: 10.5px/1 var(--ax-fonte); font-variant-numeric: tabular-nums; color: var(--ax-texto-fraco); }
.r509-matriz .mx0 { left: 0; bottom: -16px; } .r509-matriz .mx1 { right: 0; bottom: -16px; }
.r509-matriz .my0 { left: -30px; top: 0; } .r509-matriz .my1 { left: -30px; bottom: 0; }
.r509-matriz .bolha { position: absolute; z-index: 1; width: var(--r); height: var(--r); transform: translate(-50%, -50%); text-decoration: none; color: inherit;
  animation: r509-pop .5s var(--ax-curva) both; }
.r509-matriz .bolha i { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--tom) 35%, #fff), var(--tom) 62%, color-mix(in srgb, var(--tom) 70%, #000));
  box-shadow: 0 0 0 2px var(--ax-superficie-1), 0 4px 12px -2px color-mix(in srgb, var(--tom) 55%, transparent);
  opacity: .92; transition: transform var(--ax-dur-2) var(--ax-curva), opacity var(--ax-dur-1); }
.r509-matriz .bolha.ok { --tom: var(--ax-roxo); } .r509-matriz .bolha.at { --tom: var(--ax-alerta); } .r509-matriz .bolha.neg { --tom: var(--ax-erro); }
.r509-matriz .bolha .rot { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  font: var(--ax-peso-medio) 11px/1.2 var(--ax-fonte); color: var(--ax-texto-2); text-shadow: 0 1px 0 var(--ax-superficie-2); pointer-events: none; }
.r509-matriz .bolha .dica { position: absolute; left: 50%; bottom: calc(100% + 8px); display: none; transform: translate(-50%, 0); pointer-events: none; z-index: 3;
  min-width: 180px; padding: 8px 10px; border-radius: var(--ax-raio-s); background: var(--ax-flutuante); box-shadow: var(--ax-anel), var(--ax-sombra-3);
  font-size: var(--ax-t-legenda); color: var(--ax-texto-2); line-height: 1.45; font-variant-numeric: tabular-nums; }
.r509-matriz .bolha .dica b { display: block; color: var(--ax-texto); margin-bottom: 2px; }
.r509-matriz .bolha:hover, .r509-matriz .bolha:focus-visible { z-index: 4; }
.r509-matriz .bolha:hover i, .r509-matriz .bolha:focus-visible i { transform: scale(1.12); opacity: 1; }
.r509-matriz .bolha:hover .dica, .r509-matriz .bolha:focus-visible .dica { display: block; animation: r509-dica var(--ax-dur-2) var(--ax-curva) both; }
.r509-matriz .bolha:focus-visible { outline: none; }
.r509-matriz .bolha:focus-visible i { box-shadow: 0 0 0 2px var(--ax-superficie-1), 0 0 0 4px var(--ax-acento); }

/* tabela comparativa */
.r509-dicat { margin: 0; }
.r509-tab th, .r509-dret th { white-space: nowrap; }
.r509-ord { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; text-transform: inherit; letter-spacing: inherit; }
.r509-ord:hover { color: var(--ax-acento); }
.r509-ord:focus-visible { outline: 2px solid var(--ax-acento); outline-offset: 2px; border-radius: 4px; }
.r509-ord span { min-width: .8em; }
.r509-tab td { white-space: nowrap; }
.r509-tab th, .r509-tab td { padding-left: 8px; padding-right: 8px; }
.r509-tab td.v { font-size: 12.5px; }
.r509-tab .r509-var { padding: 2px 6px; }
.r509-tab .r509-spark { width: 72px; }
.r509-nm { font-weight: var(--ax-peso-semi); color: var(--ax-texto); text-decoration: none; }
.r509-nm:hover { color: var(--ax-acento); text-decoration: underline; text-underline-offset: 3px; }
.r509-tab .pessoa .r509-av { width: 30px; height: 30px; font-size: 11px; flex: none; }
.r509-ck { width: 28px; }
.r509-ck input { width: 16px; height: 16px; accent-color: var(--ax-acento); cursor: pointer; }
.r509-semd td { color: var(--ax-texto-mudo); }
.r509-var { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: var(--ax-t-pequeno); font-variant-numeric: tabular-nums; }
.r509-var.up { background: var(--ax-ok-suave); color: var(--ax-ok); }
.r509-var.down { background: var(--ax-erro-suave); color: var(--ax-erro); }
.r509-var.ne { color: var(--ax-texto-mudo); }
.r509-tend { color: var(--ax-acento); }
.r509-spark { display: block; width: 96px; height: 28px; overflow: visible; }
.r509-spark.desce { color: var(--ax-erro); }
.r509-spark .zero { stroke: var(--ax-borda-forte); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.r509-spark.vazio { display: block; height: 1px; width: 96px; background: var(--ax-borda); }

/* DRE comparada */
.r509-dret td small { display: block; font-size: 10.5px; color: var(--ax-texto-mudo); font-weight: var(--ax-peso-normal); margin-top: 1px; }
.r509-dret tr.r509-res td { font-weight: var(--ax-peso-semi); background: var(--ax-dre-grupo); }
.r509-dret th a { color: inherit; text-decoration: none; }
.r509-dret th a:hover { color: var(--ax-acento); }
.r509-dret .r509-cart { background: color-mix(in srgb, var(--ax-acento) 5%, transparent); }
.r509-dret tr.r509-res td.r509-cart { background: color-mix(in srgb, var(--ax-acento) 11%, var(--ax-dre-grupo)); }
.r509-dret td.r509-melhor { box-shadow: inset 3px 0 0 var(--ax-acento); color: var(--ax-acento); }
.r509-dret td.r509-melhor small { color: color-mix(in srgb, var(--ax-acento) 70%, var(--ax-texto-mudo)); }

/* esqueleto de carregamento */
.r509-esq { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ax-esp-4); }
.r509-esq span, .r509-esq div { height: 132px; border-radius: var(--ax-raio-l); background: linear-gradient(90deg, var(--ax-superficie-2), var(--ax-superficie-3), var(--ax-superficie-2));
  background-size: 200% 100%; animation: r509-brilho 1.3s linear infinite; box-shadow: var(--ax-anel); }
.r509-esq div { grid-column: span 5; height: 300px; }

@keyframes r509-sobe { from { opacity: 0; transform: translateY(8px); } }
@keyframes r509-cresce { from { transform: scaleX(0); } }
@keyframes r509-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
@keyframes r509-brilho { to { background-position: -200% 0; } }
@keyframes r509-dica { from { opacity: 0; transform: translate(-50%, 4px); } }
@media (prefers-reduced-motion: reduce) {
  .r509 *, .r509 *::before, .r509 *::after { animation: none !important; transition: none !important; }
}

/* telas menores */
@media (max-width: 1280px) {
  .r509-herois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r509-herois .r509-kpi.g1 { grid-column: span 1; }
}
@media (max-width: 1100px) {
  .r509-duas, .r509-duas.r { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .r509-herois { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ax-esp-3); }
  .r509-herois .r509-kpi.g1 { grid-column: 1 / -1; }
  .r509-kpi { padding: var(--ax-esp-4); }
  .r509-kpi b { font-size: 21px; }
  .r509-acoes { width: 100%; }
  .r509-seg { width: 100%; }
  .r509-seg button { flex: 1; padding: 8px 6px; }
  .r509-mes { flex: 1 1 140px; } .r509-mes input { width: 100%; }
  .r509-filtros select { flex: 1 1 45%; }
  .r509-matriz { height: 280px; margin-left: 30px; }
  .r509-matriz .q { font-size: 10.5px; padding: 8px; }
  .r509-esq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r509-esq div { grid-column: span 2; }
}

@media print {
  .r509-acoes, .r509-filtros, .r509-chips, .r509-ck, .r509-dicat { display: none !important; }
  .r509-kpi, .r509-b, .r509-rank li, .r509-rank .br i, .r509-matriz .bolha { animation: none !important; }
  .r509-duas, .r509-duas.r { grid-template-columns: minmax(0, 1fr); }
  .r509-herois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r509 .box { break-inside: avoid; }
}
.r509-pps { display: block; margin-top: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }