/* painel.css: sistema unico do visual novo. Gerado por gera.py + tokeniza.py; tokens em html.vn. */
@font-face{font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap; src:url(/inter.woff2) format('woff2');}
:root{color-scheme:dark; --preto:#000; --branco:#fff; --azul-ios:#007aff; --sobre-ok:#07150a; --fundo-doc:#e9eef3; --logo-a:#01aeed; --logo-b:#a6cd43; --logo-c:#1b2f62; --ico-alerta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); --sobre-rm:#1a0f05; --indigo:#6c85ef; --flutua:0 2px 6px rgba(0,0,0,.35), 0 14px 38px rgba(0,0,0,.5), 0 0 0 .5px rgba(0,0,0,.35); --lamina:rgba(29,41,68,.55); --brilho1:rgba(255,255,255,.28); --brilho2:rgba(255,255,255,.04); --realce:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.02); --lamina2:rgba(126,150,200,.16); --realce2:inset 0 0 0 .5px rgba(255,255,255,.07); --pousa:0 10px 30px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.28); --segelev:0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16); --sobre:#fff; --dur-1:.12s; --dur-2:.16s; --dur-3:.2s; --dur-4:.28s; --dur-brilho:1.4s; --ease-entra:cubic-bezier(0,0,.2,1); --ease-padrao:cubic-bezier(.2,0,0,1); --ease-mola:cubic-bezier(.32,.72,0,1); --mola:var(--ease-mola); --t1:var(--dur-2); --t2:var(--dur-4); --g-teal:#4ab6c8; --g-yellow:#f7b438; --g-green:#5dc46d; --g-orange:#f9883e; --g-red:#df6565; --g-purple:#c068d5; --g-indigo:#6c85ef; --g-pink:#df608c; --g-blue:#3d8fdb; --g-grade:rgba(126,150,200,.16); --g-eixo:var(--label3);}
.claro{color-scheme:light; --fill:rgba(27,47,98,.1); --fillh:rgba(27,47,98,.05); --toque:rgba(27,47,98,.17); --barra:rgba(238,241,247,.82); --green:#1b7a2f; --red:#c22a2a; --purple:#93309f; --teal:#0b7183; --yellow:#8a5d00; --indigo:#3b52c4; --pink:#bd2456; --cinza:#4d5c78; --sombra:0 18px 44px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08); --flutua:0 2px 6px rgba(27,47,98,.1), 0 14px 34px rgba(27,47,98,.18), 0 0 0 .5px rgba(27,47,98,.1); --sombra2:0 1px 2px rgba(0,0,0,.05); --lamina:rgba(255,255,255,.78); --brilho1:rgba(255,255,255,.6); --brilho2:rgba(27,47,98,.09); --realce:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.16); --lamina2:#fff; --realce2:inset 0 0 0 .5px rgba(27,47,98,.12); --segelev:0 2px 6px rgba(27,47,98,.16), 0 1px 2px rgba(27,47,98,.1), inset 0 1px 0 rgba(255,255,255,.95); --pousa:0 10px 26px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06); --g-teal:#0f8a9e; --g-yellow:#b57300; --g-green:#2b8f3c; --g-orange:#d3560c; --g-red:#d63434; --g-purple:#a03bb0; --g-indigo:#4a5fd6; --g-pink:#d12e62; --g-blue:#2274c6; --g-grade:rgba(27,47,98,.12); --g-eixo:var(--label3);}
/* ==== componentes das telas de gestao (ux-06, 04/11/2026) ====
   Vieram do telas/time.css, que era a folha base de Inventarios, Backlog, Equipe, Projetos, Desempenho e
   Documentos (VN_TELA_BASE, hoje vazio). Ficam no comeco do sistema, na mesma ordem da cascata de antes (a base
   carregava antes do painel.css). Os componentes (.ad-*, .ia-av...) valem em qualquer tela; as regras de nome
   generico (.cartao, .cab, .grade, footer...) ficam presas a familia gestao com :where(body[data-familia~="gestao"]),
   que nao soma especificidade, para nao mudar Meu painel, Fila, Historico e as outras. O que e so de Acessos,
   Rodizio e Conta seguiu no time.css. */
/* tela time: so o que e desta tela; valores em token */
:where(body[data-familia~="gestao"]) [hidden]{display:none !important;}
:where(body[data-familia~="gestao"]) .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:where(body[data-familia~="gestao"]) .grupo + .grupo{margin-top:1.625rem;}
:where(body[data-familia~="gestao"]) .grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(26.25rem,100%),1fr)); gap:var(--e4); align-items:start;}
:where(body[data-familia~="gestao"]) .cartao{overflow:hidden; display:flex; flex-direction:column;}
:where(body[data-familia~="gestao"]) .cab{display:flex; align-items:baseline; gap:.625rem; padding:var(--e4) 1.125rem var(--e0); flex-wrap:wrap;}
:where(body[data-familia~="gestao"]) .cab.forte{padding-top:1.125rem;}
:where(body[data-familia~="gestao"]) .cab .qtd{font-size:var(--fr, .78125rem); color:var(--label3); margin-left:auto; font-variant-numeric:tabular-nums;}
:where(body[data-familia~="gestao"]) .expl{margin:.375rem 1.125rem var(--e3); font-size:var(--fm, .84375rem); color:var(--label2); line-height:1.5; max-width:62ch;}
:where(body[data-familia~="gestao"]) .marcas{display:flex; flex-wrap:wrap; gap:.375rem;}
:where(body[data-familia~="gestao"]) .marcador{display:inline-flex; align-items:center; gap:.375rem; min-height:1.75rem; padding:0 .6875rem; border:0; border-radius:var(--rp); background:transparent; box-shadow:inset 0 0 0 1px var(--sep); color:var(--label3); font:inherit; font-size:var(--fr, .78125rem); font-weight:500; cursor:pointer; white-space:nowrap; transition:background-color var(--t1) var(--mola), color var(--t1) var(--mola),
    box-shadow var(--t1) var(--mola), transform var(--t1) var(--mola);}
:where(body[data-familia~="gestao"]) .marcador::before{content:"\25CB"; font-size:max(var(--piso, 0rem), .5625rem); line-height:1;}
:where(body[data-familia~="gestao"]) .marcador:active{transform:scale(.96);}
:where(body[data-familia~="gestao"]) .marcador[aria-pressed="true"]{background:var(--fill); box-shadow:none; color:var(--blue); font-weight:600;}
:where(body[data-familia~="gestao"]) .marcador[aria-pressed="true"]::before{content:"\2713"; font-size:max(var(--piso, 0rem), var(--f0, .6875rem));}
:where(body[data-familia~="gestao"]) .marcador[aria-pressed="true"].admin{color:var(--purple);}
:where(body[data-familia~="gestao"]) .marcador[disabled]{opacity:.55; cursor:default;}
@media (hover:hover) and (pointer:fine){
  :where(body[data-familia~="gestao"]) .marcador:not([disabled]):not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 1px var(--toque); color:var(--label);}
  :where(body[data-familia~="gestao"]) .marcador:not([disabled])[aria-pressed="true"]:hover{background:var(--toque);}
}
:where(body[data-familia~="gestao"]) .selo{flex:none;}
:where(body[data-familia~="gestao"]) .selo::before{content:""; width:.375rem; height:.375rem; border-radius:var(--rp); background:var(--blue); flex:none;}
:where(body[data-familia~="gestao"]) .selo.agora::before{background:var(--green);}
:where(body[data-familia~="gestao"]) .rod{padding:var(--e0) 1.125rem .375rem;}
:where(body[data-familia~="gestao"]) .rod h3{font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--label3); margin:.375rem 0 var(--e2);}
:where(body[data-familia~="gestao"]) .sel{max-width:100%;}
:where(body[data-familia~="gestao"]) .sel.fino{min-height:1.875rem; font-size:var(--fm, .84375rem);}
:where(body[data-familia~="gestao"]) .semanas{list-style:none; margin:0; padding:0;}
:where(body[data-familia~="gestao"]) .sem{display:grid; grid-template-columns:7.5rem minmax(0,1fr) minmax(0,1fr) auto; gap:.375rem .875rem; align-items:center; padding:.5625rem 1.125rem;}
:where(body[data-familia~="gestao"]) .sem{min-height:2.875rem; box-shadow:inset 0 .5px 0 var(--sep); transition:background-color var(--t1) var(--mola);}
:where(body[data-familia~="gestao"]) .sem.aberta{background:var(--fillh);}
:where(body[data-familia~="gestao"]) .sem .dia{display:flex; align-items:baseline; gap:.375rem; flex-wrap:wrap; font-size:var(--fm, .84375rem); color:var(--label2); font-variant-numeric:tabular-nums;}
:where(body[data-familia~="gestao"]) .sem .dia b{color:var(--label); font-weight:600;}
:where(body[data-familia~="gestao"]) .sem .sel{flex:1 1 8.125rem; min-width:0; max-width:20rem;}
:where(body[data-familia~="gestao"]) .semanas .vazia{padding:.875rem 1.125rem; color:var(--label3); font-size:var(--fm, .84375rem);}
:where(body[data-familia~="gestao"]) .acoes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e3); margin-top:1.125rem; padding:.875rem 1.125rem; background:var(--card); border-radius:var(--r4); box-shadow:var(--sombra2);}
:where(body[data-familia~="gestao"]) .acoes .pend{font-size:var(--f2); color:var(--orange); font-weight:500;}
:where(body[data-familia~="gestao"]) .aviso{margin:0 0 var(--e4); position:relative; background:color-mix(in srgb,var(--red) 14%,var(--card)); color:var(--label); border-radius:var(--r3); padding:var(--e3) var(--e4); font-size:var(--f3);}
:where(body[data-familia~="gestao"]) footer{margin-top:2.5rem; padding-top:var(--e4); border-top:.5px solid var(--sep); display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; font-size:var(--fr, .78125rem); color:var(--label3);}
:where(body[data-familia~="gestao"]) .vidro{border-radius:var(--rp); background:var(--lamina); box-shadow:var(--realce), var(--pousa); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px);}
@keyframes sobe{
  from{opacity:0; transform:translate(-50%,.75rem);}
  to{opacity:1; transform:translate(-50%,0);}
}
@keyframes surge{
  from{opacity:0; transform:translateY(.5rem);}
  to{opacity:1; transform:none;}
}
/* backwards (29/10): acabada a entrada o cartao fica livre da animacao; com both o body.pronto (1,9 s depois)
   e que soltava, e o Chrome contava o LCP da Desempenho so nessa hora (2,3 s) */
:where(body[data-familia~="gestao"]) body:not(.pronto) .cartao, :where(body[data-familia~="gestao"]) body:not(.pronto) .acoes{animation:surge var(--t2) var(--mola) backwards;}
:where(body[data-familia~="gestao"]) body:not(.pronto) .acoes{animation-delay:.08s;}
:where(body[data-familia~="gestao"]) body[aria-busy="true"] .grade, :where(body[data-familia~="gestao"]) body[aria-busy="true"] .acoes{opacity:.55; pointer-events:none; transition:opacity var(--t1) var(--mola);}
@media (max-width:820px){
  :where(body[data-familia~="gestao"]) .sem{grid-template-columns:minmax(0,1fr) auto; gap:.375rem .625rem; padding:var(--e3) 1.125rem;}
  :where(body[data-familia~="gestao"]) .sem .dia{grid-column:1;}
}
@media (prefers-reduced-motion:reduce){
  :where(body[data-familia~="gestao"]) *{transition:none !important; animation:none !important;}
}
/* ==== time.css (extra) ==== */
/* Acessos e rodizio no visual novo (mockup 14). */
html.vn :where(body[data-familia~="gestao"]) .selo::before{background:var(--glpi);}
html.vn :where(body[data-familia~="gestao"]) .selo.agora::before{background:var(--ok);}
html.vn :where(body[data-familia~="gestao"]) .tab th{color:var(--tx3); box-shadow:inset 0 -1px 0 var(--line);}
html.vn :where(body[data-familia~="gestao"]) .tab td{height:3.625rem; box-shadow:inset 0 1px 0 var(--line);}
html.vn :where(body[data-familia~="gestao"]) .tab tbody tr:hover td{background:color-mix(in srgb,var(--s2) 60%,transparent);}
html.vn :where(body[data-familia~="gestao"]) .tab td.num{color:var(--tx2);}
html.vn :where(body[data-familia~="gestao"]) .tab tr.vazia td{color:var(--tx3);}
html.vn :where(body[data-familia~="gestao"]) .rod h3{color:var(--tx3);}
html.vn :where(body[data-familia~="gestao"]) .semanas{display:flex; flex-direction:column; gap:var(--e2); padding:0 var(--e4);}
html.vn :where(body[data-familia~="gestao"]) .sem .dia b{color:var(--tx1);}
html.vn :where(body[data-familia~="gestao"]) .marcador[aria-pressed="true"]{color:var(--glpi-t);}
html.vn :where(body[data-familia~="gestao"]) .marcador[aria-pressed="true"].admin{color:var(--roxo-t);}
/* Acessos no padrao do mockup 14: cabecalho com acoes, resumo do rodizio, tabela com acesso
   irrestrito e fila geral agora, pedido de motivo em balao e auditoria na coluna da direita. */
html.vn .ia-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e4); flex-wrap:wrap;}
html.vn .ia-cab h1{margin:0;}
html.vn :where(body[data-familia~="gestao"]) .ia-cab .sub{margin-top:var(--e1); max-width:none; color:var(--tx2);}
html.vn .ia-av{width:1.875rem; height:1.875rem; border-radius:50%; flex:none; display:grid; place-items:center; font-size:var(--f1); font-weight:650; background:var(--s3); color:var(--tx1);}
html.vn :where(body[data-familia~="gestao"]) .grupo{margin-top:var(--e5);}
/* == /usuarios-antigo == */
/* == usuarios-vn == */
/* 01/10/2026: Administracao (Usuarios, Grupos, Fontes, Rodizio) no visual novo; mesmos tokens do antigo. */
:where(body[data-familia~="gestao"]) .ad-abas{margin:0 0 var(--e4); max-width:100%; overflow-x:auto; scrollbar-width:none;}
:where(body[data-familia~="gestao"]) .ad-abas::-webkit-scrollbar{display:none;}
:where(body[data-familia~="gestao"]) .ad-abas .seg a{color:var(--tx3);}
.ad-painel[hidden]{display:none !important;}
.ad-painel{container:tela / inline-size; min-width:0;}   /* quebras pela largura do conteudo (ux-08): 829px = 1180 de janela menos a lateral */
:where(body[data-familia~="gestao"]) .ad-painel > .cartao + .cartao, :where(body[data-familia~="gestao"]) .ad-painel > .ia-aviso + .cartao{margin-top:var(--e4);}
.ad-k{display:block; margin:0 0 var(--e2); color:var(--tx3); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:650; letter-spacing:.04em; text-transform:uppercase;}
.ad-meta{color:var(--tx3); font-size:var(--f1);}
.ad-sub{display:block; color:var(--tx3); font-size:var(--f1); font-weight:400; margin-top:.0625rem;}
.ad-vazio{margin:0; padding:var(--e4) 0; color:var(--tx3); font-size:var(--f2); list-style:none;}
.ad-nota{margin:var(--e3) 0 0; color:var(--tx3); font-size:var(--f1); line-height:1.5;}
.ad-campo{width:100%; min-width:0;}
/* o .cartao nao tem padding: o que vem depois do cabecalho alinha com o .expl */
:where(body[data-familia~="gestao"]) .ad-painel .cartao > .ad-filtros, :where(body[data-familia~="gestao"]) .ad-painel .cartao > .ad-tab, :where(body[data-familia~="gestao"]) .ad-painel .cartao > .ad-mem, :where(body[data-familia~="gestao"]) .ad-painel .cartao > .ad-add{margin-left:1.125rem; margin-right:1.125rem;}
:where(body[data-familia~="gestao"]) .ad-painel .cartao > :last-child{margin-bottom:1.125rem;}
.ad-lin > span[data-r="Papel"]{font-size:var(--f2); color:var(--tx2);}
/* pessoa */
.ad-quem{display:flex; align-items:center; gap:var(--e3); min-width:0;}
.ad-quem-t{display:flex; flex-direction:column; min-width:0;}
.ad-quem-t b{font-weight:600; color:var(--tx1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ad-quem-t small{color:var(--tx3); font-size:var(--f1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* filtros */
.ad-filtros{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e3); margin:0 0 var(--e3);}
.ad-filtros .ad-campo{flex:1 1 14rem; max-width:22rem;}
/* tabelas em grade: colunas fixas, a mesma celula em toda linha */
.ad-tab{display:flex; flex-direction:column;}
.ad-lin{display:grid; grid-template-columns:minmax(12rem,2.2fr) minmax(8rem,1.2fr) 7.5rem 7.5rem 7.5rem 6.5rem 2.5rem; gap:var(--e3); align-items:center; padding:var(--e3) 0; border-top:1px solid var(--line); min-width:0;}
.ad-lin > span{min-width:0;}
.ad-lin{font-size:var(--f2); color:var(--tx2);}
.ad-quem-t b{font-size:var(--f3);}
:where(body[data-familia~="gestao"]) .ad-painel .cartao > .cab + .ad-tab{margin-top:var(--e3);}
.ad-th{border-top:0; padding:0 0 var(--e2); color:var(--tx3); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:650; letter-spacing:.04em; text-transform:uppercase;}
:where(body[data-familia~="gestao"]) .ad-lin.aberta{border-bottom:0;}
.ad-ac{display:flex; justify-content:flex-end; gap:var(--e2);}
.ad-abre{width:1.875rem; padding:0;}
.ad-abre svg{transition:transform var(--t1) var(--mola);}
.ad-abre[aria-expanded="true"] svg{transform:rotate(180deg);}
.ad-tab-cr .ad-lin{grid-template-columns:minmax(12rem,2fr) 6rem minmax(10rem,2fr) 8.5rem 11rem;}
.ad-tab-cv .ad-lin{grid-template-columns:minmax(12rem,2fr) 6rem minmax(10rem,2fr) 8.5rem 10rem 6rem;}
.ad-tri{max-width:100%;}
.ad-tri button{font-size:var(--f1); padding:.25rem .625rem; min-height:1.625rem;}
.ad-tri button:disabled{cursor:not-allowed; opacity:.55;}
/* detalhe da conta */
.ad-det{padding:var(--e3) var(--e4) var(--e4); margin:0 0 var(--e3); border-radius:var(--r2); background:var(--s2); box-shadow:inset 0 0 0 1px var(--line);}
.ad-det-g{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e5);}
.ad-det-g > div{min-width:0;}
.ad-det-ft{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--e3); margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--line);}
.ad-det-ac{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2);}
.ad-mem{list-style:none; margin:0; padding:0;}
.ad-mem li{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"quem tira" "avisos avisos"; align-items:center; column-gap:var(--e3); padding:var(--e3) 0; border-top:1px solid var(--line);}
.ad-mem li > .ad-quem{grid-area:quem;} .ad-mem li > .ad-tira{grid-area:tira;}
.ad-mem li.ad-vazio{display:block;}
.ad-abre svg{width:.9375rem; height:.9375rem; flex:none;}
.ad-add{display:flex; gap:var(--e2); margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid var(--line);}
:where(body[data-familia~="gestao"]) .ad-add .sel{flex:1 1 auto; min-width:0; max-width:24rem;}
/* dialogo: o .ad-dlg mora no painel.css desde 14/10 (a Fila confirma com ele) */
.ad-senha{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1rem; padding:var(--e3); border-radius:var(--r2); background:var(--s2); box-shadow:inset 0 0 0 1px var(--line2); user-select:all; overflow-wrap:anywhere;}
.ad-senha[hidden]{display:none;}
@container tela (max-width:829px){
  .ad-lin{grid-template-columns:minmax(11rem,2fr) minmax(7rem,1fr) 7rem 7rem 6.5rem 6.5rem 2.5rem;}
  .ad-det-g{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:980px){   /* sem o menu lateral, como antes da troca */
  .ad-lin{grid-template-columns:minmax(11rem,2fr) minmax(7rem,1fr) 7rem 7rem 6.5rem 6.5rem 2.5rem;}
  .ad-det-g{grid-template-columns:repeat(2, minmax(0,1fr));}
}
/* telefone: linha vira cartao empilhado, rotulo vem do data-r */
@media (max-width:820px){
  .ad-th{display:none;}
  .ad-lin, .ad-tab-cr .ad-lin, .ad-tab-cv .ad-lin{grid-template-columns:minmax(0,1fr) auto; gap:var(--e2) var(--e3);}
  .ad-lin > span[data-r]{grid-column:1 / -1; display:flex; align-items:center; justify-content:flex-start; gap:var(--e1) var(--e3); flex-wrap:wrap;}
  .ad-lin > span[data-r]::before{content:attr(data-r); flex:0 0 5.5rem; color:var(--tx3); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:650; letter-spacing:.04em; text-transform:uppercase;}
  .ad-lin > span[data-r] .ad-sub{display:inline; margin:0;}
  .ad-lin > span[data-r="Pessoa"]{grid-column:1; grid-row:1;}
  .ad-lin > span[data-r="Pessoa"]::before{display:none;}
  .ad-lin > .ad-ac{grid-column:2; grid-row:1;}
  .ad-tab-cr .ad-lin > .ad-ac, .ad-tab-cv .ad-lin > .ad-ac{grid-column:1 / -1; grid-row:auto; justify-content:flex-start;}
  .ad-det-g{grid-template-columns:minmax(0,1fr); gap:var(--e4);}
  .ad-det{padding:var(--e3);}
  .ad-tri{overflow-x:auto; scrollbar-width:none;}
  :where(body[data-familia~="gestao"]) .ad-filtros .seg{max-width:100%; overflow-x:auto; scrollbar-width:none;}
}
/* 02/10 noite: a grade empilha pela largura da propria tabela, nao da janela. Com o menu lateral
   ela nao cabia entre 780 e 1260 px e Estado e Acoes sumiam no overflow:hidden do .cartao. */
.ad-tab{container-type:inline-size;}
@container (max-width:58rem){
  .ad-th{display:none;}
  .ad-lin, .ad-tab-cr .ad-lin, .ad-tab-cv .ad-lin{grid-template-columns:minmax(0,1fr) auto; gap:var(--e2) var(--e3);}
  .ad-lin > span[data-r]{grid-column:1 / -1; display:flex; align-items:center; justify-content:flex-start; gap:var(--e1) var(--e3); flex-wrap:wrap;}
  .ad-lin > span[data-r]::before{content:attr(data-r); flex:0 0 5.5rem; color:var(--tx3); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:650; letter-spacing:.04em; text-transform:uppercase;}
  .ad-lin > span[data-r] .ad-sub{display:inline; margin:0;}
  .ad-lin > span[data-r="Pessoa"]{grid-column:1; grid-row:1;}
  .ad-lin > span[data-r="Pessoa"]::before{display:none;}
  .ad-lin > .ad-ac{grid-column:2; grid-row:1;}
  .ad-tab-cr .ad-lin > .ad-ac, .ad-tab-cv .ad-lin > .ad-ac{grid-column:1 / -1; grid-row:auto; justify-content:flex-start;}
}
html.vn :where(body[data-familia~="gestao"]) .ia-cab .sub.ad-lede{max-width:62ch;}
/* == /usuarios-vn == */
/* == acessos-vn == */
/* 01/10/2026: defeitos do print da tela de Acessos (detalhe, coluna de acao, linha do QA, chave geral, campo). */
html.vn :where(body[data-familia~="gestao"]) .cartao[hidden], html.vn :where(body[data-familia~="gestao"]) .ia-aviso[hidden]{display:none !important;}
html.vn :where(body[data-familia~="gestao"]) .bt[hidden]{display:none !important;}
html.vn :where(body[data-familia~="gestao"]) .ad-abas{margin:0 0 var(--e4); max-width:100%; overflow-x:auto; scrollbar-width:none;}
/* == /equipe-qa == */
/* == telefone padrao iOS (27/10/2026): letra, listas e botoes nas telas que usam o time.css ==
   Rotulos em caixa alta sobem para Footnote (13). As proximas semanas do rodizio deixam de ser caixinhas
   dentro do cartao e viram linhas de lista (semana a esquerda, nome a direita). Os Salvar de formulario
   ficam com a largura do rotulo, alinhados ao texto, e nao esticados no cartao */
@media (max-width:620px){
  html.vn :where(body[data-familia~="gestao"]) :is(.sem .fn, .sem .cobre, .cobre.veda, .sem-cab){font-size:var(--f1);}
  html.vn :where(body[data-familia~="gestao"]) :is(#salvar-expediente, #salvar-relogio, #salvar-filas, #r-salvar, #f-senha > .bt.primario){width:auto; max-width:100%; align-self:flex-start; justify-self:start;}
}
@media (max-width:620px){
  /* Expediente e SLA: um ritmo so dentro do cartao (12px entre blocos) em vez das margens de cada filho */
  html.vn :where(body[data-familia~="gestao"]) :is(#s-expediente, #s-relogio, #s-filas){display:flex; flex-direction:column; gap:var(--e3);}
  html.vn :where(body[data-familia~="gestao"]) :is(#s-expediente, #s-relogio, #s-filas) > *{margin-top:0; margin-bottom:0;}
  html.vn :where(body[data-familia~="gestao"]) :is(#s-expediente, #s-relogio, #s-filas) > :last-child:not(.rod-rodape){margin-bottom:var(--rec-cartao, 1.125rem);}
}
/* == /telefone padrao iOS == */

/* telefone (27/10/2026, revisao): lista achatada no fim do cartao. A ultima linha ja traz o proprio respiro
   (12 a 16px), e o margin-bottom de 1.125rem do ultimo filho somava 30 a 39px embaixo contra 19 em cima */
@media (max-width:620px){
  :where(body[data-familia~="gestao"]) .ad-painel .cartao > :is(.ad-cards, .ad-tab):last-child, :where(body[data-familia~="gestao"]) .ad-painel .cartao > :last-child:has(> .ad-tab:last-child){margin-bottom:var(--e1);}
}
/* 29/10/2026 (dados-colados, falso encosto): o texto do <details> fechado ainda tem caixa de layout (o Chromium so
   esconde por content-visibility) e "vazava" 120px por cima do cartao de baixo nas medidas. Fechado = sem caixa */
html.vn :where(body[data-familia~="gestao"]) details:not([open]) > :not(summary){display:none;}
/* ==== /componentes das telas de gestao ==== */
.aviso-perfil{margin:0 auto; max-width:73.75rem; padding:.625rem .875rem; border-radius:.625rem; background:color-mix(in srgb, var(--yellow, var(--g-yellow)) 14%, var(--card)); border:1px solid color-mix(in srgb, var(--yellow, var(--g-yellow)) 40%, transparent); color:var(--label); font-size:var(--f2); line-height:1.45;}
.aviso-perfil[hidden]{display:none;}
@media (max-width:980px){
  .aviso-perfil{margin:0 var(--e3);}
}
.faixa-topo{margin:.375rem auto 0; max-width:73.75rem; padding:.4375rem .875rem; border-radius:.625rem; background:color-mix(in srgb, var(--yellow, var(--g-yellow)) 14%, var(--card)); border:1px solid color-mix(in srgb, var(--yellow, var(--g-yellow)) 40%, transparent); color:var(--label); font-size:var(--f2); line-height:1.4;}
#faixa-simulacao{text-align:center; font-weight:600;}
@media (max-width:980px){
  .faixa-topo{margin:.375rem var(--e3) 0;}
}
.top .abas .grupo-fonte{align-self:center; padding:0 var(--e1) 0 .625rem; font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--label2); white-space:nowrap;}
.conta-dlg{border:1px solid var(--segsulco, rgba(60,60,67,.2)); border-radius:var(--r3); padding:1.125rem 1.25rem; max-width:26.25rem; width:calc(100% - 2rem); background:var(--card, var(--branco)); color:var(--label);}
.conta-dlg::backdrop{background:var(--veu);}
.conta-dlg h2{margin:0 0 .625rem; font-size:1.0625rem;}
.conta-dlg .fonte{display:flex; flex-direction:column; gap:.375rem; padding:.625rem 0; border-top:1px solid var(--segsulco, rgba(60,60,67,.2));}
.conta-dlg input{font:inherit; padding:.4375rem .625rem; border-radius:var(--r1); border:1px solid var(--segsulco, rgba(60,60,67,.3)); background:transparent; color:inherit;}
.conta-dlg button{font:inherit; padding:.4375rem .875rem; border-radius:var(--rp); border:0; cursor:pointer; background:var(--blue, var(--azul-ios)); color:var(--branco); align-self:flex-start;}
.conta-dlg button.sec{background:transparent; color:var(--blue, var(--azul-ios)); padding-left:0;}
.conta-dlg .msg{font-size:var(--f2); color:var(--label2); min-height:1em;}
*{box-sizing:border-box;}
html{background:var(--bg); scrollbar-gutter:stable;}
/* letra do aparelho (22/10/2026): a raiz e 100% da letra padrao do navegador (zoom de texto, letra do
   sistema no Android pelo meta text-scale) e todo o resto e rem/em. O A- / A+ multiplica essa base
   (window.__vnLetra no VN_PREPINTA, total entre 12 e 32px). No iPhone e no iPad o Dynamic Type so chega
   por -apple-system-body: o script mede e normaliza (17px = 100%); sem script, a raiz pega a fonte de
   sistema direto, com a familia da marca de volta. text-size-adjust fica em 100% (nunca none) e so no
   WebKit do iOS, onde ele evita a letra inflar ao virar o telefone; no Chrome do Android fica o auto,
   que respeita a escala de acessibilidade */
html{font-size:100%;}
@supports (-webkit-touch-callout:none){ html{-webkit-text-size-adjust:100%; text-size-adjust:100%;} }
@supports (font:-apple-system-body) and (-webkit-touch-callout:none){
  @media (hover:none) and (pointer:coarse){
    html.vn:not([data-letra]){font:-apple-system-body; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Helvetica Neue",sans-serif;}
  }
}
/* barra de rolagem: definicao UNICA do site (pagina, menu lateral, filtros, listas, gavetas, modais). Nenhum conteiner define
   scrollbar-width/scrollbar-color proprio: no Chrome 121+ isso desliga o ::-webkit-scrollbar so naquele conteiner e a barra sai
   com outro desenho. Esconder de proposito (abas) segue com scrollbar-width:none + ::-webkit-scrollbar{display:none}. */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--label3) 45%, transparent) transparent;}}
::-webkit-scrollbar{width:.9375rem; height:.9375rem;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background:transparent;}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--label3) 45%, transparent); border-radius:999px; border:.25rem solid transparent; background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--label3) 70%, transparent); background-clip:padding-box;}
::-webkit-scrollbar-button{display:none; width:0; height:0;}
body{margin:0; min-height:100dvh; color:var(--label); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Helvetica Neue",sans-serif; font-size:var(--f4); line-height:1.4; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; padding:1.625rem clamp(var(--e4),2.6vw,2.75rem) 2.75rem;}
.tela{max-width:90rem; margin:0 auto;}
h1{font-size:clamp(1.5625rem,3vw,1.9375rem); font-weight:700; letter-spacing:-.032em; margin:0; line-height:1.1;}
.seg{position:relative; display:inline-flex; width:max-content; border-radius:var(--rp); padding:var(--e0); gap:var(--e0); background:var(--segbg); box-shadow:var(--segsulco);}
.seg .ind{position:absolute; top:2px; bottom:2px; left:0; width:0; border-radius:var(--rp); background:var(--segsel); box-shadow:var(--segpastilha); transition:left var(--t2) var(--mola), width var(--t2) var(--mola), opacity var(--t1) var(--mola); opacity:0; pointer-events:none;}
.seg button, .seg a{z-index:1; position:relative; display:inline-flex; align-items:center; min-height:1.625rem; border:0; background:transparent; color:var(--label2); font:inherit; font-size:var(--f2); font-weight:500; padding:.3125rem .8125rem; border-radius:var(--rp); cursor:pointer; white-space:nowrap; text-decoration:none;}
.seg button[aria-pressed="true"], .seg a[aria-current="page"]{color:var(--segsel-txt); text-shadow:0 0 .32px currentColor, 0 0 .32px currentColor;}
.seg button, .seg a{transition:background-color var(--t1) var(--mola), color var(--t2) var(--mola),
  transform var(--t1) var(--mola);}
.seg button:active, .seg a:active{transform:scale(.96);}
@media (hover:hover) and (pointer:fine){
  .seg button:not([aria-pressed="true"]):hover, .seg a:not([aria-current="page"]):hover{color:var(--label);}
}
.rot{font-size:var(--fr, .78125rem); color:var(--label2); margin-right:var(--e0);}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px;}
@supports (corner-shape: squircle){
  .cartao, .menu, .conf, .marca, .barra, .splash .cx, .esqueleto, .det .ult, .novidades, .bloco, .conf textarea, .aviso{corner-shape:squircle;}
  html.vn :is(.coluna, .card, .solte){corner-shape:squircle;}
  .vidro::before, .tema::before, .quem::before, .pill::after, .chip::before, .aviso::before{corner-shape:inherit;}
}
.top{display:flex; align-items:center; gap:.875rem; flex-wrap:wrap; margin-bottom:var(--e5); min-height:3.875rem; padding-block:.875rem 1.125rem; border-bottom:.5px solid var(--sep); --btopo:1.875rem; --captopo:2.125rem;}
@view-transition{navigation:auto;}
.top .marca{view-transition-name:marca;}
.top .abas{view-transition-name:menu;}
.top .quem{view-transition-name:quem;}
::view-transition-group(marca), ::view-transition-group(quem){animation:none;}
::view-transition-old(marca), ::view-transition-old(quem){display:none;}
::view-transition-new(marca), ::view-transition-new(quem){animation:none;}
::view-transition-group(menu){animation-duration:var(--t2); animation-timing-function:var(--mola);}
::view-transition-old(menu){animation:sai-peca var(--t2) var(--mola) both;}
::view-transition-new(menu){animation:entra-peca var(--t2) var(--mola) both;}
.top .abas > .ind{view-transition-name:pastilha;}
::view-transition-group(pastilha){animation-duration:var(--t2); animation-timing-function:var(--mola);}
::view-transition-old(pastilha){display:none;}
::view-transition-new(pastilha){animation:none; block-size:100%; object-fit:fill;}
::view-transition-old(root){animation:sai-corpo var(--t1) var(--mola) both;}
::view-transition-new(root){animation:entra-corpo var(--t2) var(--mola) both;}
@keyframes sai-corpo{
  to{opacity:0;}
}
@keyframes entra-corpo{
  from{opacity:0;}
}
@keyframes sai-peca{
  to{opacity:0;}
}
@keyframes entra-peca{
  from{opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none;}
}
.marca{display:flex; align-items:center; text-decoration:none; border-radius:var(--r2); flex:none; transition:opacity var(--t1) var(--mola), transform var(--t1) var(--mola);}
.marca:active{transform:scale(.97);}
.marca svg{display:block; width:6.5rem; height:auto; max-height:2.5rem;}
.logo-msb .cls-1{fill:none;}
.logo-msb .cls-2{fill:var(--branco);}
.logo-msb .cls-3{fill:var(--logo-a);}
.logo-msb .cls-4{fill:var(--logo-b);}
.claro .logo-msb .cls-2{fill:var(--logo-c);}
.marca:empty{display:none;}
.top .abas{margin-left:var(--e1);}
.titpag{margin:0 0 1.375rem;}
.titpag h1{margin:0;}
.sub{color:var(--label2); font-size:var(--fs, .90625rem); margin:var(--e1) 0 0; max-width:62ch;}
.dir{margin-left:auto; display:flex; align-items:center; gap:.625rem; flex-wrap:wrap;}
.top .dir{gap:var(--e2); flex-wrap:nowrap; min-width:0;}
.fsair{display:contents;}
.tema{width:var(--btopo,2rem); height:var(--btopo,2rem); border-radius:var(--rp); color:var(--label2); border:0; font:inherit; font-size:var(--f3); cursor:pointer; line-height:1; padding:0; position:relative; background:var(--segbg); box-shadow:var(--realce2); display:inline-flex; align-items:center; justify-content:center;}
.tema .ico{display:block; width:.9375rem; height:.9375rem; flex:none;}
.tema .lua{display:none;}
.claro .tema .sol{display:none;}
.claro .tema .lua{display:block;}
a.tema{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:600;}
.tema.girando:not(:has(.ico)), .tema.girando .ico{animation:gira .8s linear infinite;}
.tema::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:.03125rem; pointer-events:none; background:linear-gradient(145deg, var(--brilho1) 0%, var(--brilho2) 26%, transparent 50%,
    var(--brilho2) 76%, var(--brilho1) 100%); -webkit-mask:linear-gradient(var(--preto) 0 0) content-box, linear-gradient(var(--preto) 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.2;}
@keyframes gira{
  to{transform:rotate(360deg);}
}
.top .acoes-topo{display:inline-flex; align-items:center; gap:var(--e0); padding:var(--e0); flex:none; background:var(--segbg); box-shadow:var(--segsulco); border-radius:var(--rp);}
.top .acoes-topo .tema:not([aria-current="page"]){background:transparent; box-shadow:none;}
.top .acoes-topo .tema::before{display:none;}
.quem{display:inline-flex; align-items:center; gap:var(--e2); height:var(--captopo,2rem); font-size:var(--f2); color:var(--label2); position:relative; background:var(--segbg); box-shadow:var(--realce2); border-radius:var(--rp); padding:0 .8125rem 0 .875rem; min-width:0; flex:none;}
.quem::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:.03125rem; pointer-events:none; background:linear-gradient(145deg, var(--brilho1) 0%, var(--brilho2) 26%, transparent 50%,
    var(--brilho2) 76%, var(--brilho1) 100%); -webkit-mask:linear-gradient(var(--preto) 0 0) content-box, linear-gradient(var(--preto) 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.2;}
.quem b{font-weight:600; color:var(--label);}
.sino .corte{opacity:1; transition:opacity var(--t1) var(--mola);}
.sino[aria-pressed="true"]{color:var(--blue);}
.sino[aria-pressed="true"] .corte{opacity:0;}
.sino.tocou .badalo{transform-origin:.75rem .25rem; animation:balanca .5s var(--mola);}
@keyframes balanca{
  0%, 100%{transform:rotate(0);}
  25%{transform:rotate(9deg);}
  60%{transform:rotate(-7deg);}
}
.quem .papel{display:inline-flex; align-items:center; gap:.3125rem; font-size:var(--f1); font-weight:600; color:var(--label2);}
.quem .papel::before{content:""; width:.375rem; height:.375rem; border-radius:50%; background:var(--cinza);}
.quem .papel.escreve::before{background:var(--green);}
.quem .papel.amplo{color:var(--label);}
.quem .papel i{font-style:normal;}
.quem .ini{display:none; font-weight:600; color:var(--label); font-size:var(--fr, .78125rem); letter-spacing:.02em;}
.tema[aria-current="page"]{color:var(--segsel-txt); background:var(--segsel); box-shadow:var(--segpastilha); pointer-events:none;}
@media (hover:hover) and (pointer:fine){
  .tema:hover{color:var(--label); background:var(--toque);}
  .marca:hover{opacity:.8;}
}
@media (max-width:980px){
  .top{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"marca dir" "abas abas"; gap:var(--e3);}
  .top .marca{grid-area:marca;}
  .top .dir{grid-area:dir; justify-self:end; margin-left:0;}
  .top .abas{grid-area:abas; justify-self:start; max-width:100%; margin-left:0; overflow-x:auto; scrollbar-width:none;}
  .top .abas::-webkit-scrollbar{display:none;}
  .top .abas a{flex:none; font-size:var(--fr, .78125rem); padding:.3125rem .6875rem;}
}
@media (max-width:620px), (pointer:coarse){
  .top{--btopo:2.5rem; --captopo:2.75rem;}
  .top .acoes-topo{padding:.1875rem; gap:.0625rem;}
  .top .tema{font-size:var(--f4);}
  .top .tema .ico{width:1.0625rem; height:1.0625rem;}
  .top .abas a{padding:.4375rem .8125rem; min-height:2.125rem;}
}
@media (max-width:620px){
  .quem b{position:absolute; width:1px; height:1px; margin:-.0625rem; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  .quem .ini{display:inline;}
  .quem{padding:0 var(--e3);}
}
@media (max-width:620px){
  .quem .papel i{position:absolute; width:1px; height:1px; margin:-.0625rem; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
}
@media (max-width:620px){
  .top{gap:.625rem; --btopo:2.25rem; --captopo:2.375rem;}
  .top .marca svg{width:4.875rem;}
  .top .acoes-topo{gap:0;}
  .top .dir{gap:.375rem;}
}
.spin{display:inline-block; width:var(--t,.9375rem); height:var(--t,.9375rem); border-radius:50%; border:2px solid var(--fill); border-top-color:var(--blue); animation:gira .8s linear infinite; vertical-align:-2px; flex:none;}
.splash{position:fixed; inset:var(--htopo,0px) 0 0 0; z-index:var(--z-splash); display:grid; place-items:center; background:var(--bg); transition:opacity var(--t2) var(--mola);}
.splash.sai{opacity:0; pointer-events:none;}
.splash .cx{display:grid; justify-items:center; gap:.9375rem; text-align:center; padding:var(--e5); border-radius:var(--r2); animation:surge var(--t2) var(--mola) both;}
.splash .logo{width:8.25rem; display:grid; place-items:center; opacity:.95;}
.splash .logo svg{width:100%; height:auto;}
.splash .spin{--t:1.875rem; border-width:3px;}
.splash h2{margin:0; font-size:1.0625rem; font-weight:650; letter-spacing:-.01em; color:var(--label);}
.splash .msg{margin:0; color:var(--label2); font-size:var(--f2); max-width:36ch; line-height:1.5;}
.splash .retomar{border:0; border-radius:var(--rp); padding:var(--e2) var(--e4); font:inherit; font-size:var(--f2); font-weight:600; color:var(--label); background:var(--fill); cursor:pointer; transition:background-color var(--t1) var(--mola), transform var(--t1) var(--mola);}
.splash .retomar:hover{background:var(--toque);}
.splash .retomar:active{transform:scale(.97);}
.esqueleto{border-radius:var(--r3); height:3.875rem; background:linear-gradient(90deg,var(--fillh),var(--fill),var(--fillh)); background-size:200% 100%; animation:brilha 1.5s linear infinite;}
body[aria-busy="true"] .velavel{opacity:.45; pointer-events:none;}
.velavel{transition:opacity var(--t1) var(--mola);}
@keyframes brilha{
  from{background-position:200% 0;}
  to{background-position:-200% 0;}
}
/* 28/10 (pendencias pos-animacoes): com movimento reduzido o anel nao gira; fica parado e pulsa a opacidade
   devagar, o bastante para continuar dizendo "carregando" */
@keyframes spin-pulsa{50%{opacity:.4;}}
@media (prefers-reduced-motion: reduce){
  .spin{animation:spin-pulsa 2.4s ease-in-out infinite;}
}
.msg-dlg{border:0; border-radius:1.125rem; padding:0; width:min(55rem, calc(100vw - 2rem)); max-height:calc(100dvh - 2.5rem); background:var(--card); color:var(--label); box-shadow:var(--sombra); overflow:auto;}
.msg-dlg::backdrop{background:var(--veu);}
.msg-dlg .mh{display:flex; gap:var(--e3); align-items:flex-start; padding:var(--e4) 1.25rem; border-bottom:1px solid var(--sep);}
.msg-dlg .mh .ic{width:2rem; height:2rem; border-radius:.625rem; display:grid; place-items:center; background:var(--fill); color:var(--blue); flex:none;}
.msg-dlg .mh h3{margin:0; font-size:var(--f4);}
.msg-dlg .mh p{margin:var(--e0) 0 0; font-size:var(--f2); color:var(--label2);}
.msg-dlg .mh .x{margin-left:auto; background:transparent; border:0; color:var(--label2); cursor:pointer; font:inherit; line-height:1;}
.msg-dlg .mb{display:grid; grid-template-columns:minmax(0,18.75rem) minmax(0,1fr); gap:1.125rem; padding:var(--e4) 1.25rem;}
@media (max-width:820px){
  /* 13/11 f: minmax(0,1fr), senao o select do motivo (Pendencia) alarga a coluna e a folha rola de lado em 390 */
  .msg-dlg .mb{grid-template-columns:minmax(0,1fr);}
  .msg-dlg .opt > span{min-width:0;}
  .msg-dlg .opt select{max-width:100%;}
}
.msg-dlg .k{font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--label3); margin:0 0 var(--e2);}
.msg-dlg .k span{font-weight:400; text-transform:none; letter-spacing:0; margin-left:.375rem;}
.msg-dlg .mo{display:block; width:100%; text-align:left; font:inherit; color:inherit; background:var(--fillh); border:1px solid var(--sep); border-radius:var(--r2); padding:.625rem var(--e3); margin:0 0 var(--e2); cursor:pointer;}
.msg-dlg .mo[aria-pressed="true"]{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset;}
.msg-dlg .mo[disabled]{cursor:default; opacity:.85;}
.msg-dlg .mo .n{display:flex; align-items:center; gap:var(--e2); font-weight:600; font-size:var(--f3);}
.msg-dlg .mo .d{font-size:var(--fr, .78125rem); color:var(--label2); margin-top:.1875rem;}
.msg-dlg .mo .env{font-size:var(--fr, .78125rem); margin-top:.375rem; color:var(--label);}
.msg-dlg .selo{margin-left:auto;}
.msg-dlg .selo.sim{background:var(--warn-bg); color:var(--warn-t);}
.msg-dlg .ou{font-size:var(--fn, .75rem); color:var(--label3);}
.msg-dlg .bolha{white-space:pre-wrap; background:var(--fillh); border:1px solid var(--sep); border-radius:var(--r2); padding:var(--e3) .875rem; font-size:var(--f3); line-height:1.5; min-height:4rem;}
.msg-dlg .meta{display:flex; flex-wrap:wrap; gap:.375rem .875rem; font-size:var(--fn, .75rem); color:var(--label2); margin:var(--e2) 0 0;}
.msg-dlg .opt{display:flex; gap:.625rem; align-items:flex-start; margin-top:.875rem; font-size:var(--fm, .84375rem);}
.msg-dlg .opt small{display:block; color:var(--label2); font-size:var(--fn, .75rem); margin-top:var(--e0);}
.msg-dlg .aviso{margin-top:var(--e3); padding:.5625rem var(--e3); border-radius:.625rem; font-size:var(--f2); background:color-mix(in srgb, var(--orange) 14%, transparent); color:var(--label);}
.msg-dlg .aviso.ruim{background:color-mix(in srgb, var(--red) 16%, transparent);}
.msg-dlg .aviso.bom{background:color-mix(in srgb, var(--green) 16%, transparent);}
.msg-dlg .mf{display:flex; flex-wrap:wrap; gap:.625rem; align-items:center; justify-content:space-between; padding:var(--e3) 1.25rem var(--e4); border-top:1px solid var(--sep);}
.msg-dlg .mf label{display:flex; gap:var(--e2); align-items:center; font-size:var(--fm, .84375rem);}
.msg-dlg .mf .dir2{display:flex; gap:var(--e2); margin-left:auto;}
.msg-dlg .hist{margin-top:.875rem; font-size:var(--fn, .75rem); color:var(--label2);}
.msg-dlg .hist li{margin:var(--e0) 0;}
button.msg-rapida{font:inherit; font-size:var(--f2); padding:.375rem var(--e3); border-radius:var(--rp); cursor:pointer; border:1px solid var(--sep); background:var(--fillh); color:var(--blue);}
html.vn:not(.claro){color-scheme:dark; --bg:#0b1220; --side:#0e1628; --s1:#151e33; --s2:#1f2a44; --s3:#26324f; --line:rgba(126,150,200,.23); --line2:rgba(126,150,200,.27); --tx1:#f4f6fa; --tx2:rgba(228,236,250,.68); --tx3:rgba(228,236,250,.61); --glpi:#4496e2; --glpi-fill:#2a74c0; --sobre-fill:var(--branco); --sobre-alerta:#0b1220; --glpi-bg:rgba(61,143,219,.14); --glpi-t:#8ac3f9; --rm:#ff9047; --rm-bg:rgba(249,136,62,.14); --rm-t:var(--rm); --ok:#66cc75; --ok-bg:rgba(93,196,109,.14); --ok-t:#78d986; --crit:#e76c6c; --crit-fill:#c43c3c; --crit-bg:rgba(223,101,101,.15); --crit-t:#fc9b9b; --warn:#ffbd44; --warn-bg:rgba(247,180,56,.14); --warn-t:var(--warn); --info:#53bed0; --info-bg:rgba(74,182,200,.14); --info-t:var(--info); --roxo:#c068d5; --roxo-bg:rgba(192,104,213,.15); --roxo-t:#d793e9; --rosa:#e76793; --rosa-bg:rgba(223,96,140,.15); --rosa-t:#f675a0; --neutro:#96a8c5; --neutro-bg:rgba(143,160,189,.14); --sh:0 0 0 .5px rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.36); --sh2:0 0 0 .5px rgba(255,255,255,.06), 0 24px 64px rgba(0,0,0,.6); --veu:rgba(5,9,18,.55); --card:var(--s1); --card2:var(--s2); --sep:var(--line); --fill:rgba(126,150,200,.21); --fillh:rgba(126,150,200,.09); --toque:rgba(126,150,200,.33); --label:var(--tx1); --label2:var(--tx2); --label3:var(--tx3); --blue:var(--glpi); --green:var(--ok); --orange:var(--rm); --red:var(--crit); --purple:var(--roxo); --teal:var(--info); --yellow:var(--warn); --pink:var(--rosa); --cinza:var(--neutro); --sombra:0 18px 50px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5); --sombra2:var(--sh); --barra:rgba(16,24,44,.72); --segbg:rgba(126,150,200,.16); --segsel:rgba(255,255,255,.22); --segsel-txt:var(--tx1); --segsulco:inset 0 1px 3px rgba(0,0,0,.38), inset 0 0 0 .5px rgba(255,255,255,.04); --segpastilha:0 2px 6px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.28);}
html.vn.claro, html.vn body.claro{color-scheme:light; --crit-fill:initial; --bg:#eef1f7; --side:#e6eaf2; --s1:#ffffff; --s2:#f3f5fa; --s3:#e3e8f1; --line:rgba(27,47,98,.1); --line2:rgba(27,47,98,.18); --tx1:#16223c; --tx2:#48587a; --tx3:#566482; --glpi:#1f6fbf; --glpi-fill:#1f6fbf; --sobre-fill:var(--branco); --sobre-alerta:#fff; --glpi-bg:rgba(31,111,191,.1); --glpi-t:#1a5c9e; --rm:#c9621a; --rm-bg:rgba(201,98,26,.11); --rm-t:#8f420d; --ok:#1b7a2f; --ok-bg:rgba(27,122,47,.1); --ok-t:#1b6a2c; --crit:#c22a2a; --crit-bg:rgba(194,42,42,.09); --crit-t:#a82323; --warn:#8a5d00; --warn-bg:rgba(181,115,0,.12); --warn-t:#7a5200; --info:#0b7183; --info-bg:rgba(11,113,131,.1); --info-t:#0b6272; --roxo:#7d3aa8; --roxo-bg:rgba(125,58,168,.1); --roxo-t:#6c2f93; --rosa:#bd2456; --rosa-bg:rgba(189,36,86,.09); --rosa-t:#a01f4a; --neutro:#4d5c78; --neutro-bg:rgba(77,92,120,.1); --sh:0 0 0 .5px rgba(27,47,98,.1), 0 1px 2px rgba(27,47,98,.08), 0 8px 22px rgba(27,47,98,.07); --sh2:0 0 0 .5px rgba(27,47,98,.12), 0 24px 60px rgba(27,47,98,.22); --veu:rgba(22,34,60,.32); --card:var(--s1); --card2:var(--s2); --sep:var(--line2); --label:var(--tx1); --label2:var(--tx2); --label3:var(--tx3); --blue:var(--glpi); --orange:var(--rm); --segbg:var(--s2); --segsel:#fff; --segsel-txt:var(--tx1); --segsulco:inset 0 0 0 1px var(--line); --segpastilha:0 1px 2px rgba(27,47,98,.18);}
html.vn{--r1:.5rem; --r2:.75rem; --r3:1rem; --r4:1.375rem; --r5:1.75rem; --rp:999px; --e0:.125rem; --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem; --e6:2rem; --f1:.71875rem; --f2:.8125rem; --f3:.875rem; --f4:1rem; --f5:1.125rem; --f6:1.75rem; --fx:2.75rem; --f0:.6875rem; --fn:.75rem; --fr:.78125rem; --fm:.84375rem; --fs:.90625rem; --fc:.9375rem; --raio:var(--r4); --raio2:var(--r3); --lside:16.5rem; --rec-quadro:.625rem; --r-int:calc(var(--r4) - var(--rec-quadro));}
/* camadas (03/11/2026): escala unica da skill (10, 20, 30, 40, 50), mesma ordem de antes: barra fixa do Meu relatorio e voltar ao
   topo (empate: o botao vem depois no documento e fica por cima) < barra de abas < menu lateral, dica e veu da gaveta < gaveta do chamado < menu, toast, pular e splash.
   Dentro de um componente (popover de tela, cartao arrastado, marca de hoje do Gantt) so 0, 1 e 10 */
:root{--z-barra:10; --z-volta:10; --z-abas:20; --z-lado:30; --z-dica:30; --z-veu:30; --z-gaveta:40; --z-menu:50; --z-toast:50; --z-pula:50; --z-splash:50;}
/* espera do indicador (03/11/2026): esqueleto da lista e o estado com giro so aparecem depois de 300ms de espera;
   leitura que chega antes disso troca direto pelo conteudo, sem piscar. Nao e movimento (so visibilidade), vale tambem no reduzido */
@keyframes vn-espera{from{visibility:hidden;}}
/* cores forcadas (03/11/2026): no alto contraste do Windows fundo e sombra somem; o botao ganha um contorno do sistema.
   Outline (nao border) para nao mudar caixa; fora desse modo nada muda */
@media (forced-colors: active){
  html.vn :is(button,[role=button],input[type=submit],input[type=button]){outline:1px solid ButtonText; outline-offset:-1px;}
}
/* ux-04 (04/11/2026): o "Carregando…" de qualquer bloco em aria-busy so aparece depois de 300 ms, sem piscar */
html.vn :is(#dc-lista,#pj-lista)[aria-busy="true"], html.vn #estado:has(> .spin),
html.vn [aria-busy="true"] > .ad-vazio, html.vn [aria-busy="true"] > [role="row"] > .ad-vazio{animation:vn-espera 1ms 300ms both !important;}
html.vn body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Helvetica Neue",sans-serif; font-size:var(--f4); line-height:1.4; letter-spacing:-.011em; padding:0 0 2.75rem var(--lside); background:var(--bg); color:var(--tx1);}
html.vn [hidden]{display:none !important;}
html.vn .tela{max-width:none; margin:0; padding:0 2.25rem;}
html.vn .splash{left:var(--lside);}
html.vn :focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn .vn-side{position:fixed; z-index:var(--z-lado); left:0; top:0; bottom:0; width:var(--lside); background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:1.375rem .875rem .875rem; overflow-y:auto; container-type:scroll-state;}
/* menu rolando: a calha de .9375rem da barra unica come o recuo direito; os itens avancam .3125rem para manter a largura de antes */
@container scroll-state(scrollable: y){html.vn .vn-side > :not(.vn-gaveta), html.vn .vn-gaveta > *{margin-right:-.3125rem;}}
html.vn .vn-side .marca{display:flex; align-items:center; gap:.625rem; padding:0 .625rem 1.375rem; border-radius:var(--r2);}
html.vn .vn-side .marca svg{width:4.625rem; height:auto; max-height:none;}
html.vn .vn-side .marca span{font-size:var(--fn, .75rem); color:var(--tx3); font-weight:500; border-left:1px solid var(--line2); padding-left:.625rem;}
html.vn .vn-nav{display:flex; flex-direction:column; gap:var(--e0); view-transition-name:none;}
html.vn .vn-nav .it{display:flex; align-items:center; gap:.6875rem; min-height:2.25rem; padding:var(--e1) .625rem; border-radius:var(--r2); color:var(--tx2); font-weight:500; font-size:var(--fm, .84375rem); text-decoration:none; background:transparent; border:0; font-family:inherit; cursor:pointer; width:100%; text-align:left; transition:background-color var(--t1) var(--mola), color var(--t1) var(--mola);}
html.vn .vn-nav .it svg{width:1.0625rem; height:1.0625rem; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
html.vn .vn-nav .it .qt{margin-left:auto; font-size:var(--fn, .75rem); color:var(--tx3); font-weight:500;}
html.vn .vn-nav .it[aria-current="page"], html.vn .vn-nav a.it.vai{background:var(--s2); color:var(--tx1); box-shadow:inset 0 0 0 .5px var(--line2);}
@media (hover:hover) and (pointer:fine){
  html.vn .vn-nav .it:not([aria-current="page"]):hover{background:var(--fillh); color:var(--tx1);}
}
html.vn .vn-nav .grp{margin-top:var(--e4); display:flex; flex-direction:column; gap:var(--e0);}
html.vn .vn-nav .gcab{display:flex; align-items:center; gap:var(--e2); padding:0 .625rem .375rem; font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--tx3);}
html.vn .vn-nav .gcab svg{width:.75rem; height:.75rem; stroke:currentColor; fill:none; stroke-width:2;}
html.vn .pt{width:.4375rem; height:.4375rem; border-radius:50%; flex:none; display:inline-block; background:var(--neutro);}
html.vn .pt.glpi{background:var(--glpi);}
html.vn .pt.rm, html.vn .pt.redmine, html.vn .pt.qa{background:var(--rm);}
html.vn .pt.devsecops{background:var(--roxo);}
html.vn .vn-nav .gbt{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:var(--e2); width:100%; padding:0 .625rem .375rem; font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--tx3); cursor:pointer; border-radius:var(--r1);}
html.vn .vn-nav .gbt:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn .vn-nav .gbt .seta{margin-left:auto; display:inline-flex; transition:transform var(--t1, .18s) ease;}
html.vn .vn-nav .gbt .seta svg{width:.8125rem; height:.8125rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
html.vn .vn-nav .gbt[aria-expanded="false"] .seta{transform:rotate(-90deg);}
@media (hover:hover) and (pointer:fine){
  html.vn .vn-nav .gbt:hover{color:var(--tx2);}
}
html.vn .vn-nav .gitens{display:flex; flex-direction:column; gap:var(--e0);}
/* cor do filete do item atual por grupo (28/10 leva e): so o ::before reto (abaixo, bloco "menu lateral: filete"); a
   antiga inset 2px de box-shadow seguia a curva do raio do item e, somada ao filete azul, virava um degrade torto */
html.vn .vn-nav .grp.devsecops .it{--nav-filete:var(--roxo);}
html.vn .vn-nav .it .qt.ext svg{width:.8125rem; height:.8125rem; stroke-width:2;}
html.vn .vn-nav .grp .it{padding-left:1.75rem;}
html.vn .vn-nav .grp.glpi .it{--nav-filete:var(--glpi);}
html.vn .vn-nav .grp.redmine .it{--nav-filete:var(--rm);}
html.vn .vn-nav .grp.adm .it{--nav-filete:var(--tx2);}
html.vn .vn-nav .it.bloq{color:var(--tx3);}
html.vn .vn-nav .it.bloq .qt svg{width:.875rem; height:.875rem;}
html.vn .vn-nav .ligar{display:flex; align-items:center; gap:.625rem; margin:0 var(--e1); min-height:2.375rem; padding:0 var(--e3); border-radius:var(--r2); border:1px dashed var(--line2); color:var(--tx2); font:inherit; font-size:var(--f2); background:transparent; cursor:pointer; text-align:left;}
html.vn .vn-nav .ligar svg{width:.9375rem; height:.9375rem; stroke:currentColor; fill:none; stroke-width:2;}
html.vn .vn-nav .ligar b{color:var(--rm-t); font-weight:600; margin-left:auto; font-size:var(--fn, .75rem);}
html.vn .vn-nav .ligar.glpi b{color:var(--glpi-t);}
html.vn .vn-side .vn-pe{margin-top:auto; padding-top:var(--e4);}
html.vn .vn-conta{display:flex; align-items:center; gap:.625rem; padding:.875rem .625rem var(--e1); margin-top:.625rem; border-top:1px solid var(--line);}
html.vn .vn-side .quem{all:unset; box-sizing:border-box; display:grid; grid-template-columns:2rem minmax(0,1fr); grid-template-rows:auto auto; column-gap:.625rem; align-items:center; min-width:0; flex:1; border-radius:var(--r2); view-transition-name:quem;}
html.vn .vn-side .quem[hidden]{display:none;}
html.vn .vn-side .quem[role="button"]{cursor:pointer;}
html.vn .vn-side .quem::before{display:none;}
html.vn .vn-side .quem .ini{display:grid !important; place-items:center; grid-row:1 / span 2; width:2rem; height:2rem; border-radius:50%; background:var(--s3); font-size:var(--fn, .75rem); font-weight:600; color:var(--tx1); letter-spacing:0;}
html.vn .vn-side .quem b{position:static !important; width:auto !important; height:auto !important; margin:0 !important; clip-path:none !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--f2); font-weight:600; color:var(--tx1); line-height:1.2;}
html.vn .vn-side .quem .papel{font-size:var(--f1); color:var(--tx3); font-weight:500;}
html.vn .vn-side .quem .papel i{position:static !important; width:auto !important; height:auto !important; clip-path:none !important;}
html.vn .vn-fontes{display:flex; gap:.3125rem; flex-wrap:wrap; padding:var(--e2) .625rem 0 3.25rem;}
html.vn .fchip{display:inline-flex; align-items:center; gap:.3125rem; font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; padding:.0625rem .4375rem .0625rem .375rem; border-radius:var(--rp); white-space:nowrap; line-height:1.6;}
html.vn .fchip.glpi{background:var(--glpi-bg); color:var(--glpi-t);}
html.vn .fchip.redmine, html.vn .fchip.rm{background:var(--rm-bg); color:var(--rm-t);}
html.vn .fchip.off{background:transparent; color:var(--tx3); box-shadow:inset 0 0 0 1px var(--line2);}
html.vn header.top.vn-topo{display:flex; align-items:center; gap:.875rem; flex-wrap:nowrap; min-height:3.75rem; padding:0 2.25rem; margin:0 -2.25rem 1.625rem; border-bottom:1px solid var(--line);}
html.vn .vn-topo .crumb{display:flex; align-items:center; gap:var(--e2); font-size:var(--f2); color:var(--tx3); font-weight:500; min-width:0; overflow:hidden;}
html.vn .vn-topo .crumb b{color:var(--tx1); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
html.vn .vn-topo .crumb .src{display:inline-flex; align-items:center; gap:.4375rem; color:var(--tx2);}
html.vn .vn-topo .dir{margin-left:auto; display:flex; align-items:center; gap:.625rem; flex-wrap:nowrap; flex:none;}
html.vn .vn-topo .crumb .src{white-space:nowrap;}
/* caminho no celular (sobra do Lote B, 06/10/2026): em 390px com A+ ele quebra em linha em vez de cortar com reticencias */
@media (max-width: 620px){
  html.vn .vn-topo .crumb{flex-wrap:wrap; row-gap:0; overflow:visible; padding:var(--e1) 0; line-height:1.35;}
  html.vn .vn-topo .crumb b{white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere;}
}
html.vn .vn-topo .tema::before{display:none;}
html.vn .vn-topo .lido{display:flex; align-items:center; gap:.4375rem; font-size:var(--fr, .78125rem); color:var(--tx3); white-space:nowrap;}
html.vn .vn-topo .lido .pt{background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg);}
/* faixas do topo (simulacao, perfil, avisos): um componente, o mesmo raio, borda e icone (06/10/2026) */
html.vn #faixa-simulacao{justify-content:center; text-align:center; font-weight:600;}
html.vn .faixa-topo, html.vn .aviso-perfil{max-width:none; margin:calc(-1 * var(--e3)) 0 1.125rem; display:flex; gap:.625rem; align-items:center; padding:.6875rem .875rem; border-radius:var(--r2); border:0; font-size:var(--f2); line-height:1.5; background:var(--warn-bg); color:var(--warn-t);}
html.vn :is(.faixa-topo, .aviso-perfil)::before{content:""; flex:none; width:1rem; height:1rem; background:currentColor;
  -webkit-mask:var(--ico-alerta) center / contain no-repeat; mask:var(--ico-alerta) center / contain no-repeat;}
html.vn #aviso-fila::before{content:none;}
/* aviso dentro da tela (.ia-aviso) e o alerta "Escrita no GLPI desligada" (.ia-aviso.alerta): um so,
   em Credenciais e em Permissoes (eram .ad-faixa e .ia-chave, com o bloco antigo por cima) */
html.vn .ia-aviso{display:flex; gap:var(--e3); align-items:flex-start; padding:var(--e3) var(--e4); border-radius:var(--r2); font-size:var(--f2); line-height:1.5; background:var(--s2); color:var(--tx2); box-shadow:inset 0 0 0 1px var(--line);}
html.vn .ia-aviso b{color:var(--tx1);}
html.vn .ia-aviso a{font-variant-numeric:tabular-nums;}   /* 28/10: datas no link do aviso (19/10) */
html.vn .ia-aviso svg{flex:none; margin-top:.1875rem;}
html.vn .ia-aviso[hidden]{display:none;}
html.vn .ia-aviso.alerta{margin:0 0 var(--e4); color:var(--warn-t); background:var(--warn-bg); box-shadow:none;}
html.vn .ia-aviso.alerta b{color:inherit;}
html.vn #aviso-fila{background:var(--s1); color:var(--tx2); box-shadow:var(--sh); padding:var(--e4) 1.125rem;}
html.vn #aviso-fila b{color:var(--tx1);}
html.vn .vn-selo-fila{display:flex; align-items:center; gap:.875rem; padding:.875rem 1.125rem; margin:0 0 1.25rem; border-radius:var(--r3); background:var(--glpi-bg); color:var(--glpi-t); font-size:var(--f2); line-height:1.5;}
html.vn .vn-selo-fila b{color:var(--tx1); font-weight:600; display:block; font-size:var(--fm, .84375rem);}
html.vn .vn-selo-fila.irr{background:var(--roxo-bg); color:var(--roxo-t);}
html.vn .vn-selo-fila .av{width:2.125rem; height:2.125rem; border-radius:50%; background:var(--glpi-fill, var(--glpi)); color:var(--branco); flex:none; display:grid; place-items:center; font-size:var(--fn, .75rem); font-weight:600;}
html.vn .vn-selo-fila.irr .av{background:var(--roxo);}
html.vn .titpag{margin:0 0 1.375rem;}
html.vn input[type="search"], html.vn input[type="text"], html.vn input[type="password"], html.vn input[type="date"], html.vn input[type="email"], html.vn input[type="number"], html.vn select, html.vn textarea{font-family:inherit;}
html.vn .alto{gap:.875rem;}
html.vn .ch{border-radius:var(--r3);}
html.vn .l1 .fchip{margin-right:var(--e0);}
html.vn .det{background:var(--s2); border-radius:var(--r3); padding:1.125rem 1.25rem; box-shadow:inset 0 0 0 1px var(--line);}
html.vn .det .ult{position:relative; padding:var(--e3) .875rem var(--e3) 1.875rem; background:var(--s1); border-radius:var(--r2); box-shadow:inset 0 0 0 1px var(--line); color:var(--tx2);}
html.vn .det .ult::before{content:""; position:absolute; left:.8125rem; top:1.0625rem; width:.5625rem; height:.5625rem; border-radius:50%; background:var(--glpi); box-shadow:0 0 0 3px var(--glpi-bg);}
html.vn .det .ult::after{content:""; position:absolute; left:1.0625rem; top:1.875rem; bottom:.625rem; width:1px; background:var(--line2);}
html.vn .det .dados{color:var(--tx3);}
html.vn .msg-dlg::backdrop, html.vn .conta-dlg::backdrop{background:var(--veu);}
html.vn .conta-dlg{border:1px solid var(--line2); border-radius:var(--r4); padding:var(--e5) 1.625rem; max-width:32.5rem; background:var(--s1); color:var(--tx1); box-shadow:var(--sh2);}
html.vn .conta-dlg h2{font-size:1.25rem; font-weight:650; margin:0 0 var(--e1);}
html.vn .conta-dlg .fonte{margin-top:.875rem; padding:var(--e4) 1.125rem; border:0; border-radius:var(--r3); background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); gap:.625rem;}
html.vn .conta-dlg .fonte > b{display:flex; align-items:center; gap:var(--e2); font-size:var(--f3);}
html.vn .conta-dlg .fonte > b::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--glpi);}
html.vn .conta-dlg .fonte.redmine > b::before{background:var(--rm);}
html.vn .conta-dlg input{height:2.75rem; border-radius:var(--r2); background:var(--s1); border:0; box-shadow:inset 0 0 0 1px var(--line2); font-family:ui-monospace, "DejaVu Sans Mono", monospace; font-size:var(--fm, .84375rem); padding:0 .875rem;}
html.vn .conta-dlg input:focus{outline:0; box-shadow:inset 0 0 0 1px var(--rm), 0 0 0 4px var(--rm-bg);}
html.vn .conta-dlg button{border-radius:var(--r2); min-height:2.25rem; font-weight:600; font-size:var(--f2); padding:0 var(--e4); background:var(--rm); color:var(--sobre-rm);}
html.vn .conta-dlg .fonte.glpi button:not(.sec){background:var(--glpi-fill, var(--glpi)); color:var(--branco);}
html.vn .conta-dlg button.sec{background:transparent; color:var(--tx2); padding:0; min-height:0;}
html.vn .conta-dlg button[data-desliga]{color:var(--crit-t); padding:0 .875rem; min-height:2.125rem; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--crit) 35%, transparent);}
html.vn .conta-dlg .msg{color:var(--tx2);}
@media (max-width:980px){
  html.vn{--lside:0px;}
  html.vn body{padding-left:0;}
  html.vn .vn-side{position:static; width:auto; border-right:0; border-bottom:1px solid var(--line);}
  html.vn .vn-conta{padding-top:.625rem;}
  html.vn .tela{padding:0 var(--e4);}
  html.vn header.top.vn-topo{margin:0 calc(-1 * var(--e4)) 1.25rem; padding:0 var(--e4);}
  html.vn .splash{left:0;}
}
@media (max-width:820px){
  html.vn .ctr.linha, html.vn .ctr.linha.dupla{grid-template-columns:minmax(0,1fr);}
  html.vn .ctr.linha .seg{max-width:100%; overflow-x:auto;}
}
html.vn .vn-selo-fila .av svg{width:1rem; height:1rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
/* Tabela padrao: .tab (Usuarios, Rodizio, listas de detalhe do Desempenho). Coluna de numero, data
   ou codigo em td.num (tabular, so a largura que precisa); a coluna sem classe fica com a sobra */
.tab{width:100%; border-collapse:collapse; font-size:var(--fs, .90625rem);}
.tab th{font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--tx3); text-align:left; padding:.375rem 1.125rem var(--e2); white-space:nowrap;}
.tab td{padding:.5625rem 1.125rem; box-shadow:inset 0 .5px 0 var(--sep); vertical-align:middle;}
.tab td.num{font-variant-numeric:tabular-nums; color:var(--label2); width:1%; white-space:nowrap;}
.tab td.ac{width:1%; text-align:right; white-space:nowrap;}
.tab td.nome.sem{color:var(--label3); font-size:var(--f2);}
.tab tr.vazia td{color:var(--label3); font-size:var(--fm, .84375rem); padding:.875rem 1.125rem;}
/* .tab.empilha (22/10/2026, Equipe QA dos Chamados internos): ate 620px cada linha vira um bloco, sem rolagem
   lateral nem texto cortado em 360px com A+. A 1a celula ocupa a linha inteira, as do meio ficam lado a lado
   (td.num leva o rotulo da coluna em data-rot, porque o cabecalho sai da vista e fica so para leitor de tela) e
   as acoes (td.ac) descem para a propria linha, quebrando com botao na largura do conteudo. Acima de 620px e a
   .tab de sempre. 22/10/2026 (noite): quem decide e a largura do CARTAO, nao a da tela (com o menu lateral, em
   1024 e 1280 o cartao tem 700 a 850px e a tabela de 4 colunas com botoes passava da borda); o cartao que tem
   a tabela vira container e ela empilha ate 980px de cartao */
.cartao:has(.tab.empilha){container:empilha / inline-size;}
/* 04/11/2026 (escala de quebras): bloco que muda de layout pela largura do conteudo (a janela menos o menu
   lateral), e nao pela da janela; as telas consultam com @container tela (...) */
.cq{container:tela / inline-size; min-width:0;}
/* o .cq so embrulha: o filho segue no ritmo da tela (gap do container, sem margem propria) */
html.vn .tela > .cq > :is(*, #_), html.vn .tela > .vn-conteudo > .cq > :is(*, #_){margin-block:0;}
@container empilha (max-width:980px){
  .tab.empilha thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  .tab.empilha, .tab.empilha tbody{display:block;}
  .tab.empilha tr{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e3); padding:var(--e3) 1.125rem; box-shadow:inset 0 .5px 0 var(--sep);}
  .tab.empilha td{display:block; min-width:0; padding:0; box-shadow:none;}
  .tab.empilha td:first-child, .tab.empilha td[colspan]{flex-basis:100%; overflow-wrap:anywhere;}
  .tab.empilha td.num{width:auto;}
  .tab.empilha td.num:empty{display:none;}
  .tab.empilha td.num[data-rot]::before{content:attr(data-rot) " "; color:var(--tx3);}
  .tab.empilha td.ac{flex-basis:100%; width:auto; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); white-space:normal; text-align:left;}
}
/* .mini.fant: o mesmo botao sem fundo, como o .bt.fant (alca de arrastar do card do Meu painel). O :not
   passa a especificidade do .mini base (que vem depois) e perde para o hover dele */
html.vn .mini.fant:not([disabled]){background:transparent; color:var(--label3);}
/* quadro e cartao enxuto (13/10/2026): um componente so para o organizador do Meu painel, o quadro de
   Projetos e o bloco "Meus cartoes de projeto". Cabecalho numa linha (.l1: numero ou pastilha de fonte,
   um sinal que desce de linha inteiro quando nao cabe, idade e, na ponta, o .mini.fant da alca), titulo .tit em --f3
   com ate duas linhas, .pe e .rod. A folha da tela guarda so largura das colunas e o que e da tela */
html.vn .coluna{background:var(--card); border-radius:var(--r4); box-shadow:var(--sombra2); display:flex; flex-direction:column; min-height:11.25rem; position:relative; transition:box-shadow var(--t1) var(--mola);}
html.vn .coluna::before{content:""; position:absolute; left:var(--r4); right:var(--r4); top:0; height:.1875rem; border-radius:0 0 .1875rem .1875rem; background:var(--cc,var(--cinza)); opacity:.9;}
html.vn .coluna.sobre{box-shadow:var(--sombra2), 0 0 0 2px color-mix(in srgb,var(--cc,var(--blue)) 70%,transparent);}
html.vn .ccab{display:flex; align-items:center; gap:var(--e2); padding:var(--e4) 1.125rem var(--e2);}
html.vn .ccab .bola{width:.5625rem; height:.5625rem; border-radius:50%; background:var(--cc,var(--cinza)); flex:none;}
html.vn .ccab h3{font-size:var(--f3); font-weight:600; margin:0; letter-spacing:-.01em; min-width:0; overflow-wrap:anywhere;}  /* 28/10/2026: o nome da coluna quebra, nunca corta */
html.vn .ccab .n{margin-left:auto; font-size:var(--fr, .78125rem); color:var(--label3); font-variant-numeric:tabular-nums;}
html.vn .cards{display:flex; flex-direction:column; gap:var(--e2); padding:var(--e1) var(--rec-quadro) var(--rec-quadro); min-height:3.5rem; flex:1;}
html.vn .solte{border:1px dashed transparent; border-radius:var(--r-int); padding:.625rem var(--e1); font-size:var(--fr, .78125rem); color:var(--label3); text-align:center; transition:border-color var(--t2) var(--mola), color var(--t2) var(--mola), background-color var(--t2) var(--mola);}
html.vn .arrastando-quadro .solte{border-color:var(--sep); color:var(--label2); padding:.875rem var(--e1);}
html.vn .coluna.sobre .solte{border-color:color-mix(in srgb,var(--cc,var(--blue)) 70%,transparent); color:var(--label2); background:color-mix(in srgb,var(--cc,var(--blue)) 8%,transparent);}
html.vn .card{background:var(--fill); border-radius:var(--r-int); padding:.6875rem var(--e3) .625rem; cursor:grab; position:relative; transition:background-color var(--t1) var(--mola), opacity var(--t2) var(--mola), transform var(--t1) var(--mola);}
html.vn .card:active{cursor:grabbing;}
html.vn .card.arrastando{opacity:.45; transform:scale(.98);}
html.vn .card:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
/* a .l1 quebra a linha quando nao cabe (14/10, "Muito alta" cortada em 390 com A+): o sinal desce inteiro
   em vez de encolher com reticencias; so encolhe o sinal mais largo que a linha toda */
html.vn .card .l1{display:flex; align-items:center; gap:.375rem; row-gap:var(--e1); flex-wrap:wrap; min-width:0; min-height:1.375rem;}
html.vn .card .l1 > :is(.badge, .ad-st){min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis;}
html.vn .card .l1 > :is(.cod, .fchip){flex:none;}
/* 23/10/2026: selo de chamado que e link (a.fchip) ganha alvo de 44px no ::after, sem engordar o desenho */
html.vn .card .l1 > a.fchip{position:relative;}
html.vn .card .l1 > a.fchip::after{content:""; position:absolute; left:50%; top:50%; width:max(100%,2.75rem); height:max(100%,2.75rem); transform:translate(-50%,-50%);}
html.vn .card .cod:hover{color:var(--blue);}
html.vn .card .cod:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:var(--r1);}
html.vn .card .dias{margin-left:auto; flex:1 0 auto; text-align:right; font-size:var(--fr, .78125rem); color:var(--label2); font-variant-numeric:tabular-nums; white-space:nowrap;}
html.vn .card .dias.velho{color:var(--red); font-weight:600;}
/* a alca (ou o atalho do bloco do Meu painel) e o .mini.fant na ponta direita: so o lugar na linha, sem
   crescer o card. No toque o alvo segue com 44px, avancando sobre o respiro do card */
html.vn .card .l1 > .mini{margin:-.25rem -.375rem -.25rem auto;}
/* a idade cresce ate a alca (flex 1): na mesma linha a alca fica colada nela; se a linha quebrar, a
   alca desce para a direita (margin-left auto), nunca solta a esquerda */
html.vn .card .alca{cursor:grab; touch-action:none;}
@media (pointer:coarse){
  html.vn .card .l1 > .mini{margin:-.6875rem -.625rem -.6875rem auto;}
}
/* revisao 20/10/2026: quando a .l1 quebrava (pastilha larga em coluna estreita, ate a 1440 px) a alca descia
   SOZINHA para uma linha propria, quase vazia. Agora ela fica presa no canto de cima, centrada na primeira
   linha (11px de padding + metade dos 22px da .l1), e a .l1 reserva o lugar dela; a idade fica na ponta */
html.vn .card .l1:has(> .mini){padding-right:1.25rem;}
html.vn .card .l1 > .mini:is(*, #_){position:absolute; margin:0; top:calc(.6875rem + .6875rem - .9375rem); right:.375rem;}
@media (pointer:coarse){
  html.vn .card .l1 > .mini:is(*, #_){top:0; right:.125rem;}
}
/* card sem selo na .l1 (so a alca): a alca vai para o canto, sem uma linha so para ela. Valia so ate 620 px;
   em 23/10/2026 (cartao neutro de Novo e Planejado, sem "Sem chamado") passa a valer em toda largura */
html.vn .card .l1:has(> .alca:only-child){position:absolute; top:var(--e0); right:var(--e0); min-height:0;}
html.vn .card:has(> .l1 > .alca:only-child) > .tit{padding-right:var(--e6);}
@media (pointer:coarse){
  html.vn .card:has(> .l1 > .alca:only-child) > .tit{padding-right:2.5rem;}
}
/* sem .l1 na linha (ou com ela fora do fluxo) o titulo abre o card: o respiro de cima e o padding, sem a margem */
html.vn .card > :is(.tit:first-child, .l1:has(> .alca:only-child) + .tit){margin-top:0;}
/* titulo no tamanho de item de lista (--f3), ate duas linhas com reticencias; vence o html.vn .tit (--f4) */
html.vn .card .tit{font-size:var(--f3); line-height:1.35; margin:.375rem 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
html.vn .card .pe{font-size:var(--fr, .78125rem); line-height:1.35; color:var(--label2); margin-top:.3125rem; overflow-wrap:anywhere;}  /* 28/10/2026: requerente e responsavel saem inteiros (antes cortava em 2 linhas) */
html.vn .card .rod{position:relative; padding:0; display:flex; align-items:center; gap:.375rem; margin-top:.5625rem; flex-wrap:nowrap; min-width:0; min-height:1.625rem;}
html.vn .card .rod > :is(.badge, .ad-st){min-width:0; overflow:hidden; text-overflow:ellipsis;}
/* revisao 20/10/2026: a 1024 px a pastilha de situacao ("Com voce") encolhia ate 54px e cortava; ela fica
   inteira e, se nao couber ao lado do seletor, a linha quebra */
html.vn .card .rod:has(> :is(.badge, .ad-st)){flex-wrap:wrap; row-gap:var(--e1);}
html.vn .card .rod > :is(.badge, .ad-st){flex:none; max-width:100%;}
/* controle no rodape do cartao: o mesmo fundo nas duas telas (o .sel do time.css vinha em --s2, o do Meu painel em --card) */
html.vn .card .rod .sel{background-color:var(--card);}

/* campo de formulário no diálogo (14/10, Projetos; fora da cauda extra, que espelha o gerador): label.ad-novo-l com o rótulo .ad-k em cima e o controle na
   largura toda, campo, data e select iguais (o select ficava na largura do texto); o erro p.ad-nota[role=alert] em vermelho */
.ad-dlg .ad-novo-l{display:flex; flex-direction:column; min-width:0;}
.ad-dlg .ad-novo-l[hidden]{display:none;}
.ad-dlg .ad-novo-l > :is(.ad-campo, .sel){width:100%; min-width:0;}
.ad-dlg .ad-nota[role="alert"]{color:var(--crit-t);}
/* motivo da pendencia na atribuicao (14/10; fora da cauda extra, que espelha o gerador): o select.sel ocupa a linha que sobra e quebra inteiro no celular */
.conf .acoes > .sel{flex:1 1 16rem; min-width:0; max-width:100%; background-color:var(--card);}
/* ---- Menu de escolha (componente, 14/10/2026; fora da cauda extra, que espelha o gerador). Pedido do
   Weslley: "novamente nao esta padronizado". Um menu so para o seletor do card (motivo da pendencia e
   situacao no time), a Fila e o Atribuido a: div.menu[role=menu] > .gcab (cabecalho do grupo, opcional)
   + button.opt[role=menuitemradio] com bolinha i, rotulo .ot e marca .ok. Largura fixa por faixa (o menu
   nao muda de tamanho pelo texto), fundo opaco --s1 (o vidro translucido mudava conforme o que ficava
   atras), item marcado com fundo --fill e peso 600 em todos, contorno so no foco por teclado. */
.menu{position:fixed; z-index:var(--z-menu); box-sizing:border-box; min-width:16rem; max-width:min(20rem, calc(100vw - 1.25rem)); max-height:calc(100dvh - 1rem); overflow-y:auto; padding:.375rem; border-radius:var(--r4); background:var(--s1); color:var(--tx1); box-shadow:var(--realce), var(--flutua); backdrop-filter:none; -webkit-backdrop-filter:none;}
.menu .gcab{padding:var(--e1) .625rem var(--e2); font-size:var(--f1); font-weight:600; line-height:1.3; color:var(--tx3);}
.menu .opt{display:flex; align-items:center; gap:.625rem; width:100%; min-height:2.25rem; padding:var(--e2) .625rem; border-radius:var(--r3); background:none; border:0; color:var(--tx1); font:inherit; font-size:var(--f3); font-weight:400; line-height:1.3; cursor:pointer; text-align:left;}
.menu .opt .ot{flex:1 1 auto; min-width:0;}
.menu .opt i{width:.5625rem; height:.5625rem; border-radius:50%; background:var(--c); flex:none;}
.menu .opt .ok{flex:none; color:var(--glpi-t); font-weight:700; visibility:hidden;}
.menu .opt[aria-checked="true"]{background:var(--fill); font-weight:600;}
.menu .opt[aria-checked="true"] .ok{visibility:visible;}
@media (hover:hover) and (pointer:fine){
  .menu .opt:hover{background:var(--fillh);}
  .menu .opt[aria-checked="true"]:hover{background:var(--fill);}
  /* o menu abre por cima do ponteiro parado: o item que cai sob ele nao ganha fundo ate o mouse mexer
     (no print do Weslley parecia um segundo item marcado) */
  .menu.parado .opt:not([aria-checked="true"]):hover{background:none;}
}
.menu .opt:active{background:var(--toque);}
.menu .opt:focus{outline:none;}
.menu .opt:focus-visible{outline:2px solid var(--glpi); outline-offset:-2px;}
/* ==== painel.css (extra) ==== */
/* ==== controle de tamanho da letra (A- / A+) ==== */
/* 01/10/2026: no desenho dos botoes do topo do antigo: trilha em pilula (--segbg + sulco) com os botoes so de icone/texto */
html.vn .tam-letra{display:inline-flex; align-items:center; gap:var(--e0); padding:var(--e0); flex:none; background:var(--segbg); box-shadow:var(--segsulco); border-radius:var(--rp);}
html.vn .tam-letra .tam{width:auto; min-width:var(--btopo, 1.875rem); height:var(--btopo, 1.875rem); padding:0 var(--e2); border-radius:var(--rp); color:var(--label2); background:transparent; box-shadow:none; font-size:var(--f2); font-weight:600; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:0; font-family:inherit;}
html.vn .tam-letra .tam-val{min-width:3.25rem; font-variant-numeric:tabular-nums; color:var(--tx1);}
html.vn .tam-letra .tam:hover:not(:disabled){color:var(--label); background:var(--toque);}
html.vn .tam-letra .tam:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn .tam-letra .tam:disabled{opacity:.45; cursor:default;}
html.vn .tam-letra .tam-val[aria-pressed="true"]{color:var(--segsel-txt); background:var(--segsel); box-shadow:var(--segpastilha);}
html.vn .vn-topo .dir{gap:var(--e2);}
@media (max-width:620px){
  html.vn .tam-letra .tam{min-width:1.75rem; height:2rem; padding:0 var(--e1);}
  html.vn .tam-letra .tam-val{min-width:2.75rem;}
}

/* ==== contadores do menu (mockup 03) ==== */
html.vn .vn-nav .it[aria-current="page"] .qt{color:var(--tx2);}
@media (max-width:980px){
  html.vn header.top.vn-topo{flex-wrap:wrap; row-gap:0;}
}

/* ==== selo rico da fila geral (mockup 13, .banda) ==== */
html.vn .vn-selo-fila{gap:.875rem; padding:.875rem 1.125rem; margin:0 0 1.125rem; background:linear-gradient(90deg, color-mix(in srgb, var(--glpi) 18%, transparent), color-mix(in srgb, var(--glpi) 6%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--glpi) 35%, transparent); color:var(--glpi-t);}
html.vn .vn-selo-fila.irr{background:linear-gradient(90deg, color-mix(in srgb, var(--roxo) 18%, transparent), color-mix(in srgb, var(--roxo) 6%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--roxo) 35%, transparent); color:var(--roxo-t);}
html.vn .vn-selo-fila .av{width:2.25rem; height:2.25rem;}
html.vn .vn-selo-fila .av svg{width:1.125rem; height:1.125rem; stroke:var(--branco);}
html.vn .vn-selo-fila > div{min-width:0;}
html.vn .vn-selo-fila b{font-size:var(--f4); font-weight:650;}
html.vn .vn-selo-fila small{display:block; font-size:var(--f2); margin-top:var(--e0);}
html.vn .vn-selo-bt{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:var(--e2); height:2rem; padding:0 var(--e3); border-radius:var(--r2);
  font-size:var(--f2); font-weight:600; color:var(--tx1); background:var(--s2); box-shadow:inset 0 0 0 1px var(--line2); text-decoration:none; white-space:nowrap;}
html.vn .vn-selo-bt:hover{background:var(--s3);}
html.vn .vn-selo-bt:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn .vn-selo-bt svg{width:.9375rem; height:.9375rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:620px){ html.vn .vn-selo-fila{flex-wrap:wrap;} html.vn .vn-selo-bt{margin-left:3.125rem;} }

/* Movimento no visual novo: so transform e opacity (sem repintar cor ou fundo a cada quadro). */
html.vn *, html.vn *::before, html.vn *::after{transition-property:transform, opacity !important;}
@keyframes vn-pulsa{50%{opacity:.5;}}
/* esqueletos: brilho unico no bloco "fluidez D+E" (fim do arquivo) */
@media (prefers-reduced-motion:reduce){
  html.vn *, html.vn *::before, html.vn *::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

/* Dialogo de followup: desde 01/10/2026 sem override, fica com o desenho do antigo (topo.tpl.html). */

/* Barra do topo estreita: os grupos de botoes quebram linha em vez de vazar a tela. */
@media (max-width:620px){ html.vn .vn-topo .dir{flex-wrap:wrap; justify-content:flex-end; row-gap:var(--e2); max-width:100%; min-width:0;} html.vn .vn-topo #vn-lido{flex-basis:100%; text-align:right;} }

/* Contraste AA (auditado nos dois temas): botao cheio usa --glpi-fill, cor de estado vira texto legivel. */
html.vn .conta-dlg .fonte.glpi button:not(.sec){background:var(--glpi-fill); color:var(--branco);}
/* D07: no escuro a cor da situacao volta a ser a do antigo (pura); o clareamento p/ contraste AA fica so no tema claro */
html.vn.claro .selsit{color:color-mix(in srgb,var(--sf) 70%,var(--tx1));}

/* ==== menu lateral: sanfonas e logo (01/10/2026) ==== */
/* logo maior: com 4,6rem a marca ficava espremida e cortava embaixo */
html.vn .vn-side .marca{padding:var(--e1) var(--e3) var(--e5); padding-right:2.5rem; align-items:center; min-height:3.25rem;}
html.vn .vn-side .marca svg{width:6.5rem; height:auto; max-height:none; overflow:visible;}
/* sanfona tambem na Administracao: o cabecalho tem o escudo antes do nome */
html.vn .vn-nav .grp.adm .gbt svg{width:.75rem; height:.75rem; stroke:currentColor; fill:none; stroke-width:2;}
html.vn .vn-nav .gitens[hidden]{display:none;}
@media (max-width:980px){
  html.vn .vn-side .marca{padding-right:var(--e3);}
}

/* logo do menu lateral nao corta embaixo (antes vinha junto da troca do .coluna no tokeniza.py) */
.logo-msb{overflow:visible;}
/* == ligar-espera == */
/* credencial pedida e ainda nao liberada: o convite do menu mostra a espera */
html.vn .vn-nav .ligar.espera{border-style:solid; border-color:var(--line);}
html.vn .vn-nav .ligar.espera b, html.vn .vn-nav .ligar.glpi.espera b{color:var(--warn-t);}
/* == /ligar-espera == */
/* == qa-r1-links == */
/* link no meio do texto (nota, explicacao, aviso) no azul do sistema, nunca no roxo do navegador */
html.vn :where(p, .dica) a:where(:not(.bt):not(.seg a)){color:var(--glpi-t); text-decoration:none; font-weight:500;}
html.vn :where(p, .dica) a:where(:not(.bt):not(.seg a)):hover{text-decoration:underline;}
/* == /qa-r1-links == */

/* D08: gaveta da Fila, componentes internos como no antigo (ultima interacao e botao Tornar interno) */
html.vn .det .ult{padding:.6875rem .875rem; background:var(--card2); border-radius:var(--r3); box-shadow:none; color:var(--label2); font-size:var(--f3);}
html.vn .det .ult::before, html.vn .det .ult::after{content:none;}
html.vn .campos .marcar:not([data-ligado="1"]):not(:hover){background:none; color:var(--label2);}

/* D11: selo da fila geral com o componente de aviso que a Fila ja usa (#aviso-fila: cartao neutro), sem faixa colorida;
   "Ver rodizio" vira link de texto como "Configurar rodizio" do Time */
html.vn .vn-selo-fila, html.vn .vn-selo-fila.irr{background:var(--card); color:var(--label2); box-shadow:var(--sombra2); border-radius:var(--r4); padding:var(--e4) 1.125rem; font-size:var(--f3);}
html.vn .vn-selo-fila b, html.vn .vn-selo-fila.irr b{color:var(--label); font-size:var(--f3); font-weight:600;}
html.vn .vn-selo-fila small{font-size:var(--f2); color:var(--label2);}
html.vn .vn-selo-fila .av, html.vn .vn-selo-fila.irr .av{background:var(--fill); color:var(--label2);}
html.vn .vn-selo-fila .av svg{stroke:currentColor;}
html.vn .vn-selo-bt, html.vn .vn-selo-bt:hover{height:auto; padding:0; background:none; box-shadow:none; border-radius:0; color:var(--blue); font-weight:600; text-decoration:underline;}

/* botao que e link (a.bt) nunca sublinha, em tela nenhuma (02/10/2026): o sublinhado vinha do padrao do navegador */
a.bt, a.bt:link, a.bt:visited, a.bt:hover, a.bt:focus, a.bt:focus-visible, a.bt:active{text-decoration:none !important;}
/* sanfona do menu lateral (02/10/2026): uma aberta por vez (o casco cuida), abre e fecha pela altura
   (grid-template-rows 0fr -> 1fr) e pela opacidade, na curva --mola. Cabecalho leve com a seta a
   direita; aberto, so o texto acende. Itens recuados, com a linha-guia a esquerda */
html.vn .vn-nav .grp.dobra, html.vn .vn-nav .grp.adm{gap:0;}
html.vn .vn-nav .gbt{min-height:2rem; padding:0 .625rem; border-radius:var(--r2); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; letter-spacing:.06em; color:var(--tx3); transition:color var(--dur-2) var(--ease-padrao), background-color var(--dur-2) var(--ease-padrao), transform var(--dur-1) var(--ease-padrao);}
html.vn .vn-nav .gbt[aria-expanded="true"]{color:var(--tx2);}
html.vn .vn-nav .gbt .seta{margin-left:auto; opacity:.75; transform:rotate(-90deg); transition:transform var(--dur-3) var(--ease-padrao), opacity var(--dur-3) var(--ease-padrao);}
html.vn .vn-nav .gbt[aria-expanded="true"] .seta{transform:none; opacity:1;}
@media (hover:hover) and (pointer:fine){
  html.vn .vn-nav .gbt:hover{color:var(--tx1); background:var(--fillh);}
  html.vn .vn-nav .gbt:hover .seta{opacity:1;}
}
html.vn .vn-nav .gitens{display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows var(--dur-3) var(--ease-padrao), opacity var(--dur-3) var(--ease-padrao), visibility 0s linear var(--dur-3);}
html.vn .vn-nav .gbt[aria-expanded="true"] + .gitens{grid-template-rows:1fr; opacity:1; visibility:visible; transition-delay:0s;}
html.vn .vn-nav .gitens-in{min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:var(--e0); margin-left:1.0625rem; padding-left:.375rem; border-left:1px solid var(--line);}
html.vn .vn-nav .gitens-in > .it:first-child{margin-top:.125rem;}
html.vn .vn-nav .gitens-in > .it:last-child{margin-bottom:.375rem;}
html.vn .vn-nav .grp .gitens-in .it{padding-left:.625rem;}
html.vn .vn-nav .gitens-in .it:focus-visible{outline-offset:-2px;}
/* item 38 (06/10/2026): titulo de subsecao dentro de um grupo (Administracao > Geral, GLPI, Redmine): o mesmo rotulo de secao (.gcab), com respiro em cima */
html.vn .vn-nav .gitens-in > .gcab.sub{padding:var(--e2) .625rem var(--e0);}
html.vn .vn-nav .gitens-in > .gcab.sub.primeira{padding-top:.125rem;}
html.vn .vn-side.sem-anim .gitens, html.vn .vn-side.sem-anim .gbt, html.vn .vn-side.sem-anim .gbt .seta{transition:none;}
@media (prefers-reduced-motion:reduce){
  html.vn .vn-nav .gitens, html.vn .vn-nav .gbt, html.vn .vn-nav .gbt .seta{transition:none;}
}
/* 02/10 noite: o nome no topo (span#quem, role link/botao, tabIndex 0) ganhava foco sem anel visivel */
#quem:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
/* 02/10 noite: hover que faltava (mesma tinta dos .bt e das pilulas): resposta rapida, situacao, legenda e linha da Administracao */
@media (hover:hover) and (pointer:fine){
  button.msg-rapida:not([disabled]):hover{background:var(--fill);}
  .selsit:not([disabled]):hover{background:var(--toque);}
  .legb:not([aria-pressed="true"]):hover{background:var(--toque); color:var(--label);}
  .ad-lin:not(.ad-th):hover{background:var(--fillh);}
}
/* 02/10 noite: contraste AA (4,5:1) no tema noite do visual novo. So os tons de TEXTO clareiam
   (azul ~#6fb0ef, rosa e indigo ~15%), o --blue de fundo cheio fica; avatar com fundo mais escuro */
html.vn:not(.claro) button.msg-rapida{color:var(--glpi-t);}
html.vn.claro button.msg-rapida, html.vn body.claro button.msg-rapida{color:var(--glpi-t);}   /* 28/10/2026: no claro tambem (--blue #1f6fbf dava 3,9:1 sobre o cartao parado) */
html.vn:not(.claro) .dias.velho, html.vn:not(.claro) .dias.velho .si{color:var(--crit-t);}
html.vn:not(.claro) .b-planejado{--bf:#94a6f4;}
html.vn:not(.claro) .selsit{--blue:var(--glpi-t); --pink:#ec86aa; --indigo:#94a6f4;}
/* 28/10/2026: no escuro o texto do seletor clareia como no claro escurece; puro dava 3,5 a 3,9:1. 60% da cor
   da situacao (e nao 70%): o rosa da gestao no card destacado (#313d5a) ficava em 4,49:1 no axe */
html.vn:not(.claro) .selsit{color:color-mix(in srgb, var(--sf) 60%, var(--tx1));}
html.vn:not(.claro) .ghead .q.qint.zerado{opacity:1; color:var(--tx3);}
/* 01/11/2026 (gaveta-modal, auditor no claro): no claro o zero do grupo tambem sai sem a opacidade de .55 da
   fila.css, que dava 2,07:1 (#919bb0 sobre #d9dee8); o "zerado" fica no peso e na cor secundaria */
html.vn.claro .ghead .q.qint.zerado, html.vn body.claro .ghead .q.qint.zerado{opacity:1; color:var(--tx2);}
html.vn:not(.claro) .rr-av{background:var(--glpi-fill);}
html.vn:not(.claro) .fchip.glpi{color:var(--glpi-t);}
html.vn:not(.claro) .funcao .per{color:var(--tx2);}
/* 02/10 noite: grupo de fonte nao ligada no menu. O cabecalho e o convite (mesma altura dos outros) */
html.vn .vn-nav .gbt.ligar-cab{cursor:pointer;}
html.vn .vn-nav .gbt.ligar-cab .ligar-nome::before{content:attr(data-nome);}   /* 28/10/2026: titulo do grupo fora do texto do botao (WCAG 2.5.3) */
html.vn .vn-nav .gbt.ligar-cab b{margin-left:auto; text-transform:none; letter-spacing:0; font-size:var(--fn, .75rem); font-weight:600; color:var(--rm-t);}
html.vn .vn-nav .gbt.ligar-cab.glpi b{color:var(--glpi-t);}
html.vn .vn-nav .gbt.ligar-cab.espera b{color:var(--warn-t);}

/* ==== 02/10/2026 leva 5: componentes base do visual novo, no padrão da Fila ==== */
/* Uma definição só para botão, campo, busca, h2 de seção, diálogo, cartão, etiqueta e ícone. As telas
   (meu.css, time.css, modelos.css, feedback.css, relatorio.css) guardam só o que é delas: largura,
   posição, cor de estado. */
/* botão: pílula neutra; .primario azul cheio, .ok verde, .fant/.leve sem fundo, .perigo
   em vermelho, .sm menor (.pri e .peq migrados para .primario e .sm em 06/10/2026). As variantes ficam em :where() para pesar o mesmo que o .bt:
   a regra de uma tela (ex.: .ia-pop .bt.primario.perigo) ganha sem precisar de !important */
html.vn .bt{display:inline-flex; align-items:center; justify-content:center; gap:.375rem; min-height:2.125rem; padding:0 var(--e4); border:0; border-radius:var(--rp); background:var(--fill); color:var(--label); box-shadow:none; font:inherit; font-size:var(--fm, .84375rem); font-weight:600; line-height:1.2; cursor:pointer; white-space:nowrap; text-decoration:none; filter:none;
  transition:background-color var(--t1) var(--mola), color var(--t1) var(--mola), transform var(--t1) var(--mola), opacity var(--t1) var(--mola);}
html.vn .bt svg{width:.9375rem; height:.9375rem; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
html.vn .bt:active:where(:not([disabled])){transform:scale(.96);}
html.vn .bt:is([disabled], :disabled){opacity:.5; cursor:not-allowed;}
html.vn .bt:where(.primario){background:var(--glpi-fill); color:var(--sobre-fill);}
html.vn .bt:where(.ok){background:var(--ok); color:var(--sobre-ok);}
html.vn .bt:where(.fant, .leve){background:transparent; color:var(--label2);}
html.vn .bt:where(.leve){color:var(--blue);}
html.vn .bt:where(.perigo){color:var(--crit-t);}
html.vn .bt:where(.primario.perigo){background:var(--crit-fill, color-mix(in srgb, var(--red) 80%, var(--preto))); color:var(--branco);}
/* rotulo comprido (14/10/2026): .bt.quebra nao passa da largura de quem o contem; a linha quebra dentro do botao */
html.vn .bt:where(.quebra){max-width:100%; white-space:normal; text-align:center; padding-block:var(--e1);}
html.vn .bt:where(.sm){min-height:1.875rem; padding:0 var(--e3); font-size:var(--fn, .75rem);}
@media (hover:hover) and (pointer:fine){
  html.vn .bt:hover:where(:not([disabled])){background:var(--toque);}
  html.vn .bt:hover:where(.fant, .leve):where(:not([disabled])){background:var(--fill);}
  html.vn .bt:hover:where(.primario):where(:not([disabled])){background:var(--glpi-fill); opacity:.85;}
  html.vn .bt:hover:where(.ok):where(:not([disabled])){background:var(--ok); opacity:.85;}
  html.vn .bt:hover:where(.primario.perigo):where(:not([disabled])){background:var(--crit-fill, color-mix(in srgb, var(--red) 80%, var(--preto))); opacity:.85;}
}
/* campo: o da gaveta da Fila (pílula em --card2, anel azul no foco). Especificidade zero: a regra
   da tela só precisa dizer o que é dela (largura, fonte de código) */
:where(html.vn) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="color"], [type="submit"], [type="button"], [type="reset"]), select, textarea){box-sizing:border-box; min-height:2.125rem; max-width:100%; border:0; border-radius:var(--rp); background:var(--card2); color:var(--label); box-shadow:none; font:inherit; font-size:var(--f3); padding:0 var(--e3);}
:where(html.vn) :where(textarea){border-radius:var(--r2); padding:var(--e2) var(--e3); line-height:1.5;}
/* 28/10/2026 (WCAG 1.4.11, contraste-nao-texto): campo preenchido sem borda ficava com 1,1 a 1,2:1 contra o fundo, e
   o .sel/select com borda de 1:1 no escuro. Linha de 1px com 3:1 ou mais contra --bg, --s1, --s2 e --s3 nos dois temas */
html.vn{--campo-linha:#7b8aaa;}
html.vn.claro, html.vn body.claro{--campo-linha:#717e99;}
html.vn :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):is(*, #_){border:1px solid var(--campo-linha);}
:where(html.vn) :where(input, textarea)::placeholder{color:var(--label3);}
:where(html.vn) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), select, textarea):focus{outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent);}
:where(html.vn) :where(input, select, textarea):disabled{opacity:.5; cursor:not-allowed;}
/* select unico (06/10/2026): mesmo campo (altura, raio, fundo, foco), seta propria em token e lista aberta
   no tema (option/optgroup com fundo e cor do token; sem isso o Windows abre a lista clara com texto branco) */
html.vn select:not([multiple]){appearance:none; -webkit-appearance:none; padding-right:2rem; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--tx3) 50%), linear-gradient(135deg, var(--tx3) 50%, transparent 50%);
  background-position:calc(100% - 1.0625rem) 52%, calc(100% - .75rem) 52%; background-size:.3125rem .3125rem; background-repeat:no-repeat;}
html.vn :is(select option, select optgroup){background-color:var(--s1); color:var(--tx1);}
html.vn select option:disabled{color:var(--tx3);}
/* busca: a da Fila (pílula no fundo do seletor) */
/* ux-03 (04/11/2026): a busca tem a mesma linha de 3:1 dos outros campos (--campo-linha), no input e fora dele */
html.vn :is(.busca, input[type="search"]){min-height:1.875rem; padding:.3125rem .875rem; border:1px solid var(--campo-linha); border-radius:var(--rp); background:var(--segbg); color:var(--label); box-shadow:var(--realce2); font:inherit; font-size:var(--f2);}
html.vn :is(.busca, input[type="search"])::placeholder{color:var(--label3);}
html.vn :is(.busca, input[type="search"]):focus{outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent);}
/* h2 de seção: o cabeçalho de grupo da Fila */
:where(html.vn) :where(.cab, .grupo-cab, .qcab, .ghead, .cabgraf, .cx, .rel .sc) > h2{margin:0;}
html.vn :is(.cab, .grupo-cab, .qcab, .ghead, .cabgraf, .cx, .rel .sc) > h2{font-size:var(--fr, .78125rem); font-weight:600; line-height:1.3; letter-spacing:.045em; text-transform:uppercase; color:var(--label2);}
/* Icone de titulo .ico-tit (28/10/2026): traco discreto antes do texto do h2 do cartao, no tamanho da letra e na
   cor apagada; so enfeite (aria-hidden), o titulo continua sendo o texto */
html.vn :is(.cab, .qcab) > h2 > .ico-tit{display:inline-block; width:1.05em; height:1.05em; margin-right:.45em; vertical-align:-.16em; color:var(--label3); flex:none;}
/* diálogo: raio --r4, borda fina, título 1,25rem e o botão de fechar da gaveta da Fila */
html.vn dialog:not(.grande){border:1px solid var(--line2); border-radius:var(--r4); background:var(--s1); color:var(--tx1); box-shadow:var(--sh2);}
html.vn dialog:not(.grande)::backdrop{background:var(--veu);}
/* diálogo de confirmação .ad-dlg (Administração, Inventário, Projetos e a Fila): form em coluna,
   rodapé .ad-dlg-ft com os botões à direita. Saiu da folha da Administração em 14/10 */
.ad-dlg{padding:0; width:min(28rem, calc(100vw - 2rem));}
.ad-dlg form{display:flex; flex-direction:column; gap:var(--e3); padding:var(--e5);}
.ad-dlg p{margin:0; color:var(--tx2); font-size:var(--f2); line-height:1.5;}
.ad-dlg .ad-campo[hidden], .ad-dlg .bt[hidden]{display:none;}
.ad-dlg p.ad-nota{color:var(--tx3); font-size:var(--f2);}   /* nota do confirmaPainel (ex.: modo simulação do Backlog); 28/10: mesmo tamanho do texto, a cor separa */
/* 28/10/2026 (tamanhos-demais-no-cartao): o dialogo tinha 5 tamanhos (20, 14, 13,5, 13 e 11,5px). Fica titulo, texto e
   controles no tamanho do texto; no mobile o campo e os botoes sobem juntos para --f4 (campo abaixo de 16px faz o iOS dar zoom) */
html.vn .ad-dlg :is(.ad-campo, .ad-dlg-ft > .bt):is(*, #_){font-size:var(--f2);}
@media (max-width:620px){ html.vn .ad-dlg :is(.ad-campo, .ad-dlg-ft > .bt):is(*, #_){font-size:var(--f4);} }
.ad-dlg-ft{display:flex; justify-content:flex-end; gap:var(--e2); margin-top:var(--e2);}
html.vn dialog:not(.grande) :is(.mh h2, .mh h3, .dcab h2, form > h2, :scope > h2){font-size:1.25rem; font-weight:650; letter-spacing:-.01em; line-height:1.3; color:var(--tx1);}
html.vn :is(.gav-x, .msg-dlg .mh .x){flex:none; margin-left:auto; width:2.25rem; height:2.25rem; padding:0; display:grid; place-items:center; border:0; border-radius:var(--rp); background:var(--s1); color:var(--tx2); box-shadow:inset 0 0 0 1px var(--line); font:inherit; cursor:pointer;}
html.vn :is(.gav-x, .msg-dlg .mh .x):focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn :is(.gav-x, .msg-dlg .mh .x) svg{width:1rem; height:1rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
@media (hover:hover) and (pointer:fine){
  html.vn :is(.gav-x, .msg-dlg .mh .x):hover{background:var(--s2); color:var(--tx1);}
}
/* cartão: o da Fila */
html.vn :is(.cartao, .cx, .ad-card){border:0; border-radius:var(--r4); background:var(--card); box-shadow:var(--sombra2);}
/* recuo do cartão (C-1, 14/10/2026): o respiro vem do componente e todo filho direto herda. Fica de fora só
   o bloco de ponta a ponta, que traz o mesmo recuo por dentro (cabeçalho, linha de lista, tabela, rolador,
   célula de métrica). Bloco novo de ponta a ponta usa .ponta; o resto não precisa de margem própria.
   Peso baixo de propósito (:where): a regra da tela com classe ainda manda, o "p{margin:0}" não. */
html.vn{--rec-cartao:1.125rem;}
/* cor do motivo de pendencia por lado (14/10/2026): fonte unica para a pastilha do card e a bolinha do
   menu de motivos (topo.tpl.html COR_LADO aponta para estes nomes). E a cor da situacao que o lado
   gera: cliente e terceiro viram "Retorno solicitado" (azul), gestao vira "Com a gestao" (rosa).
   Declarado tambem no body para seguir o tema quando o .claro mora nele */
:root, body{--pend-cliente:var(--blue); --pend-terceiro:var(--blue); --pend-gestao:var(--pink);}
html.vn :where(.cartao, .ad-card) > :where(:not(.ponta, .ancora, .sr, .cab, .ccab, .met, .item, .linha, .funcoes, .proxima, .legenda,
  .faixa, .tags, .semanas, .cards, .nada, .lista, .us-lista, table, .tab, .des-tab, .ia-tab-caixa, .ia-flt, .ia-lgs, .ia-rodape,
  .rod, .rod-h, .rod-rodape, .sem-cab, .add, .escrita, .us-form, .rr-ag-bloco, .rr-sem-bloco, .rr-vr)){margin-inline:var(--rec-cartao);}
/* etiqueta: uma altura só (1,375rem); a cor continua de cada estado */
html.vn :is(.badge, .ad-st, .ad-g, .selo, .tag, .pil-marca, .us-st){box-sizing:border-box; display:inline-flex; align-items:center; gap:.3125rem; height:1.375rem; padding:0 .5625rem; border-radius:var(--rp); font-size:var(--fr, .78125rem); font-weight:600; line-height:1; letter-spacing:-.005em; white-space:nowrap; font-variant-numeric:tabular-nums;}
/* pagina avulsa (14/10/2026): tela fora do casco (confirmar a saida, endereco que nao existe). Um cartao
   centrado, sem a barra lateral; o recuo do conteudo vem do cartao, como em qualquer tela */
html.vn:has(.avulsa){--lside:0px;}
html.vn body:has(> .avulsa){padding:0;}
html.vn .avulsa{box-sizing:border-box; min-height:100dvh; display:grid; grid-template-columns:minmax(0, 1fr); place-items:center; padding:var(--e5) var(--rec-cartao) calc(var(--e5) + env(safe-area-inset-bottom, 0rem));}
html.vn .avulsa > .cartao{box-sizing:border-box; width:100%; max-width:24.5rem; margin:0; display:flex; flex-direction:column; gap:var(--e3); padding:1.75rem 0 1.5rem;}
html.vn .avulsa h1{margin-block:0; font-size:var(--f5); font-weight:650; letter-spacing:-.03em; line-height:1.2;}
html.vn .avulsa p{margin-block:0; color:var(--label2); font-size:var(--f3); line-height:1.5;}
html.vn .avulsa .acoes{display:flex; flex-direction:column; gap:var(--e2); margin-top:var(--e2);}
html.vn .avulsa .acoes .bt{min-height:2.75rem; font-size:var(--f4);}
/* pastilha comprida (14/10/2026): no telefone com fonte maior ela nao cabe na linha; quebra dentro da
   propria pastilha em vez de vazar do cartao */
html.vn :is(.cab, .ccab) > .selo, html.vn .ad-avisos > .ad-st{max-width:100%; height:auto; min-height:1.375rem; padding-block:.25rem; white-space:normal; line-height:1.2;}
/* pastilha unica (06/10/2026): .badge, .ad-st, .selo, .tag e .pil-marca tem a mesma geometria (a de cima)
   e o mesmo fundo de referencia; as telas so escolhem a tinta. Estados semanticos: */
html.vn :is(.ad-st, .selo, .tag, .pil-marca, .us-st){background:var(--fill); color:var(--tx1);}
/* indicadores .metricas/.met: um componente so na Fila, no Meu painel, no Backlog, no Inventario e na
   Evolucao (06/10/2026; eram cinco copias). Numero sempre no topo, mesmo com rotulo quebrado; a grade nao
   estica ate o vizinho; zero (fora o total) sempre esmaecido, pela classe .zero */
html.vn .metricas{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(9.625rem,100%),1fr)); align-self:start; background:var(--card); border-radius:var(--r4); overflow:hidden; box-shadow:var(--sombra2);}
html.vn .met{position:relative; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; padding:var(--e4) 1.125rem; box-shadow:0 0 0 .5px var(--sep); text-align:left; border:0; background:none; color:inherit; font:inherit;}
html.vn button.met{cursor:pointer; transition:background-color var(--t1) var(--mola);}
html.vn .met b{display:block; font-size:var(--f6); font-weight:600; letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums; color:var(--c,var(--label));}
html.vn .met span{display:block; font-size:var(--f2); color:var(--label2); margin-top:var(--e0); line-height:1.3;}
html.vn .met.zero b{color:var(--tx3);}
/* 28/10/2026 (a11y): no claro a cor viva do numero (laranja #c9621a = 4,0:1) nao passa 4,5:1 quando o numero cai para 17px no mobile; escurece 15% */
:is(html.vn.claro, html.vn body.claro) .met:not(.zero) b{color:color-mix(in srgb, var(--c, var(--label)) 85%, var(--preto));}
html.vn .met.ativo{background:var(--fill);}
html.vn .met.ativo span{color:var(--label); font-weight:500;}
html.vn .met:focus-visible{outline:2px solid var(--glpi); outline-offset:-3px; border-radius:var(--r2);}
@media (hover:hover) and (pointer:fine){ html.vn button.met:not(.ativo):hover{background:var(--toque);} }
/* numero e titulo do chamado (06/10/2026): um estilo cada na Fila, no Meu painel, no Backlog, na ficha e no relatorio */
html.vn :is(.cod, a.cod){font-size:var(--f2); font-weight:600; color:var(--tx1); font-variant-numeric:tabular-nums; text-decoration:none;}
html.vn .tit{font-size:var(--f4); font-weight:400; letter-spacing:-.017em; color:var(--tx1);}
html.vn .tit a{color:inherit; text-decoration:none;}
html.vn .ad-st .pt{width:.4375rem; height:.4375rem; border-radius:50%; background:currentColor; flex:none;}
html.vn :is(.ad-st, .selo, .tag).ok{background:var(--ok-bg); color:var(--ok-t);}
html.vn .ad-st.pend{background:var(--warn-bg); color:var(--warn-t);}
html.vn .ad-st.nao{background:var(--crit-bg); color:var(--crit-t);}
html.vn .ad-st.off{color:var(--tx3);}
html.vn .ad-st.info{background:var(--glpi-bg); color:var(--glpi-t);}
html.vn .pil-marca{background:var(--rm-bg); color:var(--rm-t);}
/* prioridade: escala graduada igual na Fila, no Meu painel, no Backlog e na ficha (window.nivelPrio no topo) */
html.vn .ad-st.pr-baixa{background:var(--fill); color:var(--tx3);}
html.vn .ad-st.pr-media{background:var(--neutro-bg); color:var(--neutro);}
html.vn .ad-st.pr-alta{background:var(--warn-bg); color:var(--warn-t);}
html.vn .ad-st.pr-malta{background:var(--rm-bg); color:var(--rm-t);}
html.vn .ad-st.pr-crit{background:var(--crit-bg); color:var(--crit-t);}
/* .badge: situacao do chamado (texto colorido no fundo neutro) e alerta de SLA (cheio) */
.badge{background:var(--bb,var(--fill)); color:var(--bf,var(--tx1));}
.b-novo{--bb:var(--info-bg); --bf:var(--info-t);}
.b-andamento{--bb:var(--ok-bg); --bf:var(--ok-t);}
.b-planejado, .b-feito{--bb:var(--roxo-bg); --bf:var(--roxo-t);}
.b-pendente, .b-interno{--bb:var(--fill); --bf:var(--tx1);}
.b-risco{--bb:var(--red); --bf:var(--sobre-alerta);}
.b-acao{--bb:var(--orange); --bf:var(--sobre-alerta);}
.b-ambar{--bb:var(--yellow); --bf:var(--sobre-alerta);}
/* claro: branco no laranja dava 4,0:1 na pastilha de risco do SLA; 90% do laranja sobe para 4,8:1 */
html.vn.claro .b-acao, html.vn body.claro .b-acao{--bb:color-mix(in srgb, var(--orange) 90%, var(--preto));}
html.vn body.compacta .item:not(.aberta) .badge{height:1rem;}
/* ícone de botão pequeno (subir, descer, excluir): SVG no lugar dos glifos */
html.vn svg.sv{display:block; width:.875rem; height:.875rem; flex:none; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
html.vn .tirar svg.sv{width:.625rem; height:.625rem; stroke-width:2.6;}
/* barra de filtros em grade (06/10/2026): grupos de pilulas lado a lado com o rotulo em cima, a busca (.larga)
   fica com a sobra da linha; no telefone empilha. Mesmas .ctr.linha/.seg/.buscacx da Fila e do Inventario */
html.vn .filtros-grade{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--e3) var(--e5);}
html.vn .filtros-grade > .ctr.linha{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--e1); flex:0 1 auto; min-width:0; max-width:100%; margin:0;}
html.vn .filtros-grade > .ctr.linha > .rot{padding-top:0;}
html.vn .filtros-grade > .ctr.linha.larga{flex:1 1 18rem;}
html.vn .filtros-grade .buscacx .busca{max-width:none;}
/* interruptor unico (06/10/2026): button.sw[aria-checked] ou input.sw[type=checkbox], mesmo desenho em Permissões e Modelos */
html.vn .sw{appearance:none; -webkit-appearance:none; margin:0; width:2.125rem; height:1.25rem; border-radius:var(--rp); border:0; padding:0; background:var(--s3); position:relative; flex:none; box-shadow:inset 0 0 0 1px var(--line2); cursor:pointer; transition:background-color var(--t1) var(--mola);}
html.vn .sw::after{content:""; position:absolute; top:.1875rem; left:.1875rem; width:.875rem; height:.875rem; border-radius:50%; background:var(--tx3); transition:transform var(--dur-2) var(--ease-padrao);}
html.vn :is(.sw.on, input.sw:checked){background:var(--glpi-fill); box-shadow:none;}
html.vn :is(.sw.on, input.sw:checked)::after{transform:translateX(.875rem); background:var(--sobre-fill);}
html.vn .sw[disabled]{opacity:.4; cursor:not-allowed;}
html.vn .sw:focus-visible{outline:2px solid var(--glpi-t); outline-offset:2px;}
html.vn button.sw::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, 2.75rem); height:max(100%, 2.75rem); transform:translate(-50%, -50%);}   /* 28/10/2026: alvo de 44px sem mudar o desenho de 34x20 (WCAG 2.5.8) */
/* opcao com interruptor (08/10/2026): .regras > label com input.sw, o texto e um <small> de explicacao.
   Era so do Modelos (telas/modelos.css); subiu para ca porque a entrada ("Permanecer conectado") usa igual */
html.vn .regras label{display:flex; gap:var(--e2); align-items:flex-start; font-size:var(--f3);}
html.vn .regras small{display:block; color:var(--label2); font-size:var(--fr, .78125rem);}
/* botao pequeno de icone (06/10/2026): .mini e .tirar sao um so, 30px como o .bt.sm, pilula */
html.vn :is(.mini, .tirar){display:inline-grid; place-items:center; padding:0; flex:none; width:1.875rem; height:1.875rem; border:0; border-radius:var(--rp);
  background:var(--fill); color:var(--label2); font:inherit; font-size:var(--fn, .75rem); font-weight:600; line-height:1; cursor:pointer;
  transition:background-color var(--t1) var(--mola), color var(--t1) var(--mola), transform var(--t1) var(--mola);}
html.vn :is(.mini, .tirar):active{transform:scale(.92);}
html.vn :is(.mini, .tirar):focus-visible{outline:2px solid var(--glpi); outline-offset:1px;}
html.vn :is(.mini, .tirar)[disabled]{opacity:.3; cursor:default;}
@media (hover:hover) and (pointer:fine){
  html.vn .mini:not([disabled]):hover{background:var(--toque); color:var(--label);}
  html.vn :is(.mini.rem, .mini.tirar):not([disabled]):hover{color:var(--crit-t);}
  html.vn .tirar:not([disabled]):hover{color:var(--sobre); background:var(--crit-fill, var(--red));}
}

/* ==== 02/10/2026 leva 5: menu do celular (até 980px) ==== */
/* No computador o botão Menu não aparece e a gaveta não existe para o layout (display:contents). No
   celular a lateral vira uma barra com o logo e o botão; a navegação (com a sanfona de sempre) abre
   embaixo dela e o conteúdo começa logo depois da barra */
html.vn .vn-menu{display:none;}
html.vn .vn-gaveta{display:contents;}
@media (max-width:980px){
  html.vn .vn-side{flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 var(--e2); padding:var(--e2) var(--e4); overflow:visible;}
  html.vn .vn-side .marca{min-height:2.75rem; padding:0 var(--e2); margin-right:auto;}
  html.vn .vn-menu{display:inline-flex; align-items:center; gap:var(--e2); min-height:2.5rem; padding:0 var(--e4); border:0; border-radius:var(--rp); background:var(--fill); color:var(--label); font:inherit; font-size:var(--fm, .84375rem); font-weight:600; cursor:pointer;}
  html.vn .vn-menu svg{width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
  html.vn .vn-menu .fecha, html.vn .vn-menu[aria-expanded="true"] .abre{display:none;}
  html.vn .vn-menu[aria-expanded="true"] .fecha{display:block;}
  html.vn .vn-gaveta{display:none; flex:0 0 100%; flex-direction:column; min-width:0; padding:var(--e2) 0 var(--e3);}
  html.vn .vn-side.aberto .vn-gaveta{display:flex;}
  html.vn .vn-side .vn-pe{margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid var(--line);}
}
@media (max-width:980px) and (hover:hover) and (pointer:fine){
  html.vn .vn-menu:hover{background:var(--toque);}
}

/* ==== 02/10/2026 leva 5: alvos de toque de 44px, só em tela de toque (o computador não muda) ==== */
@media (pointer:coarse){
  html.vn :is(.vn-nav a.it, .vn-nav .gbt, .vn-menu, .seg button, .seg a, .pill, .chip, .sug, .bt, .bt.sm, .mini, .tema, .gav-x, .msg-dlg .mh .x, .campos .marcar, .lista button, .chips button, .rel .semsel button, .marcador, button.msg-rapida, .sel, .sel.sit, .ad-campo, .tx, .inp, .campo){min-height:2.75rem;}
  /* a auditoria de acessos pesa mais (:has com id em time.css); repete o peso para ganhar */
  html.vn:has(#s-acessos) :is(.ia-flt button, .marcador){min-height:2.75rem;}
  html.vn .rel .semsel button{min-width:2.75rem;}
  /* QA C-3 (14/10/2026): botao de icone e a.abrir tambem na largura; o .selsit tambem na altura */
  html.vn :is(.mini, .gav-x, .msg-dlg .mh .x, .ad-abre, .tema, .tam, a.abrir){min-width:2.75rem;}
  html.vn :is(.ad-abre, .tema, .tam, button.selsit){min-height:2.75rem;}
  html.vn a.cod{display:inline-flex; align-items:center; min-height:2.75rem;}
  /* o .tirar e o .sw continuam do mesmo tamanho; o que cresce é a área que recebe o toque */
  :where(html.vn) :where(.tirar, .sw){position:relative;}
  html.vn :is(.tirar, .sw)::before{content:""; position:absolute; left:50%; top:50%; width:2.75rem; height:2.75rem; transform:translate(-50%, -50%);}
}

/* sino de notificacoes no cabecalho de cada sanfona (GLPI e Redmine), 02/10/2026: fica sobre a
   linha do cabecalho, antes da seta, sem quebrar o "gbt + .gitens" da animacao */
html.vn .vn-nav .grp{position:relative;}
html.vn .vn-nav .gsino{all:unset; box-sizing:border-box; position:absolute; top:0; right:1.75rem; height:2rem; width:1.75rem; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r2); color:var(--tx3); cursor:pointer; transition:color .2s var(--mola), background-color .2s var(--mola);}
html.vn .vn-nav .gsino svg{width:.8125rem; height:.8125rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
html.vn .vn-nav .gsino:not(.mudo){color:var(--glpi-t);}
html.vn .vn-nav .gsino.mudo{opacity:.7;}
html.vn .vn-nav .gsino:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
@media (hover:hover){ html.vn .vn-nav .gsino:hover{color:var(--tx1); background:var(--fillh); opacity:1;} }
@media (pointer:coarse){ html.vn .vn-nav .gsino{height:2.75rem; width:2.75rem; top:-.375rem;} }

/* ---- SLA do chamado (componente, 08/10/2026): linha .sla com as trilhas "1o atend." e "Solucao" e o
   bloco .prazos da gaveta. O JS que monta os dois e o do topo (trilhasSla, prazosSla): a Fila e o Meu
   painel usam os mesmos. A posicao no card fica no CSS de cada tela */
.sla{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1) var(--e3); margin-top:var(--e2); font-size:var(--fr, .78125rem); line-height:1rem; color:var(--label2); font-variant-numeric:tabular-nums; min-width:0;}
.sla .tr{--sc:var(--glpi); --sct:var(--tx1); display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1) var(--e2); min-width:0;}
.sla .tr.tto{flex:none; max-width:100%;}
.sla .tr.ttr{flex:0 0 auto; max-width:100%;}  /* 28/10/2026: sem lugar, a trilha inteira desce de linha antes de quebrar o texto */
.sla .rot{color:var(--label3); font-weight:500; flex:none;}
.sla .trilho{position:relative; flex:none; width:2.5rem; height:.25rem; border-radius:var(--rp); background:var(--fill);}
.sla .ttr .trilho{width:7.5rem;}
.sla .trilho i{position:absolute; left:0; top:0; bottom:0; width:var(--p); min-width:.25rem; border-radius:inherit; background:var(--sc);}
.sla .trilho b{position:absolute; left:var(--p); top:50%; width:2px; height:.625rem; margin:-.3125rem 0 0 -.0625rem; border-radius:.0625rem; background:var(--tx1);}
.sla .txt{flex:1 1 auto; min-width:min(100%, max-content); overflow-wrap:anywhere;}  /* 28/10/2026: sem reticencias; sem lugar, o texto inteiro desce para baixo da trilha e so quebra se for maior que a linha toda */
.sla .txt strong{font-weight:600; color:var(--sct);}
.sla .txt{line-height:1.35;}  /* 28/10/2026 (entrelinha-apertada): quando o texto do relogio quebra, 1rem em 12,5px dava 1,23x */
.sla .div{flex:none; width:1px; height:.75rem; background:var(--line2);}
.sla .tr.s-dentro{--sc:var(--glpi); --sct:var(--tx1);}
.sla .tr.s-atencao{--sc:var(--warn); --sct:var(--warn-t);}
.sla .tr.s-estouro{--sc:var(--crit); --sct:var(--crit-t);}
.sla .tr.s-estouro .trilho b{background:var(--crit-t); box-shadow:0 0 0 3px var(--crit-bg);}
.sla .tr.s-cumprido{--sc:var(--ok); --sct:var(--ok-t);}
.sla .tr.s-cumprido .trilho b, .sla .tr.s-atraso .trilho b{width:.4375rem; height:.4375rem; margin:-.21875rem 0 0 -.21875rem; border-radius:50%; background:var(--sc);}
.sla .tr.s-atraso{--sc:var(--crit); --sct:var(--crit-t);}
.sla .tr.s-atraso .trilho i{opacity:.55;}
.sla .tr.s-pausa{--sc:var(--label2); --sct:var(--tx1);}
.sla .tr.s-pausa .trilho{background:repeating-linear-gradient(135deg, var(--label3) 0 1.5px, var(--fill) 1.5px 4px);}
.sla .tr.s-pausa .trilho i{background:var(--label2);}
.sla .tr.s-pausa .trilho b{background:var(--tx1);}
.sla .tr.s-pausa .ico{flex:none; display:inline-flex; gap:.125rem; height:.5rem;}
.sla .tr.s-pausa .ico::before, .sla .tr.s-pausa .ico::after{content:""; width:2px; height:.5rem; border-radius:.0625rem; background:var(--tx1);}
.sla .tr.s-sem{color:var(--label3);}
.sla .tr.s-sem .ico{flex:none; width:.5rem; height:.5rem; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--label3);}
.sla .g{font-weight:700; margin-right:.1875rem;}
@media (max-width:620px){
  .sla{flex-wrap:wrap; row-gap:var(--e1);}
  .sla .div{display:none;}
  .sla .tr.tto, .sla .tr.ttr{flex:0 1 auto;}
  .sla .txt{white-space:normal;}
}
.prazos{margin:0 0 var(--e5); padding:var(--e4) 1.125rem 1.125rem; background:var(--card2); border-radius:var(--r3); font-variant-numeric:tabular-nums;}
.prazos h3{margin:0 0 var(--e3); font-size:var(--fr, .78125rem); font-weight:600; letter-spacing:.045em; text-transform:uppercase; color:var(--label2);}
.prazos .lin{--sct:var(--tx1);}
.prazos .lin.s-cumprido{--sct:var(--ok-t);}
.prazos .lin.s-atencao{--sct:var(--warn-t);}
.prazos .lin.s-estouro, .prazos .lin.s-atraso{--sct:var(--crit-t);}
.prazos .lin.s-atraso .eixo .run, .prazos .lin.s-atraso .eixo .over{opacity:.55;}
.prazos .lin + .lin{margin-top:var(--e4); padding-top:var(--e4); border-top:1px solid var(--line);}
.prazos .topo{display:flex; align-items:baseline; justify-content:space-between; gap:var(--e3); font-size:var(--f3); margin-bottom:var(--e2);}
.prazos .topo .q{font-weight:600; color:var(--tx1);}
.prazos .topo .st{font-weight:600; color:var(--sct);}
.prazos .eixo{position:relative; height:.4375rem; border-radius:var(--rp); background:var(--fill); margin:.375rem 0 0;}
.prazos .eixo span{position:absolute; top:0; bottom:0; left:var(--a); width:var(--w);}
.prazos .eixo .run{background:var(--glpi);}
.prazos .eixo .run.ok{background:var(--ok);}
.prazos .eixo .pau{background:repeating-linear-gradient(135deg, var(--neutro) 0 2px, transparent 2px 5px); opacity:.8;}
.prazos .eixo .over{background:var(--crit); border-radius:0 var(--rp) var(--rp) 0;}
.prazos .eixo span:first-child{border-radius:var(--rp) 0 0 var(--rp);}
.prazos .eixo .tick{left:var(--a); width:2px; top:-.3125rem; bottom:-.3125rem; margin-left:-.0625rem; border-radius:.0625rem; background:var(--tx1);}
.prazos .eixo .agora{left:var(--a); width:.6875rem; height:.6875rem; top:50%; margin:-.34375rem 0 0 -.34375rem; border-radius:50%; background:var(--tx1); box-shadow:0 0 0 3px var(--s2);}
.prazos .marcas{position:relative; height:2.125rem; margin-top:.375rem; font-size:max(var(--piso, 0rem), var(--f1, .71875rem)); line-height:1.0625rem; color:var(--label3);}
.prazos .marcas span{position:absolute; top:0; white-space:nowrap;}
.prazos .marcas b{display:block; font-weight:600; color:var(--label2);}
.prazos .marcas .c{transform:translateX(calc(-50% + var(--dx, 0px))); text-align:center;} /* --dx: arrumaUmaMarca encosta o rotulo na borda */
.prazos .marcas .d{right:0; text-align:right;}
.prazos .marcas.dois{height:4.25rem;}
.prazos .marcas .baixo{top:2.125rem;}
.prazos .resumo{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e5); margin-top:var(--e2); font-size:var(--fr, .78125rem); color:var(--label2);}
.prazos .resumo b{font-weight:600; color:var(--tx1);}
.prazos .leg{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e4); margin-top:var(--e4); font-size:max(var(--piso, 0rem), var(--f1, .71875rem)); color:var(--label3);}
.prazos .leg i{display:inline-block; width:.875rem; height:.375rem; border-radius:var(--rp); margin-right:.3125rem; vertical-align:middle;}

/* ---- Ficha do chamado (gaveta do detalhe), componente desde 08/10/2026: a mesma da Fila e do Meu
   painel, montada pelo montaDet do topo. Na Fila o .det mora no .item.aberta; no Meu painel, num
   .gaveta-host direto no <body> (fora do quadro, que tem mascara e rola de lado). Veu e gaveta acima
   de tudo (z 69 e 70, acima do menu lateral), fundo opaco --s1 */
.det{grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) 15.625rem; gap:1.125rem; margin-top:.875rem; padding-top:.875rem; cursor:default; position:relative;}
.det::before{content:""; position:absolute; left:0; right:0; top:0; height:.5px; background:var(--sep);}
.det p{margin:0 0 .5625rem;}
.det p:last-child{margin-bottom:0;}
.det .acao{font-size:var(--fc, .9375rem);}
.det .ult{font-size:var(--f3); color:var(--label2); background:var(--card2); border-radius:var(--r3); padding:.6875rem .875rem;}
.det .dados{font-size:var(--fr, .78125rem); color:var(--label3);}
.campos{display:flex; flex-direction:column; gap:.375rem;}
.campos label{font-size:var(--fr, .78125rem); color:var(--label2); font-weight:500;}
.campos .marcado{margin:0 0 var(--e1); font-size:var(--fn, .75rem); color:var(--label3); line-height:1.4;}
/* campos da ficha: a mesma altura e fonte do campo base (34px, --f3); o .campo e um botao com cara de campo */
.campos select, .campos input, .campos .campo{width:100%;}
.campos .campo{box-sizing:border-box; min-height:2.125rem; background:var(--card2); border:0; border-radius:var(--rp); color:var(--label); font:inherit; font-size:var(--f3); padding:0 var(--e3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--e2); cursor:pointer; text-align:left;}
.campos .campo::after{content:"⌄"; font-size:var(--f2); line-height:1; margin-top:calc(-1 * var(--e1)); color:var(--label3);}
.campos .campo:focus{outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 30%,transparent);}
.campos .campo[data-vazio="1"]{color:var(--crit-t);}
/* campo de texto livre na ficha (Minha anotacao do Meu painel): o mesmo .campo, em bloco e com o raio do textarea */
.campos textarea.campo{display:block; border-radius:var(--r2); padding:var(--e2) var(--e3); line-height:1.5; cursor:text; resize:vertical;}
.campos .marcar{align-self:flex-start; width:auto; margin-top:.625rem; display:inline-flex; align-items:center; gap:.4375rem; background:none; box-shadow:inset 0 0 0 1px var(--sep); color:var(--label2); border:0; border-radius:var(--rp); font:inherit; font-size:var(--f2); font-weight:500; padding:.375rem .875rem; cursor:pointer; transition:background-color var(--t1) var(--mola), color var(--t1) var(--mola), transform var(--t1) var(--mola);}
.campos .marcar::before{content:""; width:.4375rem; height:.4375rem; border-radius:50%; background:var(--label3);}
.campos .marcar:active{transform:scale(.97);}
.campos .marcar[data-ligado="1"]{color:var(--purple); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--purple) 45%,transparent); background:color-mix(in srgb,var(--purple) var(--mistura,12%),transparent);}
.campos .marcar[data-ligado="1"]::before{background:var(--purple);}
@media (hover:hover) and (pointer:fine){
  .campos .marcar:hover{background:var(--fillh); color:var(--label);}
  .campos .marcar[data-ligado="1"]:hover{color:var(--purple);}
}
.campos .glpi{margin-top:var(--e2); width:100%; color:var(--branco); background:var(--glpi-fill, var(--blue)); border:0; border-radius:var(--rp); font:inherit; font-size:var(--fm, .84375rem); font-weight:600; padding:var(--e2) var(--e3); cursor:pointer;}
.campos .glpi[disabled]{opacity:.5; cursor:default;}
.conf{grid-column:1/-1; margin-top:var(--e3); padding:.875rem var(--e4); border-radius:var(--r3); background:var(--card2); box-shadow:inset 0 0 0 .5px var(--sep), var(--pousa);}
.conf h3{margin:0 0 .375rem; font-size:var(--f3); font-weight:600;}
.conf p{margin:0 0 .625rem; font-size:var(--f2); color:var(--label2);}
.conf textarea{width:100%; min-height:5.5rem; resize:vertical; background:var(--card); color:var(--label); border:0; box-shadow:inset 0 0 0 .5px var(--sep); border-radius:var(--r2); font:inherit; font-size:var(--fm, .84375rem); padding:.625rem var(--e3); line-height:1.5;}
.conf textarea:focus{outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 30%,transparent);}
.conf .modo{margin:0 0 .625rem; display:flex; flex-wrap:wrap; align-items:center; gap:.625rem;}
.conf .modo .seg{margin-left:0;}
.conf .modo .obs{width:100%; margin:0;}
.conf .acoes{display:flex; gap:var(--e2); align-items:center; margin-top:.625rem; flex-wrap:wrap;}
.conf .env{color:var(--branco); background:var(--crit-fill, var(--red)); border:0; border-radius:var(--rp); font:inherit; font-size:var(--fm, .84375rem); font-weight:600; padding:.4375rem var(--e4); cursor:pointer;}
.conf .cancela{color:var(--blue); background:none; border:0; font:inherit; font-size:var(--fm, .84375rem); cursor:pointer;}
.conf .obs, .campos .obs{font-size:var(--fn, .75rem); color:var(--label3); margin:var(--e2) 0 0; line-height:1.45;}
.conf .obs.alerta, .campos .obs.alerta{color:var(--orange); font-weight:500;}
.campos .chk{display:flex; align-items:center; gap:var(--e2); margin-top:var(--e1); cursor:pointer; color:var(--label2);}
.campos .chk input{width:auto; accent-color:var(--blue);}
.det{animation:abre var(--t2) var(--mola) both;}
/* gaveta lateral do detalhe (mockup 05). O .det continua dentro do card, com os mesmos ids e
   ouvintes; so sai do fluxo. O veu e o ::after do proprio card: clicar nele fecha, pelo clique
   de sempre no card */
html.vn :is(.item.aberta, .gaveta-host)::after{content:""; position:fixed; inset:0; background:var(--veu); z-index:var(--z-veu); cursor:default; animation:vn-veu .18s ease-out both;}
html.vn :is(.item.aberta, .gaveta-host) .det{position:fixed; top:0; right:0; bottom:0; z-index:var(--z-gaveta); width:min(42.5rem, 100%); margin:0; display:flex; flex-direction:column; gap:0;
  padding:0; overflow-y:auto; overscroll-behavior:contain; background:var(--s1); border-radius:0; border-left:1px solid var(--line2); box-shadow:var(--sh2); cursor:auto;
  animation:vn-gaveta .22s cubic-bezier(.2,.8,.2,1) both;}
html.vn :is(.item.aberta, .gaveta-host) .det::before{content:none;}
html.vn .det > div:not(.gav-cab):not(.campos){padding:var(--e5) 1.875rem 0;}
html.vn .det .campos{padding:var(--e5) 1.875rem; margin-top:var(--e5); border-top:1px solid var(--line);}
/* D08: rotulos da gaveta como no antigo */
html.vn .det .campos label{font-size:var(--fr, .78125rem); font-weight:500; color:var(--label2);}
html.vn .det .acao{font-size:var(--f4); color:var(--tx1);}
html.vn .gav-cab{position:sticky; top:0; z-index:1; background:var(--s1); padding:var(--e5) 1.875rem 1.25rem; border-bottom:1px solid var(--line);}
html.vn .gav-l1{display:flex; align-items:center; gap:var(--e3); font-size:var(--f2); color:var(--tx3);}
html.vn .gav-l1 b{color:var(--tx1); font-weight:600;}
html.vn .gav-cab h2{font-size:1.3125rem; font-weight:650; letter-spacing:-.01em; line-height:1.3; margin:var(--e3) 0 0; color:var(--tx1);}
html.vn .gav-ss{display:flex; gap:var(--e2); margin-top:var(--e3); flex-wrap:wrap;}
@keyframes vn-gaveta{from{transform:translateX(2.5rem); opacity:0;} to{transform:none; opacity:1;}}
@keyframes vn-veu{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){ html.vn :is(.item.aberta, .gaveta-host) .det, html.vn :is(.item.aberta, .gaveta-host)::after{animation:none;} }
@media (max-width:820px){
  /* (layout de tabela das linhas removido) */
  html.vn .det > div:not(.gav-cab):not(.campos), html.vn .det .campos, html.vn .gav-cab{padding-left:var(--e4); padding-right:var(--e4);}
}
html.vn body:has(.item.aberta, .gaveta-host){overflow:hidden;}
/* ==== gaveta-modal 01/11/2026 (JS no casco, "gaveta do chamado como janela modal") ====
   O foco que sobe dentro da gaveta para abaixo do cabecalho fixo (--gav-cab-h, medido pelo casco), com o
   respiro de --e4; o conteudo da tela (#conteudo) atras da gaveta de tela cheia nao e pintado (ja esta
   inert; o menu continua pintado por baixo, como sempre); o A-/A+ vem para a linha de cima do cabecalho,
   junto do Fechar (.gav-ferr); sem largura para os dois ao lado do numero, o par desce inteiro e fica
   a direita, sem quebrar o rotulo "GLPI · Chamado" */
html.vn :is(.item.aberta, .gaveta-host) .det{scroll-padding-top:calc(var(--gav-cab-h, 0px) + var(--e4)); scroll-padding-bottom:var(--e4);}
html.vn.gav-cheia :is(#conteudo[data-gav-fora], #conteudo [data-gav-fora], [data-gav-fora] #conteudo){visibility:hidden;}
html.vn .gav-l1{flex-wrap:wrap; row-gap:var(--e2);}
html.vn .gav-ferr{display:flex; align-items:center; gap:var(--e2); flex:none; margin-left:auto;}
html.vn .gav-ferr > .gav-x{margin-left:0;}
/* ==== animacoes leves de menus e botoes (08/10/2026) ====
   Pedido do Weslley: "animacoes leves nos menus ao clicar" e "menus e botoes". Tudo entre 120 e
   200 ms (--dur-1/2/3), sem sobra de mola (--ease-entra ao abrir, --ease-padrao na troca de estado).
   Em repouso nada muda: so a passagem entre estados. O "so transform e opacity" do visual novo
   continua valendo para o resto; as excecoes abaixo sao pontuais e baratas (cor de controle pequeno,
   altura da sanfona do menu pelo grid-template-rows, posicao da pastilha absoluta do segmentado). */
/* botoes e controles clicaveis: hover e foco trocam fundo, borda, cor e opacidade com suavidade */
html.vn :is(.bt, .mini, .tirar, .pill, .chip, .legb, .copiar, .abrir, .limpar, .selsit, button.sel.sit, button.msg-rapida, button.met, .gtoggle, .seg button, .seg a, .tema, .marcador, .sug, .menu .opt, .vn-selo-bt, .vn-menu, .vn-nav .it, .vn-nav .gbt, .vn-nav .gsino){
  transition-property:transform, opacity, background-color, border-color, color, box-shadow !important;
  transition-duration:var(--dur-1), var(--dur-2), var(--dur-2), var(--dur-2), var(--dur-2), var(--dur-2);
  transition-timing-function:var(--ease-padrao);}
/* apertar: leve escala nos que ainda nao tinham (os demais ja encolhem no :active) */
html.vn :is(.selsit, button.sel.sit, button.msg-rapida, button.met, .gtoggle, .vn-selo-bt):active:not([disabled]){transform:scale(.97);}
html.vn :is(.vn-nav .it, .vn-nav .gbt):active:not([disabled]){transform:scale(.98);}
/* menu lateral: a secao abre e fecha pela altura (0fr -> 1fr) e pela opacidade, com a seta girando */
html.vn .vn-nav .gitens{transition-property:grid-template-rows, opacity, visibility !important;}
/* menu lateral: o item clicado acende (.vai, na regra do aria-current) e o atual apaga enquanto a proxima tela carrega (casco, .indo) */
html.vn .vn-nav.indo a.it[aria-current="page"]:not(.vai){background:transparent; color:var(--tx2); box-shadow:none;}
/* segmentado: a pastilha desliza ate a opcao escolhida (posicao e largura dela, que e absoluta) */
html.vn .seg > .ind{transition-property:left, width, opacity !important; transition-duration:var(--dur-3), var(--dur-3), var(--dur-1); transition-timing-function:var(--ease-padrao);}
/* fluidez E (28/10/2026): a pastilha posta pelo topo (.desliza) anda por transform (--x/--y); o left/width inline
   de tela que mexe na propria .ind e ignorado nela. A largura ainda acompanha a opcao (elemento absoluto: so ele relayouta) */
html.vn .seg > .ind.desliza{left:0 !important; width:var(--w, 0px) !important; transform:translate(var(--x, 0px), var(--y, 0px)); transition-property:transform, width, opacity !important;}
/* menus suspensos (situacao/"Pedir retorno", exportar do relatorio, pedido de token): entram com
   fade e leve deslocamento. So o "from": acabou a animacao, vale o estilo de sempre */
@keyframes vn-menu-entra{from{opacity:0; transform:translateY(-.25rem) scale(.98);}}
html.vn :is(.menu, .menu-exp .pop, .ia-pop){animation:vn-menu-entra var(--dur-3) var(--ease-entra) backwards; transform-origin:top center;}
/* sanfona dos grupos da fila: o cartao entra com fade e leve deslocamento ao abrir (fila, .abrindo) */
@keyframes vn-grupo-abre{from{opacity:0; transform:translateY(-.375rem);}}
html.vn .grupo.abrindo > .cartao{animation:vn-grupo-abre var(--dur-3) var(--ease-entra) backwards;}
/* a seta gira 90 graus: caixa quadrada e centrada, senao o giro a joga para fora do recuo */
html.vn .gchev{display:inline-block; width:1em; text-align:center; transition-duration:var(--dur-3); transition-timing-function:var(--ease-padrao);}
@media (prefers-reduced-motion:reduce){
  html.vn :is(.menu, .menu-exp .pop, .ia-pop), html.vn .grupo.abrindo > .cartao{animation:none;}
  html.vn :is(.selsit, button.sel.sit, button.msg-rapida, button.met, .gtoggle, .vn-selo-bt, .vn-nav .it, .vn-nav .gbt):active{transform:none;}
}
/* Relatorio da equipe mensal (08/10/2026): componentes novos, no guia (docs/PADRAO-VISUAL.md).
   .met .def e .met .var: linha de apoio e variacao do indicador (a do Desempenho, agora compartilhada) */
html.vn .met .def{display:block; font-size:var(--f1); color:var(--tx3); margin-top:var(--e1); line-height:1.35;}
html.vn .met .var{display:inline-flex; align-items:center; gap:.1875rem; font-size:var(--fr, .78125rem); font-weight:600; margin-left:var(--e2); vertical-align:middle; letter-spacing:0;}
html.vn .met .var.sobe{color:var(--ok-t);}
html.vn .met .var.desce{color:var(--crit-t);}
html.vn .met .var.neutro{color:var(--tx3);}
/* .limite: horas do mes contra o limite. --p preenchido, --a e --l posicao dos marcadores de alerta e
   limite, --x largura do trecho tracejado da hora extra aprovada (depois do limite), tudo em % da escala.
   Nivel pela classe: .ok, .alerta, .teto */
html.vn .limite{position:relative; height:.625rem; border-radius:var(--rp); background:var(--fill); min-width:0;}
html.vn .limite > i{position:absolute; left:0; top:0; bottom:0; width:var(--p); min-width:.25rem; border-radius:inherit; background:var(--ok);}
html.vn .limite.vazio > i{display:none;}
html.vn .limite.alerta > i{background:var(--warn);}
html.vn .limite.teto > i{background:var(--crit);}
/* 28/10/2026 (auditoria de bordas): o preenchimento e pintado no fundo da propria barra, que recorta pelo proprio
   raio. O <i> com raio herdado ficava com raio desenhado menor que o da barra quando estreito e passava da curva
   nos cantos da esquerda; ele segue no HTML, so sem fundo. Os marcadores (b) continuam saindo em cima e embaixo */
html.vn .limite{--lc:var(--ok); background:linear-gradient(90deg, var(--lc) max(var(--p, 0%), .25rem), transparent 0) no-repeat, var(--fill);}
html.vn .limite.alerta{--lc:var(--warn);}
html.vn .limite.teto{--lc:var(--crit);}
html.vn .limite.vazio{--lc:transparent;}
html.vn .limite.limite.limite > i{background:none;}
html.vn .limite > .he{position:absolute; top:0; bottom:0; left:var(--l); width:var(--x); border-radius:var(--rp); background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--glpi) 55%, transparent) 0 .1875rem, transparent .1875rem .375rem); box-shadow:inset 0 0 0 .0625rem color-mix(in srgb, var(--glpi) 60%, transparent);}
html.vn .limite > b{position:absolute; top:-.25rem; bottom:-.25rem; left:var(--l); width:.125rem; margin-left:-.0625rem; border-radius:var(--rp); background:var(--tx1);}
html.vn .limite > b.alerta{left:var(--a); background:var(--warn);}
html.vn .limite-rot{display:flex; justify-content:space-between; gap:var(--e2); margin-top:var(--e1); font-size:var(--f1); color:var(--tx3); font-variant-numeric:tabular-nums;}
html.vn .limite-rot strong{color:var(--tx1); font-weight:600;}
/* .calor: mapa de calor pessoa x dia. Grade com --n dias; .c e a celula (a ou span), .n1 a .n3 a intensidade
   (ate 4h, ate 8h, acima), .fds fim de semana e feriado, .falta dia util passado sem lancamento,
   .hoje o dia corrente, .futuro o que ainda nao chegou */
html.vn .calor{display:grid; grid-template-columns:minmax(6.5rem, 9rem) repeat(var(--n, 31), minmax(1.375rem, 1fr)); gap:.1875rem; align-items:center; min-width:max-content; font-size:var(--f1);}
html.vn .calor .nome{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tx2); padding-right:var(--e2);}
html.vn .calor .d{text-align:center; color:var(--tx3); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-variant-numeric:tabular-nums; line-height:1.2;}
html.vn .calor .d.fds{color:var(--tx3);}   /* 29/10 (contraste-texto): sem opacity .6 (2,87:1); o fim de semana ja se distingue pela celula */
html.vn .calor .d.hoje{color:var(--glpi-t); font-weight:700;}
html.vn :is(.calor, .legenda) .c{display:grid; place-items:center; height:1.5rem; border-radius:var(--r1); background:var(--fillh); color:var(--tx3); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-variant-numeric:tabular-nums; text-decoration:none; transition:transform var(--t1) var(--mola), opacity var(--t1) var(--mola);}
html.vn :is(.calor, .legenda) .c.fds{background:var(--s2);}
html.vn :is(.calor, .legenda) .c.falta{box-shadow:inset 0 0 0 .09375rem var(--warn);}
html.vn :is(.calor, .legenda) .c.n1{background:color-mix(in srgb, var(--glpi) 22%, transparent); color:var(--tx1);}
html.vn :is(.calor, .legenda) .c.n2{background:color-mix(in srgb, var(--glpi) 45%, transparent); color:var(--tx1);}
html.vn :is(.calor, .legenda) .c.n3{background:var(--glpi-fill); color:var(--sobre-fill);}
html.vn .calor .c.hoje{box-shadow:0 0 0 .125rem var(--glpi);}
html.vn .calor .c.futuro{opacity:.3;}
html.vn .calor a.c:focus-visible{outline:2px solid var(--glpi); outline-offset:.0625rem;}
@media (hover:hover) and (pointer:fine){ html.vn .calor a.c:hover{transform:scale(1.12);} }
html.vn .legenda{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e4); font-size:var(--f1); color:var(--tx3);}
html.vn .legenda > span{display:inline-flex; align-items:center; gap:var(--e1);}
html.vn .legenda .c{display:inline-block; width:.875rem; height:.875rem;}
html.vn .legenda .fio{display:inline-block; width:1.125rem; height:.125rem; border-radius:var(--rp); background:var(--glpi);}
html.vn .legenda .fio.ideal{background:repeating-linear-gradient(90deg, var(--tx2) 0 .25rem, transparent .25rem .4375rem);}
html.vn .legenda .fio.ant{background:var(--tx3); opacity:.5;}
html.vn .legenda .fio.he{height:.5rem; background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--glpi) 55%, transparent) 0 .1875rem, transparent .1875rem .375rem);}
/* .ritmo: grafico de linha acumulada (SVG). O traco vem das classes, a grade dos tokens --g-* */
html.vn .ritmo svg{display:block; width:100%; height:auto;}
html.vn .ritmo .grade{stroke:var(--g-grade); stroke-width:1;}
html.vn .ritmo text{fill:var(--g-eixo); font-size:max(var(--piso, 0rem), var(--f0, .6875rem));}
html.vn .ritmo .ideal{fill:none; stroke:var(--tx2); stroke-width:1.5; stroke-dasharray:5 4;}
html.vn .ritmo .ant{fill:none; stroke:var(--tx3); stroke-width:2; opacity:.5;}
html.vn .ritmo .atual{fill:none; stroke:var(--glpi); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;}
html.vn .ritmo .ponto{fill:var(--glpi); stroke:var(--card); stroke-width:2;}
html.vn .ritmo .area{fill:color-mix(in srgb, var(--glpi) 14%, transparent); stroke:none;}
/* ==== menu lateral op3 (08/10/2026) ====
   Base da proposta A + Administracao da opcao 3 (escolha do Weslley). Cabecalho de grupo legivel e
   sem caixa alta, rotulo curto sem quebra, contador zero some, volume (.qt.num, texto) diferente de
   pendencia (.qt.pend, pastilha ambar), sino ao lado do nome, motivo da fila trancada em segunda
   linha, rodape fixo com perfil e atalhos, e a Administracao numa linha do rodape que abre para cima
   um painel sobreposto (.vn-admpop) com veu (.vn-veu) na navegacao. */
@media (min-width:981px){
  /* marca e rodape fixos: so a navegacao rola, com a barra de rolagem padrao do site */
  html.vn .vn-side{overflow:hidden;}
  html.vn .vn-side #vn-nav{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:0 calc(-1 * var(--e1)); padding:0 var(--e1) var(--e3);}
  html.vn .vn-side .vn-pe{flex:none; margin:0 -.875rem -.875rem; padding:var(--e3) .875rem .875rem;}
}
html.vn .vn-side .vn-pe{position:relative; z-index:1; background:var(--side); border-top:1px solid var(--line);}
html.vn .vn-conta{margin-top:0; padding:var(--e1) .375rem; border-top:0;}
/* cabecalho de grupo: caixa normal, legivel; recolhido mostra o resumo (volume ou pendencia) */
html.vn .vn-nav .gbt, html.vn .vn-nav .gsino-lin{font-size:var(--fr, .78125rem); font-weight:600; letter-spacing:-.003em; text-transform:none;}
html.vn .vn-nav .gbt{min-height:2.125rem; color:color-mix(in srgb, var(--tx1) 82%, transparent);}
html.vn .vn-nav .gbt[aria-expanded="true"]{color:var(--tx1);}
html.vn .vn-nav .gbt .gnome{white-space:nowrap;}
html.vn .vn-nav .gbt .gres{margin-left:auto; display:inline-flex; align-items:center;}
html.vn .vn-nav .gbt .gres + .seta{margin-left:var(--e2);}
html.vn .vn-nav .gbt[aria-expanded="true"] .gres{display:none;}
html.vn .vn-nav .gbt[aria-expanded="true"] .gres + .seta{margin-left:auto;}
html.vn .vn-nav .gbt .gres .qt{margin-left:0;}
/* sino: linha por cima do cabecalho com ponto e nome invisiveis na frente, entao cai logo depois do nome */
html.vn .vn-nav .gsino-lin{position:absolute; top:0; left:0; display:flex; align-items:center; gap:var(--e2); min-height:2.125rem; padding:0 .625rem; pointer-events:none;}
html.vn .vn-nav .gsino-lin > .pt, html.vn .vn-nav .gsino-lin > .gnome{visibility:hidden; white-space:nowrap;}
html.vn .vn-nav .gsino-lin .gsino{position:static; top:auto; right:auto; width:1.5rem; height:1.5rem; margin-left:calc(-1 * var(--e0)); pointer-events:auto;}
/* contadores: volume em texto, pendencia em pastilha; zero nao desenha */
html.vn .vn-side .qt[hidden]{display:none;}
html.vn .vn-nav .qt.num{font-variant-numeric:tabular-nums;}
html.vn .vn-side .qt.pend{display:inline-flex; align-items:center; justify-content:center; min-width:1.25rem; height:1.125rem; padding:0 .375rem; border-radius:var(--rp); background:var(--warn-bg); color:var(--warn-t); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; font-variant-numeric:tabular-nums; flex:none;}
html.vn .vn-side .qt.pend[hidden]{display:none;}
/* rotulo curto em uma linha so */
html.vn .vn-nav .it > span:first-of-type{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* fila trancada: o motivo fica escrito em segunda linha (vale no toque, sem depender do title) */
html.vn .vn-nav .it.bloq{align-items:flex-start; padding-top:var(--e2); padding-bottom:var(--e2);}
html.vn .vn-nav .it.bloq > svg{margin-top:.0625rem;}
html.vn .vn-nav .it > span.rot2{display:flex; flex-direction:column; white-space:normal; overflow:visible;}
html.vn .vn-nav .it .rot2 small{font-size:var(--f1); font-weight:400; color:var(--tx3); line-height:1.3;}
/* Administracao: linha fixa no rodape, logo acima do perfil */
html.vn .vn-adm{position:relative; margin-bottom:var(--e2);}
html.vn .vn-adm[hidden]{display:none;}
html.vn .vn-admbt{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:.625rem; width:100%; min-height:2.25rem; padding:var(--e1) .625rem; border-radius:var(--r2); color:color-mix(in srgb, var(--tx1) 82%, transparent); font-size:var(--f2, .8125rem); font-weight:600; cursor:pointer;
  transition-property:transform, background-color, color !important; transition-duration:var(--dur-1), var(--dur-2), var(--dur-2); transition-timing-function:var(--ease-padrao);}
html.vn .vn-admbt svg{width:1rem; height:1rem; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
html.vn .vn-admbt > svg{color:var(--tx2);}
html.vn .vn-admbt .rot{flex:1; min-width:0; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:inherit; color:inherit;}
/* achado 12 (07/11): a tela atual vai numa 2a linha propria, com reticencias so nela; antes o nome inteiro
   "Administracao · <tela>" era cortado e a tela sumia no menu estreito */
html.vn .vn-admbt .rot small{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--f1); font-weight:500; line-height:1.25; color:var(--tx3);}
html.vn .vn-admbt .rot small:empty{display:none;}
html.vn .vn-admbt .seta{display:inline-flex; color:var(--tx3); transition:transform var(--dur-3) var(--ease-padrao);}
html.vn .vn-admbt .seta svg{width:.9375rem; height:.9375rem; stroke-width:2;}
html.vn .vn-admbt[aria-expanded="true"] .seta{transform:rotate(180deg);}
html.vn .vn-admbt.aqui{background:var(--s1); color:var(--tx1);}
html.vn .vn-admbt[aria-expanded="true"]{background:var(--s2); color:var(--tx1);}
html.vn .vn-admbt[aria-expanded="true"] .qt.pend{display:none;}
html.vn .vn-admbt:active{transform:scale(.98);}
html.vn .vn-admbt:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
@media (hover:hover){ html.vn .vn-admbt:not([aria-expanded="true"]):hover{background:var(--fillh); color:var(--tx1);} }
/* o painel cresce para cima sobre o meio da barra, sem empurrar o perfil; em tela baixa rola por dentro */
html.vn .vn-admpop{display:none; position:absolute; left:0; right:0; bottom:calc(100% + var(--e1)); z-index:1; max-height:var(--adm-teto, calc(100dvh - 15rem)); overflow-y:auto; overscroll-behavior:contain; padding:var(--e1) var(--e1) var(--e2); background:var(--s1); border:1px solid var(--line2); border-radius:var(--r3); box-shadow:var(--sh2);}
html.vn .vn-adm.aberta .vn-admpop{display:flex; animation:vn-adm-sobe var(--dur-3) var(--ease-entra) backwards; transform-origin:bottom center;}
@keyframes vn-adm-sobe{from{opacity:0; transform:translateY(.25rem) scale(.98);}}
html.vn .vn-admpop .it{min-height:2rem; padding:.1875rem .625rem; font-size:var(--f2, .8125rem);}
html.vn .vn-admpop .it svg{width:1rem; height:1rem;}
html.vn .vn-admpop .it{--nav-filete:var(--tx2);}
html.vn .vn-admpop .it[aria-current="page"]{background:var(--s3);}
/* subsecao: rotulo fino, sem caixa alta, com o ponto da fonte e uma linha fina */
html.vn .vn-admpop .gcab.sub{display:flex; align-items:center; gap:.4375rem; padding:var(--e2) .625rem var(--e0); font-size:max(var(--piso, 0rem), var(--f1, .71875rem)); font-weight:500; letter-spacing:0; text-transform:none; color:var(--tx3);}
html.vn .vn-admpop .gcab.sub.primeira{padding-top:var(--e1);}
html.vn .vn-admpop .gcab.sub[hidden]{display:none;}
html.vn .vn-admpop .gcab.sub::after{content:""; flex:1; height:1px; background:var(--line); margin-left:var(--e1);}
html.vn .vn-admpop .gcab.sub .pt{width:.375rem; height:.375rem;}
/* veu: escurece a navegacao enquanto a Administracao esta aberta; o rodape fica por cima */
html.vn .vn-veu{display:none; position:absolute; inset:0; z-index:0; background:var(--veu);}
html.vn .vn-veu.on{display:block; animation:vn-veu var(--dur-2) var(--ease-padrao) both;}
/* aviso de bloqueio dos avisos pelo navegador, so quando acontece */
html.vn .vn-aviso-bloq{display:flex; gap:.5625rem; align-items:flex-start; margin-bottom:var(--e2); padding:var(--e3); border-radius:var(--r2); background:var(--warn-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 28%, transparent); font-size:var(--fn, .75rem); line-height:1.35; color:var(--tx2);}
html.vn .vn-aviso-bloq[hidden]{display:none;}
html.vn .vn-aviso-bloq > svg{width:.9375rem; height:.9375rem; flex:none; margin-top:.0625rem; stroke:var(--warn-t); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
html.vn .vn-aviso-bloq .lnk{all:unset; cursor:pointer; color:var(--warn-t); font-weight:600; white-space:nowrap; border-radius:var(--r1);}
html.vn .vn-aviso-bloq .lnk:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn .vn-aviso-bloq p{margin:var(--e1) 0 0;}
html.vn .vn-aviso-bloq p[hidden]{display:none;}
html.vn .vn-aviso-bloq > div{flex:1; min-width:0;}
html.vn .vn-aviso-bloq .lnk{white-space:normal;}
/* fechar do aviso: so na faixa do celular (no menu do computador o aviso some quando resolve) */
html.vn .vn-aviso-fecha{display:none;}
/* faixa de avisos do celular (20/10/2026): bloqueio e "instale no iPhone" logo abaixo da barra, sem
   depender de abrir o Menu. Linha inteira do .vn-side (flex-wrap), fechar com alvo de 44px */
html.vn .vn-avisos-faixa{display:none;}
@media (max-width:620px){
  html.vn .vn-avisos-faixa:not([hidden]){display:flex; flex-direction:column; gap:var(--e2); flex:0 0 100%; min-width:0; padding:var(--e1) max(var(--e2), env(safe-area-inset-right, 0rem)) var(--e2) max(var(--e2), env(safe-area-inset-left, 0rem));}
  html.vn .vn-avisos-faixa .vn-aviso-bloq{margin:0; align-items:flex-start; padding:0 0 0 .625rem; font-size:var(--f2, .8125rem);}
  html.vn .vn-avisos-faixa .vn-aviso-bloq > svg{margin-top:.875rem;}
  html.vn .vn-avisos-faixa .vn-aviso-bloq > div > span{padding-block:.6875rem;}
  html.vn .vn-avisos-faixa .vn-aviso-bloq > div{display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--e2);}
  html.vn .vn-avisos-faixa .vn-aviso-bloq > div > p{flex:0 0 100%; margin:0 0 var(--e2);}
  html.vn .vn-avisos-faixa .vn-aviso-bloq .lnk{display:inline-flex; align-items:center; min-height:2.75rem;}
  html.vn .vn-avisos-faixa .vn-aviso-fecha{all:unset; box-sizing:border-box; display:inline-flex; flex:none; align-self:flex-start; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border-radius:var(--r2); color:var(--tx2); cursor:pointer;}
  html.vn .vn-avisos-faixa .vn-aviso-fecha svg{width:1rem; height:1rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
  html.vn .vn-avisos-faixa .vn-aviso-fecha:focus-visible{outline:2px solid var(--glpi); outline-offset:-2px;}
}
/* atalhos do rodape: Manual e Feedback (Minha conta virou o bloco do nome, 28/10/2026) */
html.vn .vn-atalhos{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e1); margin-top:var(--e1);}
html.vn .vn-atalhos a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1875rem; padding:.4375rem 0 .375rem; border-radius:var(--r1); font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:500; color:var(--tx2); text-decoration:none; white-space:nowrap;
  transition-property:transform, background-color, color !important; transition-duration:var(--dur-1), var(--dur-2), var(--dur-2); transition-timing-function:var(--ease-padrao);}
html.vn .vn-atalhos a[hidden]{display:none;}
html.vn .vn-ajustes{display:none;}   /* ajustes no rodape do menu: so no telefone (bloco celular enxuto) */
html.vn .vn-atalhos a svg{width:1rem; height:1rem; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
html.vn .vn-atalhos a[aria-current="page"]{background:var(--s2); color:var(--tx1);}
html.vn .vn-atalhos a:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
@media (hover:hover){ html.vn .vn-atalhos a:not([aria-current="page"]):hover{background:var(--fillh); color:var(--tx1);} }
/* gaveta do celular: alvos de 44px */
@media (max-width:980px){
  html.vn .vn-gaveta{position:relative;}
  html.vn .vn-side .vn-pe{margin-top:var(--e3); padding-top:var(--e3);}
  html.vn .vn-gaveta .vn-nav .it, html.vn .vn-gaveta .vn-nav .gbt, html.vn .vn-gaveta .vn-nav .gsino-lin, html.vn .vn-admbt, html.vn .vn-atalhos a{min-height:2.75rem;}
  html.vn .vn-gaveta .vn-nav .it{font-size:var(--fc, .9375rem);}
  html.vn .vn-gaveta .vn-nav .gbt, html.vn .vn-gaveta .vn-nav .gsino-lin, html.vn .vn-admbt{font-size:var(--f3, .875rem);}
  html.vn .vn-atalhos a{font-size:var(--fn, .75rem);}
}
@media (pointer:coarse){
  html.vn .vn-nav .gsino-lin{min-height:2.75rem;}
  html.vn .vn-nav .gsino-lin .gsino{width:2.75rem; height:2.75rem; top:auto; margin-left:calc(-1 * var(--e3));}
}
@media (prefers-reduced-motion:reduce){
  html.vn .vn-adm.aberta .vn-admpop, html.vn .vn-veu.on{animation:none;}
  html.vn .vn-admbt:active{transform:none;}
}

/* ==== celular (14/10/2026, auditoria mobile em 390 e 360, claro e escuro) ====
   Tudo aqui so vale em tela estreita (ate 620 ou 980px) ou de toque (pointer:coarse): o computador
   em 1440 nao muda. --piso e o piso das letras miudas: as folhas escrevem max(var(--piso, 0rem), X)
   no lugar de um rem menor que 12px, e no telefone o --piso vale 12px (e o --f1 sobe junto) */
@media (max-width:620px){
  html.vn{--piso:.75rem; --f1:.75rem;}
  /* letra grande do aparelho (22/10/2026): numero de indicador e titulo de destaque tem teto pela
     largura da tela (na letra padrao o teto fica acima do valor e nada muda) */
  html.vn{--f6:min(1.75rem, 9vw); --fx:min(2.75rem, 12.5vw);}
  /* pastilha no rodape de lista quebra linha em vez de passar da tela */
  html.vn .ia-rodape > .selo{max-width:100%; height:auto; min-height:1.375rem; padding-block:.25rem; white-space:normal; line-height:1.2;}
  /* botoes da pagina avulsa e chips de variavel: o rotulo quebra dentro do botao (o mesmo do .bt.quebra) */
  /* gaveta do chamado: a linha de cima encolhe o texto e nao o X; o link "Abrir o chamado" quebra linha */
  html.vn .gav-l1 > :not(.gav-x){min-width:0; overflow-wrap:anywhere;}
  html.vn .gav-l1 > .gav-x{flex:none;}
  html.vn .det a.abrir{white-space:normal; max-width:100%;}
  html.vn :is(.avulsa .acoes, .chips) .bt{max-width:100%; white-space:normal; text-align:center; padding-block:var(--e1);}
  /* topo: o caminho repete o h1 da tela e sai; as acoes ficam numa linha so, com menos respiro */
  html.vn:has(h1) .vn-topo .crumb{display:none;}
  html.vn header.top.vn-topo{min-height:0; justify-content:flex-end; padding:var(--e1) var(--e4); margin-bottom:var(--e2);}
  /* a marca e o Menu ja tem 44px: o respiro de cima e de baixo cai para 4px, e o aviso logo abaixo do
     topo nao precisa mais puxar a margem dele */
  html.vn .vn-side{padding-bottom:var(--e1);}
  html.vn .vn-topo + .faixa-topo{margin-top:0; margin-bottom:var(--e3);}
  html.vn .titpag{margin-bottom:var(--e4);}
  /* indicador: 18px de respiro comiam a grade de duas colunas */
  html.vn .met{padding:var(--e3) var(--e4);}
}
/* safe-area: com viewport-fit=cover o conteudo chega ate o entalhe (paisagem) e o indicador de inicio */
@media (max-width:980px){
  html.vn body{padding-left:env(safe-area-inset-left, 0rem); padding-right:env(safe-area-inset-right, 0rem); padding-bottom:calc(2.75rem + env(safe-area-inset-bottom, 0rem));}
  html.vn .vn-side{position:relative; padding-top:calc(var(--e2) + env(safe-area-inset-top, 0rem));}
  @media (max-width:620px){ html.vn .vn-side{padding-top:calc(var(--e1) + env(safe-area-inset-top, 0rem));} }
  /* menu do celular: a gaveta abre por cima do conteudo (sem empurrar a tela) e rola por dentro */
  html.vn .vn-side.aberto .vn-gaveta{position:absolute; top:100%; left:0; right:0; max-height:calc(100dvh - 4rem); overflow-y:auto; overscroll-behavior:contain;
    padding:var(--e2) var(--e4) var(--e3); background:var(--side); border-bottom:.5px solid var(--line2); border-radius:0 0 var(--r4) var(--r4); box-shadow:var(--sh2);}
}
/* pilula mais larga que a tela (celular): quebra em linhas, sem rolar e sem esmaecer a borda. O
   degrade que havia aqui (e as copias na Fila, Backlog e Inventario) cortava a ultima opcao (14/10/2026) */
@media (max-width:820px){
  html.vn .seg, html.vn .ctr.linha > .seg{flex-wrap:wrap; width:auto; max-width:100%; overflow:visible; row-gap:var(--e0);}
  html.vn .seg.quebrou{border-radius:var(--r3);}
}
/* voltar ao topo (.mini + .vn-volta): aparece no celular em pagina longa (Inventario, Manual), montado
   pelo casco.tpl.html; fica acima do indicador de inicio e da barra fixa do Meu relatorio */
html.vn .vn-volta{position:fixed; z-index:var(--z-volta); right:calc(var(--e4) + env(safe-area-inset-right, 0rem)); bottom:calc(var(--e4) + env(safe-area-inset-bottom, 0rem));
  width:2.75rem; height:2.75rem; background:var(--s2); color:var(--tx1); box-shadow:inset 0 0 0 .5px var(--line2), var(--sh2);}
html.vn:has(.rel .barra) .vn-volta{bottom:calc(5.5rem + env(safe-area-inset-bottom, 0rem));}
@media (min-width:981px){ html.vn .vn-volta{display:none;} }
/* toque: o que a lista de 44px (leva 5) nao cobria */
@media (pointer:coarse){
  html.vn :is(.tirar, .busca, .legb, .selsit, .gtoggle, .campo input, :where(button, a).entra, .pes, .campos input, .campos select, .campos .glpi){min-height:2.75rem;}
  html.vn .tirar{min-width:2.75rem;}
  /* setas do mes (Equipe) e o chevron de Ajustar (Permissoes): 44px de largura tambem */
  html.vn :is(#mes-ant, #mes-prox, .ia-ajusta){min-width:2.75rem;}
  html.vn .gtoggle{align-items:center;}
  html.vn .vn-selo-bt{height:2.75rem;}
  html.vn button.copiar{min-height:2.75rem;}
  /* link no meio do texto (aviso do relatorio, explicacao da tela): o alvo cresce para dentro do respiro */
  html.vn :is(.ia-aviso, .titpag > p, .proxima, .dica) a:not(.bt){display:inline-flex; align-items:center; min-height:2.75rem; margin-block:-.75rem;}
  /* 29/10 (skill design-espacamento, alvo-interceptado): varias datas na mesma frase ("19/10, 26/10 e 27/10")
     quebram em linhas de 20px; com 44px cada, a caixa do link de baixo cobria o de cima e o toque caia na data
     errada. Na lista de dias o link fica inline (link de frase esta fora do 2.5.8) */
  html.vn #aviso-rel-txt a:not(.bt){display:inline; min-height:0; margin-block:0;}
  /* so o botao Entrar: .entra tambem e a classe de animacao das linhas do Historico (e da Fila), e a altura
     fixa nelas fazia a linha encolher quando a classe saia (CLS 0,118 no Historico em tela de toque) */
  html.vn :where(button, a).entra{height:2.75rem;}
  html.vn .campo input{height:2.75rem;}
  /* "GLPI ↗" e links de rodape: o alvo cresce para dentro do respiro, a linha nao muda de altura */
  html.vn .abrir{display:inline-flex; align-items:center; min-height:2.75rem; padding:0 var(--e2); margin:-.75rem calc(-1 * var(--e2));}
  html.vn :is(.rod-fim, .rr-vr) a{display:inline-flex; align-items:center; min-height:2.75rem;}
  html.vn nav.indice a{display:flex; align-items:center; min-height:2.75rem;}
  html.vn nav.indice li{margin:0;}
  html.vn .rel a.cod{padding-inline:.75rem; margin-inline:-.75rem;}
  html.vn details > summary{display:flex; align-items:center; min-height:2.75rem;}
  html.vn details > summary::before{content:"▸"; margin-right:var(--e2); color:var(--tx3); transition:transform var(--t1) var(--mola);}
  html.vn details[open] > summary::before{transform:rotate(90deg);}
  /* opcao com interruptor: a linha inteira e o alvo, e o .sw fica no tamanho do iOS (51x31) */
  html.vn .regras label{min-height:2.75rem; align-items:center;}
  html.vn .sw{width:3.1875rem; height:1.9375rem;}
  html.vn .sw::after{top:.125rem; left:.125rem; width:1.6875rem; height:1.6875rem; box-shadow:0 .1875rem .5rem color-mix(in srgb, var(--preto) 15%, transparent);}
  html.vn :is(.sw.on, input.sw:checked)::after{transform:translateX(1.25rem);}
  /* mapa de calor: celula de 44px, a grade rola no .eq-calor-cx e o nome fica preso a esquerda */
  html.vn .calor{grid-template-columns:minmax(6.5rem, 8rem) repeat(var(--n, 31), 2.75rem);}
  html.vn .calor .c{height:2.75rem;}
  html.vn .calor .nome{position:sticky; left:0; z-index:1; align-self:stretch; display:flex; align-items:center; background:var(--card);}
}
/* ==== celular enxuto (14/10/2026, tarde): conteudo ocupando a tela, sem degrade cortando informacao ====
   Uma faixa so no topo (as acoes sobem para a barra do logo, pelo casco), explicacao da tela em duas
   linhas, recuos simples. Tudo em media de telefone ou de toque: o computador nao muda */
@media (max-width:620px){
  /* topo: logo, acoes (avisos, ler o GLPI, tema, sair) e Menu numa linha; o tamanho da letra fica com o
     zoom do aparelho; a faixa de baixo (caminho e acoes) some quando a tela tem h1 */
  /* 14/10/2026 (noite): o nome "Plataforma" volta ao lado do logo. Para caber numa linha a 390 com A+,
     o logo encolhe para 2,75rem, as acoes e o Menu ficam no alvo de toque exato (44px, nao 2,75rem, que
     com A+ passa de 46px) e o espaco entre a marca e as acoes vem so do margin-right:auto dela */
  html.vn .vn-side{gap:0; padding-left:0; padding-right:0;}
  html.vn .vn-side .marca{padding:0; gap:.25rem;}
  html.vn .vn-side .marca span{font-size:var(--f1); padding-left:.25rem; white-space:nowrap; letter-spacing:-.01em;}
  html.vn .vn-side .marca svg{width:2.75rem;}
  html.vn .vn-side > .acoes-topo .tema{width:44px; min-width:44px; height:44px; min-height:44px; padding:0;}
  html.vn .vn-menu{width:44px; min-height:44px; margin-left:var(--e1);}
  html.vn .vn-side > .acoes-topo{display:inline-flex; align-items:center; gap:0; padding:var(--e0); flex:none; background:var(--segbg); box-shadow:var(--segsulco); border-radius:var(--rp);}
  html.vn .vn-side > .acoes-topo .tema{background:transparent; box-shadow:none;}
  html.vn .vn-side > .acoes-topo .tema::before{display:none;}
  html.vn .vn-menu{padding:0; justify-content:center; flex:none;}
  html.vn .vn-menu span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  /* 14/10/2026 (noite): na barra ficam so o sino e o Menu. Ler agora, tema, A-/A+ e Sair viram linhas
     .it no rodape do menu (#vn-ajustes, montado pelo casco), Sair por ultimo depois do separador */
  html.vn .vn-side > .acoes-topo > :is(#atualizar, #tema, #movimento){display:none;}
  html.vn .vn-side > .acoes-topo:has(> #avisos[hidden]){display:none;}
  html.vn .vn-topo #fsair{display:none;}
  html.vn .vn-ajustes{display:flex; margin-top:var(--e2); padding-top:var(--e2); border-top:1px solid var(--line);}
  html.vn .vn-ajustes [hidden]{display:none;}
  html.vn .vn-gaveta .vn-ajustes .it{min-height:max(2.75rem, 44px); font-size:var(--fc, .9375rem);}   /* 44px tambem com A- (87,5%) */
  html.vn .vn-ajustes .vn-letra{cursor:default; padding-right:0;}
  html.vn .vn-ajustes .vn-letra > span{flex:1;}
  /* letra grande do aparelho (22/10/2026): o A- 100% A+ desce para a linha de baixo em vez de passar da gaveta */
  html.vn .vn-ajustes .vn-letra{flex-wrap:wrap; row-gap:var(--e1);}
  html.vn .vn-ajustes .tam-letra .tam{min-width:max(2.75rem, 44px); height:max(2.75rem, 44px);}
  html.vn .vn-ajustes .tam-letra .tam-val{min-width:3.5rem;}
  html.vn .vn-sep{border:0; border-top:1px solid var(--sep); margin:var(--e1) .625rem; width:auto;}
  html.vn:has(h1) header.top.vn-topo{display:none;}
  /* explicacao da tela (abaixo do h1): texto inteiro, um passo menor (20/10/2026). O corte em duas
     linhas escondia a saudacao e pegava o p.relogio do Meu painel (hora e data grudadas, expediente
     cortado); o toque do casco que alternava .inteiro continua inofensivo */
  html.vn .titpag > p.sub{display:block; -webkit-line-clamp:none; line-clamp:none; overflow:visible; font-size:var(--f2); line-height:1.45;}
  /* filtros recolhidos (casco): botao "Filtros" e a busca a vista; o resto abre no toque */
  html.vn .filtros-bt{display:flex; width:100%; justify-content:space-between; margin:0 0 var(--e2);}
  html.vn .filtros-bt .qtd{color:var(--glpi-t); font-weight:600;}
  html.vn .filtros-bt::after{content:"▾"; margin-left:var(--e2); color:var(--tx3); transition:transform var(--t1) var(--mola);}
  html.vn .filtros-bt .qtd:not(:empty){margin-left:auto;}
  html.vn .filtros-abertos > .filtros-bt::after{transform:rotate(180deg);}
  html.vn :is(#barra, .filtros-grade, .inv-filtros):not(.filtros-abertos) > :not(.filtros-bt):not(:has(.busca)):not(#recorte){display:none;}
  html.vn .filtros-grade > .filtros-bt{flex:0 0 100%;}
  /* cards do quadro: um recuo so (o da coluna); o raio de dentro acompanha */
  html.vn{--rec-quadro:.375rem;}
  /* faixa de cor da coluna de ponta a ponta, presa ao raio do topo */
  html.vn .coluna::before{left:0; right:0; height:.25rem; border-radius:var(--r4) var(--r4) 0 0;}
  /* selo da fila (superadmin e afins): icone ao lado do titulo e o link alinhado ao texto */
  html.vn .vn-selo-fila{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:var(--e1) var(--e3);}
  html.vn .vn-selo-fila .vn-selo-bt{grid-column:2; justify-self:start; margin-left:0;}
  /* indicadores zerados (no maximo um com valor, ex.: Backlog vazio): tres por linha, sem gastar meia tela com zeros */
  html.vn .metricas:not(:has(.met:not(.zero) ~ .met:not(.zero))){grid-template-columns:repeat(auto-fit,minmax(min(6.5rem,100%),1fr));}
  html.vn .metricas:not(:has(.met:not(.zero) ~ .met:not(.zero))) .met{padding:var(--e3);}
}
/* abaixo de 386px de janela o nome nao cabe ao lado das quatro acoes e do Menu: volta so o logo, no tamanho
   de antes. 04/11/2026 (escala de quebras): quem decide e a largura util do topo, nao a da janela; no celular o
   topo vira container e o nome sai com ate 338px de conteudo (386px de janela menos os 2x16px de recuo e a
   barra de rolagem do navegador de mesa; no telefone, sem barra, sai abaixo de 371px) */
@media (max-width:620px){ html.vn .vn-side{container:topo / inline-size;} }
@container topo (max-width:338px){
  html.vn .vn-side .marca span{display:none;}
  html.vn .vn-side .marca svg{width:4.25rem;}
}
@media (min-width:621px){ html.vn .filtros-bt{display:none;} }
/* ==== celular, revisao de responsividade (20/10/2026) ==== */
@media (max-width:620px){
  /* barra do logo presa no topo, fundo solido e respiro da area segura: no iOS a barra de status toma a
     cor dela em vez de borrar o que passa por baixo (o "fade" sobre o logo) */
  /* de borda a borda (sai do recuo de --e4 da .tela): nem o conteudo rolando nem a gaveta do Menu
     aparecem pelas laterais */
  html.vn .vn-side{z-index:var(--z-lado); background:var(--side); margin-inline:calc(-1 * var(--e4)); padding-inline:var(--e4);
    padding-top:max(env(safe-area-inset-top, 0rem), var(--e2));}
  /* com a faixa de avisos aberta (bloqueio, instalar no iPhone) a barra nao prende: a faixa nao fica
     ocupando o topo enquanto a pagina rola */
  html.vn .vn-side:not(:has(> .vn-avisos-faixa:not([hidden]))){position:sticky; top:0;}
  html.vn{scroll-padding-top:4.5rem;}
  /* indicadores em linha (numero e rotulo lado a lado), duas colunas: a Fila volta a mostrar chamado na
     primeira tela. O impar no fim ocupa a linha. O do Desempenho (.def) fica como esta */
  html.vn .metricas{grid-template-columns:repeat(2,minmax(0,1fr));}
  html.vn .met:not(:has(.def)){display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; column-gap:var(--e2); padding:var(--e2) var(--e3); min-height:2.75rem; align-content:center;}
  html.vn .met:not(:has(.def)) b{font-size:var(--f4);}
  html.vn .met:not(:has(.def)) span{margin:0; font-size:var(--f1); line-height:1.25;}
  html.vn .metricas:has(.met:not(.zero) ~ .met:not(.zero)) > .met:last-child:nth-child(odd){grid-column:1 / -1;}
  /* cabecalhos de cartao sem caixa alta: nao quebram em tres linhas na coluna estreita */
  /* html.vn.vn: o :is() da regra base pesa (0,2,0) por causa do ".rel .sc" da lista */
  html.vn.vn :is(.cab, .qcab) > h2{text-transform:none; letter-spacing:-.01em;}
}
@media (max-width:620px) and (pointer:coarse){
  /* pilulas (.bt e Mensagem rapida) com 36px visiveis; o alvo de 44px continua no ::after invisivel */
  /* o ".vn-x .vn-x .vn-x" so iguala o peso do :is da regra de 44px (a lista dela tem ".msg-dlg .mh .x") */
  html.vn .tela :is(.bt, button.msg-rapida, .vn-x .vn-x .vn-x){min-height:2.25rem; position:relative;}
  html.vn .tela :is(.bt:not(.filtros-bt), button.msg-rapida)::after{content:""; position:absolute; inset:-.25rem 0;}   /* .filtros-bt usa o ::after para o "▾" */
}/* .progresso (16/10/2026): conclusao de um conjunto (cartoes feitos sobre o total). Trilho fino de --fill,
   preenchido ate --p em --glpi; .feito (100%) em --ok; .vazio sem preenchimento (nada a medir). O numero
   fica a direita do trilho, em algarismos tabulares. Usado na lista de Projetos e no topo do projeto */
html.vn .progresso{display:grid; grid-template-columns:minmax(2.5rem,1fr) auto; align-items:center; gap:var(--e1) var(--e2); min-width:0;}
html.vn .progresso > .trilho{position:relative; height:.375rem; border-radius:var(--rp); background:var(--fill); overflow:hidden;}
html.vn .progresso > .trilho > i{position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:inherit; background:var(--glpi); transform:translateX(calc(var(--p, 0%) - 100%)); transition:transform var(--dur-3) var(--ease-padrao);}
html.vn .progresso.feito > .trilho > i{background:var(--ok);}
html.vn .progresso.vazio > .trilho > i{display:none;}
html.vn .progresso > b{font-size:var(--f2); font-weight:600; color:var(--tx1); font-variant-numeric:tabular-nums; min-width:2.75rem; text-align:right;}
html.vn .progresso.vazio > b{font-weight:400; color:var(--tx3);}
html.vn .progresso > small{grid-column:1 / -1; font-size:max(var(--piso, 0rem), var(--f1)); color:var(--tx3); font-variant-numeric:tabular-nums;}
/* .gantt (16/10/2026): linha do tempo de itens (cartoes de um projeto). Grade de duas colunas, o nome e a
   trilha; cada linha (.g-cab, .g-lin) e uma subgrade na sua linha da grade (grid-row no style). Na coluna da
   trilha ficam o fundo (.g-fundo, marcas do eixo .g-marca) atras das linhas e a linha de hoje (.g-hoje) por
   cima, os dois cobrindo as --n linhas. A barra (.g-bar) tem a cor da situacao em --gc e posicao e largura em %
   do periodo (--x, --w). .aberta = sem prazo (vai ate hoje, hachurada); .atrasada = prazo vencido sem estar
   feita. Superficie de cartao; largo demais rola de lado dentro do .gantt-rola */
html.vn .gantt-rola{overflow-x:auto; background:var(--card); border-radius:var(--r4); box-shadow:var(--sombra2); padding:var(--e3) var(--rec-cartao) var(--e4);}
html.vn .gantt{display:grid; grid-template-columns:minmax(9rem, 15rem) minmax(34rem, 1fr); column-gap:var(--e4); min-width:max-content; width:100%; font-size:var(--f2);}
html.vn .gantt > :is(.g-cab, .g-lin){display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-items:center; position:relative; z-index:1; border-bottom:1px solid var(--line);}
html.vn .gantt > .g-lin{min-height:2.25rem; border-radius:var(--r1); transition:background-color var(--dur-2) var(--ease-padrao);}
html.vn .gantt > .g-lin:last-child{border-bottom:0;}
html.vn .gantt > .g-cab > .g-nome{font-size:max(var(--piso, 0rem), var(--f1)); font-weight:600; color:var(--tx2); letter-spacing:.045em; text-transform:uppercase;}
html.vn .gantt .g-eixo{position:relative; height:1.75rem;}
html.vn .gantt .g-eixo > span{position:absolute; left:var(--x); bottom:.375rem; transform:translateX(-50%); font-size:max(var(--piso, 0rem), var(--f1)); color:var(--tx3); white-space:nowrap; font-variant-numeric:tabular-nums;}
html.vn .gantt > :is(.g-fundo, .g-hoje){grid-column:2; grid-row:1 / span var(--n, 1); position:relative; pointer-events:none; z-index:0;}
html.vn .gantt > .g-hoje{z-index:10;}
html.vn .gantt .g-marca{position:absolute; top:1.75rem; bottom:0; left:var(--x); width:1px; background:var(--line);}
html.vn .gantt > .g-hoje::before{content:""; position:absolute; top:1.75rem; bottom:0; left:var(--x); width:.125rem; margin-left:-.0625rem; border-radius:var(--rp); background:var(--glpi);}
html.vn .gantt .g-nome{display:flex; align-items:center; gap:var(--e2); min-width:0; color:var(--tx1);}
html.vn .gantt .g-nome > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html.vn :is(.gantt .g-nome, .legenda span) > .bola{width:.5625rem; height:.5625rem; border-radius:50%; background:var(--gc, var(--neutro)); flex:none;}
html.vn .gantt .g-trilha{position:relative; align-self:stretch;}
html.vn .gantt .g-bar{position:absolute; left:var(--x); width:var(--w); min-width:.5rem; height:1rem; top:50%; margin-top:-.5rem; border-radius:var(--rp); background:var(--gc, var(--neutro)); transition:filter var(--dur-2) var(--ease-padrao);}
html.vn .gantt .g-bar.aberta{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--gc) 55%, transparent) 0 .1875rem, transparent .1875rem .375rem); box-shadow:inset 0 0 0 .0625rem var(--gc);}
html.vn .gantt .g-bar.atrasada{box-shadow:0 0 0 .125rem var(--crit);}
html.vn .gantt > .g-lin[tabindex]{cursor:pointer;}
html.vn .gantt > .g-lin[tabindex]:focus-visible{outline:2px solid var(--glpi); outline-offset:-2px;}
@media (hover:hover) and (pointer:fine){
  html.vn .gantt > .g-lin[tabindex]:hover{background:color-mix(in srgb, var(--s2) 60%, transparent);}
  html.vn .gantt > .g-lin[tabindex]:hover .g-bar{filter:brightness(1.08);}
}
@media (max-width:620px){
  html.vn .gantt{grid-template-columns:minmax(7rem, 9rem) minmax(26rem, 1fr); column-gap:var(--e3);}
  html.vn .gantt > .g-lin{min-height:2.75rem;}
}

/* ==== 20/10/2026 espacamento (skill design-espacamento): ritmo, respiro do cabecalho e alvos ==== */
/* ritmo vertical: o espaco entre as secoes da pagina vem de UM gap na .tela, nao da margem de cada bloco.
   O :is(*, #_) so sobe o peso para vencer as margens soltas das telas (#s-pj-meus, footer, .qcab...).
   Barra lateral fixa (desktop) e elementos ocultos nao entram no gap. No mobile o gap tambem separa
   a barra do logo (sticky) do titulo, que antes encostava nela */
html.vn{--gap-tela:var(--e5);}
@media (max-width:980px){ html.vn{--gap-tela:var(--e4);} }
html.vn .tela{display:flex; flex-direction:column; gap:var(--gap-tela);}
/* filho direto da .tela em coluna flex: .metricas tem align-self:start (vale na grade do Meu painel); aqui
   ele encolhia a grade de contadores para a largura de um tile (Fila, Backlog, Inventario, Equipe, 20/10) */
html.vn .tela > .metricas, html.vn .tela > .vn-conteudo > .metricas{align-self:stretch;}
html.vn .tela > :is(*, #_), html.vn .tela > .vn-conteudo > :is(*, #_){margin-block:0;}
/* marcador vazio (o #sentinela da barra presa da Fila) nao conta dois gaps */
html.vn .tela > div:empty:is(*, #_), html.vn .tela > .vn-conteudo > div:empty:is(*, #_){margin-bottom:calc(-1 * var(--gap-tela));}
/* faixa de cor no topo da coluna (Meu painel): a caixa do ::before tem a altura do raio, entao o
   navegador desenha a curva inteira e a faixa de 4px (gradiente) segue o canto, sem passar dele */
@media (max-width:620px){
  html.vn .coluna::before{left:0; right:0; height:var(--r4); border-radius:var(--r4) var(--r4) 0 0; background:linear-gradient(var(--cc,var(--cinza)) 0 .25rem, transparent .25rem); pointer-events:none;}
}
@media (pointer:coarse){
  /* alvo de toque de 44px tambem na largura: codigo do chamado e links do rodape */
  html.vn a.cod{min-width:2.75rem;}
}
@media (max-width:620px) and (pointer:coarse){
  /* area de toque invisivel centrada e com no minimo 44x44, qualquer que seja o desenho (36px do .bt,
     34px da Mensagem rapida no card, botao de icone de 32px) */
  html.vn .tela :is(.bt:not(.filtros-bt), button.msg-rapida)::after{inset:auto; left:50%; top:50%; width:max(100%, 2.75rem); height:max(100%, 2.75rem); translate:-50% -50%;}
  /* "Filtros" usa o ::after para a seta: o proprio botao fica com 44px */
  html.vn .tela .bt.filtros-bt:is(*, #_){min-height:2.75rem;}
  /* "Ver rodizio" do selo da Fila (revisao 20/10): o link de 44px de altura deixava 30px de respiro embaixo
     do selo contra 18px em cima; o desenho volta a 28px e o alvo de 44px fica no ::after */
  html.vn .vn-selo-fila .vn-selo-bt{height:1.75rem; position:relative;}
  html.vn .vn-selo-fila .vn-selo-bt::after{content:""; position:absolute; left:50%; top:50%; width:max(100%, 2.75rem); height:2.75rem; translate:-50% -50%;}
}
@media (max-width:620px){
  /* contadores em tile: o mesmo recuo lateral dos outros cartoes (--rec-cartao) e 12px em cima e embaixo */
  html.vn .met:not(:has(.def)), html.vn .metricas:not(:has(.met:not(.zero) ~ .met:not(.zero))) .met{padding:var(--e3) var(--rec-cartao);}
}
@media (pointer:coarse){
  /* link do aviso de PDF do relatorio: alvo de 44px que cresce para dentro do respiro, como no .ia-aviso */
  html.vn #rel-pdf-aviso > a:not(.bt){display:inline-flex; align-items:center; min-height:2.75rem; margin-block:calc(-1 * var(--e3));}
}
/* contador em tile: a linha do numero com altura que cabe o desenho do algarismo (nao encosta no topo) */
html.vn .met:not(:has(.def)) b{line-height:1.25;}
/* nome e e-mail da pessoa/ativo e nome no Desempenho: quebram em vez de cortar com reticencias */
html.vn .ad-quem-t :is(b, small), html.vn .des-nome{white-space:normal; overflow-wrap:anywhere; text-overflow:clip;}
html.vn .vn-admbt .rot{white-space:normal; text-overflow:clip;}
/* hover da linha .ad-lin (28/10 leva e): o fundo cheio de 02/10 (topo.tpl.html) era um retangulo de canto reto
   colado no avatar e no chevron. Aqui o destaque vira um ::before com raio --r2 que passa --e2 alem do texto
   dos dois lados (o texto fica na borda comum do cartao) e fica entre os filetes da linha. Vale para toda
   lista .ad-lin (Limite do mes, Usuarios, Backlog, Inventario, Projetos) */
@media (hover:hover) and (pointer:fine){
  html.vn .ad-lin:not(.ad-th){position:relative; isolation:isolate;}
  html.vn .ad-lin:not(.ad-th):hover{background:transparent;}
  html.vn .ad-lin:not(.ad-th)::before{content:""; position:absolute; inset:0 calc(-1 * var(--e2)); z-index:-1; border-radius:var(--r2);
    background:var(--fillh); opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease-padrao);}
  html.vn .ad-lin:not(.ad-th):hover::before{opacity:1;}
}
/* mouse: alvo minimo de 24x24 (WCAG 2.5.8) nos links de texto, codigo do chamado e cabecalhos de grupo.
   O texto continua centrado na linha; so a caixa clicavel cresce */
@media (hover:hover) and (pointer:fine){
  html.vn :is(.rod-fim a, a.cod, a.abrir, #rel-pdf-aviso > a){display:inline-flex; align-items:center; min-height:1.5rem;}
  html.vn :is(.gtoggle, a.vn-selo-bt, details > summary, nav.indice li a){min-height:1.5rem; align-items:center;}
  html.vn nav.indice li a{display:flex;}
  html.vn :is(#pj-lista, #pj-arq) .ad-quem-t b > a{line-height:1.5rem;}
}
/* cabecalho de grupo quebra em linha nova em vez de espremer o titulo */
html.vn .ghead{flex-wrap:wrap; row-gap:var(--e1);}
@media (max-width:620px){ html.vn .des-pessoa{white-space:nowrap;} }
/* cartao de usuario: o selo (ad-meta) desce de linha antes de espremer o nome */
html.vn .ad-card-cab{flex-wrap:wrap; row-gap:var(--e2);}
html.vn .ad-card-cab > .ad-quem{flex:1 1 10rem;}

/* ==== 26/10/2026 acessibilidade (ux-17 a ux-26): aviso passageiro, pular para o conteudo, foco e alvos ==== */
/* conteudo principal (ux-18): o casco poe o que vem depois do cabecalho num <main id="conteudo">; sem caixa
   propria, os blocos continuam filhos de layout da .tela (gap e grade iguais) */
html.vn .vn-conteudo{display:contents;}
/* pular para o conteudo (ux-18): primeiro alvo do Tab, fora da vista ate receber o foco do teclado */
html.vn .vn-pula{position:fixed; z-index:var(--z-pula); top:calc(var(--e3) + env(safe-area-inset-top, 0rem)); left:calc(var(--e3) + env(safe-area-inset-left, 0rem)); width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0; border-radius:var(--rp); background:var(--glpi-fill); color:var(--sobre-fill); font-size:var(--f2); font-weight:600; text-decoration:none;}
html.vn .vn-pula:focus-visible{width:auto; height:auto; overflow:visible; clip:auto; padding:var(--e2) var(--e4); outline:2px solid var(--glpi); outline-offset:2px; box-shadow:var(--flutua);}
/* aviso passageiro (ux-17): HTML so por window.toastPainel(m, erro, acao) do topo.tpl.html. O balao nao e regiao
   viva (o leitor de tela ouve as duas regioes .sr fixas no body); erro ganha o contorno vermelho */
.toast{position:fixed; left:50%; bottom:calc(1.625rem + env(safe-area-inset-bottom, 0rem)); transform:translateX(-50%); z-index:var(--z-toast); display:flex; align-items:center; gap:.875rem; width:max-content; max-width:calc(100vw - 2rem); box-sizing:border-box; padding:var(--e3) 1.375rem; border-radius:var(--rp); background:var(--lamina); color:var(--label); font-size:var(--fc, .9375rem); box-shadow:var(--realce), var(--pousa); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); cursor:default; animation:toast-sobe var(--t2) var(--mola) both;}
.toast.erro{box-shadow:var(--realce), var(--flutua), inset 0 0 0 1px color-mix(in srgb, var(--red) 55%, transparent);}
.toast.some{opacity:0; transform:translate(-50%, .625rem); transition:opacity var(--t2) var(--mola), transform var(--t2) var(--mola);}
.toast .acao{border:0; border-radius:var(--rp); padding:.375rem .875rem; font:inherit; font-size:var(--f2); font-weight:600; color:var(--sobre); background:var(--glpi-fill, var(--blue)); cursor:pointer; white-space:nowrap; transition:transform var(--t1) var(--mola), opacity var(--t1) var(--mola);}
.toast .acao:active{transform:scale(.96);}
@media (hover:hover) and (pointer:fine){ .toast .acao:hover{opacity:.85;} }
/* acima da barra do Meu relatorio, como o .vn-volta */
html.vn:has(.rel .barra) .toast{bottom:calc(5.5rem + env(safe-area-inset-bottom, 0rem));}
@keyframes toast-sobe{
  from{opacity:0; transform:translate(-50%, .75rem);}
  to{opacity:1; transform:translate(-50%, 0);}
}
@media (prefers-reduced-motion: reduce){ .toast{animation:none;} .toast.some{transition:none;} }
/* foco de campo (ux-26; ux-02 04/11/2026): o anel de 3px a 30% ficava perto de 1,9:1 no escuro e 1,5:1 no claro.
   Soma o contorno de 2px em --glpi dos outros controles nos DOIS temas, incluindo a busca, o .campo dos filtros e o
   textarea das Configuracoes, que zeravam o outline no :focus; o campo sem foco fica como estava */
html.vn :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), select, textarea, .busca, .campos .campo, .conf textarea):focus-visible{outline:2px solid var(--glpi); outline-offset:1px;}
/* legenda do Gantt (ux-21): amostra do prazo vencido, o mesmo anel da .g-bar.atrasada */
html.vn .legenda .bola.atrasada{background:var(--neutro); box-shadow:0 0 0 .125rem var(--crit); margin-inline:.125rem;}
/* linha do Gantt no toque (ux-22): 44px em qualquer largura, nao so ate 620px (iPad em retrato) */
@media (pointer:coarse){ html.vn .gantt > .g-lin{min-height:2.75rem;} }

/* ==== celular no padrao iOS (27/10/2026) ====
   Queixa: no iPhone a letra ficava bem menor que a do sistema (texto real de 12 a 14px contra 15 a 17 do iOS).
   A raiz ja e a letra do aparelho (17pt do iOS = 100%, ver VN_PREPINTA); o que estava errado era a escala,
   calibrada para o desktop. Aqui os tokens de letra sobem para a escala do iOS (Footnote 13, Subheadline 15,
   Callout 16, Body 17, Title3 20) so em tela estreita ou de toque: o computador (>=1000px, mouse) fica
   igual byte a byte. Os tamanhos fixos das folhas viraram var(--token, valor-de-antes) (tokeniza_fonte.py),
   entao o desktop le o mesmo valor e o celular le o token.
     --f0 Caption1 12 | --f1/--fn/--fr Footnote 13 | --f2/--fm Subheadline 15 | --f3/--fs Callout 16
     --f4/--fc Body 17 | --f5 Title3 20 | --f6 Title1 28 */
@media (max-width:980px), (hover:none) and (pointer:coarse){
  html.vn{--f0:.75rem; --f1:.8125rem; --fn:.8125rem; --fr:.8125rem; --f2:.9375rem; --fm:.9375rem; --f3:1rem; --fs:1rem; --f4:1.0625rem; --fc:1.0625rem; --f5:1.25rem; --piso:.75rem;}
  html.vn body{line-height:1.35;}
  /* titulo da tela: Title1/LargeTitle com teto pela largura (titulos longos como "Historico · DevSecOps") */
  html.vn h1{font-size:min(1.875rem, 8vw); line-height:1.15; letter-spacing:-.025em;}
  /* cabecalho de secao: Headline (17 semibold) em vez da caixa alta de 12,5px menor que o texto que ela introduz */
  html.vn.vn :is(.cab, .grupo-cab, .qcab, .ghead, .cabgraf, .cx, .rel .sc) > h2{font-size:var(--f4); font-weight:600; text-transform:none; letter-spacing:-.015em; color:var(--label); line-height:1.3;}
  /* titulo de dialogo e da gaveta do chamado: Title2 */
  html.vn dialog:not(.grande) :is(.mh h2, .mh h3, .dcab h2, form > h2, :scope > h2), html.vn .gav-cab h2{font-size:1.375rem; line-height:1.25;}
  /* texto de explicacao: Subheadline com respiro de leitura */
  html.vn :is(.sub, .ad-lede, .expl, p.pe, .proxima){line-height:1.4;}
  html.vn .titpag > p.sub{font-size:var(--f2);}
  /* botoes: rotulo Subheadline; a pilula cresce com a letra em vez de cortar */
  html.vn .bt{font-size:var(--fm, .84375rem); min-height:2.25rem;}
  /* pastilhas (.badge, .ad-st, .selo, .tag): Footnote numa caixa de 24px; a linha nao corta acento */
  html.vn :is(.badge, .ad-st, .ad-g, .selo, .tag, .pil-marca, .us-st){height:auto; min-height:1.5rem; line-height:1.25;}
  /* menu: linha de lista do iOS (Body 17, 44px) e cabecalho de grupo em Footnote */
  html.vn .vn-nav .it{font-size:var(--f4); min-height:2.75rem;}
  html.vn .vn-nav .it .qt{font-size:var(--f1);}
  html.vn .vn-nav :is(.gcab, .gbt){font-size:var(--f1);}
}
/* campos: o Safari do iOS da zoom na pagina ao tocar em campo com menos de 16px (e a tela pula de largura).
   O piso de 16px so vale no toque e nunca encolhe a letra do aparelho (max com 1rem). Pastilhas e rotulos
   miudos com Dynamic Type pequeno ficam no minimo de 11pt da Apple */
@media (hover:none) and (pointer:coarse){
  html.vn{--piso:max(11px, .75rem); --f0:max(11px, .75rem);}
  html.vn :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea, .busca, .campo, .sel, .inp, .ad-campo){font-size:max(var(--piso, 0rem), 1rem, 12pt) !important;}
}
/* telefone: estrutura no padrao iOS (lista agrupada inset, sheet, barra de abas) */
@media (max-width:620px){
  /* lista agrupada inset: grupo com raio de 12px, sem sombra flutuando, sobre o fundo da tela. O raio
     grande (22px) e a sombra ficam so no desktop */
  html.vn{--r-int:calc(var(--r2) - var(--rec-quadro));}
  html.vn :is(.cartao, .cx, .ad-card, .coluna, .metricas, .vn-selo-fila, .vn-selo-fila.irr, .gantt-rola){border-radius:var(--r2); box-shadow:none;}
  html.vn .coluna::before{border-radius:var(--r2) var(--r2) 0 0;}
  html.vn .coluna.sobre{box-shadow:0 0 0 2px color-mix(in srgb,var(--cc,var(--blue)) 70%,transparent);}
  /* cartao dentro de cartao vira linha do grupo: sem fundo, raio e sombra proprios, com separador fino */
  html.vn :is(.cartao, .cx) :is(.ad-card, .cartao){background:transparent; border-radius:0; box-shadow:none;}
  html.vn :is(.cartao, .cx) :is(.ad-card, .cartao) + :is(.ad-card, .cartao){border-top:.5px solid var(--sep);}
  /* estado vazio: texto centrado sem caixa propria */
  html.vn .vazio{background:transparent; box-shadow:none; border:0;}

  /* dialogo como sheet: sobe de baixo, largura cheia, raio so em cima, alca e respiro do indicador de inicio */
  html.vn dialog:not(.grande){position:fixed; inset:auto 0 0 0; margin:0; width:100%; max-width:100%; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
    border:0; border-top:.5px solid var(--line2); border-radius:var(--r3) var(--r3) 0 0; padding-bottom:env(safe-area-inset-bottom, 0rem);}
  html.vn dialog:not(.grande)[open]{animation:vn-sheet-sobe var(--dur-3) var(--ease-entra) backwards;}
  html.vn dialog:not(.grande)::before{content:""; display:block; width:2.25rem; height:.3125rem; margin:var(--e2) auto 0; border-radius:var(--rp); background:var(--label3); opacity:.6;}
  /* acoes do sheet: principal em largura cheia (52px: 44 + respiro) por baixo, Cancelar acima; nada esticado ao lado de texto */
  html.vn dialog:not(.grande) :is(.ad-dlg-ft, .mf .dir2, .acoes-dlg){flex-direction:column-reverse; align-items:stretch; width:100%;}
  html.vn dialog:not(.grande) :is(.ad-dlg-ft, .mf .dir2, .acoes-dlg) > .bt{width:100%; min-height:2.75rem; padding-block:var(--e1); border-radius:var(--r2); font-size:var(--f4);}

  /* barra do topo: fundo SOLIDO em --side e filete fino embaixo. 09/11/2026 (print do iPhone): o translucido
     com desfoque deixava o titulo "Meu painel" e o "Ola" aparecendo por tras do logo e a barra numa cor
     diferente da barra de status (que o iOS pinta com o theme-color = --side, push.COR_TEMA). Solido, a
     barra de status e o topo viram uma faixa so, do entalhe ate o filete */
  html.vn .vn-side{border-bottom:.5px solid var(--line);}

  /* barra de abas (tab bar): montada pelo casco com os destinos mais usados e o "Mais" que abre o menu.
     49px + indicador de inicio; o Menu de cima sai porque o "Mais" faz o papel dele */
  html.vn .vn-abas{position:fixed; z-index:var(--z-abas); left:0; right:0; bottom:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    /* 09/11/2026 (print do iPhone): respiro lateral (6px em 320, 8px a partir de 400) somado a area segura,
       para a pastilha ativa nao encostar na borda; fundo solido em --side, igual ao topo e a barra de status,
       e o ::after leva esse fundo para baixo da barra (indicador de inicio e o "quique" da rolagem do iOS) */
    padding:0 max(clamp(.375rem, 2vw, var(--e2)), env(safe-area-inset-right, 0rem)) env(safe-area-inset-bottom, 0rem) max(clamp(.375rem, 2vw, var(--e2)), env(safe-area-inset-left, 0rem));
    background:var(--side); border-top:.5px solid var(--line2);}
  html.vn .vn-abas::after{content:""; position:absolute; left:0; right:0; top:100%; height:6rem; background:var(--side); pointer-events:none;}
  html.vn .vn-abas a, html.vn .vn-abas button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.125rem; min-height:2.75rem; min-width:0;
    padding:var(--e1) var(--e0) .0625rem; border:0; background:none; color:var(--tx3); font:inherit; font-size:var(--f0, .6875rem); font-weight:500; letter-spacing:0; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  html.vn .vn-abas svg{width:1.5rem; height:1.5rem; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  html.vn .vn-abas span{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  html.vn .vn-abas [aria-current="page"], html.vn .vn-abas [aria-expanded="true"]{color:var(--glpi-t);}
  html.vn .vn-abas :is(a, button):active{opacity:.6;}
  html.vn.tem-abas .vn-menu{display:none;}
  html.vn.tem-abas body{padding-bottom:calc(3.0625rem + var(--e6) + env(safe-area-inset-bottom, 0rem));}
  /* 28/10/2026: o que rola ate a vista (foco pelo teclado, scrollIntoView, ancora) para acima das abas,
     como o scroll-padding-top faz com a barra de cima; sem isso o alvo ficava coberto pela barra fixa */
  html.vn.tem-abas{scroll-padding-bottom:calc(3.0625rem + var(--e2) + env(safe-area-inset-bottom, 0rem));}
  html.vn.tem-abas .vn-volta{bottom:calc(3.0625rem + var(--e4) + env(safe-area-inset-bottom, 0rem));}
  html.vn.tem-abas .toast{bottom:calc(3.0625rem + var(--e4) + env(safe-area-inset-bottom, 0rem));}
  /* barra fixa do Meu relatorio (Gerar PDF) fica logo acima das abas */
  html.vn.tem-abas .rel .barra{bottom:calc(3.0625rem + env(safe-area-inset-bottom, 0rem)); padding-bottom:.625rem;}
  html.vn.tem-abas:has(.rel .barra) :is(.vn-volta, .toast){bottom:calc(8.5rem + env(safe-area-inset-bottom, 0rem));}
  html.vn.tem-abas:has(.rel .barra) body{padding-bottom:calc(8rem + env(safe-area-inset-bottom, 0rem));}
  /* menu aberto pelo "Mais": a gaveta desce do topo ate as abas */
  html.vn.tem-abas .vn-side.aberto .vn-gaveta{max-height:calc(100dvh - 4rem - 3.0625rem - env(safe-area-inset-bottom, 0rem));}
}
@media (min-width:621px){ html.vn .vn-abas{display:none;} }
@keyframes vn-sheet-sobe{ from{transform:translateY(100%);} to{transform:none;} }
@media (prefers-reduced-motion:reduce){ html.vn dialog:not(.grande)[open]{animation:none;} }
@media (max-width:620px){
  /* linha do grupo (cartao achatado): o recuo e o da lista que a contem (--rec-cartao); os filhos dela
     nao somam outro --rec-cartao, entao o texto alinha com o cabecalho do grupo */
  html.vn :where(.cartao, .cx) .ad-card{padding-inline:0;}
  html.vn :where(.cartao, .cx) .ad-card > :where(*){margin-inline:0;}
  /* aviso do Meu relatorio no Meu painel: mesmo recuo dos cartoes (o estilo e todo do .ia-aviso global) */
  html.vn #aviso-rel{padding-inline:var(--rec-cartao);}
}

/* Documento em Markdown .md (28/10/2026, tela Documentos): o HTML que o documentos.render gera (titulos h2-h6,
   listas, tarefas, citacao, codigo, tabela em .md-tab rolavel). So tokens; vale nos dois temas. No guia. */
html.vn .md{color:var(--tx1); font-size:var(--f4); line-height:1.65; max-width:72ch; min-width:0; overflow-wrap:anywhere;}
html.vn .md > :first-child{margin-top:0;}
html.vn .md > :last-child{margin-bottom:0;}
html.vn .md :is(p, ul, ol, blockquote, pre, .md-tab, hr){margin:0 0 var(--e4);}
html.vn .md :is(h2, h3, h4, h5, h6){color:var(--tx1); line-height:1.3; margin:var(--e6) 0 var(--e2); scroll-margin-top:var(--e6); letter-spacing:-.012em;}
html.vn .md h2{font-size:var(--f5); font-weight:650; padding-bottom:var(--e2); border-bottom:1px solid var(--line);}
html.vn .md h3{font-size:var(--f4); font-weight:650;}
html.vn .md :is(h4, h5, h6){font-size:var(--f3); font-weight:600; color:var(--tx2);}
html.vn .md a{color:var(--glpi-t); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em;}
html.vn .md a:focus-visible{outline:2px solid var(--glpi-t); outline-offset:2px; border-radius:var(--e0);}
html.vn .md strong{font-weight:650;}
html.vn .md del{color:var(--tx3);}
html.vn .md :is(ul, ol){padding-left:var(--e5);}
html.vn .md li + li{margin-top:var(--e1);}
html.vn .md li > :is(ul, ol){margin:var(--e1) 0 0;}
html.vn .md li::marker{color:var(--tx3);}
html.vn .md li.md-li-tarefa{list-style:none; margin-left:calc(-1 * var(--e5) + var(--e1));}
html.vn .md .md-tarefa{display:inline-grid; place-items:center; width:1rem; height:1rem; margin-right:var(--e2); vertical-align:-.15em; border-radius:var(--e1); box-shadow:inset 0 0 0 1.5px var(--tx3); font-size:var(--fn, .75rem); line-height:1;}
html.vn .md .md-tarefa.feito{background:var(--ok); box-shadow:none; color:var(--sobre-alerta);}
html.vn .md blockquote{padding:var(--e3) var(--e4); border-left:3px solid var(--info); border-radius:0 var(--r2) var(--r2) 0; background:var(--info-bg); color:var(--tx1);}
html.vn .md blockquote > :last-child{margin-bottom:0;}
html.vn .md code{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.9em; padding:.1em .35em; border-radius:var(--e1); background:var(--fill);}
html.vn .md pre{position:relative; overflow:auto; padding:var(--e4); border-radius:var(--r2); background:var(--s2); box-shadow:inset 0 0 0 1px var(--line); line-height:1.5;}
html.vn .md pre:focus-visible, html.vn .md .md-tab:focus-visible{outline:2px solid var(--glpi-t); outline-offset:2px;}
html.vn .md pre code{padding:0; background:none; font-size:var(--f2); white-space:pre; overflow-wrap:normal;}
html.vn .md .md-lang{display:block; margin-bottom:var(--e2); color:var(--tx3); font-size:var(--fn, .75rem); font-weight:600; letter-spacing:.04em; text-transform:uppercase;}
html.vn .md .md-tab{overflow-x:auto; border-radius:var(--r2); box-shadow:inset 0 0 0 1px var(--line);}
html.vn .md table{border-collapse:collapse; width:100%; font-size:var(--f2); font-variant-numeric:tabular-nums;}
html.vn .md :is(th, td){padding:var(--e2) var(--e3); text-align:left; vertical-align:top; border-bottom:1px solid var(--line); overflow-wrap:normal; min-width:6rem;}
html.vn .md th{color:var(--tx2); font-weight:600; background:var(--fillh);}
html.vn .md tr:last-child td{border-bottom:0;}
html.vn .md :is(th, td).md-c{text-align:center;}
html.vn .md :is(th, td).md-d{text-align:right;}
html.vn .md hr{border:0; border-top:1px solid var(--line);}
@media (max-width:620px){
  html.vn .md :is(ul, ol){padding-left:var(--e4);}
}
/* link sozinho em item de lista ou celula: alvo de toque de 44px sem mexer no desenho da linha. 28/10: por
   ponteiro de toque, nao por largura (o tablet de 768 ficava com 20px) */
@media (pointer:coarse){
  html.vn .md :is(li, td, th) a{display:inline-block; padding-block:.75rem; margin-block:-.75rem;}
}

/* Avatar de perfil .av (28/10/2026, leva c): rosto fofo e minimalista do window.avatarSvg (topo.tpl.html),
   arte original (docs/AVATARES.md). As formas trazem so classe; a cor vem daqui. data-cor (0 a 11) escolhe a
   pele, a tinta dos tracos (escura nas peles claras, creme no Cacau, sempre 4,5:1 ou mais contra a pele) e a
   touca (a cor "oposta" da paleta) e a bochecha (rosa opaco proprio de cada pele, 1,45:1 ou mais contra ela:
   o rosa translucido unico virava marrom no verde e sumia no coral). No Cacau o brilho e o dentinho (.bri)
   viram a propria pele, porque o branco sumia sobre a tinta creme. A pele nao muda com o tema (e identidade); o que muda e
   o contorno de adesivo (.ct): claro no escuro e tinta no claro, entao a cabeca sempre se separa do que esta atras.
   Leva e (28/10): sem formato nem fundo; a cabeca e o circulo inteiro do .av e a touca e o broto sobem por fora
   dele (ate ~20% do tamanho acima da borda), por isso o .av tem overflow visivel e nenhum recorte.
   Tamanhos: .p (24px, as sardas somem), padrao (32px), .m (40px), .g (56px, podio) e .xg (96px, previa). */
:root{--ouro:#f2c14e; --prata:#c3cad6; --bronze:#d08a4c; --sobre-medalha:#1b1405;
  --av-c0:#f7c9a3; --av-c1:#e3a877; --av-c2:#c28152; --av-c3:#75462b; --av-c4:#ffd54f; --av-c5:#ff9e5e;
  --av-c6:#f2726b; --av-c7:#ff9fc6; --av-c8:#b991f2; --av-c9:#6db5f6; --av-c10:#7edcb1; --av-c11:#5cb860;
  --av-tinta:#2a2233; --av-tinta-clara:#fff3e4; --av-bri:#ffffff; --av-luz:#ffffff; --av-lingua:#ff7a93;
  --av-cur:#f4d9a8; --av-folha:#48b25a; --av-caule:#2f8a43;
  --av-b0:#f4908f; --av-b1:#e2706f; --av-b2:#a3424c; --av-b3:#c4525e; --av-b4:#ff8f73; --av-b5:#ec5a66; --av-b6:#b8324a; --av-b7:#f0548a; --av-b8:#ffc0e2; --av-b9:#ffc4dd; --av-b10:#f77d99; --av-b11:#ffb3c4;}
html.vn .av{--av-pele:var(--av-c0); --av-traco:var(--av-tinta); --av-touca:var(--av-c9); --av-boch:var(--av-b0); --av-contorno:rgba(244,246,250,.9);
  width:2rem; height:2rem; flex:none; display:inline-block; vertical-align:middle; border-radius:50%; overflow:visible;}
html.vn.claro .av, html.vn body.claro .av{--av-contorno:var(--av-tinta);}
html.vn .av[data-cor="1"]{--av-pele:var(--av-c1); --av-touca:var(--av-c8); --av-boch:var(--av-b1);}
html.vn .av[data-cor="2"]{--av-pele:var(--av-c2); --av-touca:var(--av-c10); --av-boch:var(--av-b2);}
html.vn .av[data-cor="3"]{--av-pele:var(--av-c3); --av-traco:var(--av-tinta-clara); --av-touca:var(--av-c4); --av-bri:var(--av-c3); --av-boch:var(--av-b3);}
html.vn .av[data-cor="4"]{--av-pele:var(--av-c4); --av-touca:var(--av-c6); --av-boch:var(--av-b4);}
html.vn .av[data-cor="5"]{--av-pele:var(--av-c5); --av-touca:var(--av-c9); --av-boch:var(--av-b5);}
html.vn .av[data-cor="6"]{--av-pele:var(--av-c6); --av-touca:var(--av-c4); --av-boch:var(--av-b6);}
html.vn .av[data-cor="7"]{--av-pele:var(--av-c7); --av-touca:var(--av-c8); --av-boch:var(--av-b7);}
html.vn .av[data-cor="8"]{--av-pele:var(--av-c8); --av-touca:var(--av-c4); --av-boch:var(--av-b8);}
html.vn .av[data-cor="9"]{--av-pele:var(--av-c9); --av-touca:var(--av-c6); --av-boch:var(--av-b9);}
html.vn .av[data-cor="10"]{--av-pele:var(--av-c10); --av-touca:var(--av-c7); --av-boch:var(--av-b10);}
html.vn .av[data-cor="11"]{--av-pele:var(--av-c11); --av-touca:var(--av-c5); --av-boch:var(--av-b11);}
html.vn .av .pele{fill:var(--av-pele);}
html.vn .av .ct{stroke:var(--av-contorno); stroke-width:2.5; stroke-linejoin:round;}
html.vn .av .tr{fill:var(--av-traco);}
html.vn .av .trs{fill:none; stroke:var(--av-traco); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;}
html.vn .av .trs.fino{stroke-width:2.2;}
html.vn .av .bri{fill:var(--av-bri);}
html.vn .av .lin{fill:var(--av-lingua);}
html.vn .av .boch{fill:var(--av-boch);}
html.vn .av .sard{opacity:.7;}
html.vn .av .cur{fill:var(--av-cur);}
html.vn .av .tou{fill:var(--av-touca);}
html.vn .av .tou2{fill:color-mix(in srgb, var(--av-touca) 55%, var(--av-luz));}
html.vn .av .fol{fill:var(--av-folha);}
html.vn .av .caule{fill:none; stroke:var(--av-caule); stroke-width:2.5; stroke-linecap:round;}
html.vn .av.p{width:1.5rem; height:1.5rem;}
html.vn .av.p .det{display:none;}
html.vn .av.m{width:2.5rem; height:2.5rem;}
html.vn .av.g{width:3.5rem; height:3.5rem;}
html.vn .av.xg{width:6rem; height:6rem;}
/* na conta da barra lateral o avatar toma o lugar do circulo de iniciais (28/10) */
html.vn .vn-side .quem > .av{grid-row:1 / span 2; width:2rem; height:2rem;}
html.vn .vn-side .quem > .av ~ .ini{display:none !important;}
/* Editor de avatar .av-editor (Minha conta, 28/10 leva c): a previa (.av-previa: .av.xg, .av-estado e .av-acoes) e os
   grupos (.av-grupo: titulo .av-grupo-tit + .av-opcoes). Cada .av-opcoes e um radiogroup de botoes
   role=radio (aria-checked marca a escolhida, setas mudam, tabindex rotativo). .av-opcoes.cores so com o
   rosto (o nome da cor vai no aria-label e no titulo do grupo). Ao lado na largura do cartao de 34rem+. */
html.vn .av-editor{display:grid; gap:var(--e4); min-width:0;}
html.vn .av-previa{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e3) var(--e4); min-width:0;}
/* leva e: a touca e o broto da previa (96px) sobem ate ~20px acima do circulo; o respiro fica reservado sempre,
   para a previa nao pular ao trocar o extra. Nos botoes do grupo Extra (40px) o transbordo e de ~8px */
html.vn .av-previa > #av-previa{display:inline-flex; padding-top:var(--e5);}
html.vn .av-opcoes.extra > button{padding-top:var(--e4);}
html.vn .av-estado{margin:0; flex:1 1 8rem; min-width:0; font-size:var(--f2); color:var(--tx2); line-height:1.5;}
html.vn .av-acoes{flex:1 1 100%; display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center;}
html.vn .av-grupos{display:flex; flex-direction:column; gap:var(--e4); min-width:0;}
html.vn .av-grupo{display:flex; flex-direction:column; gap:var(--e2); min-width:0;}
/* titulo do grupo em caixa normal: a caixa alta espacejada fica so no cabecalho do cartao */
html.vn .av-grupo-tit{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e2); font-size:var(--f2); font-weight:600;
  color:var(--tx1);}
html.vn .av-grupo-tit > span{font-weight:400; color:var(--tx2);}
/* grade de colunas iguais (nao flex-wrap): "Sonolento" e "Bochechas" eram mais largos e desalinhavam as colunas.
   Coluna fixa de 5,25rem (cabe "Bochechas" em negrito no celular e nao estica o botao no celular) e 4 no maximo: 8 opcoes fecham em
   4+4 no largo e 3+3+2 no celular */
html.vn .av-opcoes{display:grid; grid-template-columns:repeat(auto-fill, 5.25rem); max-width:calc(4 * 5.25rem + 3 * var(--e2)); gap:var(--e2); min-width:0;}
/* revisao 07/11/2026: as 12 cores fecham 6+6 na mesma largura das outras grades (antes 11 e 1 orfa no cartao largo);
   no cartao estreito, 4+4+4 */
html.vn .av-opcoes.cores{grid-template-columns:repeat(6, minmax(2.75rem, 1fr));}
@container (max-width:21rem){ html.vn .av-opcoes.cores{grid-template-columns:repeat(4, minmax(2.75rem, 1fr));} }
/* 03/11/2026: "Gorro de Natal" nao cabe numa coluna de 5,25rem e quebrava em 2 linhas. A opcao ocupa 2 colunas da
   mesma grade (a grade comum nao muda): o Extra tem 7 opcoes e fecha 4+4 no largo e 3+3+2 no celular, sem buraco */
html.vn .av-opcoes.extra > button[data-i="6"]{grid-column:span 2; white-space:nowrap;}
html.vn .av-opcoes > button{display:inline-grid; place-items:center; align-content:center; gap:var(--e1); min-width:0; min-height:2.75rem;
  padding:var(--e2) var(--e1); border:.0625rem solid transparent; border-radius:var(--r2); background:var(--fillh); color:var(--tx2); font:inherit; font-size:var(--f1);
  line-height:1.3; cursor:pointer; transition:background-color var(--dur-2) var(--ease-padrao);}
html.vn .av-opcoes.cores > button{min-width:2.75rem; aspect-ratio:1; padding:var(--e1); border-radius:50%;}
html.vn .av-opcoes > button[aria-checked="true"]{background:var(--fill); color:var(--tx1); font-weight:600;
  box-shadow:inset 0 0 0 .125rem var(--glpi);}
html.vn .av-opcoes > button:focus-visible{outline:.125rem solid var(--glpi); outline-offset:.125rem;}
/* cores forcadas (alto contraste do Windows): fundo e sombra somem, a borda marca a escolhida */
@media (forced-colors:active){
  html.vn .av-opcoes > button[aria-checked="true"]{border:.1875rem solid Highlight;}
}
@media (hover:hover) and (pointer:fine){
  html.vn .av-opcoes > button:not([aria-checked="true"]):hover{background:var(--fill);}
}
@container (min-width:34rem){
  html.vn .av-editor{grid-template-columns:auto minmax(0, 1fr); align-items:start;}
  html.vn .av-previa{flex-direction:column; align-items:flex-start; width:9.5rem; position:sticky; top:var(--e4);}
  html.vn .av-previa > :is(.av-estado, .av-acoes){flex:none;}
}

/* Podio .podio (28/10/2026, Desempenho): 1o no meio e mais alto, 2o a esquerda, 3o a direita. Cada .degrau
   leva o avatar (.av.g, varios no empate, sobrepostos), o nome, o numero que justifica e a base com a
   medalha (.medalha.m1/.m2/.m3). Degrau sem ninguem (.vazio) fica so com a base tracejada. Sem animacao. */
html.vn .podio{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:end; gap:var(--e2); margin-top:var(--e3);
  padding:0; list-style:none;}
html.vn .podio > .degrau{display:flex; flex-direction:column; align-items:center; gap:var(--e1); min-width:0; text-align:center;}
html.vn .podio > .l1{order:2;} html.vn .podio > .l2{order:1;} html.vn .podio > .l3{order:3;}
html.vn .podio .rostos{display:flex; justify-content:center; padding-left:var(--e3);}
html.vn .podio .rostos > .av{margin-left:calc(-1 * var(--e3)); box-shadow:0 0 0 .125rem var(--card), 0 0 0 .1875rem var(--line2);}
html.vn .podio .nome{font-size:var(--f2); font-weight:600; color:var(--tx1); line-height:1.3; overflow-wrap:anywhere;}
html.vn .podio .valor{font-size:var(--f3); font-weight:600; color:var(--tx2); font-variant-numeric:tabular-nums;}
html.vn .podio .base{align-self:stretch; display:grid; place-items:start center; padding-top:var(--e2); margin-top:var(--e1);
  border-radius:var(--r2) var(--r2) 0 0; background:var(--s2); box-shadow:inset 0 .0625rem 0 var(--line2);}
/* a base (com a medalha) vem primeiro no HTML, para o leitor de tela dizer o lugar antes do nome, e desce aqui */
html.vn .podio .base{order:9;}
html.vn .podio > .l1 .base{height:4.5rem;}
html.vn .podio > .l2 .base{height:3.25rem;}
html.vn .podio > .l3 .base{height:2.25rem;}
html.vn .podio > .vazio .base{background:transparent; box-shadow:none; border:.0625rem dashed var(--line2); border-bottom:0;}
html.vn .podio > .vazio .nome{color:var(--tx3); font-weight:500;}
html.vn .medalha{display:inline-grid; place-items:center; min-width:1.75rem; height:1.75rem; padding:0 var(--e1); border-radius:var(--rp);
  font-size:var(--f1); font-weight:700; color:var(--sobre-medalha); box-shadow:inset 0 0 0 .0625rem var(--line2);}
html.vn .medalha.m1{background:var(--ouro);}
html.vn .medalha.m2{background:var(--prata);}
html.vn .medalha.m3{background:var(--bronze);}
html.vn .podio > .vazio .medalha{background:transparent; color:var(--tx3);}
html.vn .podio .empate{font-size:var(--f1); color:var(--tx3);}
@media (max-width:620px){
  html.vn .podio .av.g{width:2.75rem; height:2.75rem;}
}

/* Sigla com explicacao (28/10/2026): abbr.sigla[data-dica] + balao unico .dica-sigla (fixed, nao corta em tabela) */
html.vn abbr.sigla{text-decoration:underline dotted; text-decoration-color:var(--label3); text-underline-offset:3px; cursor:help; border-radius:var(--e1); position:relative;}
html.vn abbr.sigla::after{content:""; position:absolute; left:50%; top:50%; width:max(100%, 2.75rem); height:max(100%, 2.75rem); transform:translate(-50%, -50%);}
html.vn abbr.sigla:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn .dica-sigla{position:fixed; z-index:var(--z-dica); max-width:min(18rem, calc(100vw - 16px)); padding:var(--e2) var(--e3); border-radius:var(--r1);
  background:var(--s3); color:var(--label); border:1px solid var(--line2); box-shadow:var(--sh2); font-size:var(--f3); line-height:1.4; font-weight:400; pointer-events:none;}
html.vn .dica-sigla[hidden]{display:none;}

/* anim: Minha conta pelo nome (28/10/2026)
   O bloco avatar + nome + perfil do rodape do menu e o link a.vn-conta para /conta: alvo de 44px,
   fundo sutil no hover, avatar sobe 4% e a seta desliza 2px. So transform/opacity animam. */
html.vn a.vn-conta{min-height:2.75rem; color:inherit; text-decoration:none; border-radius:var(--r2); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-2) var(--ease-padrao);}
html.vn a.vn-conta .quem{cursor:inherit;}
html.vn a.vn-conta .vn-conta-seta{flex:none; width:1rem; height:1rem; stroke:var(--tx3); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.55;
  transition:transform var(--dur-3) var(--mola), opacity var(--dur-2) var(--ease-padrao);}
html.vn a.vn-conta .quem > svg, html.vn a.vn-conta .quem .ini{transition:transform var(--dur-3) var(--mola);}
html.vn a.vn-conta:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn a.vn-conta[aria-current="page"]{background:var(--s2);}
html.vn a.vn-conta[aria-current="page"] .vn-conta-seta{opacity:.9;}
@media (hover:hover){
  html.vn a.vn-conta:hover{background:var(--s2);}
  html.vn a.vn-conta:hover .vn-conta-seta{opacity:1; transform:translateX(2px);}
  html.vn a.vn-conta:hover .quem > svg, html.vn a.vn-conta:hover .quem .ini{transform:scale(1.04);}
}
html.vn a.vn-conta:active{background:var(--lamina2);}
html.vn a.vn-conta:active .quem > svg, html.vn a.vn-conta:active .quem .ini{transform:scale(.98);}
@media (prefers-reduced-motion:reduce){
  html.vn a.vn-conta, html.vn a.vn-conta .vn-conta-seta, html.vn a.vn-conta .quem > svg, html.vn a.vn-conta .quem .ini{transition:none;}
  html.vn a.vn-conta:hover .vn-conta-seta, html.vn a.vn-conta:hover .quem > svg, html.vn a.vn-conta:hover .quem .ini, html.vn a.vn-conta:active .quem > svg, html.vn a.vn-conta:active .quem .ini{transform:none;}
}

/* anim: documentos, historico e relatorio (28/10/2026). Entrada roda uma vez por carregamento; o polling so anima linha nova */
@media (prefers-reduced-motion: no-preference){
  @keyframes vn-cascata{from{opacity:0; transform:translateY(.375rem);}}
  @keyframes vn-doc-abre{from{opacity:0; transform:scale(.98);}}
  @keyframes vn-linha-nova{from{opacity:0; transform:translateX(-.5rem);}}
  @keyframes vn-faixa-corre{from{transform:translateX(-100%);} to{transform:translateX(290%);}}
  @keyframes vn-seta-baixa{50%{transform:translateY(.125rem);}}
  /* Documentos: cascata na primeira lista; filtro some com fade e os que ficam deslizam (FLIP no JS) */
  html.vn .dc-itens.entra > li{animation:vn-cascata var(--dur-3) var(--ease-entra) backwards; animation-delay:calc(var(--i, 0) * var(--dur-3) / 6);}
  html.vn .dc-itens > li.chega{animation:vn-cascata var(--dur-3) var(--ease-entra) backwards;}
  html.vn .dc-itens > li.sai{opacity:0; transform:scale(.98); transition:opacity var(--dur-2) var(--ease-padrao), transform var(--dur-2) var(--ease-padrao);}
  html.vn .dc-itens > li.desliza{transition:transform var(--dur-3) var(--ease-padrao);}
  html.vn #v-ler.dc-abre{animation:vn-doc-abre var(--dur-3) var(--ease-entra) both; transform-origin:50% 0;}
  /* Historico: linhas em cascata so na primeira leitura; no polling so a linha que chegou */
  html.vn .dia .linha.entra{animation:vn-cascata var(--dur-3) var(--ease-entra) backwards; animation-delay:calc(var(--i, 0) * var(--dur-1) / 4);}
  html.vn .dia .linha.nova{animation:vn-linha-nova var(--t2) var(--mola) backwards;}
  /* Relatorio: Gerar PDF em andamento, faixa indeterminada na base do botao e seta descendo */
  html.vn .rel #rel-pdf.gerando::after{animation:vn-faixa-corre calc(var(--t2) * 3) var(--ease-padrao) infinite;}
  html.vn .rel #rel-pdf.gerando svg{animation:vn-seta-baixa calc(var(--t2) * 2) var(--ease-padrao) infinite;}
}
html.vn .rel #rel-pdf{position:relative; overflow:hidden;}
html.vn .rel #rel-pdf.gerando{cursor:progress;}
html.vn .rel #rel-pdf.gerando::after{content:""; position:absolute; left:0; bottom:0; width:35%; height:.125rem; border-radius:var(--rp); background:currentColor; opacity:.7; pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  html.vn .dc-itens > li, html.vn #v-ler.dc-abre, html.vn .dia .linha, html.vn .rel #rel-pdf.gerando::after, html.vn .rel #rel-pdf.gerando svg{animation:none; transition:none;}
  html.vn .rel #rel-pdf.gerando::after{width:100%; opacity:.45;}
}
/* anim: micro-interacoes globais e transicao de pagina (28/10/2026)
   Troca de tela por View Transitions (mesmo dominio): a barra lateral fica parada e so o conteudo
   (.tela) cruza com leve deslize. Navegador sem suporte ignora e a pagina troca como sempre. */
html.vn .vn-side{view-transition-name:vn-lado;}
html.vn .tela{view-transition-name:vn-tela;}
::view-transition-group(vn-lado), ::view-transition-group(vn-tela){animation:none;}
::view-transition-old(vn-lado){display:none;}
::view-transition-new(vn-lado){animation:none;}
@media (prefers-reduced-motion:no-preference){
  @keyframes vn-tela-sai{to{opacity:0; transform:translateY(-.25rem);}}
  @keyframes vn-tela-entra{from{opacity:0; transform:translateY(.5rem);}}
  ::view-transition-old(vn-tela){animation:vn-tela-sai var(--dur-2) var(--ease-padrao) both;}
  ::view-transition-new(vn-tela){animation:vn-tela-entra var(--t2) var(--ease-entra) both;}
  ::view-transition-old(root), ::view-transition-new(root){animation-duration:var(--dur-2);}
}
/* menu lateral: filete do item atual que cresce no clicado (.vai) e recolhe no que sai (.indo); no hover so desponta */
html.vn .vn-nav .it{position:relative;}
/* filete reto com pontas proprias, recuado da borda (left .1875rem) para nao encostar na curva do raio do item */
html.vn .vn-nav .it::before{content:""; position:absolute; left:.1875rem; top:25%; bottom:25%; width:.1875rem; border-radius:var(--rp); background:var(--nav-filete, var(--glpi));
  transform:scaleY(0); opacity:0; transform-origin:center; transition-duration:var(--dur-3), var(--dur-2); transition-timing-function:var(--mola), var(--ease-padrao); pointer-events:none;}
html.vn .vn-nav .it[aria-current="page"]::before, html.vn .vn-nav a.it.vai::before{transform:scaleY(1); opacity:1;}
html.vn .vn-nav.indo a.it[aria-current="page"]:not(.vai)::before{transform:scaleY(0); opacity:0;}
@media (hover:hover) and (pointer:fine){
  html.vn .vn-nav .it:not([aria-current="page"]):not(.vai):hover::before{transform:scaleY(.45); opacity:.5;}
}
/* apertar: botoes de fechar (x) dos avisos e dialogos ganham a mesma resposta de pressao */
html.vn button.x:active:not([disabled]){transform:scale(.92);}
/* aviso de bloqueio/instalacao no rodape da barra: entra com fade e deslize quando aparece */
@media (prefers-reduced-motion:no-preference){
  @keyframes vn-aviso-entra{from{opacity:0; transform:translateY(.375rem);}}
  html.vn .vn-aviso-bloq:not([hidden]){animation:vn-aviso-entra var(--dur-3) var(--ease-entra) backwards;}
}
@media (prefers-reduced-motion:reduce){
  html.vn .vn-nav .it::before{transition:none;}
  html.vn button.x:active{transform:none;}
}

/* anim: dialogos, menus suspensos, abas e formularios (28/10/2026)
   Dialogo: no computador abre com o fundo esmaecendo e a caixa crescendo de .96 a 1, e fecha no reverso
   (@starting-style + transition-behavior:allow-discrete; navegador sem suporte abre e fecha seco, como antes).
   No celular a sheet ja sobe por animacao; aqui ela desce ao fechar. Menus suspensos ja caem 4px com fade
   (vn-menu-entra) e a pastilha do segmentado ja desliza (.seg > .ind); o balao de sigla ganha o mesmo fade. */
@media (prefers-reduced-motion:no-preference){
  html.vn dialog:not(.grande), html.vn dialog:not(.grande)::backdrop{
    transition-property:opacity, transform, overlay, display;
    transition-duration:var(--dur-3);
    transition-timing-function:var(--ease-padrao);
    transition-behavior:allow-discrete;}
  html.vn dialog:not(.grande)::backdrop{opacity:0;}
  html.vn dialog:not(.grande)[open]::backdrop{opacity:1;}
  @starting-style{ html.vn dialog:not(.grande)[open]::backdrop{opacity:0;} }
  @media (min-width:621px){
    html.vn dialog:not(.grande){opacity:0; transform:scale(.96);}
    html.vn dialog:not(.grande)[open]{opacity:1; transform:none;}
    @starting-style{ html.vn dialog:not(.grande)[open]{opacity:0; transform:scale(.96);} }
  }
  @media (max-width:620px){
    html.vn dialog:not(.grande){transform:translateY(100%);}
    html.vn dialog:not(.grande)[open]{transform:none;}
  }
  /* balao de sigla: cai 4px com fade ao aparecer (so opacidade e transform; a posicao muda seca) */
  html.vn .dica-sigla{transition:opacity var(--dur-2) var(--ease-entra), transform var(--dur-2) var(--ease-entra);}
  @starting-style{ html.vn .dica-sigla:not([hidden]){opacity:0; transform:translateY(-.25rem);} }
  /* campo com erro: treme curto (4px, 3 ciclos) quando passa a invalido; enquanto segue invalido nao repete */
  @keyframes vn-treme{
    16.6%, 50%, 83.3%{transform:translateX(-.25rem);}
    33.3%, 66.6%{transform:translateX(.25rem);}
  }
  html.vn :is(input, select, textarea, .busca):is([aria-invalid="true"], :user-invalid){animation:vn-treme var(--t2) var(--ease-padrao) 1;}
  /* salvo com sucesso: o check do aviso (toastPainel) surge com mola e o traco se desenha da esquerda */
  @keyframes vn-check-surge{from{opacity:0; transform:scale(.4);}}
  @keyframes vn-check-traco{from{clip-path:inset(0 100% 0 0);}}
  html.vn .toast .ok-check{animation:vn-check-surge var(--t2) var(--mola) backwards;}
  html.vn .toast .ok-check svg{animation:vn-check-traco var(--t2) var(--ease-entra) var(--dur-2) backwards;}
}
/* check do aviso de sucesso: circulo verde pequeno antes da frase */
html.vn .toast .ok-check{flex:none; display:inline-grid; place-items:center; width:1.25rem; height:1.25rem; margin-inline-end:-.375rem; border-radius:50%; background:var(--green); color:var(--sobre-ok);}
html.vn .toast .ok-check svg{display:block; width:.8125rem; height:.8125rem;}

/* anim: Kanban e Gantt dos projetos (28/10/2026). Cartão levantado no arrasto (retrato nativo e toque), coluna-alvo
   com véu na cor dela, cartão solto assenta na --mola, FLIP de quem muda de lugar (o JS anima transform), check curto
   no concluído e barras do Gantt crescendo da esquerda em cascata. Só transform, opacity e clip-path; sem layout shift */
html.vn .card.levantado{transform:rotate(2deg) scale(1.03); box-shadow:var(--flutua); transition:none;}
html.vn .card.arrastando.voando{opacity:1; z-index:10; pointer-events:none; transform:translate(var(--dx,0px), var(--dy,0px)) rotate(2deg) scale(1.03); box-shadow:var(--flutua); transition:none;}
html.vn .coluna{transition:box-shadow var(--t1) var(--mola), transform var(--t2) var(--mola);}
html.vn .coluna::after{content:""; position:absolute; inset:0; border-radius:inherit; background:color-mix(in srgb, var(--cc, var(--blue)) 7%, transparent); opacity:0; pointer-events:none; transition:opacity var(--dur-3) var(--ease-padrao);}
html.vn .coluna.sobre::after{opacity:1;}
html.vn .card .ck-anim{position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; pointer-events:none; opacity:0;}
html.vn .card .ck-anim i{display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--ok); color:var(--sobre-ok); box-shadow:0 0 0 .375rem var(--ok-bg);}
html.vn .card .ck-anim svg{width:1.125rem; height:1.125rem; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
@media (prefers-reduced-motion: no-preference){
  html.vn .coluna.sobre{transform:translateY(-.125rem);}
  html.vn .card.assenta{animation:anim-assenta var(--t2) var(--mola) both;}
  html.vn .card .ck-anim{animation:anim-ck-pop calc(var(--t2) * 2.6) var(--ease-padrao) both;}
  html.vn .card .ck-anim i{animation:anim-ck-bola var(--t2) var(--mola) both;}
  html.vn .card .ck-anim svg{animation:anim-ck-traco var(--t2) var(--ease-entra) var(--dur-2) both;}
  html.vn .gantt.entra .g-bar{transform-origin:left center; animation:anim-g-cresce var(--t2) var(--mola) calc(var(--i, 0) * var(--dur-3) / 5) both;}
  @keyframes anim-assenta{from{transform:rotate(2deg) scale(1.03);} to{transform:none;}}
  @keyframes anim-ck-pop{0%{opacity:0;} 12%{opacity:1;} 70%{opacity:1;} 100%{opacity:0;}}
  @keyframes anim-ck-bola{from{transform:scale(.5);} to{transform:scale(1);}}
  @keyframes anim-ck-traco{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}
  @keyframes anim-g-cresce{from{transform:scaleX(0); opacity:.4;} to{transform:scaleX(1); opacity:1;}}
}
@media (prefers-reduced-motion: reduce){
  html.vn .card.levantado, html.vn .card.arrastando.voando, html.vn .coluna.sobre{transform:none;}
  html.vn .card.assenta, html.vn .card .ck-anim, html.vn .gantt.entra .g-bar{animation:none;}
  html.vn .card .ck-anim{display:none;}
  html.vn .coluna, html.vn .coluna::after{transition:none;}
}
/* anim: fila (28/10/2026). Entrada escalonada so no 1o desenho com dados (classe .entra posta pelo JS
   uma vez), brilho no chamado que chegou no polling (.chega, 1,5 s), pulso no ponto do SLA perto de
   estourar e na espera de repasse, crossfade do corpo ao trocar agrupamento ou equipe (.troca) */
@media (prefers-reduced-motion:no-preference){
  @keyframes vn-fila-entra{from{opacity:0; transform:translateY(.375rem);}}
  @keyframes vn-fila-chega{from{opacity:1;} 40%{opacity:.85;} to{opacity:0;}}
  @keyframes vn-fila-pulsa{50%{opacity:.35; transform:scale(.7);}}
  @keyframes vn-fila-troca{from{opacity:.25;}}
  html.vn .item.entra:not(.aberta){animation:vn-fila-entra var(--t2) var(--ease-entra) backwards; animation-delay:calc(var(--i, 0) * var(--dur-3) / 10);}
  html.vn .item.chega:not(.aberta)::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(90deg, color-mix(in srgb, var(--glpi) 30%, transparent), color-mix(in srgb, var(--glpi) 10%, transparent) 60%, transparent);
    box-shadow:inset 3px 0 0 var(--glpi); opacity:0; animation:vn-fila-chega calc(var(--dur-3) * 7.5) var(--ease-padrao) forwards;}
  html.vn .sla .tr.tto.s-atencao .trilho b{animation:vn-fila-pulsa calc(var(--dur-2) * 10) var(--ease-padrao) infinite;}
  html.vn .badge.pulsa::before{animation:vn-fila-pulsa calc(var(--dur-2) * 10) var(--ease-padrao) infinite;}
  html.vn #faixa-tto::before{animation:vn-fila-pulsa calc(var(--dur-2) * 10) var(--ease-padrao) infinite;}
  html.vn #corpo.troca{animation:vn-fila-troca var(--dur-3) var(--ease-entra) backwards;}
}
/* o ponto da espera de repasse existe sempre (parado em reduced-motion); so a cor do texto */
html.vn .badge.pulsa::before{content:""; flex:none; width:.375rem; height:.375rem; border-radius:50%; background:currentColor;}
@media (prefers-reduced-motion:reduce){
  html.vn .item.entra, html.vn .item.chega::after, html.vn .sla .tr.tto.s-atencao .trilho b, html.vn .badge.pulsa::before, html.vn #faixa-tto::before, html.vn #corpo.troca{animation:none;}
}

/* anim: Meu painel (28/10/2026). Lembretes em cascata, card que chega ou sai, card erguido no arrasto, selo do expediente.
   So transform e opacity; o FLIP da reordenacao roda no JS (animaQuadro) com --t2 e --mola */
html.vn #s-org .card::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--pousa); opacity:0; pointer-events:none; transition:opacity var(--dur-3) var(--ease-padrao);}
html.vn #s-org .card.arrastando{opacity:.92; transform:scale(1.02); z-index:10;}
html.vn #s-org .card.arrastando::after{opacity:1;}
html.vn .anim-fantasma{list-style:none;}
@media (prefers-reduced-motion: no-preference){
  @keyframes anim-entra{from{opacity:0; transform:translateY(.375rem) scale(.98);} to{opacity:1; transform:none;}}
  @keyframes anim-sai{from{opacity:1; transform:none;} to{opacity:0; transform:scale(.94);}}
  @keyframes anim-troca{from{opacity:0; transform:translateY(-.25rem);} to{opacity:1; transform:none;}}
  html.vn .lem-lista > li.anim-cascata{animation:anim-entra var(--t2) var(--ease-entra) both; animation-delay:calc(var(--i, 0) * var(--dur-1) * .375);}
  html.vn :is(.lem-lista > li, .card).anim-entra{animation:anim-entra var(--t2) var(--ease-entra) both;}
  html.vn .anim-fantasma{animation:anim-sai var(--dur-3) var(--ease-padrao) forwards; transform-origin:50% 50%;}
  html.vn .exp.anim-troca{animation:anim-troca var(--t2) var(--ease-entra);}
}
@media (prefers-reduced-motion: reduce){
  html.vn #s-org .card.arrastando{transform:none;}
  html.vn #s-org .card::after{transition:none;}
  html.vn .anim-fantasma{display:none;}
}

/* anim: desempenho e podio (28/10/2026). So com .anim-entra no #corpo, que o desempenho.tpl.html poe na primeira
   pintura e na troca de periodo e tira logo depois: o redesenho da atualizacao automatica nao reanima nada.
   Os numeros grandes contam de 0 ao valor no JS (contaAte); aqui ficam barras, grafico, pilha e podio. */
html.vn .podio > .l1:not(.vazio) .medalha{position:relative;}
html.vn .podio > .l1:not(.vazio) .medalha::before{content:""; position:absolute; left:50%; top:-.5rem; width:.75rem; height:.4375rem; margin-left:-.375rem;
  background:var(--ouro); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M0 7L1 1l3 3 2-4 2 4 3-3 1 6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M0 7L1 1l3 3 2-4 2 4 3-3 1 6z'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none;}
@media (prefers-reduced-motion:no-preference){
  @keyframes des-cobre-sai{from{transform:scaleX(1);} to{transform:scaleX(0);}}
  @keyframes des-aparece{from{opacity:0;}}
  @keyframes des-cresce-y{from{transform:scaleY(0);}}
  @keyframes des-revela{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}
  @keyframes des-sobe{0%{opacity:0; transform:translateY(1.5rem);} 70%{opacity:1; transform:translateY(-.1875rem);} 100%{opacity:1; transform:none;}}
  @keyframes des-coroa{from{opacity:0; transform:translateY(.25rem) scale(.6);}}
  @keyframes des-reluz{from{background-position:120% 0;} to{background-position:-20% 0;}}
  /* barra .limite (cartoes e listas por pessoa; a tabela fica de fora por causa do fundo da linha): uma capa da
     cor do trilho recolhe para a direita e a parte cheia aparece crescendo da base; o traco da meta fica por cima */
  html.vn .anim-entra :is(.des-ind, .des-pes) .limite::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(var(--fill), var(--fill)) var(--card); transform-origin:right center;
    animation:des-cobre-sai calc(var(--dur-3) * 3) var(--ease-entra) calc(var(--dur-1) + var(--ai, 0) * var(--dur-3) / 5) both;}
  html.vn .anim-entra :is(.des-ind, .des-pes) .limite > b{z-index:1; animation:des-aparece var(--dur-3) var(--ease-entra) calc(var(--t2) + var(--dur-2) + var(--ai, 0) * var(--dur-3) / 5) backwards;}
  html.vn .anim-entra .des-pes > li:nth-child(2){--ai:1;} html.vn .anim-entra .des-pes > li:nth-child(3){--ai:2;}
  html.vn .anim-entra .des-pes > li:nth-child(4){--ai:3;} html.vn .anim-entra .des-pes > li:nth-child(5){--ai:4;}
  html.vn .anim-entra .des-pes > li:nth-child(n+6){--ai:5;}
  /* semana a semana: as colunas sobem da linha de base, uma semana depois da outra; os rotulos entram em fade */
  html.vn .anim-entra .des-svg rect{transform-box:fill-box; transform-origin:50% 100%; animation:des-cresce-y calc(var(--dur-3) * 3) var(--ease-entra) calc(var(--dur-1) + var(--ai, 0) * var(--dur-3) / 4) backwards;}
  html.vn .anim-entra .des-svg text{animation:des-aparece var(--t2) var(--ease-entra) calc(var(--dur-2) * 3) backwards;}
  /* backlog por idade: a pilha se revela da esquerda */
  html.vn .anim-entra .des-pilha{animation:des-revela calc(var(--dur-3) * 3) var(--ease-entra) var(--dur-1) both;}
  /* podio: sobe 3o, 2o e 1o, com leve sobra na curva --mola; o 1o ganha a coroa e um reflexo que passa na medalha */
  html.vn .anim-entra .podio > .degrau{animation:des-sobe calc(var(--t2) + var(--dur-2)) var(--mola) backwards;}
  html.vn .anim-entra .podio > .l3{animation-delay:var(--dur-2);}
  html.vn .anim-entra .podio > .l2{animation-delay:calc(var(--dur-2) * 2);}
  html.vn .anim-entra .podio > .l1{animation-delay:calc(var(--dur-2) * 3);}
  html.vn .anim-entra .podio > .l1:not(.vazio) .medalha::before{animation:des-coroa var(--t2) var(--mola) calc(var(--dur-2) * 5) backwards;}
  html.vn .anim-entra .podio > .l1:not(.vazio) .medalha{background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%) var(--ouro);
    background-size:250% 100%; background-repeat:no-repeat; animation:des-reluz calc(var(--t2) * 2) var(--ease-padrao) calc(var(--dur-3) * 5) backwards;}
}

/* ==== fluidez D+E (28/10/2026): casco, topo e CSS global ====
   Escala unica de movimento (tokens no :root): --dur-1 120ms (apertar), --dur-2 160ms (hover, cor), --dur-3 200ms
   (abrir, deslizar), --dur-4 280ms (troca de tela, aviso), --dur-brilho 1,4s (esqueleto); curvas --ease-entra,
   --ease-padrao e --ease-mola. --t1/--t2/--mola ficam so como apelidos (--dur-2, --dur-4, --ease-mola). */
/* o conteudo ocupa a altura da janela desde a 1a pintura: o fim da pagina nasce fora da dobra e a barra de
   rolagem tem lugar reservado, entao chegar o dado nao empurra nem estreita o que ja esta na tela */
html.vn{scrollbar-gutter:stable;}
html.vn .tela{min-height:calc(100dvh - 2.75rem - env(safe-area-inset-bottom, 0rem));}
@media (max-width:980px){ html.vn .tela{min-height:calc(100dvh - 7rem - env(safe-area-inset-bottom, 0rem));} }   /* a barra do logo fica em cima, no fluxo */
/* rodape (footer, sempre o ultimo bloco da .tela): vai para o fim da .tela (margin-top:auto; com conteudo
   longo e o mesmo gap de sempre) e a .tela com rodape ganha a altura dele a mais, entao ele nasce logo abaixo
   da dobra e nao e visto descendo quando o dado chega (CLS do Desempenho e do Historico). Tela curta rola so
   a altura do rodape. O :is(*, #_) vence o margin-block:0 do ritmo (20/10) */
html.vn .tela > footer:is(*, #_), html.vn .tela > .vn-conteudo > footer:is(*, #_){margin-top:auto;}
html.vn .tela:has(> footer, > .vn-conteudo > footer){min-height:calc(100dvh + 3.5rem);}
@media (max-width:980px){ html.vn .tela:has(> footer, > .vn-conteudo > footer){min-height:calc(100dvh + 6rem);} }   /* no celular a .tela comeca no topo e o rodape quebra em linhas */
/* sanfona do menu: abrir um grupo nao relayouta o resto da barra */
html.vn .vn-nav .gitens{contain:layout;}
/* esqueleto: fundo parado e um brilho que corre por cima (::after com transform, so composicao; antes era
   background-position, que repinta o bloco inteiro a cada quadro). A lista da Fila e moldura: so as barras brilham */
html.vn :is(.esqueleto:not(.lista), .esqcard, .esq-b, .rel .esq){position:relative; overflow:hidden; isolation:isolate; background:var(--s2); animation:none;}
@media (prefers-reduced-motion:no-preference){
  @keyframes vn-brilho-corre{from{transform:translateX(-100%);} to{transform:translateX(100%);}}
  html.vn :is(.esqueleto:not(.lista), .esqcard, .esq-b, .rel .esq)::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 30%, var(--s3) 50%, transparent 70%); transform:translateX(-100%);
    animation:vn-brilho-corre var(--dur-brilho) linear infinite;}
}

/* ==== natal (30/10/2026, frente Natal) ====================================================================
   Epoca decidida no servidor (natal_ativo: PAINEL_NATAL vazio segue 31/10 a 26/12 em Sao Paulo, 1 forca, 0
   desliga) e marcada no <html> pelo VN_PREPINTA antes do desenho: html[data-tema-sazonal="natal"].
   Tokens so --sazonal-*: status, acento e SLA nao mudam de cor; o vermelho do gorro e desenho, nunca pastilha. */
html.vn{--sazonal-gorro:#d6342f; --sazonal-gorro-sombra:#a3221f; --sazonal-verde:#2f9a52; --sazonal-verde-sombra:#1d6e39;
  --sazonal-elfo:#3aa35b; --sazonal-elfo-sombra:#257a40; --sazonal-ouro:#f2c14e; --sazonal-felpa:#fbfaf6; --sazonal-felpa-sombra:#dcdcd6;
  --sazonal-neve:228,236,250; --sazonal-floco:rgb(228,236,250);}
/* no claro o floco branco some no --side (#e6eaf2): azul acinzentado */
html.vn.claro, html.vn body.claro{--sazonal-neve:84,128,190; --sazonal-floco:rgb(84,128,190);}
/* neve: um canvas atras do texto do menu lateral (z-index -1 dentro do .vn-side fixo, que ja e contexto de
   empilhamento), cai ate o filete do rodape (.vn-pe tem fundo proprio e cobre o resto). Abaixo de 980px o menu
   vira barra de topo e a neve fica desligada */
html.vn .vn-side > .vn-neve{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block;}
html.vn .vn-side > .vn-neve[hidden]{display:none;}
/* atalho Neve no rodape (so na epoca e so no computador): terceiro ao lado de Manual e Feedback */
html.vn .vn-atalhos > #vn-neve{display:none;}
@media (min-width:981px){
  html.vn[data-tema-sazonal="natal"] .vn-atalhos:has(> #vn-neve){grid-template-columns:repeat(3, minmax(0, 1fr));}
  html.vn[data-tema-sazonal="natal"] .vn-atalhos > #vn-neve{display:flex;}
}
@media (max-width:980px){ html.vn .vn-side > .vn-neve{display:none;} }
html.vn .vn-atalhos > #vn-neve{flex-direction:column; align-items:center; justify-content:center; gap:.1875rem; padding:.4375rem 0 .375rem; border:0; border-radius:var(--r1);
  background:transparent; font:inherit; font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:500; color:var(--tx2); white-space:nowrap; cursor:pointer;
  transition-property:background-color, color; transition-duration:var(--dur-2); transition-timing-function:var(--ease-padrao);}
html.vn .vn-atalhos > #vn-neve svg{width:1rem; height:1rem; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
html.vn .vn-atalhos > #vn-neve .corte{opacity:0;}
html.vn .vn-atalhos > #vn-neve[aria-pressed="false"] .corte{opacity:1;}
html.vn .vn-atalhos > #vn-neve:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
@media (hover:hover){ html.vn .vn-atalhos > #vn-neve:hover{background:var(--fillh); color:var(--tx1);} }
/* gorro no logo: grupo estatico no logo-msb.svg (display="none" de fabrica, inclusive fora do painel) */
html.vn[data-tema-sazonal="natal"] .logo-msb .gorro-logo{display:inline;}
html.vn .logo-msb .gl-gor{fill:var(--sazonal-gorro); stroke:var(--side, var(--bg)); stroke-width:3; paint-order:stroke;}
html.vn .logo-msb .gl-gor2{fill:var(--sazonal-gorro-sombra);}
html.vn .logo-msb .gl-felpa{fill:var(--sazonal-felpa); stroke:var(--side, var(--bg)); stroke-width:3; paint-order:stroke;}
html.vn.claro .logo-msb .gl-felpa, html.vn body.claro .logo-msb .gl-felpa{stroke:var(--tx3); stroke-width:1.6;}
/* gorro nos avatares (window.avatarSvg: extra x6 o ano todo, sobreposto a todo rosto na epoca) */
html.vn .av .gorro{--gorro:var(--sazonal-gorro); --gorro-sombra:var(--sazonal-gorro-sombra);}
html.vn .av .gorro.verde{--gorro:var(--sazonal-verde); --gorro-sombra:var(--sazonal-verde-sombra);}
html.vn .av .gorro.elfo{--gorro:var(--sazonal-elfo); --gorro-sombra:var(--sazonal-elfo-sombra);}
html.vn .av .gor{fill:var(--gorro);}
html.vn .av .gor2{fill:var(--gorro-sombra);}
html.vn .av .felpa{fill:var(--sazonal-felpa);}
html.vn .av .felpa2{fill:var(--sazonal-felpa-sombra);}
html.vn .av .contorno-felpa{fill:var(--av-contorno); stroke:var(--av-contorno); stroke-width:2.5;}
html.vn .av .ouro{fill:var(--sazonal-ouro);}
html.vn .av .gola{fill:var(--sazonal-gorro);}
html.vn .av .vinco{fill:none; stroke:var(--av-luz); stroke-opacity:.32; stroke-width:2.2; stroke-linecap:round;}
html.vn .av .somb{fill:none; stroke:var(--av-traco); stroke-opacity:.16; stroke-width:3; stroke-linecap:round;}
html.vn .av .pom{transform-box:fill-box; transform-origin:50% 0;}
/* o pompom balanca uma vez no hover, so com mouse e nunca com movimento reduzido */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.vn:not([data-movimento="reduzido"]) .av:hover .pom{animation:av-balanca calc(var(--dur-4) * 3.2) var(--ease-padrao) 1;}
}
@keyframes av-balanca{0%{transform:rotate(0)} 30%{transform:rotate(14deg)} 60%{transform:rotate(-9deg)} 85%{transform:rotate(4deg)} 100%{transform:rotate(0)}}

/* ==== movimento reduzido (30/10/2026) =====================================================================
   Botao #movimento ao lado do tema (no celular, linha "Reduzir movimento" no rodape do menu). Ligado (ou o
   aparelho com prefers-reduced-motion, sem escolha da pessoa) marca html[data-movimento="reduzido"] no
   VN_PREPINTA: aqui para toda animacao e transicao do painel; o JS das telas (FLIP do cartao Semana, rolagem
   suave, neve) le o mesmo estado pelo matchMedia. So o indicador de carregando segue, pulsando a opacidade. */
html.vn #movimento[aria-pressed="true"]{color:var(--segsel-txt); background:var(--segsel); box-shadow:var(--segpastilha);}
html[data-movimento="reduzido"]{scroll-behavior:auto !important;}
html[data-movimento="reduzido"] *:not(.spin), html[data-movimento="reduzido"] *::before, html[data-movimento="reduzido"] *::after{
  animation-duration:calc(var(--dur-1) / 120) !important; animation-delay:0s !important; animation-iteration-count:1 !important;
  transition-duration:calc(var(--dur-1) / 120) !important; transition-delay:0s !important; scroll-behavior:auto !important;}
html[data-movimento="reduzido"] .spin{animation:spin-pulsa calc(var(--dur-4) * 8) ease-in-out infinite !important;}
html[data-movimento="reduzido"]::view-transition-group(*), html[data-movimento="reduzido"]::view-transition-old(*),
html[data-movimento="reduzido"]::view-transition-new(*){animation:none !important;}
/* linha do rodape do menu no celular: o visto aparece quando esta ligado */
html.vn .vn-ajustes .it > .ok{display:none; margin-left:auto;}
html.vn .vn-ajustes .it[aria-pressed="true"] > .ok{display:block;}

/* central-notificacoes (06/11/2026, PAINEL_CENTRAL): sino com contador, popover no computador, folha
   inteira ate 620px e a mesma lista em /notificacoes. HTML so pelo casco (window.centralPainel). Sem a
   flag nada disto aparece: o .notif-badge e o .notif-pop nao existem no DOM */
html.vn .tema.sino{overflow:visible;}
html.vn .notif-badge{position:absolute; top:-.25rem; right:-.25rem; z-index:1; box-sizing:border-box; min-width:1.125rem; height:1.125rem; padding:0 .3125rem; border-radius:var(--rp); background:var(--crit-fill); color:var(--sobre-fill); font-size:var(--fn); font-weight:600; line-height:1.125rem; text-align:center; font-variant-numeric:tabular-nums; pointer-events:none; box-shadow:0 0 0 2px var(--side, var(--bg));}
html.vn .notif-badge[hidden]{display:none;}
html.vn .notif-pop{position:fixed; z-index:var(--z-menu); box-sizing:border-box; width:min(26rem, calc(100vw - 2rem)); max-height:min(36rem, 80dvh); display:flex; flex-direction:column; overflow:hidden; background:var(--s1); color:var(--tx1); border:1px solid var(--line2); border-radius:var(--r4); box-shadow:var(--sh2);
  animation:notif-entra var(--dur-3) var(--ease-mola) backwards;}
html.vn .notif-pop[hidden]{display:none;}
@keyframes notif-entra{from{opacity:0; transform:translateY(.25rem);}}
html[data-movimento="reduzido"] .notif-pop, html[data-movimento="reduzido"] .notif-item{animation:none !important;}
html.vn .notif-pop.pagina{position:static; z-index:auto; width:100%; max-height:none; border:0; border-radius:0; box-shadow:none; background:transparent; animation:none; overflow:visible;}
html.vn .notif-cab{display:flex; align-items:center; gap:var(--e2); padding:var(--e4) var(--e4) var(--e2); min-width:0;}
html.vn .notif-cab h2{margin:0; font-size:var(--f4); font-weight:600; line-height:1.3;}
html.vn .notif-cont{color:var(--tx3); font-size:var(--f2); font-variant-numeric:tabular-nums; min-width:0;}
html.vn .notif-acoes{margin-left:auto; display:flex; align-items:center; gap:var(--e1); flex:none;}
html.vn .notif-fecha{display:none;}
html.vn .notif-ib{position:relative; flex:none; display:inline-grid; place-items:center; width:2rem; height:2rem; padding:0; border:0; border-radius:var(--r1); background:transparent; color:var(--tx2); cursor:pointer; font:inherit;}
html.vn .notif-ib::after{content:""; position:absolute; left:50%; top:50%; width:max(100%, 2.75rem); height:max(100%, 2.75rem); transform:translate(-50%, -50%);}
html.vn .notif-ib svg{width:1.0625rem; height:1.0625rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
html.vn .notif-ib:focus-visible, html.vn .notif-chip:focus-visible, html.vn .notif-lk:focus-visible, html.vn .notif-item:focus-visible{outline:2px solid var(--glpi-t); outline-offset:2px;}
html.vn .notif-ib[disabled]{opacity:.4; cursor:not-allowed;}
@media (hover:hover){ html.vn .notif-ib:not([disabled]):hover{background:var(--fillh); color:var(--tx1);} }
html.vn .notif-filtros{display:flex; flex-direction:column; gap:var(--e2); padding:0 var(--e4) var(--e3);}
html.vn .notif-filtros .seg{align-self:flex-start; max-width:100%;}
html.vn .notif-chips{display:flex; flex-wrap:wrap; gap:var(--e1);}
html.vn .notif-chip{position:relative; display:inline-flex; align-items:center; min-height:1.625rem; padding:0 var(--e3); border:1px solid var(--line2); border-radius:var(--rp); background:transparent; color:var(--tx2); font:inherit; font-size:var(--fn, .75rem); cursor:pointer; white-space:nowrap;}
html.vn .notif-chip::after{content:""; position:absolute; left:0; right:0; top:50%; height:max(100%, 1.5rem); transform:translateY(-50%);}
html.vn .notif-chip[aria-pressed="true"]{background:var(--s3); color:var(--tx1); border-color:transparent; font-weight:600;}
html.vn .notif-chip.glpi[aria-pressed="true"]{background:var(--glpi-bg); color:var(--glpi-t);}
html.vn .notif-chip.rm[aria-pressed="true"]{background:var(--rm-bg); color:var(--rm-t);}
@media (hover:hover){ html.vn .notif-chip:not([aria-pressed="true"]):hover{background:var(--fillh); color:var(--tx1);} }
html.vn .notif-faixa{margin:0 var(--e4) var(--e2); padding:var(--e2) var(--e3); border-radius:var(--r2); background:var(--warn-bg); color:var(--tx1); font-size:var(--f2);}
html.vn .notif-faixa[hidden]{display:none;}
html.vn .notif-lista{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--line); padding:var(--e1) var(--e2) var(--e2); margin:0; list-style:none;}
html.vn .notif-pop.pagina .notif-lista{overflow:visible; padding-inline:var(--e2);}
html.vn .notif-dia{padding:var(--e3) var(--e2) var(--e1); font-size:var(--fn, .75rem); font-weight:500; color:var(--tx3);}
html.vn .notif-item{position:relative; display:grid; grid-template-columns:.625rem minmax(0, 1fr) auto; column-gap:var(--e3); align-items:start; min-height:3.5rem; box-sizing:border-box; padding:var(--e3) var(--e2); border-radius:var(--r2); cursor:pointer; color:inherit; text-decoration:none;
  animation:notif-entra var(--dur-3) var(--ease-mola) backwards;}
@media (hover:hover){ html.vn .notif-item:hover{background:var(--fillh);} }
html.vn .notif-item .pt{width:.5rem; height:.5rem; margin-top:.375rem; border-radius:50%; background:transparent; flex:none;}
html.vn .notif-item.nl .pt{background:var(--glpi);}
html.vn .notif-item.nl.rm .pt{background:var(--rm);}
html.vn .notif-item .tx{display:flex; flex-direction:column; gap:var(--e0); min-width:0;}
html.vn .notif-item .l1{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--e2); row-gap:var(--e0); min-width:0;}
html.vn .notif-item .num{flex:none; font-size:var(--f2); font-weight:600; color:var(--tx2); font-variant-numeric:tabular-nums;}
html.vn .notif-item .tt{min-width:0; font-size:var(--fm); font-weight:500; line-height:1.35; overflow-wrap:anywhere;}
html.vn .notif-item.nl .tt{font-weight:600;}
html.vn .notif-item .ev{font-size:var(--f2); color:var(--tx2); line-height:1.4; overflow-wrap:anywhere;}
html.vn .notif-item .ev .mais{color:var(--tx3);}
html.vn .notif-item .dir{display:flex; flex-direction:column; align-items:flex-end; gap:var(--e1);}
html.vn .notif-item .hr{font-size:var(--fn, .75rem); color:var(--tx3); white-space:nowrap; font-variant-numeric:tabular-nums;}
html.vn .notif-item .acoes-it{display:flex; gap:var(--e0); opacity:0; transition:opacity var(--dur-2) var(--ease-padrao);}
html.vn .notif-item:is(:hover, :focus-within) .acoes-it{opacity:1;}
@media (hover:none){ html.vn .notif-item .acoes-it{opacity:1;} }
html.vn .notif-item .acoes-it .notif-ib{width:1.75rem; height:1.75rem;}
html.vn .notif-item .acoes-it .notif-ib svg{width:.9375rem; height:.9375rem;}
html.vn .notif-item.res{opacity:.6;}
html.vn .notif-pill{display:inline-flex; align-items:center; flex:none; padding:0 .5rem; border-radius:var(--rp); font-size:var(--fn); font-weight:600; line-height:1.6; white-space:nowrap;}
html.vn .notif-pill.sla{background:var(--crit-bg); color:var(--crit-t);}
html.vn .notif-pill.res{background:var(--neutro-bg); color:var(--tx2);}
html.vn .notif-pill.at{background:var(--glpi-bg); color:var(--glpi-t);}
html.vn .notif-pill.rm{background:var(--rm-bg); color:var(--rm-t);}
html.vn .notif-pill.ok{background:var(--ok-bg); color:var(--ok-t);}
html.vn .notif-pill.sys{background:var(--roxo-bg); color:var(--roxo-t);}
html.vn .notif-vazio{display:flex; flex-direction:column; align-items:center; gap:var(--e1); padding:var(--e6) var(--e4); text-align:center; color:var(--tx2); font-size:var(--f3);}
html.vn .notif-vazio b{color:var(--tx1); font-weight:600;}
html.vn .notif-vazio .bt{margin-top:var(--e2);}
html.vn .notif-esq{height:3.5rem; margin:var(--e1) 0; border-radius:var(--r2); background:linear-gradient(90deg, var(--s2), var(--s3), var(--s2)); background-size:200% 100%; animation:notif-brilho var(--dur-brilho) linear infinite;}
@keyframes notif-brilho{to{background-position:-200% 0;}}
html[data-movimento="reduzido"] .notif-esq{animation:none;}
html.vn .notif-pe{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e4); padding:var(--e3) var(--e4); border-top:1px solid var(--line);}
html.vn .notif-pe .notif-meta{margin-left:auto; color:var(--tx3); font-size:var(--fn, .75rem); font-variant-numeric:tabular-nums;}
html.vn .notif-lk{position:relative; display:inline-flex; align-items:center; min-height:1.75rem; padding:0; border:0; background:none; color:var(--glpi-t); font:inherit; font-size:var(--f2); font-weight:500; cursor:pointer;}
html.vn .notif-lk::after{content:""; position:absolute; left:0; right:0; top:50%; height:max(100%, 2.75rem); transform:translateY(-50%);}
html.vn .notif-lk[hidden]{display:none;}
@media (hover:hover){ html.vn .notif-lk:hover{text-decoration:underline; text-underline-offset:3px;} }
html.vn .notif-mais{display:flex; justify-content:center; padding:var(--e2) 0;}
/* folha inteira no telefone: cabecalho fixo com Fechar a esquerda e o "..." a direita, rodape com as duas acoes */
@media (max-width:620px){
  html.vn .notif-pop:not(.pagina){inset:0; width:auto; max-height:none; border:0; border-radius:0; padding-top:env(safe-area-inset-top, 0rem); padding-bottom:env(safe-area-inset-bottom, 0rem);}
  html.vn .notif-pop:not(.pagina) .notif-fecha{display:inline-flex;}
  html.vn .notif-pop:not(.pagina) .notif-cab{display:grid; grid-template-columns:minmax(3.5rem, auto) minmax(0, 1fr) minmax(3.5rem, auto); padding:var(--e3) var(--e4) var(--e2);}
  html.vn .notif-pop:not(.pagina) .notif-cab .tit{text-align:center; display:flex; flex-direction:column; align-items:center; min-width:0;}
  html.vn .notif-pop:not(.pagina) .notif-cab .notif-acoes{justify-content:flex-end;}
  html.vn .notif-pop:not(.pagina) .notif-cab .notif-ib.tudo{display:none;}
  html.vn .notif-item{min-height:4rem;}
  html.vn .notif-chip{min-height:2rem;}
  html.vn .notif-chip::after{height:2.75rem;}
  html.vn .notif-lk{min-height:2.75rem;}
  html.vn .notif-pe .notif-meta{flex-basis:100%; margin-left:0;}
}
html.vn .notif-cab .tit{display:flex; align-items:baseline; gap:var(--e2); flex-wrap:wrap; min-width:0;}

/* configuracoes (06/11/2026, PAINEL_CONFIG_NOVA): terceiro atalho do rodape do menu e a pagina /configuracoes.
   Revisao de padrao (06/11/2026): o atalho e um link direto para a pagina (o popover de ajustes rapidos saiu: tema,
   letra e movimento ja estao no topo, no #vn-ajustes do celular e em Configuracoes > Aparencia). Os tres atalhos
   dividem a largura em partes iguais, rotulo de 12px numa linha so; "Ajustes" cabe nos 76px da coluna em 100% e A+ */
html.vn .vn-atalhos:has(> #vn-cfg:not([hidden])){grid-template-columns:repeat(3, minmax(0, 1fr));}
html.vn .vn-atalhos:has(> #vn-cfg:not([hidden])) > #vn-neve{display:none !important;}
html.vn .vn-atalhos:has(> #vn-cfg:not([hidden])) > a{min-width:0; padding-inline:var(--e1); font-size:var(--fn, .75rem);}
html.vn .vn-atalhos > a > span{max-width:100%; overflow-wrap:normal;}
/* no telefone o #vn-ajustes volta inteiro (Ler agora, Tema, Movimento, Letra e Sair): sem popover, e ali que ficam */

/* pagina /configuracoes: cada secao e uma pagina (/configuracoes/<secao>). Computador: menu das secoes a esquerda
   (links com aria-current) e a secao a direita, na largura de leitura (48rem), sem rolagem interna; a pagina rola.
   Celular (ate 620px): /configuracoes e o indice (lista de secoes) e cada secao abre como pagina, com Voltar */
html.vn .cfg{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--e5); align-items:start;}
html.vn .cfg-nav{min-width:0;}
html.vn .cfg-indice-tit{display:none;}
html.vn .cfg-nav-lista{display:flex; flex-direction:column; gap:var(--e0); margin:0; padding:0; list-style:none;}
html.vn .cfg-nav a{position:relative; display:flex; flex-direction:column; justify-content:center; gap:var(--e0); min-height:2.25rem; padding:var(--e1) var(--e3); border-radius:var(--r2); color:var(--tx2); font-size:var(--f3); line-height:1.3; text-decoration:none;}
html.vn .cfg-nav a small{display:none;}
html.vn .cfg-nav a[aria-current="page"]{background:var(--s2); color:var(--tx1); font-weight:600;}
html.vn .cfg-nav a:focus-visible{outline:2px solid var(--glpi-t); outline-offset:2px;}
@media (hover:hover){ html.vn .cfg-nav a:not([aria-current="page"]):hover{background:var(--fillh); color:var(--tx1);} }
html.vn .cfg-volta{display:none;}
html.vn .cfg-corpo{display:flex; flex-direction:column; gap:var(--e5); min-width:0; max-width:48rem;}
html.vn .cfg-sec{display:flex; flex-direction:column; gap:var(--e4); min-width:0;}
html.vn .cfg-sec[hidden]{display:none;}
html.vn .cfg-cab{display:flex; flex-direction:column; gap:var(--e1); margin-bottom:var(--e1);}
html.vn .cfg-cab > h1, html.vn .cfg-cab > .sub{margin:0;}
html.vn .cfg-sec .cartao{margin:0;}
html.vn .cfg-grupo{padding-bottom:var(--e3);}
/* Conta e Acesso reaproveitam os formularios de /conta (.conta-cols, time.css): o cartao e o container das @container */
html.vn .cfg-sec.conta-cols{align-items:stretch;}
html.vn .cfg-sec.conta-cols > .cartao{margin:0; container-type:inline-size;}
html.vn .cfg-grupo > :not(.cab, table){margin-inline:var(--rec-cartao);}
html.vn .cfg-grupo > .cab + :is(.cfg-linhas, .cfg-ap){margin-top:var(--e1);}
html.vn .cfg-grupo > :is(.cfg-linhas, .cfg-ap):first-child{margin-top:var(--e1);}
/* matriz evento x canal: a tabela vai de ponta a ponta do cartao (1a e ultima celula com o recuo), sem rolador */
html.vn table.cfg-matriz{width:100%; margin-top:var(--e3); border-collapse:collapse; font-size:var(--f3);}
html.vn .cfg-matriz :is(th, td){padding:var(--e2) var(--e3); border-top:1px solid var(--line); text-align:left; vertical-align:middle;}
html.vn .cfg-matriz :is(th, td):first-child{padding-left:var(--rec-cartao);}
html.vn .cfg-matriz :is(th, td):last-child{padding-right:var(--rec-cartao);}
html.vn .cfg-matriz th{height:2.5rem; padding-block:0; border-top:0; font-size:var(--fn, .75rem); font-weight:600; color:var(--tx3);}
html.vn .cfg-matriz :is(th, td).c{width:1%; white-space:nowrap; text-align:center;}
html.vn .cfg-matriz td small{display:block; margin-top:var(--e0); color:var(--tx3); font-size:var(--f2); line-height:1.4;}
html.vn .cfg-matriz td.c small{margin-top:var(--e1); font-size:var(--fn, .75rem);}
html.vn .cfg-matriz td.c .sw{display:inline-block; vertical-align:middle;}
html.vn .cfg-linhas{display:flex; flex-direction:column; margin:0; padding:0; list-style:none;}
html.vn .cfg-linhas > li{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e2) var(--e4); min-height:2.75rem; padding:var(--e3) 0; border-top:1px solid var(--line); font-size:var(--f3);}
html.vn .cfg-linhas > li:first-child{border-top:0;}
html.vn .cfg-linhas > li > .rot{flex:1 1 14rem; min-width:0; color:var(--tx1); font-size:var(--f3); font-weight:400;}
html.vn .cfg-linhas > li > .rot small{display:block; margin-top:var(--e0); color:var(--tx3); font-size:var(--f2); line-height:1.4;}
html.vn .cfg-linhas > li > .val{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); flex:0 1 auto; max-width:100%;}
html.vn .cfg-linhas .seg{max-width:100%;}
html.vn .cfg-linhas .sel, html.vn .cfg-linhas input.campo{max-width:100%;}
html.vn .cfg-linhas > li.cfg-vazio{color:var(--tx2);}
html.vn .cfg-ap{display:flex; flex-direction:column; margin:0; padding:0; list-style:none;}
html.vn .cfg-ap > li{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--e1) var(--e3); align-items:center; padding:var(--e3) 0; border-top:1px solid var(--line);}
html.vn .cfg-ap > li:first-child{border-top:0;}
html.vn .cfg-ap > li.cfg-vazio{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); color:var(--tx2); font-size:var(--f3);}
html.vn .cfg-ap .nome{font-size:var(--f3); font-weight:600; overflow-wrap:anywhere;}
html.vn .cfg-ap .meta{grid-column:1; color:var(--tx3); font-size:var(--f2);}
html.vn .cfg-ap .acs{grid-column:2; grid-row:1 / span 2; display:flex; flex-wrap:wrap; gap:var(--e2); justify-content:flex-end;}
html.vn .cfg-ap .nota{grid-column:1 / -1; margin:0; padding:var(--e2) var(--e3); border-radius:var(--r2); background:var(--warn-bg); color:var(--tx1); font-size:var(--f2);}
html.vn .cfg-ap .ap-ed{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center;}
html.vn .cfg-ap .ap-ed input{flex:1 1 12rem; min-width:0; font-size:var(--f4);}
html.vn .cfg-push > .expl{margin-bottom:var(--e2);}
html.vn .cfg-push > .cfg-este{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); margin-block:var(--e1) var(--e2); font-size:var(--f3);}
html.vn .cfg-push > .cfg-acoes{margin-block:var(--e2) 0;}
@media (min-width:821px){
  html.vn .cfg{grid-template-columns:13.5rem minmax(0, 1fr); gap:var(--e6);}
  html.vn .cfg-nav{position:sticky; top:var(--e4);}
}
/* tablet estreito: o menu das secoes vira uma linha de links acima da secao */
@media (min-width:621px) and (max-width:820px){
  html.vn .cfg-nav-lista{flex-direction:row; flex-wrap:wrap;}
  html.vn .cfg-nav a{min-height:2.75rem;}
}
@media (max-width:620px){
  html.vn .cfg{gap:var(--e4);}
  html.vn .cfg[data-secao=""] .cfg-corpo, html.vn .cfg:not([data-secao=""]):not(.nav-aberta) .cfg-nav{display:none;}
  /* revisao 07/11/2026: em vez de so voltar ao indice, "Outras secoes" mostra a lista no lugar (disclosure) */
  html.vn .cfg[data-secao=""] .cfg-volta{display:none;}
  html.vn .cfg-volta{border:0; background:none; padding:0; font:inherit; cursor:pointer;}
  html.vn .cfg-volta svg{transition:transform var(--dur-1) var(--ease-padrao);}
  html.vn .cfg-volta[aria-expanded="true"] svg{transform:rotate(180deg);}
  html.vn .cfg[data-secao=""] .cfg-indice-tit{display:block; margin:0 0 var(--e4);}
  html.vn .cfg-nav-lista{gap:0; background:var(--card); border-radius:var(--r4); box-shadow:var(--sombra2); overflow:clip;}
  html.vn .cfg-nav-lista > li + li{border-top:1px solid var(--line);}
  html.vn .cfg-nav a{min-height:3.5rem; padding:var(--e2) 2.75rem var(--e2) var(--rec-cartao); border-radius:0; color:var(--tx1); font-size:var(--f3); font-weight:500;}
  html.vn .cfg-nav a small{display:block; color:var(--tx3); font-size:var(--f2); font-weight:400;}
  html.vn .cfg-nav a::after{content:""; position:absolute; right:var(--rec-cartao); top:50%; width:.5rem; height:.5rem; border-right:2px solid var(--tx3); border-bottom:2px solid var(--tx3); transform:translateY(-50%) rotate(-45deg);}
  html.vn .cfg-nav a:focus-visible{outline-offset:-2px;}
  html.vn .cfg-volta{display:inline-flex; align-items:center; gap:var(--e1); justify-self:start; min-height:2.75rem; margin-block:calc(-1 * var(--e2)) calc(-1 * var(--e2)); color:var(--glpi-t); font-size:var(--f3); font-weight:500; text-decoration:none;}
  html.vn .cfg-volta svg{width:1.125rem; height:1.125rem; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  html.vn .cfg-volta:focus-visible{outline:2px solid var(--glpi-t); outline-offset:2px; border-radius:var(--r1);}
  /* matriz no telefone: cada evento vira um bloco (nome em cima, as chaves lado a lado com o rotulo do canal);
     o cabecalho da tabela fica so para leitor de tela */
  html.vn table.cfg-matriz, html.vn .cfg-matriz tbody{display:block;}
  html.vn .cfg-matriz thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  html.vn .cfg-matriz tr{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e2) var(--e4); padding:var(--e3) var(--rec-cartao); border-top:1px solid var(--line);}
  html.vn .cfg-matriz tbody tr:first-child{border-top:0;}
  html.vn .cfg-matriz td, html.vn .cfg-matriz td:is(:first-child, :last-child){display:block; padding:0; border:0;}
  html.vn .cfg-matriz td:first-child{grid-column:1 / -1;}
  html.vn .cfg-matriz td.c{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1) var(--e2); width:auto; min-height:2.75rem; text-align:left;}
  html.vn .cfg-matriz td.c::before{content:attr(data-rot); color:var(--tx2); font-size:var(--f2);}
  html.vn .cfg-matriz tr{align-items:start;}
  /* "sempre" fica embaixo da chave desligavel; "nao envia" toma o lugar da chave, na mesma linha do rotulo: as duas
     colunas comecam na mesma linha (antes o "No celular" subia acima da outra coluna) */
  html.vn .cfg-matriz td.c small{flex-basis:100%; margin:0;}
  html.vn .cfg-matriz td.c{align-content:flex-start;}
  html.vn .cfg-matriz td.c:last-child small{flex-basis:auto;}
  /* segmentado da linha (Horario dos avisos): ocupa a linha toda e cabe numa linha a partir de 375 */
  html.vn .cfg-linhas > li > .val:has(> .seg){flex-basis:100%;}
  html.vn .cfg-linhas .seg button{padding-inline:var(--e2); font-size:var(--fn, .75rem);}
  html.vn .cfg-ap > li{grid-template-columns:minmax(0, 1fr);}
  html.vn .cfg-ap .acs{grid-column:1; grid-row:auto; justify-content:flex-start;}
}
html.vn .tema.sino.central .corte{display:none;}
html.vn .notif-pe .so-fone{display:none;}
@media (max-width:620px){ html.vn .notif-pop:not(.pagina) .notif-pe .so-fone{display:inline-flex;} }
html.vn .notif-sec + .notif-sec{margin-top:var(--e1);}
/* revisao de padrao (06/11/2026): o ponto de nao lida fica pendurado a esquerda; cabecalho, filtros, faixa e o dia
   comecam no mesmo x do texto das linhas (antes 17px a esquerda dele) */
html.vn .notif-pop{--notif-x:calc(.625rem + var(--e3));}
html.vn .notif-pop .notif-cab{padding-left:calc(var(--e4) + var(--notif-x));}
html.vn .notif-pop .notif-filtros{padding-left:calc(var(--e4) + var(--notif-x));}
html.vn .notif-pop .notif-faixa{margin-left:calc(var(--e4) + var(--notif-x));}
html.vn .notif-pop .notif-dia{padding-left:calc(var(--e2) + var(--notif-x));}
html.vn .notif-pop .notif-pe{padding-left:calc(var(--e4) + var(--notif-x));}
html.vn .notif-pop .notif-vazio{align-items:flex-start; text-align:left; padding-left:calc(var(--e2) + var(--notif-x));}
/* o "Fechar" do cabecalho e so da Central em tela cheia do telefone: o .notif-lk (display:inline-flex, mais abaixo)
   o mostrava tambem no popover do computador, ao lado do titulo */
html.vn .notif-lk.notif-fecha{display:none;}
html.vn .menu.notif-menu .opt.perigo{color:var(--crit-t);}
html.vn .menu.notif-menu hr{border:0; border-top:1px solid var(--line); margin:var(--e1) .625rem;}
html.vn .menu.notif-menu .opt svg{width:1rem; height:1rem; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
html.vn .menu.notif-menu .opt:focus-visible{outline:2px solid var(--glpi-t); outline-offset:-2px;}
@media (pointer:coarse){ html.vn .menu.notif-menu .opt{min-height:2.75rem;} }
/* configuracoes: pecas das linhas (06/11/2026) */
html.vn :is(.notif-pop, .cfg) .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
html.vn .cfg-sw-op{display:inline-flex; align-items:center; gap:var(--e2); min-height:2.75rem; font-size:var(--f3);}
html.vn .cfg-sw-op + .cfg-sw-op{margin-left:var(--e3);}
html.vn .cfg-hora{display:inline-flex; align-items:center; gap:var(--e2); font-size:var(--f3); color:var(--tx2);}
html.vn .cfg-hora input{width:7.5rem; font-size:var(--f4);}
html.vn .cfg-dias{flex-wrap:wrap;}
html.vn .cfg-letra{display:inline-flex; align-items:center; gap:var(--e2);}
html.vn .cfg-letra .bt{min-width:2.75rem; justify-content:center;}
html.vn .cfg-letra output{min-width:3.5rem; text-align:center; font-variant-numeric:tabular-nums;}
html.vn .cfg-linhas > li.cfg-vazio, html.vn .cfg-ap > li.cfg-vazio{display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; color:var(--tx3); font-size:var(--f3);}
html.vn .cfg-push{display:flex; flex-direction:column; gap:var(--e3); padding-top:var(--e3); border-top:1px solid var(--line);}
html.vn .cfg-push > *{margin:0;}
html.vn .cfg-acoes{display:flex; flex-wrap:wrap; gap:var(--e2);}

/* ==== mobile 06/11/2026 (frente "Mobile ate 820px", docs/FRENTES.md) ==========================================
   Plano: tecnico no celular abrindo a Fila para pegar o proximo chamado. Pergunta da tela: "o que entrou sem
   dono e o que esta comigo?". Ponto focal: a lista. O desktop (>=821px) nao muda: tudo aqui fica dentro de
   max-width:820px, ou e componente que so nasce no celular (folha Atribuir, aba Notificacoes). */
@media (max-width:820px){
  /* densidade: corpo 15, explicacao 14, meta 13, h1 22 (antes 17/15/13/28,8) */
  html.vn{--f2:.875rem; --fm:.875rem; --f3:.9375rem; --fs:.9375rem; --f4:.9375rem; --fc:.9375rem; --f5:1.125rem;}
  html.vn h1{font-size:1.375rem; line-height:1.2; letter-spacing:-.02em;}
  html.vn .titpag > p.sub{font-size:var(--f2);}
  /* texto secundario solido no escuro (o alpha sobre cartao variava de contraste) e busca afundada */
  html.vn:not(.claro){--tx2:#a7b0c2; --tx3:#9aa4b6;}
  html.vn:not(.claro) .busca{background:var(--bg);}
  /* menu de opcoes da ficha (motivo, situacao, SLA): linha de 44px */
  html.vn .menu .opt{min-height:2.75rem;}
  /* voltar ao topo some com ficha ou folha aberta (cobria a acao do rodape) */
  html.vn:has(.item.aberta, .gaveta-host .det, dialog[open]) .vn-volta{display:none;}
}
/* topo do celular: com a aba Notificacoes na barra de baixo o sino de cima sai; o rotulo "Plataforma" tambem */
@media (max-width:620px){
  html.vn.tem-notif #avisos{display:none;}
  html.vn .vn-side .marca > span{display:none;}
  /* aba Notificacoes: contador no canto do icone */
  html.vn .vn-abas .ab-notif{position:relative;}
  html.vn .vn-abas .ab-n{position:absolute; top:var(--e0); left:calc(50% + .375rem); min-width:1.125rem; height:1.125rem; padding:0 var(--e1); border-radius:var(--rp);
    background:var(--crit-fill, var(--crit)); color:var(--branco); font-size:.75rem; font-weight:700; line-height:1.125rem; text-align:center; font-variant-numeric:tabular-nums;}
  html.vn .vn-abas .ab-n[hidden]{display:none;}
  /* revisao 06/11: em 320 a aba ativa (600) cortava "Notificacoes" em "Notificaco..."; a coluna cede ao rotulo inteiro */
  html.vn.tem-notif .vn-abas{grid-auto-columns:minmax(min-content, 1fr);}
  html.vn .vn-abas .ab-n-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
}

/* folha Atribuir (<dialog class="folha">, topo.tpl.html window.abreAtribuir). Ate 620px herda o sheet dos
   dialogos (sobe de baixo, alca, safe-area); aqui so o teto de 70dvh e o miolo. Acima, dialogo centrado */
html.vn dialog.folha{width:min(26rem, calc(100% - 2rem)); padding:0; overscroll-behavior:contain;}
html.vn dialog.folha > *{margin:0;}
html.vn dialog.folha .folha-cab{display:flex; align-items:flex-start; gap:var(--e2); padding:var(--e3) var(--e2) 0 var(--e4);}
html.vn dialog.folha .folha-cab h2{flex:1 1 auto; min-width:0; font-size:var(--f4, 1rem); font-weight:600; line-height:1.35; color:var(--tx1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; padding-top:.625rem;}
html.vn dialog.folha .folha-cab .num{color:var(--glpi-t); font-variant-numeric:tabular-nums;}
html.vn dialog.folha .folha-x{flex:none; width:2.75rem; height:2.75rem; display:grid; place-items:center; border:0; border-radius:var(--rp); background:none; color:var(--tx2); cursor:pointer;}
html.vn dialog.folha .folha-x svg{width:1.25rem; height:1.25rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
html.vn dialog.folha .folha-sub{padding:var(--e1) var(--e4) 0; font-size:var(--f1, .8125rem); color:var(--tx2); line-height:1.4;}
html.vn dialog.folha .folha-corpo{display:flex; flex-direction:column; gap:var(--e2); padding:var(--e3) var(--e4) 0;}
html.vn dialog.folha .folha-prim{display:flex; align-items:center; justify-content:center; min-height:2.75rem; width:100%; border:0; border-radius:var(--r2);
  background:var(--glpi-fill, var(--glpi)); color:var(--branco); font:inherit; font-size:var(--f3, .9375rem); font-weight:600; cursor:pointer;}
html.vn dialog.folha .folha-prim .nm b{font-weight:600;}
html.vn dialog.folha .folha-rot{margin-top:var(--e2); font-size:var(--f1, .8125rem); font-weight:600; color:var(--tx2); text-transform:none; letter-spacing:0;}
html.vn dialog.folha .folha-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
html.vn dialog.folha .folha-lista li + li{border-top:.5px solid var(--sep);}
html.vn dialog.folha .folha-pes{display:flex; align-items:center; gap:var(--e3); width:100%; min-height:3rem; padding:var(--e1) 0; border:0; background:none; color:var(--tx1);
  font:inherit; text-align:left; cursor:pointer;}
html.vn dialog.folha .folha-pes:disabled{opacity:.55; cursor:default;}
html.vn dialog.folha .folha-pes .av{flex:none; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; background:var(--fill); color:var(--tx1); font-size:.75rem; font-weight:700;}
html.vn dialog.folha .folha-pes .nm{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--e0); line-height:1.35;}
html.vn dialog.folha label.folha-obs{display:block;}
html.vn dialog.folha .folha-pes .nm b{font-weight:500; font-size:var(--f3, .9375rem); overflow-wrap:anywhere;}
html.vn dialog.folha .folha-pes .nm small{font-size:var(--f1, .8125rem); color:var(--glpi-t);}
html.vn dialog.folha .folha-pes .cg{flex:none; font-size:var(--f1, .8125rem); color:var(--tx2); font-variant-numeric:tabular-nums;}
html.vn dialog.folha .folha-msg{margin:var(--e3) var(--e4) 0; border-top:.5px solid var(--sep); padding-top:var(--e1);}
html.vn dialog.folha .folha-msg summary{min-height:2.75rem; display:flex; align-items:center; font-size:var(--f2, .875rem); color:var(--glpi-t); cursor:pointer;}
html.vn dialog.folha .folha-msg textarea{display:block; width:100%; min-height:6rem; margin-top:var(--e1); padding:var(--e2) var(--e3); border:1px solid var(--campo-linha, var(--line2));
  border-radius:var(--r2); background:var(--bg); color:var(--tx1); font:inherit; font-size:var(--f2, .875rem); line-height:1.45; resize:vertical;}
html.vn dialog.folha .folha-obs, html.vn dialog.folha .folha-carrega{font-size:var(--f1, .8125rem); color:var(--tx2); margin-top:var(--e2);}
html.vn dialog.folha .folha-erro{margin:var(--e3) var(--e4) 0; font-size:var(--f1, .8125rem); color:var(--crit-t);}
html.vn dialog.folha .folha-pe{display:flex; justify-content:flex-start; padding:var(--e2) var(--e4) var(--e4);}
html.vn dialog.folha .folha-det{min-height:2.75rem; padding:0 var(--e3); margin-left:calc(-1 * var(--e3)); border:0; border-radius:var(--r2); background:none; color:var(--glpi-t);
  font:inherit; font-size:var(--f2, .875rem); font-weight:600; cursor:pointer;}
html.vn dialog.folha :is(.folha-x, .folha-prim, .folha-pes, .folha-det, summary):focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  html.vn dialog.folha :is(.folha-pes:not(:disabled), .folha-det, .folha-x):hover{background:var(--fillh);}
}
@media (max-width:620px){
  html.vn dialog.folha{width:100%; max-height:70dvh;}
  html.vn dialog.folha .folha-pe{padding-bottom:max(var(--e4), env(safe-area-inset-bottom, 0rem));}
}
/* agenda da atribuicao (13/11/2026, leva atribuicao; topo.tpl.html agendaAtr): previsao de inicio e de conclusao
   na folha Atribuir e na confirmacao da ficha. .agenda-atr > label > span + input.campo[type=date], nota em
   .ag-nota (.alerta no erro). Duas colunas que viram uma no celular estreito (auto-fit) */
.agenda-atr{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap:var(--e2); margin:var(--e1) 0 var(--e2);}
.agenda-atr label{display:flex; flex-direction:column; gap:var(--e1); min-width:0; font-size:var(--f1, .8125rem); color:var(--tx2, var(--label2));}
.agenda-atr input.campo{box-sizing:border-box; width:100%; min-width:0; min-height:2.75rem; padding:0 var(--e3); border:1px solid var(--campo-linha, var(--line2));
  border-radius:var(--r2); background:var(--bg); color:var(--tx1, var(--label)); font:inherit; font-size:var(--f2, .875rem); font-variant-numeric:tabular-nums;}
.agenda-atr input.campo:focus-visible{outline:2px solid var(--glpi); outline-offset:1px;}
.agenda-atr .ag-nota{grid-column:1/-1; margin:0; font-size:var(--f1, .8125rem); color:var(--tx2, var(--label2)); line-height:1.4;}
.agenda-atr .ag-nota.alerta{color:var(--crit-t);}
/* 13/11 c: campo com erro (aria-invalid) ganha a linha de alerta, na agenda e no texto da folha */
/* 13/11 f: a linha dos campos do casco (html.vn :is(input…):is(*, #_)) tem peso de id e vencia esta regra: a borda
   de erro nunca aparecia. Mesmo peso aqui. No celular o campo de data vai a 16px (iOS da zoom abaixo disso), e na
   Mensagem rapida o titulo da previa ganha respiro acima, depois do bloco das datas */
html.vn .agenda-atr input.campo[aria-invalid="true"]:is(*, #_), html.vn dialog.folha textarea[aria-invalid="true"]:is(*, #_){border-color:var(--crit-t);}
@media (max-width:620px){ .agenda-atr input.campo{font-size:1rem;} }
.msg-dlg .pv .agenda-atr + .k{margin-top:var(--e4);}
html.vn dialog.folha .folha-ag-res{margin-left:var(--e1); color:var(--tx2); font-variant-numeric:tabular-nums;}
/* "Assumir" na notificacao de chamado novo da Central (casco linhaHtml): pilula de texto, alvo de 44 no ::after */
html.vn .notif-at{position:relative; flex:none; min-height:1.75rem; padding:0 var(--e3); border:1px solid var(--glpi); border-radius:var(--rp); background:none; color:var(--glpi-t);
  font:inherit; font-size:var(--f1, .8125rem); font-weight:600; cursor:pointer;}
html.vn .notif-at::after{content:""; position:absolute; left:50%; top:50%; width:max(100%, 2.75rem); height:max(100%, 2.75rem); transform:translate(-50%, -50%);}
html.vn .notif-at:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
/* revisao 06/11: no telefone o "Assumir" + 3 icones na mesma coluna espremiam o titulo em ~80px ("homologaca/o"
   quebrando no meio). Com o Assumir, as acoes descem para uma linha propria sob o texto, a direita; a hora fica em cima */
@media (max-width:620px){
  html.vn .notif-item:has(.notif-at){grid-template-columns:.625rem minmax(0, 1fr) auto; row-gap:var(--e2);}
  html.vn .notif-item:has(.notif-at) > .dir{display:contents;}
  html.vn .notif-item:has(.notif-at) .hr{grid-column:3; grid-row:1;}
  html.vn .notif-item:has(.notif-at) .acoes-it{grid-column:2 / -1; grid-row:2; justify-self:end; align-items:center; gap:var(--e2);}
}
/* o desktop nao muda (regra da frente): o "Assumir" da notificacao e o "Atribuir" do card so existem ate 820px */
/* desktop igual ao de antes: o atalho "Com voce" dos numeros e os botoes so do celular ficam fora */
@media (min-width:821px){ html.vn :is(.notif-at, .at-btn, .carga-bt, .h-org-m){display:none;} html.vn #metricas > .met[data-f="comigo"]{display:none;} }
/* ==== fim mobile 06/11/2026 ==== */

/* ==== controles mobile v2 06/11/2026 (frente "Controles mobile v2", docs/FRENTES.md) ===========================
   Queixa do Weslley (print do iPhone, Meu painel escuro): botoes, pastilhas e selects inflados para 44px de desenho,
   acao secundaria com cara de principal, card de ~260px (2 por tela), alca solta, cabecalho alto. Sistema unico ate
   820px; o desktop (>=821px) nao muda.
   - campo de digitar (input, select nativo, textarea, .campo): 44px, letra 16 (o iPhone nao da zoom)
   - botao: desenho 36px (2.25rem, primario igual, se distingue pelo preenchimento); controle dentro de item 34 (2.125rem), escala do PADRAO-VISUAL; letra 13
   - alvo de 44px sempre no ::after (ou no ::before quando o ::after ja desenha algo), centrado; o desenho nao engorda
   - pastilha: 20px (--pst), letra 12, peso 600
   - acao secundaria = texto (link) ou icone; no maximo um preenchido por item
   O prefixo :not(#_m) so sobe o peso para (1,1,1): vence as regras de 44px do (pointer:coarse) e as das telas */
@media (max-width:820px){
  html.vn{--pst:1.25rem; --alvo:2.75rem;}

  /* -- botoes: desenho 36 / 32 / 40, alvo de 44 no ::after -- */
  html.vn:not(#_m) :is(.bt:not(.filtros-bt), button.msg-rapida, .carga-bt, .marcar, .gav-x, button.met, .gtoggle, .vn-selo-bt, .notif-lk){min-height:2.25rem;}
  html.vn:not(#_m) :is(.bt.primario, dialog.folha .folha-prim){min-height:2.25rem;}
  html.vn:not(#_m) :is(.card .sel.sit, .card button.msg-rapida, #corpo .item .selsit, #corpo .at-btn){min-height:2.125rem;}
  html.vn:not(#_m) :is(.bt:not(.filtros-bt), button.msg-rapida, .carga-bt, .marcar, .gav-x, button.met, .gtoggle, .at-btn, .sel.sit, .folha-prim, .folha-x, .folha-det, a.cod){position:relative;}
  html.vn:not(#_m) :is(.bt:not(.filtros-bt), button.msg-rapida, .carga-bt, .marcar, .gav-x, button.met, .gtoggle, .at-btn, .sel.sit, .folha-prim, .folha-x, .folha-det, a.cod, .card .alca)::after{
    content:""; position:absolute; inset:auto; left:50%; top:50%; width:max(100%, var(--alvo)); height:max(100%, var(--alvo)); transform:translate(-50%, -50%); border-radius:inherit;
    padding:0; background:none; -webkit-mask:none; mask:none; box-shadow:none; pointer-events:auto;}
  /* aba de baixo em 320: 5 abas de 64px, o rotulo "Meu painel" (62px) cabe sem o recuo lateral */
  html.vn:not(#_m) .vn-abas :is(a, button){padding-inline:0;}
  /* botao de icone redondo (fechar da ficha e da folha): desenho 36, alvo 44 */
  html.vn:not(#_m) :is(.gav-x, dialog.folha .folha-x){width:2.25rem; height:2.25rem; min-width:2.25rem; min-height:2.25rem; padding:0;}
  html.vn:not(#_m) dialog.folha .folha-cab{align-items:center; padding-top:var(--e2);}
  html.vn:not(#_m) dialog.folha .folha-cab h2{padding-top:0;}
  html.vn:not(#_m) dialog.folha .folha-det{min-height:2.25rem;}
  html.vn:not(#_m) dialog.folha .folha-pes{min-height:2.75rem;}
  /* letra dos botoes: 13 (14 no primario); nada de 15-16 em botao */
  html.vn:not(#_m) :is(.bt, button.msg-rapida, .carga-bt, .marcar, .at-btn, .selsit, .sel.sit, .notif-lk){font-size:.8125rem;}
  html.vn:not(#_m) :is(.bt.primario, dialog.folha .folha-prim){font-size:.875rem;}
  html.vn:not(#_m) .bt:not(.filtros-bt){padding-block:0; padding-inline:var(--e3);}

  /* seletor de situacao da Fila e da ficha: o ::after desenha a seta e o ::before desenhava o ponto. O ponto vira
     fundo (radial) e o ::before passa a ser o alvo de 44 */
  html.vn:not(#_m) .selsit:not(.ro){position:relative; min-height:2.125rem; padding-block:0; padding-left:calc(var(--e3) + .75rem);
    background-image:radial-gradient(circle at calc(var(--e3) + .25rem) 50%, var(--sf) .25rem, transparent calc(.25rem + .5px)); background-repeat:no-repeat;}
  html.vn:not(#_m) .selsit:not(.ro)::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, var(--alvo)); height:max(100%, var(--alvo)); transform:translate(-50%, -50%); background:none; border-radius:0;}
  /* codigo do chamado (link): do tamanho do texto, alvo no ::after */
  html.vn:not(#_m) a.cod{min-height:0; line-height:var(--pst);}
  html.vn:not(#_m) .copiar{min-height:2.125rem;}
  /* -- pastilhas: 20px, letra 12 -- */
  html.vn:not(#_m) :is(.badge, span.ad-st, .fchip){min-height:var(--pst); height:auto; padding-block:0; padding-inline:var(--e2); font-size:.75rem; line-height:var(--pst); font-weight:600; gap:var(--e1);}
  html.vn:not(#_m) #corpo .item:not(.aberta) .cab > .badge{min-height:var(--pst); font-size:0;}
  html.vn:not(#_m) #corpo .item:not(.aberta) .cab > .badge::after{font-size:.75rem; line-height:var(--pst);}

  /* -- campo de formulario: 44 e letra 16; o botao que abre lista (.campo) com a mesma altura e letra de botao -- */
  /* o piso de 16px (!important, contra o zoom do iPhone) vale para campo de digitar; botao que abre lista (button.sel,
     button.campo) nao da zoom e volta a letra de botao */
  html.vn:not(#_m) button.sel{font-size:.8125rem !important;}
  html.vn:not(#_m) button.campo{font-size:.875rem !important;}

  /* -- cabecalho do topo (celular): 44px de faixa, logo do mesmo tamanho; o grupo de icones vazio (o sino foi para a
     barra de baixo) saia como um ponto solto na direita -- */
  html.vn:not(#_m) .vn-side{padding-top:max(env(safe-area-inset-top, 0rem), var(--e1)); padding-bottom:var(--e1);}
  html.vn:not(#_m) .vn-side .marca{min-height:2.25rem; position:relative;}
  html.vn:not(#_m) .vn-side .marca::after{content:""; position:absolute; left:0; top:50%; width:max(100%, var(--alvo)); height:var(--alvo); transform:translateY(-50%);}
  /* sino (ativar avisos) no topo: desenho 36 sem a moldura do segmentado, alvo 44 no ::after */
  html.vn:not(#_m) .vn-side > .acoes-topo{padding:0; background:none; box-shadow:none;}
  html.vn:not(#_m) .vn-side > .acoes-topo #avisos{width:2.25rem; min-width:2.25rem; height:2.25rem; min-height:2.25rem; border-radius:var(--rp); background:var(--fill);}
  html.vn:not(#_m) .vn-side > .acoes-topo #avisos::after{content:""; position:absolute; left:50%; top:50%; width:var(--alvo); height:var(--alvo); transform:translate(-50%, -50%); border-radius:var(--rp);}

  /* -- ficha: rotulo colado ao campo dele (6px) e afastado do campo de cima (6 + 8); antes tudo a 6px e o rotulo
     ficava equidistante dos dois campos. "Mensagem rapida" com a largura do texto, como "Tornar interno" -- */
  html.vn:not(#_m) .campos > label:not(:first-child){margin-top:var(--e2);}
  html.vn:not(#_m) .campos > .msg-rapida{margin-top:var(--e2); align-self:flex-start; width:auto;}
}
@media (max-width:620px){
  html.vn.tem-notif:not(#_m) .vn-side > .acoes-topo{display:none;}
}
/* ==== fim controles mobile v2 06/11/2026 ==== */
/* ==== alerta "Atribuido a voce" (06/11/2026) =====================================================
   Meu painel (#atr-alerta, variante do .ia-aviso com o matiz do GLPI): um item por chamado atribuido pelo
   painel e ainda nao aberto, texto a esquerda e "Comecar" na ponta, centrado na altura do item. No telefone
   o botao desce para baixo do texto, na largura do conteudo. Fila: a pastilha .notif-pill.at no .cab do card
   (.atr-pill so encurta o texto longo) */
html.vn .ia-aviso.atr-alerta{margin:0 0 var(--e4); padding:var(--e3) 1.125rem;   /* mesmo recuo lateral dos cartoes do Meu painel */ background:var(--glpi-bg); color:var(--glpi-t); box-shadow:none;}
html.vn .ia-aviso.atr-alerta[hidden]{display:none;}
html.vn .ia-aviso.atr-alerta b{color:inherit;}
html.vn .atr-alerta .atr-corpo{flex:1 1 auto; min-width:0;}
html.vn .atr-alerta .atr-lista{display:flex; flex-direction:column; gap:var(--e3); margin:0; padding:0; list-style:none;}
html.vn .atr-alerta .atr-lista > li{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e4);}
html.vn .atr-alerta .atr-txt{display:flex; flex-direction:column; gap:var(--e1); flex:1 1 16rem; min-width:0; overflow-wrap:anywhere;}
html.vn .atr-alerta .atr-txt b:first-child{font-variant-numeric:tabular-nums;}
html.vn .atr-alerta .atr-txt small{font-size:var(--f1, .8125rem); color:var(--tx2);}
html.vn .atr-alerta .bt{position:relative; flex:none;}
html.vn .atr-alerta .bt::after{content:""; position:absolute; left:50%; top:50%; width:max(100%, 2.75rem); height:max(100%, 2.75rem); transform:translate(-50%, -50%);}
html.vn .atr-alerta .bt:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
html.vn #corpo .item .atr-pill{max-width:100%; overflow:hidden; text-overflow:ellipsis;}
/* mobile v2 (ate 820px): pastilha da Fila na escala das pastilhas (20px, letra 12, peso 600); o "Comecar" do
   alerta ja entra no sistema de botoes do bloco "controles mobile v2" (desenho 36, letra 13, alvo 44 no ::after) */
@media (max-width:820px){
  html.vn:not(#_m) #corpo .item .atr-pill{min-height:var(--pst); padding-block:0; padding-inline:var(--e2); font-size:.75rem; line-height:var(--pst); font-weight:600;}
  html.vn:not(#_m) .atr-alerta .atr-txt small{font-size:.75rem;}
}
/* ==== fim alerta "Atribuido a voce" ==== */
/* ==== barra de baixo 06/11/2026 (frente "Barra de baixo e folha Mais", docs/FRENTES.md) ==========================
   Queixa do Weslley (iPhone 375, escuro, folha Mais aberta sobre Notificacoes): logo minusculo no cabecalho da folha,
   pastilha da aba atual so atras do icone, Notificacoes e Mais com cara de selecionadas ao mesmo tempo e a barra
   piscando a cada troca de tela.
   - pastilha (::before) cobre a aba inteira, icone e rotulo, recuada 3px em cima e embaixo e 4px dos lados (2px abaixo
     de 360, onde cabem 5 abas de 64px), raio --r2; a aba toda segue sendo o alvo (48px de altura, a barra fica nos 3.0625rem que o resto usa)
   - um ativo so: com a folha aberta (Mais com aria-expanded=true) a aba da tela atual volta a neutra. O aria-current
     continua nela (o leitor de tela segue sabendo onde esta); o casco ja marca a aba tocada antes da resposta
   - troca de aba sem animacao (acao de toda hora): a pastilha aparece, nao desliza
   - entre telas a barra tem view-transition-name proprio e sem animacao (o topo ja tinha, vn-lado): so o conteudo cruza.
     O <link rel=expect> do <head> (visual.py, VN_ESPERA_CASCO) garante a barra montada no primeiro desenho
   - logo do topo, que e o cabecalho da folha: 4.5rem de largura, ~23px de altura num cabecalho de 44 */
html.vn .vn-abas{view-transition-name:vn-abas;}
::view-transition-group(vn-abas){animation:none;}
::view-transition-old(vn-abas){animation:none;}
::view-transition-new(vn-abas){animation:none;}
/* a velha so some quando a nova existe: no Safari (sem rel=expect) a 1a captura pode vir antes da barra montada,
   e ai a velha fica parada no lugar ate o fim da troca, em vez de a barra sumir e voltar */
::view-transition-old(vn-abas):not(:only-child){display:none;}
@media (max-width:620px){
  html.vn:not(#_m) .vn-side .marca svg{width:4.5rem; max-height:none;}
  /* nome e perfil da conta na folha Mais encostavam (-0.2px, auditor dados-colados, ja existia antes desta frente) */
  html.vn:not(#_m) .vn-side .quem{row-gap:var(--e1);}
  /* altura da aba (48px) vem da linha da grade, nao de min-height no botao (test_padrao_visual: alturas de controle na escala);
     recuo lateral da pastilha fluido, 2px em 320 a 4px a partir de ~400, sem quebra fora da escala 620/820/980/1440 */
  html.vn:not(#_m) .vn-abas{--ab-rx:clamp(.125rem, calc(2.5vw - .375rem), var(--e1)); --ab-ry:.1875rem; grid-auto-rows:minmax(3rem, auto);}
  /* 09/11/2026: o respiro lateral agora e da barra (.vn-abas, area segura); o rotulo usa a largura da pastilha
     inteira (so o --ab-rx), senao "Meu painel" (62px) cortava com 5 abas em 390 */
  html.vn:not(#_m) .vn-abas :is(a, button){position:relative; isolation:isolate; gap:.0625rem; padding:var(--ab-ry) var(--ab-rx); color:var(--tx3);}
  html.vn:not(#_m) .vn-abas :is(a, button)::before{content:""; position:absolute; z-index:-1; inset:var(--ab-ry) var(--ab-rx); border-radius:var(--r2); background:var(--fill); opacity:0; pointer-events:none;}
  html.vn:not(#_m) .vn-abas svg{width:1.375rem; height:1.375rem;}
  html.vn:not(#_m) .vn-abas span{line-height:1.2;}
  /* ativo: pastilha + icone no matiz do GLPI + rotulo claro em 600 (nao so a cor diz onde se esta, WCAG 1.4.1) */
  html.vn:not(#_m) .vn-abas :is([aria-current="page"], [aria-expanded="true"]){color:var(--glpi-t);}
  html.vn:not(#_m) .vn-abas :is([aria-current="page"], [aria-expanded="true"])::before{opacity:1;}
  html.vn:not(#_m) .vn-abas :is([aria-current="page"], [aria-expanded="true"]) > span:not(.ab-n-sr){color:var(--tx1); font-weight:600;}
  /* folha aberta: so o Mais fica ativo */
  html.vn:not(#_m) .vn-abas:has(> [aria-expanded="true"]) > [aria-current="page"]{color:var(--tx3);}
  html.vn:not(#_m) .vn-abas:has(> [aria-expanded="true"]) > [aria-current="page"]::before{opacity:0;}
  html.vn:not(#_m) .vn-abas:has(> [aria-expanded="true"]) > [aria-current="page"] > span:not(.ab-n-sr){color:inherit; font-weight:500;}
  /* toque: a pastilha aparece na aba tocada (em vez de apagar a aba inteira) */
  html.vn:not(#_m) .vn-abas :is(a, button):active{opacity:1;}
  html.vn:not(#_m) .vn-abas :is(a, button):active::before{opacity:1; background:var(--toque);}
  html.vn:not(#_m) .vn-abas :is(a, button):focus-visible{outline-offset:-.25rem;}
}
@media (forced-colors:active){
  html.vn .vn-abas :is([aria-current="page"], [aria-expanded="true"])::before{background:Highlight; opacity:.35;}
  html.vn .vn-abas:has(> [aria-expanded="true"]) > [aria-current="page"]::before{opacity:0;}
}
/* ==== fim barra de baixo 06/11/2026 ==== */
/* 09/11/2026 (print do iPhone): a navegacao parcial (nav.js) poe o foco no h1 da tela nova para o leitor de
   tela anunciar o nome; o Safari tratava esse foco programatico como :focus-visible e desenhava um contorno de
   largura toda em volta do "Meu painel". O h1 nao e controle (tabindex=-1, fora do Tab): sem anel nele */
html.vn h1[tabindex="-1"]:is(:focus, :focus-visible){outline:none;}
/* 09/11/2026 (2o print do iPhone, 20261109-0748): no topo, puxar a pagina para baixo (quique do iOS) levava o
   topo preso (sticky) junto com o conteudo e abria uma faixa no fundo do html (--bg), mais escura que o topo.
   No celular: sem quique na pagina (overscroll-behavior-y, Safari 16+; o painel nao tem puxar-para-atualizar
   proprio e o PWA do iOS nao tem o nativo) e, para o Safari antigo, o fundo do html em --side, a cor do topo e
   das abas; o body segue em --bg e pinta o conteudo, entao o visual parado nao muda */
@media (max-width:620px){
  html.vn{background:var(--side); overscroll-behavior-y:none;}
  html.vn body{overscroll-behavior-y:none;}
}
/* ==== APP CELULAR 09/11/2026 ====
   App reduzido do celular: tudo aqui vale so sob html.app-cel (pre-pinta do visual.py: ate 768px com
   toque), entao o computador e a janela estreita sem toque nao mudam. O app tem entrada, Meu painel e
   Fila (lider da semana ou superadmin); a barra de baixo (casco, bloco "APP CELULAR 09/11/2026") leva
   Meu painel, Fila e Conta, e a Conta abre a folha #folha-conta. Contrato com as telas: html.app-cel,
   __EU__.app_fila, window.appCel (docs/PADRAO-VISUAL.md, "App do celular") */
html.vn.app-cel{background:var(--side); overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
html.vn.app-cel body{min-height:100dvh; overscroll-behavior-y:none;}
/* so as tres telas: menu, gaveta, Administracao e o rodape do menu saem (a Conta da barra faz o papel deles) */
html.vn.app-cel:not(#_m) :is(.vn-menu, .vn-gaveta, .vn-adm, .vn-pe){display:none;}
html.vn.app-cel:not(#_m) .vn-side .acoes-topo > :not(#avisos, #app-conta){display:none;}
/* campo com 16px: o iPhone nao da zoom ao focar */
html.vn.app-cel :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea){font-size:1rem;}
/* folha Conta */
html.vn.app-cel #folha-conta .folha-corpo{padding-bottom:var(--e4);}
html.vn.app-cel #folha-conta .app-quem{display:flex; align-items:center; gap:var(--e3); min-width:0; overflow-wrap:anywhere;}
html.vn.app-cel #folha-conta .app-quem[hidden]{display:none;}
/* E 09/11: a copia do #quem traz as iniciais da barra estreita; na folha o rosto ja diz quem e */
html.vn.app-cel #folha-conta .app-quem .ini{display:none;}
html.vn.app-cel #folha-conta .folha-rot{margin-top:var(--e3);}
html.vn.app-cel #folha-conta .app-avisos{display:flex; flex-direction:column; gap:var(--e1);}
html.vn.app-cel #folha-conta .app-avisos > *{margin:0;}
html.vn.app-cel #folha-conta .app-av-acoes{display:flex; flex-wrap:wrap; gap:var(--e2);}
html.vn.app-cel #folha-conta .app-av-acoes:not(:has(> :not([hidden]))){display:none;}
html.vn.app-cel #folha-conta .app-lista{margin-top:var(--e2); border-top:.5px solid var(--sep);}
html.vn.app-cel #folha-conta .app-sair b{color:var(--crit-t);}
/* de 621 a 768px (telefone grande deitado, tablet pequeno com toque) a barra do celular nao existe no
   resto do painel: aqui ela volta, igual a de ate 620px */
@media (min-width:621px){
  html.vn.app-cel .vn-abas{position:fixed; z-index:var(--z-abas); left:0; right:0; bottom:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    padding:0 max(var(--e2), env(safe-area-inset-right, 0rem)) env(safe-area-inset-bottom, 0rem) max(var(--e2), env(safe-area-inset-left, 0rem));
    background:var(--side); border-top:.5px solid var(--line2);}
  html.vn.app-cel .vn-abas :is(a, button){display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.125rem; min-height:2.75rem; min-width:0;
    padding:var(--e1) var(--e0) .0625rem; border:0; background:none; color:var(--tx3); font:inherit; font-size:var(--f0, .75rem); font-weight:500; text-decoration:none; cursor:pointer;}
  html.vn.app-cel .vn-abas svg{width:1.5rem; height:1.5rem; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  html.vn.app-cel .vn-abas [aria-current="page"]{color:var(--glpi-t);}
  html.vn.app-cel .vn-abas [aria-current="page"] > span:not(.ab-n-sr){color:var(--tx1); font-weight:600;}
  html.vn.app-cel body{padding-bottom:calc(3.0625rem + var(--e6) + env(safe-area-inset-bottom, 0rem));}
  html.vn.app-cel{scroll-padding-bottom:calc(3.0625rem + var(--e2) + env(safe-area-inset-bottom, 0rem));}
  html.vn.app-cel .toast{bottom:calc(3.0625rem + var(--e4) + env(safe-area-inset-bottom, 0rem));}
}
/* ==== fim APP CELULAR 09/11/2026 ==== */
/* ==== APP CELULAR E 09/11/2026 ====
   (substitui o D, blocos quadrados de 72px) Conta e o avatar redondo do topo, ao lado do sino (#app-conta, casco
   trecho "Conta no topo (E 09/11)"), e abre a folha #folha-conta. A barra de baixo leva so as telas (Meu painel,
   Fila) e so existe com 2 ou mais (html.tem-abas); com uma, o espaco volta para a tela. Desenho de barra nativa:
   fundo do topo translucido com desfoque, filete de cima, itens dividindo a largura, icone + rotulo, alvo de
   56px; o ativo pinta icone e rotulo e ganha uma pilula discreta atras do icone (.ab-ic::before) que abre do
   centro (scaleX + opacidade, --dur-3). Reduced-motion: so a opacidade. Tudo sob html.vn.app-cel */
html.vn.app-cel{--ab-h:calc(3.5rem + var(--e1));}
html.vn.app-cel:not(#_m) .vn-abas{grid-auto-columns:minmax(0,1fr); grid-auto-rows:3.5rem; grid-template-columns:none; align-items:stretch;
  padding:var(--e1) env(safe-area-inset-right, 0rem) env(safe-area-inset-bottom, 0rem) env(safe-area-inset-left, 0rem);
  background:var(--side); border-top:.5px solid var(--line2);}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.vn.app-cel:not(#_m) .vn-abas{background:color-mix(in srgb, var(--side) 80%, transparent); -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px);}
}
html.vn.app-cel:not(#_m) .vn-abas :is(a, button){position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--e1);
  padding:0; color:var(--tx3); font-size:.75rem; font-weight:500; text-decoration:none;}
html.vn.app-cel:not(#_m) .vn-abas :is(a, button)::before{display:none;}
html.vn.app-cel:not(#_m) .vn-abas :is(a, button):active{opacity:1;}
html.vn.app-cel:not(#_m) .vn-abas .ab-ic{position:relative; display:grid; place-items:center; width:4rem; height:2rem; max-width:100%; overflow:visible; border-radius:var(--rp);}
html.vn.app-cel:not(#_m) .vn-abas .ab-ic::before{content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background:var(--glpi-bg); opacity:0; transform:scaleX(.5); pointer-events:none;}
html.vn.app-cel:not(#_m) .vn-abas .ab-ic svg{position:relative; z-index:1; width:1.5rem; height:1.5rem;}
html.vn.app-cel:not(#_m) .vn-abas .ab-rot{line-height:1.2;}
html.vn.app-cel:not(#_m) .vn-abas [aria-current="page"]{color:var(--glpi-t);}
html.vn.app-cel:not(#_m) .vn-abas [aria-current="page"] .ab-ic::before{opacity:1; transform:none;}
html.vn.app-cel:not(#_m) .vn-abas [aria-current="page"] .ab-rot{color:var(--tx1); font-weight:600;}
html.vn.app-cel:not(#_m) .vn-abas :is(a, button):active .ab-ic::before{opacity:.6; transform:none;}
html.vn.app-cel:not(#_m) .vn-abas :is(a, button):focus-visible{outline:2px solid var(--glpi-t); outline-offset:-2px; border-radius:var(--r2);}
@media (prefers-reduced-motion:no-preference){
  html.vn.app-cel:not(#_m) .vn-abas .ab-ic::before{transition:transform var(--dur-3) var(--ease-saida, ease-out), opacity var(--dur-2) var(--ease-padrao);}
  html.vn.app-cel:not(#_m) .vn-abas :is(a, button){transition:color var(--dur-2) var(--ease-padrao);}
}
@media (prefers-reduced-motion:reduce){
  html.vn.app-cel:not(#_m) .vn-abas .ab-ic::before{transform:none; transition:opacity var(--dur-2) var(--ease-padrao);}
}
@media (forced-colors:active){
  html.vn.app-cel:not(#_m) .vn-abas [aria-current="page"] .ab-ic::before{background:Highlight; opacity:.35;}
}
/* o que se apoia na barra sobe junto; sem barra (so Meu painel), devolve o espaco */
html.vn.app-cel.tem-abas body{padding-bottom:calc(var(--ab-h) + var(--e6) + env(safe-area-inset-bottom, 0rem));}
html.vn.app-cel.tem-abas{scroll-padding-bottom:calc(var(--ab-h) + var(--e2) + env(safe-area-inset-bottom, 0rem));}
html.vn.app-cel.tem-abas :is(.vn-volta, .toast){bottom:calc(var(--ab-h) + var(--e4) + env(safe-area-inset-bottom, 0rem));}
html.vn.app-cel:not(.tem-abas) body{padding-bottom:calc(var(--e6) + env(safe-area-inset-bottom, 0rem));}
html.vn.app-cel:not(.tem-abas){scroll-padding-bottom:calc(var(--e2) + env(safe-area-inset-bottom, 0rem));}
html.vn.app-cel:not(.tem-abas) :is(.vn-volta, .toast){bottom:calc(var(--e4) + env(safe-area-inset-bottom, 0rem));}
/* avatar da Conta no topo: 36px desenhados como o sino, alvo de 44px no ::after, anel quando a folha esta aberta */
html.vn.app-cel .app-av{position:relative; display:inline-grid; place-items:center; flex:none; width:2.25rem; height:2.25rem; margin-left:var(--e2); padding:0; border:0; border-radius:50%;
  background:var(--fill); color:var(--tx2); cursor:pointer;}
html.vn.app-cel .app-av::after{content:""; position:absolute; left:50%; top:50%; width:2.75rem; height:2.75rem; transform:translate(-50%, -50%); border-radius:50%;}
html.vn.app-cel .app-av-ic{display:grid; place-items:center; width:100%; height:100%; overflow:hidden; border-radius:50%;}
html.vn.app-cel .app-av-ic:not(.rosto) svg{width:1.25rem; height:1.25rem; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
html.vn.app-cel .app-av-ic.rosto svg{width:100%; height:100%;}
html.vn.app-cel .app-av[aria-expanded="true"]{box-shadow:0 0 0 2px var(--side), 0 0 0 4px var(--glpi-t);}
html.vn.app-cel .app-av:focus-visible{outline:2px solid var(--glpi-t); outline-offset:3px;}
html.vn.app-cel .app-av:active{transform:scale(.97);}
/* ponto: avisos desligados (o texto vai no .ab-n-sr) */
html.vn.app-cel .app-av .app-pt{position:absolute; top:-.0625rem; right:-.0625rem; width:.625rem; height:.625rem; border-radius:50%; background:var(--crit-fill, var(--crit)); box-shadow:0 0 0 2px var(--side);}
html.vn.app-cel .app-av .app-pt[hidden]{display:none;}
html.vn.app-cel .app-av .ab-n-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
/* ficha/gaveta do chamado no app (Meu painel e Fila): tela cheia e nenhum link para o GLPI, que pede VPN no celular */
html.vn.app-cel .gaveta-host .det:is(*, #_){width:100%; border-left:0;}
html.vn.app-cel :is(.gaveta-host, .item.aberta) p:has(> a.abrir:only-child){display:none;}
html.vn.app-cel :is(.gaveta-host, .item.aberta, #corpo .item) a.abrir:is(*, #_){display:none;}
/* ==== fim APP CELULAR E 09/11/2026 ==== */
/* ==== FICHA V2 09/11/2026 (montaDet do topo, cabecaGaveta do casco) ====
   A ficha do chamado em 4 blocos, a mesma ordem no computador e no app: cabecalho (status, requerente,
   dono e a faixa quente de quem espera), "O que fazer agora" (frase-guia e ate 3 .bt; no app viram a
   barra fixa .fx-barra embaixo), Conversa (baloes: requerente a esquerda, time a direita) e o resto
   recolhido em <details> (Detalhes, Ajustes). Os .campos de dentro perdem o filete e o recuo da ficha
   antiga: quem separa os blocos e o padding da secao e o filete do summary */
html.vn .det.fx{--fx-px:1.875rem;}
html.vn .det.fx :where(p){margin:0;}
html.vn .det.fx .campos{padding:0; margin:0; border-top:0;}
html.vn :is(.item.aberta, .gaveta-host) .det.fx{padding-bottom:var(--e6);}
html.vn .det.fx > :is(.fx-agora, .fx-prazos, .fx-conversa){display:flex; flex-direction:column; gap:var(--e3); min-width:0; padding:var(--e5) var(--fx-px) 0;}
html.vn .det.fx > .fx-conversa{padding-bottom:var(--e5);}
/* cabecalho: status e pessoas numa linha, a espera logo abaixo */
html.vn .gav-ss.fx-cab{flex-direction:column; align-items:flex-start; gap:var(--e2);}
html.vn .fx-cab .fx-linha{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e4); font-size:var(--f2); color:var(--tx2);}
html.vn .fx-cab .fx-pes{display:inline-flex; align-items:baseline; gap:var(--e1); min-width:0; overflow-wrap:anywhere;}
html.vn .fx-cab .fx-pes b{color:var(--tx1); font-weight:600;}
html.vn .fx-cab .fx-semdono{color:var(--crit-t); font-weight:600;}
html.vn .fx-cab .fx-mais{display:inline-flex; align-items:center; padding:0 var(--e2); border-radius:var(--rp); background:var(--fill); color:var(--tx2); font-size:var(--f1); font-weight:600; font-variant-numeric:tabular-nums;}
html.vn .fx-cab .fx-quente{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); font-size:var(--f3); font-weight:600; color:var(--tx2); font-variant-numeric:tabular-nums;}
html.vn .fx-cab .fx-quente.crit{color:var(--crit-t);}
html.vn .fx-cab .fx-quente.aviso{color:var(--warn-t);}
/* o que fazer agora */
html.vn .det.fx .fx-guia{font-size:var(--f4); font-weight:600; line-height:1.5; color:var(--tx1); max-width:60ch;}
html.vn .det.fx .fx-acoes{display:flex; flex-wrap:wrap; gap:var(--e2);}
html.vn .det.fx .fx-acoes > .bt{flex:none;}
html.vn .det.fx .fx-nota{font-size:var(--f3); color:var(--tx2); line-height:1.5; padding-left:var(--e3); box-shadow:inset 2px 0 0 var(--line2); overflow-wrap:anywhere;}
html.vn .det.fx .fx-envia .glpi{margin-top:0;}
/* conversa */
html.vn .det.fx .fx-tit{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e1) var(--e3);}
html.vn .det.fx .fx-tit h3{margin:0; font-size:var(--f3); font-weight:600; color:var(--tx1);}
html.vn .det.fx .fx-ultima{font-size:var(--f2); color:var(--tx3);}
html.vn .det.fx .fx-ultima.req{color:var(--warn-t);}
html.vn .det.fx .fx-baloes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--e3);}
html.vn .det.fx .fx-bal{display:flex; flex-direction:column; gap:var(--e1); max-width:88%; min-width:0; padding:var(--e3) var(--e4); border-radius:var(--r3); background:var(--s2); box-shadow:inset 0 0 0 1px var(--line);}
html.vn .det.fx .fx-bal.req{align-self:flex-start; border-bottom-left-radius:var(--r1);}
html.vn .det.fx .fx-bal.time{align-self:flex-end; border-bottom-right-radius:var(--r1); background:var(--glpi-bg);}
html.vn .det.fx .fx-de{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e2); font-size:var(--f2); color:var(--tx3);}
html.vn .det.fx .fx-de b{color:var(--tx1); font-weight:600;}
html.vn .det.fx .fx-txt{font-size:var(--f3); line-height:1.5; color:var(--tx1); white-space:pre-line; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden;}
html.vn .det.fx .fx-txt.tudo{display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible;}
html.vn .det.fx .fx-ler{align-self:flex-start; margin-left:calc(-1 * var(--e3));}
html.vn .det.fx .fx-vazio{font-size:var(--f3); color:var(--tx3);}
/* retorno inteiro (10/11/2026): botao abaixo dos baloes e a regiao que abre com a altura animada (grid 0fr -> 1fr,
   como a sanfona do menu); no reduced-motion fica so a opacidade. Os baloes de dentro sao os mesmos da conversa */
html.vn .det.fx .fx-verint{align-self:flex-start; margin-left:calc(-1 * var(--e3));}
html.vn .det.fx .fx-inteiro{display:grid; grid-template-rows:0fr; opacity:0; min-width:0;
  transition:grid-template-rows var(--dur-4) var(--ease-entra), opacity var(--dur-3) var(--ease-padrao);}
html.vn .det.fx .fx-inteiro.aberto{grid-template-rows:1fr; opacity:1;}
html.vn .det.fx .fx-inteiro[hidden]{display:none;}
html.vn .det.fx .fx-int-dentro{display:flex; flex-direction:column; gap:var(--e3); min-height:0; min-width:0; overflow:hidden;}
html.vn .det.fx .fx-inteiro.aberto .fx-int-dentro{overflow:visible;}
html.vn .det.fx .fx-int-meta{font-size:var(--f2); line-height:1.5; color:var(--tx3); max-width:65ch;}
html.vn .det.fx .fx-int-anexos{color:var(--tx2);}
html.vn .det.fx .fx-int-n{flex:none; font-variant-numeric:tabular-nums; color:var(--tx2);}
html.vn .det.fx .fx-de .badge{flex:none;}
html.vn .det.fx .fx-int-erro{font-size:var(--f3); color:var(--crit-t);}
html.vn .det.fx .fx-int-dentro > .bt{align-self:flex-start;}
@media (prefers-reduced-motion: reduce){ html.vn .det.fx .fx-inteiro{transition:opacity var(--dur-2) linear;} }
/* Detalhes e Ajustes recolhidos */
html.vn .det.fx > .fx-sec{margin:0 var(--fx-px); border-top:1px solid var(--line);}
html.vn .det.fx > .fx-sec > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--e3); min-height:3rem; cursor:pointer;
  font-size:var(--f3); font-weight:600; color:var(--tx1); border-radius:var(--r1);}
html.vn .det.fx > .fx-sec > summary::-webkit-details-marker{display:none;}
/* o ▸ dos details do toque (02/10) daria dois marcadores; o conteudo do fechado nao ocupa caixa (falso encosto, 29/10) */
html.vn .det.fx > .fx-sec > summary::before{content:none;}
html.vn .det.fx > .fx-sec:not([open]) > :not(summary){display:none;}
/* revisao 09/11: .sr so existia no Meu painel (meu.css); na Fila o titulo "O que fazer agora", as linhas do SLA e o
   "(abre em outra aba)" apareciam na tela. A ficha esconde os seus em todas as telas */
html.vn .det.fx .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; font-size:var(--f3);}
html.vn .det.fx > .fx-sec > summary::after{content:""; flex:none; width:.5rem; height:.5rem; margin-right:var(--e1); border:solid var(--tx3); border-width:0 2px 2px 0; transform:rotate(45deg) translate(-2px, -2px); transition:transform var(--dur-2) ease;}
html.vn .det.fx > .fx-sec[open] > summary::after{transform:rotate(-135deg) translate(-2px, -2px);}
html.vn .det.fx > .fx-sec > summary:focus-visible{outline:2px solid var(--glpi-t); outline-offset:2px;}
html.vn .det.fx > .fx-sec > .fx-corpo{display:flex; flex-direction:column; gap:var(--e4); padding:var(--e1) 0 var(--e5);}
html.vn .det.fx .fx-dados{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap:var(--e3) var(--e4); margin:0;}
html.vn .det.fx .fx-dados > div{min-width:0; display:flex; flex-direction:column; gap:var(--e0);}
html.vn .det.fx .fx-dados dt{font-size:var(--f2); color:var(--tx3);}
html.vn .det.fx .fx-dados dd{margin:0; font-size:var(--f3); color:var(--tx1); overflow-wrap:anywhere; font-variant-numeric:tabular-nums;}
html.vn .det.fx .fx-slatxt{font-size:var(--f2); color:var(--tx2);}
html.vn .det.fx .fx-ajustes .marcar{margin-top:var(--e1);}
html.vn .det.fx > .fx-rod{margin:0 var(--fx-px); padding-top:var(--e4); border-top:1px solid var(--line); font-size:var(--f2);}
html.vn .det.fx > .fx-rod a.abrir{margin-block:0;}
@media (max-width:820px){ html.vn .det.fx{--fx-px:var(--e4);} }
@media (prefers-reduced-motion: reduce){ html.vn .det.fx > .fx-sec > summary::after{transition:none;} }
/* app: a acao fica na mao, numa barra fixa no pe da ficha (2 botoes e o "Mais acoes") */
html.vn.app-cel .det.fx{--fx-px:var(--e4);}
html.vn.app-cel :is(.item.aberta, .gaveta-host) .det.fx{padding-bottom:0;}
html.vn.app-cel .det.fx > .fx-barra{position:sticky; bottom:0; z-index:1; margin-top:auto; display:flex; align-items:stretch; gap:var(--e2);
  padding:var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom, 0rem)); background:var(--s1); border-top:1px solid var(--line);}
/* :is(*, #_): vence o piso de 36px do toque (html.vn:not(#_m) .bt, bloco de alvos), a barra pede 44 */
html.vn.app-cel .det.fx > .fx-barra > .bt:is(*, #_){flex:1 1 0; min-width:0; min-height:2.75rem; white-space:normal; text-align:center; padding:0 var(--e3);}
html.vn.app-cel .det.fx > .fx-barra > .bt[hidden]:is(*, #_){display:none;}
html.vn.app-cel .det.fx > .fx-barra > .fx-maisb:is(*, #_){flex:0 0 2.75rem; padding:0;}
html.vn.app-cel .det.fx > .fx-barra > .fx-maisb svg{width:1.25rem; height:1.25rem; fill:currentColor; stroke:none;}
html.vn.app-cel .det.fx > .fx-conversa{padding-bottom:var(--e5);}
html.vn.app-cel .det.fx > .fx-sec:last-of-type{margin-bottom:var(--e5);}
/* ==== fim FICHA V2 09/11/2026 ==== */
/* ==== APP CELULAR F 09/11/2026 (auditoria do app em 390, itens 1, 7, 13 e 18) ====
   Topo do app como barra nativa: presa no alto sempre (a faixa de bloqueio/instalar sai do topo no app; a folha
   Conta explica e o ponto do avatar avisa), fundo translucido com desfoque igual a .vn-abas, filete so com
   rolagem, e o titulo grande da tela (28px) que, rolado para baixo do topo, volta pequeno no meio da barra
   (.app-tit + html.rolou, casco trecho "F 09/11"). Sino sem fundo, como icone de barra. Tudo sob html.vn.app-cel */
html.vn.app-cel .vn-avisos-faixa:is(*, #_){display:none;}
html.vn.app-cel .titpag > h1:is(*, #_){font-size:var(--f6); font-weight:700; line-height:1.15; letter-spacing:-.02em;}
html.vn.app-cel .vn-side #avisos:is(*, #_){background:transparent; box-shadow:none;}
html.vn.app-cel .app-tit{display:none;}
@media (max-width:620px){
  html.vn.app-cel .vn-side:is(*, #_){position:sticky; top:0; border-bottom-color:transparent;}
  html.vn.app-cel.rolou .vn-side:is(*, #_){border-bottom-color:var(--line);}
  /* translucido com desfoque saiu em 09/11 (bloco TOPO UMA COR): misturava o fundo de baixo e dava outra cor */
  html.vn.app-cel .app-tit{display:flex; align-items:center; justify-content:center; position:absolute; left:50%; top:max(env(safe-area-inset-top, 0rem), var(--e2)); bottom:var(--e1);
    max-width:calc(100% - 9rem); transform:translateX(-50%); opacity:0; pointer-events:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    font-size:1.0625rem; font-weight:600; color:var(--tx1);}
  html.vn.app-cel.rolou .app-tit{opacity:1;}
  @media (prefers-reduced-motion:no-preference){
    html.vn.app-cel .vn-side:is(*, #_){transition:border-color var(--dur-2) var(--ease-padrao);}
    html.vn.app-cel .app-tit{transition:opacity var(--dur-2) var(--ease-padrao);}
  }
}
/* ==== fim APP CELULAR F 09/11/2026 ==== */
/* ==== TOPO UMA COR 09/11/2026 (regressao do iPhone: faixas de cor diferentes no alto do app) ====
   O polimento F deixou o topo translucido com desfoque (80% de --side sobre o conteudo), o titulo grande ficava
   sobre o body em --bg e o cabecalho da ficha em tela cheia em --s1: status bar (theme-color = --side), topo,
   titulo e ficha davam tres tons. No app (ate 620px) a cor do alto e uma so, --side, solida: o fundo da pagina
   passa a ser --side (--bg redefinido, entao tudo que se apoiava no fundo da pagina segue igual em relacao a ele),
   o topo e opaco e so ganha o filete de baixo ao rolar, e o cabecalho da ficha usa a mesma cor. theme-color e o
   fundo do html (9dbc8b2) ja eram --side. Desktop intocado. Teste: tests/test_topo_uma_cor_20261109.py */
@media (max-width:620px){
  html.vn.app-cel, html.vn.app-cel body{--bg:var(--side);}
  html.vn.app-cel .vn-side:is(*, #_){background:var(--side); -webkit-backdrop-filter:none; backdrop-filter:none;}
}
html.vn.app-cel :is(.gaveta-host, .item.aberta) .det.fx .gav-cab:is(*, #_){background:var(--side);}
/* ==== fim TOPO UMA COR 09/11/2026 ==== */
/* ==== mobile-respiro 10/11/2026 (bateria visual do app em 360/390/412: itens proximos demais) ====
   So sob html.vn.app-cel; o computador nao muda.
   - topo do app: 8px em cima e embaixo (eram 4; o ponto vermelho do avatar ficava a 2px do alto) e 12px entre
     o sino e o avatar, para os alvos de 44 nao se tocarem
   - ficha: "Ver retorno inteiro" e "Ver detalhes" da folha perdem o recuo negativo (no toque o fundo ficava a 4px
     da borda da tela); o texto fica na borda comum de 16 e o alvo de 44 segue no ::after
   - ficha: o "+N" do dono a 8px do nome (era 4) e a linha de autor do retorno com 12px entre autor, quando e anexos */
@media (max-width:620px){
  html.vn.app-cel:not(#_m) .vn-side:is(*, #_){padding-top:max(env(safe-area-inset-top, 0rem), var(--e2)); padding-bottom:var(--e2);}
}
html.vn.app-cel .app-av:is(*, #_){margin-left:var(--e3);}
html.vn.app-cel .det.fx .fx-verint:is(*, #_), html.vn.app-cel dialog.folha .folha-det:is(*, #_){margin-left:0; padding-inline:0;}
html.vn.app-cel .fx-cab .fx-pes:is(*, #_){gap:var(--e1) var(--e2);}
html.vn.app-cel .det.fx .fx-de:is(*, #_){gap:var(--e1) var(--e3);}
/* ==== fim mobile-respiro 10/11/2026 ==== */