/*
 * Tela da portaria — desenhada para iPad, retrato e paisagem.
 *
 * A ideia do layout: em PAISAGEM (≥1024px, que é todo iPad deitado) a tela vira
 * duas colunas — operação à esquerda, situação à direita. O operador vê o placar
 * e as últimas entradas sem rolar, enquanto lê os QR Codes. Em RETRATO vira uma
 * coluna só, na ordem em que se usa: ler → confirmar → conferir.
 *
 * Depende de vvp-base.css (tokens, tipografia, botões, abas, overlay).
 */

/* =========================================================================
 * Estrutura de duas colunas
 * ========================================================================= */

/*
 * O painel distribui os blocos com espaçamento PRÓPRIO.
 *
 * Antes o respiro vinha do `gap` da grade de operação; quando a configuração
 * saiu da grade para virar faixa de largura total, ela ficou colada nos botões
 * e no placar. Com o espaçamento no painel, mover blocos não quebra mais isso.
 */
.vvp-painel {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e5);
}

/*
 * `stretch`, não `start`: a coluna da direita (o placar) acompanha a altura da
 * esquerda em vez de flutuar com a altura do próprio conteúdo, que deixava um
 * degrau entre as duas.
 */
.vvp-operacao {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vvp-e5);
	align-items: stretch;
}

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

/* O placar preenche a coluna inteira e distribui o conteúdo. */
.vvp-coluna--lado .vvp-placar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

/* iPad deitado e desktop: duas colunas. */
@media (min-width: 1024px) {
	.vvp-operacao {
		grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
	}

	/*
	 * Com o container em 1440px a coluna da operação passa de 800px. Um campo
	 * de busca desse tamanho fica esquisito de ler, então ele para antes.
	 */
	.vvp-busca { max-width: 760px; }

	/*
	 * Sem `sticky` aqui: ele conflita com esticar a coluna até a altura da
	 * vizinha, e em paisagem o placar já fica visível sem rolar.
	 */
}

/* =========================================================================
 * Barra de controle
 * ========================================================================= */

.vvp-controle {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--vvp-e3) var(--vvp-e4);
	align-items: end;
	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);
}

/* Rótulo da caixa: dá contexto ao bloco em vez de deixá-lo solto na página. */
.vvp-controle__titulo {
	grid-column: 1 / -1;
	padding-bottom: var(--vvp-e1);
	margin-bottom: calc(var(--vvp-e1) * -1);
}

.vvp-controle__sync {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2) var(--vvp-e3);
	align-items: center;
	justify-content: space-between;
	/*
	 * Recuo negativo faz o rodapé encostar nas bordas da caixa.
	 *
	 * O `max-width: none` é essencial: a regra global `.vvp-app * { max-width:
	 * 100% }` limitava a faixa à largura da área de conteúdo, e como o recuo
	 * negativo a empurra para a esquerda, sobrava um vão cinza à direita.
	 */
	max-width: none;
	margin: var(--vvp-e2) calc(var(--vvp-e4) * -1) calc(var(--vvp-e4) * -1);
	padding: var(--vvp-e3) var(--vvp-e4);
	border-top: 1px solid var(--vvp-borda);
	border-radius: 0 0 var(--vvp-raio) var(--vvp-raio);
	background: var(--vvp-fundo);
}

.vvp-sync-info {
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
	line-height: 1.45;
}

.vvp-sync-info strong { color: var(--vvp-texto); font-weight: 650; }
.vvp-sync-info--rodando { color: var(--vvp-texto-forte); font-weight: 600; }

/* =========================================================================
 * Placar ao vivo
 * ========================================================================= */

.vvp-placar {
	padding: var(--vvp-e4) var(--vvp-e5);
	border-left: 4px solid var(--vvp-ouro);
	border-radius: var(--vvp-raio);
	background: linear-gradient(135deg, var(--vvp-marca) 0%, var(--vvp-marca-3) 100%);
	color: #fff;
	box-shadow: var(--vvp-sombra);
}

/*
 * `center`, não `baseline`: pela linha de base o algarismo de 44px e o rótulo
 * de 13px ficavam desencontrados — o bloco de texto caía abaixo do centro do
 * número. Centralizado, os dois leem como uma coisa só, com 1 ou com 3 dígitos.
 */
.vvp-placar__topo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2) var(--vvp-e4);
	align-items: center;
}

.vvp-placar__numero {
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1.5px;
	color: var(--vvp-ouro);
}

.vvp-placar__rotulo {
	font-size: var(--vvp-t-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, .9);
}

.vvp-placar__evento {
	display: block;
	margin-top: 2px;
	font-size: var(--vvp-t-xs);
	color: rgba(255, 255, 255, .6);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

/* Três números secundários, alinhados numa faixa. */
.vvp-placar__detalhe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	gap: var(--vvp-e2);
	margin-top: var(--vvp-e3);
	padding-top: var(--vvp-e3);
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.vvp-placar__item { min-width: 0; }

.vvp-placar__item b {
	display: block;
	font-size: var(--vvp-t-lg);
	font-weight: 700;
	line-height: 1.2;
}

/* Quem ainda não chegou é a métrica de acompanhamento — destacada em ouro. */
.vvp-placar__item--faltam b { color: var(--vvp-ouro); }

.vvp-placar__item span {
	display: block;
	font-size: var(--vvp-t-xs);
	color: rgba(255, 255, 255, .62);
	line-height: 1.3;
}

/* Piscada rápida quando o número sobe — confirma a entrada de longe. */
.vvp-placar--pulou .vvp-placar__numero { animation: vvp-pulo .5s ease-out; }

@keyframes vvp-pulo {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.14); color: #fff; }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.vvp-placar--pulou .vvp-placar__numero { animation: none; }
}

.vvp-chip {
	min-height: 40px;
	padding: var(--vvp-e1) var(--vvp-e3);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-family: inherit;
	font-size: var(--vvp-t-sm);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

/* Ligado = contorno e texto dourados, não um bloco maciço de ouro. */
.vvp-chip[aria-pressed="true"] {
	background: rgba(201, 155, 69, .18);
	border-color: var(--vvp-ouro);
	color: #F3E3C4;
	font-weight: 700;
}

/* =========================================================================
 * Selo de rede e aviso de sincronização
 * ========================================================================= */

.vvp-status-rede {
	display: inline-flex;
	align-items: center;
	gap: var(--vvp-e2);
	padding: var(--vvp-e1) var(--vvp-e3);
	border-radius: 999px;
	background: var(--vvp-erro);
	color: #fff;
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.vvp-status-rede::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: vvp-piscar 1.4s ease-in-out infinite;
}

@keyframes vvp-piscar { 50% { opacity: .25; } }

.vvp-aviso-sync {
	display: flex;
	gap: var(--vvp-e3);
	align-items: flex-start;
	padding: var(--vvp-e3) var(--vvp-e4);
	border: 1px solid rgba(201, 155, 69, .45);
	border-left: 4px solid var(--vvp-ouro);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-ouro-suave);
	color: #6b4d13;
	font-size: var(--vvp-t-sm);
	font-weight: 600;
	line-height: 1.45;
}

.vvp-aviso-sync__icone { flex: 0 0 auto; font-size: var(--vvp-t-lg); line-height: 1.2; }

/* =========================================================================
 * Ações principais
 * ========================================================================= */

.vvp-acoes {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e4);
}

/*
 * As duas formas de dar entrada ficam lado a lado, do mesmo tamanho: o operador
 * não precisa procurar qual é qual. Em tela estreita empilham, o QR primeiro.
 */
.vvp-acoes__duplo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vvp-e3);
}

/* Lado a lado sobra menos largura: título um degrau menor, caixa um pouco mais alta. */
.vvp-acoes__duplo .vvp-btn {
	width: 100%;
	min-height: 88px;
	font-size: var(--vvp-t-lg);
}

/* Título + legenda dentro do botão, empilhados. */
.vvp-btn__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.2;
}

.vvp-btn__texto small {
	font-size: var(--vvp-t-xs);
	font-weight: 500;
	letter-spacing: .3px;
	opacity: .78;
	text-transform: none;
}

/*
 * Campo e botão como UM controle: bordas encostadas e cantos arredondados só
 * nas pontas. Antes eram duas caixas soltas, com contornos de peso diferente.
 */
.vvp-busca {
	display: flex;
	align-items: stretch;
	min-height: var(--vvp-toque);
	position: relative;
	border: 1px solid var(--vvp-borda-2);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	transition: border-color .12s, box-shadow .12s;
}

.vvp-busca:focus-within {
	border-color: var(--vvp-acao);
	box-shadow: 0 0 0 3px var(--vvp-foco);
}

.vvp-busca__lupa {
	display: flex;
	align-items: center;
	/* Respiro dos DOIS lados: só com recuo à esquerda o texto nascia colado. */
	padding: 0 var(--vvp-e3) 0 var(--vvp-e4);
	color: var(--vvp-texto-3);
	pointer-events: none;
}

/*
 * Dentro do grupo o campo não tem caixa própria: quem desenha a borda é o
 * `.vvp-busca`. A altura vem do grupo, não do input — assim ele acompanha o
 * padrão dos demais campos em vez de ter uma altura só dele.
 */
.vvp-app .vvp-busca__campo {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: var(--vvp-e2);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: var(--vvp-t-md);
}

.vvp-app .vvp-busca__campo:focus { border: 0; box-shadow: none; }

.vvp-busca__limpar {
	flex: 0 0 auto;
	width: 44px;
	border: 0;
	background: transparent;
	color: var(--vvp-texto-3);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.vvp-busca__limpar:hover { color: var(--vvp-texto); }

.vvp-app .vvp-busca__acao {
	flex: 0 0 auto;
	min-height: auto;
	border: 0;
	border-left: 1px solid var(--vvp-borda);
	border-radius: 0 var(--vvp-raio) var(--vvp-raio) 0;
	background: var(--vvp-fundo);
	color: var(--vvp-texto);
	padding-inline: var(--vvp-e5);
}

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

/* =========================================================================
 * Scanner
 * ========================================================================= */

.vvp-scanner {
	overflow: hidden;
	border-radius: var(--vvp-raio);
	background: var(--vvp-marca-2);
	box-shadow: var(--vvp-sombra);
}

.vvp-scanner__area { width: 100%; min-height: 240px; }

/* A lib injeta um <video> — força o encaixe correto no container. */
.vvp-scanner__area video {
	width: 100% !important;
	height: auto !important;
	display: block;
}

.vvp-scanner__area img[alt="Info icon"],
.vvp-scanner__area #qr-shaded-region { border-width: 22px !important; }

.vvp-scanner__barra {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e3);
	align-items: center;
	justify-content: space-between;
	padding: var(--vvp-e3) var(--vvp-e4);
	border-top: 2px solid var(--vvp-ouro);
	background: var(--vvp-marca);
}

.vvp-scanner__dica { color: rgba(255, 255, 255, .82); font-size: var(--vvp-t-sm); }

.vvp-scanner__barra .vvp-btn--secundario {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}

/* =========================================================================
 * Cartão de resultado
 * ========================================================================= */





/*
 * O NOME é o que o porteiro precisa ler de longe, então ele encabeça a faixa.
 * O título da situação vem logo abaixo, e a frase de apoio centralizada.
 */

















/* =========================================================================
 * Escolha de evento (mesmo código nos dois eventos)
 * ========================================================================= */

.vvp-opcoes-evento {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e2);
	margin-bottom: var(--vvp-e4);
}

.vvp-opcao-evento {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2) var(--vvp-e3);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 64px;
	padding: var(--vvp-e3) var(--vvp-e4);
	border: 1.5px solid var(--vvp-borda-2);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-superficie);
	font-family: inherit;
	font-size: var(--vvp-t-base);
	text-align: left;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}

.vvp-opcao-evento:hover { border-color: var(--vvp-ouro); background: var(--vvp-ouro-suave); }
.vvp-opcao-evento__evento { font-weight: 700; color: var(--vvp-texto-forte); }

.vvp-opcao-evento__meta {
	display: block;
	width: 100%;
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
}

/* =========================================================================
 * Lista de busca por nome
 * ========================================================================= */

/*
 * Sugestões ancoradas ao campo, não empurrando a página.
 *
 * O lado (abaixo ou acima) é decidido no JavaScript pela altura REALMENTE
 * visível: no iPad em retrato o teclado virtual come metade da tela, e uma
 * lista fixada embaixo nasceria escondida atrás dele.
 */
.vvp-lista-busca {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--vvp-borda-2);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra-alta);
}

.vvp-lista-busca--acima {
	top: auto;
	bottom: calc(100% + 6px);
}

.vvp-item-busca {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 60px;
	padding: var(--vvp-e3) var(--vvp-e4);
	border: 0;
	border-bottom: 1px solid var(--vvp-borda);
	background: none;
	font-family: inherit;
	font-size: var(--vvp-t-base);
	text-align: left;
	cursor: pointer;
}

.vvp-item-busca:last-child { border-bottom: 0; }

/* Mesmo destaque no toque, no mouse e na navegação por setas. */
.vvp-item-busca:hover,
.vvp-item-busca--ativo {
	background: var(--vvp-hover-fundo);
	color: var(--vvp-hover-texto);
}
.vvp-item-busca__nome { font-weight: 650; }

.vvp-item-busca__meta {
	display: block;
	font-size: var(--vvp-t-sm);
	font-weight: 400;
	color: var(--vvp-texto-2);
}











/* =========================================================================
 * Últimas entradas (tabela com cabeçalho)
 * ========================================================================= */

/*
 * Faixa de largura total, fora das duas colunas. Sem min-width e com larguras
 * proporcionais: a tabela ocupa 100% e não rola na horizontal em tablet nenhum.
 */
.vvp-ultimos { margin-top: var(--vvp-e4); }

.vvp-ultimos__lista {
	width: 100%;
	overflow: visible;
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra);
}

/*
 * A tabela é a mesma nas abas Portaria e Entradas, então as larguras se
 * penduram na CLASSE da tabela, não no container: antes viviam em
 * .vvp-ultimos__lista e a aba nova nasceria com outro layout de colunas.
 */
.vvp-tabela--entradas {
	min-width: 0;
	table-layout: fixed;
}

.vvp-tabela--entradas td { vertical-align: middle; }

/* Nome ocupa a sobra; as demais colunas têm largura previsível. */
.vvp-tabela--entradas .vvp-col-nome    { width: auto; }
.vvp-tabela--entradas .vvp-col-evento  { width: 22%; }
.vvp-tabela--entradas .vvp-col-conv    { width: 96px; }
.vvp-tabela--entradas .vvp-col-hora    { width: 84px; }
.vvp-tabela--entradas .vvp-col-origem  { width: 104px; }

/*
 * Em tela estreita as colunas SOMEM de verdade (th e td), em vez de ficar com
 * largura zero. Zerar a largura de um <col> não esconde a célula: o texto
 * continua ali e se enfileira uma letra por linha — foi o que aconteceu com
 * "Direcionado para" no celular, uma coluna de letras soltas.
 *
 * Ordem de sacrifício, do menos ao mais importante na portaria:
 * evento e origem primeiro, depois a contagem de convidados.
 */
@media (max-width: 767px) {
	.vvp-tabela--entradas .vvp-col-evento,
	.vvp-tabela--entradas th:nth-child(2),
	.vvp-tabela--entradas td:nth-child(2),
	.vvp-tabela--entradas .vvp-col-origem,
	.vvp-tabela--entradas th:nth-child(6),
	.vvp-tabela--entradas td:nth-child(6) { display: none; }

	.vvp-tabela--entradas .vvp-col-conv { width: 74px; }
	.vvp-tabela--entradas .vvp-col-hora { width: 74px; }
}

@media (max-width: 520px) {
	/* A contagem de convidados também sai: o nome precisa do espaço. */
	.vvp-tabela--entradas .vvp-col-conv,
	.vvp-tabela--entradas th:nth-child(4),
	.vvp-tabela--entradas td:nth-child(4) { display: none; }

	/*
	 * "Direcionado para" é o cabeçalho mais comprido e não cabe em uma linha
	 * nessa largura. Deixar quebrar é melhor que alargar a coluna: o espaço
	 * roubado sairia do nome, que é o que se lê de verdade.
	 */
	.vvp-tabela--entradas th { white-space: normal; }
}

.vvp-ultimo-nome { font-weight: 650; }



/* =========================================================================
 * Aba "Participantes" (consulta da base sincronizada)
 * ========================================================================= */

.vvp-part__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vvp-e3);
}

/* Em tela larga, dois cartões por linha aproveitam o espaço do iPad deitado. */
@media (min-width: 1024px) {
	.vvp-part__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vvp-part-card {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e2);
	padding: var(--vvp-e3) var(--vvp-e4);
	border: 1px solid var(--vvp-borda);
	border-left: 4px solid var(--vvp-borda-2);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra);
}

.vvp-part-card--pago { border-left-color: var(--vvp-ok); }
.vvp-part-card--naopago { border-left-color: var(--vvp-erro); }

.vvp-part-card__topo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2) var(--vvp-e3);
	align-items: flex-start;
	justify-content: space-between;
}

.vvp-part-card__nome { font-size: var(--vvp-t-md); font-weight: 700; line-height: 1.25; }

.vvp-part-card__meta {
	margin: 2px 0 0;
	font-size: var(--vvp-t-xs);
	color: var(--vvp-texto-2);
}

.vvp-part-card__selos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e1);
	justify-content: flex-end;
}

.vvp-part-card__campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--vvp-e2) var(--vvp-e3);
	margin: 0;
	padding: var(--vvp-e2) var(--vvp-e3);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-fundo);
}

.vvp-part-card__campos > div { min-width: 0; }

.vvp-part-card__campos dt {
	margin: 0;
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--vvp-texto-3);
}

.vvp-part-card__campos dd {
	margin: 1px 0 0;
	font-size: var(--vvp-t-sm);
	font-weight: 600;
}

.vvp-part-card__sem-campos {
	font-size: var(--vvp-t-xs);
	font-style: italic;
	color: var(--vvp-texto-3);
}

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

@media (max-width: 640px) {
	.vvp-acoes__duplo { grid-template-columns: 1fr; }
	.vvp-placar__numero { font-size: 38px; }
	.vvp-placar__detalhe { grid-template-columns: 1fr; gap: var(--vvp-e1); }
	/*
	 * Em celular o grupo de busca empilha: campo em cima, botão embaixo.
	 * A lupa sai — empilhada ela virava uma faixa vazia de 18px em cima do
	 * campo, parecendo um pedaço quebrado da interface. O texto de exemplo do
	 * campo já diz o que digitar.
	 */
	.vvp-busca { flex-direction: column; }
	.vvp-busca__lupa { display: none; }
	.vvp-busca .vvp-btn { width: 100%; }
}














/* =========================================================================
 * v2.0 — atribuição, tipos de pessoa e botões do rodapé de configuração
 * ========================================================================= */

.vvp-controle__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	align-items: center;
}

/* Interruptor do polling ligado: verde discreto, não dourado. */
#vvp-btn-polling[aria-pressed="true"] {
	border-color: var(--vvp-ok);
	color: var(--vvp-ok);
}

.vvp-app.vvp-escuro #vvp-btn-polling[aria-pressed="true"] {
	border-color: #4FA97C;
	color: #4FA97C;
}














/* =========================================================================
 * v2.1 — barra de estado, atribuição na tabela e aba "Participantes Dia"
 * ========================================================================= */

/*
 * Barra de ESTADO logo abaixo das abas.
 *
 * O nome é `vvp-barra-estado`, não `vvp-barra`: essa última já existe no CSS de
 * relatórios (a barra do gráfico de chegadas, que é `display: grid`). Numa
 * página que carregue os dois arquivos, o grid vencia e os elementos daqui se
 * sobrepunham. Substituiu o rodapé do antigo card de
 * configuração: sincronização e polling valem para a página inteira, não só
 * para a aba Portaria.
 */
.vvp-barra-estado {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2) var(--vvp-e3);
	align-items: center;
	justify-content: space-between;
	/* Sem base mínima o texto da sincronização era espremido em quatro linhas. */
	padding: var(--vvp-e3) var(--vvp-e4);
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio);
	background: var(--vvp-fundo);
}

/*
 * `min-width` e não só `flex-basis`: com `flex-shrink` ativo a base era ignorada
 * e o texto virava uma coluna de cinco linhas ao lado dos botões.
 */
.vvp-barra-estado .vvp-sync-info {
	flex: 1 1 auto;
	min-width: 240px;
}

.vvp-barra-estado__acoes {
	/* `0 0 auto`: o bloco ocupa a largura dos botões e devolve o resto ao texto. */
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	align-items: center;
}

@media (max-width: 640px) {
	.vvp-barra-estado__acoes { width: 100%; }
	.vvp-barra-estado__acoes .vvp-btn { flex: 1 1 auto; }
}



/* ---- Contadores por tipo na aba do dia ---- */

.vvp-dia-resumo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2);
	margin-bottom: var(--vvp-e4);
}

.vvp-dia-selo {
	display: flex;
	align-items: baseline;
	gap: var(--vvp-e2);
	padding: var(--vvp-e2) var(--vvp-e3);
	border: 1px solid var(--vvp-borda);
	border-radius: 999px;
	background: var(--vvp-superficie);
}

.vvp-dia-selo b {
	font-size: var(--vvp-t-lg);
	font-weight: 800;
	color: var(--vvp-texto-forte);
}

.vvp-dia-selo span {
	font-size: var(--vvp-t-xs);
	color: var(--vvp-texto-2);
}

.vvp-app.vvp-escuro .vvp-dia-selo {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .14);
}

.vvp-app.vvp-escuro .vvp-barra-estado {
	background: rgba(255, 255, 255, .03);
	border-color: rgba(255, 255, 255, .12);
}

/* Coluna de direcionamento na tabela de entradas. */
.vvp-col-atrib { width: 22%; }

@media (max-width: 767px) {
	/* Sem a coluna de evento sobra espaço: o direcionamento fica e ganha largura. */
	.vvp-tabela--entradas .vvp-col-atrib { width: 38%; }
}

/* =========================================================================
 * Aba "Participantes Dia" em tablet
 *
 * São 7 colunas. Em retrato a tabela rolava por dentro; escondendo Instagram
 * (que aparece na ficha ao tocar na linha) ela cabe sem rolagem.
 * ========================================================================= */

@media (max-width: 1023px) {
	#vvp-dia-lista .vvp-tabela th:nth-child(5),
	#vvp-dia-lista .vvp-tabela td:nth-child(5) { display: none; }

	#vvp-dia-lista .vvp-tabela th,
	#vvp-dia-lista .vvp-tabela td { padding: var(--vvp-e2) var(--vvp-e3); }
}

@media (max-width: 767px) {
	/* Telefone também sai: fica na ficha. */
	#vvp-dia-lista .vvp-tabela th:nth-child(4),
	#vvp-dia-lista .vvp-tabela td:nth-child(4) { display: none; }
}

/* =========================================================================
 * Respiros do topo da página
 *
 * Barra de estado e aviso amarelo falam da MESMA coisa (a sincronização), por
 * isso ficam perto um do outro e mais longe das abas — o espaço agrupa.
 * A margem é própria de cada um porque em algumas telas o aviso mora fora do
 * painel, e ali o `gap` do painel não alcança.
 * ========================================================================= */

.vvp-barra-estado { margin-bottom: var(--vvp-e3); }
.vvp-aviso-sync { margin-bottom: var(--vvp-e5); }

/* A nota explicativa das abas também precisa descolar do que vem antes. */
.vvp-painel > .vvp-nota { margin: var(--vvp-e2) 0 var(--vvp-e4); }