<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<?php
		$app_name = !empty($app_config['app_name']) ? $app_config['app_name'] : 'BellaIdea';
		$app_logo = !empty($app_config['logo_path']) ? $app_config['logo_path'] : '';
	?>
	<title>Configuracion | <?php echo html_escape($app_name); ?></title>
	<style>
		:root {
			--bg: #f6f7fb;
			--card: #ffffff;
			--text: #1f2937;
			--muted: #64748b;
			--line: #e2e8f0;
			--primary: #0ea5a3;
			--ok-bg: #dcfce7;
			--ok-text: #166534;
		}
		body.theme-oscuro {
			--bg: #0f172a;
			--card: #111827;
			--text: #e5e7eb;
			--muted: #9ca3af;
			--line: #334155;
			--primary: #14b8a6;
			--ok-bg: #064e3b;
			--ok-text: #bbf7d0;
		}
		body.theme-rosado {
			--bg: #fff1f6;
			--card: #ffffff;
			--text: #4a1028;
			--muted: #8a4661;
			--line: #f8bbd0;
			--primary: #ec4899;
			--ok-bg: #fce7f3;
			--ok-text: #9d174d;
		}
		body.theme-fuccia {
			--bg: #fdf2ff;
			--card: #ffffff;
			--text: #4a044e;
			--muted: #7e22ce;
			--line: #f0abfc;
			--primary: #d946ef;
			--ok-bg: #fae8ff;
			--ok-text: #86198f;
		}
		body.theme-verde {
			--bg: #f0fdf4;
			--card: #ffffff;
			--text: #14532d;
			--muted: #166534;
			--line: #86efac;
			--primary: #22c55e;
			--ok-bg: #dcfce7;
			--ok-text: #166534;
		}
		body.theme-rojo {
			--bg: #fff1f2;
			--card: #ffffff;
			--text: #7f1d1d;
			--muted: #b91c1c;
			--line: #fca5a5;
			--primary: #ef4444;
			--ok-bg: #fee2e2;
			--ok-text: #991b1b;
		}
		body.theme-azul_claro {
			--bg: #eff6ff;
			--card: #ffffff;
			--text: #1e3a8a;
			--muted: #1d4ed8;
			--line: #93c5fd;
			--primary: #38bdf8;
			--ok-bg: #dbeafe;
			--ok-text: #1e40af;
		}
		body.theme-azul_rey {
			--bg: #eef2ff;
			--card: #ffffff;
			--text: #1e1b4b;
			--muted: #312e81;
			--line: #a5b4fc;
			--primary: #4f46e5;
			--ok-bg: #e0e7ff;
			--ok-text: #3730a3;
		}
		* { box-sizing: border-box; }
		body {
			margin: 0;
			font-family: "Segoe UI", Tahoma, Arial, sans-serif;
			background: var(--bg);
			color: var(--text);
		}
		.appbar {
			background: var(--card);
			border-bottom: 1px solid var(--line);
			padding: 10px 12px;
			position: sticky;
			top: 0;
			z-index: 20;
		}
		.appbar-inner {
			max-width: 540px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.company-wrap {
			display: grid;
			grid-template-columns: 52px minmax(0, 1fr);
			column-gap: 10px;
			row-gap: 2px;
			align-items: center;
		}
		.company-wrap.no-logo {
			grid-template-columns: minmax(0, 1fr);
		}
		.brand {
			display: contents;
		}
		.company-logo {
			width: 52px;
			height: 52px;
			border-radius: 8px;
			object-fit: cover;
			border: 1px solid var(--line);
			background: var(--card);
			grid-column: 1;
			grid-row: 1 / span 2;
		}
		.company-name {
			font-size: 18px;
			font-weight: 800;
			grid-column: 2;
			grid-row: 1;
			line-height: 1.15;
			word-break: break-word;
		}
		.appbar-user {
			font-size: 12px;
			color: var(--muted);
			grid-column: 2;
			grid-row: 2;
		}
		.company-wrap.no-logo .company-name,
		.company-wrap.no-logo .appbar-user {
			grid-column: 1;
		}
		.menu-btn {
			width: 42px;
			height: 42px;
			border: 1px solid var(--line);
			border-radius: 10px;
			background: var(--card);
			padding: 9px 8px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.menu-btn span {
			display: block;
			height: 3px;
			border-radius: 5px;
			background: var(--text);
		}
		.container {
			max-width: 540px;
			margin: 0 auto;
			padding: 12px 12px 24px;
		}
		.top h1 {
			margin: 6px 0 12px;
			font-size: 22px;
		}
		.card {
			background: var(--card);
			border-radius: 14px;
			padding: 12px;
			border: 1px solid var(--line);
			margin-bottom: 12px;
		}
		.subtabs {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
			margin-bottom: 12px;
		}
		.subtab-link {
			display: block;
			text-align: center;
			text-decoration: none;
			font-weight: 700;
			font-size: 14px;
			padding: 10px;
			border: 1px solid var(--line);
			border-radius: 10px;
			color: var(--text);
			background: var(--card);
		}
		.subtab-link.active {
			background: var(--primary);
			color: #fff;
			border-color: var(--primary);
		}
		h2 {
			margin: 0 0 10px;
			font-size: 16px;
		}
		label {
			font-size: 13px;
			font-weight: 600;
			margin: 8px 0 4px;
			display: block;
		}
		input {
			width: 100%;
			border: 1px solid var(--line);
			background: var(--card);
			color: var(--text);
			border-radius: 10px;
			padding: 10px;
			font-size: 15px;
		}
		input[type="radio"] {
			width: auto;
			padding: 0;
			border: 0;
			background: transparent;
			margin: 0;
		}
		.color-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			margin-top: 8px;
		}
		.color-item label {
			margin: 0 0 6px;
		}
		.color-picker {
			width: 100%;
			height: 52px;
			padding: 0;
			border-radius: 10px;
			border: 1px solid var(--line);
			background: var(--card);
			overflow: hidden;
			cursor: pointer;
		}
		.color-picker::-webkit-color-swatch-wrapper {
			padding: 0;
		}
		.color-picker::-webkit-color-swatch {
			border: 0;
			border-radius: 8px;
		}
		.color-picker::-moz-color-swatch {
			border: 0;
			border-radius: 8px;
		}
		button {
			margin-top: 12px;
			width: 100%;
			border: 0;
			border-radius: 10px;
			background: var(--primary);
			color: #fff;
			padding: 11px;
			font-size: 15px;
			font-weight: 700;
		}
		.list-item {
			border: 1px solid var(--line);
			border-radius: 10px;
			padding: 10px;
			margin-bottom: 8px;
		}
		.logo-preview {
			margin-top: 8px;
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 8px;
			border: 1px dashed var(--line);
			border-radius: 10px;
		}
		.logo-preview img {
			width: 44px;
			height: 44px;
			border-radius: 10px;
			object-fit: cover;
			border: 1px solid var(--line);
		}
		.name {
			font-size: 15px;
			font-weight: 700;
		}
		.meta {
			font-size: 13px;
			color: var(--muted);
			margin-top: 3px;
		}
		.empty {
			font-size: 14px;
			color: var(--muted);
		}
		.ok {
			background: var(--ok-bg);
			color: var(--ok-text);
			border-radius: 10px;
			padding: 10px;
			font-size: 13px;
			margin-bottom: 10px;
		}
		.theme-grid {
			display: grid;
			gap: 10px;
		}
		.theme-actions {
			margin-bottom: 10px;
		}
		.small-btn {
			display: inline-block;
			border: 0;
			border-radius: 10px;
			background: var(--primary);
			color: #fff;
			padding: 9px 12px;
			font-size: 13px;
			font-weight: 700;
			text-decoration: none;
		}
		.theme-option {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr) auto;
			align-items: center;
			gap: 12px;
			border: 1px solid var(--line);
			border-radius: 10px;
			padding: 10px;
			font-size: 14px;
		}
		.theme-left {
			display: contents;
		}
		.theme-left span {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			min-width: 0;
		}
		.theme-preview {
			display: flex;
			align-items: center;
			gap: 6px;
			flex-shrink: 0;
		}
		.color-dot {
			width: 14px;
			height: 14px;
			border-radius: 999px;
			border: 1px solid var(--line);
		}
		.custom-theme-list {
			margin-top: 12px;
		}
		.custom-card {
			border: 1px solid var(--line);
			border-radius: 10px;
			padding: 10px;
			margin-bottom: 8px;
		}
		.custom-title {
			font-size: 14px;
			font-weight: 700;
			margin-bottom: 6px;
		}
		.custom-actions {
			display: flex;
			gap: 8px;
			margin-top: 8px;
		}
		.custom-actions button {
			margin-top: 0;
			padding: 8px;
			font-size: 12px;
		}
		.user-actions {
			display: flex;
			gap: 8px;
			margin-top: 10px;
		}
		.user-actions form {
			margin: 0;
			flex: 1;
		}
		.user-actions button {
			margin-top: 0;
			padding: 8px;
			font-size: 12px;
		}
		.theme-live {
			margin-top: 12px;
			border: 1px solid var(--line);
			border-radius: 12px;
			padding: 10px;
		}
		.theme-live h4 {
			margin: 0 0 8px;
			font-size: 13px;
		}
		.theme-preview-box {
			border: 1px solid var(--line);
			border-radius: 10px;
			overflow: hidden;
			background: var(--bg);
		}
		.theme-preview-appbar {
			padding: 8px 10px;
			border-bottom: 1px solid var(--line);
			background: var(--card);
			color: var(--text);
			font-size: 12px;
			font-weight: 700;
		}
		.theme-preview-body {
			padding: 10px;
			background: var(--bg);
		}
		.theme-preview-card {
			border: 1px solid var(--line);
			border-radius: 10px;
			background: var(--card);
			padding: 9px;
			color: var(--text);
			font-size: 12px;
		}
		.theme-preview-muted {
			color: var(--muted);
			margin-top: 4px;
		}
		.theme-preview-btn {
			margin-top: 8px;
			background: var(--primary);
			color: #fff;
			border: 0;
			border-radius: 8px;
			padding: 8px 10px;
			font-size: 12px;
			font-weight: 700;
		}
		.btn-outline {
			background: transparent;
			color: var(--text);
			border: 1px solid var(--line);
		}
		.btn-danger {
			background: var(--primary);
			color: #fff;
		}
		.drawer-backdrop {
			position: fixed;
			inset: 0;
			background: rgba(15, 23, 42, 0.4);
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.2s ease;
			z-index: 29;
		}
		.drawer {
			position: fixed;
			top: 0;
			right: 0;
			width: min(86vw, 330px);
			height: 100vh;
			height: 100dvh;
			min-height: 100dvh;
			background: var(--card);
			border-left: 1px solid var(--line);
			transform: translateX(100%);
			transition: transform 0.25s ease;
			z-index: 30;
			padding: 16px 14px calc(72px + env(safe-area-inset-bottom));
			display: flex;
			flex-direction: column;
			overflow-y: auto;
		}
		.drawer.open { transform: translateX(0); }
		.drawer-backdrop.open {
			opacity: 1;
			pointer-events: auto;
		}
		.drawer-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;
		}
		.drawer-title {
			margin: 0;
			font-size: 18px;
		}
		.close-btn {
			border: 1px solid var(--line);
			background: var(--card);
			color: var(--text);
			border-radius: 8px;
			width: 34px;
			height: 34px;
			font-size: 18px;
			line-height: 1;
		}
		.module-link {
			display: block;
			text-decoration: none;
			font-weight: 700;
			color: var(--text);
			padding: 11px 12px;
			border-radius: 10px;
			border: 1px solid var(--line);
			margin-bottom: 8px;
		}
		.module-link.active {
			background: var(--primary);
			color: #fff;
			border-color: var(--primary);
		}
		.drawer-bottom { margin-top: auto; }
		.logout-link {
			display: block;
			margin-top: 8px;
			text-decoration: none;
			text-align: center;
			font-weight: 700;
			color: var(--text);
			padding: 10px 12px;
			border: 1px solid var(--line);
			border-radius: 10px;
		}
		.error {
			background: #fee2e2;
			color: #991b1b;
		}
		.theme-modal {
			position: fixed;
			left: 50%;
			top: 50%;
			width: min(92vw, 500px);
			max-height: 90vh;
			overflow-y: auto;
			background: var(--card);
			border: 1px solid var(--line);
			border-radius: 12px;
			padding: 14px;
			transform: translate(-50%, -45%);
			opacity: 0;
			pointer-events: none;
			transition: all 0.2s ease;
			z-index: 40;
		}
		.theme-modal.open {
			transform: translate(-50%, -50%);
			opacity: 1;
			pointer-events: auto;
		}
	</style>
</head>
<?php
	$theme_custom_vars = $this->session->userdata('theme_custom_vars');
	$is_custom_theme = (strpos((string) $theme, 'custom_') === 0) && is_array($theme_custom_vars);
	$theme_render = $theme;
	if (!$is_custom_theme && strpos((string) $theme, 'custom_') === 0) {
		$theme_render = 'claro';
	}
	$body_class = $is_custom_theme ? 'theme-custom' : 'theme-'.html_escape($theme_render);
	$theme_presets = array(
		'claro' => array('bg'=>'#f6f7fb','card'=>'#ffffff','text'=>'#1f2937','muted'=>'#64748b','line'=>'#e2e8f0','primary'=>'#0ea5a3','ok_bg'=>'#dcfce7','ok_text'=>'#166534'),
		'oscuro' => array('bg'=>'#0f172a','card'=>'#111827','text'=>'#e5e7eb','muted'=>'#9ca3af','line'=>'#334155','primary'=>'#14b8a6','ok_bg'=>'#064e3b','ok_text'=>'#bbf7d0'),
		'rosado' => array('bg'=>'#fff1f6','card'=>'#ffffff','text'=>'#4a1028','muted'=>'#8a4661','line'=>'#f8bbd0','primary'=>'#ec4899','ok_bg'=>'#fce7f3','ok_text'=>'#9d174d'),
		'fuccia' => array('bg'=>'#fdf2ff','card'=>'#ffffff','text'=>'#4a044e','muted'=>'#7e22ce','line'=>'#f0abfc','primary'=>'#d946ef','ok_bg'=>'#fae8ff','ok_text'=>'#86198f'),
		'verde' => array('bg'=>'#f0fdf4','card'=>'#ffffff','text'=>'#14532d','muted'=>'#166534','line'=>'#86efac','primary'=>'#22c55e','ok_bg'=>'#dcfce7','ok_text'=>'#166534'),
		'rojo' => array('bg'=>'#fff1f2','card'=>'#ffffff','text'=>'#7f1d1d','muted'=>'#b91c1c','line'=>'#fca5a5','primary'=>'#ef4444','ok_bg'=>'#fee2e2','ok_text'=>'#991b1b'),
		'azul_claro' => array('bg'=>'#eff6ff','card'=>'#ffffff','text'=>'#1e3a8a','muted'=>'#1d4ed8','line'=>'#93c5fd','primary'=>'#38bdf8','ok_bg'=>'#dbeafe','ok_text'=>'#1e40af'),
		'azul_rey' => array('bg'=>'#eef2ff','card'=>'#ffffff','text'=>'#1e1b4b','muted'=>'#312e81','line'=>'#a5b4fc','primary'=>'#4f46e5','ok_bg'=>'#e0e7ff','ok_text'=>'#3730a3')
	);
	$vars = $is_custom_theme ? $theme_custom_vars : (isset($theme_presets[$theme_render]) ? $theme_presets[$theme_render] : $theme_presets['claro']);
	$inline_style = '--bg:'.$vars['bg'].';--card:'.$vars['card'].';--text:'.$vars['text'].';--muted:'.$vars['muted'].';--line:'.$vars['line'].';--primary:'.$vars['primary'].';--ok-bg:'.$vars['ok_bg'].';--ok-text:'.$vars['ok_text'].';';
	$flash_ok = $this->session->flashdata('ok');
	$flash_error = $this->session->flashdata('error');
	$current_username = strtolower((string) $this->session->userdata('username'));
	$current_user_id = (int) $this->session->userdata('user_id');
	$is_admin_actual = ($current_username === 'admin');
?>
<body class="<?php echo $body_class; ?>" style="<?php echo html_escape($inline_style); ?>">
	<header class="appbar">
		<div class="appbar-inner">
			<div class="company-wrap <?php echo empty($app_logo) ? 'no-logo' : ''; ?>">
				<div class="brand">
					<?php if (!empty($app_logo)): ?>
						<img class="company-logo" src="<?php echo base_url($app_logo); ?>" alt="Logo">
					<?php endif; ?>
					<div class="company-name"><?php echo html_escape($app_name); ?></div>
				</div>
				<div class="appbar-user">Hola, <?php echo html_escape($this->session->userdata('username')); ?></div>
			</div>
			<button id="openMenu" class="menu-btn" type="button" aria-label="Abrir modulos">
				<span></span>
				<span></span>
				<span></span>
			</button>
		</div>
	</header>

	<div class="container">
		<div class="top">
			<h1>Configuracion</h1>
		</div>

		<div class="card">
			<div class="subtabs">
				<a class="subtab-link <?php echo ($tab === 'general') ? 'active' : ''; ?>" href="<?php echo site_url('configuracion/general'); ?>">General</a>
				<a class="subtab-link <?php echo ($tab === 'parametros') ? 'active' : ''; ?>" href="<?php echo site_url('configuracion/parametros-trabajo'); ?>">Parametros</a>
				<a class="subtab-link <?php echo ($tab === 'empleados') ? 'active' : ''; ?>" href="<?php echo site_url('configuracion/empleados'); ?>">Usuarios</a>
				<a class="subtab-link <?php echo ($tab === 'temas') ? 'active' : ''; ?>" href="<?php echo site_url('configuracion/temas'); ?>">Temas</a>
			</div>

			<?php if (!empty($flash_ok)): ?>
				<div class="ok"><?php echo $flash_ok; ?></div>
			<?php endif; ?>
			<?php if (!empty($flash_error)): ?>
				<div class="ok error"><?php echo $flash_error; ?></div>
			<?php endif; ?>

			<?php if ($tab === 'general'): ?>
				<h2>General de la app</h2>
				<?php echo form_open_multipart('configuracion/guardar-general'); ?>
					<label for="app_name">Nombre de la app</label>
					<input id="app_name" name="app_name" type="text" maxlength="100" value="<?php echo html_escape($app_name); ?>" required>

					<label for="logo">Logo (png, jpg, gif, webp)</label>
					<input id="logo" name="logo" type="file" accept="image/*">

					<?php if (!empty($app_logo)): ?>
						<div class="logo-preview">
							<img src="<?php echo base_url($app_logo); ?>" alt="Logo actual">
							<div class="meta">Logo actual de la app</div>
						</div>
					<?php endif; ?>

					<button type="submit">Guardar general</button>
				<?php echo form_close(); ?>
			<?php elseif ($tab === 'empleados'): ?>
				<h2>Nuevo login de usuario</h2>
				<a href="#" id="openEmployeeModal" class="small-btn">Agregar usuario</a>
			<?php elseif ($tab === 'temas'): ?>
				<h2>Tema de la app</h2>
				<div class="theme-actions">
					<a href="#" id="openThemeModal" class="small-btn">Agregar Tema</a>
				</div>
				<?php echo form_open('configuracion/guardar-tema'); ?>
					<div class="theme-grid">
						<label class="theme-option" for="tema_claro">
							<div class="theme-left">
								<input id="tema_claro" type="radio" name="tema" value="claro" <?php echo ($theme === 'claro') ? 'checked' : ''; ?>>
								<span>Claro</span>
							</div>
							<div class="theme-preview" aria-hidden="true">
								<span class="color-dot" style="background:#f6f7fb;"></span>
								<span class="color-dot" style="background:#ffffff;"></span>
								<span class="color-dot" style="background:#0ea5a3;"></span>
								<span class="color-dot" style="background:#1f2937;"></span>
								<span class="color-dot" style="background:#64748b;"></span>
							</div>
						</label>
						<label class="theme-option" for="tema_oscuro">
							<div class="theme-left">
								<input id="tema_oscuro" type="radio" name="tema" value="oscuro" <?php echo ($theme === 'oscuro') ? 'checked' : ''; ?>>
								<span>Oscuro</span>
							</div>
							<div class="theme-preview" aria-hidden="true">
								<span class="color-dot" style="background:#0f172a;"></span>
								<span class="color-dot" style="background:#111827;"></span>
								<span class="color-dot" style="background:#14b8a6;"></span>
								<span class="color-dot" style="background:#e5e7eb;"></span>
								<span class="color-dot" style="background:#9ca3af;"></span>
							</div>
						</label>
						<label class="theme-option" for="tema_rosado">
							<div class="theme-left">
								<input id="tema_rosado" type="radio" name="tema" value="rosado" <?php echo ($theme === 'rosado') ? 'checked' : ''; ?>>
								<span>Rosado</span>
							</div>
							<div class="theme-preview" aria-hidden="true">
								<span class="color-dot" style="background:#fff1f6;"></span>
								<span class="color-dot" style="background:#ec4899;"></span>
								<span class="color-dot" style="background:#4a1028;"></span>
							</div>
						</label>
						<label class="theme-option" for="tema_fuccia">
							<div class="theme-left">
								<input id="tema_fuccia" type="radio" name="tema" value="fuccia" <?php echo ($theme === 'fuccia') ? 'checked' : ''; ?>>
								<span>Fuccia</span>
							</div>
							<div class="theme-preview" aria-hidden="true">
								<span class="color-dot" style="background:#fdf2ff;"></span>
								<span class="color-dot" style="background:#d946ef;"></span>
								<span class="color-dot" style="background:#4a044e;"></span>
							</div>
						</label>
						<label class="theme-option" for="tema_verde">
							<div class="theme-left">
								<input id="tema_verde" type="radio" name="tema" value="verde" <?php echo ($theme === 'verde') ? 'checked' : ''; ?>>
								<span>Verde</span>
							</div>
							<div class="theme-preview" aria-hidden="true">
								<span class="color-dot" style="background:#f0fdf4;"></span>
								<span class="color-dot" style="background:#22c55e;"></span>
								<span class="color-dot" style="background:#14532d;"></span>
							</div>
						</label>
						<label class="theme-option" for="tema_rojo">
							<div class="theme-left">
								<input id="tema_rojo" type="radio" name="tema" value="rojo" <?php echo ($theme === 'rojo') ? 'checked' : ''; ?>>
								<span>Rojo</span>
							</div>
							<div class="theme-preview" aria-hidden="true">
								<span class="color-dot" style="background:#fff1f2;"></span>
								<span class="color-dot" style="background:#ef4444;"></span>
								<span class="color-dot" style="background:#7f1d1d;"></span>
							</div>
						</label>
						<label class="theme-option" for="tema_azul_claro">
							<div class="theme-left">
								<input id="tema_azul_claro" type="radio" name="tema" value="azul_claro" <?php echo ($theme === 'azul_claro') ? 'checked' : ''; ?>>
								<span>Azul Claro</span>
							</div>
							<div class="theme-preview" aria-hidden="true">
								<span class="color-dot" style="background:#eff6ff;"></span>
								<span class="color-dot" style="background:#38bdf8;"></span>
								<span class="color-dot" style="background:#1e3a8a;"></span>
							</div>
						</label>
						<label class="theme-option" for="tema_azul_rey">
							<div class="theme-left">
								<input id="tema_azul_rey" type="radio" name="tema" value="azul_rey" <?php echo ($theme === 'azul_rey') ? 'checked' : ''; ?>>
								<span>Azul Rey</span>
							</div>
							<div class="theme-preview" aria-hidden="true">
								<span class="color-dot" style="background:#eef2ff;"></span>
								<span class="color-dot" style="background:#4f46e5;"></span>
								<span class="color-dot" style="background:#1e1b4b;"></span>
							</div>
						</label>
						<?php if (!empty($temas_custom)): ?>
							<?php foreach ($temas_custom as $t): ?>
								<label class="theme-option" for="tema_custom_<?php echo (int) $t->id; ?>">
									<div class="theme-left">
										<input id="tema_custom_<?php echo (int) $t->id; ?>" type="radio" name="tema" value="custom_<?php echo (int) $t->id; ?>" <?php echo ($theme === 'custom_'.(int) $t->id) ? 'checked' : ''; ?>>
										<span><?php echo html_escape($t->nombre); ?></span>
									</div>
									<div class="theme-preview" aria-hidden="true">
										<span class="color-dot" style="background:<?php echo html_escape($t->bg); ?>;"></span>
										<span class="color-dot" style="background:<?php echo html_escape($t->primary_color); ?>;"></span>
										<span class="color-dot" style="background:<?php echo html_escape($t->text); ?>;"></span>
									</div>
								</label>
							<?php endforeach; ?>
						<?php endif; ?>
					</div>
					<button type="submit">Guardar tema</button>
				<?php echo form_close(); ?>

				<div class="custom-theme-list">
					<h2>Mis temas</h2>
					<?php if (empty($temas_custom)): ?>
						<div class="empty">Aun no has creado temas personalizados.</div>
					<?php else: ?>
						<?php foreach ($temas_custom as $t): ?>
							<div class="custom-card">
								<div class="custom-title"><?php echo html_escape($t->nombre); ?></div>
								<div class="theme-preview">
									<span class="color-dot" style="background:<?php echo html_escape($t->bg); ?>;"></span>
									<span class="color-dot" style="background:<?php echo html_escape($t->card); ?>;"></span>
									<span class="color-dot" style="background:<?php echo html_escape($t->primary_color); ?>;"></span>
									<span class="color-dot" style="background:<?php echo html_escape($t->text); ?>;"></span>
								</div>
								<div class="custom-actions">
									<button type="button" class="btn-outline edit-theme-btn"
										data-id="<?php echo (int) $t->id; ?>"
										data-nombre="<?php echo html_escape($t->nombre); ?>"
										data-bg="<?php echo html_escape($t->bg); ?>"
										data-card="<?php echo html_escape($t->card); ?>"
										data-text="<?php echo html_escape($t->text); ?>"
										data-muted="<?php echo html_escape($t->muted); ?>"
										data-linea="<?php echo html_escape($t->linea); ?>"
										data-primary_color="<?php echo html_escape($t->primary_color); ?>"
										data-ok_bg="<?php echo html_escape($t->ok_bg); ?>"
										data-ok_text="<?php echo html_escape($t->ok_text); ?>">Editar</button>

									<?php echo form_open('configuracion/eliminar-tema', array('style' => 'margin:0;flex:1;')); ?>
										<input type="hidden" name="tema_id" value="<?php echo (int) $t->id; ?>">
										<button class="btn-danger" type="submit">Borrar</button>
									<?php echo form_close(); ?>
								</div>
							</div>
						<?php endforeach; ?>
					<?php endif; ?>
				</div>
			<?php endif; ?>
		</div>

		<?php if ($tab === 'parametros'): ?>
			<div class="card">
				<h2>Parametros de trabajo</h2>
				<?php echo form_open('configuracion/guardar-parametros-trabajo'); ?>
					<label>Mano de obra</label>
					<div class="meta">Coloca el monto que quieres usar para mano de obra.</div>

					<label for="monto_mano_obra">Monto</label>
					<input id="monto_mano_obra" name="monto_mano_obra" type="number" min="0" step="0.01" value="<?php echo number_format((float) $parametros_trabajo['monto_mano_obra'], 2, '.', ''); ?>" required>

					<button type="submit">Guardar parametros</button>
				<?php echo form_close(); ?>
			</div>
		<?php endif; ?>

		<?php if ($tab === 'empleados'): ?>
			<div class="card">
				<h2>Listado de usuarios</h2>
				<?php if (empty($empleados)): ?>
					<div class="empty">Aun no hay usuarios de empleados registrados.</div>
				<?php else: ?>
					<?php foreach ($empleados as $emp): ?>
						<?php
							$emp_username = strtolower((string) $emp->username);
							$es_admin_obj = ($emp_username === 'admin' || (int) $emp->id === 1);
							$puede_gestionar = $is_admin_actual || !$es_admin_obj;
							$es_propia_cuenta = ($current_user_id > 0 && $current_user_id === (int) $emp->id);
						?>
						<div class="list-item">
							<div class="name"><?php echo html_escape($emp->nombre); ?></div>
							<div class="meta">Usuario: <?php echo html_escape($emp->username); ?></div>
							<div class="meta">ID: <?php echo (int) $emp->id; ?></div>
							<?php if (!$puede_gestionar): ?>
								<div class="meta">Solo el admin puede editar/eliminar este usuario.</div>
							<?php else: ?>
								<div class="user-actions">
									<button type="button" class="btn-outline edit-user-btn"
										data-id="<?php echo (int) $emp->id; ?>"
										data-nombre="<?php echo html_escape($emp->nombre); ?>"
										data-username="<?php echo html_escape($emp->username); ?>">Editar</button>

									<?php if (!$es_propia_cuenta): ?>
										<?php echo form_open('configuracion/eliminar-empleado'); ?>
											<input type="hidden" name="empleado_id" value="<?php echo (int) $emp->id; ?>">
											<button class="btn-danger" type="submit">Eliminar</button>
										<?php echo form_close(); ?>
									<?php else: ?>
										<button type="button" class="btn-outline" disabled>No borrar</button>
									<?php endif; ?>
								</div>
							<?php endif; ?>
						</div>
					<?php endforeach; ?>
				<?php endif; ?>
			</div>
		<?php endif; ?>
	</div>

	<div id="drawerBackdrop" class="drawer-backdrop"></div>
	<aside id="drawer" class="drawer">
		<div class="drawer-head">
			<h3 class="drawer-title">Modulos</h3>
			<button id="closeMenu" class="close-btn" type="button" aria-label="Cerrar menu">x</button>
		</div>
		<a class="module-link" href="<?php echo site_url('dashboard'); ?>">Dashboard</a>
		<a class="module-link" href="<?php echo site_url('clientes'); ?>">Clientes</a>
		<a class="module-link" href="<?php echo site_url('inventario'); ?>">Inventario</a>
		<a class="module-link" href="<?php echo site_url('compras'); ?>">Compras</a>
		<a class="module-link" href="<?php echo site_url('pedidos'); ?>">Pedidos</a>
		<a class="module-link" href="<?php echo site_url('reportes'); ?>">Reportes</a>
		<div class="drawer-bottom">
			<a class="module-link active" href="<?php echo site_url('configuracion'); ?>">Configuracion</a>
			<a class="logout-link" href="<?php echo site_url('logout'); ?>">Salir</a>
		</div>
	</aside>

	<div id="themeBackdrop" class="drawer-backdrop"></div>
	<div id="themeModal" class="theme-modal">
		<div class="drawer-head">
			<h3 class="drawer-title" id="themeModalTitle">Agregar Tema</h3>
			<button id="closeThemeModal" class="close-btn" type="button" aria-label="Cerrar modal">x</button>
		</div>
		<?php echo form_open('configuracion/agregar-tema', array('id' => 'themeForm')); ?>
			<input type="hidden" name="tema_id" id="tema_id">
			<label for="theme_nombre">Nombre</label>
			<input id="theme_nombre" name="nombre" type="text" required>

			<div class="color-grid">
				<div class="color-item">
					<label for="theme_bg">Fondo</label>
					<input id="theme_bg" class="color-picker" name="bg" type="color" value="#f6f7fb" required>
				</div>
				<div class="color-item">
					<label for="theme_card">Tarjeta</label>
					<input id="theme_card" class="color-picker" name="card" type="color" value="#ffffff" required>
				</div>
				<div class="color-item">
					<label for="theme_text">Texto</label>
					<input id="theme_text" class="color-picker" name="text" type="color" value="#1f2937" required>
				</div>
				<div class="color-item">
					<label for="theme_muted">Texto secundario</label>
					<input id="theme_muted" class="color-picker" name="muted" type="color" value="#64748b" required>
				</div>
				<div class="color-item">
					<label for="theme_linea">Bordes</label>
					<input id="theme_linea" class="color-picker" name="linea" type="color" value="#e2e8f0" required>
				</div>
				<div class="color-item">
					<label for="theme_primary_color">Color principal</label>
					<input id="theme_primary_color" class="color-picker" name="primary_color" type="color" value="#0ea5a3" required>
				</div>
				<div class="color-item">
					<label for="theme_ok_bg">Fondo exito</label>
					<input id="theme_ok_bg" class="color-picker" name="ok_bg" type="color" value="#dcfce7" required>
				</div>
				<div class="color-item">
					<label for="theme_ok_text">Texto exito</label>
					<input id="theme_ok_text" class="color-picker" name="ok_text" type="color" value="#166534" required>
				</div>
			</div>

			<div class="theme-live">
				<h4>Vista previa en vivo</h4>
				<div class="theme-preview-box" id="themePreviewBox">
					<div class="theme-preview-appbar" id="pvAppbar"><?php echo html_escape($app_name); ?></div>
					<div class="theme-preview-body" id="pvBody">
						<div class="theme-preview-card" id="pvCard">
							<div id="pvText">Titulo del modulo</div>
							<div class="theme-preview-muted" id="pvMuted">Texto secundario del tema</div>
							<button type="button" class="theme-preview-btn" id="pvBtn">Boton principal</button>
						</div>
					</div>
				</div>
			</div>

			<button type="submit" id="themeSubmitBtn">Crear tema</button>
		<?php echo form_close(); ?>
	</div>

	<?php if ($tab === 'empleados'): ?>
		<div id="employeeBackdrop" class="drawer-backdrop"></div>
		<div id="employeeModal" class="theme-modal">
			<div class="drawer-head">
				<h3 id="employeeModalTitle" class="drawer-title">Agregar usuario</h3>
				<button id="closeEmployeeModal" class="close-btn" type="button" aria-label="Cerrar modal">x</button>
			</div>
			<?php echo form_open('configuracion/guardar-empleado', array('id' => 'employeeForm')); ?>
				<input type="hidden" id="emp_id" name="empleado_id">
				<label for="emp_nombre">Nombre</label>
				<input id="emp_nombre" name="nombre" type="text" placeholder="Nombre completo" required>

				<label for="emp_username">Usuario</label>
				<input id="emp_username" name="username" type="text" placeholder="Ej. maria" required>

				<label for="emp_password">Contrasena</label>
				<input id="emp_password" name="password" type="password" placeholder="Minimo 6 caracteres">

				<button id="employeeSubmitBtn" type="submit">Crear usuario</button>
			<?php echo form_close(); ?>
		</div>
	<?php endif; ?>

	<script>
		(function () {
			var openBtn = document.getElementById('openMenu');
			var closeBtn = document.getElementById('closeMenu');
			var drawer = document.getElementById('drawer');
			var backdrop = document.getElementById('drawerBackdrop');
			var openThemeModalBtn = document.getElementById('openThemeModal');
			var closeThemeModalBtn = document.getElementById('closeThemeModal');
			var themeModal = document.getElementById('themeModal');
			var themeBackdrop = document.getElementById('themeBackdrop');
			var openEmployeeModalBtn = document.getElementById('openEmployeeModal');
			var closeEmployeeModalBtn = document.getElementById('closeEmployeeModal');
			var employeeModal = document.getElementById('employeeModal');
			var employeeBackdrop = document.getElementById('employeeBackdrop');
			var employeeForm = document.getElementById('employeeForm');
			var employeeModalTitle = document.getElementById('employeeModalTitle');
			var employeeSubmitBtn = document.getElementById('employeeSubmitBtn');
			var editUserBtns = document.querySelectorAll('.edit-user-btn');
			var themeForm = document.getElementById('themeForm');
			var themeModalTitle = document.getElementById('themeModalTitle');
			var themeSubmitBtn = document.getElementById('themeSubmitBtn');
			var editBtns = document.querySelectorAll('.edit-theme-btn');
			var pvBox = document.getElementById('themePreviewBox');
			var pvAppbar = document.getElementById('pvAppbar');
			var pvBody = document.getElementById('pvBody');
			var pvCard = document.getElementById('pvCard');
			var pvText = document.getElementById('pvText');
			var pvMuted = document.getElementById('pvMuted');
			var pvBtn = document.getElementById('pvBtn');
			var colorInputs = [
				document.getElementById('theme_bg'),
				document.getElementById('theme_card'),
				document.getElementById('theme_text'),
				document.getElementById('theme_muted'),
				document.getElementById('theme_linea'),
				document.getElementById('theme_primary_color'),
				document.getElementById('theme_ok_bg'),
				document.getElementById('theme_ok_text')
			];

			function openMenu() {
				drawer.classList.add('open');
				backdrop.classList.add('open');
			}

			function closeMenu() {
				drawer.classList.remove('open');
				backdrop.classList.remove('open');
			}

			openBtn.addEventListener('click', openMenu);
			closeBtn.addEventListener('click', closeMenu);
			backdrop.addEventListener('click', closeMenu);

			function openThemeModal() {
				themeModal.classList.add('open');
				themeBackdrop.classList.add('open');
			}

			function closeThemeModal() {
				themeModal.classList.remove('open');
				themeBackdrop.classList.remove('open');
			}

			function openEmployeeModal() {
				if (!employeeModal || !employeeBackdrop) { return; }
				employeeModal.classList.add('open');
				employeeBackdrop.classList.add('open');
			}

			function closeEmployeeModal() {
				if (!employeeModal || !employeeBackdrop) { return; }
				employeeModal.classList.remove('open');
				employeeBackdrop.classList.remove('open');
			}

			function fillEmployeeForm(data, isEdit) {
				if (!employeeForm) { return; }
				document.getElementById('emp_id').value = data.empleado_id || '';
				document.getElementById('emp_nombre').value = data.nombre || '';
				document.getElementById('emp_username').value = data.username || '';
				document.getElementById('emp_password').value = '';
				document.getElementById('emp_password').required = !isEdit;

				employeeForm.action = isEdit ? '<?php echo site_url('configuracion/editar-empleado'); ?>' : '<?php echo site_url('configuracion/guardar-empleado'); ?>';
				if (employeeModalTitle) {
					employeeModalTitle.textContent = isEdit ? 'Editar usuario' : 'Agregar usuario';
				}
				if (employeeSubmitBtn) {
					employeeSubmitBtn.textContent = isEdit ? 'Guardar cambios' : 'Crear usuario';
				}
			}

			function fillThemeForm(data, isEdit) {
				document.getElementById('tema_id').value = data.tema_id || '';
				document.getElementById('theme_nombre').value = data.nombre || '';
				document.getElementById('theme_bg').value = data.bg || '#f6f7fb';
				document.getElementById('theme_card').value = data.card || '#ffffff';
				document.getElementById('theme_text').value = data.text || '#1f2937';
				document.getElementById('theme_muted').value = data.muted || '#64748b';
				document.getElementById('theme_linea').value = data.linea || '#e2e8f0';
				document.getElementById('theme_primary_color').value = data.primary_color || '#0ea5a3';
				document.getElementById('theme_ok_bg').value = data.ok_bg || '#dcfce7';
				document.getElementById('theme_ok_text').value = data.ok_text || '#166534';

				themeForm.action = isEdit ? '<?php echo site_url('configuracion/editar-tema'); ?>' : '<?php echo site_url('configuracion/agregar-tema'); ?>';
				themeModalTitle.textContent = isEdit ? 'Editar Tema' : 'Agregar Tema';
				themeSubmitBtn.textContent = isEdit ? 'Guardar cambios' : 'Crear tema';
				renderThemePreview();
			}

			function renderThemePreview() {
				var bg = document.getElementById('theme_bg').value || '#f6f7fb';
				var card = document.getElementById('theme_card').value || '#ffffff';
				var text = document.getElementById('theme_text').value || '#1f2937';
				var muted = document.getElementById('theme_muted').value || '#64748b';
				var line = document.getElementById('theme_linea').value || '#e2e8f0';
				var primary = document.getElementById('theme_primary_color').value || '#0ea5a3';
				var okBg = document.getElementById('theme_ok_bg').value || '#dcfce7';
				var okText = document.getElementById('theme_ok_text').value || '#166534';

				pvBox.style.background = bg;
				pvBox.style.borderColor = line;
				pvAppbar.style.background = card;
				pvAppbar.style.borderBottomColor = line;
				pvAppbar.style.color = text;
				pvBody.style.background = bg;
				pvCard.style.background = card;
				pvCard.style.borderColor = line;
				pvCard.style.color = text;
				pvText.style.color = text;
				pvMuted.style.color = muted;
				pvBtn.style.background = primary;
				pvBtn.style.color = '#ffffff';
				pvBtn.style.borderColor = primary;
				pvBtn.style.boxShadow = 'inset 0 0 0 2px ' + okBg;
				pvBtn.title = 'OK text: ' + okText;
			}

			if (openThemeModalBtn) {
				openThemeModalBtn.addEventListener('click', function (e) {
					e.preventDefault();
					fillThemeForm({}, false);
					openThemeModal();
				});
			}
			if (closeThemeModalBtn) {
				closeThemeModalBtn.addEventListener('click', closeThemeModal);
			}
			if (themeBackdrop) {
				themeBackdrop.addEventListener('click', closeThemeModal);
			}
			if (openEmployeeModalBtn) {
				openEmployeeModalBtn.addEventListener('click', function (e) {
					e.preventDefault();
					fillEmployeeForm({}, false);
					openEmployeeModal();
				});
			}
			if (closeEmployeeModalBtn) {
				closeEmployeeModalBtn.addEventListener('click', closeEmployeeModal);
			}
			if (employeeBackdrop) {
				employeeBackdrop.addEventListener('click', closeEmployeeModal);
			}
			editUserBtns.forEach(function (btn) {
				btn.addEventListener('click', function () {
					fillEmployeeForm({
						empleado_id: btn.getAttribute('data-id'),
						nombre: btn.getAttribute('data-nombre'),
						username: btn.getAttribute('data-username')
					}, true);
					openEmployeeModal();
				});
			});

			editBtns.forEach(function (btn) {
				btn.addEventListener('click', function () {
					fillThemeForm({
						tema_id: btn.getAttribute('data-id'),
						nombre: btn.getAttribute('data-nombre'),
						bg: btn.getAttribute('data-bg'),
						card: btn.getAttribute('data-card'),
						text: btn.getAttribute('data-text'),
						muted: btn.getAttribute('data-muted'),
						linea: btn.getAttribute('data-linea'),
						primary_color: btn.getAttribute('data-primary_color'),
						ok_bg: btn.getAttribute('data-ok_bg'),
						ok_text: btn.getAttribute('data-ok_text')
					}, true);
					openThemeModal();
				});
			});

			colorInputs.forEach(function (input) {
				if (!input) { return; }
				input.addEventListener('input', renderThemePreview);
				input.addEventListener('change', renderThemePreview);
			});

			var hasEmployeeError = <?php echo ($tab === 'empleados' && !empty($flash_error)) ? 'true' : 'false'; ?>;
			if (hasEmployeeError) {
				fillEmployeeForm({}, false);
				openEmployeeModal();
			}

			renderThemePreview();
		})();
	</script>
</body>
</html>
