/*
 * Faixa de consentimento.
 *
 * Vai para o site do cliente, não para o admin: a paleta é neutra de propósito
 * — preto, branco e cinza — para conviver com qualquer identidade. A família
 * tipográfica é herdada do site pela mesma razão.
 *
 * Tudo aqui nasce escondido e é o JavaScript que decide o que aparece, porque
 * a escolha mora no navegador do visitante. Nenhuma regra depende de estado
 * gravado no servidor.
 */

.pcon,
.pcon-reabrir {
	--pcon-escuro: #111827;
	--pcon-tinta: #1f2937;
	--pcon-tinta-2: #4b5563;
	--pcon-borda: #e5e7eb;
	--pcon-papel: #ffffff;

	box-sizing: border-box;
	font-family: inherit;
}

.pcon *,
.pcon *::before,
.pcon *::after {
	box-sizing: border-box;
}

/* O atributo `hidden` precisa vencer o display das nossas próprias classes. */
.pcon[hidden],
.pcon-reabrir[hidden] {
	display: none !important;
}

.pcon {
	position: fixed;
	z-index: 99999;
	display: block;
	inset: auto 0 0 0;
	padding: 16px;
}

.pcon[data-posicao="canto"] {
	inset: auto auto 0 0;
	max-width: min(420px, 100%);
}

.pcon__caixa {
	max-width: 1120px;
	margin: 0 auto;
	padding: 20px 22px;
	border: 1px solid var(--pcon-borda);
	border-radius: 14px;
	background: var(--pcon-papel);
	color: var(--pcon-tinta);
	box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
}

.pcon__caixa:focus {
	outline: none;
}

.pcon[data-posicao="canto"] .pcon__caixa {
	display: block;
}

.pcon__aviso {
	flex: 1 1 34ch;
	min-width: 0;
}

.pcon__titulo {
	margin: 0 0 6px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pcon-tinta);
}

.pcon__texto {
	margin: 0;
	max-width: 76ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--pcon-tinta-2);
}

.pcon__link-politica {
	color: var(--pcon-tinta);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pcon__acoes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.pcon[data-posicao="canto"] .pcon__acoes {
	margin-top: 16px;
}

/* Aceitar e recusar têm o mesmo tamanho e o mesmo lugar na fila: recusar não
   pode custar mais esforço que aceitar. */
.pcon__botao {
	flex: 0 0 auto;
	min-width: 116px;
	padding: 11px 20px;
	border: 1px solid var(--pcon-escuro);
	border-radius: 9px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity 0.16s ease, background 0.16s ease;
}

.pcon__botao--escuro {
	background: var(--pcon-escuro);
	color: #fff;
}

.pcon__botao--claro {
	background: var(--pcon-papel);
	color: var(--pcon-escuro);
}

.pcon__botao:hover {
	opacity: 0.86;
}

.pcon__botao:focus-visible,
.pcon__texto-botao:focus-visible,
.pcon__chave:focus-visible,
.pcon-reabrir:focus-visible {
	outline: 2px solid var(--pcon-escuro);
	outline-offset: 2px;
}

.pcon__texto-botao {
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--pcon-tinta-2);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.pcon__preferencias {
	flex: 1 1 100%;
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--pcon-borda);
}

.pcon__preferencias[hidden] {
	display: none;
}

.pcon__categoria {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--pcon-borda);
}

.pcon__categoria-texto {
	min-width: 0;
}

.pcon__categoria-nome {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pcon-tinta);
}

.pcon__categoria-descricao {
	margin: 4px 0 0;
	max-width: 82ch;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pcon-tinta-2);
}

.pcon__quem {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7280;
}

.pcon__sempre {
	flex: 0 0 auto;
	padding: 5px 10px;
	border-radius: 999px;
	background: #f3f4f6;
	color: #6b7280;
	font-size: 11.5px;
	font-weight: 600;
}

.pcon__chave {
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	cursor: pointer;
}

.pcon__chave-trilho {
	position: relative;
	display: block;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: #d1d5db;
	transition: background 0.16s ease;
}

.pcon__chave-bola {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
	transition: transform 0.16s ease;
}

.pcon__chave[aria-checked="true"] .pcon__chave-trilho {
	background: var(--pcon-escuro);
}

.pcon__chave[aria-checked="true"] .pcon__chave-bola {
	transform: translateX(18px);
}

.pcon__preferencias-acoes {
	display: flex;
	justify-content: flex-end;
	padding-top: 16px;
}

/*
 * O botão de voltar atrás, e a conta do rodapé.
 *
 * Ele é `position: fixed` no pé da janela, que é exatamente onde os sites
 * põem barra de ação fixa e botão de WhatsApp. No VitaTags isso foi medido:
 * a barra do vTag no celular tem ~60 px de altura e z-index 20, e este botão
 * ocupava de 16 px a 50 px do fundo com z-index 99998 — ou seja, ficava EM
 * CIMA do alvo de toque do "Agendar", que é a ação mais valiosa da página.
 *
 * Daí as duas saídas: o lado é escolhido no painel, e a altura aceita um
 * empurrão de fora por `--pcon-reabrir-desvio`.
 *
 * O padrão do desvio mora dentro do `var()`, e não como declaração aqui, de
 * propósito: declarada nesta regra, ela venceria a variável que o tema
 * definisse em `:root` e o empurrão nunca chegaria. No `var()` ela é só o
 * valor de quando ninguém empurra. Assim o tema pode reservar o espaço só
 * onde precisa — no VitaTags, apenas dentro da media query em que a barra
 * fixa existe — em vez de afastar o botão em toda tela.
 */
.pcon-reabrir {
	position: fixed;
	left: 16px;
	bottom: calc(16px + var(--pcon-reabrir-desvio, 0px));
	z-index: 99998;
	padding: 9px 14px;
	border: 1px solid var(--pcon-borda);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--pcon-tinta-2);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
	backdrop-filter: blur(6px);
	transition: color 0.16s ease, border-color 0.16s ease;
}

.pcon-reabrir:hover {
	color: var(--pcon-escuro);
	border-color: #cbd5e1;
}

/*
 * O lado. A marcação sempre traz um dos dois modificadores; `left` continua
 * na regra de cima para o caso de um HTML antigo em cache chegar sem classe
 * nenhuma — sem lado, o botão sairia do canto e ficaria colado no conteúdo.
 */
.pcon-reabrir--direita {
	left: auto;
	right: 16px;
}

.pcon-abrir-texto {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

@media (max-width: 640px) {
	.pcon {
		padding: 10px;
	}

	.pcon__caixa {
		padding: 18px;
	}

	.pcon__acoes {
		width: 100%;
	}

	.pcon__botao {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcon *,
	.pcon-reabrir {
		transition-duration: 0.01ms !important;
	}
}