/* vidros-grupos.css -- a lista de Vidros agrupada por código (spec
   docs/superpowers/specs/2026-10-04-cadastros-croqui-busca-vidros-design.md,
   §4.10, aparência aprovada pelo dono na prévia de 2026-10-04). As regras são
   as da prévia, literais, mais a pílula "varia" e o texto só para leitor de
   tela. O markup é o de js/vidros-grupos.js. Só tokens de base.css: nenhuma
   cor crua, nada para as Exceções deliberadas do DESIGN.md.
   - seta (.vg-tg) e "+ Nova cor" (.vg-nova): alvo de 44x44;
   - filete cinza (--mut) na linha da cor: azul à esquerda já é "editado";
   - larguras fixas nos cabeçalhos 2, 8 e 9 (§4.10) e 10 (decisão D17 do
     plano): sem elas, Cor, Preço, IPI, Ativo e Descrição andam ao abrir o
     primeiro grupo (vg8 na fumaça). A do 10 são os 44 px do alvo da caixa
     de Ativo (base.css) mais os 20 px de padding do th (border-box). */
#vdLista .vg-id{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.vg-tg{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0;background:none;border:0;border-radius:var(--radius-sm);color:inherit;cursor:pointer}
.vg-tg::before{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
.vg-tg[aria-expanded="true"]::before{transform:rotate(45deg)}
.vg-tg:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#vdLista .vg-cor td,#vdLista .vg-nova-row td{background:color-mix(in srgb,var(--mut) 6%,var(--card))}
#vdLista .vg-cor td:first-child,#vdLista .vg-nova-row td:first-child{box-shadow:inset 2px 0 0 var(--mut)}
#vdLista .vg-cor:focus-within td{background:color-mix(in srgb,var(--mut) 12%,var(--card))}
@media (hover:hover){.vg-tg:hover{color:var(--acc)} #vdLista .vg-cor:hover td{background:color-mix(in srgb,var(--mut) 12%,var(--card))}}
button.matcod.matcor{font-family:inherit}
.vg-nova{min-height:44px}
.vg-resumo{margin:0 0 8px;min-height:18px}
#tool-vidros thead th:nth-child(2){width:10rem}
#tool-vidros thead th:nth-child(8){width:8.5rem}
#tool-vidros thead th:nth-child(9){width:6rem}
#tool-vidros thead th:nth-child(10){width:4rem}
.stpill.st-varia{background:transparent;border:1px solid var(--mut);color:var(--tx)}
.vg-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* A 1024 px as larguras dos th (§4.10) viram só preferência em
   table-layout:auto e a tabela, apertada, cortava o valor de preço e de IPI.
   O piso fica na célula (o input é 100% dela), com padding lateral menor na
   célula e no input para o valor caber sem a tabela passar do cartão. */
@media (max-width:1200px){
#vdLista td[data-mat-col="preco"],#vdLista td[data-mat-col="ipi"]{padding-left:3px;padding-right:3px}
#vdLista td[data-mat-col="preco"] input,#vdLista td[data-mat-col="ipi"] input{padding-left:4px;padding-right:4px}
#vdLista td[data-mat-col="preco"]{min-width:4.25rem}
#vdLista td[data-mat-col="ipi"]{min-width:3rem}
}