/* Plataforma AXIS, frente 21 (rodada 5): metas da empresa (portal do cliente e AxisNexus) e a faixa no Início.
   Escopado em .r521 / .r521-mini / .r521-form. Usa os tokens --ax-* do app-tema.css (web/TEMA.md). */

.r521{--r521-ok:var(--ax-ok,#15805A);--r521-at:var(--ax-alerta,#D08A12);--r521-and:var(--ax-acento,#8436FE);--r521-ne:var(--ax-texto-fraco,#9A97B5);
  display:flex;flex-direction:column;gap:18px}
.r521-ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.r521 h2,.r521 h3{margin:0}

/* ---------- topo escuro ---------- */
.r521-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:30px 34px;border-radius:20px;color:#fff;
  background:radial-gradient(620px 300px at 92% -30%,rgba(132,54,254,.58),transparent 62%),radial-gradient(420px 240px at -6% 130%,rgba(226,172,34,.16),transparent 60%),linear-gradient(150deg,#17184A 0%,#0F1030 72%);
  box-shadow:0 22px 48px rgba(15,16,48,.24),0 2px 6px rgba(15,16,48,.18),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08)}
.r521-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 75%);mask-image:linear-gradient(90deg,transparent,#000 75%)}
.r521-hero::after{content:"";position:absolute;left:34px;right:45%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(167,119,255,.9),transparent);box-shadow:0 0 14px rgba(167,119,255,.8)}
.r521-hero-tx{position:relative;display:flex;flex-direction:column;gap:10px;max-width:600px}
.r521-selo{align-self:flex-start;font:600 10px/1 var(--ax-fonte-mono,monospace);letter-spacing:.22em;text-transform:uppercase;padding:7px 11px;border-radius:999px;color:#D9C7FF;background:rgba(167,119,255,.14);box-shadow:inset 0 0 0 1px rgba(167,119,255,.32)}
.r521-hero h1{font-size:clamp(26px,3.4vw,36px);font-weight:700;line-height:1.1;color:#fff;letter-spacing:-.02em;margin:0}
.r521-hero p{font-size:15px;line-height:1.55;color:#C9C6E8;margin:0}
.r521-hero p b{color:#fff;font-weight:600}
.r521-hero-wa{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:600 13px var(--ax-fonte);color:#E4D7FF;text-decoration:none;background:rgba(255,255,255,.07);border-radius:999px;padding:8px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background var(--ax-dur-1,150ms)}
.r521-hero-wa:hover{background:rgba(255,255,255,.13);color:#fff}
.r521-hero-meds{position:relative;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.r521-hero-meds figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.r521-hero-meds figcaption{font-size:11.5px;color:#B8B3E0;font-weight:500}
.r521-hm{display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.r521-hero-cont{align-self:center;display:flex;flex-direction:column;line-height:1.1;padding-left:6px;font-size:12px;color:#9C98CC}
.r521-hero-cont b{font-size:30px;font-weight:700;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r521-hero-vz{max-width:220px;font-size:13px;line-height:1.5;color:#9C98CC}

/* ---------- régua das medalhas ---------- */
.r521-regra{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.r521-degrau{display:inline-flex;align-items:center;gap:9px}
.r521-degrau b{display:block;font-size:13px;font-weight:650;color:var(--ax-texto)}
.r521-degrau small{display:block;font-size:11.5px;color:var(--ax-texto-mudo)}
.r521-dm{display:block;filter:drop-shadow(0 3px 6px rgba(15,16,48,.18))}
.r521-regra-tx{flex:1 1 260px;font-size:12px;line-height:1.5;color:var(--ax-texto-mudo)}

/* ---------- cartões das metas ---------- */
.r521-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.r521-grade.arq{opacity:.78}
.r521-meta{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px 22px 18px;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--r521-c,var(--r521-and)) 6%,var(--ax-superficie-1)),var(--ax-superficie-1) 55%);
  box-shadow:var(--ax-anel),var(--ax-sombra-2);opacity:0;transform:translateY(8px);animation:r521-sobe 460ms var(--ax-curva,ease) forwards;animation-delay:calc(var(--i) * 70ms);
  transition:box-shadow var(--ax-dur-2,200ms),transform var(--ax-dur-2,200ms)}
.r521-meta:hover{box-shadow:var(--ax-anel),var(--ax-sombra-3)}
.r521-meta::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--r521-c,var(--r521-and)),transparent);opacity:.7}
.r521-meta.ok{--r521-c:var(--r521-ok)}.r521-meta.at{--r521-c:var(--r521-at)}.r521-meta.ne{--r521-c:var(--r521-ne)}
@keyframes r521-sobe{to{opacity:1;transform:none}}
.r521-meta-cab{display:flex;align-items:center;gap:12px}
.r521-med{display:block;flex:none;width:56px;height:56px}
.r521-meta-tt{flex:1;min-width:0}
.r521-meta-tt small{display:block;font-size:12px;font-weight:600;color:var(--ax-texto-mudo);margin-bottom:2px}
.r521-meta-tt h3{font-size:16px;font-weight:650;line-height:1.3;color:var(--ax-texto);letter-spacing:-.01em}
.r521-meta-ac{display:flex;gap:4px;align-self:flex-start}
.r521-ico{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:10px;cursor:pointer;color:var(--ax-texto-mudo);background:transparent;transition:background var(--ax-dur-1,150ms),color var(--ax-dur-1,150ms)}
.r521-ico:hover{background:var(--ax-superficie-3);color:var(--ax-acento)}
.r521-ico:focus-visible,.r521-btn:focus-visible,.r521-sug:focus-visible,.r521-link:focus-visible{outline:2px solid var(--ax-acento);outline-offset:2px}

.r521-meta-corpo{display:flex;align-items:center;gap:18px}
.r521-meta-anel{position:relative;flex:none;width:132px;height:132px}
.r521-anel{display:block;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--r521-c,var(--r521-and)) 28%,transparent))}
.r521-anel-f{fill:none;stroke:color-mix(in srgb,var(--ax-texto) 9%,transparent);stroke-width:10}
.r521-anel-v{fill:none;stroke:var(--r521-c,var(--r521-and));stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 900ms var(--ax-curva,cubic-bezier(.2,.7,.2,1)) 120ms}
.r521-anel-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.r521-anel-t b{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--ax-texto);font-variant-numeric:tabular-nums}
.r521-anel-t small{font:500 10px/1 var(--ax-fonte-mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--ax-texto-mudo);margin-top:5px}
.r521-meta-num{min-width:0;display:flex;flex-direction:column;gap:5px}
.r521-n{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--ax-texto);font-variant-numeric:tabular-nums;line-height:1.1}
.r521-meta-num small{font-size:12.5px;line-height:1.45;color:var(--ax-texto-mudo)}
.r521-mudo{color:var(--ax-texto-fraco)!important}
.r521-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;color:var(--ax-texto-2);
  background:color-mix(in srgb,var(--r521-c,var(--r521-and)) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r521-c,var(--r521-and)) 28%,transparent)}
.r521-pill i{width:7px;height:7px;border-radius:50%;background:var(--r521-c,var(--r521-and));box-shadow:0 0 8px var(--r521-c,var(--r521-and))}

.r521-trilha{list-style:none;margin:0;padding:10px 12px;display:flex;gap:4px;border-radius:12px;background:var(--ax-afundada);box-shadow:inset 0 1px 2px rgba(15,16,48,.08);overflow-x:auto}
.r521-trilha li{flex:1 0 26px;display:flex;flex-direction:column;align-items:center;gap:5px}
.r521-trilha i{width:14px;height:14px;border-radius:50%;background:var(--ax-superficie-1);box-shadow:inset 0 0 0 1.5px var(--ax-borda-forte)}
.r521-trilha li.ok i{background:linear-gradient(150deg,#2BB07D,#15805A);box-shadow:0 2px 6px color-mix(in srgb,var(--r521-ok) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.r521-trilha li.at i{background:linear-gradient(150deg,#F0B65A,#D08A12);box-shadow:0 2px 6px color-mix(in srgb,var(--r521-at) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.r521-trilha li.pv i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ax-acento);border:3px solid transparent;background-clip:content-box}
.r521-trilha span{font:500 9.5px/1 var(--ax-fonte-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ax-texto-mudo)}

.r521-prox{margin:0;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.5;color:var(--ax-texto-2)}
.r521-prox b{color:var(--ax-texto);font-variant-numeric:tabular-nums}
.r521-ult{font-weight:600}
.r521-ult.ok{color:var(--r521-ok)}.r521-ult.at{color:var(--r521-at)}
.r521-nota{margin:0;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.55;color:var(--ax-texto-2);background:var(--ax-superficie-2);box-shadow:var(--ax-anel)}
.r521-nota span{display:block;font:600 10px/1 var(--ax-fonte-mono,monospace);letter-spacing:.18em;text-transform:uppercase;color:var(--ax-acento);margin-bottom:6px}
.r521-meta-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.r521-meta-pe>small{font-size:11.5px;color:var(--ax-texto-mudo)}
.r521-pe-ac{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.r521-aceite{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ax-texto-mudo)}
.r521-aceite.ok{color:var(--r521-ok);font-weight:600}
.r521-btn{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--ax-fonte);padding:8px 13px;border:0;border-radius:var(--ax-raio-m,10px);cursor:pointer;text-decoration:none;
  color:var(--ax-sobre-acento,#fff);background:var(--ax-degrade,#8436FE);box-shadow:var(--ax-sombra-acento);transition:transform var(--ax-dur-1,150ms),box-shadow var(--ax-dur-1,150ms),background var(--ax-dur-1,150ms)}
.r521-btn:hover{transform:translateY(-1px)}
.r521-btn.sec{color:var(--ax-texto);background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.r521-btn.sec:hover{box-shadow:var(--ax-anel),var(--ax-sombra-2);color:var(--ax-acento)}
.r521-btn:disabled{opacity:.6;cursor:default;transform:none}
.r521-graf{padding-top:4px}

/* ---------- cadastrar ---------- */
.r521-novas{padding:20px 22px;border-radius:18px;background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.r521-novas h2{font-size:16.5px;font-weight:650}
.r521-novas p{font-size:13px;color:var(--ax-texto-mudo);margin:4px 0 14px}
.r521-sugs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.r521-sug{display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:0;border-radius:14px;cursor:pointer;font:inherit;color:var(--ax-texto);
  background:linear-gradient(180deg,var(--ax-superficie-1),var(--ax-superficie-2));box-shadow:var(--ax-anel),var(--ax-sombra-1);transition:box-shadow var(--ax-dur-2,200ms),transform var(--ax-dur-2,200ms)}
.r521-sug:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-2)}
.r521-sug>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.r521-sug b{font-size:14px;font-weight:650}
.r521-sug small{font-size:12px;line-height:1.4;color:var(--ax-texto-mudo)}
.r521-sug>.r521-ic:last-child{color:var(--ax-acento)}
.r521-sug-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;background:var(--ax-degrade-marca,#8436FE);box-shadow:0 6px 14px rgba(132,54,254,.3),inset 0 1px 0 rgba(255,255,255,.3)}

.r521-vazio{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:18px;background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.r521-vazio-ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;color:#fff;background:var(--ax-degrade-marca,#8436FE);box-shadow:0 8px 18px rgba(132,54,254,.32)}
.r521-vazio h2{font-size:16.5px;font-weight:650}
.r521-vazio ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.r521-vazio li{display:flex;flex-direction:column;gap:2px;font-size:13px}
.r521-vazio li small{color:var(--ax-texto-mudo);line-height:1.4}
.r521-rodape{margin:0;text-align:center}
.r521-link{border:0;background:none;cursor:pointer;font:600 13px var(--ax-fonte);color:var(--ax-acento);padding:6px 8px;border-radius:8px}
.r521-link:hover{color:var(--ax-acento-forte)}

/* ---------- formulário ---------- */
.r521-form{display:flex;flex-direction:column;gap:12px}
.r521-form-l{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.r521-dica{display:block;font-size:11.5px;color:var(--ax-texto-mudo);margin-top:4px;line-height:1.4}
.r521-aviso{margin:0;font-size:12.5px;padding:10px 12px;border-radius:10px;color:var(--ax-texto-2);background:var(--ax-alerta-suave,#FFF4E0)}

/* ---------- faixa no Início ---------- */
.r521-mini{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;text-decoration:none;color:var(--ax-texto);background:var(--ax-superficie-1);
  box-shadow:var(--ax-anel),var(--ax-sombra-1);transition:box-shadow var(--ax-dur-2,200ms),transform var(--ax-dur-2,200ms)}
.r521-mini:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-2)}
.r521-mini-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(150deg,#F3CF63,#C48E12);box-shadow:0 6px 14px rgba(196,142,18,.32),inset 0 1px 0 rgba(255,255,255,.4)}
.r521-mini-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.r521-mini-t b{font-size:14.5px;font-weight:650}
.r521-mini-t small{font-size:12.5px;color:var(--ax-texto-mudo)}
.r521-mini-t em{font-style:normal;font-weight:600;color:var(--ax-acento)}
.r521-mini-p{display:flex;gap:5px}
.r521-mini-p i{width:10px;height:10px;border-radius:50%;background:var(--ax-texto-fraco)}
.r521-mini-p i.ok{background:var(--ax-ok)}.r521-mini-p i.at{background:var(--ax-alerta)}.r521-mini-p i.and{background:var(--ax-acento)}
.r521-mini>.r521-ic:last-child{color:var(--ax-texto-mudo)}

@media (max-width:640px){
  .r521-hero{padding:24px 20px}
  .r521-hero::after{left:20px}
  .r521-hero-meds{gap:8px}
  .r521-hm svg{width:48px;height:auto}
  .r521-hero-cont b{font-size:24px}
  .r521-grade{grid-template-columns:1fr}
  .r521-meta{padding:18px 16px 16px}
  .r521-meta-corpo{gap:14px}
  .r521-meta-anel,.r521-meta-anel .r521-anel{width:104px;height:104px}
  .r521-anel-t b{font-size:22px}
  .r521-form-l{grid-template-columns:1fr}
  .r521-mini-p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .r521-meta{animation:none;opacity:1;transform:none}
  .r521-anel-v{transition:none}
}