/**
 * O UAI Card — carteira de identidade mineira.
 *
 * Desenho na linha da Carteira de Identidade Nacional, mas em bege e bordô
 * e com os textos do UAI Card. O que vem da CIN é a arquitetura: brasão e
 * título no alto à esquerda, foto à esquerda, campos em pares rótulo/valor
 * à direita, faixa escura no pé com o nome do documento, tarja vertical na
 * lateral do verso e fundo de segurança gravado atrás de tudo.
 *
 * Tudo aqui é desenhado numa prancheta de 1020 × 680 px, onde 1 px vale
 * 0,1 mm. Quem reduz para o tamanho final é o .tmc-scale, então nenhuma
 * medida abaixo muda quando o cartão vai para o papel ou para a tela.
 */

.tmc-frame {
	position: relative;
	overflow: hidden;
	flex: none;
	border-radius: 1.4%;
	background: #fff;

	/*
	 * A prancheta de 1020 px vive aqui dentro, reduzida por transform. O
	 * transform não muda a largura que o navegador contabiliza, então na hora
	 * de imprimir o Chrome enxergava uma página larga demais e encolhia TUDO
	 * (o cartão saía com 2/3 do tamanho no PDF). O contain: strict prende o
	 * tamanho da moldura ao que está declarado — a medida em mm passa a valer.
	 * Só funciona porque a largura e a altura vêm escritas na própria moldura.
	 */
	contain: strict;
}

.tmc-scale {
	width: 1020px;
	height: 680px;
	transform-origin: top left;
}

/*
 * A capa de plástico: o cartão impresso sai plastificado, e a laminação
 * deixa uma beirada transparente em volta da arte. Na tela ela é esta
 * moldura clara, de brilho discreto. No papel não existe — por isso vive
 * só na moldura fluida, que é a que a loja e a vitrine usam.
 */
.tmc-plastico {
	display: block;
	padding: 3.1%;
	border-radius: 16px;
	background:
		linear-gradient(128deg,
			rgba(255, 255, 255, .76) 0%,
			rgba(255, 255, 255, .34) 38%,
			rgba(255, 255, 255, .20) 58%,
			rgba(255, 255, 255, .62) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .72),
		0 0 0 1px rgba(42, 31, 35, .07);
}

.tmc-plastico .tmc-frame--fluido {
	border-radius: 9px;
	box-shadow: 0 0 0 1px rgba(42, 31, 35, .09), 0 1px 3px rgba(42, 31, 35, .12);
}

/*
 * Moldura que acompanha a largura de quem a hospeda. O contain: strict dá
 * lugar ao container-type, que é o que deixa a prancheta ler a largura e
 * encolher sozinha; a proporção segura a altura.
 */
.tmc-frame--fluido {
	width: 100%;
	height: auto;
	aspect-ratio: 1020 / 680;
	contain: none;
	container-type: inline-size;
}

/* ---------------------------------------------------------------- base */

.tmc {
	--tmc-papel: #f6eedf;
	--tmc-papel-esc: #ecdfc9;
	--tmc-bordo: #7d2436;
	--tmc-bordo-esc: #5d1927;
	--tmc-bordo-claro: #a85162;
	--tmc-tinta: #2a1f23;
	--tmc-suave: #6f5c60;
	--tmc-linha: #d9c7ab;
	--tmc-branco: #fff;

	position: relative;
	width: 1020px;
	height: 680px;
	overflow: hidden;
	border-radius: 14px;
	background:
		radial-gradient(130% 100% at 22% 18%, #fbf6ec 0%, var(--tmc-papel) 48%, var(--tmc-papel-esc) 100%);
	color: var(--tmc-tinta);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: left;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* a tinta verde do RG de papel, para quem quiser */
.tmc--verde {
	--tmc-papel: #eaf2ec;
	--tmc-papel-esc: #d9e8dd;
	--tmc-bordo: #1d5c35;
	--tmc-bordo-esc: #123f24;
	--tmc-bordo-claro: #4d8a63;
	--tmc-tinta: #16271d;
	--tmc-suave: #52695b;
	--tmc-linha: #b3cdbc;
	background:
		radial-gradient(130% 100% at 22% 18%, #f7fcf8 0%, var(--tmc-papel) 48%, var(--tmc-papel-esc) 100%);
}

/* o cartão não obedece ao tema nem ao admin */
.tmc *,
.tmc *::before,
.tmc *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
	text-transform: none;
	float: none;
	max-width: none;
	box-shadow: none;
}

.tmc p { margin: 0; }
.tmc img { display: block; border: 0; }

/* grão do papel, discreto, por cima de tudo */
.tmc::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	border-radius: 14px;
	background:
		repeating-linear-gradient(112deg, rgba(0, 0, 0, .018) 0 1px, transparent 1px 3px),
		radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(74, 58, 46, .09) 100%);
	mix-blend-mode: multiply;
}

/* o fundo gravado, desenhado uma vez por página e reaproveitado por <use> */
.tmc-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: .62;
	pointer-events: none;
}

.tmc--verde .tmc-bg { filter: hue-rotate(96deg) saturate(.9); }

/* ------------------------------------------------------------- cabeçalho */

.tmc-cab {
	position: absolute;
	top: 24px;
	left: 28px;
	right: 28px;
	display: flex;
	/* os dois textos descem até o meio do brasão, em vez de encostar no topo */
	align-items: center;
	gap: 14px;
	z-index: 2;
}

.tmc-brasao {
	width: 124px;
	height: 124px;
	flex: none;
	color: var(--tmc-bordo);
}

.tmc-cab__txt { flex: 1; min-width: 0; }

.tmc-cab__pais {
	margin: 0;
	font-size: 37px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.005em;
	color: var(--tmc-bordo-esc);
	white-space: nowrap;
}

.tmc-cab__org {
	margin: 7px 0 0;
	font-size: 27px;
	font-weight: 500;
	line-height: 1.22;
	color: var(--tmc-suave);
	white-space: nowrap;
}

/* a serra do brasão, ampliada, no lugar onde a CIN põe o mapa */
.tmc-serra {
	position: absolute;
	top: 26px;
	right: 40px;
	width: 172px;
	height: 110px;
	color: var(--tmc-bordo);
	opacity: .3;
	z-index: 1;
}

/* ------------------------------------------------------------------ foto */

.tmc-foto {
	position: absolute;
	top: 160px;
	left: 34px;
	width: 304px;
	height: 396px;
	z-index: 2;
	border: 2px solid var(--tmc-linha);
	border-radius: 8px;
	overflow: hidden;
	background: #e9ded0;
}

.tmc-foto img,
.tmc-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* a sigla vazada sobre o pé da foto, como picote de segurança */
.tmc-foto__sigla {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 7px 0 9px;
	background: linear-gradient(to top, rgba(42, 31, 35, .62), rgba(42, 31, 35, 0));
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .5em;
	text-indent: .5em;
	text-align: center;
	color: rgba(255, 255, 255, .92);
}

/* ---------------------------------------------------------------- campos */

.tmc-campos {
	position: absolute;
	top: 166px;
	left: 375px;
	right: 30px;
	z-index: 2;
}

.tmc-linha { display: flex; gap: 24px; margin-bottom: 27px; }
.tmc-linha:last-child { margin-bottom: 0; }

.tmc-campo { flex: 1; min-width: 0; }
.tmc-campo--curto { flex: 0 0 280px; }
.tmc-campo--estreito { flex: 0 0 196px; }

.tmc-rotulo {
	margin: 0 0 4px;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .035em;
	color: var(--tmc-suave);
	white-space: nowrap;
}

.tmc-valor {
	margin: 0;
	font-size: 39px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.005em;
	color: var(--tmc-tinta);
	/* Uma linha só: a altura de cada linha de campos é fixa, e um valor que
	   quebrasse em duas empurraria a linha seguinte para cima da faixa. Quem
	   cuida de valor comprido é o degrau de corpo abaixo. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tmc-valor--num { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 34px; }

/* o status é a informação que alguém confere de relance: caixa alta e
   na cor do documento, para destacar sem precisar ser maior que o nome */
.tmc-valor--status {
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--tmc-bordo);
}

/* A filiação pode ser de dois: ela é o único campo que ganha duas linhas,
   e há folga de sobra entre a última linha de campos e o aviso do pé. */
.tmc-valor--multi {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
	line-height: 1.1;
}

/* valor comprido: três degraus de corpo, do maior para o menor */
.tmc-valor--a2 { font-size: 33px; }
.tmc-valor--a3 { font-size: 27px; }
.tmc-valor--a4 { font-size: 22px; }

/* ----------------------------------------------------------------- aviso */

.tmc-aviso {
	position: absolute;
	left: 38px;
	right: 34px;
	bottom: 88px;
	z-index: 2;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tmc-bordo);
	text-align: right;
}

.tmc-aviso em { font-style: normal; color: var(--tmc-suave); font-weight: 500; }

/* ----------------------------------------------------------------- faixa */

.tmc-faixa {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 76px;
	display: flex;
	align-items: center;
	padding: 0 34px;
	gap: 22px;
	background: linear-gradient(100deg, var(--tmc-bordo) 0%, var(--tmc-bordo-esc) 100%);
	color: #fff;
	z-index: 3;
}

.tmc-faixa__nome {
	flex: 1;
	font-size: 29px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tmc-faixa__lei {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
	white-space: nowrap;
}

/* --------------------------------------------------------------- o verso */

.tmc--verso .tmc-cab__pais { font-size: 33px; }
.tmc--verso .tmc-cab__org { font-size: 35px; font-weight: 700; color: var(--tmc-bordo); }

.tmc-qr {
	position: absolute;
	top: 160px;
	left: 26px;
	width: 404px;
	height: 404px;
	padding: 10px;
	background: #f7f0e4;
	border: 2px solid var(--tmc-linha);
	border-radius: 8px;
	z-index: 2;
}

.tmc-qr img,
.tmc-qr svg { width: 100%; height: 100%; display: block; }

.tmc-verso-campos {
	position: absolute;
	top: 190px;
	left: 458px;
	right: 94px;
	z-index: 2;
}

/*
 * O verso tem menos campos que a frente e mais espaço para cada um, então
 * a escala dele é própria: rótulo e valor maiores, e mais ar entre as
 * linhas, para o bloco ocupar a largura toda que sobra ao lado do QR.
 */
.tmc-verso-campos .tmc-rotulo { font-size: 22px; }
.tmc-verso-campos .tmc-valor { font-size: 40px; }
.tmc-verso-campos .tmc-valor--a2 { font-size: 36px; }
.tmc-verso-campos .tmc-valor--a3 { font-size: 29px; }
.tmc-verso-campos .tmc-valor--a4 { font-size: 24px; }
.tmc-verso-campos .tmc-linha { margin-bottom: 40px; }

/* Largura medida, não chutada: o rótulo "Mineiro desde" pede ~196 px e o
   valor são quatro dígitos. Tudo o que sobra vai para o status, que é a
   palavra comprida da linha — foi ela que apareceu cortada duas vezes. */
.tmc-verso-campos .tmc-campo--estreito { flex: 0 0 200px; }

/* a firma de quem expediu, encaixada entre a faixa do pé e a tarja lateral */
.tmc-firma {
	position: absolute;
	right: 100px;
	bottom: 116px;
	z-index: 2;
	text-align: right;
}

.tmc-firma__nome {
	margin: 0;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 50px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.1;
	color: var(--tmc-tinta);
}

.tmc-firma__risco {
	margin: 7px 0 8px auto;
	width: 360px;
	height: 1px;
	background: var(--tmc-linha);
}

.tmc-firma__cargo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tmc-suave);
}

.tmc-firma__onde {
	margin: 3px 0 0;
	font-size: 17px;
	color: var(--tmc-suave);
}

/* tarja vertical na lateral, como a da CIN */
.tmc-tarja {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(190deg, var(--tmc-bordo) 0%, var(--tmc-bordo-esc) 100%);
	z-index: 3;
}

.tmc-tarja span {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .95);
	transform: rotate(180deg);
	writing-mode: vertical-rl;
}

.tmc--verso .tmc-faixa { right: 74px; }

/* ------------------------------------------------------- o modo vazado */

/*
 * Para o adesivo de vinil transparente: some tudo que seria tinta de fundo
 * e ficam só os traços. A faixa e a tarja viram contorno, e o QR mantém a
 * placa clara — leitor de QR precisa de contraste.
 */

.tmc-frame--vazado { background: transparent; }

.tmc--vazado {
	background: transparent;
	color: var(--tmc-bordo-esc);
}

.tmc--vazado::after { content: none; display: none; }

.tmc--vazado .tmc-bg { opacity: .3; }

.tmc--vazado .tmc-foto { background: transparent; }

.tmc--vazado .tmc-foto__sigla {
	background: none;
	color: var(--tmc-bordo);
	text-shadow: none;
}

.tmc--vazado .tmc-faixa,
.tmc--vazado .tmc-tarja {
	background: transparent;
	color: var(--tmc-bordo-esc);
	border: 2px solid var(--tmc-bordo);
}

.tmc--vazado .tmc-faixa__lei { color: var(--tmc-suave); }
.tmc--vazado .tmc-tarja span { color: var(--tmc-bordo-esc); }

.tmc--vazado .tmc-qr { background: transparent; }

.tmc--vazado.tmc--qr-branco .tmc-qr {
	background: #fff;
	border-color: var(--tmc-linha);
}

@media (max-width: 600px) {
	.tmc-frame--vazado { background: transparent; }
}

@media print {
	.tmc-frame--vazado { background: transparent; }
}