/* AXIS Finanças: metas e objetivos (Frente 25, rodada 5). Tudo escopado com o prefixo o25-, sobre os tokens do fin.css. */

/* anel de progresso */
.o25-anel{position:relative;display:inline-grid;place-items:center;width:var(--t);height:var(--t);flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 10%,var(--card)) 0 52%,transparent 53%);
  box-shadow:inset 0 1px 2px rgba(22,22,46,.06)}
.o25-anel svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.o25-anel circle{fill:none}
.o25-tr{stroke:color-mix(in srgb,var(--c) 14%,var(--bg-2))}
.o25-arco{stroke-linecap:round;filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--c) 45%,transparent));animation:o25-arco 900ms cubic-bezier(.2,.7,.2,1) both}
@keyframes o25-arco{from{stroke-dashoffset:var(--c0)}}
.o25-miolo{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1;text-align:center}
.o25-miolo b{font:650 calc(var(--t) * .24)/1 var(--n);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg)}
.o25-miolo small{font:600 11px var(--f);color:var(--mudo);margin-top:5px}
.o25-miolo svg{width:calc(var(--t) * .42);height:calc(var(--t) * .42);fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.saldo .o25-anel{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.1) 0 52%,transparent 53%);box-shadow:none}
.saldo .o25-tr{stroke:rgba(255,255,255,.12)}
.saldo .o25-miolo b{color:#fff}

/* ícone do tipo */
.o25-ic{width:30px;height:30px;border-radius:10px}
.o25-ic svg{width:17px;height:17px}

/* herói */
.o25-hero-g{display:flex;align-items:center;justify-content:space-between;gap:14px}
.o25-hero-g>div{min-width:0}
.o25-hero .fx-hero-m .o25-d{background:#C7A6FF}

/* lista de objetivos */
.o25-lista{display:flex;flex-direction:column;gap:10px}
.o25-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;cursor:pointer;font:inherit;color:inherit;padding:14px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 7%,var(--card)),var(--card) 55%);transition:transform var(--t),box-shadow var(--t)}
.o25-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--c);opacity:.85}
@media (hover:hover){.o25-card:hover{transform:translateY(-1px);box-shadow:var(--sombra-2),0 0 0 1px var(--linha)}}
.o25-card:active{transform:scale(.985)}
.o25-c-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.o25-c-n{display:flex;align-items:center;gap:8px;min-width:0}
.o25-c-n b{font-size:15px;font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o25-c-v b{font:650 16px var(--n);letter-spacing:-.02em}
.o25-c-t small{font-size:12.5px;color:var(--mudo)}
.o25-c-t .o25-c-p{color:var(--fg-2)}
.o25-c-p b{font-weight:650;color:var(--fg)}
.o25-c-t>.pill{align-self:flex-start;margin:2px 0 1px}
.o25-card .o25-c-n b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.o25-feitos summary{cursor:pointer;font-weight:650;min-height:28px;display:flex;align-items:center}
.o25-feitos[open] summary{margin-bottom:12px}
.o25-feitos .o25-card{box-shadow:0 0 0 1px var(--linha);opacity:.92}

/* vazio com modelos */
.o25-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 16px 16px}
.o25-vazio>b{font-size:17px;letter-spacing:-.015em;margin-top:6px}
.o25-vazio>.nota{max-width:340px}
.o25-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin-top:12px}
.o25-mod{display:flex;align-items:flex-start;gap:10px;text-align:left;border:0;cursor:pointer;font:inherit;color:inherit;padding:12px;border-radius:16px;min-height:64px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 9%,var(--card-2)),var(--card-2));box-shadow:0 0 0 1px var(--linha),0 1px 2px rgba(22,22,46,.04);transition:transform var(--t),box-shadow var(--t)}
.o25-mod:active{transform:scale(.97)}
@media (hover:hover){.o25-mod:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 6px 16px rgba(22,22,46,.08)}}
.o25-mod span{display:flex;flex-direction:column;min-width:0}
.o25-mod b{font-size:13.5px}
.o25-mod small{font-size:11.5px;color:var(--mudo);margin-top:2px}

/* medalhas */
.o25-meds{display:flex;flex-direction:column;gap:6px}
.o25-med{display:flex;align-items:center;gap:12px;min-height:66px}
.o25-med>svg{flex:none;filter:drop-shadow(0 4px 8px rgba(22,22,46,.12))}
.o25-med>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.o25-med b{font-size:14px}
.o25-med small{font-size:12px;color:var(--mudo)}
.o25-med .bp{margin-top:3px}

/* detalhe */
.o25-top{background:radial-gradient(380px 200px at 100% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),linear-gradient(180deg,var(--card),var(--card-2));padding:18px}
.o25-top-g{display:flex;align-items:center;gap:18px}
.o25-top-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.o25-top-t h1{margin:2px 0 0;font-size:20px;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.o25-top-v{font:650 24px/1.15 var(--n);letter-spacing:-.03em;margin-top:4px}
.o25-top-t .pill{margin-top:6px}
.o25-marcos{display:grid;grid-template-columns:repeat(4,1fr);margin:18px 2px 2px;position:relative}
.o25-marcos::before{content:"";position:absolute;left:12.5%;right:12.5%;top:6px;height:2px;background:var(--linha-2);border-radius:2px}
.o25-marcos span{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
.o25-marcos i{width:14px;height:14px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--linha-2)}
.o25-marcos .ok i{background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent),0 2px 6px color-mix(in srgb,var(--c) 40%,transparent)}
.o25-marcos b{font:650 12px var(--n)}
.o25-marcos small{font-size:11px;color:var(--mudo);min-height:14px}
.o25-acoes{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}
.o25-acoes .btn:only-child{grid-column:1 / -1}
.o25-acoes .btn{display:flex;align-items:center;justify-content:center;gap:6px}
.o25-acoes .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* simulador */
.o25-plano{margin:0 0 14px;font-size:14px;color:var(--fg-2)}
.o25-plano b{color:var(--fg)}
.o25-sl{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--fg-2)}
.o25-sl b{color:var(--fg)}
.o25-sl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:6px;margin:6px 0;
  background:linear-gradient(90deg,var(--roxo) 0 var(--p,0%),var(--bg-2) var(--p,0%));box-shadow:inset 0 1px 2px rgba(22,22,46,.12)}
.o25-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;cursor:pointer;
  box-shadow:0 0 0 1px rgba(22,22,46,.12),0 3px 10px rgba(110,37,224,.35);transition:transform var(--t)}
.o25-sl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.o25-sl input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(22,22,46,.12),0 3px 10px rgba(110,37,224,.35)}
.o25-sr{margin:8px 0 0;font-size:13.5px;padding:11px 13px;border-radius:14px;background:var(--roxo-s);color:var(--fg)}

/* formulário */
.o25-tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.o25-tipos button{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;cursor:pointer;font:600 12px var(--f);color:var(--fg-2);padding:10px 4px;border-radius:14px;
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--linha);min-height:76px;text-align:center;transition:box-shadow var(--t),background var(--t),transform var(--t)}
.o25-tipos button:active{transform:scale(.96)}
.o25-tipos button[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 10%,var(--card));color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--c),0 4px 12px color-mix(in srgb,var(--c) 18%,transparent)}
.o25-sug{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;cursor:pointer;font:inherit;text-align:left;padding:11px 13px;border-radius:14px;
  background:var(--ok-s);color:var(--fg);font-size:12.5px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 25%,transparent)}
.o25-sug b{color:var(--ok);font-size:14px;white-space:nowrap}
.o25-rap{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:-4px}
.o25-rap .chip{min-height:36px;padding:6px 13px}

/* comemoração */
.o25-festa{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 0 4px}
.o25-festa-m{position:relative;display:grid;place-items:center;padding:10px;animation:o25-festa 640ms cubic-bezier(.2,1.3,.4,1) both}
.o25-festa-m::before{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(199,166,255,.55),transparent 66%);animation:o25-brilho 2.4s ease-in-out infinite}
.o25-festa h2{font-size:21px}
.o25-festa p{margin:0;color:var(--fg-2);max-width:320px}
@keyframes o25-festa{from{transform:scale(.6);opacity:0}}
@keyframes o25-brilho{50%{opacity:.55;transform:scale(1.06)}}

/* Início */
.o25-ini-l{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-snap-type:x mandatory}
.o25-ini-l::-webkit-scrollbar{display:none}
.o25-ini-i{flex:none;width:132px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border-radius:16px;text-decoration:none;color:var(--fg);scroll-snap-align:start;
  background:linear-gradient(160deg,var(--card-2),var(--card));box-shadow:0 0 0 1px var(--linha),0 2px 8px rgba(22,22,46,.04);transition:transform var(--t)}
.o25-ini-i:active{transform:scale(.97)}
.o25-ini-i .o25-anel{margin-bottom:6px}
.o25-ini-i b{font-size:13.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o25-ini-i small{font-size:11.5px;color:var(--mudo)}
.o25-ini-n{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--fg)}
.o25-ini-n>span:not(.o25-anel){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.o25-ini-n b{font-size:15px}
.o25-ini-n small{font-size:12.5px;color:var(--mudo)}

@media (min-width:700px){
  .o25-mods{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.o25-arco,.o25-festa-m,.o25-festa-m::before{animation:none}}