/* BUYPLAN — camada de movimento. Leve: só CSS + um script pequeno, sem biblioteca. */
:root { --bp-ease: cubic-bezier(.2,.7,.2,1); --bp-rapido: .18s; --bp-medio: .32s; --bp-lento: .6s; }

/* 1. Entrada da página: cartões sobem em cascata (uma vez, só no carregamento) */
.cartao, .kpi, .etapa { animation: bp-subir var(--bp-lento) var(--bp-ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes bp-subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.topo h1 { animation: bp-subir .45s var(--bp-ease) both; }
.topo .sub { animation: bp-subir .45s var(--bp-ease) .06s both; }

/* 2. Barra de progresso no topo durante a navegação */
#bp-progresso { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--bp-verde-salvia), var(--bp-verde-plan), var(--bp-verde-petroleo)); z-index: 9999; opacity: 0; transition: width .25s ease, opacity .3s ease; border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(82,164,128,.5); }
#bp-progresso.ativo { opacity: 1; }

/* 3. Sobreposição de carregamento com o símbolo (só aparece se demorar mais de 350 ms) */
#bp-carregando { position: fixed; inset: 0; background: rgba(243,244,241,.72); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#bp-carregando.ativo { opacity: 1; pointer-events: auto; }
#bp-carregando .simbolo { width: 56px; height: 56px; animation: bp-flutuar 1.4s var(--bp-ease) infinite; filter: drop-shadow(0 8px 16px rgba(15,77,74,.25)); }
#bp-carregando p { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--bp-verde-petroleo); }
@keyframes bp-flutuar { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-6deg); } }

/* 4. Botões: elevação no hover, afunda no clique, estado de carregando com spinner */
.botao { transition: transform var(--bp-rapido) var(--bp-ease), box-shadow var(--bp-rapido) var(--bp-ease), background var(--bp-rapido) ease; position: relative; overflow: hidden; }
.botao:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(15,77,74,.45); }
.botao:active { transform: translateY(0) scale(.98); box-shadow: none; }
.botao.leve:hover { box-shadow: 0 6px 14px -8px rgba(31,41,51,.3); }
.botao.carregando { pointer-events: none; color: transparent !important; }
.botao.carregando::after { content: ""; position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); left: calc(50% - 8px); border-radius: 99px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: bp-girar .7s linear infinite; }
.botao.leve.carregando::after { border-color: rgba(15,77,74,.25); border-top-color: var(--bp-verde-petroleo); }
@keyframes bp-girar { to { transform: rotate(360deg); } }
.botao::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.35), transparent 60%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.botao:hover::before { opacity: 1; }

/* 5. Menu lateral: deslize suave, indicador do item ativo */
.menu a { transition: background var(--bp-rapido) ease, color var(--bp-rapido) ease, transform var(--bp-rapido) var(--bp-ease); }
.menu a:hover { transform: translateX(2px); }
.menu a.ativo { animation: bp-ativo .35s var(--bp-ease); }
@keyframes bp-ativo { from { transform: scale(.97); } to { transform: none; } }
.menu a svg { transition: transform var(--bp-rapido) var(--bp-ease); }
.menu a:hover svg { transform: scale(1.12); }
.badge { animation: bp-pop .4s var(--bp-ease) .5s both; }
@keyframes bp-pop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } to { transform: none; opacity: 1; } }

/* 6. Cartões e tabelas */
.cartao { transition: box-shadow var(--bp-medio) ease, border-color var(--bp-medio) ease; }
.cartao:hover { border-color: #D6DAD3; box-shadow: 0 10px 30px -18px rgba(15,77,74,.35); }
.cartao.escuro:hover { box-shadow: 0 14px 34px -14px rgba(5,34,31,.6); }
.tab tbody tr, .tab tr { transition: background var(--bp-rapido) ease; }
.tab tr:hover td { background: #F6F9F5; }
.tab tr.urgente:hover td { background: #FFF1E6; }
.tab td a { transition: color var(--bp-rapido) ease; } .tab td a:hover { color: var(--bp-verde-petroleo); text-decoration: underline; text-underline-offset: 3px; }

/* 7. Barras de progresso e gráficos crescem ao aparecer */
.barra > i { transition: width var(--bp-lento) var(--bp-ease); }
.barra.bp-zero > i { width: 0 !important; }
.serie > div { transition: height var(--bp-lento) var(--bp-ease); transform-origin: bottom; }
.serie.bp-zero > div { height: 0 !important; }
.serie > div:hover { filter: brightness(1.08); }
svg path.bp-tracar { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); animation: bp-tracar 1.1s var(--bp-ease) .15s forwards; }
@keyframes bp-tracar { to { stroke-dashoffset: 0; } }
svg rect.bp-crescer { transform-origin: bottom; transform: scaleY(0); animation: bp-crescer .6s var(--bp-ease) both; animation-delay: calc(var(--i, 0) * 40ms + .2s); transform-box: fill-box; }
@keyframes bp-crescer { to { transform: scaleY(1); } }

/* 8. Etiquetas e tarefas */
.tag.vermelho { animation: bp-pulsar 2.2s ease-in-out infinite; }
@keyframes bp-pulsar { 0%,100% { box-shadow: 0 0 0 0 rgba(214,69,48,.35); } 50% { box-shadow: 0 0 0 5px rgba(214,69,48,0); } }
.tarefa { transition: opacity var(--bp-medio) ease, transform var(--bp-medio) var(--bp-ease), max-height var(--bp-medio) ease; }
.tarefa.bp-saindo { opacity: 0; transform: translateX(16px); }
.tarefa .prio { transition: transform var(--bp-rapido) var(--bp-ease); } .tarefa:hover .prio { transform: scale(1.4); }
.abc { transition: transform var(--bp-rapido) var(--bp-ease); } tr:hover .abc { transform: scale(1.1); }
.etapa { transition: transform var(--bp-medio) var(--bp-ease), box-shadow var(--bp-medio) ease; }
.etapa.atual { animation: bp-subir var(--bp-lento) var(--bp-ease) both, bp-brilho 2.4s ease-in-out 1s infinite; }
@keyframes bp-brilho { 0%,100% { box-shadow: 0 0 0 0 rgba(15,77,74,.35); } 50% { box-shadow: 0 0 0 6px rgba(15,77,74,0); } }

/* 9. Formulários */
input, select, textarea { transition: border-color var(--bp-rapido) ease, box-shadow var(--bp-rapido) ease, transform var(--bp-rapido) ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(122,193,168,.25); outline: none; border-color: var(--bp-verde-salvia); }
.aviso { animation: bp-aviso .5s var(--bp-ease) both; }
@keyframes bp-aviso { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.filtros a { transition: background var(--bp-rapido) ease, color var(--bp-rapido) ease, transform var(--bp-rapido) var(--bp-ease); }
.filtros a:hover { transform: translateY(-1px); }

/* 10. Números que contam */
.indicador .valor { font-variant-numeric: tabular-nums; }

/* 11. Login */
.login-form img { animation: bp-subir .6s var(--bp-ease) both; }
.login-form h1, .login-form .campo, .login-form .botao { animation: bp-subir .5s var(--bp-ease) both; }
.login-form h1 { animation-delay: .1s } .login-form .campo:nth-of-type(1) { animation-delay: .18s } .login-form .campo:nth-of-type(2) { animation-delay: .26s } .login-form .botao { animation-delay: .34s }
.login-lado h2 { animation: bp-subir .7s var(--bp-ease) .2s both; } .login-lado p { animation: bp-subir .7s var(--bp-ease) .35s both; }
.login-lado::after { animation: bp-deriva 18s ease-in-out infinite alternate; }
@keyframes bp-deriva { from { transform: scale(1) translate(0,0); } to { transform: scale(1.08) translate(-2%, 2%); } }

/* 12. Acessibilidade: quem pediu menos movimento, não recebe movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .barra.bp-zero > i, .serie.bp-zero > div { width: revert !important; height: revert !important; }
}