/* Vendas (E-36, F1): a lista das coleções, o "No ar agora" e a coleção. Porta do protótipo final
   (analises/vendas-f1/css/vendas.css), com as correções da rodada final da revisão (F1-1 a F1-16).
   Carregado DEPOIS do estilo.css. Regra de 16/10: o estilo.css pinta todo `button:hover:not(:disabled)` de preto; todo
   botão com desenho próprio aqui declara o seu `:hover:not(:disabled)` claro, e o `:disabled` legível.
   Preto só no menu, no botão principal e em selos pequenos. Destaque = cartão claro. */
:root {
  /* uma cor por família: as mesmas do Calendário (calendario.css) */
  --fam-daily: #1d6f5a; --fam-wide-set: #4f45b8; --fam-flare-set: #b0234f; --fam-oversize-set: #a64b12;
  --fam-brisa: #24639c; --fam-praia: #7d6100; --fam-capsula: #56606e;
  --vd-hover: var(--linha);          /* fundo do hover dentro de trilhas claras (aba, segmento): texto 5,3:1 */
  --vd-faixa: #e9e6df;               /* faixa do "normal" nos gráficos (contexto, rotulada na legenda) */
  --vd-irma: #8b877e;                /* a coleção irmã nos gráficos: 3,6:1 no branco */
  --icone-vendas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 14h12M4.5 11.5V8.5M8 11.5V4M11.5 11.5V6.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ casca: ícone do menu e a linha da fonte do dado */
.sidebar nav a[href^="/vendas"]::before { -webkit-mask-image: var(--icone-vendas); mask-image: var(--icone-vendas); }
.vd-fonte { margin: 0 0 var(--e-4); font-size: var(--t-2); color: var(--texto-2); }
.vd-fonte b { color: var(--texto); font-weight: 650; }
.vd-carregando { padding: 28px 0; color: var(--texto-2); }

/* ------------------------------------------------ topo */
.vd-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
.vd-topo h1 { margin: 4px 0 6px; }
.vd-resumo { margin: 0; max-width: 820px; color: var(--texto-2); font-size: var(--t-3); }
.vd-resumo b { color: var(--texto); font-weight: 650; }
.vd-ano { display: flex; align-items: center; gap: 6px; }
.vd-ano .ano { min-width: 4.5ch; text-align: center; font-family: var(--fonte-titulo); font-size: var(--t-6); font-weight: 650; font-variant-numeric: tabular-nums; }
.vd-ano button { width: 40px; padding: 0; }
.vd-frase { margin: 0 0 var(--e-4); max-width: 980px; font-family: var(--fonte-titulo); font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; }
.vd-frase b { font-weight: 700; }
.nw { white-space: nowrap; }

/* ------------------------------------------------ abas (pílula, como o Calendário; hover mais escuro que a trilha) */
.vd-abas { display: flex; gap: 3px; width: fit-content; max-width: 100%; padding: 3px; margin-bottom: var(--e-5); background: var(--superficie-3); border-radius: var(--r-3); }
.vd-abas [role="tab"] { min-height: 36px; padding: 0 18px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--texto-2); font-weight: 600; box-shadow: none; }
.vd-abas [role="tab"]:hover:not(:disabled):not([aria-selected="true"]) { background: var(--vd-hover); color: var(--texto); }
.vd-abas [role="tab"][aria-selected="true"], .vd-abas [role="tab"][aria-selected="true"]:hover:not(:disabled) {
  background: var(--superficie); color: var(--texto); font-weight: 700; box-shadow: 0 0 0 1px var(--borda-forte), var(--sombra-1); }

/* ------------------------------------------------ segmento (escolha única) e botão de direção */
.vd-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--superficie-3); border-radius: var(--r-2); }
.vd-seg button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--texto-2); font-size: var(--t-3); font-weight: 600; box-shadow: none; white-space: nowrap; }
.vd-seg button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--vd-hover); color: var(--texto); }
.vd-seg button[aria-pressed="true"], .vd-seg button[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--superficie); color: var(--texto); font-weight: 700; box-shadow: 0 0 0 1px var(--borda-campo), var(--sombra-1); }
/* desligado: legível (texto-2 dá 6,0:1 na trilha), riscado e sem mão; o porquê vem no title e na linha de aviso */
.vd-seg button:disabled { opacity: 1; color: var(--texto-2); background: transparent; cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--borda-forte); }
.vd-seg button:active:not(:disabled) { transform: none; }

.vd-botao-claro { min-height: var(--alto); padding: 0 13px; border: 1px solid var(--borda-forte); border-radius: var(--r-2); background: var(--superficie); color: var(--texto); font-size: var(--t-3); font-weight: 600; box-shadow: var(--sombra-1); white-space: nowrap; }
.vd-botao-claro:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--borda-campo); color: var(--texto); }
.vd-botao-claro[aria-expanded="true"], .vd-botao-claro[aria-expanded="true"]:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--borda-campo); }
.vd-botao-claro:disabled { opacity: 1; background: var(--superficie-2); border-style: dashed; color: var(--texto-3); box-shadow: none; cursor: not-allowed; }
.vd-botao-claro[aria-disabled="true"], .vd-botao-claro[aria-disabled="true"]:hover:not(:disabled) { background: var(--superficie-2); border-style: dashed; border-color: var(--borda-forte); color: var(--texto-3); box-shadow: none; cursor: not-allowed; }
.vd-botao-claro[aria-disabled="true"]:active:not(:disabled) { transform: none; }
.vd-botao-claro .seta { font-size: 15px; line-height: 1; }
a.botao.secondary:hover { color: var(--texto); }
button.secondary:disabled { opacity: 1; background: var(--superficie-2); border-style: dashed; color: var(--texto-3); box-shadow: none; }

/* ------------------------------------------------ chips de família (os do Calendário) */
.vd-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--superficie); color: var(--texto); font-size: var(--t-3); font-weight: 600; box-shadow: none; }
.vd-chip:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--borda-forte); color: var(--texto); }
.vd-chip .n { color: var(--texto-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.vd-chip[aria-pressed="true"] { border-color: var(--borda-forte); }
.vd-chip[aria-pressed="false"] { color: var(--texto-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.vd-chip[aria-pressed="false"] .ponto { background: transparent !important; box-shadow: inset 0 0 0 2px var(--texto-2); }
.vd-chip.so[aria-pressed="false"] { text-decoration: none; color: var(--texto); }
.vd-chip.so[aria-pressed="true"], .vd-chip.so[aria-pressed="true"]:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.vd-chip.so[aria-pressed="true"]::before { content: "✓"; font-weight: 800; }
.vd-chip:disabled { opacity: 1; background: var(--superficie-2); border-style: dashed; border-color: var(--borda-forte); color: var(--texto-3); text-decoration: none; cursor: not-allowed; }
.vd-migalha span[aria-current] { color: var(--texto); }
.ponto { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--texto)); }
.ponto.grande { width: 14px; height: 14px; }
.ponto.clara { box-shadow: inset 0 0 0 1.5px var(--texto-2); }

/* ------------------------------------------------ barra de filtros: uma linha só; "Lista | Tabela" fica na linha do aviso */
.vd-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 var(--e-2); }
.vd-grupo { display: inline-flex; align-items: center; gap: 8px; }
.vd-rot { font-size: var(--t-2); font-weight: 650; color: var(--texto-2); white-space: nowrap; }
label.vd-rot { display: inline-flex; flex-direction: row; gap: 0; }
.vd-filtros select, .vd-cab select, .vd-vitrine-barra select { width: auto; min-height: var(--alto); padding: 6px 34px 6px 11px; font-size: var(--t-3); font-weight: 600; }
.vd-filtros select:hover, .vd-cab select:hover, .vd-vitrine-barra select:hover { border-color: var(--texto-2); background-color: var(--superficie-2); }
#vd-direcao, .vd-direcao { justify-content: flex-start; }
.vd-familia { position: relative; }
.vd-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 300px; padding: 12px; background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--r-3); box-shadow: var(--sombra-3); }
.vd-pop .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-pop .pe { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha-suave); font-size: var(--t-2); color: var(--texto-2); }
.vd-linha-aviso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 var(--e-3); }
.vd-aviso-linha { margin: 0; min-height: 20px; font-size: var(--t-2); color: var(--texto-2); flex: 1 1 360px; }
.vd-aviso-linha b { color: var(--texto); font-weight: 650; }
.vd-abrir-filtros { display: none; }
.vd-so-folha { display: none; }
.vd-folha .vd-so-folha { display: inline-flex; }
.vd-folha .vd-so-folha[hidden] { display: none; }
.vd-folha { width: 100%; max-width: 100%; margin: auto 0 0; padding: 0; border: 0; border-radius: var(--r-4) var(--r-4) 0 0; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3); }
.vd-folha::backdrop { background: var(--veu); }
.vd-folha .cabeca { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 8px; }
.vd-folha .cabeca h2 { font-size: var(--t-5); }
.vd-folha .corpo { max-height: 70vh; overflow: auto; padding: 4px 16px 16px; }
.vd-folha .pe { position: sticky; bottom: 0; padding: 12px 16px 16px; background: var(--superficie); border-top: 1px solid var(--linha-suave); }
.vd-folha .pe button { width: 100%; }
.vd-fechar { width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--texto-2); font-size: 22px; box-shadow: none; }
.vd-fechar:hover:not(:disabled) { background: var(--superficie-3); color: var(--texto); }

/* ------------------------------------------------ No ar agora: compacto, abre a curva ao clicar */
.vd-noar { margin: 0 0 var(--e-5); }
.vd-noar:empty { display: none; }
.vd-noar-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.vd-noar-topo h2 { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-1); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.vd-noar-topo h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto); box-shadow: 0 0 0 3px var(--superficie-3); }
.vd-noar-topo span { font-size: var(--t-2); color: var(--texto-2); }
.vd-noar-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--e-3); }
.vd-noar-cartao { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info pecas" "info acoes"; gap: 8px 16px; padding: 12px 14px 12px 18px;
  background: var(--superficie); border: 1px solid var(--linha); border-left: 5px solid var(--cor, var(--texto)); border-radius: var(--r-3); box-shadow: var(--sombra-1); transition: border-color .12s, box-shadow .12s; }
.vd-noar-cartao.clara { border-left-color: var(--borda-campo); }
.vd-noar-cartao:hover { border-top-color: var(--borda-forte); border-right-color: var(--borda-forte); border-bottom-color: var(--borda-forte); box-shadow: var(--sombra-2); }
.vd-noar-cartao.aberto { border-top-color: var(--borda-campo); border-right-color: var(--borda-campo); border-bottom-color: var(--borda-campo); box-shadow: 0 0 0 1px var(--borda-campo), var(--sombra-2); }
.vd-noar-info { grid-area: info; min-width: 0; }
.vd-noar-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.vd-noar-nome a { font-family: var(--fonte-titulo); font-size: var(--t-5); font-weight: 700; text-decoration: none; }
.vd-noar-nome a:hover { text-decoration: underline; }
.vd-noar-nome .fam { flex-basis: 100%; font-size: var(--t-2); color: var(--texto-2); }
.vd-dia { display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r-pilula); background: var(--texto); color: var(--no-preto); font-size: var(--t-1); font-weight: 750; letter-spacing: .03em; line-height: 18px; white-space: nowrap; }
.vd-noar-valor { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.3; }
.vd-noar-valor b { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.vd-noar-valor span { font-size: var(--t-2); color: var(--texto-2); }
.vd-noar-delta { margin: 2px 0 0; font-size: var(--t-2); line-height: 1.45; }
.vd-noar-delta b { font-size: var(--t-3); font-variant-numeric: tabular-nums; }
.vd-noar-pecas { grid-area: pecas; display: flex; gap: 6px; justify-content: flex-end; }
.vd-noar-acoes { grid-area: acoes; display: flex; gap: 8px; align-items: flex-end; justify-content: flex-end; }
.vd-noar-acoes button { min-height: 32px; }
.vd-noar-painel { margin-top: var(--e-3); padding: 16px 18px; background: var(--superficie); border: 1px solid var(--borda-campo); border-radius: var(--r-3); box-shadow: var(--sombra-2); }
.vd-noar-painel .topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.vd-noar-painel h3 { margin: 0; font-family: var(--fonte-titulo); font-size: var(--t-5); }
.vd-noar-painel .frase { margin: 0 0 8px; font-size: var(--t-4); }
.vd-noar-painel .grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 16px 24px; align-items: start; }
.vd-noar-painel figure { margin: 0; min-width: 0; }
.vd-noar-painel svg { display: block; width: 100%; height: auto; overflow: visible; }
.vd-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: var(--t-2); color: var(--texto-2); }
.vd-legenda i { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.vd-legenda i.faixa { height: 10px; background: var(--vd-faixa); }
.vd-legenda i.hoje { width: 10px; height: 10px; border: 2px dashed var(--vd-irma); border-radius: 50%; background: var(--superficie); }
.vd-top-titulo { margin: 0 0 8px; font-size: var(--t-1); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.vd-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vd-top li { display: grid; grid-template-columns: 18px 58px minmax(0, 1fr); gap: 10px; align-items: center; }
.vd-top .n { font-size: var(--t-2); font-weight: 750; color: var(--texto-2); text-align: right; font-variant-numeric: tabular-nums; }
.vd-top .t { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-2); line-height: 1.35; }
.vd-top .t b { font-weight: 700; }
.vd-top .t .mod { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-top .t span { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.vd-vazio-noar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 16px 14px 20px; background: var(--superficie); border: 1px solid var(--linha); border-left: 6px solid var(--borda-forte); border-radius: var(--r-3); }
.vd-vazio-noar p { margin: 0; font-size: var(--t-3); color: var(--texto-2); }
.vd-vazio-noar p b { color: var(--texto); }
.vd-vazio-noar strong { display: block; font-family: var(--fonte-titulo); font-size: var(--t-5); }

/* ------------------------------------------------ miniatura de desenho (link que abre a peça na coleção) */
.vd-mini { display: block; flex: none; width: 46px; height: 46px; padding: 2px; border: 1px solid var(--linha); border-radius: 7px; background: var(--superficie-2); text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.vd-mini img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vd-mini:hover { border-color: var(--borda-campo); box-shadow: var(--sombra-2); }
.vd-mini.g { width: 58px; height: 58px; }
.vd-mini .sem { display: grid; place-items: center; width: 100%; height: 100%; font-size: 9px; color: var(--texto-2); text-align: center; }

/* ------------------------------------------------ lista das coleções */
.vd-cab, .vd-linha .l-topo { display: grid; grid-template-columns: 76px minmax(200px, 1.15fr) minmax(250px, 1.7fr) 124px 196px 40px; gap: 16px; align-items: center; }
.vd-cab { padding: 2px 17px 6px; font-size: var(--t-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.vd-cab small { display: block; font-size: var(--t-1); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; }
.vd-cab > span:first-child { text-align: center; }
.vd-cab .mostrar { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.vd-cab .mostrar select { min-height: 30px; padding: 2px 30px 2px 9px; font-size: var(--t-2); }
.vd-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vd-sep { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0; padding: 0 17px; font-size: var(--t-1); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.vd-sep:first-child { margin-top: 0; }
.vd-sep span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.vd-linha { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-1); transition: border-color .12s, box-shadow .12s, background-color .12s; }
.vd-linha:hover { border-color: var(--borda-forte); background: var(--superficie-2); box-shadow: var(--sombra-2); }
.vd-linha.aberta, .vd-linha.aberta:hover { border-color: var(--borda-campo); background: var(--superficie); box-shadow: 0 0 0 1px var(--borda-campo), var(--sombra-2); }
.vd-linha .l-topo { padding: 10px 16px; cursor: pointer; }
.pos { text-align: center; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pos b { display: block; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; }
.pos.data b { font-size: var(--t-4); font-weight: 650; color: var(--texto-2); }
.pos small { display: block; font-size: var(--t-1); color: var(--texto-2); }
.l-nome { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; }
.l-nome .nome { font-family: var(--fonte-titulo); font-size: var(--t-4); font-weight: 700; letter-spacing: .01em; text-decoration: none; overflow-wrap: anywhere; line-height: 1.3; }
.l-nome .nome:hover { text-decoration: underline; }
.l-nome .meta { grid-column: 2; font-size: var(--t-2); color: var(--texto-2); overflow-wrap: anywhere; }
.l-nome .aviso-col { grid-column: 2; font-size: var(--t-2); color: var(--texto); }
.l-valor { min-width: 0; }
.l-valor .barra-linha { display: flex; align-items: center; gap: 10px; }
.vd-barra { position: relative; flex: 1 1 auto; height: 10px; min-width: 40px; }
.vd-barra .cheia { position: absolute; left: 0; top: 0; height: 100%; background: var(--texto); border-radius: 0 3px 3px 0; }
.vd-barra .est { position: absolute; top: -2px; height: 14px; border: 1.5px dashed var(--borda-campo); border-radius: 3px; background: repeating-linear-gradient(135deg, transparent 0 4px, rgb(139 135 126 / 18%) 4px 6px); }
.l-valor .valor { flex: none; min-width: 92px; text-align: right; font-size: var(--t-4); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.l-valor .sub { margin-top: 3px; font-size: var(--t-2); color: var(--texto-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* "parcial": selo de contorno tracejado, sem fundo (de propósito: não é aviso de atenção, é janela que ainda não fechou) */
.vd-parcial { display: inline-flex; align-items: center; padding: 0 7px; margin: 0 4px 0 0; border: 1px dashed var(--borda-campo); border-radius: var(--r-pilula); background: transparent; color: var(--texto); font-size: var(--t-1); font-weight: 700; line-height: 17px; white-space: nowrap; }
.vd-sem-desenhos { font-size: var(--t-2); color: var(--texto-2); text-align: right; }
.l-spark { display: block; width: 124px; height: 40px; }
.l-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.l-minis { display: flex; gap: 4px; justify-content: flex-end; }
.l-abrir { width: 36px; min-height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--r-2); background: transparent; color: var(--texto-2); box-shadow: none; }
.l-abrir::before { content: ""; width: 14px; height: 14px; background: currentColor; transform: rotate(90deg); transition: transform .15s;
  -webkit-mask: var(--icone-chevron) center / contain no-repeat; mask: var(--icone-chevron) center / contain no-repeat; }
.l-abrir[aria-expanded="true"]::before { transform: rotate(-90deg); }
.l-abrir:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--borda-forte); color: var(--texto); }
.l-abrir[aria-expanded="true"], .l-abrir[aria-expanded="true"]:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--borda-campo); color: var(--texto); }
.vd-linha.sem-venda .l-topo { cursor: default; }
.sem-venda-texto { font-size: var(--t-3); color: var(--texto); }
.sem-venda-texto span { color: var(--texto-2); }
.vd-linha.sem-venda { border-style: dashed; box-shadow: none; }

/* prévia: as 6 que mais venderam */
.vd-previa { padding: 4px 16px 16px; border-top: 1px solid var(--linha-suave); }
.vd-previa .cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 12px 0 10px; }
.vd-previa h3 { margin: 0; font-size: var(--t-1); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.vd-previa .cabeca p { margin: 0; font-size: var(--t-2); color: var(--texto-2); }
.vd-previa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* grupos do fim */
.vd-grupo-fim { margin-top: var(--e-5); }
.vd-grupo-fim > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; padding: 0 17px; font-size: var(--t-1); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.vd-grupo-fim > h2 span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.vd-recolhido { background: var(--superficie); border: 1px dashed var(--borda-forte); border-radius: var(--r-3); }
.vd-recolhido > .vd-lista { padding: 0 8px 8px; }
.vd-fora-topo { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; border-radius: var(--r-3); cursor: pointer; color: var(--texto); font-size: var(--t-3); }
.vd-fora-topo:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.vd-fora-topo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.vd-fora-topo b { font-weight: 700; }
.vd-fora-topo .seta { justify-self: end; width: 14px; height: 14px; background: var(--texto-2); transform: rotate(90deg); transition: transform .15s;
  -webkit-mask: var(--icone-chevron) center / contain no-repeat; mask: var(--icone-chevron) center / contain no-repeat; }
.vd-fora-topo[aria-expanded="true"] .seta { transform: rotate(-90deg); background: var(--texto); }
.vd-fora-lista { list-style: none; margin: 0; padding: 0 16px 12px; }
/* F1-15: a coluna das miniaturas com largura fixa: "2 SKUs" e "sem venda" alinhados mesmo no grupo sem desenho */
.vd-fora-lista li { display: grid; grid-template-columns: minmax(160px, 1fr) 90px 120px 196px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linha-suave); font-size: var(--t-3); }
.vd-fora-lista .num { text-align: right; font-variant-numeric: tabular-nums; }
.vd-fora-lista .muted { font-size: var(--t-2); color: var(--texto-2); }
.vd-fora-lista .minis { display: flex; gap: 4px; justify-content: flex-end; }
.vd-fora-lista .vd-mini:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.vd-nota { margin: var(--e-6) 0 0; max-width: 900px; font-size: var(--t-2); line-height: 1.55; color: var(--texto-2); }
.vd-nota b { color: var(--texto); font-weight: 650; }

/* ------------------------------------------------ tabela equivalente (cabeçalho ordena). F1-1: sempre dentro da caixa
   com rolagem própria; a coluna Evento quebra linha. A página nunca rola de lado. */
.vd-tabela-caixa { max-width: 100%; overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.vd-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-3); font-variant-numeric: tabular-nums; }
.vd-tabela caption { caption-side: top; padding: 10px 14px 6px; text-align: left; font-size: var(--t-2); color: var(--texto-2); }
.vd-tabela th { padding: 0; text-align: left; white-space: nowrap; background: var(--superficie-2); border-bottom: 1px solid var(--linha); font-size: var(--t-2); font-weight: 650; color: var(--texto-2); }
.vd-tabela th.num { text-align: right; }
.vd-tabela th > span { display: block; padding: 8px 12px; }
.vd-ordena { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 34px; padding: 6px 12px; cursor: pointer; color: var(--texto-2); font-weight: 650; }
th.num .vd-ordena { justify-content: flex-end; }
.vd-ordena:hover:not(:disabled) { background: var(--superficie-3); color: var(--texto); }
.vd-ordena:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.vd-ordena .seta { min-width: 1ch; font-weight: 800; }
th[aria-sort="ascending"] .vd-ordena, th[aria-sort="descending"] .vd-ordena { color: var(--texto); background: var(--superficie-3); box-shadow: inset 0 -2px 0 var(--texto); }
.vd-tabela td { padding: 8px 12px; border-bottom: 1px solid var(--linha-suave); white-space: nowrap; }
.vd-tabela td.num { text-align: right; }
.vd-tabela td.evento { white-space: normal; min-width: 140px; }
.vd-tabela td.nome a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-3); font-weight: 700; color: var(--texto); text-decoration: none; }
.vd-tabela td.nome a:hover { text-decoration: underline; }
.vd-tabela tr:hover td { background: var(--superficie-2); }
.vd-tabela .p { color: var(--texto-2); font-style: italic; }

/* ------------------------------------------------ vitrine de peças. F1-2: cartão ≥ 168 px (6 por linha a 1440, 5 a 1280,
   4 a 1180, 2 no celular); a cor numa linha própria, antes do modelo; número e estoque sem reticências */
.vd-vitrine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.vd-peca { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 8px 8px 10px; border: 1px solid var(--linha); border-radius: var(--r-3); background: var(--superficie); color: var(--texto); cursor: pointer; font-size: var(--t-2); line-height: 1.35; transition: border-color .12s, box-shadow .12s; }
.vd-peca:hover:not(:disabled) { border-color: var(--borda-campo); box-shadow: var(--sombra-2); background: var(--superficie); color: var(--texto); }
.vd-peca:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.vd-peca.alvo { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto), var(--sombra-2); }
.vd-peca .moldura { display: block; aspect-ratio: 1; padding: 6px; background: var(--superficie-2); border: 1px solid var(--linha-suave); border-radius: 8px; overflow: hidden; }
.vd-peca .moldura img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vd-peca .moldura .sem { display: grid; place-items: center; height: 100%; font-size: var(--t-2); color: var(--texto-2); text-align: center; }
.vd-peca .rank { position: absolute; left: 14px; top: 14px; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--veu-claro); box-shadow: 0 0 0 1px var(--linha), var(--sombra-1); font-size: var(--t-2); font-weight: 750; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.vd-peca .cod { display: block; height: 16px; margin-top: 8px; font-size: var(--t-1); font-weight: 650; letter-spacing: .02em; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.vd-peca .cor { display: block; height: 18px; font-size: var(--t-3); font-weight: 750; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-peca .nm { display: block; height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-2); color: var(--texto-2); line-height: 17px; }
.vd-peca .num { display: block; min-height: 18px; margin-top: 4px; font-size: var(--t-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.vd-peca .num small { font-size: var(--t-2); font-weight: 500; color: var(--texto-2); white-space: nowrap; }
.vd-peca .sl { display: flex; align-items: center; min-height: 22px; margin-top: 6px; }
.vd-peca .est { display: block; min-height: 18px; margin-top: 4px; font-size: var(--t-2); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.vd-peca .est.zero { color: var(--texto); font-weight: 700; }

/* selo do arranque: três faixas (RV-5), palavra + barrinhas; o número fica na dica e no nome lido (F1-13) */
.arranque { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0 8px; border: 1px solid; border-radius: var(--r-pilula); font-size: var(--t-1); font-weight: 700; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sinal { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; flex: none; }
.sinal i { display: block; width: 3px; border-radius: 1px; background: currentColor; opacity: .25; }
.sinal i:nth-child(1) { height: 4px; } .sinal i:nth-child(2) { height: 7px; } .sinal i:nth-child(3) { height: 10px; }
.arranque.forte { background: var(--texto); border-color: var(--texto); color: var(--no-preto); }
.arranque.forte .sinal i { opacity: 1; }
.arranque.meio { background: var(--superficie); border-color: var(--borda-campo); color: var(--texto); }
.arranque.meio .sinal i:nth-child(-n+2) { opacity: 1; }
.arranque.fraco { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto-2); }
.arranque.fraco .sinal i:nth-child(1) { opacity: 1; }
.arranque.cedo { background: var(--superficie); border: 1px dashed var(--borda-campo); color: var(--texto-2); font-weight: 600; }
.vd-legenda-selo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 var(--e-3); font-size: var(--t-2); color: var(--texto-2); }
.vd-legenda-selo .arranque { flex: none; }

/* ------------------------------------------------ dica (hover e foco): cartão claro, não bloco preto */
.vd-dica { position: fixed; z-index: 40; max-width: 320px; padding: 9px 12px; border: 1px solid var(--borda-forte); border-radius: var(--r-2); background: var(--superficie); color: var(--texto); font-size: var(--t-2); line-height: 1.5; box-shadow: var(--sombra-3); pointer-events: none; white-space: pre-line; }

/* ------------------------------------------------ página da coleção */
.vd-migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vd-migalha a { color: var(--texto-2); }
.vd-col-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--e-4); margin-bottom: var(--e-4); }
.vd-col-topo h1 { display: flex; align-items: center; gap: 12px; margin: 6px 0 6px; overflow-wrap: anywhere; }
.vd-col-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.vd-col-acoes .vd-botao-claro { font-size: var(--t-4); padding: 0 16px; }
.vd-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); margin: 0 0 var(--e-5); padding: 0; list-style: none; }
.vd-numeros li { padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-1); min-width: 0; }
.vd-numeros li.vd-vazio { box-shadow: none; border-style: dashed; }
.vd-numeros .rot { display: block; font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.vd-numeros b { display: block; margin-top: 4px; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.vd-numeros li > span:not(.rot):not(.vd-parcial) { display: block; margin-top: 2px; font-size: var(--t-2); color: var(--texto-2); overflow-wrap: anywhere; }
.vd-secao { margin: 0 0 var(--e-6); }
.vd-secao > h2, .vd-secao-topo h2 { font-size: var(--t-1); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.vd-secao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.vd-secao-topo .controles { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.vd-estreia { padding: 16px 18px 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-1); }
.vd-estreia .frase { margin: 0 0 10px; font-size: var(--t-4); }
.vd-estreia figure { margin: 0; min-width: 0; }
.vd-estreia svg { display: block; width: 100%; height: auto; overflow: visible; }
.vd-vitrine-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 var(--e-2); }
.vd-vitrine-barra .vd-fim { margin-left: auto; font-size: var(--t-2); color: var(--texto-2); }
.vd-aviso-claro { margin: 0 0 var(--e-3); padding: 10px 14px; border: 1px solid var(--linha); border-left: 3px solid var(--borda-campo); border-radius: var(--r-2); background: var(--superficie); font-size: var(--t-3); color: var(--texto); }
.vd-mais { display: flex; justify-content: center; margin-top: var(--e-4); }
details.vd-ver-tabela { min-width: 0; }
details.vd-ver-tabela summary { display: inline-flex; align-items: center; min-height: 28px; margin-top: 6px; cursor: pointer; font-size: var(--t-2); font-weight: 650; color: var(--texto-2); border-radius: 6px; padding: 0 6px; }
details.vd-ver-tabela summary:hover { color: var(--texto); background: var(--superficie-3); }
details.vd-ver-tabela .vd-tabela-caixa { margin-top: 8px; }

/* ------------------------------------------------ painéis de outras fatias */
.vd-outra-fatia { padding: 28px 24px; text-align: center; background: var(--superficie); border: 1.5px dashed var(--borda-forte); border-radius: var(--r-3); color: var(--texto-2); }
.vd-outra-fatia strong { display: block; margin-bottom: 6px; color: var(--texto); font-family: var(--fonte-titulo); font-size: var(--t-5); }

/* ------------------------------------------------ até ~1365 px: a linha da lista mais estreita (cabe a 1280 sem rolar) */
@media (max-width: 1365px) {
  .vd-cab, .vd-linha .l-topo { grid-template-columns: 66px minmax(180px, 1.1fr) minmax(200px, 1.5fr) 110px 146px 40px; gap: 14px; }
  .l-spark { width: 110px; }
  .l-minis .vd-mini:nth-child(n+4) { display: none; }
}
@media (max-width: 1180px) {
  .vd-cab, .vd-linha .l-topo { grid-template-columns: 62px minmax(150px, 1.1fr) minmax(170px, 1.5fr) 104px 96px 40px; }
  .l-spark { width: 104px; }
  .l-minis .vd-mini:nth-child(n+3) { display: none; }
  .vd-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-noar-painel .grade { grid-template-columns: 1fr; }
}
/* de 901 a 1060 px a linha não cabe com o minigráfico: ele sai (fica na coleção) */
@media (min-width: 901px) and (max-width: 1060px) {
  .vd-cab, .vd-linha .l-topo { grid-template-columns: 62px minmax(140px, 1fr) minmax(150px, 1.4fr) 96px 40px; }
  .vd-cab > span:nth-child(4), .vd-linha .l-spark { display: none; }
}
/* ------------------------------------------------ celular (375 px): sem rolagem lateral */
@media (max-width: 900px) {
  .vd-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; }
  .vd-topo h1 { font-size: var(--t-7); }
  .vd-ano { padding-top: 14px; gap: 2px; }
  .vd-ano .ano { min-width: 4ch; font-size: var(--t-5); }
  .vd-ano button { width: 36px; }
  .vd-frase { font-size: var(--t-4); }
  .vd-abas { width: 100%; display: grid; grid-template-columns: repeat(4, auto); }
  .vd-abas [role="tab"] { min-height: 44px; padding: 0 6px; }
  .vd-noar-nome .fam { display: none; }
  .vd-seg button, .vd-chip, .vd-botao-claro, .l-abrir, .vd-noar-acoes button { min-height: 44px; }
  .vd-filtros { display: none; }
  .vd-folha .vd-filtros { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .vd-folha .vd-grupo { flex-wrap: wrap; }
  .vd-folha .vd-grupo .vd-rot { width: 100%; }
  .vd-folha .vd-seg { width: 100%; }
  .vd-folha .vd-seg button { flex: 1 1 0; padding: 0 6px; }
  .vd-folha select { flex: 1 1 auto; }
  .vd-folha #vd-direcao { flex: 1 1 100%; }
  .vd-folha .vd-familia > .vd-botao-claro { display: none; }
  .vd-folha .vd-pop { position: static; width: auto; padding: 0; border: 0; box-shadow: none; display: block !important; }
  .vd-folha .vd-pop .pe { display: none; }
  .vd-barra-celular { display: flex; gap: 8px; align-items: center; margin-bottom: var(--e-2); }
  .vd-abrir-filtros { display: inline-flex; flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-align: left; overflow: hidden; }
  .vd-abrir-filtros span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vd-linha-aviso .vd-seg { width: 100%; }
  .vd-linha-aviso .vd-seg button { flex: 1 1 0; }
  .vd-noar-cartoes { grid-template-columns: 1fr; }
  .vd-noar-cartao { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info info" "pecas acoes"; padding: 12px 12px 12px 14px; border-left-width: 5px; }
  .vd-noar-pecas { justify-content: flex-start; }
  .vd-noar-acoes { align-items: center; }
  .vd-noar-painel { padding: 14px; }
  .vd-cab { display: none; }
  .vd-linha .l-topo { grid-template-columns: 30px minmax(0, 1fr) auto 44px; gap: 8px 10px; padding: 12px;
    grid-template-areas: "pos nome nome abrir" "pos valor valor valor" "pos spark minis minis"; }
  .pos { grid-area: pos; align-self: start; padding-top: 2px; }
  .pos b { font-size: var(--t-6); }
  .l-nome { grid-area: nome; } .l-valor { grid-area: valor; } .l-spark { grid-area: spark; width: 104px; } .l-minis { grid-area: minis; }
  .l-abrir { grid-area: abrir; justify-self: end; width: 44px; }
  .l-minis .vd-mini { display: block; width: 40px; height: 40px; }
  .l-minis .vd-mini:nth-child(n+3) { display: block; }
  .l-minis .vd-mini:nth-child(n+4) { display: none; }
  .vd-previa { padding: 4px 12px 14px; }
  .vd-vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vd-previa-acoes > * { flex: 1 1 100%; }
  .vd-fora-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  .vd-fora-lista li .minis { grid-column: 1 / -1; justify-content: flex-start; }
  .vd-col-acoes { padding-top: 0; width: 100%; }
  .vd-col-acoes > * { flex: 1 1 auto; }
  /* F1-16: no celular, o "Comparar com a irmã" desligado não ocupa a 1ª fileira (a legenda já diz "sem irmã") */
  .vd-col-acoes [aria-disabled="true"] { display: none; }
  .vd-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vd-numeros b { font-size: var(--t-6); }
  .vd-vitrine-barra { gap: 10px; }
  .vd-vitrine-barra .vd-grupo { width: 100%; flex-wrap: wrap; }
  .vd-vitrine-barra .vd-seg { flex: 1 1 auto; }
  .vd-vitrine-barra .vd-seg button { flex: 1 1 0; }
  .vd-vitrine-barra select { flex: 1 1 auto; min-width: 0; }
  .vd-vitrine-barra .vd-fim { margin-left: 0; width: 100%; }
  .vd-secao-topo .controles { width: 100%; }
  .vd-secao-topo .controles .vd-seg { flex: 1 1 auto; }
  .vd-secao-topo .controles .vd-seg button { flex: 1 1 0; }
  .vd-vazio-noar { grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .vd-barra-celular { display: none; } }
@media (prefers-reduced-motion: reduce) { .vd-linha, .l-abrir::before, .vd-peca, .vd-mini, .vd-noar-cartao { transition: none; } }
@media (forced-colors: active) {
  .vd-barra .cheia, .sinal i, .ponto { forced-color-adjust: none; }
  .vd-barra .cheia { background: CanvasText; }
  .vd-seg button[aria-pressed="true"], .vd-abas [role="tab"][aria-selected="true"], .vd-chip[aria-pressed="true"] { outline: 2px solid Highlight; }
}
@media print {
  .sidebar, .vd-filtros, .vd-barra-celular, .vd-noar-acoes, .l-abrir { display: none !important; }
  body { display: block; background: #fff; }
}