@charset "UTF-8";
/**
 * PROGEM — Tela de perfil do usuário (Poseidon 15 / PrimeFaces 15).
 * Apenas layout/espaçamento sobre o padrão de cards do tema. Sem cores
 * hardcoded — somente tokens Poseidon (--surface-*, --text-color, --primary-color)
 * com fallback --progem-*. Namespace .prog- + BEM.
 */

.prog-perfil__main {
	margin-top: .75rem;
}

/* ---------------- Cabeçalho de identidade ---------------- */

.prog-perfil__header.card {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.prog-perfil__identidade {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: 1 1 18rem;
	min-width: 0;
}

.prog-perfil__avatar.ui-avatar {
	width: 6.5rem;
	height: 6.5rem;
	flex-shrink: 0;
}

.prog-perfil__avatar.ui-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prog-perfil__identidade-textos {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}

.prog-perfil__nome {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--text-color, inherit);
	word-break: break-word;
}

.prog-perfil__email {
	margin: 0;
	font-size: .9rem;
	color: var(--text-color-secondary, #6b7280);
	word-break: break-word;
}

.prog-perfil__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .4rem;
}

/* ---------------- Ações da foto ---------------- */

.prog-perfil__acoes-foto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	flex: 1 1 16rem;
}

.prog-perfil__acoes-foto .ui-fileupload-buttonbar {
	padding: 0;
	border: 0;
	background: transparent;
}

@media screen and (max-width: 640px) {
	.prog-perfil__acoes-foto {
		justify-content: flex-start;
		width: 100%;
	}
	.prog-perfil__identidade {
		flex: 1 1 100%;
	}
}

/* ---------------- Sidebars (footer de ações) ---------------- */

.prog-perfil-sidebar__footer-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	width: 100%;
	box-sizing: border-box;
}

/* ---------------- Pré-visualização (live preview) ---------------- */

.prog-perfil__previa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .65rem;
}

.prog-perfil__previa-frame {
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--surface-border, #dfe7ef);
	background: var(--surface-100, #f4f6fb);
}

.prog-perfil__previa-frame .prog-perfil__previa-img,
.prog-perfil__previa-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.prog-perfil__previa-badge {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	font-weight: 600;
	padding: .15rem .6rem;
	border-radius: 999px;
	color: var(--primary-color, var(--progem-color-primary, #2f8ee5));
	background: color-mix(in srgb, var(--primary-color, #2f8ee5) 12%, transparent);
}

/* ---------------- Origem da foto (seletor de modo) ---------------- */

.prog-perfil__modo.ui-selectonebutton {
	display: flex;
}

.prog-perfil__modo.ui-selectonebutton .ui-button {
	flex: 1 1 0;
	justify-content: center;
}

/* ---------------- Selfie (p:photoCam) ---------------- */

.prog-perfil__photo-cam-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.prog-perfil__photo-cam-wrap .prog-perfil__photo-cam,
.prog-perfil__photo-cam-wrap .ui-photocam,
.prog-perfil__photo-cam-wrap video {
	width: 100%;
	max-width: 20rem;
	height: auto;
	border-radius: var(--border-radius, 0.375rem);
}

.prog-perfil__photo-cam-wrap .ui-photocam {
	overflow: hidden;
	border: 1px solid var(--surface-border, #dfe7ef);
	background: var(--surface-100, #f4f6fb);
}

/* ---------------- Assinatura ---------------- */

.prog-perfil__assinatura-preview {
	width: 100%;
	max-width: 18rem;
	aspect-ratio: 5 / 2;
	border-radius: 8px;
	border: 1px solid var(--surface-border, #dfe7ef);
	background-color: var(--surface-100, #f4f6fb);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.prog-perfil__assinatura-pad {
	width: 100%;
	max-width: 100%;
}

/* ---------------- Aparência (configurador de tema embutido) ---------------- */

.prog-perfil-aparencia__label {
	display: block;
	font-weight: 600;
	margin-bottom: .5rem;
	color: var(--text-color, inherit);
}

.prog-perfil-aparencia__hint {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--text-color-secondary, #6b7280);
}

.prog-perfil-aparencia__cores {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.prog-perfil-aparencia__cor.ui-commandlink {
	position: relative;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--surface-border, #dfe7ef);
	transition: transform .15s ease, box-shadow .15s ease;
}

.prog-perfil-aparencia__cor.ui-commandlink:hover,
.prog-perfil-aparencia__cor.ui-commandlink:focus {
	transform: translateY(-2px);
	box-shadow: 0 0 0 2px var(--primary-color, var(--progem-color-primary, #2f8ee5));
}

.prog-perfil-aparencia__cor-amostra {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.prog-perfil-aparencia__cor-check {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--surface-0, #fff);
	font-size: .85rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
	.prog-perfil__avatar.ui-avatar,
	.prog-perfil-aparencia__cor.ui-commandlink {
		transition: none;
	}
}

/* ---------------- Alterar senha (LGPD / força) ---------------- */

.prog-perfil-senha__field .ui-password {
	width: 100%;
}

.prog-perfil-senha__field > .ui-message {
	display: block;
	margin-top: .35rem;
}

.prog-perfil-senha__requisitos {
	margin-top: .75rem;
	padding: .75rem 1rem;
	border-radius: var(--border-radius, 0.375rem);
	border: 1px solid var(--surface-border, #dfe7ef);
	background: var(--surface-100, #f4f6fb);
}

.prog-perfil-senha__requisitos-titulo {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .5rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--text-color, inherit);
}

.prog-perfil-senha__requisitos-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	color: var(--text-color-secondary, #6b7280);
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.prog-perfil-senha__requisito {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	line-height: 1.35;
}

.prog-perfil-senha__requisito > i.fas {
	flex-shrink: 0;
	width: 1rem;
	margin-top: .12rem;
	text-align: center;
	font-size: .8rem;
}

.prog-perfil-senha__requisito--ok > i.fas {
	color: var(--cor-success, var(--green-600, #16a34a));
}

.prog-perfil-senha__requisito--pendente > i.fas {
	color: var(--cor-danger, var(--red-600, #dc2626));
}

.prog-perfil-senha__requisito--ok > span {
	color: var(--text-color, inherit);
}