/* ===== v4.5 — Identidade visual: escudo + anel de plantão (azul-marinho e dourado) ===== */
:root{--grad-brand:linear-gradient(135deg,#3B82E6 0%,#1F4FA3 100%);--ease:cubic-bezier(.2,.8,.2,1);--gold-soft:#FFE08A}
[data-theme="light"]{--grad-brand:linear-gradient(135deg,#2F6BC4 0%,#12365F 100%)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ringPop{from{opacity:0;transform:scale(.82) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes spinIn{from{transform:rotate(-90deg) scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes dayPop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes shine{0%,70%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes fabPulse{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.4)}}
@keyframes badgePop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* fundo: brilho suave de marca (fixo, sem repintura) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(760px 380px at 8% -6%,color-mix(in srgb,var(--brand) 42%,transparent),transparent 70%),radial-gradient(520px 300px at 100% 0,color-mix(in srgb,var(--gold) 10%,transparent),transparent 70%)}
[data-theme="light"] body::before{background:radial-gradient(760px 380px at 8% -6%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),radial-gradient(520px 300px at 100% 0,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%)}

/* ícones SVG */
.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;margin-right:.4em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.i .d{fill:currentColor;fill-opacity:.2;stroke:none}
.tc-normal{color:var(--normal)}.tc-ras{color:var(--ras)}.tc-especial{color:var(--especial)}.tc-ok{color:var(--ok)}.tc-warn{color:var(--warn)}
.seg-btn.on .i,.seg-btn.active .i,.btn.primary .i{color:currentColor}.seg-btn.active{color:#fff}
.badge .i{width:1.1em;height:1.1em;margin-right:.3em;vertical-align:-.18em}
.legend .i{margin-right:.1em}
.card h3{display:flex;align-items:center}.card h3 .i{width:18px;height:18px;margin-right:8px}
.modal h2 .i{width:.85em;height:.85em;margin-right:.35em;vertical-align:-.05em}
.day .ico{display:inline-flex}.day .ico .i{width:13px;height:13px;margin:0}
.da{display:inline-flex}.da .i{width:12px;height:12px;margin:0}
.greet-ras .i{width:1em;height:1em;margin-right:.3em}
.pay-line .i{width:1.05em;height:1.05em;color:var(--ok)}
.bar-row .i{width:1.05em;height:1.05em;margin-right:.35em}
.bar-row span .i{vertical-align:-.15em}

/* topo e logo */
.logo{width:52px;height:52px;border-radius:16px;background:none;overflow:hidden;position:relative;font-size:0;box-shadow:0 8px 20px -6px color-mix(in srgb,var(--brand) 75%,#000),0 0 0 1px #ffffff1f}
.logo svg{width:100%;height:100%;display:block}
.logo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;background:linear-gradient(90deg,transparent,#ffffff4d,transparent);animation:shine 7s ease-in-out 2.4s infinite;pointer-events:none}
.greet h1{background:linear-gradient(90deg,var(--text) 40%,color-mix(in srgb,var(--accent) 65%,var(--text)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:2px}
.icon-btn{transition:transform .15s var(--ease),border-color .2s,background .2s}.icon-btn:active{transform:scale(.92)}
@media(hover:hover){.icon-btn:hover{border-color:var(--accent)}}

/* títulos de seção com barra de marca */
.section-head>div:first-child{position:relative;padding-left:14px;min-width:0}
.section-head>div:first-child::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:5px;border-radius:99px;background:linear-gradient(180deg,var(--gold-soft),var(--gold))}

/* cartões */
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 50%,var(--panel)),var(--panel));border-color:color-mix(in srgb,var(--line) 80%,var(--accent));box-shadow:var(--shadow),inset 0 1px 0 #ffffff0f}
[data-theme="light"] .card{box-shadow:var(--shadow),inset 0 1px 0 #fff}
.pay-big{background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 55%,var(--gold)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.kpi.next{border-left-width:5px}

/* botões */
.btn{transition:transform .15s var(--ease),filter .15s,box-shadow .2s,border-color .2s}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.primary{background:var(--grad-brand);border-color:transparent;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--brand) 90%,transparent),inset 0 1px 0 #ffffff38}
.btn.small .i{width:1.05em;height:1.05em}

/* calendário */
.day{transition:border-color .15s,transform .15s var(--ease),background .2s}
.day:active{transform:scale(.95)}
.day.today{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.day.today .dn{background:var(--grad-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.day.selected{animation:dayPop .3s var(--ease);box-shadow:0 0 0 1px var(--accent),0 8px 18px -10px var(--accent)}

/* menu flutuante */
.fab{position:relative;background:var(--grad-brand);box-shadow:0 10px 24px -6px #0b2a5cb3,0 0 0 3px var(--bg),0 0 0 5px color-mix(in srgb,var(--gold) 70%,transparent)}
.fab::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:fabPulse 3.4s ease-out 3s infinite;pointer-events:none}
.fab-wrap.is-open .fab::after{animation:none}
.fab .ic-menu,.fab .ic-close{animation:spinIn .28s var(--ease)}
.bubble .ico{background:color-mix(in srgb,var(--c,#12365F) 13%,#fff);color:var(--c,#12365F)}
.bubble[aria-current="page"] .ico{background:var(--c,#12365F);color:#fff;box-shadow:0 4px 10px -3px var(--c,#12365F)}
.bubble[data-page="home"]{--c:#2F6BC4}.bubble[data-page="register"]{--c:#3F6FD6}.bubble[data-page="rasr"]{--c:#C98A0B}
.bubble[data-page="pay"]{--c:#14996A}.bubble[data-page="fines"]{--c:#D9770F}.bubble[data-page="stats"]{--c:#8A52D6}.bubble[data-menu="settings"]{--c:#5A6B80}
.bubble .bd{animation:badgePop .35s var(--ease)}

/* entrada das páginas e das barras (só ao trocar de página — não repete nas atualizações) */
.page.active>*{animation:rise .42s var(--ease) both}
.page.active>*:nth-child(2){animation-delay:.04s}.page.active>*:nth-child(3){animation-delay:.08s}.page.active>*:nth-child(4){animation-delay:.12s}
.page.active>*:nth-child(5){animation-delay:.16s}.page.active>*:nth-child(n+6){animation-delay:.2s}
.fx-in .bar-fill,.fx-in .track>i{transform-origin:left center;animation:grow .7s var(--ease) .1s both}
.fx-in .ring{animation:ringPop .6s var(--ease) both}

/* splash de abertura */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;color:#fff;background:radial-gradient(120% 90% at 28% 8%,#1f5299 0%,#0B1626 62%);animation:splashOut .5s ease 1.7s forwards}
#splash.out{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
.no-splash #splash{display:none}
@keyframes splashOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.sp-in{display:grid;justify-items:center;gap:8px;padding-bottom:6vh}
.sp-mark{width:132px;height:132px;filter:drop-shadow(0 14px 34px #4c8dff70)}
.sp-mark svg{width:100%;height:100%;display:block}
.sp-mark .lg-ring{stroke-dasharray:100;stroke-dashoffset:100;animation:ringDraw .95s cubic-bezier(.3,.7,.2,1) .15s forwards}
.sp-mark .lg-shield{animation:fadeIn .5s ease .4s both}
.sp-mark .lg-star{transform-box:fill-box;transform-origin:center;animation:starPop .6s cubic-bezier(.2,1.3,.3,1) .75s both}
.sp-mark .lg-dot{animation:fadeIn .3s ease 1.05s both}
.sp-name{font:700 34px/1 var(--font-display);letter-spacing:.02em;margin-top:14px;animation:rise .5s var(--ease) .9s both}
.sp-name b{color:var(--gold)}
.sp-sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#9fb4d0;animation:rise .5s var(--ease) 1.05s both}
@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes starPop{from{opacity:0;transform:scale(.2) rotate(-90deg)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){#splash{display:none!important}.logo::after,.fab::after{display:none}}