/* Acabamento visual compartilhado do Relógio da Dívida e da Transparência.
   Só refina (textura, sombras, tipografia, foco); as cores vêm dos tokens de cada página (--bg, --surface, --ink, --accent...). */
:root{
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sombra:0 1px 2px rgba(16,24,40,.05),0 8px 20px -10px rgba(16,24,40,.14);
  --sombra-alta:0 2px 4px rgba(16,24,40,.06),0 14px 28px -12px rgba(16,24,40,.22);
  --realce:inset 0 1px 0 rgba(255,255,255,.7);
  --grade:rgba(30,60,120,.045);
  --halo:rgba(42,111,219,.07);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sombra:0 1px 2px rgba(0,0,0,.4),0 12px 26px -14px rgba(0,0,0,.65);
  --sombra-alta:0 2px 4px rgba(0,0,0,.45),0 18px 34px -14px rgba(0,0,0,.75);
  --realce:inset 0 1px 0 rgba(255,255,255,.045);
  --grade:rgba(150,185,255,.045);
  --halo:rgba(110,163,255,.09);
}}
:root[data-theme="dark"]{
  --sombra:0 1px 2px rgba(0,0,0,.4),0 12px 26px -14px rgba(0,0,0,.65);
  --sombra-alta:0 2px 4px rgba(0,0,0,.45),0 18px 34px -14px rgba(0,0,0,.75);
  --realce:inset 0 1px 0 rgba(255,255,255,.045);
  --grade:rgba(150,185,255,.045);
  --halo:rgba(110,163,255,.09);
}
html{scroll-behavior:smooth}
body{
  background-image:
    radial-gradient(1100px 460px at 88% -8%,var(--halo),transparent 62%),
    linear-gradient(var(--grade) 1px,transparent 1px),
    linear-gradient(90deg,var(--grade) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px;
  background-attachment:fixed,scroll,scroll;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
/* títulos com ar editorial */
h1{font-family:var(--serif);font-weight:650;letter-spacing:-.015em}
.card>h2,section>h2{font-family:var(--serif);font-weight:650;letter-spacing:-.005em}
.card>h2::after,section.card>h2::after{content:"";display:block;width:34px;height:2px;margin-top:6px;border-radius:2px;background:var(--accent);opacity:.55}
.eyebrow{letter-spacing:.14em}
/* cartões */
.card,.kpi,.tile,.resumo{box-shadow:var(--realce),var(--sombra);border-radius:12px}
.kpi,.tile{transition:transform .18s ease,box-shadow .18s ease}
.kpi:hover,.tile:hover{transform:translateY(-1px);box-shadow:var(--realce),var(--sombra-alta)}
.hub a,.appnav a{transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.hub a:hover{box-shadow:var(--sombra-alta)}
/* tabelas */
table thead th{background:color-mix(in srgb,var(--surface) 90%,var(--accent) 10%);box-shadow:0 1px 0 var(--line)}
table tbody tr:hover td{background:color-mix(in srgb,var(--surface) 94%,var(--accent) 6%)}
table td,table th{font-variant-numeric:tabular-nums}
.tw,.card .tw{border-radius:10px;box-shadow:var(--realce)}
/* avisos e notas */
.aviso{background:color-mix(in srgb,var(--surface) 96%,var(--warn) 4%)}
.meta,.sub{text-wrap:pretty}
/* interação */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
button,select,input{transition:border-color .15s ease,box-shadow .15s ease}
button:active{transform:scale(.98)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{body{background:none}.appnav,.hub,nav{display:none!important}.card{box-shadow:none}}