/**
 * Colinha Eleitoral — estilos do front.
 *
 * Duas decisões importantes aqui:
 *
 * 1. Especificidade. Temas costumam estilizar campos por seletor de elemento,
 *    como `input[type="text"] { width: 100% }`. Isso tem especificidade (0,1,1)
 *    e ganha de uma classe solta como `.colinha-caixa` (0,1,0) — os
 *    quadradinhos viravam barras de largura total. Por isso todo seletor aqui
 *    é prefixado com `.colinha-wrap` e as medidas dos quadradinhos usam
 *    `!important`: é impossível prever o que cada tema faz com formulários.
 *
 * 2. Container queries em vez de media queries. O que importa é a largura da
 *    coluna onde a colinha foi colocada, não a da janela. Numa página com
 *    barra lateral, a coluna pode ter 430px mesmo num monitor de 1600px —
 *    e a colinha precisa se comportar como no celular ali dentro.
 */

.colinha-wrap {
	--colinha-branco: #ffffff;
	--colinha-fundo: #f8fafc;
	--colinha-borda: #e2e8f0;
	--colinha-texto: #334155;
	--colinha-suave: #64748b;
	--colinha-apagado: #94a3b8;

	container-type: inline-size;
	container-name: colinha;

	box-sizing: border-box;
	max-width: 1152px;
	margin: 0 auto;
	padding: 0;
	font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--colinha-primaria);
	line-height: 1.5;
}

.colinha-wrap *,
.colinha-wrap *::before,
.colinha-wrap *::after {
	box-sizing: border-box;
}

/* Introdução ------------------------------------------------------------- */

.colinha-wrap .colinha-intro {
	margin: 0 0 32px;
}

.colinha-wrap .colinha-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--colinha-secundaria);
}

.colinha-wrap .colinha-titulo {
	margin: 0;
	padding: 0;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--colinha-primaria);
}

.colinha-wrap .colinha-subtitulo {
	margin: 16px 0 0;
	max-width: 42em;
	font-size: 16px;
	color: var(--colinha-suave);
}

/* Passos ----------------------------------------------------------------- */

.colinha-wrap .colinha-passos {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	counter-reset: colinha-passo;
}

.colinha-wrap .colinha-passos li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
	font-size: 15px;
	color: var(--colinha-texto);
	list-style: none;
}

.colinha-wrap .colinha-passo-num {
	counter-increment: colinha-passo;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border-radius: 999px;
	background: var(--colinha-destaque);
	color: var(--colinha-primaria);
	font-size: 12px;
	font-weight: 800;
}

.colinha-wrap .colinha-passo-num::before {
	content: counter(colinha-passo);
}

/* Grade ------------------------------------------------------------------ */

.colinha-wrap .colinha-grid {
	display: grid;
	gap: 32px;
	align-items: start;
}

/* Cartão ----------------------------------------------------------------- */

.colinha-wrap .colinha-cartao {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--colinha-borda);
	border-radius: 24px;
	background: var(--colinha-branco);
	padding: 16px 16px 112px;
	box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.35);
}

.colinha-wrap .colinha-faixa {
	position: relative;
	margin: -16px -16px 24px;
	padding: 16px 16px 20px;
	background: var(--colinha-primaria);
}

.colinha-wrap .colinha-faixa::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: var(--colinha-destaque);
}

.colinha-wrap .colinha-faixa-eyebrow {
	margin: 0 0 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--colinha-destaque);
}

.colinha-wrap .colinha-faixa-titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--colinha-branco);
}

/* Dizeres legais na lateral ---------------------------------------------- */

.colinha-wrap .colinha-legal {
	position: absolute;
	left: 8px;
	bottom: 20px;
	margin: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--colinha-apagado);
	pointer-events: none;
}

/* Linhas de cargos ------------------------------------------------------- */

.colinha-wrap .colinha-cargos {
	position: relative;
	margin-left: 16px;
}

.colinha-wrap .colinha-cargo {
	position: relative;
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	min-width: 0;
	background: none;
}

.colinha-wrap .colinha-cargo:last-child {
	margin-bottom: 0;
}

.colinha-wrap .colinha-rotulo {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--colinha-primaria);
}

.colinha-wrap .colinha-cargo.is-travado .colinha-rotulo {
	color: var(--colinha-secundaria);
}

.colinha-wrap .colinha-caixas {
	position: relative;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

/*
 * As medidas abaixo levam !important de propósito: é o único jeito de um
 * plugin garantir o tamanho do quadradinho contra regras de tema que miram
 * `input` direto. Sem isso, os campos viram barras de largura total.
 */
.colinha-wrap input.colinha-caixa {
	display: inline-block !important;
	flex: 0 0 auto !important;
	width: 40px !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 56px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 3px solid var(--colinha-secundaria) !important;
	border-radius: 8px !important;
	background: var(--colinha-branco);
	background-image: none;
	color: var(--colinha-digitos);
	font-family: inherit;
	font-size: 24px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-transform: none;
	outline: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.colinha-wrap input.colinha-caixa:focus {
	border-color: var(--colinha-destaque) !important;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.colinha-wrap .colinha-cargo.is-travado input.colinha-caixa {
	border-color: var(--colinha-primaria) !important;
	background: var(--colinha-destaque);
	color: var(--colinha-primaria);
	opacity: 1;
	box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4);
}

.colinha-wrap .colinha-confirma {
	align-self: flex-end;
	margin-left: -8px;
	margin-bottom: -6px;
	padding: 6px;
	border-radius: 8px;
	background: var(--colinha-primaria);
	color: var(--colinha-destaque);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
	transform: rotate(-4deg);
	box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.6);
}

/* Selo e logo ------------------------------------------------------------ */

.colinha-wrap .colinha-selo {
	position: absolute;
	right: 0;
	top: 50%;
	width: 100px;
	padding: 10px;
	border: 3px solid var(--colinha-destaque);
	border-radius: 12px;
	background: var(--colinha-primaria);
	text-align: center;
	transform: translateY(-45%) rotate(-6deg);
	box-shadow: 0 20px 30px -18px rgba(0, 0, 0, 0.8);
	pointer-events: none;
}

.colinha-wrap .colinha-selo span {
	display: block;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.1;
}

.colinha-wrap .colinha-selo-1 {
	font-size: 9px;
	color: var(--colinha-branco);
}

.colinha-wrap .colinha-selo-2 {
	margin-top: 2px;
	font-size: 18px;
	color: var(--colinha-destaque);
}

.colinha-wrap .colinha-selo-3 {
	margin-top: 4px;
	font-size: 8px;
	color: var(--colinha-branco);
}

.colinha-wrap img.colinha-logo {
	position: absolute;
	right: 0;
	top: 50%;
	width: 96px;
	max-width: 40%;
	height: auto;
	margin: 0;
	transform: translateY(-15%);
	pointer-events: none;
	user-select: none;
}

.colinha-wrap img.colinha-foto {
	position: absolute;
	right: -48px;
	bottom: -4px;
	width: 290px;
	max-width: 75%;
	height: auto;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

/* Lateral ---------------------------------------------------------------- */

.colinha-wrap .colinha-lateral {
	display: grid;
	gap: 16px;
}

.colinha-wrap .colinha-privacidade,
.colinha-wrap .colinha-acoes {
	border-radius: 24px;
	padding: 24px;
}

.colinha-wrap .colinha-privacidade {
	background: var(--colinha-primaria);
	color: var(--colinha-branco);
}

.colinha-wrap .colinha-privacidade h3 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 16px;
	font-weight: 800;
	color: var(--colinha-branco);
}

.colinha-wrap .colinha-privacidade p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
}

.colinha-wrap .colinha-acoes {
	border: 1px solid var(--colinha-borda);
	background: var(--colinha-branco);
}

.colinha-wrap .colinha-acoes h3 {
	margin: 0 0 16px;
	padding: 0;
	font-size: 18px;
	font-weight: 800;
	color: var(--colinha-primaria);
}

.colinha-wrap .colinha-contador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 14px;
	border-radius: 16px;
	background: var(--colinha-fundo);
	font-size: 14px;
	font-weight: 700;
}

.colinha-wrap .colinha-contador strong {
	color: var(--colinha-secundaria);
	font-weight: 800;
}

.colinha-wrap button.colinha-btn {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 12px !important;
	padding: 14px 16px !important;
	border: 1px solid transparent;
	border-radius: 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: filter 0.15s, transform 0.1s;
}

.colinha-wrap button.colinha-btn:active {
	transform: scale(0.99);
}

.colinha-wrap button.colinha-btn:hover {
	filter: brightness(1.06);
}

.colinha-wrap button.colinha-btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.colinha-wrap button.colinha-btn-baixar {
	background: var(--colinha-destaque);
	color: var(--colinha-primaria);
	box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.5);
}

.colinha-wrap button.colinha-btn-imprimir {
	border-color: var(--colinha-borda);
	background: var(--colinha-branco);
	color: var(--colinha-secundaria);
}

.colinha-wrap button.colinha-btn-limpar {
	background: transparent;
	color: var(--colinha-suave);
	margin-bottom: 0 !important;
}

.colinha-wrap .colinha-dica,
.colinha-wrap .colinha-aviso {
	margin: 16px 0 0;
	font-size: 12px;
	color: var(--colinha-suave);
}

.colinha-wrap .colinha-aviso {
	font-weight: 700;
	color: #b91c1c;
}

/* Coluna larga ----------------------------------------------------------- */

@container colinha (min-width: 620px) {
	.colinha-wrap .colinha-titulo {
		font-size: 44px;
	}

	.colinha-wrap .colinha-cartao {
		padding: 32px 32px 160px;
	}

	.colinha-wrap .colinha-faixa {
		margin: -32px -32px 32px;
		padding: 24px 32px;
	}

	.colinha-wrap .colinha-faixa-titulo {
		font-size: 24px;
	}

	.colinha-wrap .colinha-legal {
		left: 12px;
		font-size: 11px;
	}

	.colinha-wrap .colinha-cargos {
		margin-left: 28px;
	}

	.colinha-wrap .colinha-rotulo {
		font-size: 14px;
	}

	.colinha-wrap .colinha-caixas {
		gap: 12px;
	}

	.colinha-wrap input.colinha-caixa {
		width: 72px !important;
		height: 96px !important;
		border-radius: 12px !important;
		font-size: 48px;
	}

	.colinha-wrap .colinha-confirma {
		margin-left: -20px;
		margin-bottom: -8px;
		padding: 10px 20px;
		font-size: 16px;
	}

	.colinha-wrap .colinha-selo {
		right: 16px;
		width: 185px;
		padding: 16px 20px;
		border-width: 4px;
		border-radius: 16px;
	}

	.colinha-wrap .colinha-selo-1 {
		font-size: 16px;
	}

	.colinha-wrap .colinha-selo-2 {
		margin-top: 4px;
		font-size: 30px;
	}

	.colinha-wrap .colinha-selo-3 {
		margin-top: 8px;
		font-size: 12px;
	}

	.colinha-wrap img.colinha-logo {
		right: 16px;
		width: 185px;
	}

	.colinha-wrap img.colinha-foto {
		right: -32px;
		bottom: -8px;
		width: 300px;
	}
}

@container colinha (min-width: 1000px) {
	.colinha-wrap .colinha-grid {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 48px;
	}

	.colinha-wrap .colinha-selo,
	.colinha-wrap img.colinha-logo {
		right: 32px;
		width: 205px;
	}

	.colinha-wrap img.colinha-foto {
		width: 325px;
	}
}

/* Coluna muito estreita -------------------------------------------------- */

@container colinha (max-width: 359px) {
	.colinha-wrap input.colinha-caixa {
		width: 36px !important;
	}
}

/* Impressão -------------------------------------------------------------- */

/* O contêiner da imagem só existe durante a impressão pelo botão. */
.colinha-impressao {
	display: none;
}

/*
 * Impressão pelo botão: esconde a página inteira e deixa só a imagem da
 * colinha, do mesmo tamanho proporcional da baixada, cabendo numa folha.
 */
@media print {
	html.colinha-imprimindo body > *:not(.colinha-impressao) {
		display: none !important;
	}

	html.colinha-imprimindo,
	html.colinha-imprimindo body {
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
	}

	html.colinha-imprimindo .colinha-impressao {
		display: flex !important;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	html.colinha-imprimindo .colinha-impressao img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 100vh;
		page-break-inside: avoid;
		break-inside: avoid;
	}
}

@page {
	margin: 10mm;
}

/* Ctrl+P direto na página, sem passar pelo botão. */
@media print {
	.colinha-wrap .colinha-intro,
	.colinha-wrap .colinha-passos,
	.colinha-wrap .colinha-lateral {
		display: none !important;
	}

	.colinha-wrap {
		max-width: none;
		padding: 0;
	}

	.colinha-wrap .colinha-cartao {
		border: 0;
		box-shadow: none;
	}
}