diff --git "a/web/index.html" "b/web/index.html"
--- "a/web/index.html"
+++ "b/web/index.html"
@@ -1,181 +1,370 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="icon" href="favicon.ico">
-    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
-
-
-    <!-- Simple bar CSS -->
+    <title>Dashboard</title>
     <link rel="stylesheet" href="css/simplebar.css">
-    <!-- Fonts CSS -->
     <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <!-- Icons CSS -->
-    <link rel="stylesheet" href="css/feather.css">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <link rel="stylesheet" href="css/select2.css">
     <link rel="stylesheet" href="css/dropzone.css">
     <link rel="stylesheet" href="css/uppy.min.css">
     <link rel="stylesheet" href="css/jquery.steps.css">
     <link rel="stylesheet" href="css/jquery.timepicker.css">
     <link rel="stylesheet" href="css/quill.snow.css">
-    <!-- Date Range Picker CSS -->
     <link rel="stylesheet" href="css/daterangepicker.css">
-    <!-- App CSS -->
     <link rel="stylesheet" href="css/app-light.css" id="lightTheme">
     <link rel="stylesheet" href="css/app-dark.css" id="darkTheme" disabled>
-  </head>
-  <body class="vertical  light rtl ">
-    <div class="wrapper">
-      <nav class="topnav navbar navbar-light">
+</head>
+<body class="vertical  light  ">
+<div class="wrapper">
+    <nav class="topnav navbar navbar-light">
         <button type="button" class="navbar-toggler text-muted mt-2 p-0 mr-3 collapseSidebar">
-          <i class="fe fe-menu navbar-toggler-icon"></i>
+            <i data-feather="menu" class="navbar-toggler-icon"></i>
         </button>
-        <form class="form-inline mr-auto searchform text-muted">
-          <input class="form-control mr-sm-2 bg-transparent border-0 pl-4 text-muted" type="search" placeholder="Type something..." aria-label="Search">
-        </form>
+
         <ul class="nav">
-          <li class="nav-item">
-            <a class="nav-link text-muted my-2" href="#" id="modeSwitcher" data-mode="light">
-              <i class="fe fe-sun fe-16"></i>
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-shortcut">
-              <span class="fe fe-grid fe-16"></span>
-            </a>
-          </li>
-          <li class="nav-item nav-notif">
-            <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-notif">
-              <span class="fe fe-bell fe-16"></span>
-              <span class="dot dot-md bg-success"></span>
-            </a>
-          </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle text-muted pr-0" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
+
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle text-muted pr-0" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="avatar avatar-sm mt-2">
-                <img src="./assets/avatars/face-1.jpg" alt="..." class="avatar-img rounded-circle">
+                <img src="./assets/images/persona.png" alt="..." class="avatar-img rounded-circle">
               </span>
-            </a>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
-              <a class="dropdown-item" href="#">Profile</a>
-              <a class="dropdown-item" href="#">Settings</a>
-              <a class="dropdown-item" href="#">Activities</a>
-            </div>
-          </li>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                    <a class="dropdown-item" href="#" onclick="confirmLogout()">Cerrar Sesión</a>
+                </div>
+            </li>
         </ul>
-      </nav>
-      <aside class="sidebar-left border-right bg-white shadow" id="leftSidebar" data-simplebar>
+    </nav>
+    <aside class="sidebar-left border-right bg-white shadow" id="leftSidebar" data-simplebar>
         <a href="#" class="btn collapseSidebar toggle-btn d-lg-none text-muted ml-2 mt-3" data-toggle="toggle">
-          <i class="fe fe-x"><span class="sr-only"></span></i>
+            <i data-feather="x"><span class="sr-only"></span></i>
         </a>
         <nav class="vertnav navbar navbar-light">
-          <!-- nav bar -->
-          <div class="w-100 mb-4 d-flex">
-            <a class="navbar-brand mx-auto mt-2 flex-fill text-center" href="./index.html">
-              <svg version="1.1" id="logo" class="navbar-brand-img brand-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve">
-                <g>
-                  <polygon class="st0" points="78,105 15,105 24,87 87,87 	" />
-                  <polygon class="st0" points="96,69 33,69 42,51 105,51 	" />
-                  <polygon class="st0" points="78,33 15,33 24,15 87,15 	" />
-                </g>
-              </svg>
-            </a>
-          </div>
-          <ul class="navbar-nav flex-fill w-100 mb-2">
-            <li class="nav-item w-100">
-              <a class="nav-link" href="index.html">
-                <i class="fe fe-calendar fe-16"></i>
-                <span class="ml-3 item-text">Mesas</span>
-              </a>
-            </li>
-            
-            <li class="nav-item w-100">
-              <a class="nav-link" href="platoMock.html">
-                <i class="fe fe-calendar fe-16"></i>
-                <span class="ml-3 item-text">Crear plato</span>
-              </a>
-            </li>
-            <li class="nav-item w-100">
-              <a class="nav-link" href="Ingredientes.html">
-                <i class="fe fe-calendar fe-16"></i>
-                <span class="ml-3 item-text">Crear Ingrediente</span>
-              </a>
-            </li>
-            <!--
-            <li class="nav-item w-100">
-              <a class="nav-link" href="index.html">
-                <i class="fe fe-calendar fe-16"></i>
-                <span class="ml-3 item-text">Cadena de produccion</span>
-              </a>
-            </li>
-            -->
-            
-          </ul>
+            <!-- nav bar -->
+            <div class="w-100 mb-4 d-flex">
+                <a class="navbar-brand mx-auto mt-2 flex-fill text-center">
+                    <img src="assets/images/LOGO.png" alt="Logo">
+                </a>
+            </div>
+
+            <ul class="navbar-nav flex-fill w-100 mb-2">
+                <li class="nav-item active">
+                    <a class="nav-link" href="./index.html">
+                        <i data-feather="home" class="fe-16"></i>
+                        <span class="ml-3 item-text">Dashboard</span>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="./diagnosis.html">
+                        <i data-feather="eye" class="fe-16"></i>
+                        <span class="ml-3 item-text">Diagnóstico</span>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="./patients.html">
+                        <i data-feather="users" class="fe-16"></i>
+                        <span class="ml-3 item-text">Pacientes</span>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="./historial-consultas.html">
+                        <i data-feather="file-text" class="fe-16"></i>
+                        <span class="ml-3 item-text">Consultas</span>
+                    </a>
+                </li>
+                <li class="nav-item active">
+                    <a class="nav-link" href="./users.html">
+                        <i data-feather="user" class="fe-16"></i>
+                        <span class="ml-3 item-text">Usuarios</span>
+                    </a>
+                </li>
+            </ul>
         </nav>
-      </aside>
-      <main role="main" class="main-content">
+    </aside>
+    <main role="main" class="main-content">
         <div class="container-fluid">
-          <div class="row justify-content-center align-items-center">
-            <div class="col-12 col-md-9">
-              <h2 class="page-title">Mesas</h2>
-            </div>
-            <div class="col-12 col-md-3 text-right">
-              <button class="btn btn-primary" onclick="abrirModalCrear()">
-                <i class="fe fe-plus"></i> Nueva mesa
+            <div class="row justify-content-center">
+                <div class="col-12">
+                    <div class="row mb-4">
+                        <div class="col-md-6 col-lg-3">
+                            <div class="card shadow border-0 mb-4" id="totalPatientsCard">
+                                <div class="card-body">
+                                    <div class="row align-items-center">
+                                        <div class="col-3 text-center">
+                                            <span class="circle circle-sm bg-primary">
+                                                <i data-feather="users" class="fe-16 text-white"></i>
+                                            </span>
+                                        </div>
+                                        <div class="col pr-0">
+                                            <p class="small text-muted mb-0">Total Pacientes</p>
+                                            <span class="h3 mb-0">0</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6 col-lg-3">
+                            <div class="card shadow border-0 mb-4" id="positiveCasesCard">
+                                <div class="card-body">
+                                    <div class="row align-items-center">
+                                        <div class="col-3 text-center">
+                                            <span class="circle circle-sm bg-warning">
+                                                <i data-feather="alert-triangle" class="fe-16 text-white"></i>
+                                            </span>
+                                        </div>
+                                        <div class="col pr-0">
+                                            <p class="small text-muted mb-0">Con Retinopatía</p>
+                                            <span class="h3 mb-0">0</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6 col-lg-3">
+                            <div class="card shadow border-0 mb-4" id="negativeCasesCard">
+                                <div class="card-body">
+                                    <div class="row align-items-center">
+                                        <div class="col-3 text-center">
+                                            <span class="circle circle-sm bg-success">
+                                                <i data-feather="check" class="fe-16 text-white"></i>
+                                            </span>
+                                        </div>
+                                        <div class="col pr-0">
+                                            <p class="small text-muted mb-0">Sin Retinopatía</p>
+                                            <span class="h3 mb-0">0</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6 col-lg-3">
+                            <div class="card shadow border-0 mb-4" id="positivityRateCard">
+                                <div class="card-body">
+                                    <div class="row align-items-center">
+                                        <div class="col-3 text-center">
+                                            <span class="circle circle-sm bg-info">
+                                                <i data-feather="percent" class="fe-16 text-white"></i>
+                                            </span>
+                                        </div>
+                                        <div class="col pr-0">
+                                            <p class="small text-muted mb-0">Tasa Positividad</p>
+                                            <span class="h3 mb-0">0%</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mb-2 align-items-center">
+                        <div class="card shadow mb-4">
+                            <div class="card-body">
+                                <div class="row mt-1 align-items-center"></div>
+                                <div class="chartbox mr-4">
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <h6 class="card-title mb-0">Estadísticas de Consultas</h6>
+                                    </div>
+                                    <div id="areaChart"></div>
+                                </div>
+                            </div> <!-- .card-body -->
+                        </div> <!-- .card -->
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-12 col-lg-4">
+                            <div class="card shadow h-100 mb-4">
+                                <div class="card-header">
+                                    <h6 class="card-title mb-0">
+                                        <i data-feather="pie-chart" class="mr-2"></i>
+                                        Rangos de Edad con Retinopatía
+                                    </h6>
+                                </div>
+                                <div class="card-body d-flex flex-column">
+                                    <div class="chart-widget mb-2 flex-grow-1 d-flex align-items-center justify-content-center">
+                                        <div id="ageRangesChart" style="width: 100%; height: 300px;"></div>
+                                    </div>
+                                    <div class="row items-align-center mt-auto" id="ageStatsRow">
+                                        <div class="col-4 text-center">
+                                            <p class="text-muted mb-1">Promedio</p>
+                                            <h6 class="mb-1" id="avgAge">-</h6>
+                                            <p class="text-muted mb-0">años</p>
+                                        </div>
+                                        <div class="col-4 text-center">
+                                            <p class="text-muted mb-1">Rango</p>
+                                            <h6 class="mb-1" id="ageRange">-</h6>
+                                            <p class="text-muted mb-0">min-max</p>
+                                        </div>
+                                        <div class="col-4 text-center">
+                                            <p class="text-muted mb-1">Total</p>
+                                            <h6 class="mb-1" id="totalPatientsAge">-</h6>
+                                            <p class="text-muted mb-0">consultas</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-md-12 col-lg-8">
+                            <div class="card shadow h-100">
+                                <div class="card-header">
+                                    <strong class="card-title">Consultas Recientes</strong>
+                                </div>
+                                <div class="card-body my-n2">
+                                    <table class="table table-striped table-hover table-borderless">
+                                        <thead>
+                                        <tr>
+                                            <th>Fecha</th>
+                                            <th>Paciente</th>
+                                            <th>Resultado</th>
+                                            <th>Confianza</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody id="recentConsultationsBody">
+                                        <tr>
+                                            <td colspan="5" class="text-center text-muted">
+                                                <i data-feather="loader" class="fe-16 spinner"></i> Cargando consultas...
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div> <!-- .row -->
+                </div> <!-- .col-12 -->
+            </div> <!-- .row -->
+        </div> <!-- .container-fluid -->
+        <div class="modal fade modal-notif modal-slide" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-sm" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="defaultModalLabel">Notifications</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="list-group list-group-flush my-n3">
+                            <div class="list-group-item bg-transparent">
+                                <div class="row align-items-center">
+                                    <div class="col-auto">
+                                        <span data-feather="box" class="fe-24"></span>
+                                    </div>
+                                    <div class="col">
+                                        <small><strong>Package has uploaded successfull</strong></small>
+                                        <div class="my-0 text-muted small">Package is zipped and uploaded</div>
+                                        <small class="badge badge-pill badge-light text-muted">1m ago</small>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="list-group-item bg-transparent">
+                                <div class="row align-items-center">
+                                    <div class="col-auto">
+                                        <span data-feather="download" class="fe-24"></span>
+                                    </div>
+                                    <div class="col">
+                                        <small><strong>Widgets are updated successfull</strong></small>
+                                        <div class="my-0 text-muted small">Just create new layout Index, form, table</div>
+                                        <small class="badge badge-pill badge-light text-muted">2m ago</small>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="list-group-item bg-transparent">
+                                <div class="row align-items-center">
+                                    <div class="col-auto">
+                                        <span data-feather="inbox" class="fe-24"></span>
+                                    </div>
+                                    <div class="col">
+                                        <small><strong>Notifications have been sent</strong></small>
+                                        <div class="my-0 text-muted small">Fusce dapibus, tellus ac cursus commodo</div>
+                                        <small class="badge badge-pill badge-light text-muted">30m ago</small>
+                                    </div>
+                                </div> <!-- / .row -->
+                            </div>
+                            <div class="list-group-item bg-transparent">
+                                <div class="row align-items-center">
+                                    <div class="col-auto">
+                                        <span data-feather="link" class="fe-24"></span>
+                                    </div>
+                                    <div class="col">
+                                        <small><strong>Link was attached to menu</strong></small>
+                                        <div class="my-0 text-muted small">New layout has been attached to the menu</div>
+                                        <small class="badge badge-pill badge-light text-muted">1h ago</small>
+                                    </div>
+                                </div>
+                            </div> <!-- / .row -->
+                        </div> <!-- / .list-group -->
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">Clear All</button>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-       
-         <div class="row" id="mesasContainer">
-        <!-- Las mesas se cargarán aquí dinámicamente -->
-        </div>
-        <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
-          <div class="modal-dialog" role="document">
-            <div class="modal-content">
-              <div class="modal-header">
-                <h5 class="modal-title" id="createModalLabel">
-                  <i class="fas fa-plus-circle" ></i> Crear Nueva Mesa
-                </h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
-                  <span aria-hidden="true">×</span>
-                </button>
-              </div>
-              <div class="modal-body">
-                <form id="createForm">
-                  <div class="form-group">
-                    <label for="create-nombre" class="col-form-label">
-                      Numero de la mesa <span class="text-danger">*</span>
-                    </label>
-                    <input type="text" 
-                           class="form-control" 
-                           id="create-nombre" 
-                           maxlength="100" 
-                           required>
-                    <!-- <small class="form-text text-muted">Máximo 100 caracteres</small> -->
-                  </div>
-                </form>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                  <i class="fas fa-times"></i> Cancelar
-                </button>
-                <button type="button" class="btn btn-primary" onclick="crearMesa()">
-                  <i class="fas fa-save"></i> Guardar
-                </button>
-              </div>
+        <div class="modal fade modal-shortcut modal-slide" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="defaultModalLabel">Shortcuts</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body px-5">
+                        <div class="row align-items-center">
+                            <div class="col-6 text-center">
+                                <div class="squircle bg-success justify-content-center">
+                                    <i data-feather="cpu" class="fe-32 align-self-center text-white"></i>
+                                </div>
+                                <p>Control area</p>
+                            </div>
+                            <div class="col-6 text-center">
+                                <div class="squircle bg-primary justify-content-center">
+                                    <i data-feather="activity" class="fe-32 align-self-center text-white"></i>
+                                </div>
+                                <p>Activity</p>
+                            </div>
+                        </div>
+                        <div class="row align-items-center">
+                            <div class="col-6 text-center">
+                                <div class="squircle bg-primary justify-content-center">
+                                    <i data-feather="droplet" class="fe-32 align-self-center text-white"></i>
+                                </div>
+                                <p>Droplet</p>
+                            </div>
+                            <div class="col-6 text-center">
+                                <div class="squircle bg-primary justify-content-center">
+                                    <i data-feather="upload-cloud" class="fe-32 align-self-center text-white"></i>
+                                </div>
+                                <p>Upload</p>
+                            </div>
+                        </div>
+                        <div class="row align-items-center">
+                            <div class="col-6 text-center">
+                                <div class="squircle bg-primary justify-content-center">
+                                    <i data-feather="users" class="fe-32 align-self-center text-white"></i>
+                                </div>
+                                <p>Users</p>
+                            </div>
+                            <div class="col-6 text-center">
+                                <div class="squircle bg-primary justify-content-center">
+                                    <i data-feather="settings" class="fe-32 align-self-center text-white"></i>
+                                </div>
+                                <p>Settings</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-    
-    
-        
-      </main> <!-- main -->
-    </div> <!-- .wrapper -->
+    </main> <!-- main -->
     <script src="js/jquery.min.js"></script>
     <script src="js/popper.min.js"></script>
     <script src="js/moment.min.js"></script>
@@ -191,15 +380,16 @@
     <script src="js/datamaps-zoomto.js"></script>
     <script src="js/datamaps.custom.js"></script>
     <script src="js/Chart.min.js"></script>
+    <script src="api.js"></script>
     <script>
-      /* defind global options */
-      Chart.defaults.global.defaultFontFamily = base.defaultFontFamily;
-      Chart.defaults.global.defaultFontColor = colors.mutedColor;
+        api.getSession().catch(() => { window.location.href = 'auth-login.html'; })
+           .then(r => { if (r && !r.success) window.location.href = 'auth-login.html'; });
     </script>
     <script src="js/gauge.min.js"></script>
     <script src="js/jquery.sparkline.min.js"></script>
     <script src="js/apexcharts.min.js"></script>
     <script src="js/apexcharts.custom.js"></script>
+
     <script src='js/jquery.mask.min.js'></script>
     <script src='js/select2.min.js'></script>
     <script src='js/jquery.steps.min.js'></script>
@@ -209,384 +399,1590 @@
     <script src='js/uppy.min.js'></script>
     <script src='js/quill.min.js'></script>
     <script>
-      $('.select2').select2(
-      {
-        theme: 'bootstrap4',
-      });
-      $('.select2-multi').select2(
-      {
-        multiple: true,
-        theme: 'bootstrap4',
-      });
-      $('.drgpicker').daterangepicker(
-      {
-        singleDatePicker: true,
-        timePicker: false,
-        showDropdowns: true,
-        locale:
+        $('.select2').select2(
+            {
+                theme: 'bootstrap4',
+            });
+        $('.select2-multi').select2(
+            {
+                multiple: true,
+                theme: 'bootstrap4',
+            });
+        $('.drgpicker').daterangepicker(
+            {
+                singleDatePicker: true,
+                timePicker: false,
+                showDropdowns: true,
+                locale:
+                    {
+                        format: 'MM/DD/YYYY'
+                    }
+            });
+        $('.time-input').timepicker(
+            {
+                'scrollDefault': 'now',
+                'zindex': '9999' /* fix modal open */
+            });
+        /** date range picker */
+        if ($('.datetimes').length)
         {
-          format: 'MM/DD/YYYY'
+            $('.datetimes').daterangepicker(
+                {
+                    timePicker: true,
+                    startDate: moment().startOf('hour'),
+                    endDate: moment().startOf('hour').add(32, 'hour'),
+                    locale:
+                        {
+                            format: 'M/DD hh:mm A'
+                        }
+                });
         }
-      });
-      $('.time-input').timepicker(
-      {
-        'scrollDefault': 'now',
-        'zindex': '9999' /* fix modal open */
-      });
-      /** date range picker */
-      if ($('.datetimes').length)
-      {
-        $('.datetimes').daterangepicker(
-        {
-          timePicker: true,
-          startDate: moment().startOf('hour'),
-          endDate: moment().startOf('hour').add(32, 'hour'),
-          locale:
-          {
-            format: 'M/DD hh:mm A'
-          }
-        });
-      }
-      var start = moment().subtract(29, 'days');
-      var end = moment();
-
-      function cb(start, end)
-      {
-        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
-      }
-      $('#reportrange').daterangepicker(
-      {
-        startDate: start,
-        endDate: end,
-        ranges:
+        var start = moment().subtract(29, 'days');
+        var end = moment();
+
+        function cb(start, end)
         {
-          'Today': [moment(), moment()],
-          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
-          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
-          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
-          'This Month': [moment().startOf('month'), moment().endOf('month')],
-          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
         }
-      }, cb);
-      cb(start, end);
-      $('.input-placeholder').mask("00/00/0000",
-      {
-        placeholder: "__/__/____"
-      });
-      $('.input-zip').mask('00000-000',
-      {
-        placeholder: "____-___"
-      });
-      $('.input-money').mask("#.##0,00",
-      {
-        reverse: true
-      });
-      $('.input-phoneus').mask('(000) 000-0000');
-      $('.input-mixed').mask('AAA 000-S0S');
-      $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
-      {
-        translation:
-        {
-          'Z':
-          {
-            pattern: /[0-9]/,
-            optional: true
-          }
-        },
-        placeholder: "___.___.___.___"
-      });
-      // editor
-      var editor = document.getElementById('editor');
-      if (editor)
-      {
-        var toolbarOptions = [
-          [
-          {
-            'font': []
-          }],
-          [
-          {
-            'header': [1, 2, 3, 4, 5, 6, false]
-          }],
-          ['bold', 'italic', 'underline', 'strike'],
-          ['blockquote', 'code-block'],
-          [
-          {
-            'header': 1
-          },
-          {
-            'header': 2
-          }],
-          [
-          {
-            'list': 'ordered'
-          },
-          {
-            'list': 'bullet'
-          }],
-          [
-          {
-            'script': 'sub'
-          },
-          {
-            'script': 'super'
-          }],
-          [
-          {
-            'indent': '-1'
-          },
-          {
-            'indent': '+1'
-          }], // outdent/indent
-          [
-          {
-            'direction': 'rtl'
-          }], // text direction
-          [
-          {
-            'color': []
-          },
-          {
-            'background': []
-          }], // dropdown with defaults from theme
-          [
-          {
-            'align': []
-          }],
-          ['clean'] // remove formatting button
-        ];
-        var quill = new Quill(editor,
+        $('#reportrange').daterangepicker(
+            {
+                startDate: start,
+                endDate: end,
+                ranges:
+                    {
+                        'Today': [moment(), moment()],
+                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+                        'This Month': [moment().startOf('month'), moment().endOf('month')],
+                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+                    }
+            }, cb);
+        cb(start, end);
+        $('.input-placeholder').mask("00/00/0000",
+            {
+                placeholder: "__/__/____"
+            });
+        $('.input-zip').mask('00000-000',
+            {
+                placeholder: "____-___"
+            });
+        $('.input-money').mask("#.##0,00",
+            {
+                reverse: true
+            });
+        $('.input-phoneus').mask('(000) 000-0000');
+        $('.input-mixed').mask('AAA 000-S0S');
+        $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
+            {
+                translation:
+                    {
+                        'Z':
+                            {
+                                pattern: /[0-9]/,
+                                optional: true
+                            }
+                    },
+                placeholder: "___.___.___.___"
+            });
+        // editor
+        var editor = document.getElementById('editor');
+        if (editor)
         {
-          modules:
-          {
-            toolbar: toolbarOptions
-          },
-          theme: 'snow'
-        });
-      }
-      // Example starter JavaScript for disabling form submissions if there are invalid fields
-      (function()
-      {
-        'use strict';
-        window.addEventListener('load', function()
+            var toolbarOptions = [
+                [
+                    {
+                        'font': []
+                    }],
+                [
+                    {
+                        'header': [1, 2, 3, 4, 5, 6, false]
+                    }],
+                ['bold', 'italic', 'underline', 'strike'],
+                ['blockquote', 'code-block'],
+                [
+                    {
+                        'header': 1
+                    },
+                    {
+                        'header': 2
+                    }],
+                [
+                    {
+                        'list': 'ordered'
+                    },
+                    {
+                        'list': 'bullet'
+                    }],
+                [
+                    {
+                        'script': 'sub'
+                    },
+                    {
+                        'script': 'super'
+                    }],
+                [
+                    {
+                        'indent': '-1'
+                    },
+                    {
+                        'indent': '+1'
+                    }],
+                [
+                    {
+                        'direction': 'rtl'
+                    }],
+                [
+                    {
+                        'color': []
+                    },
+                    {
+                        'background': []
+                    }],
+                [
+                    {
+                        'align': []
+                    }],
+                ['clean']
+            ];
+            var quill = new Quill(editor,
+                {
+                    modules:
+                        {
+                            toolbar: toolbarOptions
+                        },
+                    theme: 'snow'
+                });
+        }
+        (function()
         {
-          // Fetch all the forms we want to apply custom Bootstrap validation styles to
-          var forms = document.getElementsByClassName('needs-validation');
-          // Loop over them and prevent submission
-          var validation = Array.prototype.filter.call(forms, function(form)
-          {
-            form.addEventListener('submit', function(event)
+            'use strict';
+            window.addEventListener('load', function()
             {
-              if (form.checkValidity() === false)
-              {
-                event.preventDefault();
-                event.stopPropagation();
-              }
-              form.classList.add('was-validated');
+                var forms = document.getElementsByClassName('needs-validation');
+                var validation = Array.prototype.filter.call(forms, function(form)
+                {
+                    form.addEventListener('submit', function(event)
+                    {
+                        if (form.checkValidity() === false)
+                        {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }
+                        form.classList.add('was-validated');
+                    }, false);
+                });
             }, false);
-          });
-        }, false);
-      })();
+        })();
     </script>
     <script>
-      var uptarg = document.getElementById('drag-drop-area');
-      if (uptarg)
-      {
-        var uppy = Uppy.Core().use(Uppy.Dashboard,
+        var uptarg = document.getElementById('drag-drop-area');
+        if (uptarg)
         {
-          inline: true,
-          target: uptarg,
-          proudlyDisplayPoweredByUppy: false,
-          theme: 'dark',
-          width: 770,
-          height: 210,
-          plugins: ['Webcam']
-        }).use(Uppy.Tus,
-        {
-          endpoint: 'https://master.tus.io/files/'
-        });
-        uppy.on('complete', (result) =>
-        {
-          console.log('Upload complete! We’ve uploaded these files:', result.successful)
-        });
-      }
+            var uppy = Uppy.Core().use(Uppy.Dashboard,
+                {
+                    inline: true,
+                    target: uptarg,
+                    proudlyDisplayPoweredByUppy: false,
+                    theme: 'dark',
+                    width: 770,
+                    height: 210,
+                    plugins: ['Webcam']
+                }).use(Uppy.Tus,
+                {
+                    endpoint: 'https://master.tus.io/files/'
+                });
+            uppy.on('complete', (result) =>
+            {
+                console.log('Upload complete! We\'ve uploaded these files:', result.successful)      });
+        }
     </script>
     <script src="js/apps.js"></script>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>
     <script>
-      window.dataLayer = window.dataLayer || [];
-
-      function gtag()
-      {
-        dataLayer.push(arguments);
-      }
-      gtag('js', new Date());
-      gtag('config', 'UA-56159088-1');
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag()
+        {
+            dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
+        gtag('config', 'UA-56159088-1');
     </script>
+    <script>
+        $(document).ready(function() {
+            console.log('Dashboard iniciado');
 
+            let currentUser = null;
+            let systemStatus = {};
+            let recentAnalysis = [];
+            let areaChartInstance = null;
+            let ageRangesChartInstance = null;
 
+            initializeDashboard();
 
+            setupEventListeners();
 
-    <script>
-      let numLastTable = 0;
-      const API_URL = 'http://localhost:8080/api/v1/mesa';
+            function initializeDashboard() {
+                console.log('Inicializando dashboard...');
 
-      // Funcion inico
-      document.addEventListener('DOMContentLoaded', () => {
-            cargarMesas();
-        });
+                checkAuthentication();
+
+                loadSystemStatus();
+
+                loadDashboardStats();
+
+                // loadRecentAnalysis() - handled by loadRecentConsultations
+
+                updateChartData(7);
+
+                loadAgeRangesData();
+
+                setupDateRangePicker();
+
+                updateDateTime();
+                setInterval(updateDateTime, 60000); // Actualizar cada minuto
+            }
+
+            async function checkAuthentication() {
+                const response = await api.getSession().catch(() => null);
+                if (response && response.success) {
+                    currentUser = response.user;
+                    updateUserInterface();
+                } else {
+                    window.location.href = 'auth-login.html';
+                }
+            }
+
+            function updateUserInterface() {
+                if (currentUser) {
+                    $('#currentUserName').text(currentUser.username);
+                    $('#welcomeMessage').text(`¡Bienvenido, ${currentUser.username}!`);
+
+                    const roleClass = currentUser.role === 'Admin' ? 'badge-primary' : 'badge-success';
+                    $('#currentUserName').after(`<span class="badge ${roleClass} ml-2">${currentUser.role}</span>`);
+                }
+            }
+
+            async function loadSystemStatus() {
+                const response = await api.getModelInfo().catch(() => null);
+                if (response && response.loaded) {
+                    systemStatus = { model_loaded: response.loaded, database_connected: true, app_version: 'v2.1' };
+                    updateSystemStatusUI();
+                } else {
+                    systemStatus = { model_loaded: false, database_connected: true, app_version: 'v2.1' };
+                    updateSystemStatusUI();
+                }
+            }
+
+            function updateSystemStatusUI() {
+                if (systemStatus.model_loaded) {
+                    $('#modelStatus').removeClass('bg-danger').addClass('bg-success');
+                    $('#modelStatusText').text('Cargado').removeClass('text-danger').addClass('text-success');
+                } else {
+                    $('#modelStatus').removeClass('bg-success').addClass('bg-danger');
+                    $('#modelStatusText').text('Error').removeClass('text-success').addClass('text-danger');
+                }
+
+                if (systemStatus.database_connected) {
+                    $('#dbStatus').removeClass('bg-danger').addClass('bg-success');
+                    $('#dbStatusText').text('Conectada').removeClass('text-danger').addClass('text-success');
+                } else {
+                    $('#dbStatus').removeClass('bg-success').addClass('bg-danger');
+                    $('#dbStatusText').text('Desconectada').removeClass('text-success').addClass('text-danger');
+                }
+
+                $('#appVersion').text(systemStatus.app_version || 'v2.1');
+
+                const isSystemHealthy = systemStatus.model_loaded && systemStatus.database_connected;
+                if (isSystemHealthy) {
+                    $('#systemStatusIcon').removeClass('bg-danger').addClass('bg-success');
+                    $('#systemStatusIcon i').removeClass('fe-x').addClass('fe-check');
+                    $('#systemStatusText').text('Operativo');
+                } else {
+                    $('#systemStatusIcon').removeClass('bg-success').addClass('bg-danger');
+                    $('#systemStatusIcon i').removeClass('fe-check').addClass('fe-x');
+                    $('#systemStatusText').text('Con errores');
+                }
+            }
+
+            async function loadDashboardStats() {
+                const response = await api.getDashboardStats().catch(() => null);
+                if (response && response.success) {
+                    const stats = response.stats;
+                    // Usar || 0 para evitar undefined/null que causan contadores negativos
+                    const totalPatients   = parseInt(stats.total_patients || stats.total_unique_patients || 0);
+                    const positiveCases   = parseInt(stats.positive_cases || stats.patients_with_rd || 0);
+                    const negativeCases   = parseInt(stats.negative_cases || stats.patients_without_rd || 0);
+                    const positivityRate  = parseFloat(stats.positivity_rate || 0).toFixed(1);
+
+                    updateStatCard('#totalPatientsCard', totalPatients);
+                    updateStatCard('#positiveCasesCard', positiveCases);
+                    updateStatCard('#negativeCasesCard', negativeCases);
+                    updateStatCard('#positivityRateCard', positivityRate + '%');
+
+                    // Pasar stats normalizados al donut
+                    updateDonutChart({
+                        total_unique_patients: totalPatients,
+                        patients_with_rd: positiveCases,
+                        patients_without_rd: negativeCases
+                    });
+                } else {
+                    showErrorMessage('Error cargando estadísticas del dashboard');
+                }
+            }
+
+            function updateStatCard(selector, value) {
+                const card = $(selector);
+                const valueElement = card.find('span.h3');
+
+                if (typeof value === 'string' && value.includes('%')) {
+                    valueElement.text(value);
+                } else {
+                    const targetValue = parseInt(value) || 0;
+                    animateValue(valueElement[0], 0, targetValue, 800);
+                }
+            }
+
+            function animateValue(element, start, end, duration) {
+                if (!element) return;
+                const safeEnd = Math.max(0, parseInt(end) || 0);
+                const safeStart = Math.max(0, parseInt(start) || 0);
+                const startTime = performance.now();
+                const step = (currentTime) => {
+                    const elapsed = currentTime - startTime;
+                    const progress = Math.min(elapsed / duration, 1);
+                    element.textContent = Math.floor(progress * (safeEnd - safeStart) + safeStart);
+                    if (progress < 1) window.requestAnimationFrame(step);
+                };
+                window.requestAnimationFrame(step);
+            }
+
+            function updateDonutChart(stats) {
+                const donutChartElement = document.querySelector("#donutChart");
+                if (!donutChartElement) return;
+
+                donutChartElement.innerHTML = '';
 
-        async function cargarMesas() {
-            try {
-                const response = await fetch(`${API_URL}/list`);
-                const mesas = await response.json();
-                
-                const container = document.getElementById('mesasContainer');
-                container.innerHTML = '';
-
-                // Por cada mesa, crear un widget
-                mesas.forEach(mesa => {
-                    const mesaWidget = crearMesaWidget(mesa);
-                    container.appendChild(mesaWidget);
-                    numLastTable++;
+                const donutOptions = {
+                    chart: {
+                        type: 'donut',
+                        height: 300
+                    },
+                    colors: ['#66DA26', '#FF9800'],
+                    series: [stats.patients_without_rd || 0, stats.patients_with_rd || 0],
+                    labels: ['Sin Retinopatía', 'Con Retinopatía'],
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            colors: '#9aa0ac',
+                        }
+                    },
+                    dataLabels: {
+                        enabled: true,
+                        formatter: function(val, opts) {
+                            return Math.round(val) + '%';
+                        }
+                    },
+                    plotOptions: {
+                        pie: {
+                            donut: {
+                                labels: {
+                                    show: true,
+                                    total: {
+                                        show: true,
+                                        label: 'Total Pacientes',
+                                        color: '#9aa0ac',
+                                        formatter: function(w) {
+                                            return stats.total_unique_patients || 0;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    responsive: [{
+                        breakpoint: 480,
+                        options: {
+                            chart: {
+                                height: 250
+                            },
+                            legend: {
+                                position: 'bottom'
+                            }
+                        }
+                    }]
+                };
+
+                try {
+                    const donutChart = new ApexCharts(donutChartElement, donutOptions);
+                    donutChart.render();
+                } catch (error) {
+                    console.error('Error creando gráfico donut:', error);
+                }
+            }
+
+            function updateChartData(days) {
+                console.log(`Actualizando grafico para los ultimos ${days} dias`);
+
+                api.getConsultations(1, 100).then(function(response) {
+                    console.log('Respuesta del backend:', response);
+
+                    if (response && response.success && response.consultations.length > 0) {
+                        // Agrupar consultas por fecha — parsear correctamente
+                        const grouped = {};
+                        response.consultations.forEach(c => {
+                            const raw = c.consultationDate || '';
+                            // Soporta "2026-03-17 23:05:12" y "2026-03-17T23:05:12"
+                            const d = raw.replace('T', ' ').substring(0, 10);
+                            if (!d || d === '0000-00-00') return;
+                            if (!grouped[d]) grouped[d] = {total:0, pos:0, neg:0};
+                            grouped[d].total++;
+                            if (c.diabeticRetinopathy) grouped[d].pos++; else grouped[d].neg++;
+                        });
+                        const dates = Object.keys(grouped).sort();
+                        if (dates.length === 0) { createEmptyChart(); return; }
+                        createOrUpdateChart(
+                            dates,
+                            dates.map(d => grouped[d].total),
+                            dates.map(d => grouped[d].pos),
+                            dates.map(d => grouped[d].neg)
+                        );
+                    } else {
+                        createEmptyChart();
+                    }
                 });
+            }
+
+            function setupDateRangePicker() {
+                var start = moment().subtract(29, 'days');
+                var end = moment();
+
+                function cb(start, end) {
+                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
+                }
 
-            } catch (error) {
-                console.error('Error al cargar las mesas:', error);
+                $('#reportrange').daterangepicker({
+                    startDate: start,
+                    endDate: end,
+                    ranges: {
+                        'Hoy': [moment(), moment()],
+                        'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                        'Últimos 7 Días': [moment().subtract(6, 'days'), moment()],
+                        'Últimos 30 Días': [moment().subtract(29, 'days'), moment()],
+                        'Este Mes': [moment().startOf('month'), moment().endOf('month')],
+                        'Mes Anterior': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+                    }
+                }, cb);
+
+                cb(start, end);
             }
-        }
 
+            function loadRecentConsultations() {
+                $('#recentConsultationsBody').html(`
+                    <tr>
+                        <td colspan="5" class="text-center text-muted">
+                            <i data-feather="loader" class="fe-16 spinner"></i> Cargando consultas...
+                        </td>
+                    </tr>
+                `);
 
+                api.getConsultations(1, 10).then(function(response) {
+                    if (response.success) {
+                        updateRecentConsultationsTable(response.consultations);
+                    } else {
+                        showErrorInTable(response.message);
+                    }
+                });
+            }
 
-        function crearMesaWidget(mesa) {
-            const div = document.createElement('div');
-            div.className = 'col-md-6 col-xl-3 mb-4';
-            div.innerHTML = `
-                <div class="card shadow" onclick="seleccionarMesa(${mesa.numero})">
-                    <div class="card-body">
-                        <div class="row align-items-center">
-                            <div class="col-3 text-center">
-                                <span class="circle circle-sm bg-primary d-flex align-items-center justify-content-center">
-                                    <i class="fa-solid fa-utensils text-white"></i>
-                                </span>
+            function updateRecentConsultationsTable(consultations) {
+                const tbody = $('#recentConsultationsBody');
+                tbody.empty();
+
+                if (consultations.length === 0) {
+                    tbody.append(`
+                        <tr>
+                            <td colspan="5" class="text-center text-muted">
+                                <i data-feather="inbox" class="fe-16"></i><br>
+                                No hay consultas recientes
+                            </td>
+                        </tr>
+                    `);
+                    return;
+                }
+
+                consultations.forEach(consultation => {
+                    const date = consultation.consultationDate ?
+                        new Date(consultation.consultationDate).toLocaleString('es-ES') : 'N/A';
+
+                    const isPositive = consultation.diabeticRetinopathy;
+                    const resultClass = isPositive ? 'badge-warning' : 'badge-success';
+                    const resultText = isPositive ? 'Positivo' : 'Negativo';
+                    const confidence = consultation.confidence ?
+                        `${consultation.confidence.toFixed(1)}%` : 'N/A';
+
+                    tbody.append(`
+                        <tr>
+                            <td>${date}</td>
+                            <td>${consultation.patientName || consultation.patient_name || 'Desconocido'}</td>
+                            <td><span class="badge ${resultClass}">${resultText}</span></td>
+                            <td>${confidence}</td>
+                        </tr>
+                    `);
+                });
+            }
+
+            window.showConsultationDetails = function(consultationId) {
+                alert('Ver detalles: Consulta #' + consultationId);
+            };
+
+            function showConsultationModal(consultation) {
+                const modalHtml = `
+                <div class="modal fade" id="consultationModal" tabindex="-1" role="dialog">
+                    <div class="modal-dialog modal-lg" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title">Detalles de Consulta</h5>
+                                <button type="button" class="close" data-dismiss="modal">
+                                    <span>&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <div class="row mb-3">
+                                    <div class="col-md-6">
+                                        <h6>Información Básica</h6>
+                                        <p><strong>Paciente:</strong> ${consultation.patientName || consultation.patient_name || 'Desconocido'}</p>
+                                        <p><strong>Fecha:</strong> ${consultation.consultationDate || 'N/A'}</p>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <h6>Resultado</h6>
+                                        <p><strong>Diagnóstico:</strong>
+                                            <span class="badge ${consultation.diabeticRetinopathy ? 'badge-warning' : 'badge-success'}">
+                                                ${consultation.diabeticRetinopathy ? 'Positivo' : 'Negativo'}
+                                            </span>
+                                        </p>
+                                        <p><strong>Confianza:</strong> ${consultation.confidence || 'N/A'}%</p>
+                                    </div>
+                                </div>
+                                ${consultation.notes ? `
+                                <div class="card mb-3">
+                                    <div class="card-header">
+                                        <h6 class="card-title mb-0">Notas</h6>
+                                    </div>
+                                    <div class="card-body">
+                                        <p>${consultation.notes}</p>
+                                    </div>
+                                </div>` : ''}
+                                ${consultation.imagePath ? `
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h6 class="card-title mb-0">Imagen</h6>
+                                    </div>
+                                    <div class="card-body text-center">
+                                        <img src="${consultation.imagePath}" class="img-fluid" style="max-height: 300px;" alt="Imagen de retina">
+                                    </div>
+                                </div>` : ''}
                             </div>
-                            <div class="col">
-                                <p class="small text-muted mb-0">Mesa Número</p>
-                                <span class="h3 mb-0">${mesa.numero}</span>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                             </div>
                         </div>
                     </div>
                 </div>
-            `;
-            return div;
-        }
+                `;
+
+                $('body').append(modalHtml);
+                $('#consultationModal').modal('show');
+
+                $('#consultationModal').on('hidden.bs.modal', function() {
+                    $(this).remove();
+                });
+            }
 
-        function seleccionarMesa(numero) {
-            //alert(`Mesa ${numero} seleccionada`);
 
-            localStorage.setItem('mesaSeleccionada', numero);
-            window.location.href = 'factura.html';
+            function showErrorInTable(message) {
+                $('#recentConsultationsBody').html(`
+                    <tr>
+                        <td colspan="5" class="text-center text-danger">
+                            <i data-feather="alert-triangle" class="fe-16"></i><br>
+                            ${message || 'Error al cargar consultas'}
+                        </td>
+                    </tr>
+                `);
+            }
 
-        }
+            $(document).ready(function() {
+                loadRecentConsultations();
+            });
+
+            function createOrUpdateChart(dates, totalConsultations, positiveCases, negativeCases) {
+                if (areaChartInstance && typeof areaChartInstance.destroy === 'function') {
+                    try {
+                        areaChartInstance.destroy();
+                        areaChartInstance = null;
+                    } catch (error) {
+                        console.log('Error destruyendo grafico anterior:', error);
+                    }
+                }
+
+                const chartElement = document.querySelector("#areaChart");
+                if (!chartElement) {
+                    console.error('Elemento #areaChart no encontrado');
+                    return;
+                }
+
+                chartElement.innerHTML = '';
+
+                setTimeout(() => {
+                    try {
+                        const options = {
+                            chart: {
+                                type: 'area',
+                                height: 350,
+                                width: '100%',
+                                toolbar: {
+                                    show: true,
+                                    tools: {
+                                        download: false,
+                                        selection: false,
+                                        zoom: false,
+                                        zoomin: false,
+                                        zoomout: false,
+                                        pan: false,
+                                        reset: false
+                                    }
+                                },
+                                animations: {
+                                    enabled: true,
+                                    easing: 'easeinout',
+                                    speed: 800
+                                },
+                                background: 'transparent'
+                            },
+                            colors: ['#2E93fA', '#FF9800', '#66DA26'],
+                            series: [
+                                {
+                                    name: 'Total Consultas',
+                                    data: totalConsultations
+                                },
+                                {
+                                    name: 'Con Retinopatía',
+                                    data: positiveCases
+                                },
+                                {
+                                    name: 'Sin Retinopatía',
+                                    data: negativeCases
+                                }
+                            ],
+                            xaxis: {
+                                categories: dates,
+                                type: 'category',
+                                labels: {
+                                    formatter: function(value) {
+                                        if (value) {
+                                            try {
+                                                const date = new Date(value);
+                                                return date.toLocaleDateString('es-ES', {
+                                                    day: '2-digit',
+                                                    month: '2-digit'
+                                                });
+                                            } catch (e) {
+                                                return value;
+                                            }
+                                        }
+                                        return value;
+                                    },
+                                    style: {
+                                        fontSize: '12px',
+                                        fontFamily: 'inherit'
+                                    }
+                                },
+                                title: {
+                                    text: 'Fecha',
+                                    style: {
+                                        fontSize: '14px',
+                                        fontFamily: 'inherit'
+                                    }
+                                }
+                            },
+                            yaxis: {
+                                title: {
+                                    text: 'Número de Consultas',
+                                    style: {
+                                        fontSize: '14px',
+                                        fontFamily: 'inherit'
+                                    }
+                                },
+                                min: 0,
+                                labels: {
+                                    style: {
+                                        fontSize: '12px',
+                                        fontFamily: 'inherit'
+                                    }
+                                }
+                            },
+                            tooltip: {
+                                shared: true,
+                                intersect: false,
+                                x: {
+                                    formatter: function(value) {
+                                        if (value) {
+                                            try {
+                                                const date = new Date(value);
+                                                return date.toLocaleDateString('es-ES', {
+                                                    weekday: 'long',
+                                                    year: 'numeric',
+                                                    month: 'long',
+                                                    day: 'numeric'
+                                                });
+                                            } catch (e) {
+                                                return value;
+                                            }
+                                        }
+                                        return value;
+                                    }
+                                },
+                                y: {
+                                    formatter: function(value) {
+                                        return value + ' consulta' + (value !== 1 ? 's' : '');
+                                    }
+                                }
+                            },
+                            stroke: {
+                                curve: 'smooth',
+                                width: 2
+                            },
+                            fill: {
+                                type: 'gradient',
+                                gradient: {
+                                    shadeIntensity: 1,
+                                    opacityFrom: 0.7,
+                                    opacityTo: 0.3,
+                                    stops: [0, 90, 100]
+                                }
+                            },
+                            legend: {
+                                position: 'top',
+                                horizontalAlign: 'left',
+                                labels: {
+                                    colors: '#9aa0ac'
+                                }
+                            },
+                            grid: {
+                                borderColor: '#f1f1f1',
+                                strokeDashArray: 4,
+                                xaxis: {
+                                    lines: {
+                                        show: true
+                                    }
+                                },
+                                yaxis: {
+                                    lines: {
+                                        show: true
+                                    }
+                                }
+                            },
+                            dataLabels: {
+                                enabled: false
+                            },
+                            responsive: [{
+                                breakpoint: 768,
+                                options: {
+                                    chart: {
+                                        height: 300
+                                    },
+                                    legend: {
+                                        position: 'bottom'
+                                    }
+                                }
+                            }]
+                        };
+
+                        areaChartInstance = new ApexCharts(chartElement, options);
+
+                        areaChartInstance.render()
+                            .then(() => {
+                                console.log('Gráfico creado exitosamente');
+                            })
+                            .catch((error) => {
+                                console.error('Error renderizando gráfico:', error);
+                                createFallbackChart(chartElement, dates, totalConsultations, positiveCases, negativeCases);
+                            });
+
+                    } catch (error) {
+                        console.error('Error creando gráfico:', error);
+                        createFallbackChart(chartElement, dates, totalConsultations, positiveCases, negativeCases);
+                    }
+                }, 100);
+            }
+
+            function createFallbackChart(chartElement, dates, totalConsultations, positiveCases, negativeCases) {
+                console.log('Creando grafico de respaldo...');
+
+                const maxValue = Math.max(...totalConsultations, 1);
 
-        function abrirModalCrear() {
-          
-          document.getElementById('create-nombre').value = numLastTable + 1;
-
-          $('#createModal').modal('show');
-      }
-
-      async function crearMesa() {
-    try {
-        const nombre = document.getElementById('create-nombre').value.trim();
-        
-        const mesa = {
-            numero: parseInt(nombre)
-        };
-        
-        console.log('📤 Creando Mesa:', mesa);
-        
-        const response = await fetch(`${API_URL}/save`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(mesa)
+                let tableHtml = `
+                    <div class="fallback-chart p-3">
+                        <h6 class="text-muted mb-3">Datos de Consultas (Vista de Tabla)</h6>
+                        <div class="table-responsive">
+                            <table class="table table-sm table-hover">
+                                <thead class="thead-light">
+                                    <tr>
+                                        <th>Fecha</th>
+                                        <th>Total</th>
+                                        <th>Con RD</th>
+                                        <th>Sin RD</th>
+                                        <th>Gráfico</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                `;
+
+                dates.forEach((date, index) => {
+                    const total = totalConsultations[index] || 0;
+                    const positive = positiveCases[index] || 0;
+                    const negative = negativeCases[index] || 0;
+                    const percentage = maxValue > 0 ? (total / maxValue) * 100 : 0;
+
+                    const formattedDate = new Date(date).toLocaleDateString('es-ES', {
+                        day: '2-digit',
+                        month: '2-digit'
+                    });
+
+                    tableHtml += `
+                        <tr>
+                            <td>${formattedDate}</td>
+                            <td><span class="badge badge-primary">${total}</span></td>
+                            <td><span class="badge badge-warning">${positive}</span></td>
+                            <td><span class="badge badge-success">${negative}</span></td>
+                            <td>
+                                <div class="progress" style="height: 20px;">
+                                    <div class="progress-bar" role="progressbar" style="width: ${percentage}%"
+                                         aria-valuenow="${total}" aria-valuemin="0" aria-valuemax="${maxValue}">
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    `;
+                });
+
+                tableHtml += `
+                                </tbody>
+                            </table>
+                        </div>
+                        <small class="text-muted">
+                            <i data-feather="info" class="mr-1"></i>
+                            Vista alternativa - el gráfico principal no se pudo cargar
+                        </small>
+                    </div>
+                `;
+
+                chartElement.innerHTML = tableHtml;
+            }
+
+            function createEmptyChart() {
+                if (areaChartInstance && typeof areaChartInstance.destroy === 'function') {
+                    try {
+                        areaChartInstance.destroy();
+                        areaChartInstance = null;
+                    } catch (error) {
+                        console.log('Error destruyendo grafico:', error);
+                    }
+                }
+
+                const chartElement = document.querySelector("#areaChart");
+                if (chartElement) {
+                    chartElement.innerHTML = `
+                        <div class="d-flex justify-content-center align-items-center" style="height: 350px;">
+                            <div class="text-center text-muted">
+                                <i data-feather="bar-chart-2" class="fe-48 mb-3"></i>
+                                <h6>No hay datos disponibles</h6>
+                                <p class="small">Las consultas aparecerán aquí cuando se registren</p>
+                                <button class="btn btn-sm btn-outline-primary" onclick="insertSampleData()">
+                                    <i data-feather="plus" class="mr-1"></i>Generar datos de prueba
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                }
+            }
+
+            function loadRecentAnalysis() { return; /* legacy - no endpoint */ }
+
+            function updateRecentAnalysisTable() {
+                const tbody = $('#recentAnalysisTable');
+                tbody.empty();
+
+                if (recentAnalysis.length === 0) {
+                    tbody.append(`
+                        <tr>
+                            <td colspan="5" class="text-center text-muted">
+                                <i data-feather="inbox" class="fe-24 mb-2"></i><br>
+                                No hay análisis recientes
+                            </td>
+                        </tr>
+                    `);
+                    return;
+                }
+
+                recentAnalysis.reverse().forEach(function(analysis) {
+                    const resultClass = analysis.prediction.class_index === 1 ? 'badge-warning' : 'badge-success';
+                    const resultText = analysis.prediction.class_index === 1 ? 'Positivo' : 'Negativo';
+
+                    tbody.append(`
+                        <tr>
+                            <td>${moment(analysis.timestamp).format('DD/MM/YYYY HH:mm')}</td>
+                            <td>${analysis.filename}</td>
+                            <td><span class="badge ${resultClass}">${resultText}</span></td>
+                            <td>${analysis.prediction.confidence}%</td>
+                            <td>
+                                <button class="btn btn-sm btn-outline-primary" onclick="viewAnalysis('${analysis.filename}')">
+                                    <i data-feather="eye" class="fe-12"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    `);
+                });
+            }
+
+            function setupEventListeners() {
+                $('#logoutBtn').on('click', function(e) {
+                    e.preventDefault();
+                    handleLogout();
+                });
+
+                $('#refreshAgeDataBtn').on('click', function() {
+                    refreshAgeData();
+                });
+
+                $(document).on('click', '[onclick^="updateChartData"]', function(e) {
+                    e.preventDefault();
+                    const days = parseInt(this.getAttribute('onclick').match(/\d+/)[0]);
+                    updateChartData(days);
+                });
+
+                $('#imageInput').on('change', handleImageSelect);
+
+                $('#analyzeBtn').on('click', handleImageAnalysis);
+
+                $('#clearBtn').on('click', clearImagePreview);
+
+                $('#systemTestBtn').on('click', runSystemTest);
+
+                setupDragAndDrop();
+            }
+
+            function setupDragAndDrop() {
+            }
+
+            function handleImageSelect(e) {
+                const file = e.target.files[0];
+                if (file) {
+                    handleImageFile(file);
+                }
+            }
+
+            function handleImageFile(file) {
+                if (!file.type.startsWith('image/')) {
+                    showAlert('error', 'Por favor selecciona un archivo de imagen válido');
+                    return;
+                }
+
+                if (file.size > 10 * 1024 * 1024) {
+                    showAlert('error', 'La imagen es demasiado grande. Máximo 10MB');
+                    return;
+                }
+
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    $('#previewImg').attr('src', e.target.result);
+                    $('#imagePreview').show();
+                    $('#uploadZone').hide();
+                };
+                reader.readAsDataURL(file);
+
+                console.log('Imagen cargada:', file.name);
+            }
+
+            function handleImageAnalysis() {
+                const imgSrc = $('#previewImg').attr('src');
+                if (!imgSrc) return;
+
+                $('#analyzeBtn').prop('disabled', true).html('<i class="spinner-border spinner-border-sm mr-2"></i>Analizando...');
+
+                const fileName = $('#imageInput')[0].files[0]?.name || 'imagen_' + Date.now() + '.jpg';
+
+                api.predict(imgSrc, fileName).then(function(result) {
+                    $('#analyzeBtn').prop('disabled', false).html('<i data-feather="eye" class="mr-2"></i>Analizar con IA');
+
+                    if (result && result.success) {
+                        showAnalysisResults(result);
+                        // loadRecentAnalysis() - handled by loadRecentConsultations
+                    } else {
+                        showAlert('error', result?.error || 'Error en el análisis');
+                    }
+                });
+            }
+
+            function showAnalysisResults(result) {
+                const prediction = result.prediction;
+                const isPositive = prediction.class_index === 1;
+                const alertClass = isPositive ? 'alert-warning' : 'alert-success';
+                const iconClass = isPositive ? 'fe-alert-triangle' : 'fe-check-circle';
+                const resultText = isPositive ? 'Retinopatía Diabética Detectada' : 'No se Detectó Retinopatía Diabética';
+
+                const resultsHtml = `
+                    <div class="alert ${alertClass} d-flex align-items-center">
+                        <i class="fe ${iconClass} fe-24 mr-3"></i>
+                        <div>
+                            <h6 class="mb-1">${resultText}</h6>
+                            <p class="mb-0">Confianza: <strong>${prediction.confidence}%</strong></p>
+                            <small class="text-muted">Análisis realizado: ${result.timestamp}</small>
+                        </div>
+                    </div>
+                    ${isPositive ? `
+                    ` : ''}
+                `;
+
+                $('#resultContent').html(resultsHtml);
+                $('#analysisResults').show();
+
+                console.log('Analisis completado:', prediction.class);
+            }
+
+            function clearImagePreview() {
+                $('#imagePreview').hide();
+                $('#analysisResults').hide();
+                $('#uploadZone').show();
+                $('#imageInput').val('');
+            }
+
+            function runSystemTest() {
+                $('#systemTestBtn').prop('disabled', true).html('<i class="spinner-border spinner-border-sm mr-2"></i>Probando...');
+
+                api.getModelInfo().then(function(result) {
+                    $('#systemTestBtn').prop('disabled', false).html('<i data-feather="refresh-cw" class="fe-16 mr-2"></i>Probar Sistema');
+                    if (result && result.loaded) {
+                        showAlert('info', '• Modelo IA: SÍ\n• Base de datos: SÍ');
+                    } else {
+                        showAlert('error', 'Modelo no cargado');
+                    }
+                });
+            }
+
+            function handleLogout() {
+                if (confirm('¿Estás seguro que deseas cerrar sesión?')) {
+                    api.logout().then(() => { window.location.href = 'auth-login.html'; });
+                }
+            }
+
+            function redirectToLogin() {
+                window.location.href = 'auth-login.html';
+            }
+
+            function updateDateTime() {
+                const now = moment();
+                $('#currentDateTime').text(now.format('dddd, DD [de] MMMM [de] YYYY - HH:mm'));
+            }
+
+            function showAlert(type, message) {
+                const alertClass = {
+                    'success': 'alert-success',
+                    'error': 'alert-danger',
+                    'warning': 'alert-warning',
+                    'info': 'alert-info'
+                }[type] || 'alert-info';
+
+                const alertHtml = `
+                    <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
+                        ${message.replace(/\n/g, '<br>')}
+                        <button type="button" class="close" data-dismiss="alert">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                `;
+
+                $('.container-fluid').prepend(alertHtml);
+
+                setTimeout(() => {
+                    $('.alert').first().alert('close');
+                }, 5000);
+            }
+
+            function showErrorMessage(message) {
+                showAlert('error', message);
+            }
+
+            function showSystemError() {
+                $('#systemStatusIcon').removeClass('bg-success').addClass('bg-danger');
+                $('#systemStatusIcon i').removeClass('fe-check').addClass('fe-x');
+                $('#systemStatusText').text('Error de conexión');
+
+                showAlert('error', 'Error al conectar con el sistema. Verifica que el backend esté funcionando.');
+            }
+
+            function loadAgeRangesData() {
+                console.log('Cargando datos de rangos de edad...');
+
+                api.getPatients('').then(function(response) {
+                    if (!response || !response.success || !response.patients.length) {
+                        showEmptyAgeChart();
+                        return;
+                    }
+
+                    const patients = response.patients.filter(p => p.birthDate);
+                    if (!patients.length) { showEmptyAgeChart(); return; }
+
+                    // Calcular rangos de edad
+                    const ranges = {'0-20': 0, '21-40': 0, '41-60': 0, '61-80': 0, '80+': 0};
+                    let totalAge = 0, minAge = 999, maxAge = 0;
+
+                    patients.forEach(p => {
+                        const age = moment().diff(moment(p.birthDate), 'years');
+                        totalAge += age;
+                        if (age < minAge) minAge = age;
+                        if (age > maxAge) maxAge = age;
+                        if (age <= 20) ranges['0-20']++;
+                        else if (age <= 40) ranges['21-40']++;
+                        else if (age <= 60) ranges['41-60']++;
+                        else if (age <= 80) ranges['61-80']++;
+                        else ranges['80+']++;
+                    });
+
+                    const labels = Object.keys(ranges).filter(k => ranges[k] > 0);
+                    const data   = labels.map(k => ranges[k]);
+
+                    const chartData = { labels, data, total: patients.length };
+                    const avgAge = Math.round(totalAge / patients.length);
+
+                    updateAgeRangesChart({ chart_data: chartData });
+                    $('#avgAge').text(avgAge);
+                    $('#ageRange').text(minAge + '-' + maxAge);
+                    $('#totalPatientsAge').text(patients.length);
+                });
+            }
+
+            function updateAgeRangesChart(data) {
+                if (ageRangesChartInstance) {
+                    try {
+                        ageRangesChartInstance.destroy();
+                        ageRangesChartInstance = null;
+                    } catch (error) {
+                        console.log('Error destruyendo grafico anterior:', error);
+                    }
+                }
+
+                const chartElement = document.querySelector("#ageRangesChart");
+                if (!chartElement) {
+                    console.error('Elemento #ageRangesChart no encontrado');
+                    return;
+                }
+
+                chartElement.innerHTML = '';
+
+                const chartData = data.chart_data;
+
+                if (!chartData || !chartData.labels || chartData.labels.length === 0) {
+                    showEmptyAgeChart();
+                    return;
+                }
+
+                const colors = generateAgeRangeColors(chartData.labels.length);
+
+                const options = {
+                    chart: {
+                        type: 'donut',
+                        height: 300,
+                        toolbar: {
+                            show: false
+                        },
+                        animations: {
+                            enabled: true,
+                            easing: 'easeinout',
+                            speed: 800
+                        }
+                    },
+                    colors: colors,
+                    series: chartData.data,
+                    labels: chartData.labels.map(label => label + ' años'),
+                    legend: {
+                        position: 'bottom',
+                        fontSize: '12px',
+                        labels: {
+                            colors: '#9aa0ac'
+                        },
+                        markers: {
+                            width: 8,
+                            height: 8
+                        }
+                    },
+                    dataLabels: {
+                        enabled: true,
+                        formatter: function(val, opts) {
+                            const count = chartData.data[opts.seriesIndex];
+                            return count + '\n(' + Math.round(val) + '%)';
+                        },
+                        style: {
+                            fontSize: '10px',
+                            fontWeight: 'bold'
+                        }
+                    },
+                    plotOptions: {
+                        pie: {
+                            donut: {
+                                size: '65%',
+                                labels: {
+                                    show: true,
+                                    name: {
+                                        show: true,
+                                        fontSize: '14px',
+                                        fontWeight: 'bold',
+                                        color: '#373d3f'
+                                    },
+                                    value: {
+                                        show: true,
+                                        fontSize: '16px',
+                                        fontWeight: 'bold',
+                                        color: '#373d3f',
+                                        formatter: function(val) {
+                                            return val + ' pacientes';
+                                        }
+                                    },
+                                    total: {
+                                        show: true,
+                                        label: 'Total Pacientes',
+                                        fontSize: '12px',
+                                        color: '#9aa0ac',
+                                        formatter: function(w) {
+                                            return chartData.total;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    tooltip: {
+                        enabled: true,
+                        y: {
+                            formatter: function(value, { seriesIndex }) {
+                                const percentage = ((value / chartData.total) * 100).toFixed(1);
+                                return value + ' pacientes (' + percentage + '%)';
+                            }
+                        }
+                    },
+                    responsive: [{
+                        breakpoint: 480,
+                        options: {
+                            chart: {
+                                height: 250
+                            },
+                            legend: {
+                                position: 'bottom'
+                            }
+                        }
+                    }]
+                };
+
+                try {
+                    ageRangesChartInstance = new ApexCharts(chartElement, options);
+                    ageRangesChartInstance.render().then(() => {
+                        console.log('Grafico de rangos de edad creado exitosamente');
+                    }).catch((error) => {
+                        console.error('Error renderizando grafico de edad:', error);
+                        showEmptyAgeChart();
+                    });
+                } catch (error) {
+                    console.error('Error creando grafico de edad:', error);
+                    showEmptyAgeChart();
+                }
+            }
+
+            function populateAgeDetailsModal(data) {
+                if (!data.success) return;
+
+                api.getDashboardStats().then(function(response) {
+                    if (response && response.success) {
+                        const stats = response.detailed_analysis.statistics;
+                        const summary = data.summary;
+
+                        $('#modalAvgAge').text(stats.avg_age + ' años');
+                        $('#modalMedianAge').text(stats.median_age + ' años');
+
+                        if (summary.most_affected_range) {
+                            $('#mostAffectedRange').text(summary.most_affected_range[0] + ' años');
+                            $('#mostAffectedCount').text(summary.most_affected_range[1] + ' pacientes');
+                        }
+
+                        const tbody = $('#ageDistributionTable tbody');
+                        tbody.empty();
+
+                        const total = data.chart_data.total;
+                        Object.entries(data.filtered_ranges).forEach(([range, count]) => {
+                            const percentage = ((count / total) * 100).toFixed(1);
+                            const barWidth = Math.max((count / total) * 100, 5);
+
+                            tbody.append(`
+                                <tr>
+                                    <td>${range} años</td>
+                                    <td><strong>${count}</strong></td>
+                                    <td>${percentage}%</td>
+                                    <td>
+                                        <div class="progress" style="height: 20px;">
+                                            <div class="progress-bar bg-primary" style="width: ${barWidth}%"></div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            `);
+                        });
+                    }
+                });
+            }
+
+            function updateAgeStatistics(data) {
+                if (!data || !data.success) return;
+
+                api.getDashboardStats().then(function(response) {
+                    if (response && response.success && response.detailed_analysis) {
+                        const stats = response.detailed_analysis.statistics;
+
+                        $('#avgAge').text(stats.avg_age || '-');
+                        $('#ageRange').text(stats.min_age && stats.max_age ?
+                            stats.min_age + '-' + stats.max_age : '-');
+                        $('#totalPatientsAge').text(stats.total_patients || '-');
+                    }
+                });
+            }
+
+            function generateAgeRangeColors(count) {
+                const baseColors = [
+                    '#E3F2FD', //(0-10)
+                    '#BBDEFB', //(11-20)
+                    '#90CAF9', //(21-30)
+                    '#64B5F6', //(31-40)
+                    '#42A5F5', //(41-50)
+                    '#2196F3', //(51-60)
+                    '#1E88E5', //(61-70)
+                    '#1976D2', //(71-80)
+                    '#1565C0', //(81-90)
+                    '#0D47A1'  //(91+)
+                ];
+
+                return baseColors.slice(0, count);
+            }
+
+            function showEmptyAgeChart() {
+                const chartElement = document.querySelector("#ageRangesChart");
+                if (chartElement) {
+                    chartElement.innerHTML = `
+                        <div class="d-flex justify-content-center align-items-center" style="height: 300px;">
+                            <div class="text-center text-muted">
+                                <i data-feather="users" class="fe-48 mb-3"></i>
+                                <h6>No hay datos de edad</h6>
+                                <p class="small">Los rangos de edad aparecerán cuando haya<br>pacientes con retinopatía diabética</p>
+                            </div>
+                        </div>
+                    `;
+                }
+
+                $('#avgAge').text('-');
+                $('#ageRange').text('-');
+                $('#totalPatientsAge').text('-');
+            }
+
+            window.viewAnalysis = function(filename) {
+                const analysis = recentAnalysis.find(a => a.filename === filename);
+                if (analysis) {
+                    showAnalysisDetails(analysis);
+                }
+            };
+
+            function showAnalysisDetails(analysis) {
+                const modal = `
+                    <div class="modal fade" id="analysisModal" tabindex="-1">
+                        <div class="modal-dialog modal-lg">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title">Detalles del Análisis</h5>
+                                    <button type="button" class="close" data-dismiss="modal">
+                                        <span>&times;</span>
+                                    </button>
+                                </div>
+                                <div class="modal-body">
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <h6>Información General</h6>
+                                            <p><strong>Archivo:</strong> ${analysis.filename}</p>
+                                            <p><strong>Fecha:</strong> ${moment(analysis.timestamp).format('DD/MM/YYYY HH:mm')}</p>
+                                            <p><strong>Resultado:</strong> ${analysis.prediction.class}</p>
+                                            <p><strong>Confianza:</strong> ${analysis.prediction.confidence}%</p>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <h6>Datos Técnicos</h6>
+                                            <p><strong>Raw Output:</strong> ${analysis.prediction.raw_output}</p>
+                                            <p><strong>Clase Predicha:</strong> ${analysis.prediction.class_index}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+
+                $('body').append(modal);
+                $('#analysisModal').modal('show');
+                $('#analysisModal').on('hidden.bs.modal', function() {
+                    $(this).remove();
+                });
+            }
+
+            window.updateChartData = updateChartData;
         });
-        
-        const resultado = await response.json();
-        
-        // ✅ Verificar solo response.ok, no resultado.success
-        if (!response.ok) {
-            throw new Error(resultado.message || 'Error al crear la mesa');
+    </script>
+    <script>
+        function confirmLogout() {
+            executeLogout();
         }
-        
-        console.log('✅ Mesa creada:', resultado);
-        $('#createModal').modal('hide');
-        await cargarMesas();
-        
-    } catch (error) {
-        console.error('❌ Error al crear:', error);
-        alert('❌ Error: ' + error.message);
-    }
-}
 
+        function executeLogout() {
+            api.logout().then(() => { window.location.href = 'auth-login.html'; });
+        }
+    </script>
+
+    <script>
+        (function() {
+            function centerWindow() {
+                try {
+                    const screenWidth = window.screen.availWidth;
+                    const screenHeight = window.screen.availHeight;
+                    const x = Math.floor((screenWidth - 1200) / 2);
+                    const y = Math.floor((screenHeight - 800) / 2);
 
+                    if (window.moveTo) {
+                        window.moveTo(Math.max(0, x), Math.max(0, y));
+                    }
+                } catch (e) {
+                    console.warn('No se pudo centrar ventana:', e);
+                }
+            }
+
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', centerWindow);
+            } else {
+                centerWindow();
+            }
+
+            window.addEventListener('load', centerWindow);
+            window.addEventListener('focus', centerWindow);
+        })();
     </script>
 
     <script>
-      /* ============================================================
-         DARK / LIGHT MODE SWITCHER
-         Usa los CSS ya existentes: app-light.css y app-dark.css
-         El ícono del botón (#modeSwitcher) alterna entre fe-sun / fe-moon
-      ============================================================ */
-      (function () {
-        var STORAGE_KEY = 'appTheme';
-        var lightTheme  = document.getElementById('lightTheme');
-        var darkTheme   = document.getElementById('darkTheme');
-        var body        = document.body;
-        var btn         = document.getElementById('modeSwitcher');
-
-        // Ícono: sun = modo claro activo (click → pasar a oscuro)
-        //        moon = modo oscuro activo (click → pasar a claro)
-        var ICONS = { light: 'fe-sun', dark: 'fe-moon' };
-
-        function applyTheme(mode) {
-          if (mode === 'dark') {
-            lightTheme.disabled = true;
-            darkTheme.disabled  = false;
-            body.classList.remove('light');
-            body.classList.add('dark');
-            if (btn) {
-              btn.setAttribute('data-mode', 'dark');
-              btn.querySelector('i').className = 'fe fe-moon fe-16';
-            }
-          } else {
-            darkTheme.disabled  = true;
-            lightTheme.disabled = false;
-            body.classList.remove('dark');
-            body.classList.add('light');
-            if (btn) {
-              btn.setAttribute('data-mode', 'light');
-              btn.querySelector('i').className = 'fe fe-sun fe-16';
-            }
-          }
-          localStorage.setItem(STORAGE_KEY, mode);
+        function checkUserRoleAndHideNavigation() {
+            api.getSession().then(function(response) {
+                if (response.success && response.user) {
+                    const userRole = response.user.role;
+                    const usersNavItem = document.querySelector('a[href="./users.html"]');
+
+                    if (usersNavItem) {
+                        const navItemContainer = usersNavItem.closest('li.nav-item');
+
+                        if (userRole === 'Admin') {
+                            if (navItemContainer) {
+                                navItemContainer.style.display = 'block';
+                            }
+                            console.log('Navegacion de usuarios visible para administrador:', response.user.username);
+                        } else {
+                            if (navItemContainer) {
+                                navItemContainer.style.display = 'none';
+                            }
+                            console.log('Navegacion de usuarios oculta para usuario:', response.user.username, '(Rol:', userRole + ')');
+                        }
+                    } else {
+                        console.warn('No se encontró el elemento de navegación de usuarios');
+                    }
+                } else {
+                    console.warn('No se pudo obtener información del usuario actual');
+                }
+            });
+        }
+
+        function checkUsersPageAccess() {
+            if (window.location.pathname.includes('users.html') || window.location.href.includes('users.html')) {
+                api.getSession().then(function(response) {
+                    if (!response.success) {
+                        window.location.href = 'auth-login.html';
+                        return;
+                    }
+
+                    if (response.user.role !== 'Admin') {
+                        alert('Acceso Denegado\n\nSolo los administradores pueden gestionar usuarios.');
+                        window.location.href = 'index.html';
+                        return;
+                    }
+                });
+            }
         }
 
-        // Aplicar tema guardado al cargar
-        var saved = localStorage.getItem(STORAGE_KEY) || 'light';
-        applyTheme(saved);
-
-        // Click en el botón del topnav
-        if (btn) {
-          btn.addEventListener('click', function (e) {
-            e.preventDefault();
-            var current = localStorage.getItem(STORAGE_KEY) || 'light';
-            applyTheme(current === 'light' ? 'dark' : 'light');
-          });
+        $(document).ready(function() {
+            setTimeout(() => {
+                checkUserRoleAndHideNavigation();
+                checkUsersPageAccess();
+            }, 100);
+        });
+
+        function updateNavigationForUser() {
+            checkUserRoleAndHideNavigation();
         }
-      })();
+
+        function updateUserInfo() {
+            api.getSession().then(function(response) {
+                if (response.success && response.user) {
+                    const userDropdown = document.querySelector('#navbarDropdownMenuLink');
+                    if (userDropdown) {
+                        const userRole = response.user.role;
+                        const roleBadge = userRole === 'Admin' ?
+                            '<span class="badge badge-primary badge-sm ml-1">Admin</span>' :
+                            '<span class="badge badge-secondary badge-sm ml-1">Doctor</span>';
+
+                        const existingBadge = userDropdown.querySelector('.badge');
+                        if (!existingBadge) {
+                            userDropdown.innerHTML += roleBadge;
+                        }
+                    }
+                }
+            });
+        }
+
+        $(document).ready(function() {
+            setTimeout(() => {
+                updateUserInfo();
+            }, 200);
+        });
     </script>
+<script>
+    // Feather Icons: reemplaza <i data-feather="X"> con SVG inline
+    // Inmune a problemas de fuentes locales
+    function _initFeather() {
+        if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
+    }
+    document.addEventListener('DOMContentLoaded', _initFeather);
+    // Re-render al inyectar HTML dinámico (modals, cards, tablas)
+    var _fObserver = new MutationObserver(function(mutations) {
+        var needsRefresh = mutations.some(function(m) {
+            return m.addedNodes.length > 0;
+        });
+        if (needsRefresh) _initFeather();
+    });
+    document.addEventListener('DOMContentLoaded', function() {
+        _fObserver.observe(document.body, { childList: true, subtree: true });
+    });
+</script>
+</body>
+</html>
+
+
 
-  </body>
-</html>
\ No newline at end of file
