codigo.html

<style>
	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;
	}
</style>

<div id="app">
	<button id="process-button">Leer y Procesar Hoja</button>
	<div id="message-container"></div>
	<div id="attendance-ui" style="display: none;">
		<div class="date-controls">
			<button id="prev-day-btn">&lt;</button>
			<select id="month-select"></select>
			<input type="number" id="day-input" min="1" max="31">
			<button id="next-day-btn">&gt;</button>
		</div>
		<div class="control-group">
			<select id="coordinator-select"></select>
		</div>
		<div class="control-group">
			<input type="text" id="name-filter" placeholder="Filtrar por nombre...">
        </div>
			<table id="people-table">
				<tbody id="people-list"></tbody>
			</table>
			<button id="update-button">Actualizar Asistencias (Todo)</button>
		</div>
	</div>