/**
 * Paralelo — módulo "Código de Requisição Interna"
 *
 * Estilos próprios da página — reaproveita sempre os tokens
 * `--paralelo-*`/classes já existentes (`.paralelo-data-field`,
 * `.paralelo-data-alert`, `.paralelo-btn-danger`, `.paralelo-data-table`),
 * mesmo princípio de `import-app.css`, nunca reinventa cor/tipografia. Só
 * o número gigante e o botão "Marcar Número como Usado" (cores fixas
 * pedidas explicitamente — vermelho/branco, não a cor de destaque
 * configurável do tema) precisam de regras novas.
 */

.paralelo-req-card {
	max-width: 480px;
	margin: 0 auto;
	padding: 40px 32px;
	background: var(--paralelo-surface);
	border: 1px solid var(--paralelo-border);
	border-radius: 16px;
	text-align: center;
}

.paralelo-req-number-label {
	font-size: var(--paralelo-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.65;
	margin-bottom: 12px;
}

/* Requisito 2 — "o número deve ter destaque visual muito grande",
   facilmente visível. */
.paralelo-req-number {
	font-size: 108px;
	line-height: 1;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--paralelo-primary);
	margin: 0 0 28px;
	word-break: break-all;
}

.paralelo-req-loading {
	padding: 32px 0;
	opacity: 0.7;
	font-size: var(--paralelo-text-sm);
}

.paralelo-req-card form {
	text-align: left;
}

.paralelo-req-card .paralelo-data-alert {
	text-align: left;
}

/* Requisito 7 — "fundo vermelho; texto branco; destaque visual; estado
   hover; estado disabled durante processamento". Cor fixa (nunca
   `var(--paralelo-primary)`, que é configurável pelo Administrador e
   podia deixar de ser vermelho) — este botão é sempre a acção mais
   destrutiva/irreversível da página (consome definitivamente um
   número), por isso mantém sempre a mesma cor de aviso, tal como
   `.paralelo-btn-danger` no resto da plataforma. */
.paralelo-req-submit-btn {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 16px 24px;
	border: none;
	border-radius: 10px;
	background: #dc2626;
	color: #fff;
	font-size: var(--paralelo-text-base, 16px);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.paralelo-req-submit-btn:hover:not(:disabled) {
	background: #b91c1c;
}

.paralelo-req-submit-btn:focus-visible {
	outline: 2px solid #dc2626;
	outline-offset: 2px;
}

.paralelo-req-submit-btn:disabled {
	background: #9ca3af;
	color: #f3f4f6;
	cursor: not-allowed;
}

@media (max-width: 600px) {
	.paralelo-req-card {
		padding: 28px 20px;
	}

	.paralelo-req-number {
		font-size: 72px;
	}
}