/*
 * CSS do protótipo snapshot: só o que o shell.css não tem.
 *
 * O card de estado (.snap-state) tem uma faixa lateral colorida por estado —
 * pendente, processado, expirado. O .hint do shell é sempre brand; aqui a cor
 * precisa distinguir o estado, então é peça própria. Tudo via token de status
 * do ben-10, nada de cor à mão.
 */

.snap-state {
	display: flex;
	align-items: flex-start;
	gap: var(--benup-semantic-spacing-general-lg);
	padding: var(--benup-semantic-spacing-general-xl);
	border: 1px solid var(--benup-semantic-color-border-neutral-primary);
	border-left-width: 3px;
	border-radius: var(--benup-semantic-spacing-radius-2xl);
	background: var(--benup-semantic-color-background-neutral-primary);
}

.snap-state-body {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-xxs);
	flex: 1;
}

.snap-state-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--benup-semantic-spacing-radius-full);
}

/* pendente / atenção */
.snap-state--pendente {
	border-left-color: var(--benup-semantic-color-border-status-warning-primary);
}
.snap-state-icon--pendente {
	background: var(--benup-semantic-color-background-status-warning-subtle);
	color: var(--benup-semantic-color-icon-status-warning-primary);
}

/* processado / sucesso */
.snap-state--ok {
	border-left-color: var(--benup-semantic-color-border-status-success-primary);
}
.snap-state-icon--ok {
	background: var(--benup-semantic-color-background-status-success-subtle);
	color: var(--benup-semantic-color-icon-status-success-primary);
}

/* expirado / erro */
.snap-state--expirado {
	border-left-color: var(--benup-semantic-color-border-status-danger-primary);
}
.snap-state-icon--expirado {
	background: var(--benup-semantic-color-background-status-danger-subtle);
	color: var(--benup-semantic-color-icon-status-danger-primary);
}

/* Os três baldes da conciliação: ativar, revogar, já bate. */
.conc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--benup-semantic-spacing-general-lg);
}

.conc-card {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-xs);
	padding: var(--benup-semantic-spacing-general-lg);
	border: 1px solid var(--benup-semantic-color-border-neutral-primary);
	border-radius: var(--benup-semantic-spacing-radius-xl);
	background: var(--benup-semantic-color-background-neutral-primary);
}

.conc-card-value {
	font-family: var(--benup-primitive-type-family-serif);
	font-size: var(--benup-styles-fontsize-7);
	font-weight: 700;
	line-height: 1.1;
	color: var(--benup-semantic-color-text-neutral-primary);
}

@media (max-width: 640px) {
	.conc-grid {
		grid-template-columns: 1fr;
	}
}