/* Guias interativos (29.10.2026) — os widgets de qg.js. Só tokens do site
   (site.css): claro/escuro seguem sozinhos. O site.css já desliga animações
   e transições com prefers-reduced-motion. */
.qg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
table.qg-sr{display:block;margin:-1px;padding:0;border:0}
.guide .qg{margin:20px 0;padding:18px;border-radius:var(--r-lg);background:var(--face);box-shadow:var(--raise-sm)}
.guide .qg > h3,.guide .qg-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 17px/1.3 var(--font-ui);color:var(--ink)}
.guide .qg-h .gi{color:var(--primary-text)}
.guide .qg > p,.guide .qg-note{font-size:14px;line-height:1.55;color:var(--muted);margin:10px 0 0}
.guide .qg figcaption{margin-top:12px;font:500 13px/1.55 var(--font-ui);color:var(--muted)}
.guide .qg table{width:100%;border-collapse:collapse;font-size:14px}
.guide .qg th,.guide .qg td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.guide .qg td{font-family:var(--font-mono);font-size:13px}

/* campos */
.qg-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 16px;margin-bottom:14px}
.qg-in label{display:flex;flex-direction:column;gap:6px;font:600 13px/1.3 var(--font-ui);color:var(--muted)}
.qg-in label b{color:var(--primary-text);font:700 13px/1 var(--font-mono)}
.qg input[type=number],.qg input[type=text],.qg input:not([type]),.qg select{
  width:100%;min-width:0;padding:10px 12px;border:0;border-radius:var(--r-sm);background:var(--bg);box-shadow:var(--inset-sm);
  font:600 15px/1.2 var(--font-mono);color:var(--ink);-webkit-appearance:none;appearance:none}
.qg input:focus-visible,.qg select:focus-visible,.qg button:focus-visible,.qg a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.qg input[type=range]{width:100%;accent-color:var(--primary);height:26px;margin:0}
.qg input[type=checkbox]{accent-color:var(--primary)}
.qg-in .qg-chk{flex-direction:row;align-items:center;gap:10px;color:var(--ink)}
.qg-in .qg-chk input{width:20px;height:20px}

/* resultados */
.guide .qg-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}
.guide .qg-out > div{padding:12px 14px;border-radius:var(--r-md);background:var(--bg);box-shadow:var(--inset-sm);min-width:0}
.guide .qg-out dt{font:600 12.5px/1.35 var(--font-ui);color:var(--muted);margin:0 0 4px}
.guide .qg-out dd{margin:0;font:700 20px/1.2 var(--font-mono);color:var(--ink);letter-spacing:-.01em}
.guide .qg-out dd small{font:600 12px/1 var(--font-ui);color:var(--muted);margin-left:4px}
.guide .qg-out .is-main{background:var(--tint);box-shadow:none}
.guide .qg-out .is-main dd{color:var(--primary-text);font-size:24px}
.guide .qg-out .is-warn,.guide .qg .is-warn{background:var(--negative-tint);box-shadow:none}
.guide .qg-out .is-warn dd{color:var(--negative)}
.guide .qg [data-show-if]{margin:12px 0 0;padding:10px 14px;border-radius:var(--r-md);font-size:14px;line-height:1.5}
.guide .qg .is-bad,.guide .qg [data-show-if].is-bad{background:var(--negative-tint);color:var(--ink)}
.guide .qg .is-ok,.guide .qg [data-show-if].is-ok{background:var(--positive-tint);color:var(--ink)}
.guide .qg [hidden]{display:none!important}
.qg-bar{position:relative;height:12px;margin:14px 0 4px;border-radius:999px;background:var(--bg);box-shadow:var(--inset-sm);overflow:hidden}
.qg-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:inherit;background:var(--primary);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.qg-bar.is-warn::after{background:var(--negative)}

/* botões */
.qg-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:999px;background:var(--face);box-shadow:var(--raise-sm);
  font:600 13.5px/1.2 var(--font-ui);color:var(--primary-text);cursor:pointer}
.qg-btn:active{box-shadow:var(--press)}
.qg-btn-s{padding:7px 12px;font-size:12.5px}

/* divisão */
.qg-stackbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--bg);box-shadow:var(--inset-sm);margin:4px 0 14px}
.qg-stackbar > i{display:block;flex:0 0 0;min-width:0;transition:flex-basis .45s cubic-bezier(.2,.7,.2,1)}
.qg-stackbar > i + i{box-shadow:inset 2px 0 0 var(--bg)}
.qg-rows{display:grid;gap:8px}
.qg-row{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(92px,1fr) 30px;gap:8px;align-items:center;padding:6px 6px 10px 12px;border-radius:var(--r-sm)}
.qg-row:not(.qg-row-h)::before{content:"";position:absolute;left:0;top:8px;bottom:12px;width:4px;border-radius:4px;background:var(--c)}
.qg-row:not(.qg-row-h)::after{content:"";position:absolute;left:12px;right:6px;bottom:3px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c) var(--w,0%),transparent var(--w,0%));opacity:.75;transition:background .4s}
.qg-row-h{padding-bottom:0;font:600 12px/1.2 var(--font-ui);color:var(--muted)}
.qg-row-h span:nth-child(3){text-align:right}
.qg-nw,.qg-ww{display:flex;align-items:center;gap:6px;min-width:0}
.qg-ww small{font:600 12px/1 var(--font-ui);color:var(--muted)}
.qg-row output{text-align:right;font:700 15px/1.2 var(--font-mono);color:var(--ink);white-space:nowrap}
.qg-x{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--muted);font:500 20px/1 var(--font-ui);cursor:pointer}
.qg-x:hover{color:var(--negative)}
.qg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.guide .qg-sum{margin:0;font:600 13.5px/1.4 var(--font-mono);color:var(--muted)}

/* fundo de renovação: colunas por ano */
.qg-cols{position:relative;display:flex;align-items:stretch;gap:3px;height:210px;padding:10px 0 18px;margin:6px 0 8px}
.qg-zero{position:absolute;left:0;right:0;top:calc(10px + var(--z,1) * (100% - 28px));height:1px;background:var(--muted);opacity:.5}
.qg-col{position:relative;flex:1 1 0;min-width:0}
.qg-col > i{position:absolute;left:0;right:0;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--primary) 70%,var(--bg));
  bottom:calc((1 - var(--z,1)) * 100%);height:calc(var(--h,0) * 100%);
  transform-origin:bottom;transform:scaleY(0);transition:transform .6s cubic-bezier(.2,.7,.2,1),height .35s,bottom .35s,background .3s}
.qg-col.is-neg > i{top:calc(var(--z,1) * 100%);bottom:auto;border-radius:0 0 3px 3px;transform-origin:top;background:var(--negative)}
.qg-col.is-work > i{background:var(--data-6)}
.qg-col.is-work.is-neg > i{background:var(--negative)}
.qg-col.is-work::after{content:"";position:absolute;left:50%;top:-9px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--data-6)}
.qg-col small{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font:600 10.5px/1 var(--font-mono);color:var(--muted)}
.is-in .qg-col > i{transform:none}
.qg-col:nth-child(4n) > i{transition-delay:40ms}.qg-col:nth-child(4n+1) > i{transition-delay:80ms}
.guide .qg-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:6px 0 0;font:500 12.5px/1.4 var(--font-ui);color:var(--muted)}
.qg-lk{display:inline-flex;align-items:center;gap:6px;margin-right:6px;font-style:normal;white-space:nowrap}
.qg-lk > span{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px}
.qg-legend .k-pos{background:color-mix(in srgb,var(--primary) 70%,var(--bg))}
.qg-legend .k-work{background:var(--data-6);border-radius:50%}
.qg-legend .k-neg{background:var(--negative)}
.guide .qg-msg{margin:12px 0 0;padding:10px 14px;border-radius:var(--r-md);font:600 14px/1.5 var(--font-ui)}
.guide .qg-need{margin:8px 0 0;font:500 13.5px/1.5 var(--font-ui);color:var(--muted)}

/* barras horizontais */
.qg-bars{display:grid;gap:12px}
.qg-brow{display:grid;grid-template-columns:minmax(90px,30%) 1fr;gap:12px;align-items:center}
.qg-bl{font:600 13.5px/1.3 var(--font-ui);color:var(--ink)}
.qg-brow.is-hi .qg-bl{color:var(--primary-text)}
.qg-bt{display:grid;gap:4px}
.qg-b{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}
.qg-b > i{display:block;height:14px;width:var(--w);min-width:3px;border-radius:0 7px 7px 0;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.qg-b.is-neg > i{background:var(--negative)}
.qg-b > em{font:600 12.5px/1 var(--font-mono);font-style:normal;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .4s .5s}
.is-in .qg-b > i{transform:none}
.is-in .qg-b > em{opacity:1}
.qg-bars > .qg-legend{margin:0 0 4px}


/* barra 100 % */
.qg-stackbar.is-big{height:42px;border-radius:var(--r-md);margin:4px 0 14px}
.qg-stackbar.is-big > i{flex:0 0 var(--w);display:flex;align-items:center;justify-content:center;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.qg-stackbar.is-big > i b{font:700 12px/1 var(--font-mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.is-in .qg-stackbar.is-big > i{transform:none}
.guide .qg-slegend{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px}
.guide .qg-slegend li{display:flex;align-items:center;gap:8px;margin:0;font:500 13.5px/1.35 var(--font-ui);color:var(--ink)}
.qg-slegend li > span:first-child{flex:none;width:12px;height:12px;border-radius:3px}
.qg-slegend li > span:nth-child(2){flex:1;min-width:0}
.qg-slegend em{font:600 12px/1 var(--font-mono);font-style:normal;color:var(--muted);white-space:nowrap}

/* o ano em 12 meses */
.guide .qg-year{position:relative;display:grid;gap:7px;margin:18px 0 12px;padding:16px;border-radius:var(--r-lg);background:var(--face);box-shadow:var(--raise-sm)}
.qg-yrow{display:grid;grid-template-columns:minmax(96px,28%) 1fr;gap:10px;align-items:center}
.qg-yl{font:600 13px/1.25 var(--font-ui);color:var(--ink)}
.qg-ytrack{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;min-height:14px}
.qg-ytrack > i{display:block;height:14px;border-radius:7px;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.qg-yhead small{text-align:center;font:600 10.5px/1 var(--font-mono);color:var(--muted);text-transform:uppercase}
.qg-yhead small.is-now{color:var(--primary-text)}
.qg-year.is-in .qg-ytrack > i{transform:none}
.qg-ynow{position:absolute;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--primary);opacity:.35;pointer-events:none;
  left:calc(16px + (100% - 32px - 10px) * .28 + 10px + (100% - 32px - 10px) * .72 * (var(--m) - .5) / 12)}

/* lista de verificação */
.qg-checkh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 6px}
.guide .qg-progt{margin:0;font:700 13.5px/1.3 var(--font-mono);color:var(--primary-text)}
.qg-prog{height:10px;border-radius:999px;background:var(--bg);box-shadow:var(--inset-sm);overflow:hidden;margin-bottom:12px}
.qg-prog > i{display:block;height:100%;width:0;border-radius:inherit;background:var(--primary);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.qg-prog.is-full > i{background:var(--positive)}
.guide ul[data-qg=check]{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.guide ul[data-qg=check] > li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:var(--r-md);background:var(--face);box-shadow:var(--raise-sm);font:400 14.5px/1.5 var(--font-ui);color:var(--muted);transition:background .25s,opacity .25s}
.guide ul[data-qg=check] > li b{color:var(--ink);font-weight:700}
.guide ul[data-qg=check] > li input{flex:none;width:22px;height:22px;margin:1px 0 0;cursor:pointer}
.guide ul[data-qg=check] > li label{cursor:pointer;flex:1;min-width:0}
.guide ul[data-qg=check] > li.is-done{background:var(--positive-tint);box-shadow:none}
.guide ul[data-qg=check] > li.is-done b{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--positive) 70%,transparent)}
.guide ul[data-qg=check] time{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:999px;background:var(--tint);font:700 11.5px/1.3 var(--font-mono);color:var(--primary-text)}

/* árvore de decisão */
.qg-tree .qg-node{padding:14px 0;border-top:1px solid var(--line)}
.qg-tree .qg-node:first-child{border-top:0;padding-top:0}
.qg-tree.is-live .qg-node{border:0;padding:4px 0 0;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.qg-tree.is-live .qg-node.is-in{opacity:1;transform:none}
.guide .qg-q{margin:0 0 12px;font:700 17px/1.4 var(--font-ui);color:var(--ink)}
.qg-node > .qg-opt{display:inline-flex;align-items:center;gap:8px;margin:0 8px 8px 0;padding:11px 16px;border-radius:var(--r-md);background:var(--bg);box-shadow:var(--raise-sm);
  font:600 14.5px/1.3 var(--font-ui);color:var(--ink);text-decoration:none}
.qg-node > .qg-opt::after{content:"→";color:var(--primary-text);font-weight:700}
.qg-node > .qg-opt:hover{text-decoration:none;color:var(--primary-text)}
.qg-node > .qg-opt:active{box-shadow:var(--press)}
.qg-node.is-end{padding:16px;border-radius:var(--r-md);background:var(--tint)}
.qg-tree.is-live .qg-node.is-end{padding:16px}
.qg-node.is-end.is-bad{background:var(--negative-tint)}
.qg-node.is-end.is-ok{background:var(--positive-tint)}
.qg-node.is-end > b{display:flex;align-items:center;gap:8px;font:700 16px/1.35 var(--font-ui);color:var(--ink);margin-bottom:6px}
.guide .qg-node.is-end p{margin:0 0 6px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.qg-tnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.guide .qg-crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 auto 0 0}
.guide .qg-crumbs li{margin:0;padding:4px 10px;border-radius:999px;background:var(--tint);font:600 12px/1.3 var(--font-ui);color:var(--primary-text)}
.qg-tnav [hidden]{display:none}

/* separadores */
.qg-tabbar{display:flex;flex-wrap:wrap;gap:6px;padding:5px;margin:0 0 14px;border-radius:var(--r-md);background:var(--bg);box-shadow:var(--inset-sm)}
.qg-tabbar button{flex:1 1 auto;padding:9px 12px;border:0;border-radius:var(--r-sm);background:transparent;font:600 13.5px/1.25 var(--font-ui);color:var(--muted);cursor:pointer}
.qg-tabbar button[aria-selected=true]{background:var(--face);box-shadow:var(--raise-sm);color:var(--primary-text)}
.qg-tabs:not(.is-live) > section + section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.qg-tabs > section > :first-child{margin-top:0}

/* número que conta */
.qg-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* entrada ao rolar (só com JS e sem «menos movimento») */
.qg-on .qg-rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.qg-on .qg-rv.is-shown{opacity:1;transform:none}

@media (max-width:560px){
  .guide .qg{padding:14px}
  .qg-row{grid-template-columns:minmax(0,1fr) 84px 30px;grid-template-areas:"n w x" "o o o";padding-left:12px}
  .qg-row .qg-nw{grid-area:n}.qg-row .qg-ww{grid-area:w}.qg-row .qg-x{grid-area:x}
  .qg-row output{grid-area:o;text-align:left;font-size:14px}
  .qg-row-h{display:none}
  .qg-cols{height:160px;gap:2px}
  .qg-brow{grid-template-columns:1fr}
  .qg-yrow{grid-template-columns:1fr}
  .qg-yhead > span:first-child{display:none}
  .qg-ynow{display:none}
}

/* página dos guias: subgrupos dentro de um tema grande (29.10.2026) */
.ghub-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.ghub-chips a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--face);box-shadow:var(--raise-sm);font:600 13px/1.2 var(--font-ui);color:var(--ink);text-decoration:none}
.ghub-chips a small{font:700 11.5px/1 var(--font-mono);color:var(--primary-text)}
.ghub-chips a:active{box-shadow:var(--press)}
.ghub-sub{display:flex;align-items:center;gap:10px;margin:28px 0 14px;font:700 17px/1.3 var(--font-ui);color:var(--ink);scroll-margin-top:88px}
.ghub-sub::after{content:"";flex:1;height:1px;background:var(--line)}
