/* css/05-cedula.css — identidade "Cédula" (por enquanto só no dashboard).
   Linguagem de papel-moeda: numerais de alto contraste (Bodoni Moda), moldura dupla
   gravada no valor principal, roseta de guilhoché, totais secundários como extrato.
   Cores via var(--accent) → acompanham o tema escolhido no plano Patrimônio. */

:root{
  --ced-serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --ced-gravura:color-mix(in srgb,var(--accent) 34%,transparent);
  --ced-gravura-fina:color-mix(in srgb,var(--accent) 18%,transparent);
}

/* Cabeçalho do dashboard: título com o numeral de cédula, sem emoji */
#sec-dashboard .page-title h2{font-family:var(--ced-serif);font-weight:500;font-size:34px;letter-spacing:-.5px;line-height:1.05}
#sec-dashboard #mob-dash-title{font-family:var(--ced-serif)!important;font-weight:500}

/* ── Painel principal: o "campo do valor" da cédula ───────────────────────── */
.ced-kpis{display:block}
.ced-painel{position:relative;overflow:hidden;background:var(--surface);border-radius:6px;padding:7px;border:1px solid var(--ced-gravura);margin-bottom:14px}
.ced-painel-int{position:relative;border:1px solid var(--ced-gravura-fina);border-radius:3px;padding:40px 34px 28px;min-height:190px;display:flex;flex-direction:column;justify-content:center}
.ced-roseta{position:absolute;right:-40px;top:50%;width:360px;height:360px;transform:translateY(-50%);color:var(--accent);opacity:.55;pointer-events:none}
.ced-roseta.ced-anima{animation:ced-gravar 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes ced-gravar{from{opacity:0;transform:translateY(-50%) rotate(-24deg) scale(.94)}to{opacity:.55;transform:translateY(-50%) rotate(0) scale(1)}}
.ced-serie{position:absolute;top:13px;left:18px;font-size:11px;letter-spacing:1.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ced-rotulo{font-size:13px;color:var(--muted);margin-bottom:6px}
.ced-valor{font-family:var(--ced-serif);font-weight:500;font-size:clamp(40px,5.4vw,64px);line-height:1;color:var(--text);letter-spacing:-1px;font-variant-numeric:lining-nums tabular-nums;position:relative}
.ced-moeda{font-size:.42em;color:var(--accent);margin-right:.25em;vertical-align:.95em;letter-spacing:0}
.ced-var{margin-top:12px;font-size:13px;display:flex;gap:6px;align-items:baseline}
.ced-var .ced-sub{color:var(--muted)}

/* ── Faixa de extrato: receitas, despesas, saldo ───────────────────────────── */
.ced-extrato{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ced-gravura-fina);border-bottom:1px solid var(--ced-gravura-fina);margin-bottom:16px}
.ced-item{padding:16px 20px}
.ced-item+.ced-item{border-left:1px solid var(--ced-gravura-fina)}
.ced-item .ced-rotulo{margin-bottom:4px}
.ced-item .ced-valor{font-size:26px;letter-spacing:-.4px}
.ced-item .ced-moeda{font-size:.5em;vertical-align:.6em}
.ced-item .ced-var{margin-top:6px;font-size:12px}
.ced-pos{color:var(--green)}.ced-neg{color:var(--red)}

/* ── Comparativo como extrato ──────────────────────────────────────────────── */
.ced-tabela{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ced-tabela th{font-size:12px;font-weight:500;color:var(--muted);text-align:right;padding:0 0 10px;border-bottom:1px solid var(--ced-gravura-fina)}
.ced-tabela th:first-child,.ced-tabela td:first-child{text-align:left}
.ced-tabela td{padding:12px 0;text-align:right;border-bottom:1px solid var(--border);font-size:14px}
.ced-tabela tr:last-child td{border-bottom:none}
.ced-tabela td.ced-ant{color:var(--muted)}
.ced-tabela td .ced-num{font-family:var(--ced-serif);font-size:17px}
.ced-titulo-card{font-size:15px;font-weight:600;color:var(--text);margin-bottom:14px}
.ced-titulo-card span{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}

/* Valores de destaque dos gráficos no mesmo numeral */
#dash-evo-total{font-family:var(--ced-serif);font-weight:500!important;font-size:26px!important;font-variant-numeric:lining-nums tabular-nums}

/* Blocos do dashboard podem encolher até a largura da tela (antes um bloco largo
   esticava a grade para 534px no celular e cortava tudo à direita) */
#dash-widgets-grid{min-width:0}
#dash-widgets-grid>.dash-widget{min-width:0;max-width:100%}
#dash-widgets-grid .chart-wrap{max-width:100%}

/* Cartões do dashboard: canto mais contido, linha gravada em vez de caixa genérica */
#sec-dashboard .dash-widget .card{border-radius:8px;border-color:var(--ced-gravura-fina)}

@media(max-width:767px){
  .ced-painel-int{padding:24px 20px 22px;min-height:160px}
  .ced-roseta{width:260px;height:260px;right:-70px;opacity:.4}
  @keyframes ced-gravar{from{opacity:0;transform:translateY(-50%) rotate(-24deg) scale(.94)}to{opacity:.4;transform:translateY(-50%) rotate(0) scale(1)}}
  .ced-extrato{grid-template-columns:1fr}
  .ced-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 4px}
  .ced-item+.ced-item{border-left:none;border-top:1px solid var(--ced-gravura-fina)}
  .ced-item .ced-valor{font-size:22px}
  .ced-item .ced-var{margin-top:0}
  #sec-dashboard .page-title h2{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.ced-roseta.ced-anima{animation:none}}

/* Cartões lado a lado no dashboard com a mesma altura */
#dash-widgets-grid>.dash-widget>.card{height:100%}

/* Escolha Despesas | Receitas no cartão de categorias */
.ced-seg{display:inline-flex;gap:2px;border-bottom:1px solid var(--border)}
.ced-seg button{padding:6px 10px;font-size:12.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.ced-seg button:hover{color:var(--text)}
.ced-seg button.ativo{color:var(--accent);border-bottom-color:var(--accent)}

/* ── Movimento do painel principal ──────────────────────────────────────────
   Roseta viva: as camadas giram devagar em sentidos opostos (como o torno que grava
   o guilhoché). Brilho: uma faixa dourada atravessa o painel de tempos em tempos,
   como a faixa holográfica de uma cédula. Tudo para com "reduzir movimento". */
.ced-roseta-viva .ced-camada{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.ced-roseta-viva .ced-camada-1{animation:ced-girar 140s linear infinite}
.ced-roseta-viva .ced-camada-2{animation:ced-girar 95s linear infinite reverse}
.ced-roseta-viva .ced-camada-3{animation:ced-girar 60s linear infinite}
.ced-roseta-viva .ced-camada-0{animation:ced-pulsar 6s ease-in-out infinite}
@keyframes ced-girar{to{transform:rotate(360deg)}}
@keyframes ced-pulsar{0%,100%{opacity:.7}50%{opacity:1}}
.ced-brilho{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:3px}
.ced-brilho::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;
  background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--accent) 9%,transparent) 40%,color-mix(in srgb,#fff 10%,transparent) 50%,color-mix(in srgb,var(--accent) 9%,transparent) 60%,transparent 100%);
  transform:skewX(-14deg);animation:ced-brilho 9s ease-in-out 2.2s infinite}
@keyframes ced-brilho{0%{left:-40%}22%{left:120%}100%{left:120%}}
.ced-painel-int .ced-rotulo,.ced-painel-int .ced-valor,.ced-painel-int .ced-var{position:relative;z-index:1}
.ced-painel-int .ced-serie{z-index:1}
@media(prefers-reduced-motion:reduce){
  .ced-roseta-viva .ced-camada,.ced-brilho::before{animation:none}
  .ced-brilho{display:none}
}

/* Toque/clique no painel: uma passada extra de brilho (independente da de 9 s) */
#dash-kpi-cards .ced-painel{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ced-brilho::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;opacity:0;
  background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--accent) 14%,transparent) 40%,color-mix(in srgb,#fff 16%,transparent) 50%,color-mix(in srgb,var(--accent) 14%,transparent) 60%,transparent 100%);
  transform:skewX(-14deg)}
.ced-brilho.extra::after{animation:ced-brilho-extra 1.1s cubic-bezier(.3,.6,.3,1)}
@keyframes ced-brilho-extra{0%{left:-40%;opacity:1}100%{left:120%;opacity:1}}
@media(prefers-reduced-motion:reduce){.ced-brilho.extra::after{animation:none}}

/* Diferença desde a última visita: "+ R$ 150,00" ao lado do valor, some sozinho */
.ced-valor-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.ced-delta{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;padding:4px 9px;border-radius:5px;white-space:nowrap;
  font-variant-numeric:tabular-nums;animation:ced-delta 3.6s ease forwards}
.ced-item .ced-delta{font-size:11.5px;padding:3px 7px}
.ced-delta.pos{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 35%,transparent)}
.ced-delta.neg{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);border:1px solid color-mix(in srgb,var(--red) 35%,transparent)}
@keyframes ced-delta{0%{opacity:0;transform:translateY(6px)}10%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-4px)}}
@media(max-width:767px){.ced-item .ced-valor-linha{gap:8px;justify-content:flex-end}}