/* evita a página "pular" para o lado quando a barra de rolagem some/aparece */
@media (min-width:900px){html{scrollbar-gutter:stable;overflow-y:scroll}}
/* ===== Movimento da agenda ===== */
/* estado do dia vindo do cache (evita o calendário piscar enquanto carrega) */
.mday.c-livre{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(246,239,221,.75))}
.mday.c-lotado{background:linear-gradient(180deg,rgba(248,229,227,.95),rgba(240,210,205,.8));color:#7A2323}
.mday.c-fechado,.mday.c-bloqueado{background:repeating-linear-gradient(135deg,rgba(239,236,234,.9) 0 6px,rgba(228,224,220,.9) 6px 12px);color:#8A817C;box-shadow:none}
.mday.on{background:var(--gold-glass);color:var(--ink)}
/* passar o mouse: destaca sem mexer o lugar */
@media (hover:hover){.mday:not(.on):hover{border-color:rgba(201,162,77,.75);box-shadow:0 4px 16px rgba(201,162,77,.28);background:linear-gradient(180deg,#fff,rgba(246,239,221,.95))}.mday.out:hover,.mday.past:hover{opacity:.85}}

/* esqueleto enquanto carrega o dia */
.skel{display:flex;flex-direction:column;gap:10px}
.skel i{display:block;height:34px;border-radius:12px;background:linear-gradient(90deg,rgba(31,27,26,.045) 0%,rgba(201,162,77,.14) 40%,rgba(31,27,26,.045) 80%);background-size:300% 100%;animation:skel 1.3s ease-in-out infinite}
.skel i:nth-child(2){width:86%}.skel i:nth-child(3){height:70px}.skel i:nth-child(4){width:72%}.skel i:nth-child(5){width:90%}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-50% 0}}

@media (prefers-reduced-motion:no-preference){
  .mday{transition:box-shadow .35s ease,background .35s ease,border-color .35s ease,opacity .35s ease}
  .mday:active{transform:none}
  .m-keep .mday.on{animation:mGlow .45s ease-out}

  /* entrada da tela e troca de mês */
  .m-enter .mday{animation:mIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 9ms)}
    .m-next .mgrid .mday{animation:mNext .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 5ms)}
  .m-prev .mgrid .mday{animation:mPrev .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc((41 - var(--i)) * 5ms)}
  .m-next .cal h1,.m-prev .cal h1{animation:fadeUp .4s cubic-bezier(.2,.8,.2,1) both}

  /* painel do dia */
  .dia-in>.col:first-child{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
  .m-keep .dia-in>.col:first-child{animation:fadeIn .35s ease both}
  .dstats-in>div{animation:floatUp .6s cubic-bezier(.2,.8,.2,1) both}
  .dstats-in>div:nth-child(2){animation-delay:.07s}.dstats-in>div:nth-child(3){animation-delay:.14s}
  .cascade .tl-row{animation:rowIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 16ms)}
  .cascade .ev,.cascade .tl-bl{animation:floatUp .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(160ms + var(--j) * 80ms)}
  .cascade .ev{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
  .cascade .ev:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,27,26,.12)}
  .cascade>.empty,.cascade>h2,.cascade .slot{animation:floatUp .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--j) * 70ms)}
  .tl-now{animation:fadeIn .6s ease .5s both}
}
@keyframes mIn{from{opacity:0;transform:translateY(8px) scale(.94)}}
@keyframes mNext{from{opacity:0;transform:translateX(18px)}}
@keyframes mPrev{from{opacity:0;transform:translateX(-18px)}}
@keyframes mGlow{from{opacity:.55}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes rowIn{from{opacity:0;transform:translateX(-6px)}}
@keyframes floatUp{from{opacity:0;transform:translateY(6px)}}

/* ===== Menu lateral no computador ===== */
.nav-brand{display:none}
@media (min-width:900px){
  body:has(.nav){padding-left:232px}
  .nav{top:0;right:auto;width:232px;height:100vh;padding:28px 16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;border-top:none;border-right:1px solid var(--line);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .nav a{position:relative;flex-direction:row;justify-content:flex-start;gap:12px;height:46px;padding:0 14px;border-radius:12px;font-size:15px;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
  .nav a::before{content:'';position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:3px;background:var(--gold);transform:scaleY(0);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
  .nav a svg{width:20px;height:20px;flex-shrink:0;transition:color .3s ease,filter .3s ease}
  .nav a:hover{background:rgba(201,162,77,.12);color:var(--ink)}
  .nav a:hover::before{transform:scaleY(1);opacity:1}
  .nav a:hover svg{color:var(--gold-ink);filter:drop-shadow(0 2px 6px rgba(201,162,77,.45))}
  .nav a.on{background:var(--gold-glass);color:var(--ink);box-shadow:var(--gold-shadow)}
  .nav a.on::before{display:none}
  .nav a:active{background:rgba(201,162,77,.22)}
  .nav-brand{display:flex;align-items:center;min-height:56px;padding:0 10px 22px;margin-bottom:10px;border-bottom:1px solid var(--line)}
  .nav-brand{justify-content:center}
  .nav-brand img{width:180px;height:76px;object-fit:contain}
  .nav-brand span{font-size:16px;font-weight:800;color:var(--ink);line-height:1.25}
  body:has(.nav) .fab{right:max(20px,calc(50% - 376px))}
  body.wide:has(.nav) .fab{right:max(24px,calc(50% - 682px))}
}

/* entrada do menu (só na primeira vez) e troca suave entre telas */
@media (prefers-reduced-motion:no-preference){
  @media (min-width:900px){
    .nav.nav-in{animation:navIn .6s cubic-bezier(.2,.8,.2,1) both}
    .nav.nav-in a,.nav.nav-in .nav-brand{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
    .nav.nav-in .nav-brand{animation-delay:.1s}
    .nav.nav-in a:nth-of-type(1){animation-delay:.16s}.nav.nav-in a:nth-of-type(2){animation-delay:.21s}.nav.nav-in a:nth-of-type(3){animation-delay:.26s}.nav.nav-in a:nth-of-type(4){animation-delay:.31s}
  }
  .scr-in{animation:fadeUp .38s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes navIn{from{opacity:0;transform:translateX(-16px)}}

/* ===== Financeiro: painel aparecendo ===== */
.fin-skel{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.fin-skel i{display:block;height:120px;border-radius:18px;background:linear-gradient(90deg,rgba(31,27,26,.05) 0%,rgba(201,162,77,.16) 40%,rgba(31,27,26,.05) 80%);background-size:300% 100%;animation:skel 1.3s ease-in-out infinite}
.fin-skel i.h{background:linear-gradient(90deg,#2a2422 0%,#4a3d2c 40%,#2a2422 80%);background-size:300% 100%}
.fin-skel i.l{height:56px;border-radius:14px}
@media (min-width:900px){
  #app:has(.fin-skel){max-width:1180px}
  .fin-skel{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 24px}
  .fin-skel i{height:240px}.fin-skel i.l{height:64px}.fin-skel i.l:nth-child(4){grid-column:1}.fin-skel i.l:nth-child(5),.fin-skel i.l:nth-child(6){grid-column:2/4}
}
@media (prefers-reduced-motion:no-preference){
  .fin-in>.fin-head{animation:fadeIn .4s ease both}
  .fin-in>.fin-acts{animation:fadeIn .4s ease .1s both}
  .fin-in>.fin-hero{animation:finCard .7s cubic-bezier(.2,.8,.2,1) .05s both}
  .fin-in>.fin-fat{animation:finCard .7s cubic-bezier(.2,.8,.2,1) .15s both}
  .fin-in>.fin-stats>.stat:nth-child(1){animation:finCard .7s cubic-bezier(.2,.8,.2,1) .25s both}
  .fin-in>.fin-stats>.stat:nth-child(2){animation:finCard .7s cubic-bezier(.2,.8,.2,1) .33s both}
  .fin-in>.fin-proc{animation:finCard .7s cubic-bezier(.2,.8,.2,1) .4s both}
  .fin-in>.fin-mov{animation:finCard .7s cubic-bezier(.2,.8,.2,1) .46s both}
  .fin-in .fin-fat .bar>div{animation:barGrow 1.2s cubic-bezier(.2,.8,.2,1) .45s both}
  .fin-in .fin-proc .bar>div{animation:barGrow 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.55s + var(--j) * 90ms)}
  .fin-in .fin-mov .li{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.55s + var(--j) * 45ms)}
  .fin-in2 .fin-mov .li{animation:fadeUp .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--j) * 35ms)}
  .fin-hero>strong{display:inline-block;font-variant-numeric:tabular-nums}
  .fin-fat>strong,.fin-stats .stat strong{font-variant-numeric:tabular-nums}
  @media (hover:hover){
    .fin-hero,.fin-fat,.fin-stats .stat,.fin-proc>.list{transition:box-shadow .3s ease,border-color .3s ease}
    .fin-fat:hover,.fin-stats .stat:hover,.fin-proc>.list:hover{box-shadow:0 10px 30px rgba(201,162,77,.18);border-color:rgba(201,162,77,.45)}
    .fin-hero:hover{box-shadow:0 14px 36px rgba(31,27,26,.28)}
    .fin-mov .li{transition:background .25s ease}
    .fin-mov .li:hover{background:rgba(201,162,77,.07)}
  }
}
@keyframes finCard{from{opacity:0;transform:translateY(14px)}}
@keyframes barGrow{from{transform:scaleX(0)}}
.bar>div{transform-origin:left center}