diff --git a/admin/includes/admin-footer.php b/admin/includes/admin-footer.php
new file mode 100644
index 0000000..891f980
--- /dev/null
+++ b/admin/includes/admin-footer.php
@@ -0,0 +1,7 @@
+        </div><!-- /.admin-content -->
+    </div><!-- /.admin-main -->
+
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+    <script src="../assets/js/admin.js"></script>
+</body>
+</html>
diff --git a/admin/includes/admin-header.php b/admin/includes/admin-header.php
new file mode 100644
index 0000000..6e097b4
--- /dev/null
+++ b/admin/includes/admin-header.php
@@ -0,0 +1,68 @@
+<?php
+require_once __DIR__ . '/../../includes/auth.php';
+require_once __DIR__ . '/../../includes/csrf.php';
+authRequire();
+authStart();
+$currentPage = basename($_SERVER['PHP_SELF'], '.php');
+?>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= isset($pageTitle) ? htmlspecialchars($pageTitle) : 'Admin' ?> - Gestoría LP</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="../assets/css/admin.css">
+</head>
+<body class="admin-body">
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar__brand">
+            <i class="fas fa-balance-scale"></i>
+            <span>Gestoría LP</span>
+        </div>
+        <nav class="sidebar__nav">
+            <a href="index.php" class="sidebar__link <?= $currentPage === 'index' ? 'sidebar__link--active' : '' ?>">
+                <i class="fas fa-tachometer-alt"></i> <span>Dashboard</span>
+            </a>
+            <a href="clientes.php" class="sidebar__link <?= $currentPage === 'clientes' || $currentPage === 'cliente-detalle' ? 'sidebar__link--active' : '' ?>">
+                <i class="fas fa-users"></i> <span>Clientes</span>
+            </a>
+            <a href="tramites.php" class="sidebar__link <?= $currentPage === 'tramites' || $currentPage === 'tramite-detalle' ? 'sidebar__link--active' : '' ?>">
+                <i class="fas fa-file-alt"></i> <span>Trámites</span>
+            </a>
+            <a href="solicitudes.php" class="sidebar__link <?= $currentPage === 'solicitudes' || $currentPage === 'solicitud-detalle' ? 'sidebar__link--active' : '' ?>">
+                <i class="fas fa-inbox"></i> <span>Solicitudes</span>
+            </a>
+            <a href="recordatorios.php" class="sidebar__link <?= $currentPage === 'recordatorios' ? 'sidebar__link--active' : '' ?>">
+                <i class="fas fa-bell"></i> <span>Recordatorios</span>
+            </a>
+            <a href="testimonios.php" class="sidebar__link <?= $currentPage === 'testimonios' ? 'sidebar__link--active' : '' ?>">
+                <i class="fas fa-star"></i> <span>Testimonios</span>
+            </a>
+            <a href="carga-historial.php" class="sidebar__link <?= $currentPage === 'carga-historial' ? 'sidebar__link--active' : '' ?>">
+                <i class="fas fa-upload"></i> <span>Carga Historial</span>
+            </a>
+        </nav>
+        <div class="sidebar__footer">
+            <a href="logout.php" class="sidebar__link sidebar__link--logout">
+                <i class="fas fa-sign-out-alt"></i> <span>Cerrar Sesión</span>
+            </a>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <div class="admin-main">
+        <header class="admin-topbar">
+            <button class="sidebar-toggle" id="sidebarToggle">
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="admin-topbar__right">
+                <span class="admin-topbar__user">
+                    <i class="fas fa-user-circle"></i> <?= htmlspecialchars($_SESSION['username'] ?? 'Admin') ?>
+                </span>
+            </div>
+        </header>
+        <div class="admin-content">
diff --git a/admin/login.php b/admin/login.php
new file mode 100644
index 0000000..deff12d
--- /dev/null
+++ b/admin/login.php
@@ -0,0 +1,68 @@
+<?php
+require_once __DIR__ . '/../includes/auth.php';
+require_once __DIR__ . '/../includes/csrf.php';
+
+authStart();
+
+// Already logged in?
+if (authCheck()) {
+    header('Location: index.php');
+    exit;
+}
+
+$error = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    if (!csrfValidate()) {
+        $error = 'Token de seguridad inválido.';
+    } else {
+        $username = trim($_POST['username'] ?? '');
+        $password = $_POST['password'] ?? '';
+        if (authLogin($username, $password)) {
+            header('Location: index.php');
+            exit;
+        } else {
+            $error = 'Usuario o contraseña incorrectos.';
+        }
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Gestoría LP Admin</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="../assets/css/admin.css">
+</head>
+<body class="login-page">
+    <div class="login-container">
+        <div class="login-card">
+            <div class="login-card__header">
+                <i class="fas fa-balance-scale"></i>
+                <h1>Gestoría LP</h1>
+                <p>Panel de Administración</p>
+            </div>
+            <?php if ($error): ?>
+                <div class="alert alert--danger"><?= htmlspecialchars($error) ?></div>
+            <?php endif; ?>
+            <form method="POST" class="login-form">
+                <?= csrfField() ?>
+                <div class="form-group">
+                    <label for="username"><i class="fas fa-user"></i> Usuario</label>
+                    <input type="text" id="username" name="username" required autofocus placeholder="Ingresa tu usuario">
+                </div>
+                <div class="form-group">
+                    <label for="password"><i class="fas fa-lock"></i> Contraseña</label>
+                    <input type="password" id="password" name="password" required placeholder="Ingresa tu contraseña">
+                </div>
+                <button type="submit" class="btn btn--primary btn--block">
+                    <i class="fas fa-sign-in-alt"></i> Iniciar Sesión
+                </button>
+            </form>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/admin/logout.php b/admin/logout.php
new file mode 100644
index 0000000..21605cb
--- /dev/null
+++ b/admin/logout.php
@@ -0,0 +1,5 @@
+<?php
+require_once __DIR__ . '/../includes/auth.php';
+authLogout();
+header('Location: login.php');
+exit;
diff --git a/assets/css/admin.css b/assets/css/admin.css
new file mode 100644
index 0000000..11fc365
--- /dev/null
+++ b/assets/css/admin.css
@@ -0,0 +1,1684 @@
+/* ============================================================
+   Gestoría LP — Admin Panel Stylesheet
+   Professional CRM panel for immigration services
+   Color scheme: Navy Blue (#1B3A5C) sidebar, White content area
+   ============================================================ */
+
+/* ==========================================================
+   1. CSS CUSTOM PROPERTIES
+   ========================================================== */
+:root {
+    /* Brand colors (shared with public site) */
+    --admin-primary:        #1B3A5C;
+    --admin-primary-dark:   #122841;
+    --admin-primary-light:  #2A5580;
+    --admin-accent:         #C9A94E;
+    --admin-accent-dark:    #B0912F;
+    --admin-accent-light:   #D4BC70;
+
+    /* Neutrals */
+    --admin-white:          #FFFFFF;
+    --admin-off-white:      #F8F9FA;
+    --admin-gray-100:       #F1F3F5;
+    --admin-gray-200:       #E9ECEF;
+    --admin-gray-300:       #DEE2E6;
+    --admin-gray-400:       #CED4DA;
+    --admin-gray-500:       #ADB5BD;
+    --admin-gray-600:       #6C757D;
+    --admin-gray-700:       #495057;
+    --admin-gray-800:       #343A40;
+    --admin-gray-900:       #212529;
+
+    /* Semantic colors */
+    --admin-success:        #28A745;
+    --admin-success-light:  #D4EDDA;
+    --admin-danger:         #DC3545;
+    --admin-danger-light:   #F8D7DA;
+    --admin-warning:        #FFC107;
+    --admin-warning-light:  #FFF3CD;
+    --admin-info:           #17A2B8;
+    --admin-info-light:     #D1ECF1;
+
+    /* Typography */
+    --admin-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --admin-font-xs:        0.75rem;
+    --admin-font-sm:        0.875rem;
+    --admin-font-base:      1rem;
+    --admin-font-md:        1.125rem;
+    --admin-font-lg:        1.25rem;
+    --admin-font-xl:        1.5rem;
+    --admin-font-2xl:       2rem;
+
+    /* Layout */
+    --sidebar-width:        260px;
+    --topbar-height:        60px;
+    --admin-radius:         8px;
+    --admin-radius-sm:      4px;
+    --admin-radius-lg:      12px;
+    --admin-shadow:         0 2px 8px rgba(0, 0, 0, 0.08);
+    --admin-shadow-md:      0 4px 16px rgba(0, 0, 0, 0.12);
+    --admin-shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.16);
+    --admin-transition:     all 0.3s ease;
+}
+
+/* ==========================================================
+   2. RESET & BASE
+   ========================================================== */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: var(--admin-font);
+    font-size: var(--admin-font-base);
+    color: var(--admin-gray-800);
+    line-height: 1.6;
+    background-color: var(--admin-off-white);
+}
+
+a {
+    text-decoration: none;
+    color: var(--admin-primary);
+}
+
+a:hover {
+    color: var(--admin-primary-light);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* ==========================================================
+   3. LOGIN PAGE
+   ========================================================== */
+.login-page {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--admin-primary-dark) 0%, var(--admin-primary) 50%, var(--admin-primary-light) 100%);
+    padding: 1rem;
+}
+
+.login-container {
+    width: 100%;
+    max-width: 420px;
+}
+
+.login-card {
+    background: var(--admin-white);
+    border-radius: var(--admin-radius-lg);
+    box-shadow: var(--admin-shadow-lg);
+    padding: 2.5rem;
+    animation: loginSlideUp 0.5s ease-out;
+}
+
+@keyframes loginSlideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.login-card__header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.login-card__header i {
+    font-size: 3rem;
+    color: var(--admin-accent);
+    margin-bottom: 0.75rem;
+    display: block;
+}
+
+.login-card__header h1 {
+    font-size: var(--admin-font-xl);
+    font-weight: 700;
+    color: var(--admin-primary);
+    margin-bottom: 0.25rem;
+}
+
+.login-card__header p {
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-600);
+    font-weight: 400;
+}
+
+.login-form .form-group {
+    margin-bottom: 1.25rem;
+}
+
+.login-form label {
+    display: block;
+    font-size: var(--admin-font-sm);
+    font-weight: 500;
+    color: var(--admin-gray-700);
+    margin-bottom: 0.5rem;
+}
+
+.login-form label i {
+    width: 1rem;
+    margin-right: 0.25rem;
+    color: var(--admin-gray-500);
+}
+
+.login-form input[type="text"],
+.login-form input[type="password"] {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 2px solid var(--admin-gray-300);
+    border-radius: var(--admin-radius);
+    font-family: var(--admin-font);
+    font-size: var(--admin-font-base);
+    color: var(--admin-gray-800);
+    transition: var(--admin-transition);
+    background: var(--admin-white);
+}
+
+.login-form input[type="text"]:focus,
+.login-form input[type="password"]:focus {
+    outline: none;
+    border-color: var(--admin-primary);
+    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.15);
+}
+
+.login-form input::placeholder {
+    color: var(--admin-gray-400);
+}
+
+/* ==========================================================
+   4. SIDEBAR
+   ========================================================== */
+.admin-body {
+    display: flex;
+    min-height: 100vh;
+}
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: var(--sidebar-width);
+    height: 100vh;
+    background: var(--admin-primary-dark);
+    color: var(--admin-white);
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+    overflow-y: auto;
+    transition: transform 0.3s ease;
+}
+
+.sidebar__brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    min-height: var(--topbar-height);
+}
+
+.sidebar__brand i {
+    font-size: 1.5rem;
+    color: var(--admin-accent);
+}
+
+.sidebar__brand span {
+    font-size: var(--admin-font-lg);
+    font-weight: 700;
+    letter-spacing: -0.025em;
+}
+
+.sidebar__nav {
+    flex: 1;
+    padding: 1rem 0;
+}
+
+.sidebar__link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1.5rem;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: var(--admin-font-sm);
+    font-weight: 500;
+    transition: var(--admin-transition);
+    border-left: 3px solid transparent;
+}
+
+.sidebar__link:hover {
+    color: var(--admin-white);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.sidebar__link--active {
+    color: var(--admin-white);
+    background: rgba(255, 255, 255, 0.1);
+    border-left-color: var(--admin-accent);
+}
+
+.sidebar__link--active i {
+    color: var(--admin-accent);
+}
+
+.sidebar__link i {
+    width: 1.25rem;
+    text-align: center;
+    font-size: var(--admin-font-base);
+}
+
+.sidebar__footer {
+    padding: 0.75rem 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.sidebar__link--logout {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.sidebar__link--logout:hover {
+    color: var(--admin-danger);
+    background: rgba(220, 53, 69, 0.1);
+}
+
+/* ==========================================================
+   5. TOPBAR
+   ========================================================== */
+.admin-main {
+    flex: 1;
+    margin-left: var(--sidebar-width);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.admin-topbar {
+    position: sticky;
+    top: 0;
+    height: var(--topbar-height);
+    background: var(--admin-white);
+    border-bottom: 1px solid var(--admin-gray-200);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1.5rem;
+    z-index: 900;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.sidebar-toggle {
+    display: none;
+    background: none;
+    border: none;
+    font-size: var(--admin-font-lg);
+    color: var(--admin-gray-700);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: var(--admin-radius-sm);
+    transition: var(--admin-transition);
+}
+
+.sidebar-toggle:hover {
+    background: var(--admin-gray-100);
+    color: var(--admin-primary);
+}
+
+.admin-topbar__right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-left: auto;
+}
+
+.admin-topbar__user {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--admin-font-sm);
+    font-weight: 500;
+    color: var(--admin-gray-700);
+}
+
+.admin-topbar__user i {
+    font-size: 1.25rem;
+    color: var(--admin-primary);
+}
+
+/* ==========================================================
+   6. CONTENT AREA
+   ========================================================== */
+.admin-content {
+    flex: 1;
+    padding: 1.5rem;
+}
+
+.admin-content__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.admin-content__title {
+    font-size: var(--admin-font-xl);
+    font-weight: 700;
+    color: var(--admin-gray-900);
+}
+
+.admin-content__subtitle {
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-600);
+    margin-top: 0.25rem;
+}
+
+.admin-content__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-600);
+    margin-bottom: 1rem;
+    list-style: none;
+}
+
+.breadcrumb a {
+    color: var(--admin-primary);
+}
+
+.breadcrumb a:hover {
+    text-decoration: underline;
+}
+
+.breadcrumb__separator {
+    color: var(--admin-gray-400);
+}
+
+/* ==========================================================
+   7. CARDS & STAT CARDS
+   ========================================================== */
+.card {
+    background: var(--admin-white);
+    border-radius: var(--admin-radius);
+    box-shadow: var(--admin-shadow);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--admin-gray-200);
+}
+
+.card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--admin-gray-200);
+}
+
+.card__title {
+    font-size: var(--admin-font-md);
+    font-weight: 600;
+    color: var(--admin-gray-900);
+}
+
+.card--no-padding {
+    padding: 0;
+}
+
+.card--no-padding .card__header {
+    padding: 1.25rem 1.5rem 0.75rem;
+}
+
+/* Stat cards grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.25rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-card {
+    background: var(--admin-white);
+    border-radius: var(--admin-radius);
+    box-shadow: var(--admin-shadow);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    border: 1px solid var(--admin-gray-200);
+    transition: var(--admin-transition);
+}
+
+.stat-card:hover {
+    box-shadow: var(--admin-shadow-md);
+    transform: translateY(-2px);
+}
+
+.stat-card__icon {
+    width: 50px;
+    height: 50px;
+    border-radius: var(--admin-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    flex-shrink: 0;
+}
+
+.stat-card__icon--primary {
+    background: rgba(27, 58, 92, 0.1);
+    color: var(--admin-primary);
+}
+
+.stat-card__icon--success {
+    background: rgba(40, 167, 69, 0.1);
+    color: var(--admin-success);
+}
+
+.stat-card__icon--warning {
+    background: rgba(255, 193, 7, 0.1);
+    color: var(--admin-warning);
+}
+
+.stat-card__icon--danger {
+    background: rgba(220, 53, 69, 0.1);
+    color: var(--admin-danger);
+}
+
+.stat-card__icon--info {
+    background: rgba(23, 162, 184, 0.1);
+    color: var(--admin-info);
+}
+
+.stat-card__icon--accent {
+    background: rgba(201, 169, 78, 0.1);
+    color: var(--admin-accent);
+}
+
+.stat-card__info {
+    flex: 1;
+    min-width: 0;
+}
+
+.stat-card__value {
+    font-size: var(--admin-font-2xl);
+    font-weight: 700;
+    color: var(--admin-gray-900);
+    line-height: 1.2;
+}
+
+.stat-card__label {
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-600);
+    margin-top: 0.125rem;
+}
+
+/* ==========================================================
+   8. DATA TABLES
+   ========================================================== */
+.table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.admin-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--admin-font-sm);
+}
+
+.admin-table thead th {
+    background: var(--admin-gray-100);
+    color: var(--admin-gray-700);
+    font-weight: 600;
+    text-align: left;
+    padding: 0.875rem 1rem;
+    border-bottom: 2px solid var(--admin-gray-300);
+    white-space: nowrap;
+    font-size: var(--admin-font-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.admin-table tbody td {
+    padding: 0.875rem 1rem;
+    border-bottom: 1px solid var(--admin-gray-200);
+    color: var(--admin-gray-800);
+    vertical-align: middle;
+}
+
+.admin-table tbody tr:hover {
+    background: var(--admin-gray-100);
+}
+
+.admin-table tbody tr:nth-child(even) {
+    background: rgba(248, 249, 250, 0.5);
+}
+
+.admin-table tbody tr:nth-child(even):hover {
+    background: var(--admin-gray-100);
+}
+
+.admin-table .actions {
+    white-space: nowrap;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.admin-table .text-muted {
+    color: var(--admin-gray-500);
+    font-style: italic;
+}
+
+.admin-table .text-truncate {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.table-empty {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--admin-gray-500);
+}
+
+.table-empty i {
+    font-size: 2.5rem;
+    display: block;
+    margin-bottom: 0.75rem;
+    color: var(--admin-gray-400);
+}
+
+/* ==========================================================
+   9. STATUS BADGES
+   ========================================================== */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 50px;
+    font-size: var(--admin-font-xs);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+}
+
+.badge--nuevo,
+.badge--primary {
+    background: rgba(23, 162, 184, 0.12);
+    color: #0C7C8C;
+}
+
+.badge--en_proceso,
+.badge--warning {
+    background: rgba(255, 193, 7, 0.15);
+    color: #856404;
+}
+
+.badge--en_revision,
+.badge--orange {
+    background: rgba(253, 126, 20, 0.12);
+    color: #C45D00;
+}
+
+.badge--completado,
+.badge--success {
+    background: rgba(40, 167, 69, 0.12);
+    color: #1B7A35;
+}
+
+.badge--cancelado,
+.badge--danger {
+    background: rgba(220, 53, 69, 0.12);
+    color: #A71D2A;
+}
+
+.badge--info {
+    background: rgba(23, 162, 184, 0.12);
+    color: #0C7C8C;
+}
+
+.badge--secondary {
+    background: var(--admin-gray-200);
+    color: var(--admin-gray-700);
+}
+
+.badge--aprobado {
+    background: rgba(40, 167, 69, 0.12);
+    color: #1B7A35;
+}
+
+.badge--rechazado {
+    background: rgba(220, 53, 69, 0.12);
+    color: #A71D2A;
+}
+
+.badge--pendiente {
+    background: rgba(255, 193, 7, 0.15);
+    color: #856404;
+}
+
+/* ==========================================================
+   10. FORMS
+   ========================================================== */
+.form-group {
+    margin-bottom: 1.25rem;
+}
+
+.form-group label {
+    display: block;
+    font-size: var(--admin-font-sm);
+    font-weight: 500;
+    color: var(--admin-gray-700);
+    margin-bottom: 0.5rem;
+}
+
+.form-group label .required {
+    color: var(--admin-danger);
+    margin-left: 0.125rem;
+}
+
+.form-control {
+    width: 100%;
+    padding: 0.625rem 0.875rem;
+    border: 1px solid var(--admin-gray-300);
+    border-radius: var(--admin-radius);
+    font-family: var(--admin-font);
+    font-size: var(--admin-font-base);
+    color: var(--admin-gray-800);
+    background: var(--admin-white);
+    transition: var(--admin-transition);
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: var(--admin-primary);
+    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
+}
+
+.form-control::placeholder {
+    color: var(--admin-gray-400);
+}
+
+.form-control--sm {
+    padding: 0.375rem 0.625rem;
+    font-size: var(--admin-font-sm);
+}
+
+select.form-control {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236C757D' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.875rem center;
+    padding-right: 2.5rem;
+}
+
+textarea.form-control {
+    resize: vertical;
+    min-height: 100px;
+}
+
+.form-text {
+    font-size: var(--admin-font-xs);
+    color: var(--admin-gray-600);
+    margin-top: 0.375rem;
+}
+
+.form-error {
+    font-size: var(--admin-font-xs);
+    color: var(--admin-danger);
+    margin-top: 0.375rem;
+}
+
+.form-control.is-invalid {
+    border-color: var(--admin-danger);
+}
+
+.form-control.is-invalid:focus {
+    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1rem;
+}
+
+.form-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.form-check {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.form-check input[type="checkbox"],
+.form-check input[type="radio"] {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--admin-primary);
+}
+
+.form-check label {
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-700);
+    margin-bottom: 0;
+}
+
+/* ==========================================================
+   11. BUTTONS
+   ========================================================== */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1.25rem;
+    border: none;
+    border-radius: var(--admin-radius);
+    font-family: var(--admin-font);
+    font-size: var(--admin-font-sm);
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--admin-transition);
+    text-decoration: none;
+    white-space: nowrap;
+    line-height: 1.4;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.btn--primary {
+    background: var(--admin-primary);
+    color: var(--admin-white);
+}
+
+.btn--primary:hover {
+    background: var(--admin-primary-light);
+    color: var(--admin-white);
+}
+
+.btn--success {
+    background: var(--admin-success);
+    color: var(--admin-white);
+}
+
+.btn--success:hover {
+    background: #218838;
+    color: var(--admin-white);
+}
+
+.btn--danger {
+    background: var(--admin-danger);
+    color: var(--admin-white);
+}
+
+.btn--danger:hover {
+    background: #C82333;
+    color: var(--admin-white);
+}
+
+.btn--warning {
+    background: var(--admin-warning);
+    color: var(--admin-gray-900);
+}
+
+.btn--warning:hover {
+    background: #E0A800;
+    color: var(--admin-gray-900);
+}
+
+.btn--info {
+    background: var(--admin-info);
+    color: var(--admin-white);
+}
+
+.btn--info:hover {
+    background: #138496;
+    color: var(--admin-white);
+}
+
+.btn--secondary {
+    background: var(--admin-gray-200);
+    color: var(--admin-gray-700);
+}
+
+.btn--secondary:hover {
+    background: var(--admin-gray-300);
+    color: var(--admin-gray-800);
+}
+
+.btn--outline {
+    background: transparent;
+    border: 2px solid var(--admin-primary);
+    color: var(--admin-primary);
+}
+
+.btn--outline:hover {
+    background: var(--admin-primary);
+    color: var(--admin-white);
+}
+
+.btn--outline-danger {
+    background: transparent;
+    border: 2px solid var(--admin-danger);
+    color: var(--admin-danger);
+}
+
+.btn--outline-danger:hover {
+    background: var(--admin-danger);
+    color: var(--admin-white);
+}
+
+.btn--ghost {
+    background: transparent;
+    color: var(--admin-gray-600);
+    padding: 0.5rem 0.75rem;
+}
+
+.btn--ghost:hover {
+    background: var(--admin-gray-100);
+    color: var(--admin-gray-800);
+    box-shadow: none;
+}
+
+.btn--sm {
+    padding: 0.375rem 0.75rem;
+    font-size: var(--admin-font-xs);
+}
+
+.btn--lg {
+    padding: 0.875rem 1.75rem;
+    font-size: var(--admin-font-base);
+}
+
+.btn--block {
+    display: flex;
+    width: 100%;
+}
+
+.btn--icon {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: var(--admin-radius-sm);
+}
+
+.btn--icon.btn--sm {
+    width: 28px;
+    height: 28px;
+}
+
+.btn-group {
+    display: inline-flex;
+    gap: 0;
+}
+
+.btn-group .btn {
+    border-radius: 0;
+}
+
+.btn-group .btn:first-child {
+    border-radius: var(--admin-radius) 0 0 var(--admin-radius);
+}
+
+.btn-group .btn:last-child {
+    border-radius: 0 var(--admin-radius) var(--admin-radius) 0;
+}
+
+/* ==========================================================
+   12. ALERTS
+   ========================================================== */
+.alert {
+    padding: 0.875rem 1.25rem;
+    border-radius: var(--admin-radius);
+    margin-bottom: 1rem;
+    font-size: var(--admin-font-sm);
+    font-weight: 500;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    border-left: 4px solid transparent;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.alert i {
+    margin-top: 0.125rem;
+    flex-shrink: 0;
+}
+
+.alert--success {
+    background: var(--admin-success-light);
+    color: #155724;
+    border-left-color: var(--admin-success);
+}
+
+.alert--danger {
+    background: var(--admin-danger-light);
+    color: #721C24;
+    border-left-color: var(--admin-danger);
+}
+
+.alert--warning {
+    background: var(--admin-warning-light);
+    color: #856404;
+    border-left-color: var(--admin-warning);
+}
+
+.alert--info {
+    background: var(--admin-info-light);
+    color: #0C5460;
+    border-left-color: var(--admin-info);
+}
+
+.alert--dismissible {
+    position: relative;
+    padding-right: 2.5rem;
+}
+
+.alert__close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    background: none;
+    border: none;
+    font-size: var(--admin-font-lg);
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+    transition: var(--admin-transition);
+}
+
+.alert__close:hover {
+    opacity: 1;
+}
+
+/* ==========================================================
+   13. PAGINATION
+   ========================================================== */
+.pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    margin-top: 1.5rem;
+    list-style: none;
+}
+
+.pagination__link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    padding: 0 0.625rem;
+    border: 1px solid var(--admin-gray-300);
+    border-radius: var(--admin-radius-sm);
+    font-size: var(--admin-font-sm);
+    font-weight: 500;
+    color: var(--admin-gray-700);
+    text-decoration: none;
+    transition: var(--admin-transition);
+}
+
+.pagination__link:hover {
+    background: var(--admin-gray-100);
+    border-color: var(--admin-primary);
+    color: var(--admin-primary);
+}
+
+.pagination__link--active {
+    background: var(--admin-primary);
+    border-color: var(--admin-primary);
+    color: var(--admin-white);
+}
+
+.pagination__link--active:hover {
+    background: var(--admin-primary-light);
+    border-color: var(--admin-primary-light);
+    color: var(--admin-white);
+}
+
+.pagination__link--disabled {
+    opacity: 0.4;
+    pointer-events: none;
+}
+
+.pagination__info {
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-600);
+    margin-left: 1rem;
+}
+
+/* ==========================================================
+   14. MODALS
+   ========================================================== */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    padding: 1rem;
+    animation: modalFadeIn 0.2s ease;
+}
+
+.modal-overlay.active {
+    display: flex;
+}
+
+@keyframes modalFadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.modal {
+    background: var(--admin-white);
+    border-radius: var(--admin-radius-lg);
+    box-shadow: var(--admin-shadow-lg);
+    width: 100%;
+    max-width: 560px;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: modalSlideIn 0.3s ease;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--admin-gray-200);
+}
+
+.modal__title {
+    font-size: var(--admin-font-lg);
+    font-weight: 600;
+    color: var(--admin-gray-900);
+}
+
+.modal__close {
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    color: var(--admin-gray-500);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: var(--admin-radius-sm);
+    transition: var(--admin-transition);
+}
+
+.modal__close:hover {
+    background: var(--admin-gray-100);
+    color: var(--admin-gray-800);
+}
+
+.modal__body {
+    padding: 1.5rem;
+}
+
+.modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--admin-gray-200);
+}
+
+.modal--sm {
+    max-width: 400px;
+}
+
+.modal--lg {
+    max-width: 800px;
+}
+
+/* ==========================================================
+   15. SEARCH BAR
+   ========================================================== */
+.search-bar {
+    position: relative;
+    max-width: 320px;
+}
+
+.search-bar__input {
+    width: 100%;
+    padding: 0.5rem 1rem 0.5rem 2.5rem;
+    border: 1px solid var(--admin-gray-300);
+    border-radius: 50px;
+    font-family: var(--admin-font);
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-800);
+    background: var(--admin-white);
+    transition: var(--admin-transition);
+}
+
+.search-bar__input:focus {
+    outline: none;
+    border-color: var(--admin-primary);
+    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
+}
+
+.search-bar__input::placeholder {
+    color: var(--admin-gray-400);
+}
+
+.search-bar__icon {
+    position: absolute;
+    left: 0.875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--admin-gray-400);
+    font-size: var(--admin-font-sm);
+    pointer-events: none;
+}
+
+/* ==========================================================
+   16. TOOLBAR (filter + search + actions row)
+   ========================================================== */
+.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.toolbar__left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.toolbar__right {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.filter-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.filter-group label {
+    font-size: var(--admin-font-sm);
+    font-weight: 500;
+    color: var(--admin-gray-600);
+    white-space: nowrap;
+}
+
+.filter-group select {
+    padding: 0.375rem 2rem 0.375rem 0.625rem;
+    border: 1px solid var(--admin-gray-300);
+    border-radius: var(--admin-radius-sm);
+    font-family: var(--admin-font);
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-700);
+    background: var(--admin-white);
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236C757D' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+}
+
+/* ==========================================================
+   17. DETAIL VIEW
+   ========================================================== */
+.detail-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+}
+
+.detail-section {
+    margin-bottom: 1.5rem;
+}
+
+.detail-section__title {
+    font-size: var(--admin-font-md);
+    font-weight: 600;
+    color: var(--admin-primary);
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--admin-gray-200);
+}
+
+.detail-field {
+    margin-bottom: 0.875rem;
+}
+
+.detail-field__label {
+    font-size: var(--admin-font-xs);
+    font-weight: 600;
+    color: var(--admin-gray-600);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.25rem;
+}
+
+.detail-field__value {
+    font-size: var(--admin-font-base);
+    color: var(--admin-gray-800);
+}
+
+/* ==========================================================
+   18. TIMELINE / ACTIVITY LOG
+   ========================================================== */
+.timeline {
+    position: relative;
+    padding-left: 1.5rem;
+}
+
+.timeline::before {
+    content: '';
+    position: absolute;
+    left: 0.5rem;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--admin-gray-300);
+}
+
+.timeline__item {
+    position: relative;
+    padding-bottom: 1.25rem;
+    padding-left: 1rem;
+}
+
+.timeline__item::before {
+    content: '';
+    position: absolute;
+    left: -1.125rem;
+    top: 0.375rem;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--admin-primary);
+    border: 2px solid var(--admin-white);
+    box-shadow: 0 0 0 2px var(--admin-gray-300);
+}
+
+.timeline__date {
+    font-size: var(--admin-font-xs);
+    color: var(--admin-gray-500);
+    margin-bottom: 0.25rem;
+}
+
+.timeline__text {
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-700);
+}
+
+/* ==========================================================
+   19. FILE UPLOAD AREA
+   ========================================================== */
+.upload-area {
+    border: 2px dashed var(--admin-gray-300);
+    border-radius: var(--admin-radius);
+    padding: 2rem;
+    text-align: center;
+    transition: var(--admin-transition);
+    cursor: pointer;
+}
+
+.upload-area:hover {
+    border-color: var(--admin-primary);
+    background: rgba(27, 58, 92, 0.02);
+}
+
+.upload-area.dragover {
+    border-color: var(--admin-primary);
+    background: rgba(27, 58, 92, 0.05);
+}
+
+.upload-area i {
+    font-size: 2rem;
+    color: var(--admin-gray-400);
+    margin-bottom: 0.75rem;
+    display: block;
+}
+
+.upload-area p {
+    font-size: var(--admin-font-sm);
+    color: var(--admin-gray-600);
+}
+
+.upload-area p strong {
+    color: var(--admin-primary);
+}
+
+/* ==========================================================
+   20. UTILITIES
+   ========================================================== */
+.text-center    { text-align: center; }
+.text-right     { text-align: right; }
+.text-left      { text-align: left; }
+.text-muted     { color: var(--admin-gray-500); }
+.text-primary   { color: var(--admin-primary); }
+.text-success   { color: var(--admin-success); }
+.text-danger    { color: var(--admin-danger); }
+.text-warning   { color: #856404; }
+.text-info      { color: var(--admin-info); }
+.text-sm        { font-size: var(--admin-font-sm); }
+.text-xs        { font-size: var(--admin-font-xs); }
+.text-lg        { font-size: var(--admin-font-lg); }
+.text-bold      { font-weight: 600; }
+
+.mt-0   { margin-top: 0; }
+.mt-1   { margin-top: 0.5rem; }
+.mt-2   { margin-top: 1rem; }
+.mt-3   { margin-top: 1.5rem; }
+.mt-4   { margin-top: 2rem; }
+
+.mb-0   { margin-bottom: 0; }
+.mb-1   { margin-bottom: 0.5rem; }
+.mb-2   { margin-bottom: 1rem; }
+.mb-3   { margin-bottom: 1.5rem; }
+.mb-4   { margin-bottom: 2rem; }
+
+.p-0    { padding: 0; }
+.p-1    { padding: 0.5rem; }
+.p-2    { padding: 1rem; }
+.p-3    { padding: 1.5rem; }
+
+.d-flex          { display: flex; }
+.d-none          { display: none; }
+.d-block         { display: block; }
+.align-center    { align-items: center; }
+.justify-between { justify-content: space-between; }
+.justify-end     { justify-content: flex-end; }
+.gap-1           { gap: 0.5rem; }
+.gap-2           { gap: 1rem; }
+.gap-3           { gap: 1.5rem; }
+.flex-wrap       { flex-wrap: wrap; }
+
+.w-100  { width: 100%; }
+
+.rounded { border-radius: var(--admin-radius); }
+
+.shadow  { box-shadow: var(--admin-shadow); }
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+/* ==========================================================
+   21. SIDEBAR OVERLAY (mobile)
+   ========================================================== */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 999;
+    transition: opacity 0.3s ease;
+}
+
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ==========================================================
+   22. RESPONSIVE — Tablet & Mobile
+   ========================================================== */
+@media (max-width: 992px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .detail-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    /* Sidebar: hidden off-screen, slides in as overlay */
+    .sidebar {
+        transform: translateX(-100%);
+    }
+
+    .sidebar--open {
+        transform: translateX(0);
+    }
+
+    .sidebar-toggle {
+        display: block;
+    }
+
+    .admin-main {
+        margin-left: 0;
+    }
+
+    .admin-content {
+        padding: 1rem;
+    }
+
+    .admin-topbar {
+        padding: 0 1rem;
+    }
+
+    /* Stats: single column on small */
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* Admin content header: stack */
+    .admin-content__header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .admin-content__actions {
+        width: 100%;
+    }
+
+    .admin-content__actions .btn {
+        flex: 1;
+    }
+
+    /* Toolbar: stack */
+    .toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .toolbar__left,
+    .toolbar__right {
+        width: 100%;
+    }
+
+    .search-bar {
+        max-width: 100%;
+    }
+
+    /* Table: horizontal scroll */
+    .admin-table {
+        font-size: var(--admin-font-xs);
+    }
+
+    .admin-table thead th,
+    .admin-table tbody td {
+        padding: 0.625rem 0.75rem;
+    }
+
+    /* Pagination: wrap */
+    .pagination {
+        flex-wrap: wrap;
+    }
+
+    /* Modal: full width */
+    .modal {
+        max-width: 100%;
+        border-radius: var(--admin-radius);
+    }
+
+    /* Login card */
+    .login-card {
+        padding: 1.5rem;
+    }
+
+    .login-card__header i {
+        font-size: 2.5rem;
+    }
+
+    .login-card__header h1 {
+        font-size: var(--admin-font-lg);
+    }
+}
+
+@media (max-width: 480px) {
+    .btn-group {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .btn-group .btn {
+        border-radius: var(--admin-radius);
+    }
+
+    .filter-group {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .filter-group label {
+        margin-bottom: 0.25rem;
+    }
+}
+
+/* ==========================================================
+   23. PRINT STYLES
+   ========================================================== */
+@media print {
+    .sidebar,
+    .admin-topbar,
+    .sidebar-toggle,
+    .sidebar-overlay,
+    .btn,
+    .toolbar,
+    .pagination,
+    .admin-content__actions {
+        display: none !important;
+    }
+
+    .admin-main {
+        margin-left: 0 !important;
+    }
+
+    .admin-content {
+        padding: 0 !important;
+    }
+
+    .card {
+        box-shadow: none !important;
+        border: 1px solid #ddd !important;
+        break-inside: avoid;
+    }
+
+    .admin-table {
+        font-size: 10pt;
+    }
+
+    .admin-table thead th {
+        background: #f0f0f0 !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+
+    .badge {
+        border: 1px solid currentColor;
+    }
+
+    body {
+        color: #000;
+        background: #fff;
+    }
+
+    a {
+        color: #000;
+        text-decoration: underline;
+    }
+
+    .stat-card {
+        box-shadow: none !important;
+        border: 1px solid #ddd !important;
+    }
+}
diff --git a/assets/js/admin.js b/assets/js/admin.js
new file mode 100644
index 0000000..4e20333
--- /dev/null
+++ b/assets/js/admin.js
@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Sidebar toggle
+    const sidebar = document.getElementById('sidebar');
+    const sidebarToggle = document.getElementById('sidebarToggle');
+    const sidebarOverlay = document.getElementById('sidebarOverlay');
+
+    if (sidebarToggle) {
+        sidebarToggle.addEventListener('click', function() {
+            sidebar.classList.toggle('sidebar--open');
+            sidebarOverlay.classList.toggle('active');
+            document.body.classList.toggle('sidebar-open');
+        });
+    }
+
+    if (sidebarOverlay) {
+        sidebarOverlay.addEventListener('click', function() {
+            sidebar.classList.remove('sidebar--open');
+            sidebarOverlay.classList.remove('active');
+            document.body.classList.remove('sidebar-open');
+        });
+    }
+
+    // Confirm delete actions
+    document.querySelectorAll('[data-confirm]').forEach(function(el) {
+        el.addEventListener('click', function(e) {
+            if (!confirm(this.dataset.confirm)) {
+                e.preventDefault();
+            }
+        });
+    });
+
+    // Auto-dismiss alerts after 5 seconds
+    document.querySelectorAll('.alert--dismissible').forEach(function(alert) {
+        setTimeout(function() {
+            alert.style.opacity = '0';
+            alert.style.transform = 'translateY(-10px)';
+            setTimeout(function() { alert.remove(); }, 300);
+        }, 5000);
+    });
+
+    // Table search filter
+    var searchInput = document.getElementById('tableSearch');
+    if (searchInput) {
+        searchInput.addEventListener('input', function() {
+            var query = this.value.toLowerCase();
+            var table = document.querySelector('.admin-table');
+            if (!table) return;
+            var rows = table.querySelectorAll('tbody tr');
+            rows.forEach(function(row) {
+                var text = row.textContent.toLowerCase();
+                row.style.display = text.includes(query) ? '' : 'none';
+            });
+        });
+    }
+});
