codigo.css

	body {
		font-family: Arial, sans-serif;
		font-size: 14px;
		color: #333;
		margin: 0;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	#app {
		padding: 15px;
		flex-grow: 1;
		overflow-y: auto;
	}

	.control-group {
		margin-bottom: 15px;
	}

	.date-controls {
		display: flex;
		align-items: center;
		gap: 5px;
		margin-bottom: 15px;
	}

	.date-controls button {
		width: 30px;
		height: 30px;
		padding: 0;
		margin: 0;
		flex-shrink: 0;
		line-height: 1;
		font-size: 20px;
	}

	#month-select {
		flex-grow: 1;
	}

	#day-input {
		width: 60px;
		flex-shrink: 0;
	}

	select,
	input[type="number"],
	input[type="text"] {
		padding: 8px;
		border-radius: 4px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		width: 100%;
	}

	#people-table {
		width: 100%;
		border-collapse: collapse;
	}

	#people-table td {
		padding: 8px 4px;
		border-bottom: 1px solid #e2e8f0;
		vertical-align: middle;
	}

	#people-table td:last-child {
		text-align: right;
	}

	.actions-container {
		display: flex;
		gap: 5px;
		align-items: center;
		justify-content: flex-end;
	}

	.apply-single-btn {
		padding: 5px 10px;
		font-size: 12px;
		margin: 0;
		width: auto;
		flex-shrink: 0;
		background-color: #60a5fa;
		/* A nice blue */
	}

	/* New style for the clickable name */
	.person-name-link {
		color: #0078d4;
		text-decoration: none;
		cursor: pointer;
	}

	.person-name-link:hover {
		text-decoration: underline;
	}

	button {
		width: 100%;
		padding: 10px;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		margin-top: 15px;
	}

	#process-button {
		background-color: #2c5282;
	}

	#update-button {
		background-color: #38a169;
	}

	button:disabled {
		background-color: #a0aec0;
		cursor: not-allowed;
	}

	.message {
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 15px;
		text-align: center;
		font-weight: bold;
	}

	.error {
		background-color: #fff0f0;
		color: #c53030;
	}

	.success {
		background-color: #c6f6d5;
		color: #2f855a;
	}