/* ======================================================================
   RELEVO — a luz da interface.

   Uma fonte de luz so, quente, no alto a esquerda. Cada superficie recebe
   um fio de luz em cima, sombra embaixo e sombra projetada no que esta por
   tras; o que se aperta afunda; o que esta ativo ganha aro de ouro. Tudo
   com sombra, gradiente e transformacao — nada de filtro por quadro, para
   o celular nao esquentar.

   Telas grandes: a partir de 1500 px a tipografia e as colunas crescem; a
   partir de 2000 px de largura CSS (4K a 100%, 5K) o app inteiro ganha
   escala, porque o layout em pixel de 2019 nao foi feito para isso. DPR
   alto ja e nitido em tudo (SVG, fontes, canvas em ate 2x).

   Este arquivo carrega por ultimo e so ACRESCENTA: cores, espacos e
   tamanhos continuam onde sempre estiveram.
   ====================================================================== */
:root{
  --luz:rgba(236,231,218,.10);
  --luz-fraca:rgba(236,231,218,.045);
  --breu:rgba(0,0,0,.42);
  --aro-ouro:rgba(209,171,116,.45);
  --relevo-placa:inset 0 1px 0 var(--luz),inset 1px 0 0 var(--luz-fraca),inset 0 -1px 0 var(--breu),
                 0 1px 0 rgba(0,0,0,.35),0 18px 40px -22px rgba(0,0,0,.9),0 46px 90px -52px rgba(0,0,0,.95);
  --relevo-pill:inset 0 1px 0 var(--luz),inset 0 -1px 0 var(--breu),0 8px 22px -12px rgba(0,0,0,.9);
  --relevo-afundado:inset 0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(0,0,0,.2);
  --mola:cubic-bezier(.22,1.4,.36,1);       /* um sobressalto curto: mola, nao ease */
}

/* ------------------------------------------------------------ placas */
.fin-card,.card,.vazio-bloco,.cal-det,.cal-dia-lista,.cal-dia-vazio,.bolha-capacidade{
  box-shadow:var(--relevo-placa);
  background-image:linear-gradient(135deg,var(--luz-fraca),rgba(236,231,218,0) 42%),var(--lamina)}
.fin-card.fin-resumo{box-shadow:var(--relevo-placa),inset 0 0 0 1px rgba(236,231,218,.02)}
.ferr-cartao,.ferr-cartao-chat,.ferr-caixa,.mais-menu,.fin-tip{box-shadow:var(--relevo-placa)}
#lateral{box-shadow:inset -1px 0 0 var(--luz-fraca),24px 0 60px -40px rgba(0,0,0,.9)}
.cal-grade,.cal-sem{box-shadow:inset 0 1px 0 var(--luz-fraca),0 1px 0 rgba(0,0,0,.35),0 30px 70px -44px rgba(0,0,0,.95)}
.cal-dia,.cal-sem-col{box-shadow:inset 0 1px 0 rgba(236,231,218,.035),inset 0 -1px 0 rgba(0,0,0,.28)}
.cal-dia.hoje,.cal-sem-col.hoje{box-shadow:inset 0 0 0 1px var(--aro-ouro),inset 0 1px 0 rgba(236,231,218,.08),
    inset 0 -18px 34px -22px rgba(209,171,116,.4)}

/* ------------------------------------------------------------ o que se aperta */
.fin-btn,.cal-nav button,.cal-vistas button,.fin-nav,.fin-seg,.acao,#btnLateral,#btnConfigLateral,#btnDocsLateral,
.cal-det-acoes button,.cal-edicao-acoes button,.mais-menu button,.fin-status,.fin-link{
  transition:transform .4s var(--mola),box-shadow .25s var(--suave),background .3s var(--suave),
             color .3s var(--suave),border-color .3s var(--suave),filter .3s var(--suave)}
.fin-btn,.cal-nav button,.cal-vistas button.ativo,.fin-seg.ativo,.acao,#btnLateral,#btnConfigLateral,#btnDocsLateral,
.cal-det-acoes button,.cal-edicao-acoes button{
  box-shadow:inset 0 1px 0 var(--luz-fraca),inset 0 -1px 0 rgba(0,0,0,.28)}
.fin-btn:active,.acao:active,.cal-nav button:active,.cal-vistas button:active,.fin-nav:active,.fin-seg:active,
#btnLateral:active,#btnConfigLateral:active,#btnDocsLateral:active,.cal-det-acoes button:active,.cal-edicao-acoes button:active,
.mais-menu button:active{transform:translateY(1px) scale(.985);box-shadow:var(--relevo-afundado)}
nav button{transition:color .3s var(--suave),transform .4s var(--mola)}
nav button:active{transform:scale(.96)}

/* ouro: o botao principal e uma placa de metal com bisel */
.fin-primario,.fin-primario:hover,.cal-det-acoes .cal-primario,.cal-det-acoes .cal-primario:hover,.cal-edicao-acoes .cal-primario,.acao-enviar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(90,60,20,.42),0 1px 0 rgba(0,0,0,.4),
             0 10px 26px -10px rgba(209,171,116,.75)}
.fin-primario:active,.cal-det-acoes .cal-primario:active,.cal-edicao-acoes .cal-primario:active,.acao-enviar:active{
  transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 5px rgba(60,40,10,.55),inset 0 -1px 0 rgba(255,255,255,.15)}

/* navegacao: a pilula tem corpo, o marcador de ouro flutua com mola */
nav{box-shadow:var(--relevo-pill)}
.nav-indicador{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.35),0 4px 12px -4px rgba(0,0,0,.7),
    0 0 0 1px var(--aro-ouro);transition-timing-function:var(--mola);transition-duration:.55s}

/* a barra de escrever: afundada na pagina, aro de ouro quando o foco esta nela */
.barra{box-shadow:inset 0 1px 0 var(--luz),inset 0 0 0 1px rgba(0,0,0,.18),0 1px 0 rgba(0,0,0,.3),0 18px 44px -20px rgba(0,0,0,.95);
    transition:box-shadow .35s var(--suave)}
.barra:focus-within{box-shadow:inset 0 1px 0 var(--luz),0 0 0 1px var(--aro-ouro),0 18px 44px -20px rgba(0,0,0,.95),0 0 40px -14px rgba(209,171,116,.45)}

/* o que ele diz e um objeto: vidro com fio de luz e sombra no fundo */
.bolha.user{box-shadow:inset 0 1px 0 var(--luz),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 0 rgba(0,0,0,.3),0 14px 30px -18px rgba(0,0,0,.9);
    background-image:linear-gradient(135deg,var(--luz-fraca),rgba(236,231,218,0) 45%)}

/* compromissos: pedras presas na lamina; ao passar o dedo, sobem */
.cal-ev,.cal-item{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.25);
    transition:transform .4s var(--mola),background .2s var(--suave),box-shadow .25s var(--suave)}
.cal-ev:hover,.cal-item:hover{transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px -8px rgba(0,0,0,.8),0 0 14px -6px var(--cor)}
.cal-ev:active,.cal-item:active{transform:translateY(0) scale(.99)}

/* toasts e avisos */
.toast{box-shadow:var(--relevo-placa);animation:toastRelevo .55s var(--mola)}
@keyframes toastRelevo{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ movimento */
/* Entrada de aba e de bolha: vem de um pouco abaixo, inclinada como uma
   lamina que assenta (rotateX curto), e o desfoque some antes do fim. */
@keyframes abaNoite{
  from{opacity:0;transform:perspective(1400px) translateY(14px) rotateX(2.5deg) scale(.992)}
  to{opacity:1;transform:none}}
@keyframes surgeNoite{
  from{opacity:0;transform:perspective(1200px) translateY(14px) rotateX(4deg)}
  to{opacity:1;transform:none}}
/* Os cartoes de uma aba recem-aberta sobem em escada (a classe .recem dura
   um segundo, posta por trocarAba: redesenhos por filtro nao reanimam). */
.aba.recem .fin-card,.aba.recem .card,.aba.recem .ferr-cartao,.aba.recem .vazio-bloco{animation:surgePainel .75s var(--suave) both}
.aba.recem .fin-card:nth-child(2),.aba.recem .card:nth-child(2),.aba.recem .ferr-cartao:nth-child(2){animation-delay:.06s}
.aba.recem .fin-card:nth-child(3),.aba.recem .card:nth-child(3),.aba.recem .ferr-cartao:nth-child(3){animation-delay:.12s}
.aba.recem .fin-card:nth-child(4),.aba.recem .card:nth-child(4),.aba.recem .ferr-cartao:nth-child(4){animation-delay:.18s}
.aba.recem .fin-card:nth-child(n+5),.aba.recem .card:nth-child(n+5),.aba.recem .ferr-cartao:nth-child(n+5){animation-delay:.24s}

/* ------------------------------------------------------------ telas grandes */
@media (min-width:1500px){
  html{font-size:17px}
  #agenda,#financas,#documentos{max-width:1340px}
  #ferramentas{max-width:980px}
  .barra{max-width:880px}
}
/* Largura CSS >= 2000 px (4K/5K a 100%): escala inteira, canvas do ceu fora. */
@media (min-width:2000px){ #app,#login,#toasts{zoom:1.25} }
@media (min-width:2700px){ #app,#login,#toasts{zoom:1.55} }
@media (min-width:3500px){ #app,#login,#toasts{zoom:1.9} }

/* ------------------------------------------------------------ sem animacao */
html.sem-animacao .nav-indicador{transition:none}
html.sem-animacao .aba.recem .fin-card,html.sem-animacao .aba.recem .card,html.sem-animacao .aba.recem .ferr-cartao,
html.sem-animacao .aba.recem .vazio-bloco,html.sem-animacao .toast{animation:none}
@media (prefers-reduced-motion:reduce){
  .aba.recem .fin-card,.aba.recem .card,.aba.recem .ferr-cartao,.aba.recem .vazio-bloco,.toast{animation:none}
  .nav-indicador,.cal-ev,.cal-item,.fin-btn,.acao{transition-duration:.01s}
}

/* ------------------------------------------------------------ barras 2D com corpo */
/* "Para onde foi o dinheiro" e os limites por categoria: a barra e um
   cilindro (luz em cima, sombra embaixo) dentro de uma calha afundada. */
.fin-barra-trilho,.fin-trilho{box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 -1px 0 rgba(236,231,218,.04)}
.fin-barra,.fin-trilho span{background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 48%,rgba(0,0,0,.28));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px -2px rgba(0,0,0,.75)}

/* a bussola do cabecalho e um objeto: inclina para o mouse */
.marca-header svg{transition:transform .6s var(--mola)}
.marca-header:hover svg{transform:perspective(500px) rotateY(-16deg) rotateX(8deg)}
html.sem-animacao .marca-header svg{transition:none}

/* ------------------------------------------------------------ desempenho */
/* Medido na auditoria de 17/09: o engasgo vinha de blur ANIMADO em massa (cada
   bolha e a aba inteira entravam com filter:blur — abrir uma conversa eram 50
   de uma vez), de backdrop-filter sobre um canvas que redesenha, e de sombras
   enormes em todo cartao de lista. Entrada agora e so opacity + transform, e
   so a bolha que CHEGA anima; o historico entra pronto. */
.bolha{animation:none}
.bolha.nova{animation:surgeNoite .55s var(--suave) both}
@keyframes folhaNoite{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
footer{transition:none}                       /* o teclado do sistema ja anima; o nosso so competia com ele */
.mais-menu{-webkit-backdrop-filter:none;backdrop-filter:none}      /* fundo .99 opaco: o desfoque era invisivel e caro */
.modal{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(180deg,rgba(20,30,39,.97),rgba(10,15,20,.98))}   /* o overlay ja desfoca o que esta atras */
@media (max-width:768px){
  .overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(3,6,9,.8)}
  .barra{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
      background:linear-gradient(180deg,rgba(24,36,47,.93),rgba(10,15,20,.96))}
  #lateral{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(12,18,24,.97),rgba(7,11,15,.98))}
  .toast,.dica-tutorial,.uso-cx{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Cartoes de LISTA: tres fios de luz e UMA sombra curta. A placa completa (duas
   sombras de 40 e 90 px) fica para os poucos paineis grandes. */
.card,.ferr-cartao,.ferr-cartao-chat,.bib-cartao,.bolha.user,.vazio-bloco{
    box-shadow:inset 0 1px 0 var(--luz),inset 1px 0 0 var(--luz-fraca),inset 0 -1px 0 var(--breu),
               0 1px 0 rgba(0,0,0,.35),0 10px 24px -14px rgba(0,0,0,.9)}
.card,.ferr-cartao{transition:transform .35s var(--mola),border-color .3s var(--suave)}
@media (hover:none){
  .cal-ev:hover,.cal-item:hover,.nat-cartao:hover,.bolha-capacidade:hover{transform:none}
}

/* ------------------------------------------------------------ leitura sobre o ceu de dia */
/* O veu de leitura era uma ELIPSE escura no meio da tela: de noite sumia no
   escuro, de dia virou "um circulo no meio do chat" (palavras do dono). Agora
   e uma faixa sem borda, de cima a baixo, e o texto solto sobre o ceu ganha
   sombra propria para ler bem ate em cima de nuvem clara. */
.corpo::before{background:linear-gradient(180deg,rgba(4,7,10,.22),rgba(4,7,10,.46) 24%,rgba(4,7,10,.46) 76%,rgba(4,7,10,.22))}
.inicio-limpo,.saudacao,.bolha.sia,.cal-titulo,.fin-mes h2,#documentos > h3,.ferr-cab h3,.rot-titulo,.dica{
    text-shadow:0 1px 14px rgba(4,7,10,.55),0 0 2px rgba(4,7,10,.35)}
.cal-titulo,.fin-mes h2,#documentos > h3{text-shadow:none}   /* titulos com gradiente recortado: sombra vazaria pelo recorte */
/* De dia (e na hora dourada) o ceu e claro: o veu de leitura fica mais forte e
   vale tambem na tela inicial, bem leve, so para o texto nao brigar com nuvem. */
body[data-fase="dia"] .corpo::before,body[data-fase="dourada"] .corpo::before{
    background:linear-gradient(180deg,rgba(5,9,14,.34),rgba(5,9,14,.62) 22%,rgba(5,9,14,.62) 78%,rgba(5,9,14,.34))}
body[data-fase="dia"]:not([data-ceu="lendo"]):not([data-ceu="pensando"]) .corpo::before,
body[data-fase="dourada"]:not([data-ceu="lendo"]):not([data-ceu="pensando"]) .corpo::before{opacity:.42}
/* As laminas tambem: com o ceu claro atras, vidro a 72% vira papel molhado. De dia ficam quase opacas. */
body[data-fase="dia"],body[data-fase="dourada"]{
    --lamina:linear-gradient(180deg,rgba(17,26,35,.93),rgba(10,15,21,.95));
    --vidro:rgba(14,21,28,.86)}
/* Placa dos KPIs: a regra antiga (paineis.css) embrulhava var(--lamina) — que JA e um gradiente — dentro de
   outro linear-gradient, o que invalida a declaracao inteira: a placa ficava translucida. Aqui a versao valida. */
.fin-card.fin-resumo{background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.013) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(236,231,218,.06),rgba(236,231,218,0) 38%),
    var(--lamina)}