From 4437deb5058b53896561a6c9471a92dd6f62f7c6 Mon Sep 17 00:00:00 2001
From: nickpons666 <miguel.a.pons@protonmail.com>
Date: Fri, 20 Feb 2026 14:49:16 -0600
Subject: [PATCH] =?UTF-8?q?Style:=20Redise=C3=B1o=20militar/t=C3=A1ctico?=
 =?UTF-8?q?=20-=20navbar=20horizontal=20superior?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.php            |  64 ++--
 login.php            | 204 +++++++++++--
 templates/footer.php |   2 -
 templates/header.php | 686 ++++++++++++++++++++++++++++++++++---------
 4 files changed, 765 insertions(+), 191 deletions(-)
 mode change 100644 => 100755 login.php
 mode change 100644 => 100755 templates/footer.php
 mode change 100644 => 100755 templates/header.php

diff --git a/index.php b/index.php
index 25ead55..7ca4f7d 100755
--- a/index.php
+++ b/index.php
@@ -14,21 +14,23 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
 ?>
 
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2><i class="bi bi-house-door"></i> Dashboard</h2>
-    <span class="text-muted">Bienvenido, <?= htmlspecialchars(getCurrentUsername()) ?></span>
+    <h2><i class="bi bi-crosshair"></i> Dashboard</h2>
+    <span class="text-muted" style="font-family: 'Share Tech Mono', monospace; font-size: 0.8rem;">
+        // BIENVENIDO, <?= strtoupper(htmlspecialchars(getCurrentUsername())) ?>
+    </span>
 </div>
 
 <div class="row mb-4">
     <div class="col-md-3">
-        <div class="card border-0 shadow-sm">
+        <div class="card border-0 shadow-sm h-100">
             <div class="card-body">
                 <div class="d-flex align-items-center">
-                    <div class="bg-primary bg-opacity-10 p-3 rounded me-3">
-                        <i class="bi bi-clock text-primary fs-4"></i>
+                    <div class="stat-card-icon me-3" style="border-color: var(--accent-orange); color: var(--accent-orange);">
+                        <i class="bi bi-stopwatch fs-5"></i>
                     </div>
                     <div>
-                        <h3 class="mb-0"><?= $pendingCount ?></h3>
-                        <small class="text-muted">Mensajes Pendientes</small>
+                        <div style="font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--accent-orange);"><?= $pendingCount ?></div>
+                        <small class="text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.7rem;">Pendientes</small>
                     </div>
                 </div>
             </div>
@@ -36,15 +38,15 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
     </div>
     
     <div class="col-md-3">
-        <div class="card border-0 shadow-sm">
+        <div class="card border-0 shadow-sm h-100">
             <div class="card-body">
                 <div class="d-flex align-items-center">
-                    <div class="bg-success bg-opacity-10 p-3 rounded me-3">
-                        <i class="bi bi-check-circle text-success fs-4"></i>
+                    <div class="stat-card-icon me-3" style="border-color: var(--hud-cyan); color: var(--hud-cyan);">
+                        <i class="bi bi-check2-all fs-5"></i>
                     </div>
                     <div>
-                        <h3 class="mb-0"><?= $sentToday ?></h3>
-                        <small class="text-muted">Enviados Hoy</small>
+                        <div style="font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--hud-cyan);"><?= $sentToday ?></div>
+                        <small class="text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.7rem;">Enviados Hoy</small>
                     </div>
                 </div>
             </div>
@@ -52,17 +54,17 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
     </div>
     
     <div class="col-md-3">
-        <div class="card border-0 shadow-sm">
+        <div class="card border-0 shadow-sm h-100">
             <div class="card-body">
                 <div class="d-flex align-items-center">
-                    <div class="bg-discord bg-opacity-10 p-3 rounded me-3" style="background-color: rgba(88,101,242,0.1)">
-                        <i class="bi bi-discord fs-4" style="color: #5865F2"></i>
+                    <div class="stat-card-icon me-3" style="border-color: var(--discord-color); color: var(--discord-color);">
+                        <i class="bi bi-discord fs-5"></i>
                     </div>
                     <div>
-                        <h3 class="mb-0">
+                        <div style="font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--discord-color);">
                             <?= count(array_filter($scheduledMessages, fn($m) => $m['platform'] === 'discord')) ?>
-                        </h3>
-                        <small class="text-muted">Discord</small>
+                        </div>
+                        <small class="text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.7rem;">Discord</small>
                     </div>
                 </div>
             </div>
@@ -70,17 +72,17 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
     </div>
     
     <div class="col-md-3">
-        <div class="card border-0 shadow-sm">
+        <div class="card border-0 shadow-sm h-100">
             <div class="card-body">
                 <div class="d-flex align-items-center">
-                    <div class="bg-info bg-opacity-10 p-3 rounded me-3">
-                        <i class="bi bi-telegram text-info fs-4"></i>
+                    <div class="stat-card-icon me-3" style="border-color: var(--telegram-color); color: var(--telegram-color);">
+                        <i class="bi bi-telegram fs-5"></i>
                     </div>
                     <div>
-                        <h3 class="mb-0">
+                        <div style="font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--telegram-color);">
                             <?= count(array_filter($scheduledMessages, fn($m) => $m['platform'] === 'telegram')) ?>
-                        </h3>
-                        <small class="text-muted">Telegram</small>
+                        </div>
+                        <small class="text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.7rem;">Telegram</small>
                     </div>
                 </div>
             </div>
@@ -91,12 +93,12 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
 <div class="row">
     <div class="col-md-8">
         <div class="card border-0 shadow-sm">
-            <div class="card-header bg-white border-0">
-                <h5 class="mb-0"><i class="bi bi-clock"></i> Próximos Mensajes</h5>
+            <div class="card-header border-0">
+                <h5 class="mb-0"><i class="bi bi-list-check"></i> Próximos Mensajes</h5>
             </div>
             <div class="card-body">
                 <?php if (empty($scheduledMessages)): ?>
-                    <p class="text-muted text-center py-4">No hay mensajes programados</p>
+                    <p class="text-muted text-center py-4">// NO HAY MENSAJES PROGRAMADOS</p>
                 <?php else: ?>
                     <div class="table-responsive">
                         <table class="table table-hover">
@@ -119,7 +121,7 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
                                             <i class="bi bi-telegram platform-telegram"></i> Telegram
                                         <?php endif; ?>
                                     </td>
-                                    <td><?= date('d/m/Y H:i', strtotime($msg['send_time'])) ?></td>
+                                    <td style="font-family: 'Share Tech Mono', monospace;"><?= date('d/m/Y H:i', strtotime($msg['send_time'])) ?></td>
                                     <td>
                                         <span class="badge bg-<?= match($msg['status']) {
                                             'pending' => 'warning',
@@ -144,16 +146,16 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
     
     <div class="col-md-4">
         <div class="card border-0 shadow-sm">
-            <div class="card-header bg-white border-0">
+            <div class="card-header border-0">
                 <h5 class="mb-0"><i class="bi bi-lightning"></i> Acciones Rápidas</h5>
             </div>
             <div class="card-body">
                 <div class="d-grid gap-2">
                     <a href="create_message.php" class="btn btn-primary">
-                        <i class="bi bi-plus-circle"></i> Nuevo Mensaje
+                        <i class="bi bi-pencil-square"></i> Nuevo Mensaje
                     </a>
                     <a href="recurrentes.php" class="btn btn-outline-secondary">
-                        <i class="bi bi-repeat"></i> Ver Plantillas
+                        <i class="bi bi-collection"></i> Ver Plantillas
                     </a>
                     <a href="scheduled_messages.php" class="btn btn-outline-secondary">
                         <i class="bi bi-list"></i> Ver Todos los Programados
diff --git a/login.php b/login.php
old mode 100644
new mode 100755
index 9a7e3e4..02a238e
--- a/login.php
+++ b/login.php
@@ -51,59 +51,221 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     <title>Login - Sistema de Mensajería</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --military-dark: #1a1f16;
+            --military-olive: #3d4a32;
+            --military-green: #5a6b4a;
+            --military-tan: #8b7355;
+            --military-sand: #c4b998;
+            --accent-orange: #d4652f;
+        }
+        
+        * {
+            font-family: 'Rajdhani', sans-serif;
+        }
+        
         body {
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            background: var(--military-dark);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
-        }
-        [data-bs-theme="dark"] body {
-            background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
-        }
-        .login-card {
-            background: var(--bs-body-bg);
-            border-radius: 15px;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+            position: relative;
             overflow: hidden;
         }
+        
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: 
+                repeating-linear-gradient(
+                    0deg,
+                    transparent,
+                    transparent 50px,
+                    rgba(61, 74, 50, 0.1) 50px,
+                    rgba(61, 74, 50, 0.1) 51px
+                ),
+                repeating-linear-gradient(
+                    90deg,
+                    transparent,
+                    transparent 50px,
+                    rgba(61, 74, 50, 0.1) 50px,
+                    rgba(61, 74, 50, 0.1) 51px
+                );
+            pointer-events: none;
+        }
+        
+        [data-bs-theme="light"] body {
+            background: linear-gradient(135deg, #3d4a32 0%, #2a3024 100%);
+        }
+        
+        .login-card {
+            background: rgba(26, 31, 22, 0.95);
+            border: 2px solid var(--military-green);
+            position: relative;
+        }
+        
+        .login-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, 
+                var(--military-green) 0%, 
+                var(--accent-orange) 50%, 
+                var(--military-green) 100%);
+        }
+        
+        .login-card::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, 
+                var(--military-green) 0%, 
+                var(--accent-orange) 50%, 
+                var(--military-green) 100%);
+        }
+        
         .login-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            background: transparent;
+            color: var(--military-sand);
             padding: 30px;
             text-align: center;
+            border-bottom: 1px solid var(--military-green);
         }
+        
+        .login-title {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 2rem;
+            color: var(--accent-orange);
+            letter-spacing: 4px;
+            margin-bottom: 5px;
+        }
+        
+        .login-subtitle {
+            font-size: 0.8rem;
+            color: var(--military-sand);
+            letter-spacing: 3px;
+            text-transform: uppercase;
+        }
+        
         .login-body {
             padding: 40px;
+            background: rgba(26, 31, 22, 0.5);
         }
+        
+        .form-label {
+            color: var(--military-sand);
+            text-transform: uppercase;
+            font-size: 0.8rem;
+            letter-spacing: 2px;
+            font-weight: 600;
+        }
+        
+        .form-control {
+            background: rgba(26, 31, 22, 0.8);
+            border: 1px solid var(--military-green);
+            color: var(--military-sand);
+            border-radius: 0;
+            padding: 12px 15px;
+        }
+        
+        .form-control:focus {
+            background: rgba(26, 31, 22, 0.9);
+            border-color: var(--accent-orange);
+            color: #fff;
+            box-shadow: 0 0 0 2px rgba(212, 101, 47, 0.3);
+        }
+        
+        .form-control::placeholder {
+            color: rgba(196, 185, 152, 0.5);
+        }
+        
+        .btn-login {
+            background: linear-gradient(180deg, var(--military-olive) 0%, var(--military-dark) 100%);
+            border: 1px solid var(--military-green);
+            color: var(--military-sand);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            font-weight: 600;
+            border-radius: 0;
+            padding: 12px;
+            width: 100%;
+            transition: all 0.3s ease;
+        }
+        
+        .btn-login:hover {
+            background: linear-gradient(180deg, var(--military-green) 0%, var(--military-olive) 100%);
+            border-color: var(--accent-orange);
+            color: #fff;
+        }
+        
+        .btn-login i {
+            margin-right: 8px;
+        }
+        
+        .alert-danger {
+            background: rgba(139, 58, 58, 0.3);
+            border: 1px solid var(--accent-red, #8b3a3a);
+            border-radius: 0;
+            color: #ff8a8a;
+            border-left: 3px solid #8b3a3a;
+        }
+        
+        .corner-decoration {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--accent-orange);
+        }
+        
+        .corner-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
+        .corner-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
+        .corner-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
+        .corner-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="row justify-content-center">
             <div class="col-md-5">
-                <div class="login-card">
+                <div class="login-card position-relative">
+                    <div class="corner-decoration corner-tl"></div>
+                    <div class="corner-decoration corner-tr"></div>
+                    <div class="corner-decoration corner-bl"></div>
+                    <div class="corner-decoration corner-br"></div>
+                    
                     <div class="login-header">
-                        <h3><i class="bi bi-messenger"></i> Sistema de Mensajería</h3>
-                        <p class="mb-0">Discord & Telegram</p>
+                        <div class="login-title">◈ LASTWAR</div>
+                        <div class="login-subtitle">Comms Center</div>
                     </div>
                     <div class="login-body">
                         <?php if ($error): ?>
-                            <div class="alert alert-danger"><?= htmlspecialchars($error) ?></div>
+                            <div class="alert alert-danger mb-3"><?= htmlspecialchars($error) ?></div>
                         <?php endif; ?>
                         
                         <form method="POST">
-                            <div class="mb-3">
+                            <div class="mb-4">
                                 <label class="form-label">Usuario</label>
-                                <input type="text" name="username" class="form-control" required autofocus>
+                                <input type="text" name="username" class="form-control" placeholder="Ingrese su usuario" required autofocus>
                             </div>
-                            <div class="mb-3">
+                            <div class="mb-4">
                                 <label class="form-label">Contraseña</label>
-                                <input type="password" name="password" class="form-control" required>
+                                <input type="password" name="password" class="form-control" placeholder="••••••••" required>
                             </div>
-                            <button type="submit" class="btn btn-primary w-100">
-                                <i class="bi bi-box-arrow-in-right"></i> Iniciar Sesión
+                            <button type="submit" class="btn btn-login">
+                                <i class="bi bi-shield-lock"></i> Acceder
                             </button>
                         </form>
                     </div>
diff --git a/templates/footer.php b/templates/footer.php
old mode 100644
new mode 100755
index 698d332..639ee3f
--- a/templates/footer.php
+++ b/templates/footer.php
@@ -1,6 +1,4 @@
             </main>
-        </div>
-    </div>
     
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
diff --git a/templates/header.php b/templates/header.php
old mode 100644
new mode 100755
index 695fb1e..1cbe1e6
--- a/templates/header.php
+++ b/templates/header.php
@@ -15,190 +15,602 @@ $theme = $_COOKIE['theme'] ?? 'light';
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
     <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
     <style>
         :root {
+            --military-dark: #1a1f16;
+            --military-olive: #3d4a32;
+            --military-green: #5a6b4a;
+            --military-tan: #8b7355;
+            --military-sand: #c4b998;
+            --accent-orange: #d4652f;
+            --accent-red: #8b3a3a;
+            --hud-cyan: #4a9c8c;
             --discord-color: #5865F2;
             --telegram-color: #0088cc;
+            --navbar-height: 56px;
         }
+        
+        * {
+            font-family: 'Rajdhani', sans-serif;
+        }
+        
         [data-bs-theme="dark"] {
-            --sidebar-bg: #1a1a2e;
+            --bs-body-bg: #12150f;
+            --bs-body-color: #e8e4d9;
+            --bs-card-bg: #1a1f16;
+            --bs-border-color: #3d4a32;
+            --navbar-bg: linear-gradient(180deg, #1a1f16 0%, #0f120c 100%);
         }
+        
         [data-bs-theme="light"] {
-            --sidebar-bg: #1a1a2e;
+            --bs-body-bg: #e8e4d9;
+            --bs-body-color: #1a1f16;
+            --bs-card-bg: #f5f3ed;
+            --bs-border-color: #8b7355;
+            --navbar-bg: linear-gradient(180deg, #3d4a32 0%, #2a3024 100%);
         }
-        .sidebar {
-            min-height: 100vh;
-            background: var(--sidebar-bg);
+        
+        body {
+            background-color: var(--bs-body-bg);
+            color: var(--bs-body-color);
+            padding-top: var(--navbar-height);
         }
+        
+        .navbar-military {
+            background: var(--navbar-bg);
+            border-bottom: 2px solid var(--military-green);
+            min-height: var(--navbar-height);
+            padding: 0 1rem;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1030;
+        }
+        
+        .navbar-military::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, 
+                transparent 0%, 
+                var(--accent-orange) 20%, 
+                var(--accent-orange) 80%, 
+                transparent 100%);
+        }
+        
+        .navbar-brand {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 1.3rem;
+            color: var(--accent-orange) !important;
+            letter-spacing: 2px;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .navbar-brand small {
+            font-size: 0.65rem;
+            color: var(--military-sand);
+            letter-spacing: 3px;
+            font-family: 'Rajdhani', sans-serif;
+        }
+        
+        .nav-link-main {
+            color: var(--military-sand) !important;
+            padding: 8px 12px !important;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 500;
+            font-size: 0.8rem;
+            border-bottom: 2px solid transparent;
+            transition: all 0.2s ease;
+        }
+        
+        .nav-link-main:hover,
+        .nav-link-main.active {
+            color: #fff !important;
+            border-bottom-color: var(--accent-orange);
+            background: rgba(90, 107, 74, 0.3);
+        }
+        
+        .nav-link-main i {
+            font-size: 0.9rem;
+        }
+        
+        .nav-divider {
+            width: 1px;
+            height: 24px;
+            background: var(--military-green);
+            margin: 0 8px;
+        }
+        
+        .nav-section-label {
+            color: var(--accent-orange);
+            font-size: 0.65rem;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            padding: 0 8px;
+            font-family: 'Share Tech Mono', monospace;
+        }
+        
+        .dropdown-menu-military {
+            background: var(--military-dark);
+            border: 1px solid var(--military-green);
+            border-radius: 0;
+            min-width: 200px;
+            padding: 0.5rem 0;
+        }
+        
+        .dropdown-menu-military .dropdown-item {
+            color: var(--military-sand);
+            padding: 8px 16px;
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .dropdown-menu-military .dropdown-item:hover {
+            background: rgba(90, 107, 74, 0.4);
+            color: #fff;
+        }
+        
+        .dropdown-menu-military .dropdown-item i {
+            width: 20px;
+        }
+        
+        .dropdown-menu-military .dropdown-divider {
+            border-color: var(--military-green);
+        }
+        
+        .dropdown-toggle-military {
+            color: var(--military-sand) !important;
+            padding: 8px 12px !important;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 500;
+            font-size: 0.8rem;
+            border-bottom: 2px solid transparent;
+            transition: all 0.2s ease;
+        }
+        
+        .dropdown-toggle-military:hover,
+        .dropdown-toggle-military.show {
+            color: #fff !important;
+            border-bottom-color: var(--accent-orange);
+            background: rgba(90, 107, 74, 0.3);
+        }
+        
+        #theme-toggle {
+            color: var(--military-sand);
+            border: 1px solid var(--military-green);
+            background: transparent;
+            border-radius: 0;
+            padding: 4px 8px;
+        }
+        
+        #theme-toggle:hover {
+            color: #fff;
+            background: var(--military-olive);
+            border-color: var(--accent-orange);
+        }
+        
+        .navbar-toggler-military {
+            border: 1px solid var(--military-green);
+            border-radius: 0;
+            padding: 4px 8px;
+        }
+        
+        .navbar-toggler-military .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(196, 185, 152, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+        }
+        
+        .main-content {
+            padding: 1.5rem;
+            width: 100%;
+        }
+        
+        .card {
+            background-color: var(--bs-card-bg);
+            border: 1px solid var(--military-green);
+            border-radius: 0;
+            position: relative;
+        }
+        
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, 
+                var(--military-green) 0%, 
+                var(--accent-orange) 50%, 
+                var(--military-green) 100%);
+        }
+        
+        .card-header {
+            background-color: rgba(61, 74, 50, 0.3);
+            border-bottom: 1px solid var(--military-green);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-size: 0.9rem;
+        }
+        
         [data-bs-theme="dark"] .card-header.bg-white,
         [data-bs-theme="dark"] .bg-white:not(.btn):not(.nav-link):not(.dropdown-menu) {
-            background-color: var(--bs-body-bg) !important;
+            background-color: var(--bs-card-bg) !important;
         }
+        
         [data-bs-theme="dark"] .bg-light {
-            background-color: var(--bs-tertiary-bg) !important;
+            background-color: rgba(61, 74, 50, 0.2) !important;
         }
-        .sidebar .nav-link {
-            color: rgba(255,255,255,0.7);
-            padding: 12px 20px;
-            border-radius: 8px;
-            margin: 4px 8px;
+        
+        .btn-primary {
+            background: linear-gradient(180deg, var(--military-olive) 0%, var(--military-dark) 100%);
+            border: 1px solid var(--military-green);
+            color: var(--military-sand);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 600;
+            border-radius: 0;
         }
-        #theme-toggle {
-            color: rgba(255,255,255,0.7);
-            border: none;
-            background: transparent;
+        
+        .btn-primary:hover {
+            background: linear-gradient(180deg, var(--military-green) 0%, var(--military-olive) 100%);
+            border-color: var(--accent-orange);
+            color: #fff;
         }
-        #theme-toggle:hover {
-            color: white;
+        
+        .btn-outline-secondary {
+            border: 1px solid var(--military-green);
+            color: var(--military-sand);
+            border-radius: 0;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 500;
         }
-        .sidebar .nav-link:hover, .sidebar .nav-link.active {
-            background: rgba(255,255,255,0.1);
-            color: white;
+        
+        .btn-outline-secondary:hover {
+            background: var(--military-olive);
+            border-color: var(--accent-orange);
+            color: #fff;
         }
+        
+        .btn-outline-danger {
+            border-color: var(--accent-red);
+            color: var(--accent-red);
+            border-radius: 0;
+        }
+        
+        .btn-outline-danger:hover {
+            background: var(--accent-red);
+            color: #fff;
+        }
+        
+        .btn-outline-warning {
+            border-color: var(--accent-orange);
+            color: var(--accent-orange);
+            border-radius: 0;
+        }
+        
+        .btn-outline-warning:hover {
+            background: var(--accent-orange);
+            color: #fff;
+        }
+        
+        .btn-outline-success {
+            border-color: var(--hud-cyan);
+            color: var(--hud-cyan);
+            border-radius: 0;
+        }
+        
+        .btn-outline-success:hover {
+            background: var(--hud-cyan);
+            color: #fff;
+        }
+        
+        .btn-outline-info {
+            border-color: var(--telegram-color);
+            color: var(--telegram-color);
+            border-radius: 0;
+        }
+        
+        .btn-outline-info:hover {
+            background: var(--telegram-color);
+            color: #fff;
+        }
+        
+        .form-control, .form-select {
+            background-color: rgba(26, 31, 22, 0.8);
+            border: 1px solid var(--military-green);
+            color: var(--bs-body-color);
+            border-radius: 0;
+        }
+        
+        .form-control:focus, .form-select:focus {
+            background-color: rgba(26, 31, 22, 0.9);
+            border-color: var(--accent-orange);
+            color: var(--bs-body-color);
+            box-shadow: 0 0 0 2px rgba(212, 101, 47, 0.2);
+        }
+        
+        [data-bs-theme="light"] .form-control,
+        [data-bs-theme="light"] .form-select {
+            background-color: #fff;
+        }
+        
+        .badge {
+            border-radius: 0;
+            text-transform: uppercase;
+            font-size: 0.7rem;
+            letter-spacing: 1px;
+            font-weight: 600;
+            padding: 4px 8px;
+        }
+        
+        .badge.bg-warning {
+            background-color: var(--accent-orange) !important;
+            color: #fff;
+        }
+        
+        .badge.bg-success {
+            background-color: var(--hud-cyan) !important;
+        }
+        
+        .badge.bg-danger {
+            background-color: var(--accent-red) !important;
+        }
+        
+        .badge.bg-info {
+            background-color: var(--telegram-color) !important;
+        }
+        
+        .table {
+            color: var(--bs-body-color);
+        }
+        
+        .table thead th {
+            background-color: rgba(61, 74, 50, 0.4);
+            border-bottom: 2px solid var(--military-green);
+            text-transform: uppercase;
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            font-weight: 600;
+        }
+        
+        .table-hover tbody tr:hover {
+            background-color: rgba(90, 107, 74, 0.2);
+        }
+        
+        .alert {
+            border-radius: 0;
+            border-left: 3px solid;
+        }
+        
+        .alert-danger {
+            background-color: rgba(139, 58, 58, 0.2);
+            border-color: var(--accent-red);
+            color: #ff8a8a;
+        }
+        
+        .alert-success {
+            background-color: rgba(74, 156, 140, 0.2);
+            border-color: var(--hud-cyan);
+            color: #7ce0d0;
+        }
+        
         .platform-discord { color: var(--discord-color); }
         .platform-telegram { color: var(--telegram-color); }
-        .status-pending { color: #ffc107; }
-        .status-sent { color: #28a745; }
-        .status-failed { color: #dc3545; }
-        .status-processing { color: #17a2b8; }
+        .status-pending { color: var(--accent-orange); }
+        .status-sent { color: var(--hud-cyan); }
+        .status-failed { color: var(--accent-red); }
+        .status-processing { color: var(--telegram-color); }
+        
+        .stat-card-icon {
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 2px solid;
+            position: relative;
+        }
+        
+        .stat-card-icon::before {
+            content: '';
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: currentColor;
+            top: -2px;
+            left: -2px;
+        }
+        
+        .stat-card-icon::after {
+            content: '';
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: currentColor;
+            bottom: -2px;
+            right: -2px;
+        }
+        
+        h2, h3, h4, h5 {
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            font-weight: 700;
+        }
+        
+        h2 i, h3 i, h4 i, h5 i {
+            color: var(--accent-orange);
+        }
+        
+        .border-top {
+            border-color: var(--military-green) !important;
+        }
+        
+        .dropdown-menu {
+            background-color: var(--bs-card-bg);
+            border: 1px solid var(--military-green);
+            border-radius: 0;
+        }
+        
+        .dropdown-item:hover {
+            background-color: rgba(90, 107, 74, 0.3);
+        }
+        
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: var(--military-dark);
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: var(--military-green);
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-orange);
+        }
+        
+        @media (max-width: 991.98px) {
+            .navbar-collapse {
+                background: var(--military-dark);
+                border: 1px solid var(--military-green);
+                margin-top: 8px;
+                padding: 10px;
+                max-height: 70vh;
+                overflow-y: auto;
+            }
+            
+            .navbar-collapse .nav-link-main,
+            .navbar-collapse .dropdown-toggle-military {
+                padding: 10px 12px !important;
+                border-bottom: 1px solid var(--military-green);
+            }
+            
+            .navbar-collapse .dropdown-menu-military {
+                background: transparent;
+                border: none;
+                padding-left: 20px;
+            }
+            
+            .navbar-collapse .dropdown-menu-military .dropdown-item {
+                padding: 8px 12px;
+            }
+            
+            .nav-divider {
+                display: none !important;
+            }
+            
+            #theme-toggle {
+                margin: 10px 0;
+                width: 100%;
+            }
+        }
     </style>
 </head>
 <body>
-    <div class="container-fluid">
-        <div class="row">
-            <nav class="col-md-2 d-none d-md-block sidebar py-3">
-                <div class="text-center mb-4 position-relative">
-                    <button class="btn btn-sm position-absolute end-0 me-2" id="theme-toggle" title="Cambiar tema">
-                        <i class="bi bi-moon-fill"></i>
-                    </button>
-                    <h5 class="text-white"><i class="bi bi-messenger"></i> Mensajería</h5>
-                    <small class="text-muted">Discord & Telegram</small>
-                </div>
-                
-                <ul class="nav flex-column">
+    <nav class="navbar navbar-expand-lg navbar-military">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/index.php">
+                ◈ LASTWAR <small>COMMS</small>
+            </a>
+            
+            <button class="navbar-toggler navbar-toggler-military" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <div class="collapse navbar-collapse" id="navbarMain">
+                <ul class="navbar-nav me-auto">
                     <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'index.php' ? 'active' : '' ?>" href="/index.php">
-                            <i class="bi bi-house-door"></i> Inicio
+                        <a class="nav-link nav-link-main <?= $currentPage === 'index.php' ? 'active' : '' ?>" href="/index.php">
+                            <i class="bi bi-crosshair"></i> Dashboard
                         </a>
                     </li>
-
                     <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'create_message.php' ? 'active' : '' ?>" href="/create_message.php">
-                            <i class="bi bi-plus-circle"></i> Crear Mensaje
+                        <a class="nav-link nav-link-main <?= $currentPage === 'create_message.php' ? 'active' : '' ?>" href="/create_message.php">
+                            <i class="bi bi-pencil-square"></i> Crear
                         </a>
                     </li>
-
                     <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'scheduled_messages.php' ? 'active' : '' ?>" href="/scheduled_messages.php">
-                            <i class="bi bi-clock"></i> Programados
+                        <a class="nav-link nav-link-main <?= $currentPage === 'scheduled_messages.php' ? 'active' : '' ?>" href="/scheduled_messages.php">
+                            <i class="bi bi-stopwatch"></i> Programados
                         </a>
                     </li>
-
                     <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'recurrentes.php' ? 'active' : '' ?>" href="/recurrentes.php">
-                            <i class="bi bi-repeat"></i> Plantillas
+                        <a class="nav-link nav-link-main <?= $currentPage === 'recurrentes.php' ? 'active' : '' ?>" href="/recurrentes.php">
+                            <i class="bi bi-collection"></i> Plantillas
                         </a>
                     </li>
-
                     <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'sent_messages.php' ? 'active' : '' ?>" href="/sent_messages.php">
-                            <i class="bi bi-send"></i> Enviados
+                        <a class="nav-link nav-link-main <?= $currentPage === 'sent_messages.php' ? 'active' : '' ?>" href="/sent_messages.php">
+                            <i class="bi bi-check2-all"></i> Enviados
                         </a>
                     </li>
-
                     <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'gallery.php' ? 'active' : '' ?>" href="/gallery.php">
+                        <a class="nav-link nav-link-main <?= $currentPage === 'gallery.php' ? 'active' : '' ?>" href="/gallery.php">
                             <i class="bi bi-images"></i> Galería
                         </a>
                     </li>
                     
                     <?php if (isAdmin()): ?>
-                    <li class="nav-item mt-3">
-                        <small class="text-muted px-3">ADMINISTRACIÓN</small>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'users.php' ? 'active' : '' ?>" href="/admin/users.php">
-                            <i class="bi bi-people"></i> Usuarios
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'recipients.php' ? 'active' : '' ?>" href="/admin/recipients.php">
-                            <i class="bi bi-person-check"></i> Destinatarios
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'languages.php' ? 'active' : '' ?>" href="/admin/languages.php">
-                            <i class="bi bi-translate"></i> Idiomas
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'comandos.php' ? 'active' : '' ?>" href="/admin/comandos.php">
-                            <i class="bi bi-terminal"></i> Comandos
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'test_discord_connection.php' ? 'active' : '' ?>" href="/admin/test_discord_connection.php">
-                            <i class="bi bi-discord"></i> Test Discord
-                        </a>
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'ia_agent.php' ? 'active' : '' ?>" href="/admin/ia_agent.php">
-                            <i class="bi bi-robot"></i> Config IA
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'set_webhook.php' ? 'active' : '' ?>" href="/set_webhook.php">
-                            <i class="bi bi-telegram"></i> Webhook Telegram
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'chat_telegram.php' ? 'active' : '' ?>" href="/chat_telegram.php">
-                            <i class="bi bi-chat-dots"></i> Chat Telegram
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'telegram_bot_interactions.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_bot_interactions.php">
-                            <i class="bi bi-robot"></i> Bot Telegram
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'telegram_welcome.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_welcome.php">
-                            <i class="bi bi-person-plus"></i> Bienvenida Grupos
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'translate_message.php' ? 'active' : '' ?>" href="/translate_message.php">
-                            <i class="bi bi-translate"></i> Traductor
-                        </a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link <?= $currentPage === 'admin_send_message.php' ? 'active' : '' ?>" href="/admin_send_message.php">
-                            <i class="bi bi-send"></i> Enviar Directo
+                    <div class="nav-divider d-none d-lg-block"></div>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle-military dropdown-toggle" href="#" data-bs-toggle="dropdown">
+                            <i class="bi bi-shield-lock"></i> COMANDO
                         </a>
+                        <ul class="dropdown-menu dropdown-menu-military">
+                            <li><a class="dropdown-item <?= $currentPage === 'users.php' ? 'active' : '' ?>" href="/admin/users.php"><i class="bi bi-people"></i> Usuarios</a></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'recipients.php' ? 'active' : '' ?>" href="/admin/recipients.php"><i class="bi bi-person-check"></i> Destinatarios</a></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'languages.php' ? 'active' : '' ?>" href="/admin/languages.php"><i class="bi bi-translate"></i> Idiomas</a></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'comandos.php' ? 'active' : '' ?>" href="/admin/comandos.php"><i class="bi bi-terminal"></i> Comandos</a></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'test_discord_connection.php' ? 'active' : '' ?>" href="/admin/test_discord_connection.php"><i class="bi bi-discord"></i> Test Discord</a></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'ia_agent.php' ? 'active' : '' ?>" href="/admin/ia_agent.php"><i class="bi bi-cpu"></i> Config IA</a></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'set_webhook.php' ? 'active' : '' ?>" href="/set_webhook.php"><i class="bi bi-telegram"></i> Webhook TG</a></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'chat_telegram.php' ? 'active' : '' ?>" href="/chat_telegram.php"><i class="bi bi-chat-dots"></i> Chat TG</a></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'telegram_bot_interactions.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_bot_interactions.php"><i class="bi bi-robot"></i> Bot Telegram</a></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'telegram_welcome.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_welcome.php"><i class="bi bi-person-plus"></i> Bienvenida</a></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'translate_message.php' ? 'active' : '' ?>" href="/translate_message.php"><i class="bi bi-translate"></i> Traductor</a></li>
+                            <li><a class="dropdown-item <?= $currentPage === 'admin_send_message.php' ? 'active' : '' ?>" href="/admin_send_message.php"><i class="bi bi-lightning"></i> Enviar Directo</a></li>
+                        </ul>
                     </li>
                     <?php endif; ?>
                 </ul>
                 
-                <div class="mt-auto pt-3 border-top">
-                    <a class="nav-link <?= $currentPage === 'profile.php' ? 'active' : '' ?>" href="/profile.php">
-                        <i class="bi bi-person"></i> Perfil
-                    </a>
-                    <a class="nav-link" href="/logout.php">
-                        <i class="bi bi-box-arrow-left"></i> Cerrar Sesión
-                    </a>
-                </div>
-            </nav>
-            
-            <main class="col-md-10 ms-sm-auto px-4 py-4">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <button class="btn" id="theme-toggle" title="Cambiar tema">
+                            <i class="bi bi-moon-fill"></i>
+                        </button>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link nav-link-main <?= $currentPage === 'profile.php' ? 'active' : '' ?>" href="/profile.php">
+                            <i class="bi bi-person"></i> Perfil
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link nav-link-main" href="/logout.php">
+                            <i class="bi bi-box-arrow-left"></i> Salir
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    
+    <main class="main-content">