/* Frente 05 (rodada 5): saúde do cliente na Carteira de clientes. Tudo escopado em .r505 (e .r505-jan na janela). */
.r505 { --r505-ok: var(--ax-ok); --r505-at: var(--ax-alerta); --r505-cr: var(--ax-erro); }
.r505 .saudavel, .r505-jan .saudavel { --tom: var(--ax-ok); --tom-s: var(--ax-ok-suave); }
.r505 .atencao, .r505-jan .atencao { --tom: var(--ax-alerta); --tom-s: var(--ax-alerta-suave); }
.r505 .risco, .r505-jan .risco { --tom: var(--ax-erro); --tom-s: var(--ax-erro-suave); }

/* anel do índice */
.r505-anel { position: relative; display: inline-grid; place-items: center; flex: none; }
.r505-anel.g { width: 82px; height: 82px; }
.r505-anel.p { width: 38px; height: 38px; }
.r505-anel svg { width: 100%; height: 100%; overflow: visible; }
.r505-anel circle { fill: none; }
.r505-anel .trilha { stroke: var(--ax-afundada); }
.r505-anel .valor { stroke: var(--tom, var(--ax-acento)); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--alvo);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tom, var(--ax-acento)) 45%, transparent));
  animation: r505-enche .7s var(--ax-curva) both; }
.r505-anel b { position: absolute; font: var(--ax-peso-forte) 24px/1 var(--ax-fonte); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ax-texto); }
.r505-anel.p b { font-size: 12.5px; }
.r505-anel.g::before { content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ax-superficie-1), var(--ax-superficie-2) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -6px 12px -8px rgba(10,11,31,.25), 0 1px 2px rgba(10,11,31,.08); }
@keyframes r505-enche { from { stroke-dashoffset: var(--c); } }

/* KPIs */
.r505-kpis { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: var(--ax-esp-4); margin: var(--ax-esp-2) 0 var(--ax-esp-5); }
.r505-media { display: flex; align-items: center; gap: var(--ax-esp-4); }
.r505-media > div { display: grid; gap: 2px; }
.r505-kf { font: inherit; color: inherit; text-align: left; cursor: pointer; border: 0; position: relative; overflow: hidden;
  transition: transform var(--ax-dur-2) var(--ax-curva), box-shadow var(--ax-dur-2) var(--ax-curva); }
.r505-kf::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tom); opacity: .85; }
.r505-kf b { color: var(--tom); }
.r505-kf:hover { transform: translateY(-1px); box-shadow: var(--ax-anel), var(--ax-sombra-2); }
.r505-kf[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--tom), var(--ax-sombra-2); background: linear-gradient(180deg, var(--tom-s), var(--ax-superficie-1) 80%); }
.r505-kf:focus-visible { outline: 2px solid var(--ax-acento); outline-offset: 2px; }

/* barra de filtros */
.r505-barra-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ax-esp-3); }
.r505-barra-f .filtros { margin: 0; flex: 1 1 520px; display: flex; flex-wrap: wrap; gap: var(--ax-esp-2); }
.r505-barra-f .filtros input { flex: 1 1 200px; min-width: 0; }
.r505-barra-f .filtros select { flex: 0 1 auto; }
.r505-barra-f .acoes { display: flex; align-items: center; gap: var(--ax-esp-2); }
.r505-ref { margin: var(--ax-esp-3) 0 var(--ax-esp-4); }

/* cartões */
.r505-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--ax-esp-5); }
.r505-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--ax-esp-4); padding: var(--ax-esp-5);
  border-radius: var(--ax-raio-l); background: linear-gradient(180deg, var(--ax-superficie-1), var(--ax-superficie-2));
  box-shadow: var(--ax-anel), inset 0 1px 0 rgba(255,255,255,.06), var(--ax-sombra-1); overflow: hidden;
  transition: transform var(--ax-dur-3) var(--ax-curva), box-shadow var(--ax-dur-3) var(--ax-curva);
  animation: r505-sobe .35s var(--ax-curva) both; }
.r505-card::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tom) 22%, transparent), transparent 68%); opacity: .9; pointer-events: none; }
.r505-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--tom), transparent); opacity: .55; }
.r505-card:hover { transform: translateY(-2px); box-shadow: var(--ax-anel), inset 0 1px 0 rgba(255,255,255,.06), var(--ax-sombra-3); }
@keyframes r505-sobe { from { opacity: 0; transform: translateY(6px); } }
.r505-grade .r505-card:nth-child(2) { animation-delay: .03s; } .r505-grade .r505-card:nth-child(3) { animation-delay: .06s; }
.r505-grade .r505-card:nth-child(4) { animation-delay: .09s; } .r505-grade .r505-card:nth-child(n+5) { animation-delay: .12s; }
.r505-card header { display: flex; align-items: center; gap: var(--ax-esp-3); }
.r505-card header .lg-p { flex: none; }
.r505-id { min-width: 0; flex: 1; display: grid; gap: 1px; }
.r505-id b { font-size: var(--ax-t-destaque); font-weight: var(--ax-peso-semi); color: var(--ax-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r505-id span { font-size: var(--ax-t-pequeno); color: var(--ax-texto-mudo); }
.r505-meio { display: flex; align-items: center; gap: var(--ax-esp-4); }
.r505-leg { display: grid; gap: 4px; min-width: 0; }
.r505-leg small { font-size: var(--ax-t-legenda); color: var(--ax-texto-mudo); letter-spacing: .02em; }
.r505-leg p { margin: 0; font-size: var(--ax-t-pequeno); line-height: 1.45; color: var(--ax-texto-2); }
.r505-leg p b { color: var(--ax-texto); font-weight: var(--ax-peso-semi); }
.r505-inc { color: var(--ax-alerta) !important; }

.r505-pils { list-style: none; margin: 0; padding: var(--ax-esp-1); display: grid; gap: 2px; border-radius: var(--ax-raio-m);
  background: var(--ax-afundada); box-shadow: inset 0 1px 2px rgba(10,11,31,.08); }
.r505-pil { width: 100%; display: grid; grid-template-columns: 96px 1fr 44px; grid-template-rows: auto auto; column-gap: var(--ax-esp-3); row-gap: 2px; align-items: center;
  padding: 7px 10px; border: 0; border-radius: var(--ax-raio-s); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--ax-dur-1) var(--ax-curva), box-shadow var(--ax-dur-1) var(--ax-curva); }
.r505-pil:hover { background: var(--ax-superficie-1); box-shadow: var(--ax-anel), var(--ax-sombra-1); }
.r505-pil:focus-visible { outline: 2px solid var(--ax-acento); outline-offset: 1px; }
.r505-pil .n { font-size: var(--ax-t-pequeno); font-weight: var(--ax-peso-medio); color: var(--ax-texto-2); }
.r505-pil .p { text-align: right; font: var(--ax-peso-semi) var(--ax-t-pequeno)/1 var(--ax-fonte-mono); font-variant-numeric: tabular-nums; color: var(--ax-texto); }
.r505-pil .p small, .r505-sp small { color: var(--ax-texto-fraco); font-weight: var(--ax-peso-normal); }
.r505-pil .r { grid-column: 1 / -1; font-size: var(--ax-t-legenda); color: var(--ax-texto-mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.r505-barra { position: relative; display: block; height: 6px; border-radius: var(--ax-raio-pilula); background: var(--ax-superficie-3);
  box-shadow: inset 0 1px 1px rgba(10,11,31,.12); overflow: hidden; }
.r505-barra i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width var(--ax-dur-3) var(--ax-curva); }
.r505-barra.ok i { background: linear-gradient(90deg, color-mix(in srgb, var(--ax-ok) 70%, #fff), var(--ax-ok)); }
.r505-barra.at i { background: linear-gradient(90deg, color-mix(in srgb, var(--ax-alerta) 70%, #fff), var(--ax-alerta)); }
.r505-barra.cr i { background: linear-gradient(90deg, color-mix(in srgb, var(--ax-erro) 70%, #fff), var(--ax-erro)); }
.r505-card footer { display: flex; justify-content: space-between; gap: var(--ax-esp-2); margin-top: auto; }

/* lista */
.r505-tab td { vertical-align: middle; }
.r505-ind { display: inline-flex; align-items: center; gap: var(--ax-esp-2); }
.r505-cel { min-width: 40px; padding: 4px 8px; border: 0; border-radius: var(--ax-raio-pilula); font: var(--ax-peso-semi) var(--ax-t-pequeno)/1.2 var(--ax-fonte-mono);
  font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--ax-dur-1) var(--ax-curva); }
.r505-cel:hover { transform: translateY(-1px); }
.r505-cel.ok { background: var(--ax-ok-suave); color: var(--ax-ok); }
.r505-cel.at { background: var(--ax-alerta-suave); color: var(--ax-alerta); }
.r505-cel.cr { background: var(--ax-erro-suave); color: var(--ax-erro); }
.r505-cel.ne { background: var(--ax-superficie-3); color: var(--ax-texto-mudo); }

/* janela de explicação */
.r505-jan { display: grid; gap: var(--ax-esp-4); }
.r505-jan h2 { margin: 4px 0 2px; }
.r505-jan .sub { margin: 0; }
.r505-jcab { display: flex; align-items: center; gap: var(--ax-esp-5); }
.r505-jan .selo { display: inline-block; }
.r505-sec { padding: var(--ax-esp-4) var(--ax-esp-5); border-radius: var(--ax-raio-l); background: var(--ax-superficie-2);
  box-shadow: var(--ax-anel); display: grid; gap: var(--ax-esp-2); position: relative; overflow: hidden; }
.r505-sec::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ax-borda-forte); }
.r505-sec.ok::before { background: var(--ax-ok); } .r505-sec.at::before { background: var(--ax-alerta); } .r505-sec.cr::before { background: var(--ax-erro); }
.r505-sec.foco { box-shadow: inset 0 0 0 1px var(--ax-acento-borda), var(--ax-sombra-2); background: var(--ax-superficie-1); }
.r505-sec p { margin: 0; line-height: 1.5; }
.r505-stopo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--ax-esp-4); }
.r505-stopo h3 { margin: 0; font-size: var(--ax-t-destaque); font-weight: var(--ax-peso-semi); }
.r505-sp { font: var(--ax-peso-semi) var(--ax-t-corpo)/1 var(--ax-fonte-mono); font-variant-numeric: tabular-nums; }
.r505-res { font-weight: var(--ax-peso-medio); color: var(--ax-texto); }
.r505-linhas { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--ax-texto-2); font-size: var(--ax-t-pequeno); line-height: 1.5; }
.r505-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ax-esp-2); }
.r505-etapas li { display: grid; grid-template-columns: 18px 1fr; column-gap: var(--ax-esp-2); padding: 8px 10px; border-radius: var(--ax-raio-m);
  background: var(--ax-superficie-1); box-shadow: var(--ax-anel); font-size: var(--ax-t-pequeno); }
.r505-etapas li span { grid-row: span 2; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; }
.r505-etapas li.ok span { background: var(--ax-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow: 0 0 0 3px var(--ax-ok-suave); }
.r505-etapas li.nao span { box-shadow: inset 0 0 0 1.5px var(--ax-alerta), 0 0 0 3px var(--ax-alerta-suave); }
.r505-etapas li b { font-weight: var(--ax-peso-semi); }
.r505-etapas li em { font-style: normal; color: var(--ax-texto-mudo); font-size: var(--ax-t-legenda); }
.r505-serie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ax-esp-2); }
.r505-serie div { padding: 8px 10px; border-radius: var(--ax-raio-m); background: var(--ax-superficie-1); box-shadow: var(--ax-anel); display: grid; gap: 2px; }
.r505-serie small { font-size: var(--ax-t-legenda); color: var(--ax-texto-mudo); }
.r505-serie b { font: var(--ax-peso-semi) var(--ax-t-destaque)/1.2 var(--ax-fonte-mono); font-variant-numeric: tabular-nums; }
.r505-serie b.neg { color: var(--ax-erro); }
.r505-serie span { font-size: var(--ax-t-legenda); color: var(--ax-texto-mudo); font-variant-numeric: tabular-nums; }
.r505-acao { padding: 10px 12px; border-radius: var(--ax-raio-m); background: var(--ax-acento-suave); color: var(--ax-texto-2); font-size: var(--ax-t-pequeno); }
.r505-acao b { display: block; color: var(--ax-acento); font-weight: var(--ax-peso-semi); margin-bottom: 2px; }
.r505-sec details { font-size: var(--ax-t-pequeno); color: var(--ax-texto-mudo); }
.r505-sec details summary { cursor: pointer; color: var(--ax-acento); width: max-content; }
.r505-sec details p { margin-top: 6px; }
.r505-jan footer { display: flex; justify-content: flex-end; position: sticky; bottom: 0; }

@media (max-width: 980px) {
  .r505-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r505-media { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .r505-kpis { gap: var(--ax-esp-2); }
  .r505-kf { padding: 10px 12px; }
  .r505-grade { grid-template-columns: minmax(0, 1fr); gap: var(--ax-esp-4); }
  .r505-card { padding: var(--ax-esp-4); }
  .r505-pil { grid-template-columns: 86px 1fr 40px; padding: 7px 8px; }
  .r505-barra-f .filtros { flex-basis: 100%; }
  .r505-barra-f .filtros select, .r505-barra-f .filtros input { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .r505-barra-f .acoes { width: 100%; justify-content: space-between; }
  .r505-jcab { gap: var(--ax-esp-3); }
  .r505-etapas, .r505-serie { grid-template-columns: minmax(0, 1fr); }
  .r505-card footer .btn { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .r505-card, .r505-anel .valor { animation: none; }
  .r505-card, .r505-kf, .r505-pil, .r505-cel { transition: none; }
}

/* ajustes depois dos prints: respiro da janela, rodapé fixo com fundo, rótulo da faixa média */
.r505-jan { padding: var(--ax-esp-6); }
.r505-jan footer { margin: 0 calc(var(--ax-esp-6) * -1) calc(var(--ax-esp-6) * -1); padding: var(--ax-esp-4) var(--ax-esp-6);
  background: linear-gradient(180deg, transparent, var(--ax-flutuante) 35%); }
.r505-mf { font-size: var(--ax-t-subtitulo) !important; }
.r505-mf.saudavel { color: var(--ax-ok); } .r505-mf.atencao { color: var(--ax-alerta); } .r505-mf.risco { color: var(--ax-erro); }
@media (max-width: 560px) { .r505-jan { padding: var(--ax-esp-4); } .r505-jan footer { margin: 0 calc(var(--ax-esp-4) * -1) calc(var(--ax-esp-4) * -1); padding: var(--ax-esp-3) var(--ax-esp-4); } }
.r505-tab th, .r505-tab td { padding-left: 10px; padding-right: 10px; }
.r505-tab .r505-ind .pill { display: none; }
@media (min-width: 1500px) { .r505-tab .r505-ind .pill { display: inline-flex; } }