/* Vendas · Picos de venda — mapa de calor hora a hora. CSS próprio (não em components.css). */
.vpk-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.vpk-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
            background: #fff; border: 1px solid var(--line, #ece3d8); border-radius: 10px;
            padding: 10px 13px; cursor: pointer; font: inherit; }
.vpk-item:hover { border-color: var(--chocolate, #c75d2c); }
.vpk-item.on { border-color: var(--chocolate, #c75d2c); background: #fffaf7; }
.vpk-sku { flex: 1; min-width: 0; }
.vpk-sku b { font-size: 14px; }
.vpk-sub { display: block; font-size: 11px; color: #9a9088; margin-top: 2px; font-weight: 400; }
.vpk-pico { text-align: right; min-width: 128px; }
.vpk-pico b { font-size: 15px; }
.vpk-pico.grave b { color: var(--danger, #c0532a); }
.vpk-x { text-align: right; min-width: 76px; font-size: 15px; font-weight: 600; color: #6b7280; }
.vpk-x.grave { color: var(--danger, #c0532a); }
.vpk-dica { margin-top: 12px; font-size: 12px; color: #9a9088; }
.vpk-mapa { margin-top: 16px; border-top: 1px solid var(--line, #ece3d8); padding-top: 12px; }
.vpk-mapa-h { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #9a9088; margin-bottom: 8px; }
.vpk-scroll { overflow-x: auto; }
.vpk-mapa table { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; }
.vpk-mapa th { font-weight: 600; color: #9a9088; font-size: 10.5px; padding: 2px 4px; }
.vpk-mapa th.vpk-d { text-align: right; padding-right: 8px; white-space: nowrap; }
.vpk-mapa td { width: 30px; height: 26px; text-align: center; border-radius: 5px; color: #6b4a38; }
.vpk-c { font-weight: 600; cursor: default; }