/**
 * Paralelo — módulo "Importações" (Fase 0)
 *
 * Estilos próprios do assistente de importação — reaproveita sempre os
 * tokens `--paralelo-*`/classes já existentes (`.paralelo-card`,
 * `.paralelo-btn-*`, `.paralelo-data-table`, `.paralelo-progress-bar`),
 * mesmo princípio de `data-app.css`, nunca reinventa cor/tipografia.
 */

.paralelo-import-upload-form,
.paralelo-import-mapping,
.paralelo-import-review,
.paralelo-import-progress {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
}

.paralelo-import-upload-form .paralelo-data-field,
.paralelo-import-mapping .paralelo-data-field {
	margin-bottom: 0;
}

.paralelo-import-mapping table,
.paralelo-import-review table {
	width: 100%;
}

/* NOVO (correção "campos de seleção/botão de carregar sem estilo"): os
   `<select>` dentro das tabelas de mapeamento/revisão vivem dentro de
   `<td>` — `.paralelo-data-field` (bloco, com margem) não serve aí, mas
   o próprio controlo deve continuar visualmente igual ao resto dos
   formulários (mesmo raio/borda/preenchimento de
   `.paralelo-data-field select`). */
.paralelo-import-mapping td select,
.paralelo-import-review td select {
	display: block;
	width: 100%;
	min-width: 180px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--paralelo-border);
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	font-size: var(--paralelo-text-sm);
	font-family: inherit;
}

.paralelo-import-mapping td select:focus,
.paralelo-import-review td select:focus {
	outline: 2px solid var(--paralelo-primary);
	outline-offset: 1px;
}

.paralelo-import-progress {
	max-width: 480px;
}

.paralelo-import-done {
	max-width: 480px;
}

.paralelo-import-done ul {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.paralelo-form-error {
	color: #b91c1c;
	font-size: var(--paralelo-text-sm);
}

.paralelo-import-error-list {
	margin: 4px 0 12px;
	padding-left: 20px;
	font-size: var(--paralelo-text-sm);
	color: #b91c1c;
	display: flex;
	flex-direction: column;
	gap: 4px;
}