.ckroma-wrap {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	font-family: inherit;
	box-sizing: border-box;
}

.ckroma-titulo {
	margin: 0 0 16px;
	font-size: 1.25rem;
}

.ckroma-campo {
	flex: 1;
	margin-bottom: 14px;
}

.ckroma-campo label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 0.9rem;
}

.ckroma-campo select,
.ckroma-campo input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1rem;
	box-sizing: border-box;
}

.ckroma-campo small {
	display: block;
	margin-top: 4px;
	color: #666;
	font-size: 0.8rem;
}

.ckroma-linha {
	display: flex;
	gap: 14px;
}

.ckroma-desc {
	background: #f5f8f2;
	border-left: 3px solid #6a994e;
	padding: 8px 12px;
	margin: 0 0 14px;
	font-size: 0.88rem;
	border-radius: 4px;
}

.ckroma-tabela {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	font-size: 0.9rem;
}

.ckroma-tabela th,
.ckroma-tabela td {
	padding: 8px 6px;
	text-align: left;
	border-bottom: 1px solid #eee;
}

.ckroma-tabela th {
	background: #6a994e;
	color: #fff;
	font-weight: 600;
}

.ckroma-tabela td:first-child,
.ckroma-tabela th:first-child {
	text-align: center;
	width: 48px;
}

.ckroma-ph {
	margin: 14px 0 4px;
	font-size: 0.9rem;
}

.ckroma-aviso {
	margin: 0;
	font-size: 0.8rem;
	color: #777;
}

@media (max-width: 600px) {
	.ckroma-linha { flex-direction: column; gap: 0; }
	.ckroma-wrap { padding: 16px; }

	/* Esconde o cabecalho da tabela */
	.ckroma-tabela thead { display: none; }

	/* Cada linha vira um cartao */
	.ckroma-tabela,
	.ckroma-tabela tbody,
	.ckroma-tabela tr,
	.ckroma-tabela td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.ckroma-tabela tr {
		border: 1px solid #e2e2e2;
		border-radius: 8px;
		margin-bottom: 12px;
		padding: 8px 12px;
		background: #fafafa;
	}

	/* Nome do fertilizante em destaque no topo do cartao */
	.ckroma-tabela td[data-label="Fertilizante"] {
		font-weight: 600;
		font-size: 1rem;
		padding: 6px 0 8px;
		border-bottom: 1px solid #e8e8e8;
		margin-bottom: 6px;
	}

	/* Demais celulas: rotulo a esquerda, valor a direita */
	.ckroma-tabela td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0;
		border: none;
		text-align: right;
	}

	.ckroma-tabela td::before {
		content: attr(data-label);
		font-weight: 600;
		color: #555;
		text-align: left;
		margin-right: 12px;
	}

	/* Esconde a celula "Ordem" no celular (redundante no cartao) */
	.ckroma-tabela td[data-label="Ordem"] { display: none; }

	/* Fertilizante nao mostra rotulo (ja e o titulo do cartao) */
	.ckroma-tabela td[data-label="Fertilizante"]::before { content: ""; margin: 0; }
	.ckroma-tabela td[data-label="Fertilizante"] { justify-content: flex-start; text-align: left; }
}