/**
 * Ficha do missionário em popup.
 *
 * Mesmo princípio da barra de busca: nenhuma cor escolhida aqui — tudo vem das
 * variáveis do A12 Paletas (`--a12-*`), com os globais do kit como reserva.
 */

.a12-red-abre-ficha {
	cursor: pointer;
}

.a12-red-abre-ficha:focus-visible {
	outline: 2px solid var( --a12-principal, var( --e-global-color-a12marca, #2f957c ) );
	outline-offset: 3px;
}

.a12-red-ficha {
	--a12-red-acao: var( --a12-secundaria, var( --e-global-color-a12marcaescura, #1b5547 ) );
	--a12-red-realce: var( --a12-principal, var( --e-global-color-a12marca, #2f957c ) );
	--a12-red-texto: var( --e-global-color-text, #454545 );
	--a12-red-fundo-suave: var( --a12-fundo-minimo, var( --e-global-color-a12superficiesutil, #edf9f6 ) );

	width: min( 920px, calc( 100vw - 32px ) );
	max-height: calc( 100vh - 64px );
	padding: 0;
	border: 0;
	border-radius: 24px;
	background-color: #fff;
	color: var( --a12-red-texto );
	font-family: inherit;
	overflow: hidden;
}

.a12-red-ficha::backdrop {
	background-color: rgba( 17, 17, 17, 0.55 );
}

.a12-red-ficha .a12-red-ficha__fechar {
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba( 255, 255, 255, 0.9 );
	color: var( --a12-red-acao );
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.a12-red-ficha .a12-red-ficha__fechar:hover {
	background-color: var( --a12-red-fundo-suave );
}

.a12-red-ficha__corpo {
	display: grid;
	grid-template-columns: minmax( 0, 300px ) minmax( 0, 1fr );
	max-height: calc( 100vh - 64px );
	overflow: hidden auto;
}

.a12-red-ficha__foto {
	background-color: var( --a12-red-fundo-suave );
}

.a12-red-ficha__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.a12-red-ficha__dados {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 40px 40px 36px;
}

.a12-red-ficha .a12-red-ficha__nome {
	margin: 0;
	color: var( --a12-red-acao );
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
}

/* O tema tem regras próprias para texto dentro de diálogos; daí a
   especificidade e os pesos explícitos daqui para baixo. */
.a12-red-ficha .a12-red-ficha__comunidade {
	margin: 0;
	color: var( --a12-red-texto );
	font-weight: 600;
}

.a12-red-ficha .a12-red-ficha__local {
	margin: 0;
	color: var( --a12-red-texto );
	font-weight: 400;
	opacity: 0.8;
}

.a12-red-ficha__datas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 8px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid color-mix( in srgb, var( --a12-red-texto ) 18%, transparent );
}

.a12-red-ficha .a12-red-ficha__datas dt {
	color: var( --a12-red-acao );
	font-size: 0.8125rem;
	font-weight: 600;
}

.a12-red-ficha .a12-red-ficha__datas dd {
	margin: 2px 0 0;
	color: var( --a12-red-texto );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.a12-red-ficha .a12-red-ficha__texto {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid color-mix( in srgb, var( --a12-red-texto ) 18%, transparent );
	color: var( --a12-red-texto );
	font-weight: 400;
	line-height: 1.6;
}

.a12-red-ficha .a12-red-ficha__texto p,
.a12-red-ficha .a12-red-ficha__texto li {
	font-weight: 400;
}

.a12-red-ficha__texto p:first-child {
	margin-top: 0;
}

.a12-red-ficha__texto p:last-child {
	margin-bottom: 0;
}

.a12-red-ficha__carregando,
.a12-red-ficha__erro {
	grid-column: 1 / -1;
	margin: 0;
	padding: 48px;
	text-align: center;
}

@media ( max-width: 767px ) {
	.a12-red-ficha {
		width: 100vw;
		max-width: 100vw;
		max-height: 92vh;
		border-radius: 20px 20px 0 0;
		margin-bottom: 0;
	}

	.a12-red-ficha__corpo {
		grid-template-columns: 1fr;
		max-height: 92vh;
	}

	.a12-red-ficha__foto {
		max-height: 46vh;
	}

	.a12-red-ficha__dados {
		padding: 24px 24px 32px;
	}
}

/* ── Esqueleto da ficha ──────────────────────────────────────────────────── */

.a12-red-ficha__skel {
	gap: 14px;
}

.a12-red-ficha__skel .a12-red-skeleton--titulo {
	width: 70%;
}

.a12-red-ficha__skel .a12-red-skeleton--linha {
	width: 55%;
}

.a12-red-ficha__skel-curta {
	width: 30% !important;
}

.a12-red-ficha__skel-datas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid color-mix( in srgb, var( --a12-red-texto ) 12%, transparent );
}

.a12-red-ficha__skel-data {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 120px;
}

.a12-red-ficha__skel-data .a12-red-skeleton {
	width: 100% !important;
}

.a12-red-ficha__skel-data .a12-red-skeleton:last-child {
	width: 70% !important;
}

.a12-red-ficha__skel-texto {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid color-mix( in srgb, var( --a12-red-texto ) 12%, transparent );
}

.a12-red-ficha__skel-texto .a12-red-skeleton {
	width: 100% !important;
}

.a12-red-ficha__skel-texto .a12-red-skeleton:last-child {
	width: 60% !important;
}

/* A foto do esqueleto ocupa a mesma coluna da foto real. */
.a12-red-ficha__foto.a12-red-skeleton {
	min-height: 380px;
	border-radius: 0;
}