/* =====================================================================
   Patrimônium — acabamento (19-21/10/2026): movimento com função, contraste e telas estreitas.
   Carregado depois de app.css. Todo movimento respeita prefers-reduced-motion (regra global no fim de app.css + a deste arquivo).
   ===================================================================== */
:root { --sf: #2f6fd0; } :root[data-tema="dark"] { --sf: #6aa5ff; } @media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) { --sf: #6aa5ff; } }   /* cor da barra "saldo final" (azul: não se confunde com receita, despesa nem com a linha de resultado) */
:root { --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); }

/* 1) entrada do conteúdo ao trocar de aba: os blocos sobem em cascata (só na troca de aba; o JS põe/tira a classe .entra) */
#conteudo.entra { animation: none; }
#conteudo.entra > * { animation: abaEntra var(--dur-slow) var(--ease-out) both; }
#conteudo.entra > *:nth-child(2) { animation-delay: 40ms; } #conteudo.entra > *:nth-child(3) { animation-delay: 80ms; } #conteudo.entra > *:nth-child(4) { animation-delay: 120ms; }
#conteudo.entra > *:nth-child(n+5) { animation-delay: 150ms; }
#conteudo.entra .cartoes > .cartao { animation: abaEntra var(--dur-slow) var(--ease-out) both; }
#conteudo.entra .cartoes > .cartao:nth-child(2) { animation-delay: 50ms; } #conteudo.entra .cartoes > .cartao:nth-child(3) { animation-delay: 100ms; } #conteudo.entra .cartoes > .cartao:nth-child(4) { animation-delay: 150ms; }
#conteudo.entra .cartoes > .cartao:nth-child(5) { animation-delay: 200ms; } #conteudo.entra .cartoes > .cartao:nth-child(n+6) { animation-delay: 240ms; }
@keyframes abaEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 2) resposta ao toque/clique: apertar afunda um pouco; cartões de resumo ganham sombra ao passar o mouse */
button.btn:active, label.btn:active { transform: translateY(1px) scale(.985); }
button.mini:active, button.x:active, nav#tabs button:active, .leg span:active { transform: scale(.96); }
button.mini, button.x, nav#tabs button { transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.cartoes > .cartao { transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@media (hover: hover) { .cartoes > .cartao:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 11%, transparent); } }   /* só a sombra: cartão de resumo não é clicável, então não "levanta" */

/* 3) janelas, avisos e menu: entram com suavidade (e saem do mesmo jeito que entraram) */
dialog[open] { animation: dlgEntra var(--dur) var(--ease-out); } dialog[open]::backdrop { animation: fadeIn var(--dur) ease-out; }
@keyframes dlgEntra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.toast:not([hidden]) { animation: avisoEntra var(--dur-slow) var(--ease-spring); } @keyframes avisoEntra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* 4) troca de tema suave (a classe vive só 350 ms, para não pesar no uso normal) */
html.tema-troca *, html.tema-troca *::before, html.tema-troca *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease !important; }

/* 5) contraste mínimo de 4,5:1 nos textos pequenos que ficavam por pouco abaixo (zeros das tabelas, etiquetas de aviso e "editado") */
.lista td.n.z, td.n.z { color: color-mix(in srgb, var(--muted) 72%, var(--ink)); }
.pill.warn, .tag.ajuste { color: color-mix(in srgb, var(--warn) 78%, var(--ink)); }

/* 6) telas estreitas (sistema aberto no celular/tablet pequeno): grades viram uma coluna e nada empurra a página para o lado */
@media (max-width: 700px) {
  .sim3 { grid-template-columns: 1fr; }
  .grid2 > *, .cartoes > *, .sim3 > * { min-width: 0; }
  .grid2 { grid-template-columns: 1fr; }
  main#conteudo { overflow-x: clip; }
}

/* 7) paleta de comandos (Ctrl+K) */
#pal::backdrop { background: rgba(8, 8, 16, .5); backdrop-filter: blur(3px); }
#pal { padding: 0; width: min(620px, 94vw); border-radius: 18px; overflow: hidden; margin-top: 12vh; }
#pal .pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); } #pal .pal-in .ico { width: 18px; height: 18px; color: var(--muted); flex: none; }
#pal input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; min-height: 28px; }
#pal ul { list-style: none; margin: 0; padding: 6px; max-height: min(380px, 52vh); overflow: auto; } #pal li { margin: 0; }
#pal li button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer; min-height: 44px; }
#pal li button .ico { width: 18px; height: 18px; color: var(--brand); flex: none; } #pal li button small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
#pal li button[aria-selected="true"], #pal li button:hover { background: var(--brand-soft); }
#pal .pal-vazio { padding: 18px; color: var(--muted); text-align: center; }
#pal .pal-dica { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; } #pal kbd { background: var(--line2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font: inherit; font-size: 11.5px; }
#pal ul li.pal-sec { padding: 8px 12px 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* 8) cópias automáticas (Dados e sincronização) */
.autocop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line2); } .autocop:first-of-type { border-top: 0; }

/* 9) barras horizontais do consumo do orçamento (Painel): a linha vertical é o orçado; o que passa dela é o estouro */
.hb-res { font-size: 13px; padding: 7px 10px; border-radius: 10px; margin: 0 0 8px; background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 80%, var(--ink)); } .hb-res.bad { background: var(--bad-soft); color: color-mix(in srgb, var(--bad) 85%, var(--ink)); }
.hb-lista { display: grid; grid-template-columns: minmax(90px, 26%) minmax(80px, 1fr) auto; gap: 2px 10px; max-height: 360px; overflow: auto; padding-right: 4px; align-content: start; }   /* colunas compartilhadas: todas as linhas têm a régua do mesmo tamanho */
.hb-l { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 8px; animation: hbEntra var(--dur-slow) var(--ease-out) both; animation-delay: var(--d, 0ms); }
@media (hover: hover) { .hb-l:hover { background: var(--line2); } }
.hb-l .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hb-l .tr { position: relative; height: 12px; border-radius: 99px; background: var(--line2); }
.hb-l .tr::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--ref); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); opacity: .55; }
.hb-l .f, .hb-l .o { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px 0 0 99px; transform-origin: 0 50%; animation: hbCresce .7s var(--ease-out) both; animation-delay: calc(var(--d, 0ms) + 60ms); }
.hb-l .f.ok { background: var(--ok); } .hb-l .f.warn { background: #f59f00; } .hb-l .f.bad { background: var(--bad); }
.hb-l .o { border-radius: 0 99px 99px 0; background: repeating-linear-gradient(135deg, var(--bad) 0 4px, color-mix(in srgb, var(--bad) 45%, var(--card)) 4px 8px); outline: 1px solid var(--bad); outline-offset: -1px; animation-delay: calc(var(--d, 0ms) + 360ms); }
.hb-l .corta { position: absolute; right: -2px; top: -4px; font-style: normal; font-weight: 800; color: var(--bad); font-size: 15px; line-height: 1; }
.hb-l .vl { font-size: 12.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .hb-l .vl b { display: inline-block; min-width: 38px; } .hb-l .vl b.ok { color: var(--ok); } .hb-l .vl b.warn { color: var(--warn); } .hb-l .vl b.bad { color: var(--bad); }
.hb-l .pill.bad { margin-left: 6px; font-size: 11px; }
.hb-l.est .nm { font-weight: 700; }
.hb-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted); } .hb-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.hb-leg i.ok { background: var(--ok); } .hb-leg i.warn { background: #f59f00; } .hb-leg i.bad { background: var(--bad); } .hb-leg i.o { background: repeating-linear-gradient(135deg, var(--bad) 0 2px, color-mix(in srgb, var(--bad) 45%, var(--card)) 2px 4px); border: 1px solid var(--bad); }
@keyframes hbCresce { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes hbEntra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@supports not (grid-template-columns: subgrid) { .hb-lista { grid-template-columns: 1fr; } .hb-l { grid-template-columns: minmax(90px, 26%) minmax(80px, 1fr) 230px; } }
@media (max-width: 700px) { .hb-lista { grid-template-columns: 1fr; } .hb-l { grid-template-columns: 1fr; gap: 3px; } .hb-l .vl { text-align: left; } }

@media (prefers-reduced-motion: reduce) {
  .hb-l, .hb-l .f, .hb-l .o { animation: none !important; }
  #conteudo.entra > *, #conteudo.entra .cartoes > .cartao, dialog[open], dialog[open]::backdrop, .toast:not([hidden]) { animation: none !important; }
}

/* Patrimônio líquido e saúde financeira (Painel, 25/10/2026) */
.plv { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; margin: 2px 0 2px; font-variant-numeric: tabular-nums; } .plv.neg { color: var(--bad); }
.sau-top { display: flex; gap: 16px; align-items: center; margin: 2px 0 10px; } .sau-top .anel { flex: none; }
.sau-n { font-size: 20px; } .sau-n.ok { color: var(--ok); } .sau-n.warn { color: var(--warn); } .sau-n.bad { color: var(--bad); }
.sau-i { padding: 8px 0; border-top: 1px solid var(--line2); } .sau-b { height: 7px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 6px 0 4px; }
.sau-b i { display: block; height: 100%; border-radius: 6px; } .sau-b i.ok { background: var(--ok); } .sau-b i.warn { background: var(--warn); } .sau-b i.bad { background: var(--bad); }