/*
 * Vale Verde Portaria — fundação visual.
 *
 * Paleta da marca:
 *   verde escuro #133D37  → cabeçalhos, botões principais, superfícies escuras
 *   dourado      #C99B45  → destaques, filetes, foco
 *
 * As cores de STATUS (liberado / recusado / atenção) são semânticas e propositalmente
 * distintas da marca: numa portaria o operador precisa reconhecer o resultado pela cor
 * em menos de um segundo, e o verde da marca é escuro demais para esse papel.
 *
 * Escala tipográfica MODERADA: nada de números gigantes fora do placar. Títulos vão de
 * h1 (22px) a h4 (14px), com pesos e cores marcando a hierarquia em vez do tamanho.
 *
 * Tudo escopado em .vvp-* para não vazar para o tema nem para o Elementor.
 */

.vvp-app {
	/* ---- Marca ---- */
	--vvp-marca: #133D37;
	--vvp-marca-2: #0d2b27;
	--vvp-marca-3: #1c534b;
	--vvp-marca-suave: #eef3f1;
	--vvp-ouro: #C99B45;
	--vvp-ouro-2: #a87e2f;
	--vvp-ouro-suave: #faf3e6;

	/* ---- Status ---- */
	--vvp-ok: #1E7A4F;
	--vvp-ok-suave: #e8f5ee;
	--vvp-erro: #B3261E;
	--vvp-erro-suave: #fdecea;
	--vvp-alerta: #8a6210;
	--vvp-alerta-suave: #fdf4e3;

	/* ---- Neutros ---- */
	--vvp-texto: #17211f;
	--vvp-texto-2: #5c6a67;
	--vvp-texto-3: #889693;
	--vvp-borda: #e1e7e5;
	--vvp-borda-2: #cbd5d2;
	--vvp-fundo: #f5f8f7;
	--vvp-superficie: #ffffff;

	/*
	 * Par de hover declarado em VARIÁVEL, nunca solto.
	 * Antes o hover fixava `color: var(--vvp-texto-forte)` — que no tema escuro é verde
	 * escuro sobre fundo verde escuro, e o texto sumia. Com o par vinculado ao
	 * tema, fundo e texto mudam juntos e o contraste nunca quebra.
	 */
	--vvp-hover-fundo: #eef3f1;
	--vvp-hover-texto: #133D37;

	/*
	 * Cor de TEXTO em destaque (números de KPI, valores, rótulos fortes).
	 *
	 * Separada de --vvp-marca de propósito: aquela é cor de FUNDO e não muda no
	 * tema escuro (senão os cabeçalhos de tabela e o placar perderiam a base).
	 * Usar --vvp-marca para texto deixava número verde escuro sobre card verde
	 * escuro — invisível. Este token acompanha o tema.
	 */
	--vvp-texto-forte: #133D37;

	/* ---- Escala tipográfica (moderada) ---- */
	--vvp-t-xs: 11.5px;
	--vvp-t-sm: 13px;
	--vvp-t-base: 15px;
	--vvp-t-md: 16px;
	--vvp-t-lg: 18px;
	--vvp-t-xl: 22px;

	/* ---- Espaçamento ---- */
	/*
	 * Margem da página. Cresce com a tela: no celular cada pixel de largura
	 * conta, no iPad e no desktop sobra espaço e o conteúdo colado na borda
	 * fica sufocado. Redefinida nas media queries lá embaixo.
	 */
	--vvp-margem: 16px;

	--vvp-e1: 4px;
	--vvp-e2: 8px;
	--vvp-e3: 12px;
	--vvp-e4: 16px;
	--vvp-e5: 24px;
	--vvp-e6: 32px;

	/* ---- Forma ---- */
	--vvp-raio: 10px;
	--vvp-raio-sm: 8px;
	--vvp-raio-lg: 14px;
	--vvp-sombra: 0 1px 2px rgba(19, 61, 55, .05), 0 2px 10px rgba(19, 61, 55, .05);
	--vvp-sombra-alta: 0 10px 34px rgba(19, 61, 55, .18);
	--vvp-toque: 48px;

	/*
	 * Pilha do sistema: no iPad cai no San Francisco, a fonte nativa do iOS.
	 * Uma ferramenta operacional fica mais legível e mais "app" com ela do que
	 * com a fonte decorativa do tema — e não há webfont para baixar.
	 */
	--vvp-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	box-sizing: border-box;
	width: 100%;
	/*
	 * Ocupa a largura toda e trava em 1280px. O FUNDO, esse sim, cobre a janela
	 * inteira (ver a regra de .vvp-corpo mais abaixo) — o limite aqui é só para
	 * o conteúdo, para as linhas de texto não ficarem longas demais.
	 */
	/*
	 * O conteúdo continua travado em 1280px; a margem lateral vem POR FORA
	 * desse limite (por isso o calc), então a leitura não fica mais estreita
	 * por causa do respiro.
	 */
	max-width: calc(1280px + var(--vvp-margem) * 2);
	margin: 0 auto;
	/*
	 * Respiro em volta de tudo. Antes o recuo lateral era zero e no iPad o
	 * cabeçalho, a barra e as tabelas encostavam nas bordas da tela.
	 * env(safe-area-*) soma por cima, protegendo do notch e da barra de gestos
	 * quando a página é aberta em tela cheia pelo "Adicionar à Tela de Início".
	 */
	padding:
		var(--vvp-margem)
		calc(var(--vvp-margem) + env(safe-area-inset-right))
		calc(var(--vvp-e6) + env(safe-area-inset-bottom))
		calc(var(--vvp-margem) + env(safe-area-inset-left));
	color: var(--vvp-texto);
	font-family: var(--vvp-fonte);
	font-size: var(--vvp-t-base);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* box-sizing e contenção de largura em TUDO: nada transborda da caixa. */
.vvp-app *,
.vvp-app *::before,
.vvp-app *::after {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

/*
 * O atributo hidden TEM de vencer.
 *
 * Sem isto, qualquer regra de classe com `display:` (flex, grid, inline-flex…)
 * sobrescreve o `[hidden]` do navegador — as duas têm a mesma especificidade e a
 * do autor ganha. Foi exatamente o que fazia o selo "SEM INTERNET" e a caixa de
 * aviso vazia aparecerem para sempre, por mais que o JavaScript os escondesse.
 */
.vvp-app [hidden],
.vvp-app[hidden] {
	display: none !important;
}

/* Texto longo (e-mail, resposta de formulário, nome comprido) quebra em vez de vazar. */
.vvp-app p,
.vvp-app dd,
.vvp-app dt,
.vvp-app li,
.vvp-app td,
.vvp-app th,
.vvp-app h1,
.vvp-app h2,
.vvp-app h3,
.vvp-app h4,
.vvp-app code {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* =========================================================================
 * Tipografia
 * ========================================================================= */

/*
 * O tema do site também estiliza h1–h4, e no Elementor esses seletores costumam
 * ter especificidade igual ou maior que a nossa (ex.: `.elementor-kit-9 h2`).
 * Era por isso que o título "ENTRADA LIBERADA" saía em serifada escura dentro
 * de uma faixa colorida: a fonte e a cor do tema venciam. Aqui a família é
 * imposta; a cor fica sem !important porque cada card define a sua logo abaixo.
 */
.vvp-app h1,
.vvp-app h2,
.vvp-app h3,
.vvp-app h4 {
	margin: 0;
	font-family: var(--vvp-fonte) !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--vvp-texto);
}

.vvp-app h1 { font-size: var(--vvp-t-xl); }
.vvp-app h2 { font-size: var(--vvp-t-lg); }
.vvp-app h3 { font-size: var(--vvp-t-md); }
.vvp-app h4 { font-size: var(--vvp-t-base); }

.vvp-app p { margin: 0 0 var(--vvp-e3); }
.vvp-app p:last-child { margin-bottom: 0; }

.vvp-nota {
	margin: 0 0 var(--vvp-e3);
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
	line-height: 1.55;
}

.vvp-app code {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--vvp-marca-suave);
	font-size: .92em;
}

/* =========================================================================
 * Cabeçalho de marca
 * ========================================================================= */

.vvp-cabecalho {
	/*
	 * Grade, não flex-wrap: em iPad retrato o wrap jogava os botões para uma
	 * segunda linha colados à esquerda, desalinhados do resto. Com grade o
	 * arranjo é declarado — marca à esquerda, menu ao centro, ações à direita —
	 * e em telas estreitas o menu desce inteiro para a linha de baixo.
	 */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas: "marca nav acoes";
	gap: var(--vvp-e3) var(--vvp-e4);
	align-items: center;
	padding: var(--vvp-e4) var(--vvp-e5);
	/* Respiro maior depois do cabeçalho: é a divisão mais forte da página. */
	margin-bottom: var(--vvp-e5);
	border-radius: var(--vvp-raio-lg);
	border-bottom: 3px solid var(--vvp-ouro);
	background: linear-gradient(135deg, var(--vvp-marca) 0%, var(--vvp-marca-3) 100%);
	color: #fff;
	box-shadow: var(--vvp-sombra);
}

.vvp-cabecalho h1 { color: #fff; font-size: var(--vvp-t-lg); }

.vvp-cabecalho__sub {
	margin: 2px 0 0;
	font-size: var(--vvp-t-sm);
	color: rgba(255, 255, 255, .75);
}

.vvp-cabecalho__marca {
	grid-area: marca;
	display: flex;
	align-items: center;
	gap: var(--vvp-e3);
	min-width: 0;
}

/* Selo com as iniciais — âncora visual da marca, em ouro sobre o verde. */
.vvp-cabecalho__selo {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(201, 155, 69, .55);
	border-radius: var(--vvp-raio-sm);
	background: rgba(201, 155, 69, .14);
	color: var(--vvp-ouro);
	font-size: var(--vvp-t-sm);
	font-weight: 800;
	letter-spacing: .5px;
}

.vvp-cabecalho__acoes {
	grid-area: acoes;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	align-items: center;
	justify-content: flex-end;
}

/* ---- Menu de navegação entre as duas páginas ---- */

.vvp-cabecalho__nav {
	grid-area: nav;
	display: flex;
	gap: var(--vvp-e1);
	padding: 3px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .22);
}

.vvp-nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: var(--vvp-e1) var(--vvp-e4);
	border-radius: 999px;
	color: rgba(255, 255, 255, .78);
	font-size: var(--vvp-t-sm);
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
	-webkit-tap-highlight-color: transparent;
}

.vvp-nav-link:hover,
.vvp-nav-link:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	text-decoration: none;
}

/* Página atual: fundo claro e filete dourado embaixo. */
.vvp-nav-link[aria-current="page"] {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--vvp-ouro);
}

/* =========================================================================
 * Abas
 * ========================================================================= */

.vvp-abas {
	display: flex;
	gap: var(--vvp-e1);
	margin-bottom: var(--vvp-e5);
	padding: var(--vvp-e1);
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.vvp-abas::-webkit-scrollbar { display: none; }

.vvp-aba {
	/*
	 * Largura de conteúdo, sem encolher. Esticar deixava a aba ativa como uma
	 * faixa verde de meia tela; encolher (0 1 auto) cortava o texto quando a
	 * quarta aba entrou — "Participantes Di…" no iPad mini em retrato.
	 * Não cabendo, a barra rola de lado, que é para isso que ela tem
	 * overflow-x: auto.
	 */
	flex: 0 0 auto;
	min-height: 44px;
	padding: var(--vvp-e2) var(--vvp-e4);
	border: 0;
	border-radius: var(--vvp-raio-sm);
	background: transparent;
	color: var(--vvp-texto-2);
	font-family: inherit;
	font-size: var(--vvp-t-base);
	font-weight: 650;
	white-space: nowrap;
	cursor: pointer;
	transition: background .14s ease, color .14s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.vvp-aba:hover { background: var(--vvp-hover-fundo); color: var(--vvp-hover-texto); }

.vvp-aba[aria-selected="true"] {
	background: var(--vvp-marca);
	color: #fff;
}

.vvp-aba__contagem {
	display: inline-block;
	margin-left: var(--vvp-e2);
	padding: 0 var(--vvp-e2);
	border-radius: 999px;
	background: var(--vvp-marca-suave);
	color: var(--vvp-texto-forte);
	font-size: var(--vvp-t-xs);
	font-weight: 700;
}

.vvp-aba[aria-selected="true"] .vvp-aba__contagem {
	background: var(--vvp-ouro);
	color: var(--vvp-marca-2);
}

/* =========================================================================
 * Botões
 * ========================================================================= */

.vvp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vvp-e2);
	min-height: var(--vvp-toque);
	padding: var(--vvp-e2) var(--vvp-e4);
	border: 1px solid transparent;
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-superficie);
	color: var(--vvp-texto);
	font-size: var(--vvp-t-base);
	font-weight: 650;
	font-family: inherit;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, opacity .12s ease;
	/* iOS: sem flash cinza, sem menu de "copiar" no toque longo, sem seleção
	   acidental de texto quando o dedo escorrega no botão. */
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

.vvp-btn:active { transform: translateY(1px); }
.vvp-btn:focus-visible { outline: 3px solid var(--vvp-ouro); outline-offset: 2px; }
.vvp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.vvp-btn--primario { background: var(--vvp-marca); border-color: var(--vvp-marca); color: #fff; }
.vvp-btn--primario:hover:not(:disabled) { background: var(--vvp-marca-3); }

/*
 * Dourado é ACENTO, nunca preenchimento de botão grande — vale nos dois temas.
 * No claro ele ainda vinha sólido, e o "Cadastrar convidado" competia com o
 * "Ler QR Code", que é a ação principal.
 */
.vvp-btn--ouro {
	background: var(--vvp-superficie);
	border-color: var(--vvp-ouro);
	color: var(--vvp-ouro-2);
	font-weight: 700;
}
.vvp-btn--ouro:hover:not(:disabled) { background: var(--vvp-ouro-suave); color: var(--vvp-ouro-2); }

.vvp-btn--sucesso { background: var(--vvp-ok); border-color: var(--vvp-ok); color: #fff; }
.vvp-btn--sucesso:hover:not(:disabled) { background: #17663f; }

.vvp-btn--secundario { background: var(--vvp-superficie); border-color: var(--vvp-borda-2); color: var(--vvp-texto-forte); }
.vvp-btn--secundario:hover:not(:disabled) { background: var(--vvp-hover-fundo); color: var(--vvp-hover-texto); border-color: var(--vvp-marca-3); }

.vvp-btn--perigo { background: var(--vvp-superficie); border-color: var(--vvp-erro); color: var(--vvp-erro); }
.vvp-btn--perigo:hover:not(:disabled) { background: var(--vvp-erro-suave); }

/*
 * Antes o "Cancelar" era um link sublinhado, difícil de acertar no tablet.
 * Agora é um botão de verdade, discreto mas com a mesma área de toque.
 */
.vvp-btn--texto {
	background: var(--vvp-fundo);
	border-color: var(--vvp-borda-2);
	color: var(--vvp-texto-2);
	font-weight: 600;
}

.vvp-btn--texto:hover:not(:disabled) { background: var(--vvp-hover-fundo); color: var(--vvp-hover-texto); }

.vvp-btn--gigante {
	width: 100%;
	min-height: 76px;
	font-size: var(--vvp-t-xl);
	font-weight: 700;
}

.vvp-btn--pequeno {
	min-height: 40px;
	padding: var(--vvp-e1) var(--vvp-e3);
	font-size: var(--vvp-t-sm);
}

.vvp-btn--bloco { width: 100%; }

/*
 * `flex-shrink: 0`: sem isso o ícone é espremido pelo rótulo ao lado e o
 * glifo fica cortado uns pixels — some um pedaço do "+" e da lupa.
 */
.vvp-btn__icone { flex: 0 0 auto; font-size: 1.15em; line-height: 1; }

/* Botão claro sobre o cabeçalho verde. */
.vvp-cabecalho .vvp-btn--secundario {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
}

.vvp-cabecalho .vvp-btn--secundario:hover:not(:disabled) { background: rgba(255, 255, 255, .24); }

/* =========================================================================
 * Campos
 * ========================================================================= */

.vvp-campo {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e1);
	min-width: 0;
}

.vvp-campo label,
.vvp-rotulo {
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	color: var(--vvp-texto-2);
	text-transform: uppercase;
	letter-spacing: .6px;
}

/*
 * TODOS os campos com a mesma caixa.
 *
 * O `appearance: none` é o que faz a padronização de fato: sem ele o WebKit
 * desenha `search`, `date`, `number` e `tel` cada um do seu jeito — alturas,
 * cantos e controles internos diferentes —, e a tela ficava com campos de
 * tamanhos distintos lado a lado mesmo todos usando a classe .vvp-input.
 */
/*
 * TODOS os campos com a mesma caixa.
 *
 * Duas brigas diferentes acontecem aqui, e as duas precisaram de resposta:
 *
 * 1) O WEBKIT desenha `search`, `date`, `number` e `tel` cada um do seu jeito.
 *    Resolvido com `appearance: none`.
 *
 * 2) O TEMA DO SITE estiliza `input` e `textarea` por seletor de elemento
 *    dentro de um contexto (algo como `.elementor-kit-9 input[type="text"]`,
 *    que vale 0,1,1) e vencia a classe `.vvp-input` sozinha (0,1,0). Era por
 *    isso que texto, telefone, e-mail e observação apareciam com borda escura e
 *    quadrada enquanto os `select` e o `date` — que o tema não alcança —
 *    ficavam claros e arredondados, tudo na mesma tela.
 *
 *    O prefixo `.vvp-app` leva a 0,2,0 e já ganharia da maioria, mas borda e
 *    arredondamento levam `!important`: é a terceira vez que o tema vence uma
 *    regra nossa neste projeto (antes foi a fonte dos títulos e o alinhamento
 *    dos parágrafos), e aqui a diferença aparece em toda tela com formulário.
 */
.vvp-app .vvp-input,
.vvp-app .vvp-select,
.vvp-app .vvp-textarea {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--vvp-toque);
	height: var(--vvp-toque);
	margin: 0;
	box-shadow: none !important;
	/*
	 * `!important` no bloco visual inteiro, e não só na borda.
	 *
	 * Medindo com o tema simulado, borda e arredondamento passaram a bater, mas
	 * FONTE e RECUO continuavam do tema: `.elementor-kit-9 input[type="text"]`
	 * vale (0,2,1) — seletor de atributo conta como classe — e vence o nosso
	 * (0,2,0). Subir mais a especificidade viraria uma corrida sem fim contra um
	 * CSS que não controlamos; aqui a intenção é explícita: dentro de .vvp-app,
	 * quem manda na caixa do campo é o plugin.
	 */
	padding: var(--vvp-e2) var(--vvp-e3) !important;
	border: 1px solid var(--vvp-borda-2) !important;
	border-radius: var(--vvp-raio-sm) !important;
	background-color: var(--vvp-superficie) !important;
	color: var(--vvp-texto) !important;
	/* 16px evita o zoom automático do Safari no iPad ao focar o campo. */
	font-size: var(--vvp-t-md) !important;
	font-family: var(--vvp-fonte) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Lupa e "x" nativos do campo de busca: o nosso desenho já cobre isso. */
.vvp-app .vvp-input::-webkit-search-decoration,
.vvp-app .vvp-input::-webkit-search-cancel-button,
.vvp-app .vvp-input::-webkit-search-results-button { -webkit-appearance: none; }

/* Setinhas do campo numérico — no tablet ninguém acerta, e desalinham a caixa. */
.vvp-app .vvp-input::-webkit-outer-spin-button,
.vvp-app .vvp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vvp-app .vvp-input[type="number"] { -moz-appearance: textfield; }

/* O campo de data do WebKit encolhe sozinho; aqui ele segue a caixa padrão. */
.vvp-app .vvp-input[type="date"] {
	display: block;
	min-width: 0;
}

.vvp-app .vvp-input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.vvp-app .vvp-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

.vvp-app .vvp-textarea {
	min-height: 88px;
	height: auto;
	padding: var(--vvp-e3) !important;
	resize: vertical;
}

.vvp-app .vvp-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23133D37' stroke-width='1.8' d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--vvp-e3) center;
}

.vvp-app .vvp-input:focus,
.vvp-app .vvp-select:focus,
.vvp-app .vvp-textarea:focus {
	outline: 2px solid rgba(201, 155, 69, .5);
	outline-offset: 0;
	border-color: var(--vvp-marca) !important;
}

.vvp-app .vvp-input::placeholder,
.vvp-app .vvp-textarea::placeholder { color: var(--vvp-texto-3); }

/*
 * Variações mantidas: mudam largura e peso, NUNCA a altura da caixa — é a
 * altura desencontrada que fazia os campos parecerem de sistemas diferentes.
 */
.vvp-input--grande { font-size: var(--vvp-t-lg); }

.vvp-input--numero {
	width: 84px;
	text-align: center;
	font-weight: 700;
}

/* Campo que ocupa a linha inteira dentro de uma grade de duas colunas. */
.vvp-campo--linha { grid-column: 1 / -1; }

/* =========================================================================
 * Grade responsiva
 * ========================================================================= */

.vvp-grid {
	display: grid;
	gap: var(--vvp-e3) var(--vvp-e4);
	align-items: end;
}

.vvp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vvp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.vvp-grid > * { min-width: 0; }

/* =========================================================================
 * Superfícies
 * ========================================================================= */

.vvp-cartao {
	padding: var(--vvp-e4);
	margin-bottom: var(--vvp-e4);
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra);
}

.vvp-bloco {
	padding: var(--vvp-e4);
	margin-bottom: var(--vvp-e4);
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra);
}

.vvp-secao__titulo {
	display: flex;
	align-items: center;
	gap: var(--vvp-e2);
	margin: 0 0 var(--vvp-e3);
	font-size: var(--vvp-t-md);
	font-weight: 700;
	color: var(--vvp-texto-forte);
}

.vvp-secao__titulo::before {
	content: "";
	flex: 0 0 auto;
	width: 3px;
	height: 15px;
	border-radius: 2px;
	background: var(--vvp-ouro);
}

.vvp-secao__cabecalho {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2) var(--vvp-e3);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--vvp-e3);
}

.vvp-secao__cabecalho .vvp-secao__titulo { margin-bottom: 0; }

/* =========================================================================
 * Overlay de carregamento
 * ========================================================================= */

.vvp-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--vvp-e5);
	background: rgba(13, 43, 39, .84);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.vvp-overlay__caixa {
	width: 100%;
	max-width: 420px;
	padding: var(--vvp-e6) var(--vvp-e5);
	border-top: 3px solid var(--vvp-ouro);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra-alta);
	text-align: center;
}

.vvp-spinner {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--vvp-e4);
	border: 4px solid var(--vvp-marca-suave);
	border-top-color: var(--vvp-ouro);
	border-radius: 50%;
	animation: vvp-girar .9s linear infinite;
}

@keyframes vvp-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.vvp-spinner { animation-duration: 2.4s; }
}

.vvp-overlay__caixa h2 { margin-bottom: var(--vvp-e1); color: var(--vvp-texto-forte); }

.vvp-overlay__msg {
	margin: 0 0 var(--vvp-e4);
	font-size: var(--vvp-t-base);
	color: var(--vvp-texto-2);
	min-height: 1.5em;
}

.vvp-overlay__barra {
	height: 6px;
	margin-bottom: var(--vvp-e2);
	border-radius: 999px;
	background: var(--vvp-marca-suave);
	overflow: hidden;
}

.vvp-overlay__barra span {
	display: block;
	height: 100%;
	width: 34%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--vvp-marca) 0%, var(--vvp-ouro) 100%);
	animation: vvp-andar 1.5s ease-in-out infinite;
}

@keyframes vvp-andar {
	0%   { margin-left: -34%; }
	100% { margin-left: 100%; }
}

.vvp-overlay__num {
	font-size: var(--vvp-t-sm);
	font-weight: 650;
	color: var(--vvp-texto-forte);
}

.vvp-overlay__nota {
	margin: var(--vvp-e3) 0 0;
	font-size: var(--vvp-t-xs);
	color: var(--vvp-texto-3);
}

/* =========================================================================
 * Avisos flutuantes
 * ========================================================================= */

.vvp-toast {
	position: fixed;
	left: 50%;
	bottom: var(--vvp-e5);
	transform: translateX(-50%);
	z-index: 99999;
	width: max-content;
	max-width: min(92vw, 520px);
	padding: var(--vvp-e3) var(--vvp-e5);
	border-left: 3px solid var(--vvp-ouro);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-marca);
	color: #fff;
	font-size: var(--vvp-t-base);
	font-weight: 600;
	text-align: center;
	box-shadow: var(--vvp-sombra-alta);
}

.vvp-toast--erro  { background: var(--vvp-erro); border-left-color: #7d1a15; }
.vvp-toast--ok    { background: var(--vvp-ok); border-left-color: #0f5334; }
.vvp-toast--aviso { background: var(--vvp-alerta); border-left-color: #5c410a; }

/* =========================================================================
 * OUVIDORIA
 *
 * A bolinha ao lado de "ENTRADA LIBERADA" tem 5px por pedido: é sinal para
 * quem opera, não aviso para o convidado que está do outro lado da tela.
 * `vertical-align` a levanta um pouco, para ela ficar na altura do texto em
 * caixa alta em vez de na linha de base.
 * ========================================================================= */

.vvp-ponto-ouvidoria {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    /* Dourado da marca: destaca no verde da faixa sem virar alerta. */
    background: var(--vvp-ouro);
    vertical-align: middle;
}

/* Selo da ouvidoria nas listas. */
.vvp-selo-ouvidoria {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--vvp-ouro-suave);
    color: #6b4d13;
    font-size: var(--vvp-t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.vvp-app.vvp-escuro .vvp-selo-ouvidoria { color: #e9c987; }

/* Complemento leve num rótulo: explica sem competir com ele. */
.vvp-rotulo-leve {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--vvp-texto-3);
}

/*
 * Nota interna na ficha da entrada.
 *
 * Fundo neutro e barra à esquerda: é recado da equipe, não status do
 * convidado — não pode ser confundido com aviso do sistema.
 */
.vvp-obs-nota {
    margin: var(--vvp-e4) 0 0;
    padding: var(--vvp-e3) var(--vvp-e4);
    border-left: 3px solid var(--vvp-borda-2);
    border-radius: var(--vvp-raio-sm);
    background: var(--vvp-fundo-2, rgba(0, 0, 0, .03));
}

.vvp-obs-nota strong {
    display: block;
    margin-bottom: 2px;
    font-size: var(--vvp-t-xs);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vvp-texto-3);
}

.vvp-obs-nota p {
    margin: 0;
    white-space: pre-wrap;
    color: var(--vvp-texto);
}

/* =========================================================================
 * Tabelas
 * ========================================================================= */

.vvp-tabela-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
}

/* Só para leitor de tela: cabeçalho da coluna da lixeira, que é um ícone. */
.vvp-so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * Lixeira de desfazer nas tabelas
 *
 * Fica na última coluna de toda tabela de entradas. Discreta em repouso (é
 * uma ação destrutiva num painel de conferência) e vermelha ao toque. O alvo
 * respeita o mínimo de toque do iPad mesmo com a linha compacta.
 * ========================================================================= */

.vvp-btn-lixeira {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--vvp-raio-sm);
	background: transparent;
	color: var(--vvp-texto-3);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.vvp-btn-lixeira:hover,
.vvp-btn-lixeira:focus-visible {
	border-color: var(--vvp-erro);
	background: var(--vvp-erro-suave);
	color: var(--vvp-erro);
}

.vvp-col-acao { width: 58px; }

@media (max-width: 640px) {
	.vvp-col-acao { width: 46px; }
	.vvp-btn-lixeira { width: 34px; height: 34px; }
}

.vvp-tabela {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: var(--vvp-t-sm);
	table-layout: auto;
}

.vvp-tabela th,
.vvp-tabela td {
	padding: var(--vvp-e2) var(--vvp-e3);
	border-bottom: 1px solid var(--vvp-borda);
	text-align: left;
	vertical-align: top;
}

.vvp-tabela th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--vvp-marca);
	color: #fff;
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	white-space: nowrap;
}

.vvp-tabela tbody tr:nth-child(even) { background: rgba(19, 61, 55, .02); }
.vvp-tabela tbody tr:hover { background: var(--vvp-hover-fundo); color: var(--vvp-hover-texto); }
.vvp-tabela tbody tr:last-child td { border-bottom: 0; }

.vvp-tabela .vvp-num { text-align: center; white-space: nowrap; }
.vvp-tabela .vvp-hora { white-space: nowrap; font-weight: 650; }
.vvp-tabela .vvp-quebra { min-width: 150px; }

/* =========================================================================
 * Etiquetas e pílulas
 * ========================================================================= */

.vvp-tag {
	display: inline-block;
	max-width: 100%;
	padding: 2px var(--vvp-e2);
	border-radius: 999px;
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	white-space: nowrap;
}

.vvp-tag--sympla { background: var(--vvp-ok-suave); color: var(--vvp-ok); }
.vvp-tag--nodia  { background: var(--vvp-ouro-suave); color: var(--vvp-ouro-2); }
.vvp-tag--erro   { background: var(--vvp-erro-suave); color: var(--vvp-erro); }
.vvp-tag--aviso  { background: var(--vvp-alerta-suave); color: var(--vvp-alerta); }

/*
 * "Já fechou conosco?" na tabela do monitor.
 *
 * Verde para quem fechou e neutro para quem não fechou — de propósito. Pintar
 * o "não" de vermelho leria como problema, e não é: casal que ainda não fechou
 * é exatamente o lead que as consultoras querem abordar.
 */
.vvp-tag--fechou    { background: var(--vvp-ok-suave); color: var(--vvp-ok); }
.vvp-tag--naofechou { background: var(--vvp-marca-suave); color: var(--vvp-marca-3); }
.vvp-tag--neutra { background: var(--vvp-marca-suave); color: var(--vvp-texto-forte); }

/* Pílulas de contagem que também funcionam como filtro. */
.vvp-pilulas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	margin-bottom: var(--vvp-e3);
}

.vvp-pilula {
	display: inline-flex;
	align-items: baseline;
	gap: var(--vvp-e1);
	min-height: 42px;
	padding: var(--vvp-e2) var(--vvp-e3);
	border: 1px solid var(--vvp-borda-2);
	border-radius: 999px;
	background: var(--vvp-superficie);
	color: var(--vvp-texto-2);
	font-family: inherit;
	font-size: var(--vvp-t-sm);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
	touch-action: manipulation;
}

.vvp-pilula:hover { border-color: var(--vvp-marca-3); background: var(--vvp-hover-fundo); color: var(--vvp-hover-texto); }
.vvp-pilula:hover strong { color: var(--vvp-hover-texto); }
.vvp-pilula strong { font-size: var(--vvp-t-md); font-weight: 800; color: var(--vvp-texto-forte); }

.vvp-pilula[aria-pressed="true"] {
	background: var(--vvp-marca);
	border-color: var(--vvp-marca);
	color: rgba(255, 255, 255, .85);
}

.vvp-pilula[aria-pressed="true"] strong { color: var(--vvp-ouro); }

/* =========================================================================
 * Utilidades
 * ========================================================================= */

.vvp-vazio {
	padding: var(--vvp-e5) var(--vvp-e4);
	text-align: center;
	color: var(--vvp-texto-2);
	font-size: var(--vvp-t-base);
}

.vvp-carregando {
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid var(--vvp-marca-suave);
	border-top-color: var(--vvp-marca);
	border-radius: 50%;
	animation: vvp-girar .8s linear infinite;
	vertical-align: -2px;
}

.vvp-paginacao {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e3);
	align-items: center;
	justify-content: center;
	margin-top: var(--vvp-e4);
}

.vvp-paginacao__info {
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
	font-weight: 600;
}

/* =========================================================================
 * Responsivo
 * ========================================================================= */

/*
 * Larguras de referência (pontos CSS, que é o que o Safari reporta):
 *   iPad mini retrato .......  744    iPad mini paisagem ....... 1133
 *   iPad 10.9" retrato ......  820    iPad 10.9" paisagem ...... 1180
 *   iPad Pro 11" retrato ....  834    iPad Pro 11" paisagem .... 1194
 *   iPad Pro 12.9" retrato .. 1024    iPad Pro 12.9" paisagem .. 1366
 *
 * Por isso o corte fica em 1024px: acima disso é iPad em PAISAGEM (ou desktop) e
 * cabe layout de duas colunas; abaixo é iPad em RETRATO, coluna única.
 */

/*
 * Margem maior a partir do tablet.
 *
 * A partir daqui sobra largura, e conteúdo encostado na borda da tela fica
 * sufocado — foi o que apareceu no iPad: cabeçalho, barra de sincronização e
 * tabelas todos rentes ao vidro.
 */
@media (min-width: 768px) {
	.vvp-app { --vvp-margem: 24px; }
}

@media (min-width: 1180px) {
	.vvp-app { --vvp-margem: 32px; }
}

/* iPad em retrato e telas menores: o menu desce para a própria linha. */
@media (max-width: 1023px) {
	/*
	 * Com três botões no cabeçalho (sincronizar, som, tema) os rótulos não
	 * cabem ao lado da marca em iPad retrato. Some o texto e fica o ícone, que
	 * continua com 44px de área de toque; em paisagem o rótulo volta.
	 */
	.vvp-cabecalho .vvp-btn__rotulo { display: none; }
	.vvp-cabecalho__acoes .vvp-btn--pequeno { padding-inline: var(--vvp-e3); }

	.vvp-cabecalho {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"marca acoes"
			"nav   nav";
		/*
		 * Sem respiro embaixo: assim o filete dourado encosta no menu e vira
		 * sublinhado dele, em vez de sobrar uma faixa vazia sob os links.
		 */
		padding: var(--vvp-e3) var(--vvp-e4) 0;
	}

	.vvp-cabecalho__nav {
		justify-content: stretch;
		/* Encostado no filete: cantos de baixo retos, como aba de verdade. */
		border-radius: 999px 999px 0 0;
		padding-bottom: 6px;
	}

	.vvp-cabecalho__nav .vvp-nav-link { flex: 1 1 0; justify-content: center; }
}

/* Celular */
@media (max-width: 640px) {
	/* Tela estreita: margem menor, cada pixel de largura conta. */
	.vvp-app { --vvp-margem: 12px; }

	.vvp-cabecalho {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "marca" "nav" "acoes";
	}

	.vvp-cabecalho__acoes { justify-content: stretch; }
	.vvp-cabecalho__acoes .vvp-btn { flex: 1 1 auto; }
	.vvp-btn--gigante { min-height: 68px; font-size: var(--vvp-t-lg); }

	/* Em celular a aba fica um pouco menor; continua sem encolher (ver base). */
	.vvp-aba { padding: var(--vvp-e2) var(--vvp-e3); font-size: var(--vvp-t-sm); }
}

/*
 * Tela de toque: aumenta os alvos sem depender da largura, porque um iPad Pro em
 * paisagem tem largura de desktop mas continua sendo operado com o dedo.
 */
@media (hover: none) and (pointer: coarse) {
	.vvp-app { --vvp-toque: 52px; }
	.vvp-aba { min-height: 50px; }
	.vvp-pilula { min-height: 46px; }
}

/* =========================================================================
 * MODO ESCURO
 *
 * Superfícies em verde da marca, texto claro. O DOURADO é acento, não
 * preenchimento: entra na aba ativa, em filetes finos, no número do placar e em
 * contornos — nunca cobrindo um botão inteiro ou uma superfície grande. Um
 * painel operacional em ouro maciço cansa a vista e apaga a hierarquia.
 * ========================================================================= */

.vvp-app.vvp-escuro {
	--vvp-texto: #EEF4F2;
	--vvp-texto-2: #A7BAB5;
	--vvp-texto-3: #7E918D;
	--vvp-borda: #24504A;
	--vvp-borda-2: #356962;
	--vvp-fundo: #0d2b27;
	--vvp-superficie: #17443E;
	--vvp-marca-suave: #1F5851;

	/* Hover do escuro: fundo um degrau mais claro, texto continua claro. */
	--vvp-hover-fundo: #23625A;
	--vvp-hover-texto: #EEF4F2;

	/* No escuro, texto forte é BRANCO — nunca o verde da marca. */
	--vvp-texto-forte: #FFFFFF;

	/* Verde legível para ação principal — sóbrio, sem virar bloco de ouro. */
	--vvp-acao: #2F8A63;
	--vvp-acao-2: #37a074;

	--vvp-ok-suave: rgba(47, 138, 99, .24);
	--vvp-erro-suave: rgba(179, 38, 30, .26);
	--vvp-alerta-suave: rgba(201, 155, 69, .18);
	--vvp-ouro-suave: rgba(201, 155, 69, .16);
	--vvp-sombra: 0 1px 2px rgba(0, 0, 0, .32), 0 2px 12px rgba(0, 0, 0, .22);
	--vvp-sombra-alta: 0 12px 36px rgba(0, 0, 0, .5);

	padding: var(--vvp-e4);
	border-radius: var(--vvp-raio-lg);
	background: var(--vvp-fundo);
}

/* ---- Texto e títulos ---- */
.vvp-app.vvp-escuro h1,
.vvp-app.vvp-escuro h2,
.vvp-app.vvp-escuro h3,
.vvp-app.vvp-escuro h4 { color: var(--vvp-texto); }

/* Único lugar em que o título ganha ouro: o filete da seção. */
.vvp-app.vvp-escuro .vvp-secao__titulo { color: var(--vvp-texto); }
.vvp-app.vvp-escuro .vvp-secao__titulo::before { background: var(--vvp-ouro); }

/* ---- Cabeçalho ---- */
.vvp-app.vvp-escuro .vvp-cabecalho {
	background: linear-gradient(135deg, #12332e 0%, #17443E 100%);
	border-bottom-color: var(--vvp-ouro);
}

/* ---- Abas: só a ativa recebe ouro, e ainda assim como faixa fina ---- */
.vvp-app.vvp-escuro .vvp-abas { background: var(--vvp-superficie); border-color: var(--vvp-borda); }
.vvp-app.vvp-escuro .vvp-aba { color: var(--vvp-texto-2); }

.vvp-app.vvp-escuro .vvp-aba[aria-selected="true"] {
	background: var(--vvp-marca-suave);
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--vvp-ouro);
}

.vvp-app.vvp-escuro .vvp-aba__contagem { background: rgba(255, 255, 255, .12); color: var(--vvp-texto); }
.vvp-app.vvp-escuro .vvp-aba[aria-selected="true"] .vvp-aba__contagem { background: rgba(201, 155, 69, .3); color: #fff; }

/* ---- Botões: verde para ação, contorno para o resto. Nada maciço em ouro. ---- */
.vvp-app.vvp-escuro .vvp-btn {
	background: var(--vvp-superficie);
	border-color: var(--vvp-borda-2);
	color: var(--vvp-texto);
}

.vvp-app.vvp-escuro .vvp-btn--primario,
.vvp-app.vvp-escuro .vvp-btn--sucesso {
	background: var(--vvp-acao);
	border-color: var(--vvp-acao);
	color: #fff;
}

.vvp-app.vvp-escuro .vvp-btn--primario:hover:not(:disabled),
.vvp-app.vvp-escuro .vvp-btn--sucesso:hover:not(:disabled) {
	background: var(--vvp-acao-2);
	border-color: var(--vvp-acao-2);
	color: #fff;
}

/* O botão "ouro" vira CONTORNO dourado sobre fundo escuro — acento, não bloco. */
.vvp-app.vvp-escuro .vvp-btn--ouro {
	background: transparent;
	border-color: var(--vvp-ouro);
	color: var(--vvp-ouro);
}

.vvp-app.vvp-escuro .vvp-btn--ouro:hover:not(:disabled) {
	background: var(--vvp-ouro-suave);
	border-color: var(--vvp-ouro);
	color: var(--vvp-ouro);
}

.vvp-app.vvp-escuro .vvp-btn--secundario,
.vvp-app.vvp-escuro .vvp-btn--texto {
	background: var(--vvp-superficie);
	border-color: var(--vvp-borda-2);
	color: var(--vvp-texto);
}

.vvp-app.vvp-escuro .vvp-btn--secundario:hover:not(:disabled),
.vvp-app.vvp-escuro .vvp-btn--texto:hover:not(:disabled) {
	background: var(--vvp-hover-fundo);
	color: var(--vvp-hover-texto);
}

.vvp-app.vvp-escuro .vvp-btn--perigo {
	background: transparent;
	border-color: #d4534b;
	color: #ffa9a3;
}

.vvp-app.vvp-escuro .vvp-btn--perigo:hover:not(:disabled) { background: var(--vvp-erro-suave); color: #ffc9c5; }

/*
 * ---- Campos ----
 *
 * background-COLOR, nunca o atalho `background`.
 *
 * O atalho zera background-repeat e background-position; o chevron do <select>
 * voltava a `repeat` / `0 0` e ladrilhava o campo inteiro, virando a "textura"
 * que embaralhava o texto do seletor de Evento. Aqui só a cor muda, e a imagem
 * é redeclarada por completo logo abaixo.
 */
.vvp-app.vvp-escuro .vvp-input,
.vvp-app.vvp-escuro .vvp-select,
.vvp-app.vvp-escuro .vvp-textarea {
	border-color: rgba(255, 255, 255, .18) !important;
	background-color: #10332E !important;
	color: var(--vvp-texto) !important;
}

.vvp-app.vvp-escuro .vvp-select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23A7BAB5' stroke-width='1.8' d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--vvp-e3) center;
	background-size: 12px 8px;
}

.vvp-app.vvp-escuro .vvp-input::placeholder,
.vvp-app.vvp-escuro .vvp-textarea::placeholder { color: var(--vvp-texto-3); }

.vvp-app.vvp-escuro .vvp-input:focus,
.vvp-app.vvp-escuro .vvp-select:focus,
.vvp-app.vvp-escuro .vvp-textarea:focus {
	border-color: var(--vvp-ouro);
	outline-color: rgba(201, 155, 69, .35);
}

/* As opções do dropdown são desenhadas pelo sistema: force o par de cores. */
.vvp-app.vvp-escuro .vvp-select option {
	background-color: #10332E;
	color: var(--vvp-texto);
}

/* ---- Tabelas ---- */
.vvp-app.vvp-escuro .vvp-tabela { background: var(--vvp-superficie); }
.vvp-app.vvp-escuro .vvp-tabela th { background: #12332e; color: var(--vvp-texto); }
.vvp-app.vvp-escuro .vvp-tabela tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
.vvp-app.vvp-escuro .vvp-tabela tbody tr:hover { background: var(--vvp-hover-fundo); color: var(--vvp-hover-texto); }

/* ---- Pílulas e etiquetas ---- */
.vvp-app.vvp-escuro .vvp-pilula { background: var(--vvp-superficie); color: var(--vvp-texto-2); }
.vvp-app.vvp-escuro .vvp-pilula strong { color: var(--vvp-texto); }

/* A pílula ativa marca com ouro apenas no contorno e no número. */
.vvp-app.vvp-escuro .vvp-pilula[aria-pressed="true"] {
	background: var(--vvp-marca-suave);
	border-color: var(--vvp-ouro);
	color: var(--vvp-texto);
}

.vvp-app.vvp-escuro .vvp-pilula[aria-pressed="true"] strong { color: var(--vvp-ouro); }

.vvp-app.vvp-escuro .vvp-tag--sympla { background: var(--vvp-ok-suave); color: #7fd6ab; }
.vvp-app.vvp-escuro .vvp-tag--erro   { background: var(--vvp-erro-suave); color: #ffa9a3; }
.vvp-app.vvp-escuro .vvp-tag--aviso  { background: var(--vvp-alerta-suave); color: #e2bc78; }
.vvp-app.vvp-escuro .vvp-tag--nodia  { background: var(--vvp-ouro-suave); color: #e2bc78; }
.vvp-app.vvp-escuro .vvp-tag--neutra { background: rgba(255, 255, 255, .1); color: var(--vvp-texto); }

/* ---- Números e destaques ---- */

/*
 * O card em destaque tem quase o mesmo verde das superfícies no escuro; sem uma
 * borda dourada ele deixava de se distinguir dos demais.
 */
.vvp-app.vvp-escuro .vvp-card-num--destaque {
	background: linear-gradient(135deg, #12332e 0%, #1c534b 100%);
	border-color: var(--vvp-ouro);
}

.vvp-app.vvp-escuro .vvp-card-num--destaque .vvp-card-num__rotulo { color: rgba(255, 255, 255, .82); }
.vvp-app.vvp-escuro .vvp-card-num--destaque .vvp-card-num__nota { color: rgba(255, 255, 255, .6); }

/* O card de atenção usa ouro no escuro: o âmbar do tema claro fica ilegível. */
.vvp-app.vvp-escuro .vvp-card-num--alerta { border-left-color: var(--vvp-ouro); }
.vvp-app.vvp-escuro .vvp-card-num--alerta .vvp-card-num__valor { color: var(--vvp-ouro); }

.vvp-app.vvp-escuro .vvp-card-num__nota { color: var(--vvp-texto-2); }
.vvp-app.vvp-escuro .vvp-card-num__rotulo { color: var(--vvp-texto-2); }

/* Aviso de sincronização: no claro é texto marrom; no escuro precisa clarear. */
.vvp-app.vvp-escuro .vvp-aviso-sync {
	background: var(--vvp-ouro-suave);
	border-color: rgba(201, 155, 69, .45);
	color: #F0DFBB;
}

.vvp-app.vvp-escuro .vvp-sync-info--rodando { color: var(--vvp-ouro); }

/* ---- Diversos ---- */
.vvp-app.vvp-escuro .vvp-overlay__caixa { background: var(--vvp-superficie); border-top-color: var(--vvp-ouro); }
.vvp-app.vvp-escuro .vvp-overlay__caixa h2 { color: var(--vvp-texto); }
.vvp-app.vvp-escuro .vvp-overlay__barra { background: rgba(255, 255, 255, .1); }
.vvp-app.vvp-escuro code { background: rgba(255, 255, 255, .08); color: var(--vvp-texto); }
.vvp-app.vvp-escuro .vvp-cartao,
.vvp-app.vvp-escuro .vvp-bloco { background: var(--vvp-superficie); border-color: var(--vvp-borda); }

/*
 * Sobreposição centralizada.
 *
 * O resultado da leitura era um bloco no meio da página: no iPad, dependendo de
 * onde estava a rolagem, o porteiro lia o QR e a resposta aparecia fora da
 * vista. Agora ocupa o centro da tela.
 *
 * `position: fixed` mais `100dvh` (não `100vh`) para o Safari do iPad não
 * esconder o rodapé do card atrás da barra de endereço.
 */
.vvp-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--vvp-e4);
	padding-top: max(var(--vvp-e4), env(safe-area-inset-top));
	padding-bottom: max(var(--vvp-e4), env(safe-area-inset-bottom));
}

.vvp-modal__fundo {
	position: absolute;
	inset: 0;
	background: rgba(6, 24, 21, .62);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: vvp-surgir .14s ease-out;
}

.vvp-modal__caixa {
	position: relative;
	width: min(720px, 100%);
	max-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Trava a rolagem de trás enquanto o card está aberto. */
.vvp-travado,
.vvp-travado body { overflow: hidden; }

.vvp-resultado {
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra-alta);
	animation: vvp-aparecer .16s ease-out;
}

/* Cantos do card acompanham a faixa colorida e o rodapé. */
.vvp-resultado > .vvp-card__faixa { border-radius: var(--vvp-raio) var(--vvp-raio) 0 0; }
.vvp-resultado > .vvp-card__corpo { border-radius: 0 0 var(--vvp-raio) var(--vvp-raio); }

@keyframes vvp-aparecer {
	from { opacity: 0; transform: translateY(8px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

@keyframes vvp-surgir {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.vvp-resultado,
	.vvp-modal__fundo { animation: none; }
}


/* =========================================================================
 * Fundo em tela cheia
 *
 * O `.vvp-app` não consegue pintar fora de si mesmo: em tela larga o fundo do
 * tema aparecia dos lados e a emenda ficava evidente. A classe é posta no
 * <body> pelo mesmo script que decide o tema ANTES da primeira pintura, então
 * não pisca, e sai junto se o operador escolher o claro.
 *
 * Só existe nas páginas onde o shortcode está — nenhuma outra página do site é
 * afetada.
 * ========================================================================= */

body.vvp-corpo-escuro {
	background-color: #0d2b27 !important;
	color: #EEF4F2;
}

/* Blocos do tema no meio do caminho (Elementor) também ficam escuros. */
body.vvp-corpo-escuro .elementor-section,
body.vvp-corpo-escuro .elementor-container,
body.vvp-corpo-escuro .elementor-widget-container,
body.vvp-corpo-escuro .entry-content,
body.vvp-corpo-escuro main,
body.vvp-corpo-escuro article {
	background-color: transparent !important;
}

/* =========================================================================
 * Preenchimento automático do navegador
 *
 * O WebKit pinta o próprio fundo em campos preenchidos pelo autocompletar e
 * ignora `background-color` — no tema escuro isso virava uma caixa branca com
 * texto preto no meio do formulário. Não há como desligar: a saída conhecida é
 * cobrir com uma sombra interna sólida e mandar a cor do texto por
 * `-webkit-text-fill-color`.
 *
 * A transição gigante existe porque o Chrome anima o fundo por 0,2s ao
 * preencher; empurrando o fim da animação para longe, o branco nunca aparece.
 * ========================================================================= */

.vvp-app input:-webkit-autofill,
.vvp-app input:-webkit-autofill:hover,
.vvp-app input:-webkit-autofill:focus,
.vvp-app textarea:-webkit-autofill,
.vvp-app select:-webkit-autofill {
	-webkit-text-fill-color: var(--vvp-texto);
	-webkit-box-shadow: 0 0 0 60px var(--vvp-superficie) inset;
	box-shadow: 0 0 0 60px var(--vvp-superficie) inset;
	caret-color: var(--vvp-texto);
	transition: background-color 100000s ease-in-out 0s;
}

/* Dentro do grupo de busca o fundo é o da caixa, não o da superfície. */
.vvp-app .vvp-busca__campo:-webkit-autofill,
.vvp-app .vvp-busca__campo:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 60px var(--vvp-superficie) inset;
	box-shadow: 0 0 0 60px var(--vvp-superficie) inset;
}

/* Linha de tabela que abre a ficha ao toque. */
.vvp-linha-clicavel { cursor: pointer; }
.vvp-linha-clicavel:hover td,
.vvp-linha-clicavel:focus-visible td { background: var(--vvp-hover-fundo); color: var(--vvp-hover-texto); }

/* =========================================================================
 * Selo de convidados
 *
 * Na portaria (últimas entradas) e nos relatórios (lista detalhada). Em ambos
 * o toque abre o MESMO popup — não existe mais o balão preso ao selo.
 * ========================================================================= */

.vvp-selo-conv {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 30px;
	padding: 2px var(--vvp-e2);
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--vvp-marca-suave);
	color: var(--vvp-texto-forte);
	font-family: inherit;
	font-size: var(--vvp-t-sm);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.vvp-selo-conv:hover,
.vvp-selo-conv[aria-expanded="true"] {
	border-color: var(--vvp-ouro);
	background: var(--vvp-ouro-suave);
	color: var(--vvp-ouro-2);
}

/*
 * Zero também abre — é justamente o caso de quem esqueceu de lançar os
 * acompanhantes. Fica apagado para não competir com os números que têm
 * conteúdo, mas continua sendo um alvo de toque.
 */
.vvp-selo-conv--zero {
	background: transparent;
	color: var(--vvp-texto-3);
	font-weight: 500;
}

.vvp-selo-conv--zero:hover,
.vvp-selo-conv--zero:focus-visible {
	background: var(--vvp-hover-fundo);
	color: var(--vvp-texto);
}


/* =========================================================================
 * Barra de filtros (portaria, relatórios e monitor)
 * ========================================================================= */

.vvp-filtros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--vvp-e3) var(--vvp-e4);
	align-items: end;
	padding: var(--vvp-e3) var(--vvp-e4);
	margin-bottom: var(--vvp-e4);
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra);
}

/*
 * Os botões SEMPRE ocupam uma linha própria.
 *
 * Antes eles dividiam a grade com os campos: com três filtros a coluna deles
 * ficava estreita, os dois botões empilhavam num canto e, por causa do
 * `align-items: end`, apareciam ACIMA da linha dos campos. Numa linha própria
 * o arranjo é o mesmo em qualquer largura.
 */
.vvp-filtros__acoes {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	align-items: center;
	padding-top: var(--vvp-e3);
	border-top: 1px solid var(--vvp-borda);
}

@media (min-width: 1024px) {
	.vvp-filtros__acoes { justify-content: flex-end; }
}

/* Em tela estreita cada botão estica: alvo maior para o dedo. */
@media (max-width: 1023px) {
	.vvp-filtros__acoes .vvp-btn { flex: 1 1 auto; }
}

/* =========================================================================
 * Multisseleção de nomes (também usada nos relatórios)
 * ========================================================================= */

.vvp-multi { position: relative; }

.vvp-multi__caixa {
	position: relative;
	border: 1px solid var(--vvp-borda-2);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
}

.vvp-multi--ativo .vvp-multi__caixa { border-color: var(--vvp-ouro); }

.vvp-multi__resumo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vvp-e2);
	min-height: var(--vvp-toque);
	padding: var(--vvp-e2) var(--vvp-e3);
	cursor: pointer;
	list-style: none;
	font-size: var(--vvp-t-base);
	color: var(--vvp-texto);
	-webkit-tap-highlight-color: transparent;
}

/* Some o triângulo nativo do <summary> e põe o nosso, igual ao dos selects. */
.vvp-multi__resumo::-webkit-details-marker { display: none; }

.vvp-multi__resumo::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--vvp-texto-3);
	border-bottom: 2px solid var(--vvp-texto-3);
	transform: rotate(45deg) translate(-2px, -2px);
}

.vvp-multi__caixa[open] .vvp-multi__resumo::after { transform: rotate(-135deg) translate(-2px, -2px); }

/*
 * A lista flutua sobre o conteúdo em vez de empurrar a página: com quatro
 * filtros lado a lado, abrir um deles reposicionaria os outros três.
 */
.vvp-multi__lista {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--vvp-e1);
	border: 1px solid var(--vvp-borda-2);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra-alta);
}

.vvp-multi__item {
	display: flex;
	align-items: center;
	gap: var(--vvp-e2);
	min-height: 44px;
	padding: 0 var(--vvp-e2);
	border-radius: var(--vvp-raio-sm);
	font-size: var(--vvp-t-base);
	cursor: pointer;
}

.vvp-multi__item:hover { background: var(--vvp-hover-fundo); color: var(--vvp-hover-texto); }
.vvp-multi__item input { width: 20px; height: 20px; accent-color: var(--vvp-ok); }


/* =========================================================================
 * CARD DE SOBREPOSIÇÃO E SEUS COMPONENTES
 *
 * Estas regras VIVIAM no CSS da portaria, mas o card é usado também no Monitor
 * (popup "Direcionar para", detalhe de convidados) e nos Relatórios. Como
 * aquelas páginas não carregam o arquivo da portaria, o popup do Monitor
 * aparecia sem faixa, sem respiro e com os botões na cor do tema — rosa.
 *
 * Componente compartilhado mora na BASE. Foi a terceira vez que esse mesmo
 * engano apareceu (antes com a barra de filtros e com a sobreposição), então
 * aqui vai tudo junto: faixa, corpo, campos, ações, chips de tipo, lista de
 * convidados e lista de desfazer.
 * ========================================================================= */

/* Bloco de convidados embutido no card, antes dos botões. */
.vvp-card__convidados {
	padding: var(--vvp-e3);
	margin: 0 0 var(--vvp-e4);
	border: 1px dashed var(--vvp-borda-2);
	border-radius: var(--vvp-raio-sm);
}
.vvp-app .vvp-card__subtitulo {
	margin: 0 0 var(--vvp-e2);
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--vvp-texto-2);
}
.vvp-card__faixa {
	padding: var(--vvp-e5) var(--vvp-e4);
	color: #fff;
	text-align: center;
}
.vvp-card--verde .vvp-card__faixa    { background: var(--vvp-ok); }
.vvp-card--vermelho .vvp-card__faixa { background: var(--vvp-erro); }
.vvp-card--amarelo .vvp-card__faixa  { background: var(--vvp-alerta); }
/*
 * O `!important` no alinhamento não é preguiça: o tema do site alinha `p` com
 * seletores do Elementor de especificidade maior que a nossa, e o nome e a
 * frase de apoio saíam à esquerda enquanto o título (um h2, que herda o
 * alinhamento da faixa) ficava centralizado.
 */
.vvp-app .vvp-card__faixa .vvp-card__nome,
.vvp-app .vvp-card__faixa .vvp-card__mensagem {
	text-align: center !important;
}
.vvp-app .vvp-card__nome {
	margin: 0 0 var(--vvp-e1);
	color: #fff;
	font-size: clamp(26px, 4.4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .2px;
	text-align: center;
	text-wrap: balance;
}
.vvp-app .vvp-card__titulo {
	margin: 0;
	color: #fff;
	font-size: var(--vvp-t-md);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.2;
	text-transform: uppercase;
	opacity: .92;
}
.vvp-card__mensagem {
	margin: var(--vvp-e2) 0 0;
	font-size: var(--vvp-t-md);
	color: rgba(255, 255, 255, .94);
	text-align: center;
}
/* Hora grande no re-scan: "entrou às 21:14" tem de saltar aos olhos. */
.vvp-card__hora-grande {
	display: inline-block;
	margin-top: var(--vvp-e3);
	padding: var(--vvp-e2) var(--vvp-e6);
	border-radius: 999px;
	background: rgba(0, 0, 0, .22);
	font-size: var(--vvp-t-xl);
	font-weight: 800;
	letter-spacing: .5px;
}
.vvp-card__corpo {
	padding: var(--vvp-e5);
	background: var(--vvp-superficie);
}
.vvp-card__sub {
	margin: 0 0 var(--vvp-e4);
	color: var(--vvp-texto-2);
	font-size: var(--vvp-t-sm);
}
/* Campo personalizado escolhido como destaque (ex.: nome do casal). */
.vvp-card__destaque {
	padding: var(--vvp-e3) var(--vvp-e4);
	margin: 0 0 var(--vvp-e4);
	border-left: 4px solid var(--vvp-ouro);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-marca-suave);
}
.vvp-card__destaque dt {
	margin: 0;
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--vvp-texto-2);
}
.vvp-card__destaque dd {
	margin: 2px 0 0;
	font-size: var(--vvp-t-lg);
	font-weight: 700;
	line-height: 1.25;
	color: var(--vvp-texto-forte);
}
/*
 * DUAS colunas, não `auto-fit`: com três, os rótulos longos do formulário da
 * Sympla ("Qual o número previsto de convidados no casamento/evento?") quebram
 * em quatro linhas e o card vira um paredão de texto.
 */
.vvp-card__campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vvp-e3) var(--vvp-e4);
	padding: var(--vvp-e3) var(--vvp-e4);
	margin: 0 0 var(--vvp-e4);
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-fundo);
}
.vvp-card__campo { min-width: 0; }
.vvp-card__campo dt {
	margin: 0;
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--vvp-texto-2);
}
.vvp-card__campo dd {
	margin: 2px 0 0;
	font-size: var(--vvp-t-base);
	font-weight: 600;
}
.vvp-card__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
}
.vvp-card__acoes .vvp-btn { flex: 1 1 180px; }
/* Linha do código lido: respiro depois dos botões, senão encosta neles. */
.vvp-card__debug {
	margin: var(--vvp-e5) 0 var(--vvp-e1);
	padding-top: var(--vvp-e4);
	border-top: 1px dashed var(--vvp-borda-2);
	font-size: var(--vvp-t-xs);
	color: var(--vvp-texto-3);
}
/* =========================================================================
 * Lista de convidados / acompanhantes
 * ========================================================================= */

.vvp-convidados {
	padding: var(--vvp-e4);
	border: 1px solid var(--vvp-borda);
	border-top: 3px solid var(--vvp-ouro);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra);
}
.vvp-conv-lista {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e2);
	margin-bottom: var(--vvp-e3);
}
/*
 * Linha de acompanhante. Fundo levemente destacado para as linhas não virarem
 * um paredão de caixas, e o número vira selo redondo em vez de algarismo solto.
 */
.vvp-conv-linha {
	display: grid;
	grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 1fr) 44px;
	gap: var(--vvp-e2);
	align-items: center;
	padding: var(--vvp-e2);
	border-radius: var(--vvp-raio-sm);
}
.vvp-conv-linha:nth-child(odd) { background: var(--vvp-fundo); }
.vvp-conv-linha__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--vvp-borda);
	color: var(--vvp-texto-2);
	font-size: var(--vvp-t-xs);
	font-weight: 700;
}
/*
 * O × chega discreto: em vermelho desde o repouso, ele puxava mais atenção que
 * os próprios campos de nome e telefone.
 */
.vvp-conv-linha__remover {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--vvp-raio-sm);
	background: transparent;
	color: var(--vvp-texto-3);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .12s, color .12s;
}
.vvp-conv-linha__remover:hover,
.vvp-conv-linha__remover:focus-visible {
	background: var(--vvp-erro-suave);
	color: var(--vvp-erro);
}
.vvp-conv-vazio {
	padding: var(--vvp-e4);
	margin-bottom: var(--vvp-e3);
	border: 1px dashed var(--vvp-borda-2);
	border-radius: var(--vvp-raio-sm);
	text-align: center;
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
}
.vvp-conv-previsto {
	display: flex;
	gap: var(--vvp-e2);
	align-items: flex-start;
	padding: var(--vvp-e2) var(--vvp-e3);
	margin-bottom: var(--vvp-e3);
	border-left: 3px solid var(--vvp-ouro);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-ouro-suave);
	font-size: var(--vvp-t-sm);
	color: #6b4d13;
}
.vvp-conv-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	align-items: center;
	padding-top: var(--vvp-e3);
	border-top: 1px solid var(--vvp-borda);
}
	.vvp-card__titulo { font-size: 22px; }
	.vvp-card__nome { font-size: var(--vvp-t-lg); }
	.vvp-conv-linha { grid-template-columns: 22px minmax(0, 1fr) 44px; }
	.vvp-conv-linha input:nth-of-type(2) { grid-column: 2 / 4; }
/* =========================================================================
 * Lista de "Desfazer entrada"
 *
 * Abre na mesma sobreposição do card de resultado, com as últimas entradas
 * para escolher. Cada item é um botão inteiro: alvo grande para o dedo.
 * ========================================================================= */

.vvp-desfazer-lista {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e2);
	margin-bottom: var(--vvp-e4);
}
.vvp-desfazer-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px var(--vvp-e3);
	align-items: center;
	width: 100%;
	min-height: var(--vvp-toque);
	padding: var(--vvp-e3) var(--vvp-e4);
	border: 1px solid var(--vvp-borda-2);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-superficie);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.vvp-desfazer-item:hover,
.vvp-desfazer-item:focus-visible {
	border-color: var(--vvp-erro);
	background: var(--vvp-erro-suave);
}
.vvp-desfazer-item__nome {
	grid-column: 1;
	font-size: var(--vvp-t-md);
	font-weight: 700;
	color: var(--vvp-texto);
	line-height: 1.25;
}
.vvp-desfazer-item__meta {
	grid-column: 1;
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
	line-height: 1.35;
}
.vvp-desfazer-item__acao {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding: var(--vvp-e1) var(--vvp-e3);
	border: 1px solid var(--vvp-erro);
	border-radius: 999px;
	color: var(--vvp-erro);
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	white-space: nowrap;
}
/*
 * Faixa neutra: usada quando o card não é resultado de uma leitura (lista de
 * desfazer, convidados, cadastro avulso). O filete dourado embaixo é o que
 * separa cabeçalho e corpo — sem ele, no tema escuro os dois verdes ficavam tão
 * próximos que o card parecia não ter cabeçalho.
 */
.vvp-card__faixa--sobria {
	background: linear-gradient(135deg, var(--vvp-marca) 0%, var(--vvp-marca-3) 100%);
	border-bottom: 3px solid var(--vvp-ouro);
}
.vvp-app.vvp-escuro .vvp-desfazer-item {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .14);
}
.vvp-app.vvp-escuro .vvp-desfazer-item:hover,
.vvp-app.vvp-escuro .vvp-desfazer-item:focus-visible {
	background: rgba(179, 38, 30, .18);
	border-color: #E4736B;
}
.vvp-app.vvp-escuro .vvp-desfazer-item__acao { border-color: #E4736B; color: #E4736B; }
/* =========================================================================
 * Tabelas dentro de um card em sobreposição
 *
 * O popup de convidados nascia com a tabela encostada nas bordas e as linhas
 * apertadas. Aqui ele passa a seguir os mesmos respiros do resto do sistema.
 * ========================================================================= */

.vvp-resultado .vvp-tabela-wrap {
	margin-bottom: var(--vvp-e4);
}
.vvp-resultado .vvp-tabela th,
.vvp-resultado .vvp-tabela td {
	padding: var(--vvp-e3) var(--vvp-e4);
}
.vvp-resultado .vvp-tabela .vvp-num {
	width: 48px;
    text-align: center;
}
/* ---- Bloco de atribuição no cartão do QR ---- */

.vvp-atribuicao {
	padding: var(--vvp-e3);
	margin: 0 0 var(--vvp-e4);
	border: 1px dashed var(--vvp-borda-2);
	border-radius: var(--vvp-raio-sm);
}
.vvp-atribuicao__tipos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	margin-bottom: var(--vvp-e3);
}
.vvp-chip-tipo {
	min-height: 44px;
	padding: var(--vvp-e2) var(--vvp-e4);
	border: 1px solid var(--vvp-borda-2);
	border-radius: 999px;
	background: var(--vvp-superficie);
	color: var(--vvp-texto);
	font-family: inherit;
	font-size: var(--vvp-t-base);
	font-weight: 600;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.vvp-chip-tipo--ativo {
	border-color: var(--vvp-ouro);
	background: var(--vvp-ouro-suave);
	color: var(--vvp-ouro-2);
}
.vvp-app.vvp-escuro .vvp-chip-tipo {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .16);
}
.vvp-app.vvp-escuro .vvp-chip-tipo--ativo {
	background: rgba(201, 155, 69, .18);
	border-color: var(--vvp-ouro);
	color: #F3E3C4;
}
/* ---- Passo 1 do cadastro extra: escolher o tipo de pessoa ---- */

.vvp-tipos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--vvp-e3);
	margin-bottom: var(--vvp-e4);
}
.vvp-tipo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 92px;
	padding: var(--vvp-e4);
	border: 1px solid var(--vvp-borda-2);
	border-left: 4px solid var(--vvp-ouro);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .12s, background-color .12s;
}
.vvp-tipo:hover,
.vvp-tipo:focus-visible {
	border-color: var(--vvp-acao);
	background: var(--vvp-hover-fundo);
}
.vvp-tipo__nome {
	font-size: var(--vvp-t-md);
	font-weight: 700;
	color: var(--vvp-texto);
}
.vvp-tipo__dica {
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
	line-height: 1.35;
}
.vvp-app.vvp-escuro .vvp-tipo {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .14);
	border-left-color: var(--vvp-ouro);
}
/* Campo numérico curto: "quantos acompanhantes" não precisa de linha inteira. */
.vvp-campo--curto { max-width: 220px; margin-bottom: var(--vvp-e3); }
/* ---- Atribuição dentro de tabelas ---- */

.vvp-atrib { display: inline; }
.vvp-atrib b { font-weight: 700; color: var(--vvp-texto-2); }
.vvp-atrib-sem { color: var(--vvp-texto-3); }
/* "antes: Fulana" em linha própria e miúdo: é contexto, não a informação. */
.vvp-atrib-antes {
	display: block;
	font-size: var(--vvp-t-xs);
	color: var(--vvp-texto-3);
}

/* =========================================================================
 * IMPRESSÃO
 * ========================================================================= */

@media print {
	.vvp-nao-imprimir,
	.vvp-cabecalho__acoes,
	.vvp-filtros__acoes,
	.vvp-paginacao,
	.vvp-toast,
	.vvp-overlay,
	.vvp-abas,
	.vvp-modal {
		display: none !important;
	}

	/* Na impressão, todos os painéis saem — não só a aba aberta. */
	.vvp-app .vvp-painel[hidden] { display: block !important; }

	.vvp-app {
		max-width: none;
		padding: 0;
		font-size: 10.5pt;
		color: #000;
		background: #fff !important;
	}

	.vvp-cabecalho {
		padding: 0 0 6px;
		border: 0;
		border-bottom: 2px solid #000;
		border-radius: 0;
		background: #fff !important;
		color: #000 !important;
		box-shadow: none;
	}

	.vvp-cabecalho h1 { color: #000 !important; }
	.vvp-cabecalho__sub { color: #444 !important; }

	.vvp-bloco,
	.vvp-cartao,
	.vvp-tabela-wrap,
	.vvp-card-num {
		border: 1px solid #999 !important;
		box-shadow: none !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.vvp-cards { grid-template-columns: repeat(4, 1fr) !important; }
	.vvp-card-num--destaque { background: #fff !important; color: #000 !important; }
	.vvp-card-num--destaque .vvp-card-num__valor,
	.vvp-card-num--destaque .vvp-card-num__rotulo,
	.vvp-card-num--destaque .vvp-card-num__nota { color: #000 !important; }

	.vvp-tabela-wrap { overflow: visible !important; }
	.vvp-tabela { min-width: 0; font-size: 9pt; }
	.vvp-tabela th {
		position: static;
		background: #e8e8e8 !important;
		color: #000 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.vvp-tabela thead { display: table-header-group; }
	.vvp-tabela tr { break-inside: avoid; page-break-inside: avoid; }

	.vvp-barra__preenche {
		background: #666 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}