<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
	.theme-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 14px;
	}
	.theme-card {
		background: var(--panel);
		border-radius: 18px;
		padding: 16px;
		box-shadow: var(--shadow);
	}
	.theme-card input[type="text"] {
		width: 100%;
		padding: 10px 12px;
		border-radius: 12px;
		border: 0;
		box-shadow: inset 0 0 0 1px var(--border);
		font-family: inherit;
	}
</style>

<div class="actions" style="margin-bottom:16px;">
	<a class="btn btn-outline" href="<?php echo site_url('configuracion'); ?>">Volver</a>
</div>

<?php if (!empty($flash_message)) { ?>
	<div class="panel" style="background:#e9f7ef; color:#1f5c3a; margin-bottom:16px;">
		<?php echo htmlspecialchars($flash_message, ENT_QUOTES, 'UTF-8'); ?>
	</div>
<?php } ?>
<?php if (!empty($flash_error)) { ?>
	<div class="panel" style="background:#fdecea; color:#7a2d2d; margin-bottom:16px;">
		<?php echo htmlspecialchars($flash_error, ENT_QUOTES, 'UTF-8'); ?>
	</div>
<?php } ?>

<form method="post" class="panel" style="padding:18px;">
	<h2 style="margin-top:0;">Tema y colores</h2>
	<div class="theme-grid">
		<div class="theme-card">
			<label class="note">Color principal</label>
			<input type="text" name="theme_color" value="<?php echo htmlspecialchars($theme_color, ENT_QUOTES, 'UTF-8'); ?>" />
		</div>
		<div class="theme-card">
			<label class="note">Color acento</label>
			<input type="text" name="accent_color" value="<?php echo htmlspecialchars($accent_color, ENT_QUOTES, 'UTF-8'); ?>" />
		</div>
		<div class="theme-card">
			<label class="note">Fondo</label>
			<input type="text" name="surface_color" value="<?php echo htmlspecialchars($surface_color, ENT_QUOTES, 'UTF-8'); ?>" />
		</div>
		<div class="theme-card">
			<label class="note">Panel</label>
			<input type="text" name="panel_color" value="<?php echo htmlspecialchars($panel_color, ENT_QUOTES, 'UTF-8'); ?>" />
		</div>
	</div>

	<div class="actions" style="justify-content:flex-end; margin-top:16px;">
		<button class="btn" type="submit">Guardar tema</button>
	</div>
</form>
