<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<?php
		$app_name = isset($app_config['app_name']) && $app_config['app_name'] !== '' ? $app_config['app_name'] : 'BellaIdea';
		$app_logo = isset($app_config['logo_path']) ? $app_config['logo_path'] : '';
	?>
	<title>Login | <?php echo html_escape($app_name); ?></title>
	<style>
		:root {
			--bg: #f2f4f7;
			--card: #ffffff;
			--text: #15202b;
			--muted: #5b6675;
			--primary: #0b6e4f;
			--danger: #b42318;
		}
		* { box-sizing: border-box; }
		body {
			margin: 0;
			font-family: "Segoe UI", Tahoma, Arial, sans-serif;
			background: linear-gradient(180deg, #e8f5ef 0%, var(--bg) 45%);
			color: var(--text);
		}
		.screen {
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16px;
		}
		.card {
			width: 100%;
			max-width: 420px;
			background: var(--card);
			border-radius: 18px;
			padding: 24px 18px;
			box-shadow: 0 12px 24px rgba(21, 32, 43, 0.12);
		}
		h1 {
			margin: 0 0 8px;
			font-size: 24px;
			text-align: center;
		}
		.brand {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			margin-bottom: 8px;
		}
		.brand-logo {
			width: 34px;
			height: 34px;
			border-radius: 8px;
			object-fit: cover;
			border: 1px solid #cbd5e1;
			background: #fff;
		}
		.sub {
			margin: 0 0 18px;
			text-align: center;
			color: var(--muted);
			font-size: 14px;
		}
		label {
			display: block;
			margin: 10px 0 6px;
			font-size: 14px;
			font-weight: 600;
		}
		input {
			width: 100%;
			border: 1px solid #cbd5e1;
			border-radius: 10px;
			padding: 11px 12px;
			font-size: 16px;
		}
		button {
			width: 100%;
			border: 0;
			border-radius: 10px;
			padding: 12px;
			margin-top: 16px;
			background: var(--primary);
			color: #fff;
			font-size: 16px;
			font-weight: 700;
		}
		.alert {
			border-radius: 10px;
			padding: 10px;
			margin-bottom: 10px;
			font-size: 14px;
		}
		.alert-error {
			background: #fee4e2;
			color: var(--danger);
		}
	</style>
</head>
<body>
	<div class="screen">
		<div class="card">
			<div class="brand">
				<?php if (!empty($app_logo)): ?>
					<img class="brand-logo" src="<?php echo base_url($app_logo); ?>" alt="Logo">
				<?php endif; ?>
				<h1><?php echo html_escape($app_name); ?></h1>
			</div>
			<p class="sub">Ingreso para telefono</p>

			<?php if ($this->session->flashdata('error')): ?>
				<div class="alert alert-error"><?php echo $this->session->flashdata('error'); ?></div>
			<?php endif; ?>
			<?php if (validation_errors()): ?>
				<div class="alert alert-error"><?php echo validation_errors(); ?></div>
			<?php endif; ?>

			<?php echo form_open('login'); ?>
				<label for="username">Usuario</label>
				<input type="text" id="username" name="username" placeholder="Tu usuario" required>

				<label for="password">Contrasena</label>
				<input type="password" id="password" name="password" placeholder="Tu clave" required>

				<button type="submit">Entrar</button>
			<?php echo form_close(); ?>

		</div>
	</div>
</body>
</html>
