/* AXIS Finanças: contas recorrentes e lembretes (Frente 28, rodada 5). Tudo escopado em .r28-*, sobre os tokens do fin.css. */

/* herói: o mesmo painel escuro do saldo, com a barra do que já foi pago no mês */
.r28-hero .r28-selo{font:600 11.5px var(--f);padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(255,255,255,.86);white-space:nowrap}
.r28-prog{position:relative;height:8px;margin:14px 0 2px;border-radius:6px;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.25);overflow:hidden}
.r28-prog i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);border-radius:6px;background:linear-gradient(90deg,#4FD1A0,#9BEBC8);
  box-shadow:0 0 12px rgba(79,209,160,.55),inset 0 1px 0 rgba(255,255,255,.5);transform-origin:left;animation:r28-barra 700ms cubic-bezier(.2,.7,.2,1) both;transition:width 400ms cubic-bezier(.2,.7,.2,1)}
@keyframes r28-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.r28-hero .fx-hero-m .r28-d7{background:#F0B65A}.r28-hero .fx-hero-m .r28-df{background:#C7A6FF}

.r28-abas{grid-template-columns:repeat(3,1fr);background:var(--bg-2);box-shadow:inset 0 1px 2px rgba(22,22,46,.06)}
.r28-corpo{display:flex;flex-direction:column;gap:14px;min-width:0}

/* blocos e linhas */
.r28-bloco{display:flex;flex-direction:column;gap:8px;min-width:0}
.r28-bt{margin:4px 2px 0;font-size:15.5px;font-weight:650;letter-spacing:-.015em;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.r28-bt .nota{font-weight:500}
.r28-lista,.r28-fxs{padding:4px 6px;display:flex;flex-direction:column}
.r28-it{position:relative;display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--linha);min-width:0}
.r28-it:last-child{border-bottom:0}
.r28-it::before{content:"";position:absolute;left:-6px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background var(--t)}
.r28-it.r28-cr::before{background:var(--cr)}.r28-it.r28-at::before{background:var(--at)}
.r28-it-a{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 6px;border:0;background:none;text-align:left;cursor:pointer;color:var(--fg);border-radius:14px;transition:background var(--t)}
@media (hover:hover){.r28-it-a:hover{background:color-mix(in srgb,var(--c) 6%,transparent)}}
.r28-it-a:active{background:color-mix(in srgb,var(--c) 10%,transparent)}
.r28-it-a .ic,.r28-fx .ic,.r28-lem-i .ic{width:42px;height:42px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px color-mix(in srgb,var(--c) 16%,transparent)}
.r28-it .t,.r28-fx .t,.r28-lem-i .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.r28-it .t b,.r28-fx .t b,.r28-lem-i .t b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r28-it .t small,.r28-fx .t small,.r28-lem-i .t small{color:var(--mudo);font-size:12.5px;line-height:1.35}
.r28-it.r28-cr .r28-q{color:var(--cr);font-weight:600}.r28-it.r28-at .r28-q{color:var(--at);font-weight:600}
.r28-v{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;text-align:right}
.r28-v b{font:650 15px var(--n);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r28-v small{font-size:11.5px;color:var(--mudo)}
.r28-pago .t b{color:var(--fg-2)}
.r28-pago .r28-v b{color:var(--mudo);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mudo) 60%,transparent)}

/* botão de marcar como paga: anel com relevo que se enche ao tocar */
.r28-ok{flex:none;width:40px;height:40px;margin:0 4px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:var(--mudo);
  background:linear-gradient(180deg,var(--card),var(--card-2));box-shadow:inset 0 0 0 1.5px var(--linha-2),0 2px 6px rgba(22,22,46,.06);transition:color var(--t),background var(--t),box-shadow var(--t),transform var(--t)}
.r28-ok svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity var(--t)}
@media (hover:hover){button.r28-ok:hover{color:var(--ok);box-shadow:inset 0 0 0 1.5px var(--ok),0 4px 12px color-mix(in srgb,var(--ok) 22%,transparent)}button.r28-ok:hover svg{opacity:1}}
button.r28-ok:active{transform:scale(.88)}
.r28-ok.r28-feito{color:#fff;background:linear-gradient(160deg,#2BB57F,#13805A);box-shadow:0 4px 12px rgba(19,128,90,.32),inset 0 1px 0 rgba(255,255,255,.3)}
.r28-ok.r28-feito svg{opacity:1}

/* adicionar */
.r28-add{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;cursor:pointer;color:var(--fg);padding:14px 16px;border-radius:var(--r);
  background:linear-gradient(135deg,color-mix(in srgb,var(--roxo) 9%,var(--card)),var(--card) 60%);box-shadow:var(--sombra),inset 0 0 0 1px color-mix(in srgb,var(--roxo) 22%,var(--linha));transition:transform var(--t),box-shadow var(--t)}
.r28-add>svg{width:40px;height:40px;padding:10px;border-radius:13px;flex:none;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;background:linear-gradient(150deg,#9A5BFF,#6E25E0);box-shadow:0 6px 14px rgba(110,37,224,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.r28-add b{display:block;font-size:14.5px;font-weight:650}.r28-add small{color:var(--mudo);font-size:12.5px}
@media (hover:hover){.r28-add:hover{transform:translateY(-1px);box-shadow:var(--sombra-2),inset 0 0 0 1px color-mix(in srgb,var(--roxo) 30%,var(--linha))}}
.r28-add:active{transform:scale(.985)}
.r28-vazio .fx-vazio-i{width:60px;height:60px;border-radius:20px;background:linear-gradient(160deg,var(--roxo-s),color-mix(in srgb,var(--roxo) 6%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px color-mix(in srgb,var(--roxo) 16%,transparent)}
.r28-vazio .vazio{max-width:360px;margin:0 auto;line-height:1.5}
.r28-nada{padding:18px;text-align:center}

/* calendário */
.r28-cal{padding:14px 12px 12px;background:radial-gradient(360px 160px at 100% 0%,color-mix(in srgb,var(--roxo) 8%,transparent),transparent 70%),linear-gradient(180deg,var(--card-2),var(--card))}
.r28-cal-t{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.r28-cal-t b{font-size:17px;font-weight:650;letter-spacing:-.02em;text-transform:capitalize}
.r28-cal-t b span{color:var(--mudo);font-weight:500}
.r28-cal-t .icone-b{width:40px;height:40px;border-radius:12px}
.r28-sem,.r28-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.r28-sem span{text-align:center;font:600 11px var(--f);color:var(--mudo);padding:2px 0 4px}
.r28-cel{position:relative;aspect-ratio:1/1.08;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:6px 2px 4px;border:0;border-radius:12px;
  background:transparent;color:var(--fg);cursor:pointer;font:inherit;transition:background var(--t),box-shadow var(--t),transform var(--t)}
.r28-cel.r28-fora{cursor:default}
.r28-cel.r28-tem{background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--roxo) 4%,var(--card)));box-shadow:inset 0 0 0 1px var(--linha),0 1px 2px rgba(22,22,46,.04)}
@media (hover:hover){button.r28-cel:hover{background:color-mix(in srgb,var(--roxo) 7%,var(--card))}}
button.r28-cel:active{transform:scale(.93)}
.r28-n{font:600 13.5px var(--n);font-variant-numeric:tabular-nums;line-height:1}
.r28-cel small{font:600 10px var(--n);color:var(--fg-2);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.r28-pts{display:flex;gap:3px;min-height:6px}
.r28-pts i,.r28-leg i{width:6px;height:6px;border-radius:50%;display:inline-block}
.r28-pts i.ab,.r28-leg i.ab{background:var(--roxo);box-shadow:0 0 6px color-mix(in srgb,var(--roxo) 55%,transparent)}
.r28-pts i.vc,.r28-leg i.vc{background:var(--cr);box-shadow:0 0 6px color-mix(in srgb,var(--cr) 55%,transparent)}
.r28-pts i.pg,.r28-leg i.pg{background:var(--ok)}
.r28-pts i.rc,.r28-leg i.rc{background:#0E9AA7}
.r28-cel.r28-hoje .r28-n{color:var(--roxo);font-weight:700}
.r28-cel.r28-hoje::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--roxo) 60%,transparent);pointer-events:none}
.r28-cel.r28-atraso{background:linear-gradient(180deg,color-mix(in srgb,var(--cr) 7%,var(--card)),var(--card))}
.r28-cel.r28-sel{background:linear-gradient(160deg,#9A5BFF,#6E25E0);color:#fff;box-shadow:0 8px 18px rgba(110,37,224,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.r28-cel.r28-sel .r28-n{color:#fff}.r28-cel.r28-sel small{color:rgba(255,255,255,.85)}
.r28-cel.r28-sel .r28-pts i{box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.r28-leg{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:12px;font-size:12px;color:var(--mudo)}
.r28-leg span{display:flex;align-items:center;gap:6px}

/* fixas */
.r28-fx{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 6px;border:0;border-bottom:1px solid var(--linha);background:none;text-align:left;cursor:pointer;color:var(--fg);border-radius:0;transition:background var(--t)}
.r28-fx:last-child{border-bottom:0}
@media (hover:hover){.r28-fx:hover{background:color-mix(in srgb,var(--c) 5%,transparent)}}
.r28-fx:active{background:color-mix(in srgb,var(--c) 9%,transparent)}
.r28-var{display:flex;align-items:center;gap:4px}
.r28-var svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r28-pref h2{margin-bottom:8px}
.r28-pref-t{display:flex;align-items:center;gap:8px}
.r28-pref-t svg,.r28-dica svg,.r28-bi{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.r28-pref-t svg{color:var(--roxo)}

/* interruptor */
.r28-tog{display:flex;align-items:flex-start;gap:12px;padding:12px 0 2px;cursor:pointer;position:relative}
.r28-tog input{position:absolute;opacity:0;width:1px;height:1px}
.r28-tog-i{flex:none;width:44px;height:26px;border-radius:999px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--linha-2),inset 0 1px 3px rgba(22,22,46,.1);position:relative;transition:background var(--t)}
.r28-tog-i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(22,22,46,.25);transition:transform var(--t)}
.r28-tog input:checked+.r28-tog-i{background:linear-gradient(160deg,#9A5BFF,#6E25E0);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.r28-tog input:checked+.r28-tog-i::after{transform:translateX(18px)}
.r28-tog input:focus-visible+.r28-tog-i{outline:2px solid var(--roxo);outline-offset:2px}
.r28-tog input:disabled+.r28-tog-i{opacity:.5}
.r28-tog b{display:block;font-size:14px;font-weight:600}.r28-tog small{display:block;color:var(--mudo);font-size:12.5px;line-height:1.4;margin-top:1px}

/* folhas */
.r28-modelos{flex:none;display:flex;gap:8px;overflow-x:auto;margin:0 -18px;padding:2px 18px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
.r28-modelos::-webkit-scrollbar{display:none}
.r28-mod{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:82px;padding:10px 6px;border:0;border-radius:16px;cursor:pointer;font:600 12px var(--f);color:var(--fg-2);
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--linha);scroll-snap-align:start;transition:box-shadow var(--t),transform var(--t),background var(--t);text-align:center;line-height:1.2}
.r28-mod .fx-ic{width:36px;height:36px;border-radius:12px}
.r28-mod .fx-ic svg{width:19px;height:19px}
.r28-mod[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 10%,var(--card));box-shadow:inset 0 0 0 1.5px var(--c);color:var(--fg)}
.r28-mod:active{transform:scale(.94)}
.r28-dica{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:14px;background:var(--at-s);color:var(--fg);font-size:13px;line-height:1.45;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--at) 22%,transparent)}
.r28-dica svg{color:var(--at);margin-top:1px}
.r28-modo{flex:none;border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.r28-modo legend{padding:0 0 4px;font-weight:600}
.r28-modo label{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:14px;cursor:pointer;background:var(--bg);box-shadow:inset 0 0 0 1px var(--linha);transition:box-shadow var(--t),background var(--t)}
.r28-modo label:has(input:checked){background:color-mix(in srgb,var(--roxo) 7%,var(--card));box-shadow:inset 0 0 0 1.5px var(--roxo)}
.r28-modo input{accent-color:var(--roxo);width:18px;height:18px;margin:2px 0 0;flex:none}
.r28-modo b{display:block;font-size:14px;font-weight:600}.r28-modo small{display:block;color:var(--mudo);font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.r28-link{border:0;background:none;color:var(--roxo);font:600 13.5px var(--f);cursor:pointer;padding:8px 0;align-self:center}
.r28-pago-c{display:flex;align-items:center;gap:14px;padding:6px 0}
.r28-pago-c .r28-ok{width:48px;height:48px;margin:0}
.r28-pago-c b{display:block;font:650 24px var(--n);letter-spacing:-.03em}
.r28-pago-c small{color:var(--mudo);font-size:13px}
#folha .btn.sec{display:flex;align-items:center;justify-content:center;gap:8px}

/* aviso no Início */
.r28-lem{--tom:var(--at);position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:14px 14px 8px;
  background:radial-gradient(260px 140px at 0% 0%,color-mix(in srgb,var(--tom) 14%,transparent),transparent 70%),linear-gradient(180deg,var(--card-2),var(--card));
  box-shadow:var(--sombra),0 0 0 1px color-mix(in srgb,var(--tom) 22%,var(--linha))}
.r28-lem::after{content:"";position:absolute;z-index:-1;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tom) 60%,transparent),transparent)}
.r28-lem.r28-lem-cr{--tom:var(--cr)}
.r28-lem-t{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.r28-lem-t>div{flex:1;min-width:0}
.r28-lem-t b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em}
.r28-lem-t small{color:var(--mudo);font-size:12.5px}
.r28-lem-t a{font:600 13px var(--f);color:var(--roxo);text-decoration:none;padding:10px 2px;white-space:nowrap}
.r28-sino{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;color:var(--tom);
  background:linear-gradient(160deg,color-mix(in srgb,var(--tom) 24%,transparent),color-mix(in srgb,var(--tom) 9%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px color-mix(in srgb,var(--tom) 20%,transparent)}
.r28-sino svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:r28-sino 1.6s cubic-bezier(.3,.7,.3,1) .4s 1 both;transform-origin:50% 8%}
@keyframes r28-sino{0%,100%{transform:none}15%{transform:rotate(12deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(6deg)}60%{transform:rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.r28-sino svg,.r28-prog i{animation:none}}
.r28-lem-l{display:flex;flex-direction:column}
.r28-lem-i{display:flex;align-items:center;gap:10px;min-height:58px;padding:6px 0;border-top:1px solid var(--linha);transition:opacity 200ms,transform 200ms}
.r28-lem-i.r28-sai{opacity:0;transform:translateX(24px)}
.r28-lem-i>b{font:650 14.5px var(--n);letter-spacing:-.02em;font-variant-numeric:tabular-nums;flex:none}
.r28-lem-i.r28-cr .t small{color:var(--cr);font-weight:600}.r28-lem-i.r28-at .t small{color:var(--at);font-weight:600}
.r28-lem-i .r28-ok{width:38px;height:38px;margin:0}
.r28-x{flex:none;width:32px;height:38px;border:0;background:none;color:var(--mudo);cursor:pointer;border-radius:10px;display:grid;place-items:center;transition:color var(--t),background var(--t)}
.r28-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (hover:hover){.r28-x:hover{color:var(--fg);background:var(--bg-2)}}
.r28-lem-mais{display:block;text-align:center;font:600 12.5px var(--f);color:var(--roxo);text-decoration:none;padding:10px 0 6px;border-top:1px solid var(--linha)}

/* esconder valores: o calendário segue a mesma regra do resto do app */
.oculto .r28-cel small.esconde{filter:blur(5px)}

@media (max-width:380px){.r28-cel small{font-size:9px}.r28-v b{font-size:14px}.r28-it-a{gap:10px}}
@media (min-width:700px){.r28-cel{aspect-ratio:auto;min-height:62px}}