/* ==========================================================================
   Tela Produtos por PDV (/produto-servico/pdv, XWM-132)

   Três colunas: PDV › Grupos › Produtos. A coluna do PDV recolhe num trilho de
   siglas; o JS põe no #ppv o modo pela largura da tela:
     larga   (≥ 1360 px)   três colunas, o PDV aberto e recolhível;
     media   (768–1359)    abre no trilho, a lista do PDV abre POR CIMA;
     celular (< 768)       uma coluna por vez, com as etapas no topo.

   A identidade das caixas é a .xn-superficie (superficie.css); aqui fica só o
   encaixe. Tudo escopado em .ppv: uma classe simples com fundo aqui colidiria
   com outra folha (PadraoDeSuperficieTest).
   ========================================================================== */

.ppv .ppv-largura {
	max-width: 1400px;
	margin-inline: auto;
}

.ppv .ppv-cabecalho {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--occ-space-2) var(--occ-space-4);
}

.ppv .ppv-subtitulo {
	margin: 0;
	color: var(--occ-ink-soft);
	font-size: 13px;
}

/* --- As colunas -------------------------------------------------------- */

.ppv .ppv-cols {
	/* As listas ocupam a altura que sobra na tela, sem deixar o Salvar fora dela. */
	--ppv-altura: clamp(280px, calc(100vh - 370px), 680px);
	display: grid;
	gap: var(--occ-space-4);
	align-items: start;
	position: relative;
}

.ppv .ppv-cols[data-pdv="aberto"] {
	grid-template-columns: 270px 310px minmax(0, 1fr);
}

.ppv .ppv-cols[data-pdv="trilho"],
.ppv .ppv-cols[data-pdv="sobreposto"] {
	grid-template-columns: 64px 310px minmax(0, 1fr);
}

.ppv[data-modo="media"] .ppv-cols[data-pdv="trilho"],
.ppv[data-modo="media"] .ppv-cols[data-pdv="sobreposto"] {
	grid-template-columns: 64px 230px minmax(0, 1fr);
}

.ppv .ppv-cols[data-pdv="trilho"] > .ppv-p1 {
	display: none;
}

/* Notebook e tablet: a lista do PDV abre por cima das colunas, sem empurrá-las. */
.ppv .ppv-cols[data-pdv="sobreposto"] > .ppv-p1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	z-index: 7;
	box-shadow: var(--occ-shadow-lg);
}

.ppv .ppv-scrim {
	position: absolute;
	inset: -6px;
	z-index: 6;
	padding: 0;
	border: 0;
	border-radius: calc(var(--occ-radius) + 2px);
	background: rgba(15, 23, 42, .22);
	cursor: pointer;
}

[data-color-theme="dark"] .ppv .ppv-scrim {
	background: rgba(0, 0, 0, .42);
}

.ppv[data-modo="celular"] .ppv-cols {
	grid-template-columns: minmax(0, 1fr);
}

.ppv[data-modo="celular"] .ppv-cols > .ppv-painel {
	display: none;
}

.ppv[data-modo="celular"] .ppv-cols[data-passo="pdv"] > .ppv-p1,
.ppv[data-modo="celular"] .ppv-cols[data-passo="grupos"] > .ppv-p2,
.ppv[data-modo="celular"] .ppv-cols[data-passo="produtos"] > .ppv-p3 {
	display: flex;
}

/* --- Painel ------------------------------------------------------------ */

.ppv .ppv-painel {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ppv .ppv-ph {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--occ-line);
}

.ppv .ppv-ph h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.ppv .ppv-step {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: none;
	font-size: 12px;
	font-weight: 700;
	color: var(--occ-accent);
	background: var(--occ-accent-soft);
}

.ppv .ppv-meta {
	margin-left: auto;
	color: var(--occ-ink-soft);
	font-size: 12px;
	white-space: nowrap;
}

.ppv .ppv-ico {
	margin-left: auto;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--occ-radius-xs);
	color: var(--occ-ink-soft);
	background: transparent;
	cursor: pointer;
}

.ppv .ppv-ico:hover,
.ppv .ppv-ico:focus-visible {
	color: var(--occ-ink);
	background: var(--occ-surface-2);
}

.ppv .ppv-lista {
	max-height: var(--ppv-altura);
	overflow-y: auto;
	padding: 8px;
}

.ppv .ppv-pf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--occ-line);
}

.ppv .ppv-bq {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--occ-radius-xs);
	font-size: 13px;
	font-weight: 500;
	color: var(--occ-ink-soft);
	background: transparent;
	cursor: pointer;
}

.ppv .ppv-bq:hover:not(:disabled) {
	color: var(--occ-ink);
	background: var(--occ-surface-2);
}

.ppv .ppv-bq:disabled {
	opacity: .45;
	cursor: default;
}

.ppv .ppv-ver-produtos {
	margin-left: auto;
}

/* --- A sigla do PDV ------------------------------------------------------
   A mesma nas três posições (lista aberta, trilho, título de Produtos): quem
   aprende "BP" na lista reconhece no trilho. Tracejada = o PDV não vende nada. */

.ppv .ppv-mono {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	flex: none;
	border: 1px solid var(--occ-glass-bd);
	border-radius: var(--occ-radius-sm);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--occ-ink-soft);
	background: var(--occ-surface-2);
	transition: background .12s, border-color .12s, color .12s;
}

.ppv .ppv-mono.ppv-vazio-pdv {
	border-style: dashed;
	border-color: var(--occ-line-strong);
}

/* --- Lista aberta de PDVs -------------------------------------------- */

.ppv .ppv-pdv {
	width: 100%;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border: 1px solid transparent;
	border-radius: var(--occ-radius-sm);
	font: inherit;
	text-align: left;
	color: var(--occ-ink);
	background: transparent;
	cursor: pointer;
}

.ppv .ppv-pdv:hover {
	background: var(--occ-surface-2);
}

/* Foco de teclado na cor da marca, não o anel branco do navegador. */
.ppv .ppv-pdv:focus-visible,
.ppv .ppv-rv:focus-visible,
.ppv .ppv-etapa:focus-visible,
.ppv .ppv-bq:focus-visible,
.ppv .ppv-ico:focus-visible,
.ppv .ppv-exp:focus-visible {
	outline: 2px solid var(--occ-accent);
	outline-offset: 1px;
}

.ppv .ppv-pdv[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--occ-accent) 40%, transparent);
	background: var(--occ-accent-soft);
}

.ppv .ppv-pdv .ppv-mono {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	font-size: 12px;
}

.ppv .ppv-pdv[aria-pressed="true"] .ppv-mono,
.ppv .ppv-rv[aria-pressed="true"] .ppv-mono {
	color: var(--occ-surface);
	border-color: var(--occ-accent);
	background: var(--occ-accent);
}

.ppv .ppv-pdv-nome {
	flex: 1;
	min-width: 0;
	font-weight: 500;
}

.ppv .ppv-pill {
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--occ-ink-soft);
	background: var(--occ-surface-2);
}

.ppv .ppv-pill.ppv-pill-ac {
	color: var(--occ-accent);
	background: var(--occ-accent-soft);
}

/* --- Trilho ------------------------------------------------------------ */

.ppv .ppv-trilho {
	align-self: stretch;
	min-height: 520px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
}

.ppv .ppv-exp {
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--occ-radius-sm);
	color: var(--occ-ink-soft);
	background: transparent;
	cursor: pointer;
}

.ppv .ppv-exp:hover,
.ppv .ppv-exp:focus-visible {
	color: var(--occ-ink);
	background: var(--occ-surface-2);
}

.ppv .ppv-rsep {
	width: 32px;
	height: 1px;
	flex: none;
	margin: 4px 0 6px;
	background: var(--occ-line-strong);
}

.ppv .ppv-rl {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.ppv .ppv-rv {
	position: relative;
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
}

.ppv .ppv-rv:hover .ppv-mono,
.ppv .ppv-rv:focus-visible .ppv-mono {
	border-color: color-mix(in srgb, var(--occ-accent) 40%, transparent);
	color: var(--occ-ink);
}

.ppv .ppv-rv[aria-pressed="true"]:hover .ppv-mono {
	color: var(--occ-surface);
}

/* Ponto âmbar: o PDV aberto tem alteração que ainda não foi salva. */
.ppv .ppv-pendente {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 11px;
	height: 11px;
	border: 2px solid var(--occ-surface);
	border-radius: 50%;
	background: var(--occ-warn);
}

/* Dica do trilho no estilo da dica do Rack (.occ-pop, occupancy-table.css): a superfície do sistema,
   não o balão branco do Bootstrap. O tooltip vai para o <body>, por isso não fica sob o .ppv. */
/* A seta pinta com --tooltip-bg (Limitless, sem o prefixo bs-): a mesma superfície da caixa. O seletor
   é longo para vencer o do tema escuro do bootstrap_limitless.css, que põe a seta branca. */
html .tooltip.ppv-tooltip:not([data-color-theme]) {
	--tooltip-opacity: 1;
	--tooltip-bg: var(--occ-surface);
}

.ppv-tooltip .tooltip-inner {
	max-width: 240px;
	padding: 7px 11px;
	text-align: left;
	font-size: 13px;
	color: var(--occ-ink);
	background: var(--occ-surface);
	border: 1px solid var(--occ-line-strong);
	border-radius: var(--occ-radius-sm);
	box-shadow: var(--occ-shadow);
}

.ppv-tooltip .ppv-dica-nome {
	display: block;
	font-weight: 600;
}

.ppv-tooltip .ppv-dica-sub {
	display: block;
	font-size: 12px;
	color: var(--occ-ink-soft);
}

/* --- Grupos ------------------------------------------------------------ */

.ppv .ppv-grupo {
	position: relative;
	min-height: 40px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--occ-radius-sm);
}

.ppv .ppv-grupo:hover {
	background: var(--occ-surface-2);
}

.ppv .ppv-grupo label {
	flex: 1;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

/* A caixa de marcar ocupa a linha inteira: o clique em qualquer ponto dela marca. */
.ppv .ppv-grupo label::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* A caixa é a .form-check-input do sistema (cor da marca em campo.css); aqui só o tamanho. */
.ppv .ppv-check {
	width: 18px;
	height: 18px;
	flex: none;
	margin: 0;
	cursor: pointer;
}

.ppv .ppv-tag {
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.ppv .ppv-tag-novo {
	color: var(--occ-accent);
	background: var(--occ-accent-soft);
}

.ppv .ppv-tag-sai {
	color: var(--occ-warn);
	background: var(--occ-warn-soft);
}

/* --- Produtos ---------------------------------------------------------- */

.ppv .ppv-ctx {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	padding: 3px 10px 3px 4px;
	border-radius: 99px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--occ-accent);
	background: var(--occ-accent-soft);
}

.ppv .ppv-ctx .ppv-mono {
	width: 22px;
	height: 22px;
	border-radius: 7px;
	font-size: 9.5px;
	color: var(--occ-surface);
	border-color: var(--occ-accent);
	background: var(--occ-accent);
}

/* Nome de PDV comprido corta com reticências em vez de empurrar o filtro para fora do painel. */
.ppv .ppv-ctx-nome {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ppv .ppv-filtro {
	position: relative;
	flex: 1;
	min-width: 180px;
	max-width: 320px;
}

.ppv .ppv-filtro > i {
	position: absolute;
	top: 50%;
	left: 11px;
	transform: translateY(-50%);
	color: var(--occ-ink-soft);
	pointer-events: none;
}

.ppv .ppv-filtro .form-control {
	padding-left: 34px;
}

.ppv .ppv-tbl {
	overflow-x: auto;
}

/* Título de coluna sempre ao centro; só o dado segue o tipo (código à esquerda, valor à direita). */
.ppv .ppv-gh,
.ppv .ppv-linha {
	display: grid;
	grid-template-columns: 76px 78px minmax(180px, 1fr) 170px 104px 96px;
	align-items: center;
	min-width: 704px;
}

.ppv .ppv-gh {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--occ-ink-soft);
	background: var(--occ-surface-2);
}

.ppv .ppv-gh > div {
	padding: 11px 10px;
	text-align: center;
}

.ppv .ppv-prods {
	max-height: calc(var(--ppv-altura) - 42px);
	overflow-y: auto;
}

.ppv .ppv-linha {
	border-bottom: 1px solid var(--occ-line);
}

.ppv .ppv-linha > div {
	min-width: 0;
	padding: 9px 10px;
}

.ppv .ppv-linha .ppv-c {
	display: flex;
	justify-content: center;
}

.ppv .ppv-linha .ppv-cod {
	color: var(--occ-ink-soft);
	font-variant-numeric: tabular-nums;
}

.ppv .ppv-linha .ppv-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ppv .ppv-linha .ppv-sem-valor {
	color: var(--occ-ink-faint);
}

.ppv .ppv-linha .ppv-gp {
	font-size: 13px;
	color: var(--occ-ink-soft);
}

.ppv .ppv-linha label {
	margin: 0;
	cursor: pointer;
}

.ppv .ppv-linha.ppv-novo {
	background: linear-gradient(90deg, var(--occ-accent-soft), transparent 60%);
}

.ppv .ppv-linha.ppv-sai {
	background: linear-gradient(90deg, var(--occ-warn-soft), transparent 60%);
}

.ppv .ppv-linha.ppv-sai .ppv-nome-produto {
	text-decoration: line-through;
	text-decoration-color: var(--occ-warn);
}

.ppv .ppv-sub {
	display: none;
	font-size: 12px;
	color: var(--occ-ink-soft);
}

.ppv .ppv-tag-movel {
	display: none;
}

.ppv .ppv-vazio {
	padding: 56px 24px;
	text-align: center;
	color: var(--occ-ink-soft);
}

.ppv .ppv-vazio strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	color: var(--occ-ink);
}

/* Notebook e tablet: código e grupo descem para baixo do nome, e a grade cabe sem rolar de lado. */
.ppv[data-modo="media"] .ppv-gh,
.ppv[data-modo="media"] .ppv-linha {
	grid-template-columns: 76px minmax(120px, 1fr) 96px 96px;
	min-width: 0;
}

.ppv[data-modo="media"] .ppv-k-cod,
.ppv[data-modo="media"] .ppv-k-grp,
.ppv[data-modo="celular"] .ppv-k-cod,
.ppv[data-modo="celular"] .ppv-k-grp,
.ppv[data-modo="celular"] .ppv-k-sit {
	display: none;
}

.ppv[data-modo="media"] .ppv-sub,
.ppv[data-modo="celular"] .ppv-sub {
	display: block;
}

/* --- Celular ----------------------------------------------------------- */

.ppv .ppv-etapas {
	position: sticky;
	top: 0;
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	padding: 8px 0 10px;
	background: var(--occ-bg);
}

.ppv .ppv-etapa {
	min-width: 0;
	min-height: 52px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--occ-glass-bd);
	border-radius: var(--occ-radius-sm);
	font: inherit;
	text-align: left;
	color: var(--occ-ink);
	background: var(--occ-surface);
	cursor: pointer;
}

.ppv .ppv-etapa[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--occ-accent) 40%, transparent);
	background: var(--occ-accent-soft);
}

.ppv .ppv-etapa-tx {
	min-width: 0;
}

.ppv .ppv-etapa b {
	display: block;
	font-size: 13px;
	font-weight: 600;
}

.ppv .ppv-etapa small {
	display: block;
	overflow: hidden;
	font-size: 11px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--occ-ink-soft);
}

.ppv[data-modo="celular"] .ppv-subtitulo,
.ppv[data-modo="celular"] .ppv-ico {
	display: none;
}

.ppv[data-modo="celular"] .ppv-lista,
.ppv[data-modo="celular"] .ppv-prods {
	max-height: none;
}

.ppv[data-modo="celular"] .ppv-grupo {
	min-height: 48px;
}

.ppv[data-modo="celular"] .ppv-filtro {
	order: 5;
	flex-basis: 100%;
	max-width: none;
}

.ppv[data-modo="celular"] .ppv-gh {
	display: none;
}

.ppv[data-modo="celular"] .ppv-linha {
	grid-template-columns: 48px minmax(0, 1fr) auto;
	min-width: 0;
}

.ppv[data-modo="celular"] .ppv-linha > div {
	padding: 8px 6px;
}

/* Toque: a área de marcar tem 44 px, não os 18 da caixa. */
.ppv[data-modo="celular"] .ppv-linha .ppv-c label {
	min-width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
}

.ppv[data-modo="celular"] .ppv-tag-movel {
	display: inline-block;
	margin-top: 4px;
}

/* --- Barra do Salvar ---------------------------------------------------- */

.ppv .ppv-formbar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin: var(--occ-space-4) 0 var(--occ-space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
}

.ppv .ppv-fb-txt {
	color: var(--occ-ink-soft);
}

.ppv .ppv-fb-txt strong {
	color: var(--occ-ink);
}

.ppv .ppv-fb-ponto {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--occ-warn);
}

.ppv .ppv-fb-acoes {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

.ppv[data-modo="celular"] .ppv-formbar {
	padding: 10px 12px;
	gap: 8px;
}

.ppv[data-modo="celular"] .ppv-fb-acoes {
	width: 100%;
	margin-left: 0;
}

.ppv[data-modo="celular"] .ppv-fb-acoes .btn {
	flex: 1;
	min-height: 44px;
}