diff --git a/PAGINA WEB/ASISTENCIA/cambios-as.css b/PAGINA WEB/ASISTENCIA/cambios-as.css
new file mode 100644
index 0000000..45c7a0f
--- /dev/null
+++ b/PAGINA WEB/ASISTENCIA/cambios-as.css	
@@ -0,0 +1,867 @@
+:root {
+    --primary: #2c3e50;
+    --secondary: #3498db;
+    --accent: #ff9900;
+    --light: #ecf0f1;
+    --dark: #2c3e50;
+    --success: #2ecc71;
+    --warning: #f39c12;
+    --info: #1abc9c;
+    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --transition: all 0.3s ease;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    background-color: #f5f7fa;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Formulario de registro de estudiantes */
+.form-container {
+    background-color: #ffffff;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 30px;
+}
+
+.form-container h3 {
+    margin-bottom: 20px;
+}
+
+/* Navbar superior */
+.navbar {
+    background: linear-gradient(135deg, var(--primary) 0%, #1a2a3a 100%);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1030;
+    padding: 12px 25px;
+    height: 70px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.navbar-brand {
+    font-weight: 100;
+    font-size: 1.8rem;
+    letter-spacing: 1px;
+    color: white !important;
+    display: flex;
+    align-items: center;
+}
+
+.navbar-brand i {
+    margin-right: 10px;
+    color: var(--accent);
+}
+
+/* Sidebar izquierdo */
+.sidebar {
+    width: 250px;
+    background: linear-gradient(180deg, var(--primary) 0%, #1a2a3a 100%);
+    position: fixed;
+    top: 70px;
+    bottom: 0;
+    left: 0;
+    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
+    transition: var(--transition);
+    z-index: 1020;
+    overflow-y: auto;
+}
+
+.sidebar h2 {
+    margin: 20px 0;
+    font-size: 1.4rem;
+    text-align: center;
+    color: var(--light);
+    padding: 15px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+    font-weight: 600;
+}
+
+.sidebar .menu {
+    padding: 0;
+}
+
+.sidebar .menu li {
+    overflow: hidden;
+}
+
+.sidebar .menu li a,
+.sidebar .menu li summary {
+    color: var(--light);
+    text-decoration: none;
+    font-size: 1rem;
+    padding: 14px 20px;
+    display: block;
+    transition: var(--transition);
+    border-left: 4px solid transparent;
+    font-weight: 500;
+    padding-left: 18px !important;
+}
+
+.sidebar .menu li a:hover,
+.sidebar .menu li summary:hover,
+.sidebar .menu li a.active {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-left-color: var(--accent);
+}
+
+.sidebar .menu li a i,
+.sidebar .menu li summary i {
+    width: 25px;
+    text-align: center;
+    margin-right: 12px;
+    font-size: 1.1rem;
+}
+
+.sidebar .submenu {
+    background-color: rgba(0, 0, 0, 0.15);
+    padding: 0;
+}
+
+.sidebar .submenu li a {
+    font-size: 0.95rem;
+}
+
+.sidebar .submenu li a:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Panel de contenido principal */
+.main-content {
+    margin-left: 250px;
+    margin-top: 70px;
+    padding: 30px;
+    flex: 1;
+    transition: var(--transition);
+}
+
+.suboption-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+/* Secciones de contenido */
+.dashboard,
+.gestion-estudiante,
+.gestion-docente,
+.gestion-curso,
+.reporte,
+.configuracion {
+    display: none;
+}
+
+.dashboard {
+    display: block;
+}
+
+/* Títulos de sección */
+.section-title {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 30px;
+    color: var(--primary);
+    position: relative;
+}
+
+/* Tarjetas */
+.dashboard-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 25px;
+    margin-bottom: 40px;
+}
+
+.card {
+    background: white;
+    border: none;
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: var(--card-shadow);
+    transition: var(--transition);
+    position: relative;
+    overflow: hidden;
+}
+
+.card:hover {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background: var(--accent);
+}
+
+.card h3 {
+    font-size: 1.1rem;
+    margin-bottom: 15px;
+    color: #555;
+    font-weight: 600;
+}
+
+.card p {
+    font-size: 2.3rem;
+    font-weight: 700;
+    color: var(--secondary);
+    margin: 0;
+}
+
+.card small {
+    display: block;
+    color: #777;
+    font-size: 0.95rem;
+    margin-top: 5px;
+}
+
+/* Gráficos */
+.dashboard-charts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 30px;
+    margin-bottom: 40px;
+}
+
+.chart-container {
+    background: white;
+    border: none;
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: var(--card-shadow);
+}
+
+.chart-container h4 {
+    font-size: 1.25rem;
+    margin-bottom: 25px;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 600;
+}
+
+.chart-container h4 i {
+    color: var(--accent);
+    background: rgba(231, 76, 60, 0.1);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Tablas y actividades */
+.recent-activities {
+    background: white;
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: var(--card-shadow);
+}
+
+.recent-activities h3 {
+    font-size: 1.35rem;
+    margin-bottom: 25px;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 600;
+}
+
+.recent-activities h3 i {
+    color: var(--accent);
+    background: rgba(231, 76, 60, 0.1);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Botones personalizados */
+.btn-custom {
+    padding: 10px 25px;
+    background: linear-gradient(135deg, var(--secondary) 0%, #2980b9 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: var(--transition);
+    font-weight: 500;
+}
+
+.btn-custom:hover {
+    background: linear-gradient(135deg, #2980b9 0%, #1a5a8a 100%);
+    background-color: #0056b3;
+    color: #fff;
+}
+
+.dataTables_length {
+    padding: 5px 10px;
+}
+
+/* Responsividad */
+@media (max-width: 1200px) {
+    .dashboard-charts {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    }
+}
+
+/* Nuevos estilos para el navbar */
+.navbar-icons {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-right: 20px;
+}
+
+.notification-icon,
+.chat-icon {
+    position: relative;
+    color: white;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.notification-icon:hover,
+.chat-icon:hover {
+    color: var(--accent);
+}
+
+.notification-badge {
+    position: absolute;
+    top: -5px;
+    right: -8px;
+    background-color: var(--accent);
+    color: white;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Perfil de usuario en sidebar */
+.profile-section {
+    padding: 20px 15px;
+    text-align: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.profile-img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid var(--accent);
+    margin-bottom: 15px;
+}
+
+.profile-name {
+    color: var(--light);
+    font-size: 1.1rem;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
+.profile-role {
+    color: var(--accent);
+    font-size: 0.9rem;
+    margin-bottom: 0;
+}
+
+/* Ajuste para acomodar el perfil */
+.sidebar h2 {
+    margin: 10px 0;
+}
+
+/* Otros ajustes menores */
+.navbar-brand {
+    font-size: 1.6rem;
+    /* Ligeramente más pequeño */
+}
+
+.config-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.config-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid var(--primary);
+}
+
+.config-card {
+    background: white;
+    border-radius: 12px;
+    box-shadow: var(--card-shadow);
+    margin-bottom: 25px;
+    height: 100%;
+    transition: var(--transition);
+    overflow: hidden;
+}
+
+.card-header {
+    padding: 18px 25px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.card-body {
+    padding: 25px;
+}
+
+.config-card:hover {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.form-control-lg {
+    border-radius: 8px;
+    border: 1px solid #ddd;
+}
+
+.form-control-lg:focus {
+    border-color: var(--secondary);
+    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
+}
+
+.btn-lg {
+    padding: 12px 25px;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.btn-info {
+    background: linear-gradient(135deg, var(--info) 0%, #16a085 100%);
+    border: none;
+    color: white;
+}
+
+.btn-info:hover {
+    background: linear-gradient(135deg, #16a085 0%, #138a72 100%);
+}
+
+.btn-warning {
+    background: linear-gradient(135deg, var(--warning) 0%, #e67e22 100%);
+    border: none;
+    color: white;
+}
+
+.btn-warning:hover {
+    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary) 0%, #1a2a3a 100%);
+    border: none;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, #1a2a3a 0%, #0e1a25 100%);
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, var(--secondary) 0%, #2980b9 100%);
+    border: none;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: linear-gradient(135deg, #2980b9 0%, #1a5a8a 100%);
+}
+
+.progress {
+    height: 10px;
+    border-radius: 5px;
+}
+
+.progress-bar {
+    background: var(--secondary);
+}
+
+.config-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.system-card {
+    grid-column: span 3;
+}
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 30px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider {
+    background-color: var(--success);
+}
+
+input:checked+.slider:before {
+    transform: translateX(30px);
+}
+
+.switch-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 0;
+    border-bottom: 1px solid #eee;
+}
+
+.switch-label {
+    flex: 1;
+}
+
+.system-metric {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 12px;
+    background: #f8f9fa;
+    border-radius: 8px;
+}
+
+.metric-label {
+    font-weight: 500;
+}
+
+.metric-value {
+    font-weight: 600;
+    color: var(--primary);
+}
+
+.theme-selector {
+    border: 2px solid transparent;
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.theme-selector:hover,
+.theme-selector.active {
+    border-color: var(--accent);
+    background: rgba(255, 153, 0, 0.05);
+}
+
+.theme-selector i {
+    font-size: 2.5rem;
+    margin-bottom: 15px;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+.status-active {
+    background: rgba(46, 204, 113, 0.15);
+    color: var(--success);
+}
+
+.status-warning {
+    background: rgba(243, 156, 18, 0.15);
+    color: var(--warning);
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: var(--primary);
+}
+
+.card-subtitle {
+    color: #777;
+    margin-bottom: 20px;
+}
+
+/* Estilos para modo oscuro */
+body.theme-dark {
+    background-color: #18191a;
+    color: #e4e6eb;
+}
+
+body.theme-dark .navbar {
+    background: linear-gradient(135deg, #242526 0%, #18191a 100%);
+}
+
+body.theme-dark .sidebar {
+    background: linear-gradient(180deg, #242526 0%, #18191a 100%);
+}
+
+body.theme-dark .card,
+body.theme-dark .chart-container,
+body.theme-dark .recent-activities,
+body.theme-dark .form-container,
+body.theme-dark .config-card {
+    background-color: #242526;
+    color: #e4e6eb;
+    border: 1px solid #3a3b3c;
+}
+
+body.theme-dark .table {
+    color: #e4e6eb;
+}
+
+body.theme-dark .table thead {
+    background-color: #3a3b3c;
+}
+
+body.theme-dark .table-hover tbody tr:hover {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+}
+
+body.theme-dark .section-title {
+    color: #e4e6eb;
+}
+
+body.theme-dark .card h3,
+body.theme-dark .card p,
+body.theme-dark .card small {
+    color: #e4e6eb;
+}
+
+body.theme-dark .card small {
+    color: #b0b3b8;
+}
+
+body.theme-dark .form-control,
+body.theme-dark .form-select {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+    border: 1px solid #3a3b3c;
+}
+
+body.theme-dark .form-control:focus,
+body.theme-dark .form-select:focus {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+    border-color: #4a4b4c;
+    box-shadow: 0 0 0 0.25rem rgba(65, 66, 68, 0.25);
+}
+
+body.theme-dark .dropdown-menu {
+    background-color: #242526;
+    border: 1px solid #3a3b3c;
+}
+
+body.theme-dark .dropdown-item {
+    color: #e4e6eb;
+}
+
+body.theme-dark .dropdown-item:hover {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+}
+
+body.theme-dark .progress {
+    background-color: #3a3b3c;
+}
+
+body.theme-dark .dt-buttons .btn {
+    background-color: #3a3b3c !important;
+    color: #e4e6eb !important;
+    border: 1px solid #4a4b4c !important;
+}
+
+body.theme-dark .config-card .card-header {
+    color: #e4e6eb;
+}
+
+body.theme-dark .switch-label h6,
+body.theme-dark .metric-label,
+body.theme-dark .metric-value {
+    color: #e4e6eb;
+}
+
+body.theme-dark .form-control-color {
+    background-color: #3a3b3c;
+}
+
+body.theme-dark {
+    --light: #e4e6eb;
+    --dark: #b0b3b8;
+}
+
+#theme-toggle i {
+    transition: color 0.3s ease;
+}
+
+@media (max-width: 1200px) {
+    .config-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .system-card {
+        grid-column: span 2;
+    }
+}
+
+@media (max-width: 992px) {
+    .sidebar {
+        width: 70px;
+    }
+
+    .sidebar h2 span,
+    .sidebar .menu li a span,
+    .sidebar .menu li summary span {
+        display: none;
+    }
+
+    .sidebar h2 {
+        font-size: 1.8rem;
+        padding: 15px 0;
+    }
+
+    .sidebar .menu li a,
+    .sidebar .menu li summary {
+        text-align: center;
+        padding: 15px 10px;
+    }
+
+    .sidebar .menu li a i,
+    .sidebar .menu li summary i {
+        margin-right: 0;
+        font-size: 1.4rem;
+        display: block;
+        margin: 0 auto 5px;
+    }
+
+    .sidebar .submenu {
+        position: absolute;
+        left: 70px;
+        width: 200px;
+        display: none;
+    }
+
+    .sidebar .menu li details[open] .submenu {
+        display: block;
+    }
+
+    .main-content {
+        margin-left: 70px;
+    }
+
+    .dashboard-charts {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .main-content {
+        padding: 20px;
+    }
+
+    .dashboard-cards {
+        grid-template-columns: 1fr;
+    }
+
+    .config-row {
+        grid-template-columns: 1fr;
+    }
+
+    .system-card {
+        grid-column: span 1;
+    }
+
+    .config-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+}
+
+@media (max-width: 576px) {
+    .navbar {
+        padding: 10px 15px;
+    }
+
+    .navbar-brand {
+        font-size: 1.5rem;
+    }
+}
+
+#calendar {
+    background: #fff;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: var(--card-shadow);
+}
+.fc-toolbar-title {
+    font-size: 1.5rem;
+    color: var(--primary);
+}
+.fc-daygrid-event {
+    border: none;
+    padding: 3px 6px;
+    border-radius: 6px;
+    font-weight: 500;
+}
\ No newline at end of file
diff --git a/PAGINA WEB/ASISTENCIA/cambios-as.html b/PAGINA WEB/ASISTENCIA/cambios-as.html
new file mode 100644
index 0000000..6a42e4a
--- /dev/null
+++ b/PAGINA WEB/ASISTENCIA/cambios-as.html	
@@ -0,0 +1,842 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PRODIGIOS - Academia de Música</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
+    <link rel="stylesheet" href="cambios-as.css">
+    
+</head>
+<body>
+    <!-- Navbar superior -->
+    <header class="navbar">
+        <div class="container-fluid d-flex justify-content-between align-items-center">
+            <span class="navbar-brand">Bienvenido!</span>
+            <div class="d-flex align-items-center">
+                <div class="navbar-icons">
+                    <div class="notification-icon mx-2" id="theme-toggle" title="Cambiar tema">
+                        <i id="theme-icon" class="fas fa-moon"></i>
+                    </div>
+                    <div class="notification-icon">
+                        <i class="fa-solid fa-bell"></i>
+                        <span class="notification-badge">0</span>
+                    </div>
+                    <div class="chat-icon">
+                        <i class="fa-solid fa-comment-dots"></i>
+                        <span class="notification-badge">0</span>
+                    </div>
+                </div>
+                <div class="dropdown">
+                    <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
+                        <i class="fa-solid fa-user-circle fa-xl"></i>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end shadow">
+                        <li><a class="dropdown-item" href=""><i class="fa-solid fa-user me-2"></i>Perfil</a></li>
+                        <li><a class="dropdown-item" href=""><i class="fa-solid fa-gear me-2"></i>Configuración</a></li>
+                        <li><hr class="dropdown-divider"></li>
+                        <li><a class="dropdown-item" href="" id="logoutBtn"><i class="fa-solid fa-right-from-bracket me-2"></i>Cerrar Sesión</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </header>
+    
+    <!-- Sidebar izquierdo -->
+    <aside class="sidebar">
+        
+        <h2><span>PRODIGIOS</span></h2>
+        <div class="profile-section">
+            <img src="user.jpg" alt="Foto de perfil" class="profile-img">
+            <h4 class="profile-name">Luis Miguel Roque Huacca</h4>
+            <p class="profile-role">Administrador</p>
+        </div>
+        <ul class="menu">
+            <li><a href="#" class="active" onclick="toggleVisibility('dashboard', null, 'Dashboard')"><i class="fa-solid fa-house"></i><span>Dashboard</span></a></li>
+            <li><a href="#" onclick="toggleVisibility('asistencia', null, 'Lista de Asistencia')"><i class="fa-solid fa-clipboard-list"></i><span>Asistencia</span></a></li>
+            <li><a href="#" onclick="toggleVisibility('calendario', null, 'Calendario')"><i class="fa-solid fa-calendar-days"></i></i><span>Calendario</span></a></li>
+
+            <li>
+                <details>
+                    <summary><i class="fa-solid fa-pen-to-square"></i><span>Registro</span></summary>
+                    <ul class="submenu">
+                        <li><a href="#" onclick="toggleVisibility(null, 'curso', 'Registro de Cursos')"><i class="fa-solid fa-book"></i><span>Registrar Curso</span></a></li>
+                        <li><a href="#" onclick="toggleVisibility(null, 'docente', 'Registro de Docentes')"><i class="fa-solid fa-chalkboard-user"></i><span>Registrar Docente</span></a></li>
+                        <li><a href="#" onclick="toggleVisibility(null, 'estudiante', 'Registro de Estudiantes')"><i class="fa-solid fa-user-graduate"></i><span>Registrar Estudiante</span></a></li>
+                    </ul>
+                </details>
+            </li>
+            <li><a href="#" onclick="toggleVisibility('reporte', null, 'Reportes')"><i class="fa-solid fa-chart-pie"></i><span>Reportes</span></a></li>
+            <li><a href="#" onclick="toggleVisibility('configuracion', null, 'Configuración')"><i class="fa-solid fa-gear"></i><span>Configuración</span></a></li>
+        </ul>
+    </aside>
+
+    
+    <main class="main-content">
+        <div class="suboption-panel" id="suboption-panel">
+
+            <!-- Dashboard Section -->
+            <div class="dashboard">
+                <h2 class="section-title">Panel de Control</h2>
+                <div class="dashboard-cards">
+                    <div class="card">
+                        <h3><i class="fa-solid fa-user-graduate me-2"></i> Estudiantes Registrados</h3>
+                        <p id="total-estudiantes">0</p>
+                        <small>Total en el sistema</small>
+                    </div>
+                    <div class="card">
+                        <h3><i class="fa-solid fa-chalkboard-user me-2"></i> Docentes Activos</h3>
+                        <p id="total-docentes">0</p>
+                        <small>Enseñando actualmente</small>
+                    </div>
+                    <div class="card">
+                        <h3><i class="fa-solid fa-book"></i> Cursos Disponibles</h3>
+                        <p id="total-cursos">0</p>
+                        <small>Ofertados este semestre</small>
+                    </div>
+                    <div class="card">
+                        <h3><i class="fa-solid fa-calendar-check me-2"></i> Clases Esta Semana</h3>
+                        <p>42</p>
+                        <small>Programadas</small>
+                    </div>
+                </div>
+                
+                <div class="dashboard-charts">
+                    <div class="chart-container">
+                        <h4><i class="fa-solid fa-chart-pie"></i> Distribución por Niveles</h4>
+                        <canvas id="nivelEstudiantesChart" height="280"></canvas>
+                    </div>
+                    <div class="chart-container">
+                        <h4><i class="fa-solid fa-chart-bar"></i> Cursos por Categoría</h4>
+                        <canvas id="categoriaCursosChart" height="280"></canvas>
+                    </div>
+                    <div class="chart-container">
+                        <h4><i class="fa-solid fa-chart-line"></i> Estudiantes por Curso</h4>
+                        <canvas id="estudiantesPorCursoChart" height="280"></canvas>
+                    </div>
+                </div>
+                
+                <div class="recent-activities">
+                    <h3><i class="fa-solid fa-clock-rotate-left"></i> Actividades Recientes</h3>
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle ">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>Fecha</th>
+                                    <th>Descripción</th>
+                                    <th>Usuario</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tabla-actividades">
+                                <tr>
+                                    <td>2023-11-15</td>
+                                    <td>Nuevo estudiante registrado: María Rodríguez</td>
+                                    <td>Admin</td>
+                                </tr>
+                                <tr>
+                                    <td>2023-11-14</td>
+                                    <td>Curso de Piano Avanzado creado</td>
+                                    <td>Admin</td>
+                                </tr>
+                                <tr>
+                                    <td>2023-11-13</td>
+                                    <td>Pago registrado: Carlos Mendoza</td>
+                                    <td>Admin</td>
+                                </tr>
+                                <tr>
+                                    <td>2023-11-12</td>
+                                    <td>Actualización de horarios</td>
+                                    <td>Admin</td>
+                                </tr>
+                                <tr>
+                                    <td>2023-11-10</td>
+                                    <td>Nueva docente: Laura Méndez</td>
+                                    <td>Admin</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <!--Estudent section-->
+            <div class="gestion-estudiante">
+                <!-- Formulario para ingresar datos -->
+                <div class="form-container">
+                    <h3 class="section-title">Registrar Nuevo Estudiante</h3>
+                    <div class="row g-3">
+                        <div class="col-md-4">
+                            <label for="nombre" class="form-label">Nombre</label>
+                            <input type="text" id="nombre" class="form-control" placeholder="Ingrese el nombre completo">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="dni" class="form-label">DNI</label>
+                            <input type="text" id="dni" class="form-control" placeholder="Ingrese el DNI">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="fecha_nacimiento" class="form-label">Fecha de Nacimiento</label>
+                            <input type="date" id="fecha_nacimiento" class="form-control">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="direccion" class="form-label">Dirección</label>
+                            <input type="text" id="direccion" class="form-control" placeholder="Ingrese la dirección">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="contacto" class="form-label">Contacto</label>
+                            <input type="text" id="contacto" class="form-control" placeholder="Ingrese un número de contacto">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="curso" class="form-label">Curso</label>
+                            <select id="curso" class="form-select">
+                                <option value="" disabled selected>Seleccione un curso</option>
+                                <option value="Guitarra">Guitarra</option>
+                                <option value="Canto">Canto</option>
+                                <option value="Piano">Piano</option>
+                                <option value="Ukelele">Ukelele</option>
+                                <option value="Requinto">Requinto</option>
+                                <option value="Violin">Violin</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="nivel" class="form-label">Nivel</label>
+                            <select id="nivel" class="form-select">
+                                <option value="" disabled selected>Seleccione un nivel</option>
+                                <option value="Principiante">Principiante</option>
+                                <option value="Intermedio">Intermedio</option>
+                                <option value="Avanzado">Avanzado</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="horario" class="form-label">Horario</label>
+                            <input type="text" id="horario" class="form-control" placeholder="Ingrese el horario">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="estado" class="form-label">Estado</label>
+                            <select id="estado" class="form-select">
+                                <option value="" disabled selected>Seleccione el estado</option>
+                                <option value="Sin Confirmar">Sin Confirmar</option>
+                                <option value="Pendiente">Pendiente</option>
+                                <option value="Confirmado">Confirmado</option>
+                            </select>
+                        </div>
+                    </div>
+                    <button class="btn btn-custom mt-3" id="registrar">Registrar Estudiante</button>
+                </div>
+                <table id="tablaDinamica" class="table table-striped table-bordered" style="width:100%">
+                    <thead class="table-dark">
+                        <tr>
+                            <th>ID</th>
+                            <th>Nombre</th>
+                            <th>DNI</th>
+                            <th>Fecha Nac.</th>
+                            <th>Dirección</th>
+                            <th>Contacto</th>
+                            <th>Curso</th>
+                            <th>Nivel</th>
+                            <th>Horario</th>
+                            <th>Estado</th>
+                            <th>Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Aquí se agregarán las filas dinámicamente -->
+                    </tbody>
+                </table>
+            </div>
+
+            <!--teacher section-->
+            <div class="gestion-docente">
+                <div class="form-container ">
+                    <h3 class="section-title">Registrar Nuevo Docente</h3>
+                    <div class="row g-3">
+                        <div class="col-md-4">
+                            <label for="nombreDocente" class="form-label">Nombres</label>
+                            <input type="text" class="form-control" id="nombreDocente" placeholder="Ingrese el nombre completo" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="dniDocente" class="form-label">DNI</label>
+                            <input type="text" class="form-control" id="dniDocente" placeholder="Ingrese el número de DNI" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="fechaNacDocente" class="form-label">Fecha de Nacimiento</label>
+                            <input type="date" class="form-control" id="fechaNacDocente" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="especialidadDocente" class="form-label">Especialidad</label>
+                            <input type="text" class="form-control" id="especialidadDocente" placeholder="Ingrese la especialidad" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="gradoDocente" class="form-label">Grado Académico</label>
+                            <input type="text" class="form-control" id="gradoDocente" placeholder="Ingrese el grado académico" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="experienciaDocente" class="form-label">Experiencia (años)</label>
+                            <input type="number" class="form-control" id="experienciaDocente" placeholder="Ingrese los años de experiencia" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="horarioDocente" class="form-label">Horario Disponible</label>
+                            <input type="text" class="form-control" id="horarioDocente" placeholder="Ingrese el horario disponible" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="contactoDocente" class="form-label">Contacto</label>
+                            <input type="email" class="form-control" id="contactoDocente" placeholder="Ingrese el correo de contacto" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="salarioDocente" class="form-label">Salario (PEN)</label>
+                            <input type="number" class="form-control" id="salarioDocente" placeholder="Ingrese el salario esperado" required>
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-custom mt-3" id="registrarDocente">Registrar Docente</button>
+                </div>
+                <table id="tablaDinamicaDocente" class="table table-striped table-bordered" style="width:100%">
+                    <thead class="table-dark">
+                        <tr>
+                            <th>ID</th>
+                            <th>Nombres</th>
+                            <th>DNI</th>
+                            <th>Fecha Nac.</th>
+                            <th>Especialidad</th>
+                            <th>Grado Académico</th>
+                            <th>Experiencia</th>
+                            <th>Horario</th>
+                            <th>Contacto</th>
+                            <th>Salario</th>
+                            <th>Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+            </div>
+
+            <!--signature section-->
+            <div class="gestion-curso">
+                <div class="form-container">
+                    <h3 class="section-title">Registrar Nuevo Curso</h3>
+                    <div class="row g-3">
+                        <div class="col-md-4">
+                            <label for="nombreCurso" class="form-label">Nombres</label>
+                            <input type="text" id="nombreCurso" class="form-control" placeholder="Ingrese el nombre del curso" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="descripcionCurso" class="form-label">Descripción</label>
+                            <textarea id="descripcionCurso" class="form-control" rows="1" placeholder="Ingrese una breve descripción" required></textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="duracionCurso" class="form-label">Duración (horas)</label>
+                            <input type="number" id="duracionCurso" class="form-control" placeholder="Ingrese la duración" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="nivelCurso" class="form-label">Nivel</label>
+                            <select id="nivelCurso" class="form-select" required>
+                                <option value="" disabled selected>Seleccione el nivel</option>
+                                <option value="Básico">Básico</option>
+                                <option value="Intermedio">Intermedio</option>
+                                <option value="Avanzado">Avanzado</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="horarioCurso" class="form-label">Horario</label>
+                            <input type="text" id="horarioCurso" class="form-control" placeholder="Ingrese el horario" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="docenteCurso" class="form-label">Docente</label>
+                            <input type="text" id="docenteCurso" class="form-control" placeholder="Ingrese el nombre del docente" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="numPlazaCurso" class="form-label">N° de Plazas</label>
+                            <input type="number" id="numPlazaCurso" class="form-control" placeholder="Ingrese el número de plazas" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="costoCurso" class="form-label">Costo (PEN)</label>
+                            <input type="number" id="costoCurso" class="form-control" placeholder="Ingrese el costo" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="materialCurso" class="form-label">Material (opcional)</label>
+                            <textarea id="materialCurso" class="form-control" rows="1" placeholder="Describa los materiales (opcional)"></textarea>
+                        </div>
+                    </div>
+                    <button class="btn btn-custom mt-3" id="registrarCurso">Registrar Curso</button>
+                </div>
+                <table id="tablaDinamicaCurso" class="table table-striped table-bordered" style="width:100%">
+                    <thead class="table-dark">
+                        <tr>
+                            <th>ID</th>
+                            <th>Nombres</th>
+                            <th>Descripción</th>
+                            <th>Duración</th>
+                            <th>Nivel</th>
+                            <th>Horario</th>
+                            <th>Docente</th>
+                            <th>N° de Plazas</th>
+                            <th>Costo</th>
+                            <th>Material</th>
+                            <th>Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Aquí se agregarán las filas dinámicamente -->
+                    </tbody>
+                </table>
+            </div>
+            
+            <!-- Report Section -->
+            <div class="reporte" style="display:none">
+                <h2 class="section-title">Reportes Generales</h2>
+                <div class="row">
+                    <div class="col-lg-6 mb-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <div class="card-header bg-primary text-white d-flex align-items-center">
+                                <i class="fas fa-chart-bar me-2"></i> Estudiantes por Curso
+                            </div>
+                            <div class="card-body">
+                                <canvas id="reporteEstudiantesCurso" height="300"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-6 mb-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <div class="card-header bg-success text-white d-flex align-items-center">
+                                <i class="fas fa-chart-pie me-2"></i> Distribución de Niveles
+                            </div>
+                            <div class="card-body">
+                                <canvas id="reporteNiveles" height="300"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mt-4">
+                    <button class="btn btn-primary btn-lg"><i class="fas fa-file-pdf me-2"></i></button>
+                    <button class="btn btn-success btn-lg"><i class="fas fa-file-excel me-2"></i></button>
+                    <button class="btn btn-secondary btn-lg"><i class="fas fa-print me-2"></i></button>
+                </div>
+            </div>
+            
+            <!-- Configuration Section -->
+            <div class="configuracion" style="display:none">
+                <h2 class="section-title">Configuración del Sistema</h2>
+                
+                <div class="config-row">
+                    <!-- Configuración de Usuario -->
+                    <div class="config-card">
+                        <div class="card-header bg-info text-white">
+                            <i class="fas fa-user-cog"></i> Configuración de Usuario
+                        </div>
+                        <div class="card-body">
+                            <form>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Nombre</label>
+                                    <input type="text" class="form-control form-control-lg" value="Luis Miguel Roque Huacca">
+                                </div>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Nombre de usuario</label>
+                                    <input type="text" class="form-control form-control-lg" value="Luis Miguel Roque Huacca">
+                                </div>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Correo electrónico</label>
+                                    <input type="email" class="form-control form-control-lg" value="luis@gmail.com">
+                                </div>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Foto de perfil</label>
+                                    <div class="d-flex align-items-center gap-3">
+                                        <img src="https://via.placeholder.com/80" alt="Foto de perfil" class="img-fluid rounded-circle" style="width: 80px; height: 80px; object-fit: cover;">
+                                        <div>
+                                            <button class="btn btn-outline-info btn-sm">Cambiar</button>
+                                            <button class="btn btn-outline-danger btn-sm">Eliminar</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <button type="submit" class="btn btn-info btn-lg w-100">
+                                    <i class="fas fa-save me-2"></i>Guardar Cambios
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                    
+                    <!-- Seguridad -->
+                    <div class="config-card">
+                        <div class="card-header bg-warning text-dark">
+                            <i class="fas fa-lock"></i> Seguridad
+                        </div>
+                        <div class="card-body">
+                            <form>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Contraseña actual</label>
+                                    <input type="password" class="form-control form-control-lg">
+                                </div>
+                                
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Nueva contraseña</label>
+                                    <input type="password" class="form-control form-control-lg" placeholder="Ingrese nueva contraseña">
+                                    <div class="progress mt-2" style="height: 8px;">
+                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <div class="form-text">La contraseña debe tener al menos 8 caracteres</div>
+                                </div>
+                                
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Confirmar nueva contraseña</label>
+                                    <input type="password" class="form-control form-control-lg" placeholder="Confirme su nueva contraseña">
+                                </div>
+                                
+                                <h5 class="mt-4 mb-3">Verificación en Dos Pasos</h5>
+                                <div class="switch-container">
+                                    <div class="switch-label">
+                                        <h6 class="mb-0">Autenticación por SMS</h6>
+                                        <p class="mb-0 text-muted small">Verificación mediante mensaje de texto</p>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox">
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                
+                                <div class="switch-container">
+                                    <div class="switch-label">
+                                        <h6 class="mb-0">Autenticación por Correo</h6>
+                                        <p class="mb-0 text-muted small">Verificación mediante correo electrónico</p>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                
+                                <button type="submit" class="btn btn-warning btn-lg w-100 mt-3">
+                                    <i class="fas fa-sync-alt me-2"></i>Actualizar Contraseña
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                    
+                    <!-- Apariencia -->
+                    <div class="config-card">
+                        <div class="card-header bg-primary text-white">
+                            <i class="fas fa-palette"></i> Apariencia
+                        </div>
+                        <div class="card-body">
+                            <h5 class="mb-3">Tema</h5>
+                            <div class="row mb-4">
+                                <div class="col-4">
+                                    <div class="theme-selector" data-theme="light">
+                                        <i class="fas fa-sun"></i>
+                                        <h6>Claro</h6>
+                                    </div>
+                                </div>
+                                <div class="col-4">
+                                    <div class="theme-selector active" data-theme="dark">
+                                        <i class="fas fa-moon"></i>
+                                        <h6>Oscuro</h6>
+                                    </div>
+                                </div>
+                                <div class="col-4">
+                                    <div class="theme-selector" data-theme="default">
+                                        <i class="fas fa-adjust"></i>
+                                        <h6>Default</h6>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <h5 class="mt-4 mb-3">Personalización</h5>
+                            <div class="row">
+                                <div class="col-6 mb-3">
+                                    <label class="form-label fw-medium">Color primario</label>
+                                    <input type="color" class="form-control form-control-color" value="#2c3e50" title="Elige tu color primario">
+                                </div>
+                                <div class="col-6 mb-3">
+                                    <label class="form-label fw-medium">Color secundario</label>
+                                    <input type="color" class="form-control form-control-color" value="#3498db" title="Elige tu color secundario">
+                                </div>
+                                <div class="col-6 mb-3">
+                                    <label class="form-label fw-medium">Color de acento</label>
+                                    <input type="color" class="form-control form-control-color" value="#ff9900" title="Elige tu color de acento">
+                                </div>
+                                <div class="col-6 mb-3">
+                                    <label class="form-label fw-medium">Densidad</label>
+                                    <select class="form-select form-control-lg">
+                                        <option value="compacto">Compacto</option>
+                                        <option value="normal" selected>Normal</option>
+                                        <option value="espaciado">Espaciado</option>
+                                    </select>
+                                </div>
+                            </div>
+                            
+                            <h5 class="mt-4 mb-3">Fuentes</h5>
+                            <select class="form-select form-control-lg mb-3">
+                                <option selected>Open Sans</option>
+                                <option>Roboto</option>
+                                <option>Montserrat</option>
+                                <option>Poppins</option>
+                            </select>
+                            
+                            <div class="form-check form-switch mb-3">
+                                <input class="form-check-input" type="checkbox" id="fontSmoothSwitch" checked>
+                                <label class="form-check-label" for="fontSmoothSwitch">Suavizado de fuentes</label>
+                            </div>
+                            
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="animationSwitch" checked>
+                                <label class="form-check-label" for="animationSwitch">Animaciones</label>
+                            </div>
+                            
+                            <button class="btn btn-primary btn-lg w-100 mt-4">
+                                <i class="fas fa-save me-2"></i>Guardar Personalización
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="config-row">
+                    <div class="config-card system-card">
+                        <div class="card-header bg-secondary text-white">
+                            <i class="fas fa-cog"></i> Sistema
+                        </div>
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <h5 class="mb-4">Información del Sistema</h5>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Versión</div>
+                                        <div class="metric-value">1.2.0</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Última actualización</div>
+                                        <div class="metric-value">15 Nov 2023</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Soporte</div>
+                                        <div class="metric-value">soporte@prodigios.edu</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Estado</div>
+                                        <div class="metric-value">Operativo</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Licencia</div>
+                                        <div class="metric-value">Premium</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Próxima actualización</div>
+                                        <div class="metric-value">15 Dic 2023</div>
+                                    </div>
+                                </div>
+                                
+                                <div class="col-md-6">
+                                    <h5 class="mb-4">Recursos del Sistema</h5>
+                                    
+                                    <div class="mb-4">
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <div>
+                                                <h6 class="mb-0">Almacenamiento</h6>
+                                                <p class="mb-0 text-muted small">15.8 GB de 50 GB usados</p>
+                                            </div>
+                                            <div class="text-primary">31.6%</div>
+                                        </div>
+                                        <div class="progress" style="height: 8px;">
+                                            <div class="progress-bar" role="progressbar" style="width: 31.6%;" aria-valuenow="31.6" aria-valuemin="0" aria-valuemax="100"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <div>
+                                                <h6 class="mb-0">Base de Datos</h6>
+                                                <p class="mb-0 text-muted small">2.4 MB de 100 MB usados</p>
+                                            </div>
+                                            <div class="text-success">2.4%</div>
+                                        </div>
+                                        <div class="progress" style="height: 8px;">
+                                            <div class="progress-bar bg-success" role="progressbar" style="width: 2.4%;" aria-valuenow="2.4" aria-valuemin="0" aria-valuemax="100"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <div>
+                                                <h6 class="mb-0">Uso de CPU</h6>
+                                                <p class="mb-0 text-muted small">Promedio de los últimos 30 días</p>
+                                            </div>
+                                            <div class="text-info">42%</div>
+                                        </div>
+                                        <div class="progress" style="height: 8px;">
+                                            <div class="progress-bar bg-info" role="progressbar" style="width: 42%;" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <div>
+                                                <h6 class="mb-0">Memoria</h6>
+                                                <p class="mb-0 text-muted small">1.2 GB de 4 GB usados</p>
+                                            </div>
+                                            <div class="text-warning">30%</div>
+                                        </div>
+                                        <div class="progress" style="height: 8px;">
+                                            <div class="progress-bar bg-warning" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="d-grid gap-2">
+                                        <button class="btn btn-outline-secondary btn-lg">
+                                            <i class="fas fa-sync-alt me-2"></i>Buscar Actualizaciones
+                                        </button>
+                                        <button class="btn btn-secondary btn-lg">
+                                            <i class="fas fa-cloud-download-alt me-2"></i>Actualizar Sistema
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Asistencia -->
+            <div class="asistencia" style="display: none;">
+                <h2 class="section-title">Lista de Asistencia</h2>
+                <div class="card config-card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <div class="d-flex flex-wrap align-items-center gap-5">
+                            <h3 class="mb-1"> <strong>Curso: </strong> Canto</h3>
+                            
+                            <h3 class="mb-1"><strong>Profesor: </strong> Juan Pérez</h3>
+                            <h3 class="mb-1"><strong>Clase: </strong> Notas altas</h3>
+                            <h3 class="mb-1"><strong>Fecha: </strong> 12/07/2025</h3>
+                        </div>
+                        <button class="btn btn-warning btn-sm" onclick="resetearTodo()">
+                            <i class="fa-solid fa-rotate-left"></i> Reiniciar
+                        </button>
+                    </div>
+                    <div class="card-body table-responsive">
+                        <table class="table table-hover align-middle text-start" id="tablaAsistencia">
+                            <thead class="text-white" style="background-color: var(--primary);">
+                            <tr>
+                                <th >#</th>
+                                <th>Nombre</th>
+                                <th>Codigo</th>
+                                <th>Acciones</th>
+                                <th>Asistencia</th>
+                                <th>Justificación</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr>
+                                <td>1</td>
+                                <td>Juan Pérez</td>
+                                <td>3004-84355</td>
+                                <td>
+                                    <button class="btn btn-success btn-sm me-1" onclick="marcar(this, 'presente')">
+                                        <i class="fa-solid fa-user-check"></i>
+                                    </button>
+                                    
+                                    <button class="btn btn-danger btn-sm me-1" onclick="marcar(this, 'ausente')">
+                                        <i class="fa-solid fa-user-xmark"></i>
+                                    </button>
+                                    
+                                    <button class="btn btn-warning btn-sm me-1" onclick="marcar(this, 'tardanza')">
+                                        <i class="fa-solid fa-user-clock"></i>
+                                    </button>
+                            </td>
+                                <td class="estado estado-pendiente">Sin marcar</td>
+                                <td>
+                                    <input type="text" class="form-control form-control-sm" placeholder="Observación" />
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>2</td>
+                                <td>Lucía García</td>
+                                <td>2033-54534</td>
+                                <td >
+                                    <button class="btn btn-success btn-sm me-1" onclick="marcar(this, 'presente')">
+                                        <i class="fa-solid fa-user-check"></i>
+                                    </button>
+                                    
+                                    <button class="btn btn-danger btn-sm me-1" onclick="marcar(this, 'ausente')">
+                                        <i class="fa-solid fa-user-xmark"></i>
+                                    </button>
+                                    
+                                    <button class="btn btn-warning btn-sm" onclick="marcar(this, 'tardanza')">
+                                        <i class="fa-solid fa-user-clock"></i>
+                                    </button>
+                                </td>
+                                <td class="estado estado-pendiente">Sin marcar</td>
+                                <td>
+                                    <input type="text" class="form-control form-control-sm" placeholder="Observación" />
+                                </td>
+                                
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    <!-- CALENDARIO -->
+    <div id="calendario" class="calendario container mt-4" style="display: none;">
+        <h2 class="section-title mb-4">Calendario de Cursos</h2>
+        <div id="calendar"></div>
+
+        <!-- Modal -->
+        <div class="modal fade" id="modalCurso" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <form id="formCurso">
+                        <div class="modal-header">
+                            <h5 class="modal-title">Agregar / Editar Curso</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                        </div>
+                        <div class="modal-body">
+                            <input type="hidden" id="cursoId">
+                            <div class="mb-3">
+                                <label for="tituloCurso" class="form-label">Nombre del curso</label>
+                                <input type="text" class="form-control" id="tituloCurso" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="fechaCurso" class="form-label">Fecha</label>
+                                <input type="date" class="form-control" id="fechaCurso" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="colorCurso" class="form-label">Color del evento</label>
+                                <input type="color" class="form-control form-control-color" id="colorCurso" value="#3498db" title="Color">
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="submit" class="btn btn-primary">Guardar</button>
+                            <button type="button" class="btn btn-danger" id="btnEliminar" style="display: none;">Eliminar</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </main>
+
+
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
+    
+    <!-- FullCalendar -->
+    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
+    <script src="cambios-as.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/PAGINA WEB/ASISTENCIA/cambios-as.js b/PAGINA WEB/ASISTENCIA/cambios-as.js
new file mode 100644
index 0000000..e43c237
--- /dev/null
+++ b/PAGINA WEB/ASISTENCIA/cambios-as.js	
@@ -0,0 +1,941 @@
+
+let nivelEstudiantesChart;
+let categoriaCursosChart;
+let estudiantesPorCursoChart;
+
+let nextIds = { estudiantes: 1, docentes: 1, cursos: 1 };
+
+let editingInfo = { tipo: null, id: null };
+
+// Estado de la aplicación
+const state = {
+    estudiantes: [],
+    docentes: [],
+    cursos: [],
+    actividades: []
+};
+
+// Inicialización
+document.addEventListener('DOMContentLoaded', () => {
+    initCharts();
+
+    initializeDataTable();
+    initializeDataTableDocente();
+    initializeDataTableCurso();
+
+    updateCounters();
+    updateCharts();
+    initEventListeners();
+
+    loadTheme();
+    document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+});
+
+
+const registrarBtn = document.getElementById('registrar');
+const registrarBtnDocente = document.getElementById('registrarDocente');
+const registrarBtnCurso = document.getElementById('registrarCurso');
+
+// Funciones auxiliares
+function updateStateFromTable(type) {
+
+    const tableId = type === 'docentes' ? '#tablaDinamicaDocente' :
+        type === 'cursos' ? '#tablaDinamicaCurso' : '#tablaDinamica';
+
+    if ($.fn.DataTable.isDataTable(tableId)) {
+        const table = $(tableId).DataTable();
+        state[type] = table.rows().data().map(row => ({
+            id: parseInt(row[0]),
+            nombre: row[1],
+            dni: row[2],
+            fecha_nacimiento: row[3],
+            direccion: row[4],
+            contacto: row[5],
+            curso: row[6],
+            nivel: row[7],
+            horario: row[8],
+            estado: row[9]
+        })).toArray();
+    }
+}
+
+// FUNCIÓN updateCharts 
+function updateCharts() {
+    // 1. Distribución por niveles 
+    const niveles = { Principiante: 0, Intermedio: 0, Avanzado: 0 };
+    const estudiantesPorCurso = {};
+
+    // Verificar SI EXISTE la tabla de estudiantes
+    if ($.fn.DataTable.isDataTable('#tablaDinamica')) {
+        const studentTable = $('#tablaDinamica').DataTable();
+        const studentRows = studentTable.rows().data().toArray();
+
+        studentRows.forEach(row => {
+            const nivel = row[7];
+            const curso = row[6];
+
+            // Contar niveles
+            if (nivel) niveles[nivel]++;
+
+            // Contar cursos (dinámico)
+            if (curso) {
+                if (!estudiantesPorCurso[curso]) {
+                    estudiantesPorCurso[curso] = 0;
+                }
+                estudiantesPorCurso[curso]++;
+            }
+        });
+    }
+
+    // 2. Actualizar gráfica de niveles
+    if (nivelEstudiantesChart) {
+        nivelEstudiantesChart.data.datasets[0].data = Object.values(niveles);
+        nivelEstudiantesChart.update();
+    }
+
+    // 3. Actualizar gráfica de estudiantes por curso (CORREGIDO)
+    if (estudiantesPorCursoChart) {
+        // Actualizar etiquetas Y datos
+        estudiantesPorCursoChart.data.labels = Object.keys(estudiantesPorCurso);
+        estudiantesPorCursoChart.data.datasets[0].data = Object.values(estudiantesPorCurso);
+        estudiantesPorCursoChart.update();
+    }
+
+    // 4. Cursos por categoría
+
+    const cursosPorCategoria = {};
+
+    // Verificar SI EXISTE la tabla de cursos
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+        const courseTable = $('#tablaDinamicaCurso').DataTable();
+        const courseRows = courseTable.rows().data().toArray();
+
+        courseRows.forEach(row => {
+            const categoria = row[1];
+            if (categoria) {
+                if (!cursosPorCategoria[categoria]) {
+                    cursosPorCategoria[categoria] = 0;
+                }
+                cursosPorCategoria[categoria]++;
+            }
+        });
+    }
+
+    // 5. Actualizar gráfica de cursos
+    if (categoriaCursosChart) {
+        // Actualizar etiquetas Y datos
+        categoriaCursosChart.data.labels = Object.keys(cursosPorCategoria);
+        categoriaCursosChart.data.datasets[0].data = Object.values(cursosPorCategoria);
+        categoriaCursosChart.update();
+    }
+}
+
+function initializeDataTable() {
+    if ($.fn.DataTable.isDataTable('#tablaDinamica')) $('#tablaDinamica').DataTable().destroy();
+
+    $('#tablaDinamica').DataTable({
+        dom: 'Blfrtip',
+        buttons: [
+            {
+                extend: "excelHtml5",
+                text: "<i class='fa-solid fa-file-excel'></i>",
+                titleAttr: "Exportar a Excel",
+                className: "btn btn-success",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "pdfHtml5",
+                text: "<i class='fa-solid fa-file-pdf'></i>",
+                titleAttr: "Esportar a PDF",
+                className: "btn btn-danger",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "print",
+                text: "<i class='fa-solid fa-print'></i>",
+                titleAttr: "Imprimir",
+                className: "btn btn-info",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                },
+            },
+        ],
+        language: {
+            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+        },
+        lengthMenu: [3, 6, 9, 12],
+        columnDefs: [
+            { orderable: false, targets: [10] },
+            { searchable: false, targets: [10] },
+            { width: "10%", targets: [5] },
+            { targets: -1 },
+            { data: null },
+        ],
+        pageLength: 5,
+    });
+}
+
+registrarBtn.addEventListener('click', function () {
+    const nombre = document.getElementById('nombre').value;
+    const dni = document.getElementById('dni').value;
+    const fecha_nacimiento = document.getElementById('fecha_nacimiento').value;
+    const direccion = document.getElementById('direccion').value;
+    const contacto = document.getElementById('contacto').value;
+    const curso = document.getElementById('curso').value;
+    const nivel = document.getElementById('nivel').value;
+    const horario = document.getElementById('horario').value;
+    const estado = document.getElementById('estado').value;
+
+    if (nombre && dni && fecha_nacimiento && direccion && contacto && curso && nivel && horario && estado) {
+        const table = $('#tablaDinamica').DataTable();
+        if (editingInfo.tipo === 'estudiante' && editingInfo.id !== null) {
+            // Actualizar estudiante existente
+            table.rows().every(function () {
+                const data = this.data();
+                if (parseInt(data[0]) === editingInfo.id) {
+                    this.data([editingInfo.id, nombre, dni, fecha_nacimiento, direccion, contacto, curso, nivel, horario, estado,
+                        '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+                    ]);
+                }
+            });
+        } else {
+            table.row.add([nextIds.estudiantes++, nombre, dni, fecha_nacimiento, direccion, contacto, curso, nivel, horario, estado,
+                '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']).draw();
+        }
+
+        document.getElementById('nombre').value = '';
+        document.getElementById('dni').value = '';
+        document.getElementById('fecha_nacimiento').value = '';
+        document.getElementById('direccion').value = '';
+        document.getElementById('contacto').value = '';
+        document.getElementById('curso').value = '';
+        document.getElementById('nivel').value = '';
+        document.getElementById('horario').value = '';
+        document.getElementById('estado').value = '';
+
+        // Resetear estado
+        editingInfo = { tipo: null, id: null };
+        $('#registrar').text('Registrar Estudiante');
+
+    } else {
+        alert("Por favor, complete todos los campos antes de registrar.");
+    }
+
+    updateAll();
+});
+
+$('#tablaDinamica').on('click', '.btn-edit', function () {
+    const row = $(this).closest('tr');
+    const data = $('#tablaDinamica').DataTable().row(row).data();
+    editingInfo = { tipo: 'estudiante', id: parseInt(data[0]) };
+    document.getElementById('nombre').value = data[1];
+    document.getElementById('dni').value = data[2];
+    document.getElementById('fecha_nacimiento').value = data[3];
+    document.getElementById('direccion').value = data[4];
+    document.getElementById('contacto').value = data[5];
+    document.getElementById('curso').value = data[6];
+    document.getElementById('nivel').value = data[7];
+    document.getElementById('horario').value = data[8];
+    document.getElementById('estado').value = data[9];
+    $('#registrar').text('Actualizar');
+    updateAll();
+});
+$('#tablaDinamica').on('click', '.btn-delete', function () {
+    const row = $(this).closest('tr');
+    $('#tablaDinamica').DataTable().row(row).remove().draw();
+    updateAll();
+});
+
+function initializeDataTableDocente() {
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaDocente')) {
+        $('#tablaDinamicaDocente').DataTable().destroy();
+    }
+
+    $('#tablaDinamicaDocente').DataTable({
+        dom: 'Blfrtip',
+        buttons: [
+            {
+                extend: "excelHtml5",
+                text: "<i class='fas fa-file-excel'></i>",
+                titleAttr: "Exportar a Excel",
+                className: "btn btn-success",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "pdfHtml5",
+                text: "<i class='fa-solid fa-file-pdf'></i>",
+                titleAttr: "Exportar a PDF",
+                className: "btn btn-danger",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "print",
+                text: "<i class='fa-solid fa-print'></i>",
+                titleAttr: "Imprimir",
+                className: "btn btn-info",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            }
+        ],
+        language: {
+            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+        },
+        lengthMenu: [3, 6, 9, 12],
+        columnDefs: [
+            { orderable: false, targets: [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }, // Deshabilitar ordenación en la última columna (Acciones)
+            { searchable: false, targets: -1 }, // Deshabilitar búsqueda en la última columna
+            { width: "10%", target: [6] }
+        ],
+        pageLength: 5,
+    });
+}
+
+registrarBtnDocente.addEventListener('click', function () {
+    const nombre = document.getElementById('nombreDocente').value;
+    const dni = document.getElementById('dniDocente').value;
+    const fechaNac = document.getElementById('fechaNacDocente').value;
+    const especialidad = document.getElementById('especialidadDocente').value;
+    const grado = document.getElementById('gradoDocente').value;
+    const experiencia = document.getElementById('experienciaDocente').value;
+    const horario = document.getElementById('horarioDocente').value;
+    const contacto = document.getElementById('contactoDocente').value;
+    const salario = document.getElementById('salarioDocente').value;
+
+    if (nombre && dni && fechaNac && especialidad && grado && experiencia && horario && contacto && salario) {
+        const table = $('#tablaDinamicaDocente').DataTable();
+        if (editingInfo.tipo === 'docente' && editingInfo.id !== null) {
+            // Actualizar la fila por ID
+            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
+                const data = this.data();
+                if (parseInt(data[0]) === editingInfo.id) {
+                    this.data([
+                        editingInfo.id, nombre, dni, fechaNac, especialidad, grado, experiencia, horario, contacto, salario,
+                        '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil"></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+                    ]);
+                }
+            });
+        } else {
+            table.row.add([
+                nextIds.docentes++, nombre, dni, fechaNac, especialidad, grado, experiencia, horario, contacto, salario,
+                '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil"></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+            ]).draw();
+        }
+
+        document.getElementById('nombreDocente').value = '';
+        document.getElementById('dniDocente').value = '';
+        document.getElementById('fechaNacDocente').value = '';
+        document.getElementById('especialidadDocente').value = '';
+        document.getElementById('gradoDocente').value = '';
+        document.getElementById('experienciaDocente').value = '';
+        document.getElementById('horarioDocente').value = '';
+        document.getElementById('contactoDocente').value = '';
+        document.getElementById('salarioDocente').value = '';
+        editingInfo = { tipo: null, id: null };
+        $('#registrarDocente').text('Registrar Docente');
+
+    } else {
+        alert("Por favor, complete todos los campos antes de registrar.");
+    }
+    updateAll();
+});
+
+$('#tablaDinamicaDocente').on('click', '.btn-edit', function () {
+    const row = $(this).closest('tr');
+    const data = $('#tablaDinamicaDocente').DataTable().row(row).data();
+    editingInfo = { tipo: 'docente', id: parseInt(data[0]) };
+    document.getElementById('nombreDocente').value = data[1];
+    document.getElementById('dniDocente').value = data[2];
+    document.getElementById('fechaNacDocente').value = data[3];
+    document.getElementById('especialidadDocente').value = data[4];
+    document.getElementById('gradoDocente').value = data[5];
+    document.getElementById('experienciaDocente').value = data[6];
+    document.getElementById('horarioDocente').value = data[7];
+    document.getElementById('contactoDocente').value = data[8];
+    document.getElementById('salarioDocente').value = data[9];
+    $('#registrarDocente').text('Actualizar');
+    updateAll();
+});
+$('#tablaDinamicaDocente').on('click', '.btn-delete', function () {
+    const row = $(this).closest('tr');
+    $('#tablaDinamicaDocente').DataTable().row(row).remove().draw();
+    updateAll();
+});
+
+function initializeDataTableCurso() {
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+        $('#tablaDinamicaCurso').DataTable().destroy();
+    }
+
+    $('#tablaDinamicaCurso').DataTable({
+        dom: 'Blfrtip',
+        buttons: [
+            {
+                extend: "excelHtml5",
+                text: "<i class='fa-solid fa-file-excel'></i>",
+                titleAttr: "Exportar a Excel",
+                className: "btn btn-success",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "pdfHtml5",
+                text: "<i class='fa-solid fa-file-pdf'></i>",
+                titleAttr: "Esportar a PDF",
+                className: "btn btn-danger",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "print",
+                text: "<i class='fa-solid fa-print'></i>",
+                titleAttr: "Imprimir",
+                className: "btn btn-info",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            }
+        ],
+        language: {
+            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+        },
+        lengthMenu: [3, 6, 9, 12],
+        columnDefs: [
+            { orderable: false, targets: [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] },
+            { searchable: false, targets: -1 },
+            { width: "1%", targets: [5] },
+            { targets: -1 },
+            { data: null }
+        ],
+        pageLength: 5
+    });
+};
+
+registrarBtnCurso.addEventListener('click', function () {
+    const nombreCurso = document.getElementById('nombreCurso').value;
+    const descripcionCurso = document.getElementById('descripcionCurso').value;
+    const duracionCurso = document.getElementById('duracionCurso').value;
+    const nivelCurso = document.getElementById('nivelCurso').value;
+    const horarioCurso = document.getElementById('horarioCurso').value;
+    const docenteCurso = document.getElementById('docenteCurso').value;
+    const numPlazaCurso = document.getElementById('numPlazaCurso').value;
+    const costoCurso = document.getElementById('costoCurso').value;
+    const materialCurso = document.getElementById('materialCurso').value;
+    if (nombreCurso && descripcionCurso && duracionCurso && nivelCurso && horarioCurso && docenteCurso && numPlazaCurso && costoCurso && materialCurso) {
+        const table = $('#tablaDinamicaCurso').DataTable();
+        if (editingInfo.tipo === 'curso' && editingInfo.id !== null) {
+            // Actualizar la fila por ID
+            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
+                const data = this.data();
+                if (parseInt(data[0]) === editingInfo.id) {
+                    this.data([editingInfo.id, nombreCurso, descripcionCurso, duracionCurso, nivelCurso, horarioCurso, docenteCurso, numPlazaCurso, costoCurso, materialCurso,
+                        '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']);
+                }
+            });
+        } else {
+            table.row.add([nextIds.cursos++, nombreCurso, descripcionCurso, duracionCurso, nivelCurso, horarioCurso, docenteCurso, numPlazaCurso, costoCurso, materialCurso,
+                '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']).draw();
+        }
+        document.getElementById('nombreCurso').value = '';
+        document.getElementById('descripcionCurso').value = '';
+        document.getElementById('duracionCurso').value = '';
+        document.getElementById('nivelCurso').value = '';
+        document.getElementById('horarioCurso').value = '';
+        document.getElementById('docenteCurso').value = '';
+        document.getElementById('numPlazaCurso').value = '';
+        document.getElementById('costoCurso').value = '';
+        document.getElementById('materialCurso').value = '';
+        editingInfo = { tipo: null, id: null };
+        $('#registrarCurso').text('Registrar Curso');
+    } else {
+        alert('Por favor, complete todos los campos antes de registrar.');
+    }
+    updateAll();
+});
+
+$('#tablaDinamicaCurso').on('click', '.btn-edit', function () {
+    const row = $(this).closest('tr');
+    const data = $('#tablaDinamicaCurso').DataTable().row(row).data();
+    editingInfo = { tipo: 'curso', id: parseInt(data[0]) };
+    document.getElementById('nombreCurso').value = data[1];
+    document.getElementById('descripcionCurso').value = data[2];
+    document.getElementById('duracionCurso').value = data[3];
+    document.getElementById('nivelCurso').value = data[4];
+    document.getElementById('horarioCurso').value = data[5];
+    document.getElementById('docenteCurso').value = data[6];
+    document.getElementById('numPlazaCurso').value = data[7];
+    document.getElementById('costoCurso').value = data[8];
+    document.getElementById('materialCurso').value = data[9];
+    $('#registrarCurso').text('Actualizar');
+    updateAll();
+});
+$('#tablaDinamicaCurso').on('click', '.btn-delete', function () {
+    const row = $(this).closest('tr');
+    $('#tablaDinamicaCurso').DataTable().row(row).remove().draw();
+    updateAll();
+});
+
+function initEventListeners() {
+    // Event listener para logout
+    document.getElementById('logoutBtn').addEventListener('click', function () {
+        localStorage.removeItem('loggedIn');
+        window.location.href = 'index.html';
+    });
+
+    // Event listeners para menú
+    document.querySelectorAll('.sidebar a').forEach(link => {
+        link.addEventListener('click', function () {
+            document.querySelectorAll('.sidebar a').forEach(el => el.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+}
+
+function updateCounters() {
+    let totalEst = 0;
+    if ($.fn.DataTable.isDataTable('#tablaDinamica')) {
+        totalEst = $('#tablaDinamica').DataTable().rows().count();
+    }
+    document.getElementById('total-estudiantes').textContent = totalEst;
+
+    let totalDoc = 0;
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaDocente')) {
+        totalDoc = $('#tablaDinamicaDocente').DataTable().rows().count();
+    }
+    document.getElementById('total-docentes').textContent = totalDoc;
+
+    let totalCur = 0;
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+        totalCur = $('#tablaDinamicaCurso').DataTable().rows().count();
+    }
+    document.getElementById('total-cursos').textContent = totalCur;
+}
+
+
+function toggleVisibility(mainOption, subOption, title) {
+    if (typeof calendar !== 'undefined' && calendar) {
+        calendar.destroy();
+        calendar = null;
+    }
+
+    document.querySelectorAll('.dashboard, .asistencia, .calendario').forEach(div => {
+        div.style.display = 'none';
+    });
+
+    document.querySelectorAll('.suboption-panel > div').forEach(div => {
+        div.style.display = 'none';
+    });
+
+    if (mainOption) {
+        const section = document.querySelector(`.${mainOption.toLowerCase()}`);
+        if (section) section.style.display = 'block';
+
+        if (mainOption.toLowerCase() === 'calendario') {
+            setTimeout(() => {
+                const calendarContainer = document.getElementById('calendar');
+                if (calendarContainer && calendarContainer.offsetParent !== null) {
+                    mostrarCalendario();
+                }
+            }, 100);
+        }
+    }
+
+    if (subOption) {
+        const section = document.querySelector(`.gestion-${subOption}`);
+        if (section) section.style.display = 'block';
+    }
+
+    // Actualizar el título
+    if (title) document.querySelector('.navbar-brand').innerHTML = `${title}`;
+
+    // Inicializar DataTables
+    if (subOption === 'estudiante') {
+        initializeDataTable();
+    } else if (subOption === 'docente') {
+        initializeDataTableDocente();
+    } else if (subOption === 'curso') {
+        initializeDataTableCurso();
+    }
+
+    // Reset de edición
+    editingInfo = { tipo: null, id: null };
+
+    // Restaurar texto de botones
+    document.querySelectorAll('#registrar, #registrarDocente, #registrarCurso')
+        .forEach(btn => {
+            if (btn.id === 'registrar') btn.textContent = 'Registrar Estudiante';
+            if (btn.id === 'registrarDocente') btn.textContent = 'Registrar Docente';
+            if (btn.id === 'registrarCurso') btn.textContent = 'Registrar Curso';
+        });
+
+    if (mainOption === 'dashboard') updateAll();
+}
+
+
+function initCharts() {
+    // Gráfico de distribución por niveles
+    const ctxNivel = document.getElementById('nivelEstudiantesChart');
+    nivelEstudiantesChart = new Chart(ctxNivel, {
+        type: 'doughnut',
+        data: {
+            labels: ['Principiante', 'Intermedio', 'Avanzado'],
+            datasets: [{
+                label: "Estudiantes por Nivel",
+                data: [0, 0, 0], // Datos iniciales vacíos
+                backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
+                borderWidth: 0
+            }]
+        },
+        options: {
+            maintainAspectRatio: true,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                    labels: { font: { size: 14 } }
+                },
+                tooltip: {
+                    bodyFont: { size: 14 },
+                    titleFont: { size: 16 }
+                }
+            }
+        }
+    });
+
+    // Gráfico de categorías de cursos
+    const ctxCategoria = document.getElementById('categoriaCursosChart');
+    categoriaCursosChart = new Chart(ctxCategoria, {
+        type: 'bar',
+        data: {
+            labels: [''],
+            datasets: [{
+                label: 'Cursos por categoría',
+                data: [0, 0, 0, 0, 0], // Datos iniciales vacíos
+                backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74c3c'],
+                borderWidth: 0
+            }]
+        },
+        options: {
+            maintainAspectRatio: true,
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: { font: { size: 12 } }
+                },
+                x: {
+                    ticks: { font: { size: 12 } }
+                }
+            },
+            plugins: { legend: { display: false } }
+        }
+    });
+
+    //Gráfico de Estudiantes por Curso
+    estudiantesPorCursoChart = new Chart(
+        document.getElementById('estudiantesPorCursoChart'),
+        {
+            type: 'bar',
+            data: {
+                labels: [''],
+                datasets: [{
+                    label: 'Estudiantes por Curso',
+                    data: [0, 0, 0, 0, 0],
+                    backgroundColor: [
+                        '#4e73df',
+                        '#1cc88a',
+                        '#36b9cc',
+                        '#f6c23e',
+                        '#e74c3c'
+                    ],
+                    borderRadius: 5,
+                    barThickness: 20
+                }]
+            },
+            options: {
+                maintainAspectRatio: true,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            font: { size: 12 }
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            font: { size: 12 }
+                        }
+                    }
+                },
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        bodyFont: { size: 14 },
+                        titleFont: { size: 16 }
+                    }
+                }
+            }
+        }
+    );
+
+
+    // Gráfico para reportes
+    new Chart(
+        document.getElementById('reporteEstudiantesCurso'),
+        {
+            type: 'pie',
+            data: {
+                labels: ['Guitarra', 'Piano', 'Canto', 'Violín', 'Teoría'],
+                datasets: [{
+                    label: 'Estudiantes por Curso',
+                    data: [15, 12, 8, 5, 3],
+                    backgroundColor: [
+                        '#4e73df',
+                        '#1cc88a',
+                        '#36b9cc',
+                        '#f6c23e',
+                        '#e74c3c'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            font: {
+                                size: 14
+                            }
+                        }
+                    },
+                    tooltip: {
+                        bodyFont: {
+                            size: 14
+                        },
+                        titleFont: {
+                            size: 16
+                        }
+                    }
+                }
+            }
+        }
+    );
+
+    new Chart(
+        document.getElementById('reporteNiveles'),
+        {
+            type: 'polarArea',
+            data: {
+                labels: ['Principiante', 'Intermedio', 'Avanzado'],
+                datasets: [{
+                    label: 'Distribución de Niveles',
+                    data: [25, 15, 10],
+                    backgroundColor: [
+                        'rgba(78, 115, 223, 0.7)',
+                        'rgba(28, 200, 138, 0.7)',
+                        'rgba(54, 185, 204, 0.7)'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            font: {
+                                size: 14
+                            }
+                        }
+                    },
+                    tooltip: {
+                        bodyFont: {
+                            size: 14
+                        },
+                        titleFont: {
+                            size: 16
+                        }
+                    }
+                }
+            }
+        }
+    );
+    updateCharts();
+}
+
+function updateAll() {
+    updateStateFromTable('estudiantes');
+    updateStateFromTable('docentes');
+    updateStateFromTable('cursos');
+    updateCounters();
+    updateCharts();
+}
+
+document.querySelectorAll('.theme-selector').forEach(selector => {
+    selector.addEventListener('click', function () {
+        const theme = this.dataset.theme;
+        applyTheme(theme);
+
+        document.querySelectorAll('.theme-selector').forEach(el => {
+            el.classList.remove('active');
+        });
+        this.classList.add('active');
+    });
+});
+
+// Sistema de temas
+const themeToggle = document.getElementById('theme-toggle');
+const themeToggleIcon = document.getElementById('theme-icon');
+console.log(themeToggleIcon)
+
+// Función para aplicar el tema
+function applyTheme(theme) {
+    document.body.classList.remove('theme-light', 'theme-dark');
+    document.querySelectorAll('.theme-selector').forEach(el => {
+        el.classList.remove('theme-light', 'theme-dark', 'theme-auto');
+    });
+
+    if (theme !== 'default') {
+        document.body.classList.add(`theme-${theme}`);
+    }
+
+    localStorage.setItem('theme', theme);
+
+    const themeIcon = document.getElementById('theme-icon');
+    themeIcon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+}
+
+// Cargar tema guardado o detectar preferencia del sistema
+function loadTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'default';
+    applyTheme(savedTheme);
+}
+
+// Alternar entre temas
+function toggleTheme() {
+    const currentTheme = localStorage.getItem('theme') || 'default';
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    applyTheme(newTheme)
+}
+// FUNCIONES PARA ASISTENCIA
+// Funcion marcar
+function marcar(boton, estado) {
+    const fila = boton.closest("tr");
+    const estadoCelda = fila.querySelector(".estado");
+
+    if (estado === 'presente') {
+    estadoCelda.textContent = "Presente";
+    estadoCelda.className = "estado estado-presente";
+    } else if (estado === 'ausente') {
+    estadoCelda.textContent = "Ausente";
+    estadoCelda.className = "estado estado-ausente";
+    } else if (estado === 'tardanza') {
+        estadoCelda.textContent = "Tardanza";
+        estadoCelda.className = "estado estado-tardanza";
+    } else if (estado === 'justificado') {
+        estadoCelda.textContent = "Justificado";
+        estadoCelda.className = "estado estado-justificado";
+    }
+}
+//Funcion para resetear todo
+function resetearTodo() {
+    document.querySelectorAll("#tablaAsistencia .estado").forEach(celda => {
+    celda.textContent = "Sin marcar";
+    celda.className = "estado estado-pendiente";
+    });
+}
+
+//calendario
+let calendar;
+let eventos = JSON.parse(localStorage.getItem('eventosCursos')) || [];
+
+function mostrarCalendario() {
+    const calendarEl = document.getElementById('calendar');
+    const contenedorCalendario = document.getElementById('calendario');
+
+    // Asegurar que el contenedor esté visible antes de renderizar
+    if (contenedorCalendario.style.display === 'none') return;
+
+    if (calendar) {
+        calendar.destroy();
+    }
+
+    calendar = new FullCalendar.Calendar(calendarEl, {
+        initialView: 'dayGridMonth',
+        locale: 'es',
+        height: 'auto',
+        selectable: true,
+        headerToolbar: {
+            left: 'prev,next today',
+            center: 'title',
+            right: ''
+        },
+        events: eventos,
+        dateClick: function (info) {
+            document.getElementById('cursoId').value = '';
+            document.getElementById('fechaCurso').value = info.dateStr;
+            document.getElementById('tituloCurso').value = '';
+            document.getElementById('colorCurso').value = '#3498db';
+            document.getElementById('btnEliminar').style.display = 'none';
+            const modal = new bootstrap.Modal(document.getElementById('modalCurso'));
+            modal.show();
+        },
+        eventClick: function (info) {
+            const evento = info.event;
+            document.getElementById('cursoId').value = evento.id;
+            document.getElementById('tituloCurso').value = evento.title;
+            document.getElementById('fechaCurso').value = evento.startStr;
+            document.getElementById('colorCurso').value = evento.backgroundColor;
+            document.getElementById('btnEliminar').style.display = 'inline-block';
+            const modal = new bootstrap.Modal(document.getElementById('modalCurso'));
+            modal.show();
+        }
+    });
+
+    calendar.render();
+}
+
+// Listeners de formulario
+document.addEventListener('DOMContentLoaded', function () {
+    document.getElementById('formCurso').addEventListener('submit', function (e) {
+        e.preventDefault();
+        const id = document.getElementById('cursoId').value;
+        const title = document.getElementById('tituloCurso').value;
+        const date = document.getElementById('fechaCurso').value;
+        const color = document.getElementById('colorCurso').value;
+
+        if (id) {
+            eventos = eventos.map(ev => ev.id === id ? { id, title, start: date, backgroundColor: color } : ev);
+        } else {
+            const newId = Date.now().toString();
+            eventos.push({ id: newId, title, start: date, backgroundColor: color });
+        }
+
+        localStorage.setItem('eventosCursos', JSON.stringify(eventos));
+        const modal = bootstrap.Modal.getInstance(document.getElementById('modalCurso'));
+        modal.hide();
+        calendar.destroy();
+        mostrarCalendario();
+    });
+
+    document.getElementById('btnEliminar').addEventListener('click', function () {
+        const id = document.getElementById('cursoId').value;
+        eventos = eventos.filter(ev => ev.id !== id);
+        localStorage.setItem('eventosCursos', JSON.stringify(eventos));
+        const modal = bootstrap.Modal.getInstance(document.getElementById('modalCurso'));
+        modal.hide();
+        calendar.destroy();
+        mostrarCalendario();
+    });
+});
diff --git a/PAGINA WEB/ASISTENCIA/cambios_of.html b/PAGINA WEB/ASISTENCIA/cambios_of.html
new file mode 100644
index 0000000..4fb4c38
--- /dev/null
+++ b/PAGINA WEB/ASISTENCIA/cambios_of.html	
@@ -0,0 +1,2375 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PRODIGIOS - Academia de Música</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
+    
+    
+    <style>
+        :root {
+            --primary: #2c3e50;
+            --secondary: #3498db;
+            --accent: #ff9900;
+            --light: #ecf0f1;
+            --dark: #2c3e50;
+            --success: #2ecc71;
+            --warning: #f39c12;
+            --info: #1abc9c;
+            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            --transition: all 0.3s ease;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            background-color: #f5f7fa;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        
+        /* Formulario de registro de estudiantes */
+        .form-container {
+            background-color: #ffffff;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            margin-bottom: 30px;
+        }
+
+        .form-container h3 {
+            margin-bottom: 20px;
+        }
+
+        /* Navbar superior */
+        .navbar {
+            background: linear-gradient(135deg, var(--primary) 0%, #1a2a3a 100%);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            z-index: 1030;
+            padding: 12px 25px;
+            height: 70px;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+        }
+        
+        .navbar-brand {
+            font-weight: 100;
+            font-size: 1.8rem;
+            letter-spacing: 1px;
+            color: white !important;
+            display: flex;
+            align-items: center;
+        }
+        
+        .navbar-brand i {
+            margin-right: 10px;
+            color: var(--accent);
+        }
+        
+        /* Sidebar izquierdo */
+        .sidebar {
+            width: 250px;
+            background: linear-gradient(180deg, var(--primary) 0%, #1a2a3a 100%);
+            position: fixed;
+            top: 70px;
+            bottom: 0;
+            left: 0;
+            box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
+            transition: var(--transition);
+            z-index: 1020;
+            overflow-y: auto;
+        }
+        
+        .sidebar h2 {
+            margin: 20px 0;
+            font-size: 1.4rem;
+            text-align: center;
+            color: var(--light);
+            padding: 15px 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+            font-weight: 600;
+        }
+        
+        .sidebar .menu {
+            padding: 0;
+        }
+        
+        .sidebar .menu li {
+            overflow: hidden;
+        }
+        
+        .sidebar .menu li a, 
+        .sidebar .menu li summary {
+            color: var(--light);
+            text-decoration: none;
+            font-size: 1rem;
+            padding: 14px 20px;
+            display: block;
+            transition: var(--transition);
+            border-left: 4px solid transparent;
+            font-weight: 500;
+            padding-left: 18px !important;
+        }
+        
+        .sidebar .menu li a:hover, 
+        .sidebar .menu li summary:hover,
+        .sidebar .menu li a.active {
+            background-color: rgba(255, 255, 255, 0.1);
+            border-left-color: var(--accent);
+        }
+        
+        .sidebar .menu li a i,
+        .sidebar .menu li summary i {
+            width: 25px;
+            text-align: center;
+            margin-right: 12px;
+            font-size: 1.1rem;
+        }
+        
+        .sidebar .submenu {
+            background-color: rgba(0, 0, 0, 0.15);
+            padding: 0;
+        }
+        
+        .sidebar .submenu li a {
+            font-size: 0.95rem;
+        }
+        
+        .sidebar .submenu li a:hover {
+            background-color: rgba(255, 255, 255, 0.08);
+        }
+        
+        /* Panel de contenido principal */
+        .main-content { 
+            margin-left: 250px;
+            margin-top: 70px;
+            padding: 30px;
+            flex: 1;
+            transition: var(--transition);
+        }
+        
+        .suboption-panel {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        
+        /* Secciones de contenido */
+        .dashboard,
+        .gestion-estudiante,
+        .gestion-docente,
+        .gestion-curso,
+        .reporte,
+        .configuracion {
+            display: none;
+        }
+        
+        .dashboard {
+            display: block;
+        }
+        
+        /* Títulos de sección */
+        .section-title {
+            font-size: 1.8rem;
+            font-weight: 700;
+            margin-bottom: 30px;
+            color: var(--primary);
+            position: relative;
+        }
+        
+        /* Tarjetas */
+        .dashboard-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 25px;
+            margin-bottom: 40px;
+        }
+        
+        .card {
+            background: white;
+            border: none;
+            border-radius: 12px;
+            padding: 25px;
+            box-shadow: var(--card-shadow);
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .card:hover {
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        }
+        
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 5px;
+            background: var(--accent);
+        }
+        
+        .card h3 {
+            font-size: 1.1rem;
+            margin-bottom: 15px;
+            color: #555;
+            font-weight: 600;
+        }
+        
+        .card p {
+            font-size: 2.3rem;
+            font-weight: 700;
+            color: var(--secondary);
+            margin: 0;
+        }
+        
+        .card small {
+            display: block;
+            color: #777;
+            font-size: 0.95rem;
+            margin-top: 5px;
+        }
+        
+        /* Gráficos */
+        .dashboard-charts {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+        
+        .chart-container {
+            background: white;
+            border: none;
+            border-radius: 12px;
+            padding: 25px;
+            box-shadow: var(--card-shadow);
+        }
+        
+        .chart-container h4 {
+            font-size: 1.25rem;
+            margin-bottom: 25px;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 600;
+        }
+        
+        .chart-container h4 i {
+            color: var(--accent);
+            background: rgba(231, 76, 60, 0.1);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        /* Tablas y actividades */
+        .recent-activities {
+            background: white;
+            border-radius: 12px;
+            padding: 25px;
+            box-shadow: var(--card-shadow);
+        }
+        
+        .recent-activities h3 {
+            font-size: 1.35rem;
+            margin-bottom: 25px;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 600;
+        }
+        
+        .recent-activities h3 i {
+            color: var(--accent);
+            background: rgba(231, 76, 60, 0.1);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        /* Botones personalizados */
+        .btn-custom {
+            padding: 10px 25px;
+            background: linear-gradient(135deg, var(--secondary) 0%, #2980b9 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: var(--transition);
+            font-weight: 500;
+        }
+        
+        .btn-custom:hover {
+            background: linear-gradient(135deg, #2980b9 0%, #1a5a8a 100%);
+            background-color: #0056b3;
+            color: #fff;
+        }
+
+        .dataTables_length {
+            padding: 5px 10px;
+        }
+
+        /* Responsividad */
+        @media (max-width: 1200px) {
+            .dashboard-charts {
+                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            }
+        }
+
+        /* Nuevos estilos para el navbar */
+        .navbar-icons {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-right: 20px;
+        }
+        
+        .notification-icon, .chat-icon {
+            position: relative;
+            color: white;
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        
+        .notification-icon:hover, .chat-icon:hover {
+            color: var(--accent);
+        }
+        
+        .notification-badge {
+            position: absolute;
+            top: -5px;
+            right: -8px;
+            background-color: var(--accent);
+            color: white;
+            border-radius: 50%;
+            width: 18px;
+            height: 18px;
+            font-size: 0.7rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        /* Perfil de usuario en sidebar */
+        .profile-section {
+            padding: 20px 15px;
+            text-align: center;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+        }
+        
+        .profile-img {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 3px solid var(--accent);
+            margin-bottom: 15px;
+        }
+        
+        .profile-name {
+            color: var(--light);
+            font-size: 1.1rem;
+            margin-bottom: 5px;
+            font-weight: 600;
+        }
+        
+        .profile-role {
+            color: var(--accent);
+            font-size: 0.9rem;
+            margin-bottom: 0;
+        }
+        
+        /* Ajuste para acomodar el perfil */
+        .sidebar h2 {
+            margin: 10px 0;
+        }
+        
+        /* Otros ajustes menores */
+        .navbar-brand {
+            font-size: 1.6rem; /* Ligeramente más pequeño */
+        }
+
+        .config-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        
+        .config-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid var(--primary);
+        }
+
+        .config-card {
+            background: white;
+            border-radius: 12px;
+            box-shadow: var(--card-shadow);
+            margin-bottom: 25px;
+            height: 100%;
+            transition: var(--transition);
+            overflow: hidden;
+        }
+
+        .card-header {
+            padding: 18px 25px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        
+        .card-body {
+            padding: 25px;
+        }
+        
+        .config-card:hover {
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        }
+        
+        .form-control-lg {
+            border-radius: 8px;
+            border: 1px solid #ddd;
+        }
+        
+        .form-control-lg:focus {
+            border-color: var(--secondary);
+            box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
+        }
+
+        .btn-lg {
+            padding: 12px 25px;
+            border-radius: 8px;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+        
+        .btn-info {
+            background: linear-gradient(135deg, var(--info) 0%, #16a085 100%);
+            border: none;
+            color: white;
+        }
+        
+        .btn-info:hover {
+            background: linear-gradient(135deg, #16a085 0%, #138a72 100%);
+        }
+        
+        .btn-warning {
+            background: linear-gradient(135deg, var(--warning) 0%, #e67e22 100%);
+            border: none;
+            color: white;
+        }
+        
+        .btn-warning:hover {
+            background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary) 0%, #1a2a3a 100%);
+            border: none;
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #1a2a3a 0%, #0e1a25 100%);
+        }
+        
+        .btn-secondary {
+            background: linear-gradient(135deg, var(--secondary) 0%, #2980b9 100%);
+            border: none;
+            color: white;
+        }
+        
+        .btn-secondary:hover {
+            background: linear-gradient(135deg, #2980b9 0%, #1a5a8a 100%);
+        }
+        
+        .progress {
+            height: 10px;
+            border-radius: 5px;
+        }
+        
+        .progress-bar {
+            background: var(--secondary);
+        }
+        
+        .config-row {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        
+        .system-card {
+            grid-column: span 3;
+        }
+        
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 30px;
+        }
+        
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: .4s;
+            border-radius: 34px;
+        }
+        
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 22px;
+            width: 22px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        
+        input:checked + .slider {
+            background-color: var(--success);
+        }
+        
+        input:checked + .slider:before {
+            transform: translateX(30px);
+        }
+        
+        .switch-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 0;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .switch-label {
+            flex: 1;
+        }
+        
+        .system-metric {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding: 12px;
+            background: #f8f9fa;
+            border-radius: 8px;
+        }
+        
+        .metric-label {
+            font-weight: 500;
+        }
+        
+        .metric-value {
+            font-weight: 600;
+            color: var(--primary);
+        }
+        
+        .theme-selector {
+            border: 2px solid transparent;
+            border-radius: 10px;
+            padding: 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        
+        .theme-selector:hover, .theme-selector.active {
+            border-color: var(--accent);
+            background: rgba(255, 153, 0, 0.05);
+        }
+        
+        .theme-selector i {
+            font-size: 2.5rem;
+            margin-bottom: 15px;
+        }
+        
+        .status-badge {
+            display: inline-block;
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 500;
+        }
+        
+        .status-active {
+            background: rgba(46, 204, 113, 0.15);
+            color: var(--success);
+        }
+        
+        .status-warning {
+            background: rgba(243, 156, 18, 0.15);
+            color: var(--warning);
+        }
+        
+        .card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: var(--primary);
+        }
+        
+        .card-subtitle {
+            color: #777;
+            margin-bottom: 20px;
+        }
+
+        /* Estilos para modo oscuro */
+        body.theme-dark {
+            background-color: #18191a;
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .navbar {
+            background: linear-gradient(135deg, #242526 0%, #18191a 100%);
+        }
+
+        body.theme-dark .sidebar {
+            background: linear-gradient(180deg, #242526 0%, #18191a 100%);
+        }
+
+        body.theme-dark .card,
+        body.theme-dark .chart-container,
+        body.theme-dark .recent-activities,
+        body.theme-dark .form-container,
+        body.theme-dark .config-card {
+            background-color: #242526;
+            color: #e4e6eb;
+            border: 1px solid #3a3b3c;
+        }
+
+        body.theme-dark .table {
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .table thead {
+            background-color: #3a3b3c;
+        }
+
+        body.theme-dark .table-hover tbody tr:hover {
+            background-color: #3a3b3c;
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .section-title {
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .card h3,
+        body.theme-dark .card p,
+        body.theme-dark .card small {
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .card small {
+            color: #b0b3b8;
+        }
+
+        body.theme-dark .form-control,
+        body.theme-dark .form-select {
+            background-color: #3a3b3c;
+            color: #e4e6eb;
+            border: 1px solid #3a3b3c;
+        }
+
+        body.theme-dark .form-control:focus,
+        body.theme-dark .form-select:focus {
+            background-color: #3a3b3c;
+            color: #e4e6eb;
+            border-color: #4a4b4c;
+            box-shadow: 0 0 0 0.25rem rgba(65, 66, 68, 0.25);
+        }
+
+        body.theme-dark .dropdown-menu {
+            background-color: #242526;
+            border: 1px solid #3a3b3c;
+        }
+
+        body.theme-dark .dropdown-item {
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .dropdown-item:hover {
+            background-color: #3a3b3c;
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .progress {
+            background-color: #3a3b3c;
+        }
+
+        body.theme-dark .dt-buttons .btn {
+            background-color: #3a3b3c !important;
+            color: #e4e6eb !important;
+            border: 1px solid #4a4b4c !important;
+        }
+
+        body.theme-dark .config-card .card-header {
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .switch-label h6,
+        body.theme-dark .metric-label,
+        body.theme-dark .metric-value {
+            color: #e4e6eb;
+        }
+
+        body.theme-dark .form-control-color {
+            background-color: #3a3b3c;
+        }
+
+        body.theme-dark {
+            --light: #e4e6eb;
+            --dark: #b0b3b8;
+        }
+
+        #theme-toggle i {
+            transition: color 0.3s ease;
+        }
+
+        @media (max-width: 1200px) {
+            .config-row {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            
+            .system-card {
+                grid-column: span 2;
+            }
+        }
+
+        @media (max-width: 992px) {
+            .sidebar {
+                width: 70px;
+            }
+            
+            .sidebar h2 span,
+            .sidebar .menu li a span,
+            .sidebar .menu li summary span {
+                display: none;
+            }
+            
+            .sidebar h2 {
+                font-size: 1.8rem;
+                padding: 15px 0;
+            }
+            
+            .sidebar .menu li a,
+            .sidebar .menu li summary {
+                text-align: center;
+                padding: 15px 10px;
+            }
+            
+            .sidebar .menu li a i,
+            .sidebar .menu li summary i {
+                margin-right: 0;
+                font-size: 1.4rem;
+                display: block;
+                margin: 0 auto 5px;
+            }
+            
+            .sidebar .submenu {
+                position: absolute;
+                left: 70px;
+                width: 200px;
+                display: none;
+            }
+            
+            .sidebar .menu li details[open] .submenu {
+                display: block;
+            }
+            
+            .main-content {
+                margin-left: 70px;
+            }
+            .dashboard-charts {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .main-content {
+                padding: 20px;
+            }
+            
+            .dashboard-cards {
+                grid-template-columns: 1fr;
+            }
+
+            .config-row {
+                grid-template-columns: 1fr;
+            }
+            
+            .system-card {
+                grid-column: span 1;
+            }
+            
+            .config-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 15px;
+            }
+        }
+        
+        @media (max-width: 576px) {
+            .navbar {
+                padding: 10px 15px;
+            }
+            
+            .navbar-brand {
+                font-size: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navbar superior -->
+    <header class="navbar">
+        <div class="container-fluid d-flex justify-content-between align-items-center">
+            <span class="navbar-brand">Bienvenido!</span>
+            <div class="d-flex align-items-center">
+                <div class="navbar-icons">
+                    <div class="notification-icon mx-2" id="theme-toggle" title="Cambiar tema">
+                        <i id="theme-icon" class="fas fa-moon"></i>
+                    </div>
+                    <div class="notification-icon">
+                        <i class="fa-solid fa-bell"></i>
+                        <span class="notification-badge">0</span>
+                    </div>
+                    <div class="chat-icon">
+                        <i class="fa-solid fa-comment-dots"></i>
+                        <span class="notification-badge">0</span>
+                    </div>
+                </div>
+                <div class="dropdown">
+                    <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
+                        <i class="fa-solid fa-user-circle fa-xl"></i>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end shadow">
+                        <li><a class="dropdown-item" href=""><i class="fa-solid fa-user me-2"></i>Perfil</a></li>
+                        <li><a class="dropdown-item" href=""><i class="fa-solid fa-gear me-2"></i>Configuración</a></li>
+                        <li><hr class="dropdown-divider"></li>
+                        <li><a class="dropdown-item" href="" id="logoutBtn"><i class="fa-solid fa-right-from-bracket me-2"></i>Cerrar Sesión</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </header>
+    
+    <!-- Sidebar izquierdo -->
+    <aside class="sidebar">
+        
+        <h2><span>PRODIGIOS</span></h2>
+        <div class="profile-section">
+            <img src="src/assets/img/user.jpg" alt="Foto de perfil" class="profile-img">
+            <h4 class="profile-name">Luis Miguel Roque Huacca</h4>
+            <p class="profile-role">Administrador</p>
+        </div>
+        <ul class="menu">
+            <li><a href="#" class="active" onclick="toggleVisibility('dashboard', null, 'Dashboard')"><i class="fa-solid fa-house"></i><span>Dashboard</span></a></li>
+            <li>
+                <details>
+                    <summary><i class="fa-solid fa-pen-to-square"></i><span>Registro</span></summary>
+                    <ul class="submenu">
+                        <li><a href="#" onclick="toggleVisibility(null, 'curso', 'Registro de Cursos')"><i class="fa-solid fa-book"></i><span>Registrar Curso</span></a></li>
+                        <li><a href="#" onclick="toggleVisibility(null, 'docente', 'Registro de Docentes')"><i class="fa-solid fa-chalkboard-user"></i><span>Registrar Docente</span></a></li>
+                        <li><a href="#" onclick="toggleVisibility(null, 'estudiante', 'Registro de Estudiantes')"><i class="fa-solid fa-user-graduate"></i><span>Registrar Estudiante</span></a></li>
+                    </ul>
+                </details>
+            </li>
+            <li><a href="#" onclick="toggleVisibility('reporte', null, 'Reportes')"><i class="fa-solid fa-chart-pie"></i><span>Reportes</span></a></li>
+            <li><a href="#" onclick="toggleVisibility('configuracion', null, 'Configuración')"><i class="fa-solid fa-gear"></i><span>Configuración</span></a></li>
+        </ul>
+    </aside>
+    
+    <!-- Contenido principal -->
+    <main class="main-content">
+        <div class="suboption-panel" id="suboption-panel">
+
+            <!-- Dashboard Section -->
+            <div class="dashboard">
+                <h2 class="section-title">Panel de Control</h2>
+                <div class="dashboard-cards">
+                    <div class="card">
+                        <h3><i class="fa-solid fa-user-graduate me-2"></i> Estudiantes Registrados</h3>
+                        <p id="total-estudiantes">0</p>
+                        <small>Total en el sistema</small>
+                    </div>
+                    <div class="card">
+                        <h3><i class="fa-solid fa-chalkboard-user me-2"></i> Docentes Activos</h3>
+                        <p id="total-docentes">0</p>
+                        <small>Enseñando actualmente</small>
+                    </div>
+                    <div class="card">
+                        <h3><i class="fa-solid fa-book"></i> Cursos Disponibles</h3>
+                        <p id="total-cursos">0</p>
+                        <small>Ofertados este semestre</small>
+                    </div>
+                    <div class="card">
+                        <h3><i class="fa-solid fa-calendar-check me-2"></i> Clases Esta Semana</h3>
+                        <p>42</p>
+                        <small>Programadas</small>
+                    </div>
+                </div>
+                
+                <div class="dashboard-charts">
+                    <div class="chart-container">
+                        <h4><i class="fa-solid fa-chart-pie"></i> Distribución por Niveles</h4>
+                        <canvas id="nivelEstudiantesChart" height="280"></canvas>
+                    </div>
+                    <div class="chart-container">
+                        <h4><i class="fa-solid fa-chart-bar"></i> Cursos por Categoría</h4>
+                        <canvas id="categoriaCursosChart" height="280"></canvas>
+                    </div>
+                    <div class="chart-container">
+                        <h4><i class="fa-solid fa-chart-line"></i> Estudiantes por Curso</h4>
+                        <canvas id="estudiantesPorCursoChart" height="280"></canvas>
+                    </div>
+                </div>
+                
+                <div class="recent-activities">
+                    <h3><i class="fa-solid fa-clock-rotate-left"></i> Actividades Recientes</h3>
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle ">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>Fecha</th>
+                                    <th>Descripción</th>
+                                    <th>Usuario</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tabla-actividades">
+                                <tr>
+                                    <td>2023-11-15</td>
+                                    <td>Nuevo estudiante registrado: María Rodríguez</td>
+                                    <td>Admin</td>
+                                </tr>
+                                <tr>
+                                    <td>2023-11-14</td>
+                                    <td>Curso de Piano Avanzado creado</td>
+                                    <td>Admin</td>
+                                </tr>
+                                <tr>
+                                    <td>2023-11-13</td>
+                                    <td>Pago registrado: Carlos Mendoza</td>
+                                    <td>Admin</td>
+                                </tr>
+                                <tr>
+                                    <td>2023-11-12</td>
+                                    <td>Actualización de horarios</td>
+                                    <td>Admin</td>
+                                </tr>
+                                <tr>
+                                    <td>2023-11-10</td>
+                                    <td>Nueva docente: Laura Méndez</td>
+                                    <td>Admin</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <!--Estudent section-->
+            <div class="gestion-estudiante">
+                <!-- Formulario para ingresar datos -->
+                <div class="form-container">
+                    <h3 class="section-title">Registrar Nuevo Estudiante</h3>
+                    <div class="row g-3">
+                        <div class="col-md-4">
+                            <label for="nombre" class="form-label">Nombre</label>
+                            <input type="text" id="nombre" class="form-control" placeholder="Ingrese el nombre completo">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="dni" class="form-label">DNI</label>
+                            <input type="text" id="dni" class="form-control" placeholder="Ingrese el DNI">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="fecha_nacimiento" class="form-label">Fecha de Nacimiento</label>
+                            <input type="date" id="fecha_nacimiento" class="form-control">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="direccion" class="form-label">Dirección</label>
+                            <input type="text" id="direccion" class="form-control" placeholder="Ingrese la dirección">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="contacto" class="form-label">Contacto</label>
+                            <input type="text" id="contacto" class="form-control" placeholder="Ingrese un número de contacto">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="curso" class="form-label">Curso</label>
+                            <select id="curso" class="form-select">
+                                <option value="" disabled selected>Seleccione un curso</option>
+                                <option value="Guitarra">Guitarra</option>
+                                <option value="Canto">Canto</option>
+                                <option value="Piano">Piano</option>
+                                <option value="Ukelele">Ukelele</option>
+                                <option value="Requinto">Requinto</option>
+                                <option value="Violin">Violin</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="nivel" class="form-label">Nivel</label>
+                            <select id="nivel" class="form-select">
+                                <option value="" disabled selected>Seleccione un nivel</option>
+                                <option value="Principiante">Principiante</option>
+                                <option value="Intermedio">Intermedio</option>
+                                <option value="Avanzado">Avanzado</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="horario" class="form-label">Horario</label>
+                            <input type="text" id="horario" class="form-control" placeholder="Ingrese el horario">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="estado" class="form-label">Estado</label>
+                            <select id="estado" class="form-select">
+                                <option value="" disabled selected>Seleccione el estado</option>
+                                <option value="Sin Confirmar">Sin Confirmar</option>
+                                <option value="Pendiente">Pendiente</option>
+                                <option value="Confirmado">Confirmado</option>
+                            </select>
+                        </div>
+                    </div>
+                    <button class="btn btn-custom mt-3" id="registrar">Registrar Estudiante</button>
+                </div>
+                <table id="tablaDinamica" class="table table-striped table-bordered" style="width:100%">
+                    <thead class="table-dark">
+                        <tr>
+                            <th>ID</th>
+                            <th>Nombre</th>
+                            <th>DNI</th>
+                            <th>Fecha Nac.</th>
+                            <th>Dirección</th>
+                            <th>Contacto</th>
+                            <th>Curso</th>
+                            <th>Nivel</th>
+                            <th>Horario</th>
+                            <th>Estado</th>
+                            <th>Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Aquí se agregarán las filas dinámicamente -->
+                    </tbody>
+                </table>
+            </div>
+
+            <!--teacher section-->
+            <div class="gestion-docente">
+                <div class="form-container ">
+                    <h3 class="section-title">Registrar Nuevo Docente</h3>
+                    <div class="row g-3">
+                        <div class="col-md-4">
+                            <label for="nombreDocente" class="form-label">Nombres</label>
+                            <input type="text" class="form-control" id="nombreDocente" placeholder="Ingrese el nombre completo" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="dniDocente" class="form-label">DNI</label>
+                            <input type="text" class="form-control" id="dniDocente" placeholder="Ingrese el número de DNI" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="fechaNacDocente" class="form-label">Fecha de Nacimiento</label>
+                            <input type="date" class="form-control" id="fechaNacDocente" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="especialidadDocente" class="form-label">Especialidad</label>
+                            <input type="text" class="form-control" id="especialidadDocente" placeholder="Ingrese la especialidad" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="gradoDocente" class="form-label">Grado Académico</label>
+                            <input type="text" class="form-control" id="gradoDocente" placeholder="Ingrese el grado académico" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="experienciaDocente" class="form-label">Experiencia (años)</label>
+                            <input type="number" class="form-control" id="experienciaDocente" placeholder="Ingrese los años de experiencia" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="horarioDocente" class="form-label">Horario Disponible</label>
+                            <input type="text" class="form-control" id="horarioDocente" placeholder="Ingrese el horario disponible" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="contactoDocente" class="form-label">Contacto</label>
+                            <input type="email" class="form-control" id="contactoDocente" placeholder="Ingrese el correo de contacto" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="salarioDocente" class="form-label">Salario (PEN)</label>
+                            <input type="number" class="form-control" id="salarioDocente" placeholder="Ingrese el salario esperado" required>
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-custom mt-3" id="registrarDocente">Registrar Docente</button>
+                </div>
+                <table id="tablaDinamicaDocente" class="table table-striped table-bordered" style="width:100%">
+                    <thead class="table-dark">
+                        <tr>
+                            <th>ID</th>
+                            <th>Nombres</th>
+                            <th>DNI</th>
+                            <th>Fecha Nac.</th>
+                            <th>Especialidad</th>
+                            <th>Grado Académico</th>
+                            <th>Experiencia</th>
+                            <th>Horario</th>
+                            <th>Contacto</th>
+                            <th>Salario</th>
+                            <th>Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+            </div>
+
+            <!--signature section-->
+            <div class="gestion-curso">
+                <div class="form-container">
+                    <h3 class="section-title">Registrar Nuevo Curso</h3>
+                    <div class="row g-3">
+                        <div class="col-md-4">
+                            <label for="nombreCurso" class="form-label">Nombres</label>
+                            <input type="text" id="nombreCurso" class="form-control" placeholder="Ingrese el nombre del curso" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="descripcionCurso" class="form-label">Descripción</label>
+                            <textarea id="descripcionCurso" class="form-control" rows="1" placeholder="Ingrese una breve descripción" required></textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="duracionCurso" class="form-label">Duración (horas)</label>
+                            <input type="number" id="duracionCurso" class="form-control" placeholder="Ingrese la duración" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="nivelCurso" class="form-label">Nivel</label>
+                            <select id="nivelCurso" class="form-select" required>
+                                <option value="" disabled selected>Seleccione el nivel</option>
+                                <option value="Básico">Básico</option>
+                                <option value="Intermedio">Intermedio</option>
+                                <option value="Avanzado">Avanzado</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="horarioCurso" class="form-label">Horario</label>
+                            <input type="text" id="horarioCurso" class="form-control" placeholder="Ingrese el horario" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="docenteCurso" class="form-label">Docente</label>
+                            <input type="text" id="docenteCurso" class="form-control" placeholder="Ingrese el nombre del docente" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="numPlazaCurso" class="form-label">N° de Plazas</label>
+                            <input type="number" id="numPlazaCurso" class="form-control" placeholder="Ingrese el número de plazas" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="costoCurso" class="form-label">Costo (PEN)</label>
+                            <input type="number" id="costoCurso" class="form-control" placeholder="Ingrese el costo" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="materialCurso" class="form-label">Material (opcional)</label>
+                            <textarea id="materialCurso" class="form-control" rows="1" placeholder="Describa los materiales (opcional)"></textarea>
+                        </div>
+                    </div>
+                    <button class="btn btn-custom mt-3" id="registrarCurso">Registrar Curso</button>
+                </div>
+                <table id="tablaDinamicaCurso" class="table table-striped table-bordered" style="width:100%">
+                    <thead class="table-dark">
+                        <tr>
+                            <th>ID</th>
+                            <th>Nombres</th>
+                            <th>Descripción</th>
+                            <th>Duración</th>
+                            <th>Nivel</th>
+                            <th>Horario</th>
+                            <th>Docente</th>
+                            <th>N° de Plazas</th>
+                            <th>Costo</th>
+                            <th>Material</th>
+                            <th>Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Aquí se agregarán las filas dinámicamente -->
+                    </tbody>
+                </table>
+            </div>
+            
+            <!-- Report Section -->
+            <div class="reporte" style="display:none">
+                <h2 class="section-title">Reportes Generales</h2>
+                <div class="row">
+                    <div class="col-lg-6 mb-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <div class="card-header bg-primary text-white d-flex align-items-center">
+                                <i class="fas fa-chart-bar me-2"></i> Estudiantes por Curso
+                            </div>
+                            <div class="card-body">
+                                <canvas id="reporteEstudiantesCurso" height="300"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-6 mb-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <div class="card-header bg-success text-white d-flex align-items-center">
+                                <i class="fas fa-chart-pie me-2"></i> Distribución de Niveles
+                            </div>
+                            <div class="card-body">
+                                <canvas id="reporteNiveles" height="300"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mt-4">
+                    <button class="btn btn-primary btn-lg"><i class="fas fa-file-pdf me-2"></i></button>
+                    <button class="btn btn-success btn-lg"><i class="fas fa-file-excel me-2"></i></button>
+                    <button class="btn btn-secondary btn-lg"><i class="fas fa-print me-2"></i></button>
+                </div>
+            </div>
+            
+            <!-- Configuration Section -->
+            <div class="configuracion" style="display:none">
+                <h2 class="section-title">Configuración del Sistema</h2>
+                
+                <div class="config-row">
+                    <!-- Configuración de Usuario -->
+                    <div class="config-card">
+                        <div class="card-header bg-info text-white">
+                            <i class="fas fa-user-cog"></i> Configuración de Usuario
+                        </div>
+                        <div class="card-body">
+                            <form>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Nombre</label>
+                                    <input type="text" class="form-control form-control-lg" value="Luis Miguel Roque Huacca">
+                                </div>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Nombre de usuario</label>
+                                    <input type="text" class="form-control form-control-lg" value="Luis Miguel Roque Huacca">
+                                </div>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Correo electrónico</label>
+                                    <input type="email" class="form-control form-control-lg" value="luis@gmail.com">
+                                </div>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Foto de perfil</label>
+                                    <div class="d-flex align-items-center gap-3">
+                                        <img src="https://via.placeholder.com/80" alt="Foto de perfil" class="img-fluid rounded-circle" style="width: 80px; height: 80px; object-fit: cover;">
+                                        <div>
+                                            <button class="btn btn-outline-info btn-sm">Cambiar</button>
+                                            <button class="btn btn-outline-danger btn-sm">Eliminar</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <button type="submit" class="btn btn-info btn-lg w-100">
+                                    <i class="fas fa-save me-2"></i>Guardar Cambios
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                    
+                    <!-- Seguridad -->
+                    <div class="config-card">
+                        <div class="card-header bg-warning text-dark">
+                            <i class="fas fa-lock"></i> Seguridad
+                        </div>
+                        <div class="card-body">
+                            <form>
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Contraseña actual</label>
+                                    <input type="password" class="form-control form-control-lg">
+                                </div>
+                                
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Nueva contraseña</label>
+                                    <input type="password" class="form-control form-control-lg" placeholder="Ingrese nueva contraseña">
+                                    <div class="progress mt-2" style="height: 8px;">
+                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <div class="form-text">La contraseña debe tener al menos 8 caracteres</div>
+                                </div>
+                                
+                                <div class="mb-4">
+                                    <label class="form-label fw-medium">Confirmar nueva contraseña</label>
+                                    <input type="password" class="form-control form-control-lg" placeholder="Confirme su nueva contraseña">
+                                </div>
+                                
+                                <h5 class="mt-4 mb-3">Verificación en Dos Pasos</h5>
+                                <div class="switch-container">
+                                    <div class="switch-label">
+                                        <h6 class="mb-0">Autenticación por SMS</h6>
+                                        <p class="mb-0 text-muted small">Verificación mediante mensaje de texto</p>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox">
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                
+                                <div class="switch-container">
+                                    <div class="switch-label">
+                                        <h6 class="mb-0">Autenticación por Correo</h6>
+                                        <p class="mb-0 text-muted small">Verificación mediante correo electrónico</p>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" checked>
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                
+                                <button type="submit" class="btn btn-warning btn-lg w-100 mt-3">
+                                    <i class="fas fa-sync-alt me-2"></i>Actualizar Contraseña
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                    
+                    <!-- Apariencia -->
+                    <div class="config-card">
+                        <div class="card-header bg-primary text-white">
+                            <i class="fas fa-palette"></i> Apariencia
+                        </div>
+                        <div class="card-body">
+                            <h5 class="mb-3">Tema</h5>
+                            <div class="row mb-4">
+                                <div class="col-4">
+                                    <div class="theme-selector" data-theme="light">
+                                        <i class="fas fa-sun"></i>
+                                        <h6>Claro</h6>
+                                    </div>
+                                </div>
+                                <div class="col-4">
+                                    <div class="theme-selector active" data-theme="dark">
+                                        <i class="fas fa-moon"></i>
+                                        <h6>Oscuro</h6>
+                                    </div>
+                                </div>
+                                <div class="col-4">
+                                    <div class="theme-selector" data-theme="default">
+                                        <i class="fas fa-adjust"></i>
+                                        <h6>Default</h6>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <h5 class="mt-4 mb-3">Personalización</h5>
+                            <div class="row">
+                                <div class="col-6 mb-3">
+                                    <label class="form-label fw-medium">Color primario</label>
+                                    <input type="color" class="form-control form-control-color" value="#2c3e50" title="Elige tu color primario">
+                                </div>
+                                <div class="col-6 mb-3">
+                                    <label class="form-label fw-medium">Color secundario</label>
+                                    <input type="color" class="form-control form-control-color" value="#3498db" title="Elige tu color secundario">
+                                </div>
+                                <div class="col-6 mb-3">
+                                    <label class="form-label fw-medium">Color de acento</label>
+                                    <input type="color" class="form-control form-control-color" value="#ff9900" title="Elige tu color de acento">
+                                </div>
+                                <div class="col-6 mb-3">
+                                    <label class="form-label fw-medium">Densidad</label>
+                                    <select class="form-select form-control-lg">
+                                        <option value="compacto">Compacto</option>
+                                        <option value="normal" selected>Normal</option>
+                                        <option value="espaciado">Espaciado</option>
+                                    </select>
+                                </div>
+                            </div>
+                            
+                            <h5 class="mt-4 mb-3">Fuentes</h5>
+                            <select class="form-select form-control-lg mb-3">
+                                <option selected>Open Sans</option>
+                                <option>Roboto</option>
+                                <option>Montserrat</option>
+                                <option>Poppins</option>
+                            </select>
+                            
+                            <div class="form-check form-switch mb-3">
+                                <input class="form-check-input" type="checkbox" id="fontSmoothSwitch" checked>
+                                <label class="form-check-label" for="fontSmoothSwitch">Suavizado de fuentes</label>
+                            </div>
+                            
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="animationSwitch" checked>
+                                <label class="form-check-label" for="animationSwitch">Animaciones</label>
+                            </div>
+                            
+                            <button class="btn btn-primary btn-lg w-100 mt-4">
+                                <i class="fas fa-save me-2"></i>Guardar Personalización
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="config-row">
+                    <div class="config-card system-card">
+                        <div class="card-header bg-secondary text-white">
+                            <i class="fas fa-cog"></i> Sistema
+                        </div>
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <h5 class="mb-4">Información del Sistema</h5>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Versión</div>
+                                        <div class="metric-value">1.2.0</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Última actualización</div>
+                                        <div class="metric-value">15 Nov 2023</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Soporte</div>
+                                        <div class="metric-value">soporte@prodigios.edu</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Estado</div>
+                                        <div class="metric-value">Operativo</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Licencia</div>
+                                        <div class="metric-value">Premium</div>
+                                    </div>
+                                    
+                                    <div class="system-metric">
+                                        <div class="metric-label">Próxima actualización</div>
+                                        <div class="metric-value">15 Dic 2023</div>
+                                    </div>
+                                </div>
+                                
+                                <div class="col-md-6">
+                                    <h5 class="mb-4">Recursos del Sistema</h5>
+                                    
+                                    <div class="mb-4">
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <div>
+                                                <h6 class="mb-0">Almacenamiento</h6>
+                                                <p class="mb-0 text-muted small">15.8 GB de 50 GB usados</p>
+                                            </div>
+                                            <div class="text-primary">31.6%</div>
+                                        </div>
+                                        <div class="progress" style="height: 8px;">
+                                            <div class="progress-bar" role="progressbar" style="width: 31.6%;" aria-valuenow="31.6" aria-valuemin="0" aria-valuemax="100"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <div>
+                                                <h6 class="mb-0">Base de Datos</h6>
+                                                <p class="mb-0 text-muted small">2.4 MB de 100 MB usados</p>
+                                            </div>
+                                            <div class="text-success">2.4%</div>
+                                        </div>
+                                        <div class="progress" style="height: 8px;">
+                                            <div class="progress-bar bg-success" role="progressbar" style="width: 2.4%;" aria-valuenow="2.4" aria-valuemin="0" aria-valuemax="100"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <div>
+                                                <h6 class="mb-0">Uso de CPU</h6>
+                                                <p class="mb-0 text-muted small">Promedio de los últimos 30 días</p>
+                                            </div>
+                                            <div class="text-info">42%</div>
+                                        </div>
+                                        <div class="progress" style="height: 8px;">
+                                            <div class="progress-bar bg-info" role="progressbar" style="width: 42%;" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <div>
+                                                <h6 class="mb-0">Memoria</h6>
+                                                <p class="mb-0 text-muted small">1.2 GB de 4 GB usados</p>
+                                            </div>
+                                            <div class="text-warning">30%</div>
+                                        </div>
+                                        <div class="progress" style="height: 8px;">
+                                            <div class="progress-bar bg-warning" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="d-grid gap-2">
+                                        <button class="btn btn-outline-secondary btn-lg">
+                                            <i class="fas fa-sync-alt me-2"></i>Buscar Actualizaciones
+                                        </button>
+                                        <button class="btn btn-secondary btn-lg">
+                                            <i class="fas fa-cloud-download-alt me-2"></i>Actualizar Sistema
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        let nivelEstudiantesChart;
+        let categoriaCursosChart;
+        let estudiantesPorCursoChart;
+
+        let nextIds = {estudiantes: 1, docentes: 1, cursos: 1};
+
+        let editingInfo = {tipo: null, id: null};
+
+        // Estado de la aplicación
+        const state = {
+            estudiantes: [],
+            docentes: [],
+            cursos: [],
+            actividades: []
+        };
+
+        // Inicialización
+        document.addEventListener('DOMContentLoaded', () => {
+            initCharts();
+            
+            initializeDataTable();
+            initializeDataTableDocente();
+            initializeDataTableCurso();
+            
+            updateCounters();
+            updateCharts();
+            initEventListeners();
+
+            loadTheme();
+            document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+        });
+
+
+        const registrarBtn = document.getElementById('registrar');
+        const registrarBtnDocente = document.getElementById('registrarDocente');
+        const registrarBtnCurso = document.getElementById('registrarCurso');
+
+        // Funciones auxiliares
+        function updateStateFromTable(type) {
+
+            const tableId = type === 'docentes' ? '#tablaDinamicaDocente' : 
+           type === 'cursos' ? '#tablaDinamicaCurso' : '#tablaDinamica';
+
+            if ($.fn.DataTable.isDataTable(tableId)) {
+                const table = $(tableId).DataTable();
+                state[type] = table.rows().data().map(row => ({
+                    id: parseInt(row[0]),
+                    nombre: row[1],
+                    dni: row[2],
+                    fecha_nacimiento: row[3],
+                    direccion: row[4],
+                    contacto: row[5],
+                    curso: row[6],
+                    nivel: row[7],
+                    horario: row[8],
+                    estado: row[9]
+                })).toArray();
+            }
+        }
+
+        // FUNCIÓN updateCharts 
+        function updateCharts() {
+            // 1. Distribución por niveles 
+            const niveles = { Principiante: 0, Intermedio: 0, Avanzado: 0 };
+            const estudiantesPorCurso = {};
+            
+            // Verificar SI EXISTE la tabla de estudiantes
+            if ($.fn.DataTable.isDataTable('#tablaDinamica')) {
+                const studentTable = $('#tablaDinamica').DataTable();
+                const studentRows = studentTable.rows().data().toArray();
+                
+                studentRows.forEach(row => {
+                    const nivel = row[7];
+                    const curso = row[6];
+                    
+                    // Contar niveles
+                    if (nivel) niveles[nivel]++;
+                    
+                    // Contar cursos (dinámico)
+                    if (curso) {
+                        if (!estudiantesPorCurso[curso]) {
+                            estudiantesPorCurso[curso] = 0;
+                        }
+                        estudiantesPorCurso[curso]++;
+                    }
+                });
+            }
+
+            // 2. Actualizar gráfica de niveles
+            if (nivelEstudiantesChart) {
+                nivelEstudiantesChart.data.datasets[0].data = Object.values(niveles);
+                nivelEstudiantesChart.update();
+            }
+
+            // 3. Actualizar gráfica de estudiantes por curso (CORREGIDO)
+            if (estudiantesPorCursoChart) {
+                // Actualizar etiquetas Y datos
+                estudiantesPorCursoChart.data.labels = Object.keys(estudiantesPorCurso);
+                estudiantesPorCursoChart.data.datasets[0].data = Object.values(estudiantesPorCurso);
+                estudiantesPorCursoChart.update();
+            }
+
+            // 4. Cursos por categoría
+
+            const cursosPorCategoria = {};
+            
+            // Verificar SI EXISTE la tabla de cursos
+            if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+                const courseTable = $('#tablaDinamicaCurso').DataTable();
+                const courseRows = courseTable.rows().data().toArray();
+                
+                courseRows.forEach(row => {
+                    const categoria = row[1];
+                    if (categoria) {
+                        if (!cursosPorCategoria[categoria]) {
+                            cursosPorCategoria[categoria] = 0;
+                        }
+                        cursosPorCategoria[categoria]++;
+                    }
+                });
+            }
+
+            // 5. Actualizar gráfica de cursos
+            if (categoriaCursosChart) {
+                // Actualizar etiquetas Y datos
+                categoriaCursosChart.data.labels = Object.keys(cursosPorCategoria);
+                categoriaCursosChart.data.datasets[0].data = Object.values(cursosPorCategoria);
+                categoriaCursosChart.update();
+            }
+        }
+
+        function initializeDataTable() {
+            if ($.fn.DataTable.isDataTable('#tablaDinamica')) $('#tablaDinamica').DataTable().destroy();
+            
+            $('#tablaDinamica').DataTable({
+                dom: 'Blfrtip',
+                buttons: [
+                    {
+                        extend: "excelHtml5",
+                        text: "<i class='fa-solid fa-file-excel'></i>",
+                        titleAttr: "Exportar a Excel",
+                        className: "btn btn-success",
+                        exportOptions: {
+                            columns: [0,1,2,3,4,5,6,7,8,9]
+                        }
+                    },
+                    {
+                        extend: "pdfHtml5",
+                        text: "<i class='fa-solid fa-file-pdf'></i>",
+                        titleAttr: "Esportar a PDF",
+                        className: "btn btn-danger",
+                        exportOptions: {
+                            columns: [0,1,2,3,4,5,6,7,8,9]
+                        }
+                    },
+                    {
+                        extend: "print",
+                        text: "<i class='fa-solid fa-print'></i>",
+                        titleAttr: "Imprimir",
+                        className: "btn btn-info",
+                        exportOptions: {
+                            columns: [0,1,2,3,4,5,6,7,8,9]
+                        },
+                    }, 
+                ],
+                language: {
+                    url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+                },
+                lengthMenu: [3, 6, 9, 12],
+                columnDefs: [
+                    { orderable: false, targets: [10] }, 
+                    { searchable: false, targets: [10] },
+                    {width: "10%", targets: [5]},
+                    {targets: -1},
+                    {data: null},
+                ], 
+                pageLength: 5,
+            });
+        }
+
+        registrarBtn.addEventListener('click', function () {
+            const nombre = document.getElementById('nombre').value;
+            const dni = document.getElementById('dni').value;
+            const fecha_nacimiento = document.getElementById('fecha_nacimiento').value;
+            const direccion = document.getElementById('direccion').value;
+            const contacto = document.getElementById('contacto').value;
+            const curso = document.getElementById('curso').value;
+            const nivel = document.getElementById('nivel').value;
+            const horario = document.getElementById('horario').value;
+            const estado = document.getElementById('estado').value;
+            
+            if (nombre && dni && fecha_nacimiento && direccion && contacto && curso && nivel && horario && estado) {
+                const table = $('#tablaDinamica').DataTable();
+                if (editingInfo.tipo === 'estudiante' && editingInfo.id !== null) {
+                    // Actualizar estudiante existente
+                    table.rows().every(function() {
+                        const data = this.data();
+                        if (parseInt(data[0]) === editingInfo.id) {
+                            this.data([editingInfo.id, nombre, dni, fecha_nacimiento, direccion,contacto, curso,nivel,horario, estado,
+                                '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+                            ]);
+                        }
+                    });
+                } else {
+                    table.row.add([nextIds.estudiantes++, nombre, dni, fecha_nacimiento, direccion,contacto, curso,nivel,horario, estado,
+                        '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']).draw();
+                }
+
+                document.getElementById('nombre').value = '';
+                document.getElementById('dni').value = '';
+                document.getElementById('fecha_nacimiento').value = '';
+                document.getElementById('direccion').value = '';
+                document.getElementById('contacto').value = '';
+                document.getElementById('curso').value = '';
+                document.getElementById('nivel').value = '';
+                document.getElementById('horario').value = '';
+                document.getElementById('estado').value = '';
+
+                // Resetear estado
+                editingInfo = { tipo: null, id: null };
+                $('#registrar').text('Registrar Estudiante');
+
+            } else {
+                alert("Por favor, complete todos los campos antes de registrar.");
+            }
+            
+            updateAll();
+        });
+
+        $('#tablaDinamica').on('click', '.btn-edit', function () {
+            const row = $(this).closest('tr');
+            const data = $('#tablaDinamica').DataTable().row(row).data();
+            editingInfo = { tipo: 'estudiante', id: parseInt(data[0]) };
+            document.getElementById('nombre').value = data[1];
+            document.getElementById('dni').value = data[2];
+            document.getElementById('fecha_nacimiento').value = data[3];
+            document.getElementById('direccion').value = data[4];
+            document.getElementById('contacto').value = data[5];
+            document.getElementById('curso').value = data[6];
+            document.getElementById('nivel').value = data[7];
+            document.getElementById('horario').value = data[8];
+            document.getElementById('estado').value = data[9];
+            $('#registrar').text('Actualizar');
+            updateAll();
+        });
+        $('#tablaDinamica').on('click', '.btn-delete', function () {
+            const row = $(this).closest('tr');
+            $('#tablaDinamica').DataTable().row(row).remove().draw();
+            updateAll();
+        });
+        
+        function initializeDataTableDocente() {
+            if ($.fn.DataTable.isDataTable('#tablaDinamicaDocente')) {
+                $('#tablaDinamicaDocente').DataTable().destroy();
+            }
+
+            $('#tablaDinamicaDocente').DataTable({
+                dom: 'Blfrtip',
+                buttons: [
+                    {
+                        extend: "excelHtml5",
+                        text: "<i class='fas fa-file-excel'></i>",
+                        titleAttr: "Exportar a Excel",
+                        className: "btn btn-success",
+                        exportOptions: {
+                            columns: [0,1,2,3,4,5,6,7,8,9]
+                        }
+                    },
+                    {
+                        extend: "pdfHtml5",
+                        text: "<i class='fa-solid fa-file-pdf'></i>",
+                        titleAttr: "Exportar a PDF",
+                        className: "btn btn-danger",
+                        exportOptions: {
+                            columns: [0,1,2,3,4,5,6,7,8,9]
+                        }
+                    },
+                    {
+                        extend: "print",
+                        text: "<i class='fa-solid fa-print'></i>",
+                        titleAttr: "Imprimir",
+                        className: "btn btn-info",
+                        exportOptions: {
+                            columns: [0,1,2,3,4,5,6,7,8,9]
+                        }
+                    }
+                ],
+                language: {
+                    url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+                },
+                lengthMenu: [3, 6, 9, 12],
+                columnDefs: [
+                    { orderable: false, targets: [-1,0,1,2,3,4,5,6,7,8,9,10]}, // Deshabilitar ordenación en la última columna (Acciones)
+                    { searchable: false, targets: -1 }, // Deshabilitar búsqueda en la última columna
+                    {width: "10%", target: [6]}
+                ],
+                pageLength: 5,
+            });
+        }
+
+        registrarBtnDocente.addEventListener('click', function () {
+            const nombre = document.getElementById('nombreDocente').value;
+            const dni = document.getElementById('dniDocente').value;
+            const fechaNac = document.getElementById('fechaNacDocente').value;
+            const especialidad = document.getElementById('especialidadDocente').value;
+            const grado = document.getElementById('gradoDocente').value;
+            const experiencia = document.getElementById('experienciaDocente').value;
+            const horario = document.getElementById('horarioDocente').value;
+            const contacto = document.getElementById('contactoDocente').value;
+            const salario = document.getElementById('salarioDocente').value;
+
+            if (nombre && dni && fechaNac && especialidad && grado && experiencia && horario && contacto && salario) {
+                const table = $('#tablaDinamicaDocente').DataTable();
+                if (editingInfo.tipo === 'docente' && editingInfo.id !== null) {
+                    // Actualizar la fila por ID
+                    table.rows().every(function (rowIdx, tableLoop, rowLoop) {
+                        const data = this.data();
+                        if (parseInt(data[0]) === editingInfo.id) {
+                            this.data([
+                                editingInfo.id, nombre, dni, fechaNac, especialidad, grado, experiencia, horario, contacto, salario,
+                                '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil"></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+                            ]);
+                        }
+                    });
+                } else {
+                    table.row.add([
+                        nextIds.docentes++, nombre, dni, fechaNac, especialidad, grado, experiencia, horario, contacto, salario,
+                        '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil"></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+                    ]).draw();
+                }
+
+                document.getElementById('nombreDocente').value = '';      
+                document.getElementById('dniDocente').value = '';
+                document.getElementById('fechaNacDocente').value = '';
+                document.getElementById('especialidadDocente').value = '';
+                document.getElementById('gradoDocente').value = '';
+                document.getElementById('experienciaDocente').value = '';
+                document.getElementById('horarioDocente').value = '';
+                document.getElementById('contactoDocente').value = '';
+                document.getElementById('salarioDocente').value = '';
+                editingInfo = { tipo: null, id: null };
+                $('#registrarDocente').text('Registrar Docente');
+
+            } else {
+                alert("Por favor, complete todos los campos antes de registrar.");
+            }
+            updateAll();
+        });
+
+        $('#tablaDinamicaDocente').on('click', '.btn-edit', function () {
+            const row = $(this).closest('tr');
+            const data = $('#tablaDinamicaDocente').DataTable().row(row).data();
+            editingInfo = { tipo: 'docente', id: parseInt(data[0]) };
+            document.getElementById('nombreDocente').value = data[1];
+            document.getElementById('dniDocente').value = data[2];
+            document.getElementById('fechaNacDocente').value = data[3];
+            document.getElementById('especialidadDocente').value = data[4];
+            document.getElementById('gradoDocente').value = data[5];
+            document.getElementById('experienciaDocente').value = data[6];
+            document.getElementById('horarioDocente').value = data[7];
+            document.getElementById('contactoDocente').value = data[8];
+            document.getElementById('salarioDocente').value = data[9];
+            $('#registrarDocente').text('Actualizar');
+            updateAll();
+        });
+        $('#tablaDinamicaDocente').on('click', '.btn-delete', function () {
+            const row = $(this).closest('tr');
+            $('#tablaDinamicaDocente').DataTable().row(row).remove().draw();
+            updateAll();
+        });
+
+        function initializeDataTableCurso() {
+            if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+                $('#tablaDinamicaCurso').DataTable().destroy();
+            }
+
+            $('#tablaDinamicaCurso').DataTable({
+                dom: 'Blfrtip',
+                buttons: [
+                    {
+                        extend: "excelHtml5",
+                        text: "<i class='fa-solid fa-file-excel'></i>",
+                        titleAttr: "Exportar a Excel",
+                        className: "btn btn-success",
+                        exportOptions: {
+                            columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                        }
+                    },
+                    {
+                        extend: "pdfHtml5",
+                        text: "<i class='fa-solid fa-file-pdf'></i>",
+                        titleAttr: "Esportar a PDF",
+                        className: "btn btn-danger",
+                        exportOptions: {
+                            columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                        }
+                    },
+                    {
+                        extend: "print",
+                        text: "<i class='fa-solid fa-print'></i>",
+                        titleAttr: "Imprimir",
+                        className: "btn btn-info",
+                        exportOptions: {
+                            columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                        }
+                    }
+                ],
+                language: {
+                    url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+                },
+                lengthMenu: [3, 6, 9, 12],
+                columnDefs: [
+                    { orderable: false, targets: [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] },
+                    { searchable: false, targets: -1 },
+                    { width: "1%", targets: [5] },
+                    { targets: -1 },
+                    { data: null }
+                ],
+                pageLength: 5
+            });
+        };
+
+        registrarBtnCurso.addEventListener('click', function () {
+            const nombreCurso = document.getElementById('nombreCurso').value;
+            const descripcionCurso = document.getElementById('descripcionCurso').value;
+            const duracionCurso = document.getElementById('duracionCurso').value;
+            const nivelCurso = document.getElementById('nivelCurso').value;
+            const horarioCurso = document.getElementById('horarioCurso').value;
+            const docenteCurso = document.getElementById('docenteCurso').value;
+            const numPlazaCurso = document.getElementById('numPlazaCurso').value;
+            const costoCurso = document.getElementById('costoCurso').value;
+            const materialCurso = document.getElementById('materialCurso').value;
+            if (nombreCurso && descripcionCurso && duracionCurso && nivelCurso && horarioCurso && docenteCurso && numPlazaCurso && costoCurso && materialCurso) {
+                const table = $('#tablaDinamicaCurso').DataTable();
+                if (editingInfo.tipo === 'curso' && editingInfo.id !== null) {
+                    // Actualizar la fila por ID
+                    table.rows().every(function (rowIdx, tableLoop, rowLoop) {
+                        const data = this.data();
+                        if (parseInt(data[0]) === editingInfo.id) {
+                            this.data([editingInfo.id, nombreCurso, descripcionCurso, duracionCurso, nivelCurso, horarioCurso, docenteCurso, numPlazaCurso, costoCurso, materialCurso, 
+                            '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']);
+                        }
+                    });
+                } else {
+                    table.row.add([nextIds.cursos++, nombreCurso, descripcionCurso, duracionCurso, nivelCurso, horarioCurso, docenteCurso, numPlazaCurso, costoCurso, materialCurso,  
+                    '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']).draw();
+                }
+                document.getElementById('nombreCurso').value = '';
+                document.getElementById('descripcionCurso').value = '';
+                document.getElementById('duracionCurso').value = '';
+                document.getElementById('nivelCurso').value = '';
+                document.getElementById('horarioCurso').value = '';
+                document.getElementById('docenteCurso').value = '';
+                document.getElementById('numPlazaCurso').value = '';
+                document.getElementById('costoCurso').value = '';
+                document.getElementById('materialCurso').value = '';
+                editingInfo = { tipo: null, id: null };
+                $('#registrarCurso').text('Registrar Curso');
+            } else {
+                alert('Por favor, complete todos los campos antes de registrar.');
+            }
+            updateAll();
+        });
+
+        $('#tablaDinamicaCurso').on('click', '.btn-edit', function () {
+            const row = $(this).closest('tr');
+            const data = $('#tablaDinamicaCurso').DataTable().row(row).data();
+            editingInfo = { tipo: 'curso', id: parseInt(data[0]) };
+            document.getElementById('nombreCurso').value = data[1];
+            document.getElementById('descripcionCurso').value = data[2];
+            document.getElementById('duracionCurso').value = data[3];
+            document.getElementById('nivelCurso').value = data[4];
+            document.getElementById('horarioCurso').value = data[5];
+            document.getElementById('docenteCurso').value = data[6];
+            document.getElementById('numPlazaCurso').value = data[7];
+            document.getElementById('costoCurso').value = data[8];
+            document.getElementById('materialCurso').value = data[9];
+            $('#registrarCurso').text('Actualizar');
+            updateAll();
+        });
+        $('#tablaDinamicaCurso').on('click', '.btn-delete', function () {
+            const row = $(this).closest('tr');
+            $('#tablaDinamicaCurso').DataTable().row(row).remove().draw();
+            updateAll();
+        });
+
+        function initEventListeners() {
+            // Event listener para logout
+            document.getElementById('logoutBtn').addEventListener('click', function() {
+                localStorage.removeItem('loggedIn');
+                window.location.href = 'index.html';
+            });
+
+            // Event listeners para menú
+            document.querySelectorAll('.sidebar a').forEach(link => {
+                link.addEventListener('click', function() {
+                    document.querySelectorAll('.sidebar a').forEach(el => el.classList.remove('active'));
+                    this.classList.add('active');
+                });
+            });
+        }
+
+        function updateCounters() {
+            let totalEst = 0;
+            if ($.fn.DataTable.isDataTable('#tablaDinamica')) {
+                totalEst = $('#tablaDinamica').DataTable().rows().count();
+            }
+            document.getElementById('total-estudiantes').textContent = totalEst;
+
+            let totalDoc = 0;
+            if ($.fn.DataTable.isDataTable('#tablaDinamicaDocente')) {
+                totalDoc = $('#tablaDinamicaDocente').DataTable().rows().count();
+            }
+            document.getElementById('total-docentes').textContent = totalDoc;
+
+            let totalCur = 0;
+            if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+                totalCur = $('#tablaDinamicaCurso').DataTable().rows().count();
+            }
+            document.getElementById('total-cursos').textContent = totalCur;
+        }
+
+
+        function toggleVisibility(mainOption, subOption, title) {
+            // Ocultar todas las secciones
+            document.querySelectorAll('.suboption-panel > div').forEach(div => {
+                div.style.display = 'none';
+            });
+            
+            // Mostrar la sección seleccionada
+            if (mainOption) {
+                const section = document.querySelector(`.${mainOption.toLowerCase()}`);
+                if (section) section.style.display = 'block';
+            }
+            
+            if (subOption) {
+                const section = document.querySelector(`.gestion-${subOption}`);
+                if (section) section.style.display = 'block';
+            }
+            
+            // Actualizar título
+            if (title) document.querySelector('.navbar-brand').innerHTML = `${title}`;
+
+            // Inicializar DataTables solo cuando se muestra la sección
+            if (subOption === 'estudiante') {
+                initializeDataTable();
+            } else if (subOption === 'docente') {
+                initializeDataTableDocente();
+            } else if (subOption === 'curso') {
+                initializeDataTableCurso();
+            }
+            
+            // Reiniciar estado de edición al cambiar de sección
+            editingInfo = { tipo: null, id: null };
+            
+            // Restaurar texto de botones
+            document.querySelectorAll('#registrar, #registrarDocente, #registrarCurso')
+            .forEach(btn => {
+                if (btn.id === 'registrar') btn.textContent = 'Registrar Estudiante';
+                if (btn.id === 'registrarDocente') btn.textContent = 'Registrar Docente';
+                if (btn.id === 'registrarCurso') btn.textContent = 'Registrar Curso';
+            });
+
+            if (mainOption === 'dashboard') updateAll();
+        }
+
+        function initCharts() {
+            // Gráfico de distribución por niveles
+            const ctxNivel = document.getElementById('nivelEstudiantesChart');
+            nivelEstudiantesChart = new Chart(ctxNivel, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Principiante', 'Intermedio', 'Avanzado'],
+                    datasets: [{
+                        label: "Estudiantes por Nivel",
+                        data: [0, 0, 0], // Datos iniciales vacíos
+                        backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    maintainAspectRatio: true,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                            labels: { font: { size: 14 } }
+                        },
+                        tooltip: {
+                            bodyFont: { size: 14 },
+                            titleFont: { size: 16 }
+                        }
+                    }
+                }
+            });
+
+            // Gráfico de categorías de cursos
+            const ctxCategoria = document.getElementById('categoriaCursosChart');
+            categoriaCursosChart = new Chart(ctxCategoria, {
+                type: 'bar',
+                data: {
+                    labels: [''],
+                    datasets: [{
+                        label: 'Cursos por categoría',
+                        data: [0, 0, 0, 0, 0], // Datos iniciales vacíos
+                        backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74c3c'],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    maintainAspectRatio: true,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: { font: { size: 12 } }
+                        },
+                        x: {
+                            ticks: { font: { size: 12 } }
+                        }
+                    },
+                    plugins: { legend: { display: false } }
+                }
+            });
+            
+            //Gráfico de Estudiantes por Curso
+            estudiantesPorCursoChart = new Chart(
+                document.getElementById('estudiantesPorCursoChart'), 
+                {
+                    type: 'bar',
+                    data: {
+                        labels: [''],
+                        datasets: [{
+                            label: 'Estudiantes por Curso',
+                            data: [0, 0, 0, 0, 0],
+                            backgroundColor: [
+                                '#4e73df',
+                                '#1cc88a',
+                                '#36b9cc',
+                                '#f6c23e',
+                                '#e74c3c'
+                            ],
+                            borderRadius: 5,
+                            barThickness: 20
+                        }]
+                    },
+                    options: {
+                        maintainAspectRatio: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    font: { size: 12 }
+                                }
+                            },
+                            x: {
+                                ticks: {
+                                    font: { size: 12 }
+                                }
+                            }
+                        },
+                        plugins: {
+                            legend: { display: false },
+                            tooltip: {
+                                bodyFont: { size: 14 },
+                                titleFont: { size: 16 }
+                            }
+                        }
+                    }
+                }
+            );
+
+
+            // Gráfico para reportes
+            new Chart(
+                document.getElementById('reporteEstudiantesCurso'), 
+                {
+                    type: 'pie',
+                    data: {
+                        labels: ['Guitarra', 'Piano', 'Canto', 'Violín', 'Teoría'],
+                        datasets: [{
+                            label: 'Estudiantes por Curso',
+                            data: [15, 12, 8, 5, 3],
+                            backgroundColor: [
+                                '#4e73df',
+                                '#1cc88a',
+                                '#36b9cc',
+                                '#f6c23e',
+                                '#e74c3c'
+                            ],
+                            borderWidth: 0
+                        }]
+                    },
+                    options: {
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                                labels: {
+                                    font: {
+                                        size: 14
+                                    }
+                                }
+                            },
+                            tooltip: {
+                                bodyFont: {
+                                    size: 14
+                                },
+                                titleFont: {
+                                    size: 16
+                                }
+                            }
+                        }
+                    }
+                }
+            );
+            
+            new Chart(
+                document.getElementById('reporteNiveles'), 
+                {
+                    type: 'polarArea',
+                    data: {
+                        labels: ['Principiante', 'Intermedio', 'Avanzado'],
+                        datasets: [{
+                            label: 'Distribución de Niveles',
+                            data: [25, 15, 10],
+                            backgroundColor: [
+                                'rgba(78, 115, 223, 0.7)',
+                                'rgba(28, 200, 138, 0.7)',
+                                'rgba(54, 185, 204, 0.7)'
+                            ],
+                            borderWidth: 0
+                        }]
+                    },
+                    options: {
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                                labels: {
+                                    font: {
+                                        size: 14
+                                    }
+                                }
+                            },  
+                            tooltip: {
+                                bodyFont: {
+                                    size: 14
+                                },
+                                titleFont: {
+                                    size: 16
+                                }
+                            }
+                        }
+                    }
+                }
+            );
+            updateCharts();
+        }
+
+        function updateAll() {
+            updateStateFromTable('estudiantes');
+            updateStateFromTable('docentes');
+            updateStateFromTable('cursos');
+            updateCounters();
+            updateCharts();
+        }
+
+        document.querySelectorAll('.theme-selector').forEach(selector => {
+            selector.addEventListener('click', function() {
+                const theme = this.dataset.theme;
+                applyTheme(theme);
+                
+                document.querySelectorAll('.theme-selector').forEach(el => {
+                    el.classList.remove('active');
+                });
+                this.classList.add('active');
+            });
+        });
+
+        // Sistema de temas
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeToggleIcon = document.getElementById('theme-icon');
+        console.log(themeToggleIcon)
+
+        // Función para aplicar el tema
+        function applyTheme(theme) {
+            document.body.classList.remove('theme-light', 'theme-dark');
+            document.querySelectorAll('.theme-selector').forEach(el => {
+                el.classList.remove('theme-light', 'theme-dark', 'theme-auto');
+            });
+            
+            if(theme !== 'default') {
+                document.body.classList.add(`theme-${theme}`);
+            }
+            
+            localStorage.setItem('theme', theme);
+            
+            const themeIcon = document.getElementById('theme-icon');
+            themeIcon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+        }
+
+        // Cargar tema guardado o detectar preferencia del sistema
+        function loadTheme() {
+            const savedTheme = localStorage.getItem('theme') || 'default';
+            applyTheme(savedTheme);
+        }
+
+        // Alternar entre temas
+        function toggleTheme() {
+            const currentTheme = localStorage.getItem('theme') || 'default';
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            applyTheme(newTheme)
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/PAGINA WEB/ASISTENCIA/user.jpg b/PAGINA WEB/ASISTENCIA/user.jpg
new file mode 100644
index 0000000..e960efc
Binary files /dev/null and b/PAGINA WEB/ASISTENCIA/user.jpg differ
diff --git a/PAGINA WEB/conexion.php b/PAGINA WEB/conexion.php
index d295c5d..4056005 100644
--- a/PAGINA WEB/conexion.php	
+++ b/PAGINA WEB/conexion.php	
@@ -1,7 +1,7 @@
 <?php
     $host = "localhost";
     $usuario = "root"; 
-    $contraseña = "";
+    $contraseña = "382004";
     $nombreBaseDeDatos = "escuela_canto";
     
     $conn = new mysqli($host, $usuario, $contraseña, $nombreBaseDeDatos);
diff --git a/PAGINA WEB/main.html b/PAGINA WEB/main.html
index af24a2d..278d4b0 100644
--- a/PAGINA WEB/main.html	
+++ b/PAGINA WEB/main.html	
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="es">
     <head>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>PRODIGIOS</title>
@@ -232,12 +233,39 @@
                 background: #007bff;
                 color: #ffffff;
             }
+            .profile-icon {
+            position: absolute;
+            top: 15px;
+            right: 20px;
+            font-size: 26px;
+            color: white;
+            z-index: 1101;
+            background: transparent;  
+            border: none;              
+            }
+
+            .profile-icon a {
+            color: white;
+            text-decoration: none;
+            }
+
+            .profile-icon a:hover {
+            color: #ffcc00; 
+            }
 
         </style>
 </head>
 <body>
     <!-- Navbar -->
-    <header class="navbar" id="navbar-title">Bienvenido</header>
+    <header class="navbar">
+        <span id="navbar-title">Bienvenido</span>
+        <div class="profile-icon">
+            <a href="perfil.php" title="Mi Perfil">
+            <i class="fas fa-user-circle"></i>
+            </a>
+        </div>
+    </header>   
+
     <!-- Sidebar -->
     <aside class="sidebar">
         <h2>PRODIGIOS</h2>
diff --git a/PAGINA WEB/main.php b/PAGINA WEB/main.php
index 6d7eb6b..7cc4558 100644
--- a/PAGINA WEB/main.php	
+++ b/PAGINA WEB/main.php	
@@ -4,6 +4,7 @@
 <!DOCTYPE html>
 <html lang="es">
     <head>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>PRODIGIOS</title>
@@ -28,18 +29,23 @@
                 background-color: #ecf0f1;
             }
             /* Navbar */
+           .navbar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            background-color: #2c3e50;
+            color: white;
+            padding: 20px 20px;
+            font-size: 18px;
+            font-weight: bold;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            z-index: 2000; /* más alto que el sidebar o cualquier contenido */
+            }
             .navbar {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                background-color: #2c3e50;
-                color: white;
-                padding: 20px 20px;
-                font-size: 18px;
-                font-weight: bold;
-                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-                z-index: 1000;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             }
     
             /* Sidebar */
@@ -235,12 +241,39 @@
                 background: #007bff;
                 color: #ffffff;
             }
+            .profile-icon {
+            position: absolute;
+            top: 15px;
+            right: 20px;
+            font-size: 26px;
+            color: white;
+            z-index: 1101;
+            background: transparent;  
+            border: none;              
+            }
+
+            .profile-icon a {
+            color: white;
+            text-decoration: none;
+            }
+
+            .profile-icon a:hover {
+            color: #ffcc00; 
+            }
 
         </style>
     </head>
-    <body>
+<body>
         <!-- Navbar -->
-        <header class="navbar" id="navbar-title">Bienvenido</header>
+        <header class="navbar">
+        <span id="navbar-title">Bienvenido</span>
+        <div class="profile-icon">
+            <a href="perfil.php" title="Mi Perfil">
+            <i class="fas fa-user-circle"></i>
+            </a>
+        </div>
+        </header>
+
         <!-- Sidebar -->
         <aside class="sidebar">
             <h2>PRODIGIOS</h2>
diff --git a/PAGINA WEB/perfil.css b/PAGINA WEB/perfil.css
new file mode 100644
index 0000000..036594a
--- /dev/null
+++ b/PAGINA WEB/perfil.css	
@@ -0,0 +1,253 @@
+body {
+    margin: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f4f7fa;
+    color: #34495e;
+}
+
+/* Navbar */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: linear-gradient(90deg, #34495e, #2c3e50);
+    color: #ecf0f1;
+    padding: 16px 24px;
+    font-size: 20px;
+    font-weight: 700;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.profile-icon {
+    font-size: 28px;
+}
+
+.profile-icon a {
+    color: #ecf0f1;
+    transition: color 0.3s ease;
+}
+
+.profile-icon a:hover {
+    color: #1abc9c;
+}
+
+/* Sidebar */
+.sidebar {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    width: 240px;
+    height: calc(100% - 60px);
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    padding-top: 30px;
+    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+    transition: width 0.3s ease;
+}
+
+.sidebar h2 {
+    text-align: center;
+    font-size: 24px;
+    margin-bottom: 30px;
+    letter-spacing: 1.5px;
+    font-weight: 800;
+}
+
+.sidebar .menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar .menu li a {
+    display: flex;
+    align-items: center;
+    padding: 14px 24px;
+    color: #ecf0f1;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 16px;
+    border-left: 4px solid transparent;
+    transition: background-color 0.3s, border-color 0.3s;
+}
+
+.sidebar .menu li a i {
+    margin-right: 12px;
+    font-size: 18px;
+}
+
+.sidebar .menu li a:hover,
+.sidebar .menu li a.active {
+    background-color: #1abc9c;
+    border-left-color: #16a085;
+    color: white;
+}
+
+/* Main content */
+.main-content {
+    margin-left: 240px;
+    margin-top: 80px;
+    padding: 30px 40px;
+    background: #fff;
+    min-height: calc(100vh - 80px);
+}
+
+/* Profile card */
+.profile-card {
+    max-width: 550px;
+    margin: auto;
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 40px 35px;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+    transition: box-shadow 0.3s ease;
+}
+
+.profile-card:hover {
+    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
+}
+
+.profile-card h2 {
+    text-align: center;
+    color: #2c3e50;
+    font-weight: 700;
+    margin-bottom: 25px;
+    letter-spacing: 1.2px;
+}
+
+.profile-avatar {
+    text-align: center;
+    margin-bottom: 30px;
+    position: relative;
+}
+
+#avatarPreview {
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    object-fit: cover;
+    display: none;
+    box-shadow: 0 0 8px rgba(26, 188, 156, 0.5);
+}
+
+.default-icon {
+    font-size: 110px;
+    color: #16a085;
+    transition: color 0.3s ease;
+}
+
+.profile-avatar:hover .default-icon {
+    color: #1abc9c;
+}
+
+.custom-file-input {
+    display: none;
+}
+
+.custom-label {
+    display: inline-block;
+    background-color: #16a085;
+    color: white;
+    padding: 10px 18px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 14px;
+    margin-top: 15px;
+    transition: background-color 0.3s ease;
+}
+
+.custom-label:hover {
+    background-color: #1abc9c;
+}
+
+/* Profile info */
+.profile-info {
+    margin-bottom: 20px;
+}
+
+.profile-info label {
+    display: block;
+    font-weight: 700;
+    color: #34495e;
+    margin-bottom: 8px;
+    font-size: 15px;
+}
+
+.profile-info input,
+.profile-info textarea {
+    width: 100%;
+    padding: 12px 15px;
+    border: 1.8px solid #ccc;
+    border-radius: 8px;
+    font-size: 15px;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    resize: vertical;
+    background-color: #fafafa;
+}
+
+.profile-info input:focus,
+.profile-info textarea:focus {
+    border-color: #16a085;
+    box-shadow: 0 0 8px rgba(22, 160, 133, 0.3);
+    outline: none;
+    background-color: #fff;
+}
+
+/* Buttons */
+.buttons {
+    text-align: center;
+    margin-top: 30px;
+}
+
+.buttons button {
+    padding: 12px 25px;
+    border: none;
+    margin: 0 8px;
+    border-radius: 25px;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 15px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    box-shadow: 0 3px 8px rgba(22, 160, 133, 0.3);
+    color: white;
+}
+
+.edit-btn {
+    background-color: #2980b9;
+}
+
+.edit-btn:hover {
+    background-color: #3498db;
+    transform: scale(1.05);
+}
+
+.save-btn {
+    background-color: #27ae60;
+    display: none;
+}
+
+.save-btn:hover {
+    background-color: #2ecc71;
+    transform: scale(1.05);
+}
+
+.cancel-btn {
+    background-color: #7f8c8d;
+    display: none;
+}
+
+.cancel-btn:hover {
+    background-color: #95a5a6;
+    transform: scale(1.05);
+}
+
+/* Hover effect for all buttons */
+.buttons button:hover {
+    opacity: 0.9;
+}
diff --git a/PAGINA WEB/perfil.js b/PAGINA WEB/perfil.js
new file mode 100644
index 0000000..090abd0
--- /dev/null
+++ b/PAGINA WEB/perfil.js	
@@ -0,0 +1,29 @@
+function enableEdit() {
+    const inputs = document.querySelectorAll("input[type='text'], input[type='email']");
+    inputs.forEach(input => input.removeAttribute("readonly"));
+
+    document.querySelector('.custom-label').style.display = 'inline-block';
+    document.querySelector('.save-btn').style.display = 'inline-block';
+    document.querySelector('.cancel-btn').style.display = 'inline-block';
+    document.querySelector('.edit-btn').style.display = 'none';
+}
+
+function cancelEdit() {
+    window.location.reload();
+}
+
+function previewImage(event) {
+    const file = event.target.files[0];
+    const preview = document.getElementById("avatarPreview");
+    const icon = document.querySelector(".default-icon");
+
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = function (e) {
+            preview.src = e.target.result;
+            preview.style.display = "block";
+            icon.style.display = "none";
+        };
+        reader.readAsDataURL(file);
+    }
+}
\ No newline at end of file
diff --git a/PAGINA WEB/perfil.php b/PAGINA WEB/perfil.php
new file mode 100644
index 0000000..f11a283
--- /dev/null
+++ b/PAGINA WEB/perfil.php	
@@ -0,0 +1,83 @@
+<?php
+include("conexion.php");
+
+$usuario_id = 1;
+
+$query = "SELECT nombre, correo, telefono FROM usuarios WHERE id = ?";
+$stmt = mysqli_prepare($conn, $query);
+mysqli_stmt_bind_param($stmt, "i", $usuario_id);
+mysqli_stmt_execute($stmt);
+$result = mysqli_stmt_get_result($stmt);
+
+if (!$result) {
+    die("Error en la consulta SQL: " . mysqli_error($conn));
+}
+
+$usuario = mysqli_fetch_assoc($result) ?? ['nombre' => '', 'correo' => '', 'telefono' => ''];
+?>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <title>Perfil de Usuario</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+  <link rel="stylesheet" href="perfil.css">
+</head>
+<body>
+  <header class="navbar">
+    <span>Bienvenido a tu Perfil</span>
+    <div class="profile-icon">
+      <a href="perfil.php"><i class="fas fa-user-circle"></i></a>
+    </div>
+  </header>
+
+  <aside class="sidebar">
+    <h2>PRODIGIOS</h2>
+    <ul class="menu">
+      <li><a href="main.php"><i class="fa-solid fa-house"></i> Dashboard</a></li>
+      <li><a href="perfil.php"><i class="fa-solid fa-user"></i> Perfil</a></li>
+      <li><a href="configuracion.php"><i class="fa-solid fa-gear"></i> Configuración</a></li>
+    </ul>
+  </aside>
+
+  <main class="main-content">
+    <form method="POST" enctype="multipart/form-data">
+      <div class="profile-card">
+        <h2>Mi Perfil</h2>
+        <div class="profile-avatar">
+          <img id="avatarPreview" alt="Vista previa de foto">
+          <i class="fas fa-user-circle default-icon"></i>
+          <br>
+          <label class="custom-label" for="foto">Seleccionar Foto</label>
+          <input type="file" name="foto" id="foto" class="custom-file-input" accept="image/*" onchange="previewImage(event)">
+        </div>
+
+        <div class="profile-info">
+          <label>Nombre Completo:</label>
+          <input type="text" name="nombre" value="<?= htmlspecialchars($usuario['nombre']) ?>" readonly>
+        </div>
+        <div class="profile-info">
+          <label>Correo Electrónico:</label>
+          <input type="email" name="correo" value="<?= htmlspecialchars($usuario['correo']) ?>" readonly>
+        </div>
+        <div class="profile-info">
+          <label>Teléfono:</label>
+          <input type="text" name="telefono" value="<?= htmlspecialchars($usuario['telefono']) ?>" readonly>
+        </div>
+
+        <div class="profile-info">
+          <label>Biografía:</label>
+          <textarea name="bio" placeholder="Agrega una breve descripción sobre ti..." readonly></textarea>
+        </div>
+
+        <div class="buttons">
+          <button type="button" class="edit-btn" onclick="enableEdit()">Editar</button>
+          <button type="submit" class="save-btn">Guardar</button>
+          <button type="button" class="cancel-btn" onclick="cancelEdit()">Cancelar</button>
+        </div>
+      </div>
+    </form>
+  </main>
+  <script src="perfil.js"></script>
+</body>
+</html>
diff --git a/PRODIGIOS/app/config/conexion.php b/PRODIGIOS/app/config/conexion.php
new file mode 100644
index 0000000..064e529
--- /dev/null
+++ b/PRODIGIOS/app/config/conexion.php
@@ -0,0 +1,13 @@
+<?php
+    $host = "localhost";
+    $usuario = "root"; 
+    $contraseña = "";
+    $nombreBaseDeDatos = "prodigios"; //escuela_canto
+    
+    $conn = new mysqli($host, $usuario, $contraseña, $nombreBaseDeDatos);
+
+    if ($conn->connect_error) {
+        die("Conexión fallida: " . $conn->connect_error);
+    }
+    $conn->set_charset("utf8");
+?>
\ No newline at end of file
diff --git a/PRODIGIOS/app/config/config.php b/PRODIGIOS/app/config/config.php
new file mode 100644
index 0000000..73e2fe1
--- /dev/null
+++ b/PRODIGIOS/app/config/config.php
@@ -0,0 +1,98 @@
+<?php
+
+  session_start();
+  include("conexion.php");
+  // require_once ROOT . 'config/database.php';
+  $modalMessage = "";
+
+  if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    
+    // Inicio de sesión
+    if (isset($_POST["emailLogin"]) && isset($_POST["passwordLogin"])) {
+      $email = $_POST["emailLogin"];
+      $password = $_POST["passwordLogin"];
+
+      $stmt = $conn->prepare("SELECT contraseña,ID FROM credenciales WHERE email = ?");
+      $stmt->bind_param("s", $email);
+      $stmt->execute();
+      $result = $stmt->get_result();
+
+      if ($result->num_rows > 0) {
+        $row = $result->fetch_assoc();
+        if (password_verify($password, $row["contraseña"])) {
+          $_SESSION['user_id'] = $row['ID'];
+          header("location: index.php?page=app");
+          exit;
+        } else {
+          $modalMessage = "Email o contraseña incorrectos";
+        }
+      } else {
+        $modalMessage = "Email o contraseña incorrectos";
+      }
+      $stmt->close();
+    }
+
+    // Registro de usuario
+    else if (isset($_POST["nombreRegistro"], $_POST["apellidoRegistro"], $_POST["telefonoRegistro"], $_POST["emailRegistro"], $_POST["passwordRegistro"], $_POST["passwordRegistro1"])) {
+      if ($_POST["passwordRegistro"] == $_POST["passwordRegistro1"]) {
+        $nombre = $_POST["nombreRegistro"] . ' ' . $_POST["apellidoRegistro"];
+        $telefono = $_POST["telefonoRegistro"];
+        $emailRegistro = $_POST["emailRegistro"];
+        
+        // Validación de email
+        if (!filter_var($emailRegistro, FILTER_VALIDATE_EMAIL)) {
+          $modalMessage = "Formato de email inválido";
+        } else {
+          // Verificar si email ya existe
+          $check = $conn->prepare("SELECT email FROM credenciales WHERE email = ?");
+          $check->bind_param("s", $emailRegistro);
+          $check->execute();
+          if ($check->get_result()->num_rows > 0) {
+            $modalMessage = "El email ya está registrado";
+          } else {
+            // VALIDACIÓN DE FORTALEZA DE CONTRASEÑA AÑADIDA AQUÍ
+            $password = $_POST["passwordRegistro"];
+            $passwordErrors = [];
+            
+            if (strlen($password) < 8) {
+              $passwordErrors[] = "Debe tener al menos 8 caracteres";
+            }
+            if (!preg_match("/[A-Z]/", $password)) {
+              $passwordErrors[] = "Debe contener al menos una mayúscula";
+            }
+            if (!preg_match("/[0-9]/", $password)) {
+              $passwordErrors[] = "Debe contener al menos un número";
+            }
+            
+            if (!empty($passwordErrors)) {
+              $_SESSION['password_errors'] = $passwordErrors; 
+              $modalMessage = "Contraseña inválida"; 
+            } else {
+              // Si pasa todas las validaciones, crear el usuario
+              $passwordHash = password_hash($password, PASSWORD_DEFAULT);
+      
+              $stmt = $conn->prepare("INSERT INTO credenciales (nombre, email, telefono, contraseña) VALUES (?, ?, ?, ?)");
+              $stmt->bind_param("ssss", $nombre, $emailRegistro, $telefono, $passwordHash);
+
+              if ($stmt->execute()) {
+                $modalMessage = "Registro exitoso!";
+              } else {
+                $modalMessage = "Error en el registro. Por favor, inténtelo de nuevo.";
+                error_log("DB Error: " . $conn->error);
+              }
+              $stmt->close();
+            }
+          }
+        }
+      } else {
+        $modalMessage = "Las contraseñas no coinciden";
+      }
+    }
+    if (isset($conn) && $conn instanceof mysqli) {
+      $conn->close();
+    }
+  } else {
+    if (isset($conn) && $conn instanceof mysqli) {
+      $conn->close();
+    }
+  }
\ No newline at end of file
diff --git a/PRODIGIOS/app/config/database.php b/PRODIGIOS/app/config/database.php
new file mode 100644
index 0000000..02f6f37
--- /dev/null
+++ b/PRODIGIOS/app/config/database.php
@@ -0,0 +1,21 @@
+<?php
+
+    /*CLASE TODAVIA NO USADA*/
+class Database {
+    private $host = 'localhost';
+    private $db = 'prodigios';
+    private $user = 'root';
+    private $pass = '';
+    public $conn;
+
+    public function connect() {
+        $this->conn = null;
+        try {
+            $this->conn = new PDO("mysql:host=$this->host;dbname=$this->db", $this->user, $this->pass);
+            $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+        } catch (PDOException $e) {
+            echo 'Error de conexión: ' . $e->getMessage();
+        }
+        return $this->conn;
+    }
+}
\ No newline at end of file
diff --git a/PRODIGIOS/app/controllers/appController.php b/PRODIGIOS/app/controllers/appController.php
new file mode 100644
index 0000000..379041b
--- /dev/null
+++ b/PRODIGIOS/app/controllers/appController.php
@@ -0,0 +1,42 @@
+<?php
+require_once ROOT . 'models/Usuario.php';
+require_once ROOT . 'models/Crud.php';
+
+class AppController {
+    public function getUserInfo() {
+        session_start();
+        
+        $usuario = new Usuario();
+        $userId = $_SESSION['user_id'];
+        return $usuario->getUserInfo($userId);
+    }
+    public function getInfoTable($tabla) {
+        $crud = new Crud();
+        return $crud->mostrarTabla($tabla);
+    }
+    public function getStudentsTable() {
+        $crud = new Crud();
+        return $crud->mostrarTabla('estudiantes');
+    }
+    public function app() {
+        $userInfor = $this->getUserInfo();
+        $students = $this->getInfoTable('estudiantes');
+        $teachers = $this->getInfoTable('profesores');
+        $clases = $this->getInfoTable('clases');
+        $cursos = $this->getInfoTable('cursos');
+        
+        require_once ROOT .  'views/layouts/header.php';
+        require_once ROOT .  'views/layouts/aside.php';
+
+        require_once ROOT .  'views/partials/dashboard.php';
+        require_once ROOT .  'views/partials/attendance.php';
+        require_once ROOT .  'views/partials/calendary.php';
+        require_once ROOT .  'views/partials/adminStudent.php';
+        require_once ROOT .  'views/partials/adminTeacher.php';
+        require_once ROOT .  'views/partials/adminCourse.php';
+        require_once ROOT .  'views/partials/report.php';
+        require_once ROOT .  'views/partials/configuration.php';
+
+        require_once ROOT .  'views/layouts/footer.php';
+    }
+}
\ No newline at end of file
diff --git a/PRODIGIOS/app/controllers/authController.php b/PRODIGIOS/app/controllers/authController.php
new file mode 100644
index 0000000..2b14614
--- /dev/null
+++ b/PRODIGIOS/app/controllers/authController.php
@@ -0,0 +1,67 @@
+<?php
+require_once ROOT . 'models/Usuario.php';
+
+
+class AuthController {
+    private $usuarioModel;
+
+    public function __construct() {
+        $this->usuarioModel = new Usuario();
+    }
+    /*
+    public function login() {
+        require_once '../app/views/templates/nav.php';
+        require_once '../app/views/auth/login.php';
+        // require_once '../app/views/templates/footer.php';
+    }
+
+    public function register() {
+        require_once '../app/views/templates/nav.php';
+        require_once '../app/views/auth/register.php';
+        // require_once '../app/views/templates/footer.php';
+    }
+    */
+
+    public function login_user() {
+        session_start();
+
+        $email = $_POST['email'];
+        $password = $_POST['password'];
+
+        $user = $this->usuarioModel->findUserByEmail($email);
+
+        if ($user && $user['password'] === $password) {
+            $_SESSION['user_id'] = $user['id'];
+            $_SESSION['tipoUsuario'] = $user['tipoUsuario'];
+
+            /*
+            if ($user['tipoUsuario'] === 'admin') {
+                header('Location: index.php?page=admin_home');
+            } elseif ($user['tipoUsuario'] === 'cajero') {
+                header('Location: index.php?page=cajero_home');
+            } elseif ($user['tipoUsuario'] === 'cliente') {
+                header('Location: index.php?page=cliente_home');
+            }
+                */
+        } else {
+            echo 'Usuario o contraseña incorrectos';
+        }
+    }
+
+    public function register_user() {
+        $nombre = $_POST['nombre'];
+        $apellido = $_POST['apellido'];
+        $email = $_POST['correo'];
+        $password = $_POST['password'];
+        $telefono = $_POST['telefono'];
+        $this->usuarioModel->createUser($nombre, $apellido, $email, $password,$telefono,'cliente');
+        header('Location: index.php?page=inicio');
+    }
+
+    public function logout() {
+        session_start();
+        session_destroy();
+        header('Location: index.php?page=inicio');
+    }
+}
+?>
\ No newline at end of file
diff --git a/PRODIGIOS/app/controllers/publicController.php b/PRODIGIOS/app/controllers/publicController.php
new file mode 100644
index 0000000..e438de3
--- /dev/null
+++ b/PRODIGIOS/app/controllers/publicController.php
@@ -0,0 +1,14 @@
+<?php
+require_once ROOT . 'models/Usuario.php';
+
+class PubliController {
+    private $usuarioModel;
+
+    public function __construct() {
+        $this->usuarioModel = new Usuario();
+    }
+    public function inicio() {
+        require_once ROOT .  'views/index.php';
+    }
+    
+}
\ No newline at end of file
diff --git a/PRODIGIOS/app/database/insertaDatos.sql b/PRODIGIOS/app/database/insertaDatos.sql
new file mode 100644
index 0000000..447108a
--- /dev/null
+++ b/PRODIGIOS/app/database/insertaDatos.sql
@@ -0,0 +1,129 @@
+INSERT INTO estudiantes (nombre, apellido, fecha_nacimiento, email, telefono, direccion) VALUES
+('Ana', 'Ramírez', '2003-04-12', 'ana.ramirez@email.com', '987654321', 'Av. Perú 123'),
+('Luis', 'Fernández', '2002-07-25', 'luis.fernandez@email.com', '976543210', 'Jr. Lima 456'),
+('Carla', 'Mendoza', '2000-02-15', 'carla.mendoza@email.com', '965432109', 'Calle Sol 789'),
+('Jorge', 'Quispe', '2001-10-10', 'jorge.quispe@email.com', '954321098', 'Av. Bolívar 222'),
+('Lucía', 'Valdez', '1999-09-08', 'lucia.valdez@email.com', '943210987', 'Jr. Cusco 103'),
+('Pedro', 'Lopez', '2005-05-20', 'pedro.lopez@email.com', '932109876', 'Calle Amazonas 332'),
+('Marta', 'Castillo', '2004-06-01', 'marta.castillo@email.com', '921098765', 'Av. Arequipa 456'),
+('Daniel', 'Reyes', '2003-12-30', 'daniel.reyes@email.com', '910987654', 'Jr. Tarapacá 22'),
+('Valeria', 'Ortega', '2002-03-22', 'valeria.ortega@email.com', '989876543', 'Calle Los Álamos 15'),
+('Esteban', 'Silva', '2000-07-14', 'esteban.silva@email.com', '978765432', 'Av. Grau 99'),
+('Isabel', 'Moreno', '2001-08-25', 'isabel.moreno@email.com', '967654321', 'Pasaje Ucayali 18'),
+('Diego', 'Soto', '2004-04-01', 'diego.soto@email.com', '956543210', 'Jr. Ancash 999'),
+('Natalia', 'Rojas', '2002-11-11', 'natalia.rojas@email.com', '945432109', 'Av. La Marina 12'),
+('Gabriel', 'Salazar', '1998-01-05', 'gabriel.salazar@email.com', '934321098', 'Calle Miraflores 88'),
+('Mariana', 'Aguilar', '2003-09-09', 'mariana.aguilar@email.com', '923210987', 'Jr. Tacna 45'),
+('Bruno', 'Núñez', '2001-06-17', 'bruno.nunez@email.com', '912109876', 'Av. Ejército 70'),
+('Julieta', 'Chávez', '2000-02-28', 'julieta.chavez@email.com', '901098765', 'Calle Bolognesi 33'),
+('Rodrigo', 'García', '2002-08-15', 'rodrigo.garcia@email.com', '990987654', 'Av. La Paz 20'),
+('Paula', 'Ríos', '2003-05-03', 'paula.rios@email.com', '979876543', 'Pasaje Independencia 5'),
+('Cristian', 'Flores', '2001-03-19', 'cristian.flores@email.com', '968765432', 'Jr. Colón 78');
+
+
+INSERT INTO profesores (nombre, apellido, email, telefono, especialidad) VALUES
+('Juan', 'Gómez', 'juan@prodigios.com', '900111111', 'Canto Lírico'),
+('Laura', 'Martínez', 'laura@prodigios.com', '900222222', 'Canto Moderno'),
+('Carlos', 'Pérez', 'carlos@prodigios.com', '900333333', 'Técnica Vocal'),
+('Patricia', 'Salas', 'patricia@prodigios.com', '900444444', 'Interpretación Escénica'),
+('Diego', 'Herrera', 'diego@prodigios.com', '900555555', 'Canto Coral');
+
+
+INSERT INTO cursos (nombre_curso, descripcion, duracion, precio) VALUES
+('Inicio al Canto', 'Curso para principiantes', 3, 250.00),
+('Técnica Vocal', 'Control, afinación, potencia', 4, 300.00),
+('Interpretación Escénica', 'Expresión corporal y emoción', 5, 400.00),
+('Canto Coral', 'Armonía y canto grupal', 4, 350.00),
+('Masterclass Vocal', 'Taller intensivo de 2 semanas', 2, 600.00);
+
+
+INSERT INTO clases (nombre_clase, descripcion, nivel, id_profesor, id_curso, capacidad) VALUES
+('Canto Básico A', 'Iniciación al canto', 'Principiante', 1, 1, 15),
+('Canto Intermedio', 'Clases vocales nivel medio', 'Intermedio', 2, 2, 15),
+('Técnica Avanzada', 'Clase para estudiantes avanzados', 'Avanzado', 3, 2, 12),
+('Escénico A', 'Actuación y expresión vocal', 'Intermedio', 4, 3, 10),
+('Canto Coral Grupo B', 'Ensamble coral', 'Principiante', 5, 4, 20),
+('Masterclass Express', 'Taller intensivo de voz', 'Avanzado', 1, 5, 8);
+
+
+INSERT INTO horarios (id_clase, dia, hora_inicio, hora_fin) VALUES
+(1, 'Lunes', '08:00:00', '10:00:00'),
+(1, 'Miércoles', '08:00:00', '10:00:00'),
+(2, 'Martes', '09:00:00', '11:00:00'),
+(2, 'Jueves', '09:00:00', '11:00:00'),
+(3, 'Viernes', '10:00:00', '12:00:00'),
+(4, 'Lunes', '13:00:00', '15:00:00'),
+(5, 'Miércoles', '14:00:00', '16:00:00'),
+(5, 'Viernes', '14:00:00', '16:00:00'),
+(6, 'Sábado', '09:00:00', '11:00:00'),
+(6, 'Domingo', '09:00:00', '11:00:00'),
+(3, 'Miércoles', '11:00:00', '13:00:00'),
+(4, 'Jueves', '15:00:00', '17:00:00');
+
+
+-- 2 clases por estudiante
+INSERT INTO inscripciones (id_estudiante, id_clase) VALUES
+(1,1), (1,2),
+(2,1), (2,3),
+(3,2), (3,5),
+(4,3), (4,4),
+(5,1), (5,6),
+(6,2), (6,5),
+(7,3), (7,4),
+(8,4), (8,6),
+(9,5), (9,1),
+(10,6), (10,2),
+(11,1), (11,3),
+(12,2), (12,5),
+(13,3), (13,6),
+(14,4), (14,1),
+(15,5), (15,2),
+(16,6), (16,3),
+(17,1), (17,4),
+(18,2), (18,5),
+(19,3), (19,6),
+(20,4), (20,1);
+
+
+INSERT INTO asistencia (id_estudiante, id_clase, fecha, presente) VALUES
+(1,1,'2025-07-08',1), (1,2,'2025-07-09',0),
+(2,1,'2025-07-08',1), (2,3,'2025-07-09',1),
+(3,2,'2025-07-08',1), (3,5,'2025-07-09',1),
+(4,3,'2025-07-08',0), (4,4,'2025-07-09',1),
+(5,1,'2025-07-08',1), (5,6,'2025-07-09',0),
+(6,2,'2025-07-08',1), (6,5,'2025-07-09',1),
+(7,3,'2025-07-08',0), (7,4,'2025-07-09',1),
+(8,4,'2025-07-08',1), (8,6,'2025-07-09',1),
+(9,5,'2025-07-08',1), (9,1,'2025-07-09',1),
+(10,6,'2025-07-08',0), (10,2,'2025-07-09',1),
+(11,1,'2025-07-08',1), (11,3,'2025-07-09',1),
+(12,2,'2025-07-08',1), (12,5,'2025-07-09',0),
+(13,3,'2025-07-08',1), (13,6,'2025-07-09',1),
+(14,4,'2025-07-08',1), (14,1,'2025-07-09',1);
+
+
+INSERT INTO pagos (id_estudiante, monto, fecha_pago, metodo_pago) VALUES
+(1,250,'2025-07-01','Efectivo'),
+(2,300,'2025-07-01','Transferencia'),
+(3,400,'2025-07-01','Tarjeta'),
+(4,350,'2025-07-02','Tarjeta'),
+(5,600,'2025-07-02','Efectivo'),
+(6,250,'2025-07-02','Tarjeta'),
+(7,300,'2025-07-03','Transferencia'),
+(8,400,'2025-07-03','Efectivo'),
+(9,350,'2025-07-03','Tarjeta'),
+(10,600,'2025-07-04','Transferencia'),
+(11,250,'2025-07-04','Tarjeta'),
+(12,300,'2025-07-04','Efectivo'),
+(13,400,'2025-07-04','Transferencia'),
+(14,350,'2025-07-04','Tarjeta'),
+(15,600,'2025-07-05','Transferencia'),
+(16,250,'2025-07-05','Efectivo'),
+(17,300,'2025-07-05','Tarjeta'),
+(18,400,'2025-07-05','Transferencia'),
+(19,350,'2025-07-05','Efectivo'),
+(20,600,'2025-07-05','Tarjeta');
+
+
+
+
diff --git a/PRODIGIOS/app/database/prodigios.sql b/PRODIGIOS/app/database/prodigios.sql
new file mode 100644
index 0000000..694e09c
--- /dev/null
+++ b/PRODIGIOS/app/database/prodigios.sql
@@ -0,0 +1,116 @@
+CREATE DATABASE IF NOT EXISTS prodigios;
+USE prodigios;
+
+CREATE TABLE IF NOT EXISTS asistencia (
+  id_asistencia int(11) NOT NULL AUTO_INCREMENT,
+  id_estudiante int(11) DEFAULT NULL,
+  id_clase int(11) DEFAULT NULL,
+  fecha timestamp NOT NULL DEFAULT current_timestamp(),
+  presente tinyint(1) DEFAULT NULL,
+  PRIMARY KEY (id_asistencia),
+  KEY id_estudiante (id_estudiante),
+  KEY id_clase (id_clase)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE IF NOT EXISTS clases (
+  id_clase int(11) NOT NULL AUTO_INCREMENT,
+  nombre_clase varchar(100) DEFAULT NULL,
+  descripcion text DEFAULT NULL,
+  nivel enum('Principiante','Intermedio','Avanzado') DEFAULT NULL,
+  id_profesor int(11) DEFAULT NULL,
+  id_curso int(11) DEFAULT NULL,
+  capacidad int(11) DEFAULT NULL,
+  PRIMARY KEY (id_clase),
+  KEY id_profesor (id_profesor),
+  KEY id_curso (id_curso)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE IF NOT EXISTS credenciales (
+  ID int(11) NOT NULL AUTO_INCREMENT,
+  nombre text NOT NULL,
+  email text NOT NULL,
+  telefono text NOT NULL,
+  contraseña text NOT NULL,
+  imagen_perfil varchar(255) DEFAULT 'assets/img/user.jpg',
+  PRIMARY KEY (ID)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE IF NOT EXISTS cursos (
+  id_curso int(11) NOT NULL AUTO_INCREMENT,
+  nombre_curso varchar(100) DEFAULT NULL,
+  descripcion text DEFAULT NULL,
+  duracion int(11) DEFAULT NULL,
+  precio decimal(10,2) DEFAULT NULL,
+  PRIMARY KEY (id_curso)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE IF NOT EXISTS estudiantes (
+  id_estudiante int(11) NOT NULL AUTO_INCREMENT,
+  nombre varchar(100) DEFAULT NULL,
+  apellido varchar(100) DEFAULT NULL,
+  fecha_nacimiento date DEFAULT NULL,
+  email varchar(100) DEFAULT NULL,
+  telefono varchar(15) DEFAULT NULL,
+  direccion varchar(255) DEFAULT NULL,
+  fecha_registro timestamp NOT NULL DEFAULT current_timestamp(),
+  PRIMARY KEY (id_estudiante)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE IF NOT EXISTS horarios (
+  id_horario int(11) NOT NULL AUTO_INCREMENT,
+  id_clase int(11) DEFAULT NULL,
+  dia enum('Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo') DEFAULT NULL,
+  hora_inicio time DEFAULT NULL,
+  hora_fin time DEFAULT NULL,
+  PRIMARY KEY (id_horario),
+  KEY id_clase (id_clase)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE IF NOT EXISTS inscripciones (
+  id_inscripcion int(11) NOT NULL AUTO_INCREMENT,
+  id_estudiante int(11) DEFAULT NULL,
+  id_clase int(11) DEFAULT NULL,
+  fecha_inscripcion timestamp NOT NULL DEFAULT current_timestamp(),
+  PRIMARY KEY (id_inscripcion),
+  KEY id_estudiante (id_estudiante),
+  KEY id_clase (id_clase)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE IF NOT EXISTS pagos (
+  id_pago int(11) NOT NULL AUTO_INCREMENT,
+  id_estudiante int(11) DEFAULT NULL,
+  monto decimal(10,2) DEFAULT NULL,
+  fecha_pago timestamp NOT NULL DEFAULT current_timestamp(),
+  metodo_pago enum('Tarjeta','Transferencia','Efectivo') DEFAULT NULL,
+  PRIMARY KEY (id_pago),
+  KEY id_estudiante (id_estudiante)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE IF NOT EXISTS profesores (
+  id_profesor int(11) NOT NULL AUTO_INCREMENT,
+  nombre varchar(100) DEFAULT NULL,
+  apellido varchar(100) DEFAULT NULL,
+  email varchar(100) DEFAULT NULL,
+  telefono varchar(15) DEFAULT NULL,
+  especialidad varchar(100) DEFAULT NULL,
+  PRIMARY KEY (id_profesor)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- Relaciones (FOREIGN KEYS)
+ALTER TABLE asistencia
+  ADD CONSTRAINT asistencia_ibfk_1 FOREIGN KEY (id_estudiante) REFERENCES estudiantes (id_estudiante),
+  ADD CONSTRAINT asistencia_ibfk_2 FOREIGN KEY (id_clase) REFERENCES clases (id_clase);
+
+ALTER TABLE clases
+  ADD CONSTRAINT clases_ibfk_1 FOREIGN KEY (id_profesor) REFERENCES profesores (id_profesor),
+  ADD CONSTRAINT clases_ibfk_2 FOREIGN KEY (id_curso) REFERENCES cursos (id_curso);
+
+ALTER TABLE horarios
+  ADD CONSTRAINT horarios_ibfk_1 FOREIGN KEY (id_clase) REFERENCES clases (id_clase);
+
+ALTER TABLE inscripciones
+  ADD CONSTRAINT inscripciones_ibfk_1 FOREIGN KEY (id_estudiante) REFERENCES estudiantes (id_estudiante),
+  ADD CONSTRAINT inscripciones_ibfk_2 FOREIGN KEY (id_clase) REFERENCES clases (id_clase);
+
+ALTER TABLE pagos
+  ADD CONSTRAINT pagos_ibfk_1 FOREIGN KEY (id_estudiante) REFERENCES estudiantes (id_estudiante);
\ No newline at end of file
diff --git a/PRODIGIOS/app/models/Crud.php b/PRODIGIOS/app/models/Crud.php
new file mode 100644
index 0000000..9691bbd
--- /dev/null
+++ b/PRODIGIOS/app/models/Crud.php
@@ -0,0 +1,40 @@
+<?php
+require_once ROOT . 'config/database.php';
+
+class Crud {
+    private $db;
+
+    public function __construct() {
+        $this->db = (new Database())->connect();
+    }
+
+    public function insertar($tabla,$columna,$data) {
+        $stmt = $this->db->prepare("INSERT INTO $tabla ($columna) VALUES($data)");
+        $stmt->execute();
+    }
+    public function mostrarTabla($table){
+
+        $stmt = $this->db->prepare("SELECT * FROM $table");
+        $stmt->execute();
+
+		$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+        return array_merge($result);
+	}
+    public function mostrarFila($tabla,$condicion){
+        $stmt = $this->db->prepare("SELECT * FROM $tabla WHERE $condicion");
+        $stmt->execute();
+
+		$result = $stmt->fetch(PDO::FETCH_ASSOC);
+        return array_merge($result);
+    }
+    public function actualizar($tabla,$data,$condicion){
+		$stmt = $this->db->prepare("UPDATE $tabla SET $data WHERE $condicion");
+        $stmt->execute();
+    
+	}
+    public function eliminar($tabla,$condicion){
+        $stmt = $this->db->prepare("DELETE FROM $tabla WHERE $condicion");
+        $stmt->execute();
+
+	}
+}
\ No newline at end of file
diff --git a/PRODIGIOS/app/models/Usuario.php b/PRODIGIOS/app/models/Usuario.php
new file mode 100644
index 0000000..4ebe3a7
--- /dev/null
+++ b/PRODIGIOS/app/models/Usuario.php
@@ -0,0 +1,52 @@
+<?php
+require_once ROOT . 'config/database.php';
+
+class Usuario {
+    private $db;
+
+    public function __construct() {
+        $this->db = (new Database())->connect();
+    }
+
+    public function findUserByEmail($email) {
+        $stmt = $this->db->prepare("SELECT * FROM usuarios WHERE correo = ?");
+        $stmt->execute([$email]);
+        return $stmt->fetch(PDO::FETCH_ASSOC);
+    }
+
+    public function createUser($nombre, $apellido, $email, $password, $telefono, $tipoUsuario) {
+        $stmt = $this->db->prepare("INSERT INTO usuarios (nombre, apellido, correo, password, telefono, tipoUsuario) VALUES (?, ?, ?, ?)");
+        $stmt->execute([$nombre, $apellido, $email, $password, $telefono, $tipoUsuario]);  
+
+        $userId = $this->db->lastInsertId();
+
+        /*
+        if ($tipoUsuario == 'admin') {
+            $stmt = $this->db->prepare("INSERT INTO admin (idUsuario, dni, nombre, apellido) VALUES (?, '', '', '')");
+            $stmt->execute([$userId]);
+        } elseif ($tipoUsuario == 'cajero') {
+            $stmt = $this->db->prepare("INSERT INTO cajero (idUsuario, dni, nombre, apellido, FKTerminal) VALUES (?, '', '', '', NULL)");
+            $stmt->execute([$userId]);
+        } elseif ($tipoUsuario == 'cliente') {
+            $stmt = $this->db->prepare("INSERT INTO cliente (idUsuario) VALUES (?)");
+            $stmt->execute([$userId]);
+        }
+        */
+    }
+    public function getUserInfo($userId) {
+        $stmt = $this->db->prepare("SELECT * FROM credenciales WHERE ID = ?");
+        $stmt->execute([$userId]);
+        $userInfo = $stmt->fetch(PDO::FETCH_ASSOC);
+        return array_merge($userInfo);
+
+        /*
+        if ($userInfo['tipoUsuario'] == 'admin') {
+            $stmt = $this->db->prepare("SELECT * FROM admin WHERE idUsuario = ?");
+            $stmt->execute([$userId]);
+            $adminInfo = $stmt->fetch(PDO::FETCH_ASSOC);
+            return array_merge($userInfo, $adminInfo);
+        } 
+        */
+    }
+}
+?>
\ No newline at end of file
diff --git a/PRODIGIOS/app/routes/appRoute.php b/PRODIGIOS/app/routes/appRoute.php
new file mode 100644
index 0000000..bf74e61
--- /dev/null
+++ b/PRODIGIOS/app/routes/appRoute.php
@@ -0,0 +1,15 @@
+<?php
+$page = $_GET['page'] ?? 'inicio';
+
+switch ($page) {
+    case 'app':
+        $flag = true;
+        require_once ROOT . 'controllers/appController.php';
+        $controller = new AppController();
+        $controller->app();
+        break;
+
+    default:
+    
+        break;
+}
\ No newline at end of file
diff --git a/PRODIGIOS/app/routes/authRoute.php b/PRODIGIOS/app/routes/authRoute.php
new file mode 100644
index 0000000..0796272
--- /dev/null
+++ b/PRODIGIOS/app/routes/authRoute.php
@@ -0,0 +1,46 @@
+<?php
+
+$page = $_GET['page'] ?? 'inicio';
+
+
+switch ($page) {
+    /*
+    case 'login':
+        $flag = true;
+        require_once ROOT . 'controllers/authController.php';
+        $controller = new AuthController();
+        $controller->login();
+        break;
+
+    case 'register':
+        $flag = true;
+        require_once ROOT . 'controllers/authController.php';
+        $controller = new AuthController();
+        $controller->register();
+        break;
+    */
+    case 'login_user':
+        $flag = true;
+        require_once ROOT . 'controllers/authController.php';
+        $controller = new AuthController();
+        $controller->login_user();
+        break;
+
+    case 'register_user':
+        $flag = true;
+        require_once ROOT . 'controllers/authController.php';
+        $controller = new AuthController();
+        $controller->register_user();
+        break;
+
+    case 'logout':
+        $flag = true;
+        require_once ROOT . 'controllers/authController.php';
+        $controller = new AuthController();
+        $controller->logout();
+
+
+    default:
+        // $flag = true;
+        break;
+}
diff --git a/PRODIGIOS/app/routes/publicRoute.php b/PRODIGIOS/app/routes/publicRoute.php
new file mode 100644
index 0000000..dd3496b
--- /dev/null
+++ b/PRODIGIOS/app/routes/publicRoute.php
@@ -0,0 +1,16 @@
+<?php
+$page = $_GET['page'] ?? 'inicio';
+
+
+switch ($page) {
+    case 'inicio':
+        $flag = true;
+        require_once ROOT . 'controllers/publicController.php';
+        $controller = new PubliController();
+        $controller->inicio();
+        break;
+
+    default:
+    
+        break;
+}
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/index.php b/PRODIGIOS/app/views/index.php
new file mode 100644
index 0000000..3fe9dd4
--- /dev/null
+++ b/PRODIGIOS/app/views/index.php
@@ -0,0 +1,1981 @@
+<?php
+  require_once ROOT . 'config/config.php';
+?>
+
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Academia de música PRODIGIOS - Clases de piano, guitarra, canto, violín y más instrumentos. Aprende música con los mejores instructores.">
+  <meta name="keywords" content="música, clases, piano, guitarra, canto, violín, ukelele, requinto, academia">
+  <title>PRODIGIOS - Academia de Música | Clases de Instrumentos Musicales</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/index.css">
+</head>
+<body>
+  <!-- Encabezado -->
+  <header>
+    <nav class="navbar navbar-expand-lg navbar-dark">
+      <div class="container">
+        <a class="navbar-brand" href="index_01.php" aria-label="PRODIGIOS - Inicio">PRODIGIOS</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav me-auto">
+            <li class="nav-item"><a class="nav-link" href="#inicio" aria-label="Ir a sección Inicio">Inicio</a></li>
+            <li class="nav-item"><a class="nav-link" href="#cursos" aria-label="Ir a sección Cursos">Cursos</a></li>
+            <li class="nav-item"><a class="nav-link" href="#instructores" aria-label="Ir a sección Instructores">Instructores</a></li>
+            <li class="nav-item"><a class="nav-link" href="#contacto" aria-label="Ir a sección Contacto">Contacto</a></li>
+          </ul>
+          <div class="d-flex">
+            <button class="btn btn-outline-light me-2" data-bs-toggle="modal" data-bs-target="#modalLogin" aria-label="Abrir modal de inicio de sesión">Iniciar Sesión</button>
+            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRegistro" aria-label="Abrir modal de registro">Registrarse</button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <!-- Sección de Carrusel -->
+  <section id="inicio" class="mb-5">
+    <div id="mainCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
+      <div class="carousel-indicators">
+        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
+        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
+      </div>
+      <div class="carousel-inner">
+        <div class="carousel-item active" data-bs-interval="5000">
+          <img src="img/image1.jpg" class="d-block w-100" alt="Persona tocando requinto" loading="lazy">
+          <div class="carousel-caption d-none d-md-block">
+            <h3>Clases de Requinto</h3>
+            <p>Aprende técnicas profesionales con nuestros instructores certificados</p>
+          </div>
+        </div>
+        <div class="carousel-item" data-bs-interval="5000">
+          <img src="img/image2.jpg" class="d-block w-100" alt="Persona tocando piano" loading="lazy">
+          <div class="carousel-caption d-none d-md-block">
+            <h3>Clases de Piano</h3>
+            <p>Desde principiantes hasta niveles avanzados</p>
+          </div>
+        </div>
+        <div class="carousel-item" data-bs-interval="5000">
+          <img src="img/image3.jpg" class="d-block w-100" alt="Persona tocando ukelele" loading="lazy">
+          <div class="carousel-caption d-none d-md-block">
+            <h3>Clases de Ukelele</h3>
+            <p>El instrumento perfecto para comenzar en la música</p>
+          </div>
+        </div>
+        <div class="carousel-item" data-bs-interval="5000">
+          <img src="img/image4.jpg" class="d-block w-100" alt="Persona cantando" loading="lazy">
+          <div class="carousel-caption d-none d-md-block">
+            <h3>Clases de Canto</h3>
+            <p>Desarrolla tu voz con técnicas profesionales</p>
+          </div>
+        </div>
+        <div class="carousel-item" data-bs-interval="5000">
+          <img src="img/image5.jpg" class="d-block w-100" alt="Persona tocando guitarra" loading="lazy">
+          <div class="carousel-caption d-none d-md-block">
+            <h3>Clases de Guitarra</h3>
+            <p>Aprende tus canciones favoritas desde el primer día</p>
+          </div>
+        </div>
+      </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev" aria-label="Slide anterior">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Anterior</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next" aria-label="Slide siguiente">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Siguiente</span>
+      </button>
+    </div>
+  </section>
+
+  <!-- Sección de Cursos -->
+  <section id="cursos" class="section-padding bg-light courses-section">
+    <div class="container">
+      <h2 class="text-center mb-5">Nuestros Cursos</h2>
+        <!-- Filtros de cursos -->
+        <div class="course-filter">
+          <button class="filter-btn active" data-filter="all">Todos</button>
+          <button class="filter-btn" data-filter="piano">Piano</button>
+          <button class="filter-btn" data-filter="guitarra">Guitarra</button>
+          <button class="filter-btn" data-filter="canto">Canto</button>
+          <button class="filter-btn" data-filter="violin">Violín</button>
+          <button class="filter-btn" data-filter="ukelele">Ukelele</button>
+          <button class="filter-btn" data-filter="requinto">Requinto</button>
+        </div>
+        <!-- Grid de cursos -->
+        <div class="courses-container">
+          <!-- Curso de Piano -->
+          <div class="course-card" data-category="piano">
+            <img src="img/piano.jpg" alt="Clases de piano" class="course-img">
+            <div class="course-content">
+            <span class="course-category">Piano</span>
+            <h3 class="course-title">Piano para Principiantes</h3>
+            <p class="course-description">Aprende las bases del piano y desarrolla tu técnica con nuestro método progresivo.</p>
+            <div class="course-meta">
+              <span class="course-price">S/. 120</span>
+              <span class="course-duration">12 clases</span>
+            </div>
+            <a href="#" class="btn-enroll" data-bs-toggle="modal" data-bs-target="#pianoModal">Más información</a>
+            </div>
+          </div>
+          <!-- Curso de Guitarra -->
+          <div class="course-card" data-category="guitarra">
+            <img src="img/guitarra.jpg" alt="Clases de guitarra" class="course-img">
+            <div class="course-content">
+            <span class="course-category">Guitarra</span>
+            <h3 class="course-title">Guitarra Moderna</h3>
+            <p class="course-description">Domina acordes, escalas y técnicas para tocar tus canciones favoritas.</p>
+            <div class="course-meta">
+              <span class="course-price">S/. 100</span>
+              <span class="course-duration">8 clases</span>
+            </div>
+            <a href="#" class="btn-enroll" data-bs-toggle="modal" data-bs-target="#guitarraModal">Más información</a>
+            </div>
+          </div>
+          <!-- Curso de Canto -->
+          <div class="course-card" data-category="canto">
+            <img src="img/canto.jpg" alt="Clases de canto" class="course-img">
+            <div class="course-content">
+            <span class="course-category">Canto</span>
+            <h3 class="course-title">Técnica Vocal</h3>
+            <p class="course-description">Desarrolla tu voz con ejercicios de respiración, afinación y proyección.</p>
+            <div class="course-meta">
+              <span class="course-price">S/. 90</span>
+              <span class="course-duration">10 clases</span>
+            </div>
+            <a href="#" class="btn-enroll" data-bs-toggle="modal" data-bs-target="#cantoModal">Más información</a>
+            </div>
+          </div>
+          <!-- Curso de Violín -->
+          <div class="course-card" data-category="violin">
+            <img src="img/violin.jpg" alt="Clases de violín" class="course-img">
+            <div class="course-content">
+            <span class="course-category">Violín</span>
+            <h3 class="course-title">Violín Clásico</h3>
+            <p class="course-description">Aprende la técnica correcta del violín con repertorio clásico y moderno.</p>
+            <div class="course-meta">
+              <span class="course-price">S/. 150</span>
+              <span class="course-duration">12 clases</span>
+            </div>
+            <a href="#" class="btn-enroll" data-bs-toggle="modal" data-bs-target="#violinModal">Más información</a>
+            </div>
+          </div>
+          <!-- Curso de Ukelele -->
+          <div class="course-card" data-category="ukelele">
+            <img src="img/ukelele.jpg" alt="Clases de ukelele" class="course-img">
+            <div class="course-content">
+            <span class="course-category">Ukelele</span>
+            <h3 class="course-title">Ukelele Divertido</h3>
+            <p class="course-description">El instrumento perfecto para comenzar en la música de forma alegre.</p>
+            <div class="course-meta">
+              <span class="course-price">S/. 80</span>
+              <span class="course-duration">8 clases</span>
+            </div>
+            <a href="#" class="btn-enroll" data-bs-toggle="modal" data-bs-target="#ukeleleModal">Más información</a>
+            </div>
+          </div>
+          <!-- Curso de Requinto -->
+          <div class="course-card" data-category="requinto">
+            <img src="img/requinto.jpg" alt="Clases de requinto" class="course-img">
+            <div class="course-content">
+            <span class="course-category">Requinto</span>
+            <h3 class="course-title">Requinto Tradicional</h3>
+            <p class="course-description">Domina este instrumento melódico esencial en la música tradicional.</p>
+            <div class="course-meta">
+              <span class="course-price">S/. 110</span>
+              <span class="course-duration">10 clases</span>
+            </div>
+            <a href="#" class="btn-enroll" data-bs-toggle="modal" data-bs-target="#requintoModal">Más información</a>
+            </div>
+          </div>
+        </div>
+    </div>
+  </section>
+
+  <!-- Sección de Instructores -->
+  <section id="instructores" class="section-padding">
+    <div class="container">
+      <h2 class="text-center mb-5">Nuestros Instructores</h2>
+      <div class="row g-4">
+        
+        <!-- Instructor 1 -->
+        <div class="col-md-6 col-lg-4">
+          <div class="card h-100">
+            <div class="card-body text-center p-4">
+              <img src="img/user.jpg" class="instructor-img rounded-circle mb-4" alt="Instructor Juan Pérez" loading="lazy">
+              <h3 class="card-title">Juan Pérez</h3>
+              <p class="text-muted"><i class="fas fa-piano me-2"></i> Piano</p>
+              <p class="card-text">Pianista con más de 15 años de experiencia en enseñanza y presentaciones en vivo. Graduado del Conservatorio Nacional de Música.</p>
+              <div class="mt-3">
+                <a href="#" class="btn btn-outline-primary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#instructorModal1">Ver perfil</a>
+                <a href="#" class="btn btn-primary btn-sm">Contactar</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Instructor 2 -->
+        <div class="col-md-6 col-lg-4">
+          <div class="card h-100">
+            <div class="card-body text-center p-4">
+              <img src="img/user.jpg" class="instructor-img rounded-circle mb-4" alt="Instructora Ana Gómez" loading="lazy">
+              <h3 class="card-title">Ana Gómez</h3>
+              <p class="text-muted"><i class="fas fa-microphone me-2"></i> Canto</p>
+              <p class="card-text">Cantante profesional con 10 años de experiencia en enseñanza vocal. Especializada en técnica vocal contemporánea.</p>
+              <div class="mt-3">
+                <a href="#" class="btn btn-outline-primary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#instructorModal2">Ver perfil</a>
+                <a href="#" class="btn btn-primary btn-sm">Contactar</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Instructor 3 -->
+        <div class="col-md-6 col-lg-4">
+          <div class="card h-100">
+            <div class="card-body text-center p-4">
+              <img src="img/user.jpg" class="instructor-img rounded-circle mb-4" alt="Instructor Pedro López" loading="lazy">
+              <h3 class="card-title">Pedro López</h3>
+              <p class="text-muted"><i class="fas fa-guitar me-2"></i> Guitarra</p>
+              <p class="card-text">Guitarrista profesional con amplia experiencia en géneros como rock, blues y jazz. Ha participado en múltiples giras internacionales.</p>
+              <div class="mt-3">
+                <a href="#" class="btn btn-outline-primary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#instructorModal3">Ver perfil</a>
+                <a href="#" class="btn btn-primary btn-sm">Contactar</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Instructor 4 -->
+        <div class="col-md-6 col-lg-4">
+          <div class="card h-100">
+            <div class="card-body text-center p-4">
+              <img src="img/user.jpg" class="instructor-img rounded-circle mb-4" alt="Instructora María Fernández" loading="lazy">
+              <h3 class="card-title">María Fernández</h3>
+              <p class="text-muted"><i class="fas fa-music me-2"></i> Violín</p>
+              <p class="card-text">Violinista clásica con formación en el extranjero. Miembro de la Orquesta Sinfónica Nacional por más de 8 años.</p>
+              <div class="mt-3">
+                <a href="#" class="btn btn-outline-primary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#instructorModal4">Ver perfil</a>
+                <a href="#" class="btn btn-primary btn-sm">Contactar</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Instructor 5 -->
+        <div class="col-md-6 col-lg-4">
+          <div class="card h-100">
+            <div class="card-body text-center p-4">
+              <img src="img/user.jpg" class="instructor-img rounded-circle mb-4" alt="Instructora Luisa Rodríguez" loading="lazy">
+              <h3 class="card-title">Luisa Rodríguez</h3>
+              <p class="text-muted"><i class="fas fa-guitar me-2"></i> Ukelele</p>
+              <p class="card-text">Especialista en música hawaiana y contemporánea con el ukelele. Más de 5 años enseñando a niños y adultos.</p>
+              <div class="mt-3">
+                <a href="#" class="btn btn-outline-primary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#instructorModal5">Ver perfil</a>
+                <a href="#" class="btn btn-primary btn-sm">Contactar</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Instructor 6 -->
+        <div class="col-md-6 col-lg-4">
+          <div class="card h-100">
+            <div class="card-body text-center p-4">
+              <img src="img/user.jpg" class="instructor-img rounded-circle mb-4" alt="Instructor Carlos Méndez" loading="lazy">
+              <h3 class="card-title">Carlos Méndez</h3>
+              <p class="text-muted"><i class="fas fa-guitar me-2"></i> Requinto</p>
+              <p class="card-text">Experto en música tradicional y requinto. Ha participado en festivales internacionales de música folklórica.</p>
+              <div class="mt-3">
+                <a href="#" class="btn btn-outline-primary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#instructorModal6">Ver perfil</a>
+                <a href="#" class="btn btn-primary btn-sm">Contactar</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="text-center mt-5">
+        <button class="btn btn-outline-primary">Ver todos los instructores</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Sección de Testimonios Premium -->
+  <section class="testimonials-section">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">Testimonios</h2>
+      </div>
+
+      <div id="premiumTestimonials" class="carousel slide" data-bs-ride="carousel">
+        <div class="carousel-inner">
+          <!-- Testimonio 1 - Piano -->
+          <div class="carousel-item active">
+            <div class="row justify-content-center">
+              <div class="col-lg-8">
+                <div class="testimonial-card">
+                  <div class="quote-icon">
+                    <i class="fas fa-quote-right"></i>
+                  </div>
+                  <div class="testimonial-content">
+                    <p class="testimonial-text">Las clases de piano en PRODIGIOS han revolucionado mi aprendizaje. En 6 meses logré dominar piezas de Chopin que nunca pensé posibles. La paciencia de los instructores y su enfoque personalizado son incomparables.</p>
+                    
+                    <div class="testimonial-author">
+                      <div class="author-image">
+                        <img src="img/user.jpg" alt="Sofía Martínez">
+                      </div>
+                      <div class="author-info">
+                        <h3 class="author-name">Sofía Martínez</h3>
+                        <p class="author-details">Estudiante de <span>Piano</span> · 9 meses</p>
+                        <div class="rating">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Testimonio 2 - Guitarra -->
+          <div class="carousel-item">
+            <div class="row justify-content-center">
+              <div class="col-lg-8">
+                <div class="testimonial-card">
+                  <div class="quote-icon">
+                    <i class="fas fa-quote-right"></i>
+                  </div>
+                  <div class="testimonial-content">
+                    <p class="testimonial-text">Como adulto que soñaba con aprender guitarra, pensé que sería imposible. En PRODIGIOS diseñaron un plan adaptado a mi ritmo. Hoy toco mis canciones favoritas y compongo mis propias melodías. ¡Una experiencia transformadora!</p>
+                    
+                    <div class="testimonial-author">
+                      <div class="author-image">
+                        <img src="img/user.jpg" alt="Javier López">
+                      </div>
+                      <div class="author-info">
+                        <h3 class="author-name">Javier López</h3>
+                        <p class="author-details">Estudiante de <span>Guitarra</span> · 1 año</p>
+                        <div class="rating">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star-half-alt"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Testimonio 3 - Canto -->
+          <div class="carousel-item">
+            <div class="row justify-content-center">
+              <div class="col-lg-8">
+                <div class="testimonial-card">
+                  <div class="quote-icon">
+                    <i class="fas fa-quote-right"></i>
+                  </div>
+                  <div class="testimonial-content">
+                    <p class="testimonial-text">Las clases de canto no solo mejoraron mi técnica vocal, sino que transformaron mi confianza personal. La metodología me ayudó a entender mi rango vocal y prepararme para audiciones. ¡Gané un concurso de talentos gracias a lo aprendido!</p>
+                    
+                    <div class="testimonial-author">
+                      <div class="author-image">
+                        <img src="img/user.jpg" alt="Valeria Ramírez">
+                      </div>
+                      <div class="author-info">
+                        <h3 class="author-name">Valeria Ramírez</h3>
+                        <p class="author-details">Estudiante de <span>Canto</span> · 1.5 años</p>
+                        <div class="rating">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="far fa-star"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Testimonio 4 - Violín -->
+          <div class="carousel-item">
+            <div class="row justify-content-center">
+              <div class="col-lg-8">
+                <div class="testimonial-card">
+                  <div class="quote-icon">
+                    <i class="fas fa-quote-right"></i>
+                  </div>
+                  <div class="testimonial-content">
+                    <p class="testimonial-text">Cuando comencé con violín a los 35 años pensé que sería demasiado tarde. Mi instructor adaptó las lecciones a mi ritmo y hoy toco en un ensamble local. Las clases personalizadas y el ambiente de apoyo hacen toda la diferencia.</p>
+                    
+                    <div class="testimonial-author">
+                      <div class="author-image">
+                        <img src="img/user.jpg" alt="Carlos Mendoza">
+                      </div>
+                      <div class="author-info">
+                        <h3 class="author-name">Carlos Mendoza</h3>
+                        <p class="author-details">Estudiante de <span>Violín</span> · 1 año</p>
+                        <div class="rating">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Controles del carrusel - Solo para esta sección -->
+        <button class="carousel-control-prev" type="button" data-bs-target="#premiumTestimonials" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Anterior</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#premiumTestimonials" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Siguiente</span>
+        </button>
+
+        <!-- Indicadores - Solo para esta sección -->
+        <div class="carousel-indicators">
+          <button type="button" data-bs-target="#premiumTestimonials" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+          <button type="button" data-bs-target="#premiumTestimonials" data-bs-slide-to="1" aria-label="Slide 2"></button>
+          <button type="button" data-bs-target="#premiumTestimonials" data-bs-slide-to="2" aria-label="Slide 3"></button>
+          <button type="button" data-bs-target="#premiumTestimonials" data-bs-slide-to="3" aria-label="Slide 4"></button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Sección de Contacto -->
+  <section id="contacto" class="section-padding">
+    <div class="container">
+      <h2 class="text-center mb-5">Contáctanos</h2>
+      <div class="row g-4">
+        <!-- Información de Contacto -->
+        <div class="col-lg-4">
+          <div class="card border-0 shadow-sm h-100">
+            <div class="card-body p-4">
+              <h3 class="mb-4">Información de Contacto</h3>
+              
+              <div class="d-flex mb-4">
+                <div class="me-3 text-primary">
+                  <i class="fas fa-map-marker-alt fa-2x"></i>
+                </div>
+                <div>
+                  <h5 class="mb-1">Dirección</h5>
+                  <p class="mb-0">LA ESPERANZA, Brasil 1318, Tacna 23001</p>
+                </div>
+              </div>
+              
+              <div class="d-flex mb-4">
+                <div class="me-3 text-primary">
+                  <i class="fas fa-phone-alt fa-2x"></i>
+                </div>
+                <div>
+                  <h5 class="mb-1">Teléfono</h5>
+                  <p class="mb-0">995522159</p>
+                </div>
+              </div>
+              
+              <div class="d-flex mb-4">
+                <div class="me-3 text-primary">
+                  <i class="fas fa-envelope fa-2x"></i>
+                </div>
+                <div>
+                  <h5 class="mb-1">Email</h5>
+                  <p class="mb-0">info@prodigios.edu.pe</p>
+                </div>
+              </div>
+              
+              <div class="d-flex mb-4">
+                <div class="me-3 text-primary">
+                  <i class="fas fa-clock fa-2x"></i>
+                </div>
+                <div>
+                  <h5 class="mb-1">Horario de Atención</h5>
+                  <p class="mb-0">Lunes a Viernes: 9am - 8pm<br>Sábados: 9am - 2pm</p>
+                </div>
+              </div>
+              
+              <div class="mt-4">
+                <h5 class="mb-3">Síguenos</h5>
+                <div class="d-flex">
+                  <a href="https://www.facebook.com/AcademiadeMusicaProdigios" target="_blank" class="text-decoration-none me-3" aria-label="Facebook de PRODIGIOS">
+                    <i class="fab fa-facebook-f fa-2x"></i>
+                  </a>
+                  <a href="#" class="text-decoration-none me-3" target="_blank" aria-label="Instagram de PRODIGIOS">
+                    <i class="fab fa-instagram fa-2x"></i>
+                  </a>
+                  <a href="#" class="text-decoration-none me-3" target="_blank" aria-label="YouTube de PRODIGIOS">
+                    <i class="fab fa-youtube fa-2x"></i>
+                  </a>
+                  <a href="#" class="text-decoration-none" target="_blank" aria-label="TikTok de PRODIGIOS">
+                    <i class="fab fa-tiktok fa-2x"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Mapa -->
+        <div class="col-lg-4">
+          <div class="card border-0 shadow-sm h-100">
+            <div class="card-body p-0">
+              <div class="map-container">
+                <iframe src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d30357.258085875143!2d-70.247902!3d-17.994676!3m2!1i1024!2i768!4f13.1!2m1!1sprodigios!5e0!3m2!1ses!2spe!4v1750286873071!5m2!1ses!2spe" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Formulario de Contacto -->
+        <div class="col-lg-4">
+          <div class="card border-0 shadow-sm h-100">
+            <div class="card-body p-4">
+              <h3 class="mb-4">Envíanos un Mensaje</h3>
+              <form id="contactForm" class="needs-validation" novalidate>
+                <div class="mb-3">
+                  <label for="name" class="form-label">Nombre Completo</label>
+                  <input type="text" class="form-control" id="name" required>
+                  <div class="invalid-feedback">
+                    Por favor ingresa tu nombre.
+                  </div>
+                </div>
+                
+                <div class="mb-3">
+                  <label for="email" class="form-label">Email</label>
+                  <input type="email" class="form-control" id="email" required>
+                  <div class="invalid-feedback">
+                    Por favor ingresa un email válido.
+                  </div>
+                </div>
+                
+                <div class="mb-3">
+                  <label for="phone" class="form-label">Teléfono (Opcional)</label>
+                  <input type="tel" class="form-control" id="phone">
+                </div>
+                
+                <div class="mb-3">
+                  <label for="subject" class="form-label">Asunto</label>
+                  <select class="form-select" id="subject" required>
+                    <option value="" selected disabled>Selecciona un asunto</option>
+                    <option value="informacion">Información sobre cursos</option>
+                    <option value="inscripcion">Inscripciones</option>
+                    <option value="instructores">Información sobre instructores</option>
+                    <option value="otro">Otro</option>
+                  </select>
+                  <div class="invalid-feedback">
+                    Por favor selecciona un asunto.
+                  </div>
+                </div>
+                
+                <div class="mb-3">
+                  <label for="message" class="form-label">Mensaje</label>
+                  <textarea class="form-control" id="message" rows="4" required></textarea>
+                  <div class="invalid-feedback">
+                    Por favor escribe tu mensaje.
+                  </div>
+                </div>
+                
+                <div class="d-grid">
+                  <button type="submit" class="btn btn-primary">Enviar Mensaje</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Pie de página -->
+  <footer class="py-5">
+    <div class="container">
+      <div class="row">
+        
+        <div class="col-lg-4 mb-4 mb-lg-0">
+          <h3 class="text-white mb-4">PRODIGIOS</h3>
+          <p>La academia de música donde descubrirás y desarrollarás tu talento musical con los mejores instructores y metodologías.</p>
+          <div class="social-icons">
+            <a href="https://www.facebook.com/AcademiadeMusicaProdigios" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+            <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+            <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
+            <a href="#" aria-label="Spotify"><i class="fab fa-spotify"></i></a>
+          </div>
+        </div>
+        
+        <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
+          <h4 class="text-white mb-4">Cursos</h4>
+          <ul class="list-unstyled">
+            <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none" data-bs-toggle="modal" data-bs-target="#pianoModal">Piano</a></li>
+            <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none" data-bs-toggle="modal" data-bs-target="#guitarraModal">Guitarra</a></li>
+            <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none" data-bs-toggle="modal" data-bs-target="#cantoModal">Canto</a></li>
+            <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none" data-bs-toggle="modal" data-bs-target="#violinModal">Violín</a></li>
+            <li><a href="#cursos" class="text-white-50 text-decoration-none">Ver todos</a></li>
+          </ul>
+        </div>
+        
+        <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
+          <h4 class="text-white mb-4">Enlaces</h4>
+          <ul class="list-unstyled">
+            <li class="mb-2"><a href="#inicio" class="text-white-50 text-decoration-none">Inicio</a></li>
+            <li class="mb-2"><a href="#cursos" class="text-white-50 text-decoration-none">Cursos</a></li>
+            <li class="mb-2"><a href="#instructores" class="text-white-50 text-decoration-none">Instructores</a></li>
+            <li class="mb-2"><a href="#contacto" class="text-white-50 text-decoration-none">Contacto</a></li>
+            <li><a href="#" class="text-white-50 text-decoration-none">Blog</a></li>
+          </ul>
+        </div>
+        
+        <div class="col-lg-4">
+          <h4 class="text-white mb-4">Newsletter</h4>
+          <p>Suscríbete para recibir noticias sobre nuevos cursos, eventos y promociones.</p>
+          <form class="mb-3">
+            <div class="input-group">
+              <input type="email" class="form-control" placeholder="Tu email" aria-label="Tu email" required>
+              <button class="btn btn-primary" type="submit">Suscribirse</button>
+            </div>
+          </form>
+          <small class="text-white-50">Respetamos tu privacidad. Nunca compartiremos tu información.</small>
+        </div>
+      </div>
+      
+      <hr class="my-4 bg-light">
+      
+      <div class="row align-items-center">
+        <div class="col-md-6 text-center text-md-start">
+          <p class="mb-0">&copy; 2024 Academia de Música PRODIGIOS. Todos los derechos reservados.</p>
+        </div>
+        <div class="col-md-6 text-center text-md-end">
+          <a href="#" class="text-white-50 text-decoration-none me-3">Términos y Condiciones</a>
+          <a href="#" class="text-white-50 text-decoration-none">Política de Privacidad</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+  <!-- Botón para volver arriba -->
+  <a href="#" class="back-to-top" aria-label="Volver arriba">
+    <i class="fas fa-arrow-up"></i>
+  </a>
+
+  <!-- Modal Iniciar Sesión -->
+  <div class="modal fade" id="modalLogin" tabindex="-1" aria-labelledby="modalLoginLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background: #2c4d90">
+          <h5 class="modal-title" id="modalLoginLabel">Iniciar Sesión</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form id="loginForm" method="post" novalidate>
+            <div class="mb-3">
+              <label for="loginEmail" class="form-label">Email</label>
+              <input type="email" class="form-control" id="loginEmail" name="emailLogin" required>
+              <div class="invalid-feedback">
+                Por favor ingresa un email válido.
+              </div>
+            </div>
+            <div class="mb-3">
+              <label for="loginPassword" class="form-label">Contraseña</label>
+              <input type="password" class="form-control" id="loginPassword" name="passwordLogin" required>
+              <div class="invalid-feedback">
+                Por favor ingresa tu contraseña.
+              </div>
+            </div>
+            <div class="mb-3 form-check">
+              <input type="checkbox" class="form-check-input" id="rememberMe">
+              <label class="form-check-label" for="rememberMe">Recordarme</label>
+            </div>
+            <div class="d-grid mb-3">
+              <button type="submit" class="btn btn-primary">Iniciar Sesión</button>
+            </div>
+            <div class="text-center">
+              <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalForgotPassword" data-bs-dismiss="modal">¿Olvidaste tu contraseña?</a>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer justify-content-center">
+          <p class="mb-0">¿No tienes una cuenta? <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalRegistro" data-bs-dismiss="modal">Regístrate</a></p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Registrarse -->
+  <div class="modal fade" id="modalRegistro" tabindex="-1" aria-labelledby="modalRegistroLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background:#2c4d90">
+          <h5 class="modal-title" id="modalRegistroLabel">Crear Cuenta</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form id="registerForm" method="post" class="needs-validation" novalidate>
+            <div class="row">
+              <div class="col-md-6 mb-3">
+                <label for="firstName" class="form-label">Nombres</label>
+                <input type="text" class="form-control" id="firstName" name="nombreRegistro" required>
+                <div class="invalid-feedback">
+                  Por favor ingresa tus nombres.
+                </div>
+              </div>
+              <div class="col-md-6 mb-3">
+                <label for="lastName" class="form-label">Apellidos</label>
+                <input type="text" class="form-control" id="lastName" name="apellidoRegistro" required>
+                <div class="invalid-feedback">
+                  Por favor ingresa tus apellidos.
+                </div>
+              </div>
+            </div>
+            
+            <div class="mb-3">
+              <label for="registerEmail" class="form-label">Email</label>
+              <input type="email" class="form-control" id="registerEmail" name="emailRegistro" required>
+              <div class="invalid-feedback">
+                Por favor ingresa un email válido.
+              </div>
+            </div>
+            
+            <div class="mb-3">
+              <label for="registerPhone" class="form-label">Teléfono</label>
+              <input type="tel" class="form-control" id="registerPhone" name="telefonoRegistro" required>
+              <div class="invalid-feedback">
+                Por favor ingresa tu número telefónico.
+              </div>
+            </div>
+            
+            <div class="mb-3">
+              <label for="registerPassword" class="form-label">Contraseña</label>
+              <input type="password" class="form-control" id="registerPassword" name="passwordRegistro" required>
+              <div class="invalid-feedback">
+                Por favor crea una contraseña.
+              </div>
+            </div>
+            
+            <div class="mb-3">
+              <label for="confirmPassword" class="form-label">Confirmar Contraseña</label>
+              <input type="password" class="form-control" id="confirmPassword" name="passwordRegistro1" required>
+              <div class="invalid-feedback">
+                Las contraseñas deben coincidir.
+              </div>
+            </div>
+            
+            <div class="mb-3 form-check">
+              <input type="checkbox" class="form-check-input" id="acceptTerms" required>
+              <label class="form-check-label" for="acceptTerms" style="color: #333;">Acepto los <a href="#" class="text-decoration-none">Términos y Condiciones</a> y la <a href="#" class="text-decoration-none">Política de Privacidad</a></label>
+              <div class="invalid-feedback">
+                Debes aceptar los términos y condiciones.
+              </div>
+            </div>
+            
+            <div class="d-grid">
+              <button type="submit" class="btn btn-primary">Registrarse</button>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer justify-content-center">
+          <p class="mb-0">¿Ya tienes una cuenta? <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalLogin" data-bs-dismiss="modal">Inicia Sesión</a></p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Recuperar Contraseña -->
+  <div class="modal fade" id="modalForgotPassword" tabindex="-1" aria-labelledby="modalForgotPasswordLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background: #2c4d90">
+          <h5 class="modal-title" id="modalForgotPasswordLabel">Recuperar Contraseña</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Ingresa tu email y te enviaremos un enlace para restablecer tu contraseña.</p>
+          <form id="forgotPasswordForm" novalidate>
+            <div class="mb-3">
+              <label for="forgotEmail" class="form-label">Email</label>
+              <input type="email" class="form-control" id="forgotEmail" required>
+              <div class="invalid-feedback">
+                Por favor ingresa un email válido.
+              </div>
+            </div>
+            <div class="d-grid">
+              <button type="submit" class="btn btn-primary">Enviar Enlace</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Instructor 1: Juan Pérez -->
+  <div class="modal fade" id="instructorModal1" tabindex="-1" aria-labelledby="instructorModal1Label" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background: #2c4d90;">
+          <h5 class="modal-title" id="instructorModal1Label">Juan Pérez - Instructor de Piano</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-md-5 text-center">
+              <img src="img/user.jpg" class="img-fluid rounded-circle mb-4" alt="Instructor Juan Pérez" loading="lazy" style="width: 200px; height: 200px; object-fit: cover;">
+              <div class="mb-4">
+                <h5>Especialidades</h5>
+                <span class="badge bg-primary me-1 mb-1">Piano Clásico</span>
+                <span class="badge bg-primary me-1 mb-1">Jazz</span>
+                <span class="badge bg-primary me-1 mb-1">Composición</span>
+              </div>
+              <div class="mb-4">
+                <h5>Idiomas</h5>
+                <p>Español, Inglés, Francés</p>
+              </div>
+              <div>
+                <h5>Contacto</h5>
+                <p>juan.perez@prodigios.edu.pe</p>
+              </div>
+            </div>
+            <div class="col-md-7">
+              <h4 class="mb-3">Biografía</h4>
+              <p>Juan Pérez es un pianista con más de 15 años de experiencia en enseñanza y presentaciones en vivo. Graduado del Conservatorio Nacional de Música con honores, ha participado en festivales internacionales en Europa y América.</p>
+              <p>Su método de enseñanza se basa en la técnica clásica adaptada a los intereses y habilidades de cada estudiante, fomentando siempre la creatividad y el amor por la música.</p>
+              
+              <h4 class="mb-3 mt-4">Experiencia</h4>
+              <ul class="list-unstyled">
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Profesor en Conservatorio Nacional (2015-2020)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Pianista en Orquesta Sinfónica de Lima (2012-2018)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Ganador del Concurso Internacional de Piano (2010)</li>
+              </ul>
+              
+              <h4 class="mb-3 mt-4">Horarios Disponibles</h4>
+              <div class="row">
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Lunes</small>
+                      <p class="mb-0">9am - 12pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Miércoles</small>
+                      <p class="mb-0">2pm - 6pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Viernes</small>
+                      <p class="mb-0">10am - 3pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Sábado</small>
+                      <p class="mb-0">9am - 1pm</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRegistro" data-bs-dismiss="modal">Inscribirme con este instructor</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Instructor 2: Ana Gómez -->
+  <div class="modal fade" id="instructorModal2" tabindex="-1" aria-labelledby="instructorModal2Label" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background: #2c4d90;">
+          <h5 class="modal-title" id="instructorModal2Label">Ana Gómez - Instructora de Canto</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-md-5 text-center">
+              <img src="img/user.jpg" class="img-fluid rounded-circle mb-4" alt="Instructora Ana Gómez" loading="lazy" style="width: 200px; height: 200px; object-fit: cover;">
+              <div class="mb-4">
+                <h5>Especialidades</h5>
+                <span class="badge bg-primary me-1 mb-1">Técnica Vocal</span>
+                <span class="badge bg-primary me-1 mb-1">Música Contemporánea</span>
+                <span class="badge bg-primary me-1 mb-1">Interpretación</span>
+              </div>
+              <div class="mb-4">
+                <h5>Idiomas</h5>
+                <p>Español, Inglés</p>
+              </div>
+              <div>
+                <h5>Contacto</h5>
+                <p>ana.gomez@prodigios.edu.pe</p>
+              </div>
+            </div>
+            <div class="col-md-7">
+              <h4 class="mb-3">Biografía</h4>
+              <p>Ana Gómez es una cantante profesional con 10 años de experiencia en enseñanza vocal. Especializada en técnica vocal contemporánea, ha entrenado a cantantes que hoy forman parte de agrupaciones profesionales y han ganado concursos nacionales.</p>
+              <p>Su método de enseñanza se centra en desarrollar una base técnica sólida mientras se explora la expresión artística personal de cada estudiante.</p>
+              
+              <h4 class="mb-3 mt-4">Experiencia</h4>
+              <ul class="list-unstyled">
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Vocal coach en "La Voz Perú" (2018-2020)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Cantante solista en Orquesta Sinfónica Nacional (2015-2019)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Ganadora del Festival de Canto Popular (2014)</li>
+              </ul>
+              
+              <h4 class="mb-3 mt-4">Horarios Disponibles</h4>
+              <div class="row">
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Martes</small>
+                      <p class="mb-0">10am - 2pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Jueves</small>
+                      <p class="mb-0">3pm - 7pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Sábado</small>
+                      <p class="mb-0">9am - 1pm</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRegistro" data-bs-dismiss="modal">Inscribirme con este instructor</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Instructor 3: Pedro López -->
+  <div class="modal fade" id="instructorModal3" tabindex="-1" aria-labelledby="instructorModal3Label" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background: #2c4d90;">
+          <h5 class="modal-title" id="instructorModal3Label">Pedro López - Instructor de Guitarra</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-md-5 text-center">
+              <img src="img/user.jpg" class="img-fluid rounded-circle mb-4" alt="Instructor Pedro López" loading="lazy" style="width: 200px; height: 200px; object-fit: cover;">
+              <div class="mb-4">
+                <h5>Especialidades</h5>
+                <span class="badge bg-primary me-1 mb-1">Guitarra Eléctrica</span>
+                <span class="badge bg-primary me-1 mb-1">Blues</span>
+                <span class="badge bg-primary me-1 mb-1">Rock</span>
+              </div>
+              <div class="mb-4">
+                <h5>Idiomas</h5>
+                <p>Español, Inglés</p>
+              </div>
+              <div>
+                <h5>Contacto</h5>
+                <p>pedro.lopez@prodigios.edu.pe</p>
+              </div>
+            </div>
+            <div class="col-md-7">
+              <h4 class="mb-3">Biografía</h4>
+              <p>Pedro López es un guitarrista profesional con amplia experiencia en géneros como rock, blues y jazz. Ha participado en múltiples giras internacionales y grabado con artistas reconocidos en la escena musical latinoamericana.</p>
+              <p>Su enfoque de enseñanza combina técnica sólida con aplicación práctica, permitiendo a los estudiantes tocar música real desde las primeras clases.</p>
+              
+              <h4 class="mb-3 mt-4">Experiencia</h4>
+              <ul class="list-unstyled">
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Guitarrista de gira con banda internacional (2017-2020)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Profesor en Berklee College of Music (2014-2016)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Ganador del concurso nacional de guitarra (2012)</li>
+              </ul>
+              
+              <h4 class="mb-3 mt-4">Horarios Disponibles</h4>
+              <div class="row">
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Lunes</small>
+                      <p class="mb-0">4pm - 8pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Miércoles</small>
+                      <p class="mb-0">4pm - 8pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Viernes</small>
+                      <p class="mb-0">3pm - 7pm</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRegistro" data-bs-dismiss="modal">Inscribirme con este instructor</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Instructor 4: María Fernández -->
+  <div class="modal fade" id="instructorModal4" tabindex="-1" aria-labelledby="instructorModal4Label" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background: #2c4d90;">
+          <h5 class="modal-title" id="instructorModal4Label">María Fernández - Instructora de Violín</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-md-5 text-center">
+              <img src="img/user.jpg" class="img-fluid rounded-circle mb-4" alt="Instructora María Fernández" loading="lazy" style="width: 200px; height: 200px; object-fit: cover;">
+              <div class="mb-4">
+                <h5>Especialidades</h5>
+                <span class="badge bg-primary me-1 mb-1">Violín Clásico</span>
+                <span class="badge bg-primary me-1 mb-1">Música de Cámara</span>
+                <span class="badge bg-primary me-1 mb-1">Técnica de Arco</span>
+              </div>
+              <div class="mb-4">
+                <h5>Idiomas</h5>
+                <p>Español, Inglés, Francés</p>
+              </div>
+              <div>
+                <h5>Contacto</h5>
+                <p>maria.fernandez@prodigios.edu.pe</p>
+              </div>
+            </div>
+            <div class="col-md-7">
+              <h4 class="mb-3">Biografía</h4>
+              <p>María Fernández es violinista clásica con formación en el Conservatorio de París. Como miembro de la Orquesta Sinfónica Nacional por más de 8 años, ha actuado en las principales salas de concierto del país y participado en festivales internacionales.</p>
+              <p>Su método de enseñanza enfatiza la técnica correcta desde el inicio, combinada con el desarrollo de la expresión musical personal.</p>
+              
+              <h4 class="mb-3 mt-4">Experiencia</h4>
+              <ul class="list-unstyled">
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Primera violinista en Orquesta Sinfónica Nacional (2015-presente)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Profesora en Conservatorio Nacional (2012-2015)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Ganadora del concurso Jóvenes Solistas (2010)</li>
+              </ul>
+              
+              <h4 class="mb-3 mt-4">Horarios Disponibles</h4>
+              <div class="row">
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Martes</small>
+                      <p class="mb-0">9am - 1pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Jueves</small>
+                      <p class="mb-0">9am - 1pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Sábado</small>
+                      <p class="mb-0">10am - 2pm</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRegistro" data-bs-dismiss="modal">Inscribirme con este instructor</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Instructor 5: Luisa Rodríguez -->
+  <div class="modal fade" id="instructorModal5" tabindex="-1" aria-labelledby="instructorModal5Label" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background: #2c4d90;">
+          <h5 class="modal-title" id="instructorModal5Label">Luisa Rodríguez - Instructora de Ukelele</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-md-5 text-center">
+              <img src="img/user.jpg" class="img-fluid rounded-circle mb-4" alt="Instructora Luisa Rodríguez" loading="lazy" style="width: 200px; height: 200px; object-fit: cover;">
+              <div class="mb-4">
+                <h5>Especialidades</h5>
+                <span class="badge bg-primary me-1 mb-1">Música Hawaiana</span>
+                <span class="badge bg-primary me-1 mb-1">Fingerstyle</span>
+                <span class="badge bg-primary me-1 mb-1">Enseñanza para Niños</span>
+              </div>
+              <div class="mb-4">
+                <h5>Idiomas</h5>
+                <p>Español, Inglés</p>
+              </div>
+              <div>
+                <h5>Contacto</h5>
+                <p>luisa.rodriguez@prodigios.edu.pe</p>
+              </div>
+            </div>
+            <div class="col-md-7">
+              <h4 class="mb-3">Biografía</h4>
+              <p>Luisa Rodríguez es especialista en música hawaiana y contemporánea con el ukelele. Con más de 5 años de experiencia enseñando a niños y adultos, ha desarrollado un método único que hace el aprendizaje divertido y efectivo para todas las edades.</p>
+              <p>Su pasión por este instrumento se refleja en su enseñanza dinámica y en la creación de un ambiente de aprendizaje positivo.</p>
+              
+              <h4 class="mb-3 mt-4">Experiencia</h4>
+              <ul class="list-unstyled">
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Instructora en festivales internacionales de ukelele (2018-presente)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Directora del programa "Ukelele en las Escuelas" (2016-2020)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Artista endorser de marcas reconocidas de ukelele</li>
+              </ul>
+              
+              <h4 class="mb-3 mt-4">Horarios Disponibles</h4>
+              <div class="row">
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Lunes</small>
+                      <p class="mb-0">3pm - 6pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Miércoles</small>
+                      <p class="mb-0">3pm - 6pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Viernes</small>
+                      <p class="mb-0">3pm - 6pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Sábado</small>
+                      <p class="mb-0">10am - 1pm</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRegistro" data-bs-dismiss="modal">Inscribirme con este instructor</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Instructor 6: Carlos Méndez -->
+  <div class="modal fade" id="instructorModal6" tabindex="-1" aria-labelledby="instructorModal6Label" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-white" style="background: #2c4d90;">
+          <h5 class="modal-title" id="instructorModal6Label">Carlos Méndez - Instructor de Requinto</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-md-5 text-center">
+              <img src="img/user.jpg" class="img-fluid rounded-circle mb-4" alt="Instructor Carlos Méndez" loading="lazy" style="width: 200px; height: 200px; object-fit: cover;">
+              <div class="mb-4">
+                <h5>Especialidades</h5>
+                <span class="badge bg-primary me-1 mb-1">Música Tradicional</span>
+                <span class="badge bg-primary me-1 mb-1">Técnica de Púa</span>
+                <span class="badge bg-primary me-1 mb-1">Improvisación</span>
+              </div>
+              <div class="mb-4">
+                <h5>Idiomas</h5>
+                <p>Español</p>
+              </div>
+              <div>
+                <h5>Contacto</h5>
+                <p>carlos.mendez@prodigios.edu.pe</p>
+              </div>
+            </div>
+            <div class="col-md-7">
+              <h4 class="mb-3">Biografía</h4>
+              <p>Carlos Méndez es un experto en música tradicional y requinto con más de 15 años de experiencia. Ha participado en festivales internacionales de música folklórica y grabado con importantes agrupaciones de música latinoamericana.</p>
+              <p>Como instructor, se enfoca en transmitir las técnicas tradicionales mientras adapta el instrumento a contextos musicales contemporáneos, manteniendo siempre la esencia del requinto.</p>
+              
+              <h4 class="mb-3 mt-4">Experiencia</h4>
+              <ul class="list-unstyled">
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Director musical de "Los Tradicionales" (2010-presente)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Ganador del Festival Internacional del Requinto (2015, 2018)</li>
+                <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Compositor de más de 50 obras para requinto</li>
+              </ul>
+              
+              <h4 class="mb-3 mt-4">Horarios Disponibles</h4>
+              <div class="row">
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Martes</small>
+                      <p class="mb-0">2pm - 6pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Jueves</small>
+                      <p class="mb-0">2pm - 6pm</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6 mb-2">
+                  <div class="card bg-light">
+                    <div class="card-body p-2 text-center">
+                      <small>Sábado</small>
+                      <p class="mb-0">9am - 1pm</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRegistro" data-bs-dismiss="modal">Inscribirme con este instructor</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Piano -->
+  <div class="modal fade course-modal" id="pianoModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Curso de Piano</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <img src="img/piano.jpg" alt="Curso de piano" class="course-details-img">
+          
+          <div class="course-tabs">
+            <ul class="nav nav-tabs" id="pianoTab" role="tablist">
+              <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="descripcion-tab" data-bs-toggle="tab" data-bs-target="#piano-descripcion" type="button" role="tab">Descripción</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="temario-tab" data-bs-toggle="tab" data-bs-target="#piano-temario" type="button" role="tab">Temario</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="instructor-tab" data-bs-toggle="tab" data-bs-target="#piano-instructor" type="button" role="tab">Instructor</button>
+              </li>
+            </ul>
+            <div class="tab-content" id="pianoTabContent">
+              <div class="tab-pane fade show active" id="piano-descripcion" role="tabpanel">
+                <h4>Descripción del Curso</h4>
+                <p>Este curso está diseñado para que aprendas a tocar piano desde cero o para perfeccionar tu técnica si ya tienes conocimientos previos. Trabajaremos en:</p>
+                <ul class="course-features">
+                  <li><i class="fas fa-check-circle"></i> Postura correcta y posición de manos</li>
+                  <li><i class="fas fa-check-circle"></i> Lectura de partituras</li>
+                  <li><i class="fas fa-check-circle"></i> Técnicas de digitación</li>
+                  <li><i class="fas fa-check-circle"></i> Teoría musical aplicada</li>
+                  <li><i class="fas fa-check-circle"></i> Repertorio clásico y contemporáneo</li>
+                </ul>
+              </div>
+              <div class="tab-pane fade" id="piano-temario" role="tabpanel">
+                <h4>Temario del Curso</h4>
+                <div class="accordion" id="pianoTemarioAccordion">
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="headingOne">
+                      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true">
+                        Módulo 1: Fundamentos
+                      </button>
+                    </h3>
+                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Conociendo el piano</li>
+                          <li>Posición correcta</li>
+                          <li>Primeros ejercicios</li>
+                          <li>Notas en el pentagrama</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="headingTwo">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
+                        Módulo 2: Técnica Básica
+                      </button>
+                    </h3>
+                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Escalas mayores y menores</li>
+                          <li>Acordes básicos</li>
+                          <li>Ejercicios de independencia</li>
+                          <li>Primeras piezas musicales</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="headingThree">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
+                        Módulo 3: Repertorio
+                      </button>
+                    </h3>
+                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Piezas clásicas sencillas</li>
+                          <li>Música popular</li>
+                          <li>Improvisación básica</li>
+                          <li>Preparación para presentación</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="piano-instructor" role="tabpanel">
+                <div class="row align-items-center">
+                  <div class="col-md-4 text-center">
+                    <img src="img/user.jpg" alt="Instructor Juan Pérez" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
+                    <h5>Juan Pérez</h5>
+                    <p class="text-muted">Instructor de Piano</p>
+                  </div>
+                  <div class="col-md-8">
+                    <h4>Sobre el instructor</h4>
+                    <p>Juan es un pianista con más de 15 años de experiencia en enseñanza y presentaciones en vivo. Graduado del Conservatorio Nacional de Música con honores, ha participado en festivales internacionales en Europa y América.</p>
+                    <p>Su método de enseñanza se basa en la técnica clásica adaptada a los intereses y habilidades de cada estudiante, fomentando siempre la creatividad y el amor por la música.</p>
+                    <div class="mt-3">
+                      <span class="badge bg-primary me-1">Piano Clásico</span>
+                      <span class="badge bg-primary me-1">Jazz</span>
+                      <span class="badge bg-primary me-1">Improvisación</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="text-center mt-4">
+            <a href="#" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#modalRegistro">Inscribirse al Curso</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Guitarra -->
+  <div class="modal fade course-modal" id="guitarraModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Curso de Guitarra</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <img src="img/guitarra.jpg" alt="Curso de guitarra" class="course-details-img">
+          
+          <div class="course-tabs">
+            <ul class="nav nav-tabs" id="guitarraTab" role="tablist">
+              <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="guitarra-descripcion-tab" data-bs-toggle="tab" data-bs-target="#guitarra-descripcion" type="button" role="tab">Descripción</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="guitarra-temario-tab" data-bs-toggle="tab" data-bs-target="#guitarra-temario" type="button" role="tab">Temario</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="guitarra-instructor-tab" data-bs-toggle="tab" data-bs-target="#guitarra-instructor" type="button" role="tab">Instructor</button>
+              </li>
+            </ul>
+            <div class="tab-content" id="guitarraTabContent">
+              <div class="tab-pane fade show active" id="guitarra-descripcion" role="tabpanel">
+                <h4>Descripción del Curso</h4>
+                <p>Aprende a tocar guitarra desde cero o mejora tu técnica con nuestro curso completo que cubre todos los estilos:</p>
+                <ul class="course-features">
+                  <li><i class="fas fa-check-circle"></i> Acordes básicos y avanzados</li>
+                  <li><i class="fas fa-check-circle"></i> Técnicas de rasgueo y punteo</li>
+                  <li><i class="fas fa-check-circle"></i> Escalas y teoría aplicada</li>
+                  <li><i class="fas fa-check-circle"></i> Improvisación</li>
+                  <li><i class="fas fa-check-circle"></i> Mantenimiento del instrumento</li>
+                </ul>
+              </div>
+              <div class="tab-pane fade" id="guitarra-temario" role="tabpanel">
+                <h4>Temario del Curso</h4>
+                <p>El curso se divide en 4 módulos progresivos que te llevarán desde lo más básico hasta técnicas avanzadas:</p>
+                <ol>
+                  <li><strong>Introducción a la guitarra:</strong> Partes del instrumento, afinación, primeros acordes</li>
+                  <li><strong>Técnica básica:</strong> Rasgueos, cambios de acordes, canciones sencillas</li>
+                  <li><strong>Desarrollo musical:</strong> Escalas, arpegios, teoría aplicada</li>
+                  <li><strong>Estilos y repertorio:</strong> Rock, blues, folk, fingerstyle</li>
+                </ol>
+              </div>
+              <div class="tab-pane fade" id="guitarra-instructor" role="tabpanel">
+                <div class="row align-items-center">
+                  <div class="col-md-4 text-center">
+                    <img src="img/user.jpg" alt="Instructor Pedro López" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
+                    <h5>Pedro López</h5>
+                    <p class="text-muted">Instructor de Guitarra</p>
+                  </div>
+                  <div class="col-md-8">
+                    <h4>Sobre el instructor</h4>
+                    <p>Pedro es un guitarrista profesional con amplia experiencia en géneros como rock, blues y jazz. Ha participado en múltiples giras internacionales y grabado con artistas reconocidos.</p>
+                    <p>Su enfoque de enseñanza combina técnica sólida con aplicación práctica, permitiendo a los estudiantes tocar música real desde las primeras clases.</p>
+                    <div class="mt-3">
+                      <span class="badge bg-primary me-1">Rock</span>
+                      <span class="badge bg-primary me-1">Blues</span>
+                      <span class="badge bg-primary me-1">Improvisación</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="text-center mt-4">
+            <a href="#" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#modalRegistro">Inscribirse al Curso</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Canto -->
+  <div class="modal fade course-modal" id="cantoModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Curso de Canto</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <img src="img/canto.jpg" alt="Curso de canto" class="course-details-img">
+          
+          <div class="course-tabs">
+            <ul class="nav nav-tabs" id="cantoTab" role="tablist">
+              <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="canto-descripcion-tab" data-bs-toggle="tab" data-bs-target="#canto-descripcion" type="button" role="tab">Descripción</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="canto-temario-tab" data-bs-toggle="tab" data-bs-target="#canto-temario" type="button" role="tab">Temario</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="canto-instructor-tab" data-bs-toggle="tab" data-bs-target="#canto-instructor" type="button" role="tab">Instructor</button>
+              </li>
+            </ul>
+            <div class="tab-content" id="cantoTabContent">
+              <div class="tab-pane fade show active" id="canto-descripcion" role="tabpanel">
+                <h4>Descripción del Curso</h4>
+                <p>Descubre y desarrolla tu voz con nuestro curso de canto profesional. Aprenderás:</p>
+                <ul class="course-features">
+                  <li><i class="fas fa-check-circle"></i> Técnica vocal correcta</li>
+                  <li><i class="fas fa-check-circle"></i> Respiración diafragmática</li>
+                  <li><i class="fas fa-check-circle"></i> Afinación y rango vocal</li>
+                  <li><i class="fas fa-check-circle"></i> Interpretación y expresión</li>
+                  <li><i class="fas fa-check-circle"></i> Cuidado de la voz</li>
+                </ul>
+                <p>El curso incluye grabaciones profesionales para que puedas escuchar tu progreso.</p>
+              </div>
+              <div class="tab-pane fade" id="canto-temario" role="tabpanel">
+                <h4>Temario del Curso</h4>
+                <div class="row">
+                  <div class="col-md-6">
+                    <h5>Fundamentos</h5>
+                    <ul>
+                      <li>Anatomía de la voz</li>
+                      <li>Ejercicios de respiración</li>
+                      <li>Calentamiento vocal</li>
+                      <li>Postura correcta</li>
+                    </ul>
+                  </div>
+                  <div class="col-md-6">
+                    <h5>Técnica Vocal</h5>
+                    <ul>
+                      <li>Resonancia y proyección</li>
+                      <li>Extensión del rango vocal</li>
+                      <li>Vibrato y efectos</li>
+                      <li>Estilos musicales</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="canto-instructor" role="tabpanel">
+                <div class="row align-items-center">
+                  <div class="col-md-4 text-center">
+                    <img src="img/user.jpg" alt="Instructora Ana Gómez" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
+                    <h5>Ana Gómez</h5>
+                    <p class="text-muted">Instructora de Canto</p>
+                  </div>
+                  <div class="col-md-8">
+                    <h4>Sobre la instructora</h4>
+                    <p>Ana es una cantante profesional con 10 años de experiencia en enseñanza vocal. Especializada en técnica vocal contemporánea, ha entrenado a cantantes que hoy forman parte de agrupaciones profesionales.</p>
+                    <p>Su método combina técnica clásica con aplicaciones modernas, adaptándose a las necesidades de cada estudiante.</p>
+                    <div class="mt-3">
+                      <span class="badge bg-primary me-1">Técnica Vocal</span>
+                      <span class="badge bg-primary me-1">Interpretación</span>
+                      <span class="badge bg-primary me-1">Música Popular</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="text-center mt-4">
+            <a href="#" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#modalRegistro">Inscribirse al Curso</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Violín -->
+  <div class="modal fade course-modal" id="violinModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Curso de Violín</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <img src="img/violin.jpg" alt="Curso de violín" class="course-details-img">
+          
+          <div class="course-tabs">
+            <ul class="nav nav-tabs" id="violinTab" role="tablist">
+              <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="violin-descripcion-tab" data-bs-toggle="tab" data-bs-target="#violin-descripcion" type="button" role="tab">Descripción</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="violin-temario-tab" data-bs-toggle="tab" data-bs-target="#violin-temario" type="button" role="tab">Temario</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="violin-instructor-tab" data-bs-toggle="tab" data-bs-target="#violin-instructor" type="button" role="tab">Instructor</button>
+              </li>
+            </ul>
+            <div class="tab-content" id="violinTabContent">
+              <div class="tab-pane fade show active" id="violin-descripcion" role="tabpanel">
+                <h4>Descripción del Curso</h4>
+                <p>Domina el arte del violín con nuestro curso diseñado para todos los niveles. Aprenderás:</p>
+                <ul class="course-features">
+                  <li><i class="fas fa-check-circle"></i> Técnica correcta de arco y mano izquierda</li>
+                  <li><i class="fas fa-check-circle"></i> Afinación y postura profesional</li>
+                  <li><i class="fas fa-check-circle"></i> Vibrato y expresividad musical</li>
+                  <li><i class="fas fa-check-circle"></i> Repertorio clásico y moderno</li>
+                  <li><i class="fas fa-check-circle"></i> Lectura de partituras para violín</li>
+                </ul>
+              </div>
+              <div class="tab-pane fade" id="violin-temario" role="tabpanel">
+                <h4>Temario del Curso</h4>
+                <div class="accordion" id="violinTemarioAccordion">
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="violinHeadingOne">
+                      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#violinCollapseOne" aria-expanded="true">
+                        Módulo 1: Fundamentos
+                      </button>
+                    </h3>
+                    <div id="violinCollapseOne" class="accordion-collapse collapse show" aria-labelledby="violinHeadingOne">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Partes del violín y cuidado</li>
+                          <li>Sujeción correcta del arco</li>
+                          <li>Posición de manos y cuerpo</li>
+                          <li>Primeras notas y escalas</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="violinHeadingTwo">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#violinCollapseTwo">
+                        Módulo 2: Técnica Intermedia
+                      </button>
+                    </h3>
+                    <div id="violinCollapseTwo" class="accordion-collapse collapse" aria-labelledby="violinHeadingTwo">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Cambios de posición</li>
+                          <li>Doble cuerdas y acordes</li>
+                          <li>Técnicas de arco: legato, staccato</li>
+                          <li>Piezas clásicas nivel intermedio</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="violinHeadingThree">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#violinCollapseThree">
+                        Módulo 3: Avanzado y Estilos
+                      </button>
+                    </h3>
+                    <div id="violinCollapseThree" class="accordion-collapse collapse" aria-labelledby="violinHeadingThree">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Vibrato y expresividad avanzada</li>
+                          <li>Música folklórica y contemporánea</li>
+                          <li>Improvisación</li>
+                          <li>Preparación para conciertos</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="violin-instructor" role="tabpanel">
+                <div class="row align-items-center">
+                  <div class="col-md-4 text-center">
+                    <img src="img/user.jpg" alt="Instructora María Fernández" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
+                    <h5>María Fernández</h5>
+                    <p class="text-muted">Instructora de Violín</p>
+                  </div>
+                  <div class="col-md-8">
+                    <h4>Sobre la instructora</h4>
+                    <p>María es violinista clásica con formación en el extranjero y miembro de la Orquesta Sinfónica Nacional por más de 8 años. Su experiencia incluye participación en festivales internacionales y grabaciones profesionales.</p>
+                    <p>Su método de enseñanza combina la técnica clásica con un enfoque moderno y accesible para estudiantes de todos los niveles.</p>
+                    <div class="mt-3">
+                      <span class="badge bg-primary me-1">Violín Clásico</span>
+                      <span class="badge bg-primary me-1">Técnica de Arco</span>
+                      <span class="badge bg-primary me-1">Música de Cámara</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="text-center mt-4">
+            <a href="#" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#modalRegistro">Inscribirse al Curso</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Ukelele -->
+  <div class="modal fade course-modal" id="ukeleleModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Curso de Ukelele</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <img src="img/ukelele.jpg" alt="Curso de ukelele" class="course-details-img">
+          
+          <div class="course-tabs">
+            <ul class="nav nav-tabs" id="ukeleleTab" role="tablist">
+              <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="ukelele-descripcion-tab" data-bs-toggle="tab" data-bs-target="#ukelele-descripcion" type="button" role="tab">Descripción</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="ukelele-temario-tab" data-bs-toggle="tab" data-bs-target="#ukelele-temario" type="button" role="tab">Temario</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="ukelele-instructor-tab" data-bs-toggle="tab" data-bs-target="#ukelele-instructor" type="button" role="tab">Instructor</button>
+              </li>
+            </ul>
+            <div class="tab-content" id="ukeleleTabContent">
+              <div class="tab-pane fade show active" id="ukelele-descripcion" role="tabpanel">
+                <h4>Descripción del Curso</h4>
+                <p>Disfruta aprendiendo música con el ukelele, el instrumento perfecto para principiantes. En este curso aprenderás:</p>
+                <ul class="course-features">
+                  <li><i class="fas fa-check-circle"></i> Afinación y primeros acordes</li>
+                  <li><i class="fas fa-check-circle"></i> Ritmos y patrones de rasgueo</li>
+                  <li><i class="fas fa-check-circle"></i> Técnicas de fingerpicking</li>
+                  <li><i class="fas fa-check-circle"></i> Canciones populares y hawaianas</li>
+                  <li><i class="fas fa-check-circle"></i> Mantenimiento básico del instrumento</li>
+                </ul>
+              </div>
+              <div class="tab-pane fade" id="ukelele-temario" role="tabpanel">
+                <h4>Temario del Curso</h4>
+                <div class="row">
+                  <div class="col-md-6">
+                    <h5>Básico</h5>
+                    <ul>
+                      <li>Conociendo tu ukelele</li>
+                      <li>Acordes mayores y menores</li>
+                      <li>Rasgueos básicos</li>
+                      <li>Primeras canciones</li>
+                    </ul>
+                  </div>
+                  <div class="col-md-6">
+                    <h5>Intermedio</h5>
+                    <ul>
+                      <li>Acordes de séptima</li>
+                      <li>Patrones rítmicos complejos</li>
+                      <li>Introducción al fingerstyle</li>
+                      <li>Transposición de canciones</li>
+                    </ul>
+                  </div>
+                  <div class="col-md-6">
+                    <h5>Avanzado</h5>
+                    <ul>
+                      <li>Técnicas solistas</li>
+                      <li>Improvisación</li>
+                      <li>Música hawaiana tradicional</li>
+                      <li>Composición propia</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="ukelele-instructor" role="tabpanel">
+                <div class="row align-items-center">
+                  <div class="col-md-4 text-center">
+                    <img src="img/user.jpg" alt="Instructora Luisa Rodríguez" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
+                    <h5>Luisa Rodríguez</h5>
+                    <p class="text-muted">Instructora de Ukelele</p>
+                  </div>
+                  <div class="col-md-8">
+                    <h4>Sobre la instructora</h4>
+                    <p>Luisa es especialista en música hawaiana y contemporánea con el ukelele. Con más de 5 años de experiencia enseñando a niños y adultos, ha desarrollado un método único que hace el aprendizaje divertido y efectivo.</p>
+                    <p>Su enfoque pedagógico se centra en la práctica inmediata y el disfrute de la música desde la primera clase.</p>
+                    <div class="mt-3">
+                      <span class="badge bg-primary me-1">Música Hawaiana</span>
+                      <span class="badge bg-primary me-1">Fingerstyle</span>
+                      <span class="badge bg-primary me-1">Enseñanza para Niños</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="text-center mt-4">
+            <a href="#" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#modalRegistro">Inscribirse al Curso</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Requinto -->
+  <div class="modal fade course-modal" id="requintoModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Curso de Requinto</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <img src="img/requinto.jpg" alt="Curso de requinto" class="course-details-img">
+          
+          <div class="course-tabs">
+            <ul class="nav nav-tabs" id="requintoTab" role="tablist">
+              <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="requinto-descripcion-tab" data-bs-toggle="tab" data-bs-target="#requinto-descripcion" type="button" role="tab">Descripción</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="requinto-temario-tab" data-bs-toggle="tab" data-bs-target="#requinto-temario" type="button" role="tab">Temario</button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button class="nav-link" id="requinto-instructor-tab" data-bs-toggle="tab" data-bs-target="#requinto-instructor" type="button" role="tab">Instructor</button>
+              </li>
+            </ul>
+            <div class="tab-content" id="requintoTabContent">
+              <div class="tab-pane fade show active" id="requinto-descripcion" role="tabpanel">
+                <h4>Descripción del Curso</h4>
+                <p>Domina este instrumento melódico esencial en la música tradicional latinoamericana. En este curso aprenderás:</p>
+                <ul class="course-features">
+                  <li><i class="fas fa-check-circle"></i> Técnica de púa y digitación</li>
+                  <li><i class="fas fa-check-circle"></i> Escalas y melodías tradicionales</li>
+                  <li><i class="fas fa-check-circle"></i> Acompañamiento en diferentes ritmos</li>
+                  <li><i class="fas fa-check-circle"></i> Improvisación melódica</li>
+                  <li><i class="fas fa-check-circle"></i> Mantenimiento del instrumento</li>
+                </ul>
+              </div>
+              <div class="tab-pane fade" id="requinto-temario" role="tabpanel">
+                <h4>Temario del Curso</h4>
+                <div class="accordion" id="requintoTemarioAccordion">
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="requintoHeadingOne">
+                      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#requintoCollapseOne" aria-expanded="true">
+                        Fundamentos del Requinto
+                      </button>
+                    </h3>
+                    <div id="requintoCollapseOne" class="accordion-collapse collapse show" aria-labelledby="requintoHeadingOne">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Diferencias con la guitarra</li>
+                          <li>Afinación y postura</li>
+                          <li>Escalas básicas</li>
+                          <li>Primeras melodías</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="requintoHeadingTwo">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#requintoCollapseTwo">
+                        Técnica Intermedia
+                      </button>
+                    </h3>
+                    <div id="requintoCollapseTwo" class="accordion-collapse collapse" aria-labelledby="requintoHeadingTwo">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Melodías tradicionales</li>
+                          <li>Técnicas de púa avanzada</li>
+                          <li>Armonización básica</li>
+                          <li>Ritmos latinoamericanos</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h3 class="accordion-header" id="requintoHeadingThree">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#requintoCollapseThree">
+                        Avanzado y Estilos
+                      </button>
+                    </h3>
+                    <div id="requintoCollapseThree" class="accordion-collapse collapse" aria-labelledby="requintoHeadingThree">
+                      <div class="accordion-body">
+                        <ul>
+                          <li>Improvisación melódica</li>
+                          <li>Técnicas solistas</li>
+                          <li>Composición para requinto</li>
+                          <li>Repertorio avanzado</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="requinto-instructor" role="tabpanel">
+                <div class="row align-items-center">
+                  <div class="col-md-4 text-center">
+                    <img src="img/user.jpg" alt="Instructor Carlos Méndez" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
+                    <h5>Carlos Méndez</h5>
+                    <p class="text-muted">Instructor de Requinto</p>
+                  </div>
+                  <div class="col-md-8">
+                    <h4>Sobre el instructor</h4>
+                    <p>Carlos es un experto en música tradicional y requinto con más de 15 años de experiencia. Ha participado en festivales internacionales de música folklórica y grabado con importantes agrupaciones de música latinoamericana.</p>
+                    <p>Su enseñanza se centra en preservar las técnicas tradicionales mientras adapta el instrumento a contextos musicales contemporáneos.</p>
+                    <div class="mt-3">
+                      <span class="badge bg-primary me-1">Música Tradicional</span>
+                      <span class="badge bg-primary me-1">Técnica de Púa</span>
+                      <span class="badge bg-primary me-1">Improvisación</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="text-center mt-4">
+            <a href="#" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#modalRegistro">Inscribirse al Curso</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal Mensaje -->
+  <div class="modal fade course-modal" id="messageModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Mensaje</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p><?php echo htmlspecialchars($modalMessage); ?></p>
+          
+          <?php if(isset($_SESSION['password_errors'])): ?>
+            <ul class="mt-3">
+              <?php foreach($_SESSION['password_errors'] as $error): ?>
+                <li><?php echo htmlspecialchars($error); ?></li>
+              <?php endforeach; ?>
+            </ul>
+            <?php unset($_SESSION['password_errors']); ?>
+          <?php endif; ?>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Aceptar</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Scripts -->
+  <script src="js/index.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+  <?php if (!empty($modalMessage)): ?>
+    <script>
+      var myModal = new bootstrap.Modal(document.getElementById('messageModal'));
+      myModal.show();
+    </script>
+  <?php endif; ?>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/layouts/aside.php b/PRODIGIOS/app/views/layouts/aside.php
new file mode 100644
index 0000000..d3fc931
--- /dev/null
+++ b/PRODIGIOS/app/views/layouts/aside.php
@@ -0,0 +1,31 @@
+<!-- Sidebar izquierdo -->
+<!-- Sidebar izquierdo -->
+<aside class="sidebar">
+
+  <h2><span>PRODIGIOS</span></h2>
+  <div class="profile-section">
+    <img src="img/user.jpg" alt="Foto de perfil" class="profile-img">
+    <h4 class="profile-name"> <?=$userInfor['nombre']?> </h4>
+    <p class="profile-role">Administrador</p>
+  </div>
+  <ul class="menu">
+    <li><a href="#" class="active" onclick="toggleVisibility('dashboard', null, 'Dashboard')"><i class="fa-solid fa-house"></i><span>Dashboard</span></a></li>
+    <li><a href="#" onclick="toggleVisibility('asistencia', null, 'Lista de Asistencia')"><i class="fa-solid fa-clipboard-list"></i><span>Asistencia</span></a></li>
+    <li><a href="#" onclick="toggleVisibility('calendario', null, 'Calendario')"><i class="fa-solid fa-calendar-days"></i></i><span>Calendario</span></a></li>
+
+    <li>
+      <details>
+        <summary><i class="fa-solid fa-pen-to-square"></i><span>Registro</span></summary>
+        <ul class="submenu">
+          <li><a href="#" onclick="toggleVisibility(null, 'curso', 'Registro de Cursos')"><i class="fa-solid fa-book"></i><span>Registrar Curso</span></a></li>
+          <li><a href="#" onclick="toggleVisibility(null, 'docente', 'Registro de Docentes')"><i class="fa-solid fa-chalkboard-user"></i><span>Registrar Docente</span></a></li>
+          <li><a href="#" onclick="toggleVisibility(null, 'estudiante', 'Registro de Estudiantes')"><i class="fa-solid fa-user-graduate"></i><span>Registrar Estudiante</span></a></li>
+        </ul>
+      </details>
+    </li>
+    <li><a href="#" onclick="toggleVisibility('reporte', null, 'Reportes')"><i class="fa-solid fa-chart-pie"></i><span>Reportes</span></a></li>
+    <li><a href="#" onclick="toggleVisibility('configuracion', null, 'Configuración')"><i class="fa-solid fa-gear"></i><span>Configuración</span></a></li>
+  </ul>
+</aside>
+<main class="main-content">
+  <div class="suboption-panel" id="suboption-panel">
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/layouts/footer.php b/PRODIGIOS/app/views/layouts/footer.php
new file mode 100644
index 0000000..63eb2a7
--- /dev/null
+++ b/PRODIGIOS/app/views/layouts/footer.php
@@ -0,0 +1,25 @@
+      </div>
+    </main>
+
+
+
+
+
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="js/app.js"></script>
+
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/layouts/header.php b/PRODIGIOS/app/views/layouts/header.php
new file mode 100644
index 0000000..802ff04
--- /dev/null
+++ b/PRODIGIOS/app/views/layouts/header.php
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PRODIGIOS - Academia de Música</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
+  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
+  <link rel="stylesheet" href="css/app.css">
+
+
+</head>
+
+<body>
+  <!-- Navbar superior -->
+  <header class="navbar">
+    <div class="container-fluid d-flex justify-content-between align-items-center">
+      <span class="navbar-brand">Bienvenido!</span>
+      <div class="d-flex align-items-center">
+        <div class="navbar-icons">
+          <div class="notification-icon mx-2" id="theme-toggle" title="Cambiar tema">
+            <i id="theme-icon" class="fas fa-moon"></i>
+          </div>
+          <div class="notification-icon">
+            <i class="fa-solid fa-bell"></i>
+            <span class="notification-badge">0</span>
+          </div>
+          <div class="chat-icon">
+            <i class="fa-solid fa-comment-dots"></i>
+            <span class="notification-badge">0</span>
+          </div>
+        </div>
+        <div class="dropdown">
+          <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="fa-solid fa-user-circle fa-xl"></i>
+          </a>
+          <ul class="dropdown-menu dropdown-menu-end shadow">
+            <li><a class="dropdown-item" href=""><i class="fa-solid fa-user me-2"></i>Perfil</a></li>
+            <li><a class="dropdown-item" href=""><i class="fa-solid fa-gear me-2"></i>Configuración</a></li>
+            <li>
+              <hr class="dropdown-divider">
+            </li>
+            <li><a class="dropdown-item" href="" id="logoutBtn"><i class="fa-solid fa-right-from-bracket me-2"></i>Cerrar Sesión</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </header>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/partials/adminCourse.php b/PRODIGIOS/app/views/partials/adminCourse.php
new file mode 100644
index 0000000..8361cc9
--- /dev/null
+++ b/PRODIGIOS/app/views/partials/adminCourse.php
@@ -0,0 +1,70 @@
+<!--signature section-->
+<div class="gestion-curso">
+  <div class="form-container">
+    <h3 class="section-title">Registrar Nuevo Curso</h3>
+    <div class="row g-3">
+      <div class="col-md-4">
+        <label for="nombreCurso" class="form-label">Nombres</label>
+        <input type="text" id="nombreCurso" class="form-control" placeholder="Ingrese el nombre del curso" required>
+      </div>
+      <div class="col-md-4">
+        <label for="descripcionCurso" class="form-label">Descripción</label>
+        <textarea id="descripcionCurso" class="form-control" rows="1" placeholder="Ingrese una breve descripción" required></textarea>
+      </div>
+      <div class="col-md-4">
+        <label for="duracionCurso" class="form-label">Duración (horas)</label>
+        <input type="number" id="duracionCurso" class="form-control" placeholder="Ingrese la duración" required>
+      </div>
+      <div class="col-md-4">
+        <label for="nivelCurso" class="form-label">Nivel</label>
+        <select id="nivelCurso" class="form-select" required>
+          <option value="" disabled selected>Seleccione el nivel</option>
+          <option value="Básico">Básico</option>
+          <option value="Intermedio">Intermedio</option>
+          <option value="Avanzado">Avanzado</option>
+        </select>
+      </div>
+      <div class="col-md-4">
+        <label for="horarioCurso" class="form-label">Horario</label>
+        <input type="text" id="horarioCurso" class="form-control" placeholder="Ingrese el horario" required>
+      </div>
+      <div class="col-md-4">
+        <label for="docenteCurso" class="form-label">Docente</label>
+        <input type="text" id="docenteCurso" class="form-control" placeholder="Ingrese el nombre del docente" required>
+      </div>
+      <div class="col-md-4">
+        <label for="numPlazaCurso" class="form-label">N° de Plazas</label>
+        <input type="number" id="numPlazaCurso" class="form-control" placeholder="Ingrese el número de plazas" required>
+      </div>
+      <div class="col-md-4">
+        <label for="costoCurso" class="form-label">Costo (PEN)</label>
+        <input type="number" id="costoCurso" class="form-control" placeholder="Ingrese el costo" required>
+      </div>
+      <div class="col-md-4">
+        <label for="materialCurso" class="form-label">Material (opcional)</label>
+        <textarea id="materialCurso" class="form-control" rows="1" placeholder="Describa los materiales (opcional)"></textarea>
+      </div>
+    </div>
+    <button class="btn btn-custom mt-3" id="registrarCurso">Registrar Curso</button>
+  </div>
+  <table id="tablaDinamicaCurso" class="table table-striped table-bordered" style="width:100%">
+    <thead class="table-dark">
+      <tr>
+        <th>ID</th>
+        <th>Nombres</th>
+        <th>Descripción</th>
+        <th>Duración</th>
+        <th>Nivel</th>
+        <th>Horario</th>
+        <th>Docente</th>
+        <th>N° de Plazas</th>
+        <th>Costo</th>
+        <th>Material</th>
+        <th>Acciones</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Aquí se agregarán las filas dinámicamente -->
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/partials/adminStudent.php b/PRODIGIOS/app/views/partials/adminStudent.php
new file mode 100644
index 0000000..dd3bb9c
--- /dev/null
+++ b/PRODIGIOS/app/views/partials/adminStudent.php
@@ -0,0 +1,84 @@
+<!--Estudent section-->
+<div class="gestion-estudiante">
+  <!-- Formulario para ingresar datos -->
+  <div class="form-container">
+    <h3 class="section-title">Registrar Nuevo Estudiante</h3>
+    <div class="row g-3">
+      <div class="col-md-4">
+        <label for="nombre" class="form-label">Nombre</label>
+        <input type="text" id="nombre" class="form-control" placeholder="Ingrese el nombre completo">
+      </div>
+      <div class="col-md-4">
+        <label for="dni" class="form-label">DNI</label>
+        <input type="text" id="dni" class="form-control" placeholder="Ingrese el DNI">
+      </div>
+      <div class="col-md-4">
+        <label for="fecha_nacimiento" class="form-label">Fecha de Nacimiento</label>
+        <input type="date" id="fecha_nacimiento" class="form-control">
+      </div>
+      <div class="col-md-4">
+        <label for="direccion" class="form-label">Dirección</label>
+        <input type="text" id="direccion" class="form-control" placeholder="Ingrese la dirección">
+      </div>
+      <div class="col-md-4">
+        <label for="contacto" class="form-label">Contacto</label>
+        <input type="text" id="contacto" class="form-control" placeholder="Ingrese un número de contacto">
+      </div>
+      <div class="col-md-4">
+        <label for="curso" class="form-label">Curso</label>
+        <select id="curso" class="form-select">
+          <option value="" disabled selected>Seleccione un curso</option>
+          <option value="Guitarra">Guitarra</option>
+          <option value="Canto">Canto</option>
+          <option value="Piano">Piano</option>
+          <option value="Ukelele">Ukelele</option>
+          <option value="Requinto">Requinto</option>
+          <option value="Violin">Violin</option>
+        </select>
+      </div>
+      <div class="col-md-4">
+        <label for="nivel" class="form-label">Nivel</label>
+        <select id="nivel" class="form-select">
+          <option value="" disabled selected>Seleccione un nivel</option>
+          <option value="Principiante">Principiante</option>
+          <option value="Intermedio">Intermedio</option>
+          <option value="Avanzado">Avanzado</option>
+        </select>
+      </div>
+      <div class="col-md-4">
+        <label for="horario" class="form-label">Horario</label>
+        <input type="text" id="horario" class="form-control" placeholder="Ingrese el horario">
+      </div>
+      <div class="col-md-4">
+        <label for="estado" class="form-label">Estado</label>
+        <select id="estado" class="form-select">
+          <option value="" disabled selected>Seleccione el estado</option>
+          <option value="Sin Confirmar">Sin Confirmar</option>
+          <option value="Pendiente">Pendiente</option>
+          <option value="Confirmado">Confirmado</option>
+        </select>
+      </div>
+    </div>
+    <button class="btn btn-custom mt-3" id="registrar">Registrar Estudiante</button>
+  </div>
+  <table id="tablaDinamica" class="table table-striped table-bordered" style="width:100%">
+    <thead class="table-dark">
+      <tr>
+        <th>ID</th>
+        <th>Nombre</th>
+        <th>DNI</th>
+        <th>Fecha Nac.</th>
+        <th>Dirección</th>
+        <th>Contacto</th>
+        <th>Curso</th>
+        <th>Nivel</th>
+        <th>Horario</th>
+        <th>Estado</th>
+        <th>Acciones</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Aquí se agregarán las filas dinámicamente -->
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/partials/adminTeacher.php b/PRODIGIOS/app/views/partials/adminTeacher.php
new file mode 100644
index 0000000..8730004
--- /dev/null
+++ b/PRODIGIOS/app/views/partials/adminTeacher.php
@@ -0,0 +1,64 @@
+<!--teacher section-->
+<div class="gestion-docente">
+  <div class="form-container ">
+    <h3 class="section-title">Registrar Nuevo Docente</h3>
+    <div class="row g-3">
+      <div class="col-md-4">
+        <label for="nombreDocente" class="form-label">Nombres</label>
+        <input type="text" class="form-control" id="nombreDocente" placeholder="Ingrese el nombre completo" required>
+      </div>
+      <div class="col-md-4">
+        <label for="dniDocente" class="form-label">DNI</label>
+        <input type="text" class="form-control" id="dniDocente" placeholder="Ingrese el número de DNI" required>
+      </div>
+      <div class="col-md-4">
+        <label for="fechaNacDocente" class="form-label">Fecha de Nacimiento</label>
+        <input type="date" class="form-control" id="fechaNacDocente" required>
+      </div>
+      <div class="col-md-4">
+        <label for="especialidadDocente" class="form-label">Especialidad</label>
+        <input type="text" class="form-control" id="especialidadDocente" placeholder="Ingrese la especialidad" required>
+      </div>
+      <div class="col-md-4">
+        <label for="gradoDocente" class="form-label">Grado Académico</label>
+        <input type="text" class="form-control" id="gradoDocente" placeholder="Ingrese el grado académico" required>
+      </div>
+      <div class="col-md-4">
+        <label for="experienciaDocente" class="form-label">Experiencia (años)</label>
+        <input type="number" class="form-control" id="experienciaDocente" placeholder="Ingrese los años de experiencia" required>
+      </div>
+      <div class="col-md-4">
+        <label for="horarioDocente" class="form-label">Horario Disponible</label>
+        <input type="text" class="form-control" id="horarioDocente" placeholder="Ingrese el horario disponible" required>
+      </div>
+      <div class="col-md-4">
+        <label for="contactoDocente" class="form-label">Contacto</label>
+        <input type="email" class="form-control" id="contactoDocente" placeholder="Ingrese el correo de contacto" required>
+      </div>
+      <div class="col-md-4">
+        <label for="salarioDocente" class="form-label">Salario (PEN)</label>
+        <input type="number" class="form-control" id="salarioDocente" placeholder="Ingrese el salario esperado" required>
+      </div>
+    </div>
+    <button type="button" class="btn btn-custom mt-3" id="registrarDocente">Registrar Docente</button>
+  </div>
+  <table id="tablaDinamicaDocente" class="table table-striped table-bordered" style="width:100%">
+    <thead class="table-dark">
+      <tr>
+        <th>ID</th>
+        <th>Nombres</th>
+        <th>DNI</th>
+        <th>Fecha Nac.</th>
+        <th>Especialidad</th>
+        <th>Grado Académico</th>
+        <th>Experiencia</th>
+        <th>Horario</th>
+        <th>Contacto</th>
+        <th>Salario</th>
+        <th>Acciones</th>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/partials/attendance.php b/PRODIGIOS/app/views/partials/attendance.php
new file mode 100644
index 0000000..6881d2e
--- /dev/null
+++ b/PRODIGIOS/app/views/partials/attendance.php
@@ -0,0 +1,79 @@
+<!-- Asistencia -->
+<div class="asistencia" style="display: none;">
+    <h2 class="section-title">Lista de Asistencia</h2>
+    <div class="card config-card">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <div class="d-flex flex-wrap align-items-center gap-5">
+                <h3 class="mb-1"> <strong>Curso: </strong> Canto</h3>
+                
+                <h3 class="mb-1"><strong>Profesor: </strong> Juan Pérez</h3>
+                <h3 class="mb-1"><strong>Clase: </strong> Notas altas</h3>
+                <h3 class="mb-1"><strong>Fecha: </strong> 12/07/2025</h3>
+            </div>
+            <button class="btn btn-warning btn-sm" onclick="resetearTodo()">
+                <i class="fa-solid fa-rotate-left"></i> Reiniciar
+            </button>
+        </div>
+        <div class="card-body table-responsive">
+            <table class="table table-hover align-middle text-start" id="tablaAsistencia">
+                <thead class="text-white" style="background-color: var(--primary);">
+                <tr>
+                    <th >#</th>
+                    <th>Nombre</th>
+                    <th>Codigo</th>
+                    <th>Acciones</th>
+                    <th>Asistencia</th>
+                    <th>Justificación</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>1</td>
+                    <td>Juan Pérez</td>
+                    <td>3004-84355</td>
+                    <td>
+                        <button class="btn btn-success btn-sm me-1" onclick="marcar(this, 'presente')">
+                            <i class="fa-solid fa-user-check"></i>
+                        </button>
+                        
+                        <button class="btn btn-danger btn-sm me-1" onclick="marcar(this, 'ausente')">
+                            <i class="fa-solid fa-user-xmark"></i>
+                        </button>
+                        
+                        <button class="btn btn-warning btn-sm me-1" onclick="marcar(this, 'tardanza')">
+                            <i class="fa-solid fa-user-clock"></i>
+                        </button>
+                </td>
+                    <td class="estado estado-pendiente">Sin marcar</td>
+                    <td>
+                        <input type="text" class="form-control form-control-sm" placeholder="Observación" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>2</td>
+                    <td>Lucía García</td>
+                    <td>2033-54534</td>
+                    <td >
+                        <button class="btn btn-success btn-sm me-1" onclick="marcar(this, 'presente')">
+                            <i class="fa-solid fa-user-check"></i>
+                        </button>
+                        
+                        <button class="btn btn-danger btn-sm me-1" onclick="marcar(this, 'ausente')">
+                            <i class="fa-solid fa-user-xmark"></i>
+                        </button>
+                        
+                        <button class="btn btn-warning btn-sm" onclick="marcar(this, 'tardanza')">
+                            <i class="fa-solid fa-user-clock"></i>
+                        </button>
+                    </td>
+                    <td class="estado estado-pendiente">Sin marcar</td>
+                    <td>
+                        <input type="text" class="form-control form-control-sm" placeholder="Observación" />
+                    </td>
+                    
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/partials/calendary.php b/PRODIGIOS/app/views/partials/calendary.php
new file mode 100644
index 0000000..c222242
--- /dev/null
+++ b/PRODIGIOS/app/views/partials/calendary.php
@@ -0,0 +1,38 @@
+<!-- CALENDARIO -->
+<div id="calendario" class="calendario container mt-4" style="display: none;">
+  <h2 class="section-title mb-4">Calendario de Cursos</h2>
+  <div id="calendar"></div>
+
+  <!-- Modal -->
+  <div class="modal fade" id="modalCurso" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <form id="formCurso">
+          <div class="modal-header">
+            <h5 class="modal-title">Agregar / Editar Curso</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+          </div>
+          <div class="modal-body">
+            <input type="hidden" id="cursoId">
+            <div class="mb-3">
+              <label for="tituloCurso" class="form-label">Nombre del curso</label>
+              <input type="text" class="form-control" id="tituloCurso" required>
+            </div>
+            <div class="mb-3">
+              <label for="fechaCurso" class="form-label">Fecha</label>
+              <input type="date" class="form-control" id="fechaCurso" required>
+            </div>
+            <div class="mb-3">
+              <label for="colorCurso" class="form-label">Color del evento</label>
+              <input type="color" class="form-control form-control-color" id="colorCurso" value="#3498db" title="Color">
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="submit" class="btn btn-primary">Guardar</button>
+            <button type="button" class="btn btn-danger" id="btnEliminar" style="display: none;">Eliminar</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/partials/configuration.php b/PRODIGIOS/app/views/partials/configuration.php
new file mode 100644
index 0000000..b60ab09
--- /dev/null
+++ b/PRODIGIOS/app/views/partials/configuration.php
@@ -0,0 +1,284 @@
+<!-- Configuration Section -->
+<div class="configuracion" style="display:none">
+  <h2 class="section-title">Configuración del Sistema</h2>
+
+  <div class="config-row">
+    <!-- Configuración de Usuario -->
+    <div class="config-card">
+      <div class="card-header bg-info text-white">
+        <i class="fas fa-user-cog"></i> Configuración de Usuario
+      </div>
+      <div class="card-body">
+        <form>
+          <div class="mb-4">
+            <label class="form-label fw-medium">Nombre</label>
+            <input type="text" class="form-control form-control-lg" value="Luis Miguel Roque Huacca">
+          </div>
+          <div class="mb-4">
+            <label class="form-label fw-medium">Nombre de usuario</label>
+            <input type="text" class="form-control form-control-lg" value="Luis Miguel Roque Huacca">
+          </div>
+          <div class="mb-4">
+            <label class="form-label fw-medium">Correo electrónico</label>
+            <input type="email" class="form-control form-control-lg" value="luis@gmail.com">
+          </div>
+          <div class="mb-4">
+            <label class="form-label fw-medium">Foto de perfil</label>
+            <div class="d-flex align-items-center gap-3">
+              <img src="https://via.placeholder.com/80" alt="Foto de perfil" class="img-fluid rounded-circle" style="width: 80px; height: 80px; object-fit: cover;">
+              <div>
+                <button class="btn btn-outline-info btn-sm">Cambiar</button>
+                <button class="btn btn-outline-danger btn-sm">Eliminar</button>
+              </div>
+            </div>
+          </div>
+          <button type="submit" class="btn btn-info btn-lg w-100">
+            <i class="fas fa-save me-2"></i>Guardar Cambios
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <!-- Seguridad -->
+    <div class="config-card">
+      <div class="card-header bg-warning text-dark">
+        <i class="fas fa-lock"></i> Seguridad
+      </div>
+      <div class="card-body">
+        <form>
+          <div class="mb-4">
+            <label class="form-label fw-medium">Contraseña actual</label>
+            <input type="password" class="form-control form-control-lg">
+          </div>
+
+          <div class="mb-4">
+            <label class="form-label fw-medium">Nueva contraseña</label>
+            <input type="password" class="form-control form-control-lg" placeholder="Ingrese nueva contraseña">
+            <div class="progress mt-2" style="height: 8px;">
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="form-text">La contraseña debe tener al menos 8 caracteres</div>
+          </div>
+
+          <div class="mb-4">
+            <label class="form-label fw-medium">Confirmar nueva contraseña</label>
+            <input type="password" class="form-control form-control-lg" placeholder="Confirme su nueva contraseña">
+          </div>
+
+          <h5 class="mt-4 mb-3">Verificación en Dos Pasos</h5>
+          <div class="switch-container">
+            <div class="switch-label">
+              <h6 class="mb-0">Autenticación por SMS</h6>
+              <p class="mb-0 text-muted small">Verificación mediante mensaje de texto</p>
+            </div>
+            <label class="toggle-switch">
+              <input type="checkbox">
+              <span class="slider"></span>
+            </label>
+          </div>
+
+          <div class="switch-container">
+            <div class="switch-label">
+              <h6 class="mb-0">Autenticación por Correo</h6>
+              <p class="mb-0 text-muted small">Verificación mediante correo electrónico</p>
+            </div>
+            <label class="toggle-switch">
+              <input type="checkbox" checked>
+              <span class="slider"></span>
+            </label>
+          </div>
+
+          <button type="submit" class="btn btn-warning btn-lg w-100 mt-3">
+            <i class="fas fa-sync-alt me-2"></i>Actualizar Contraseña
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <!-- Apariencia -->
+    <div class="config-card">
+      <div class="card-header bg-primary text-white">
+        <i class="fas fa-palette"></i> Apariencia
+      </div>
+      <div class="card-body">
+        <h5 class="mb-3">Tema</h5>
+        <div class="row mb-4">
+          <div class="col-4">
+            <div class="theme-selector" data-theme="light">
+              <i class="fas fa-sun"></i>
+              <h6>Claro</h6>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="theme-selector active" data-theme="dark">
+              <i class="fas fa-moon"></i>
+              <h6>Oscuro</h6>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="theme-selector" data-theme="default">
+              <i class="fas fa-adjust"></i>
+              <h6>Default</h6>
+            </div>
+          </div>
+        </div>
+
+        <h5 class="mt-4 mb-3">Personalización</h5>
+        <div class="row">
+          <div class="col-6 mb-3">
+            <label class="form-label fw-medium">Color primario</label>
+            <input type="color" class="form-control form-control-color" value="#2c3e50" title="Elige tu color primario">
+          </div>
+          <div class="col-6 mb-3">
+            <label class="form-label fw-medium">Color secundario</label>
+            <input type="color" class="form-control form-control-color" value="#3498db" title="Elige tu color secundario">
+          </div>
+          <div class="col-6 mb-3">
+            <label class="form-label fw-medium">Color de acento</label>
+            <input type="color" class="form-control form-control-color" value="#ff9900" title="Elige tu color de acento">
+          </div>
+          <div class="col-6 mb-3">
+            <label class="form-label fw-medium">Densidad</label>
+            <select class="form-select form-control-lg">
+              <option value="compacto">Compacto</option>
+              <option value="normal" selected>Normal</option>
+              <option value="espaciado">Espaciado</option>
+            </select>
+          </div>
+        </div>
+
+        <h5 class="mt-4 mb-3">Fuentes</h5>
+        <select class="form-select form-control-lg mb-3">
+          <option selected>Open Sans</option>
+          <option>Roboto</option>
+          <option>Montserrat</option>
+          <option>Poppins</option>
+        </select>
+
+        <div class="form-check form-switch mb-3">
+          <input class="form-check-input" type="checkbox" id="fontSmoothSwitch" checked>
+          <label class="form-check-label" for="fontSmoothSwitch">Suavizado de fuentes</label>
+        </div>
+
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" id="animationSwitch" checked>
+          <label class="form-check-label" for="animationSwitch">Animaciones</label>
+        </div>
+
+        <button class="btn btn-primary btn-lg w-100 mt-4">
+          <i class="fas fa-save me-2"></i>Guardar Personalización
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="config-row">
+    <div class="config-card system-card">
+      <div class="card-header bg-secondary text-white">
+        <i class="fas fa-cog"></i> Sistema
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-6">
+            <h5 class="mb-4">Información del Sistema</h5>
+
+            <div class="system-metric">
+              <div class="metric-label">Versión</div>
+              <div class="metric-value">1.2.0</div>
+            </div>
+
+            <div class="system-metric">
+              <div class="metric-label">Última actualización</div>
+              <div class="metric-value">15 Nov 2023</div>
+            </div>
+
+            <div class="system-metric">
+              <div class="metric-label">Soporte</div>
+              <div class="metric-value">soporte@prodigios.edu</div>
+            </div>
+
+            <div class="system-metric">
+              <div class="metric-label">Estado</div>
+              <div class="metric-value">Operativo</div>
+            </div>
+
+            <div class="system-metric">
+              <div class="metric-label">Licencia</div>
+              <div class="metric-value">Premium</div>
+            </div>
+
+            <div class="system-metric">
+              <div class="metric-label">Próxima actualización</div>
+              <div class="metric-value">15 Dic 2023</div>
+            </div>
+          </div>
+
+          <div class="col-md-6">
+            <h5 class="mb-4">Recursos del Sistema</h5>
+
+            <div class="mb-4">
+              <div class="d-flex justify-content-between mb-2">
+                <div>
+                  <h6 class="mb-0">Almacenamiento</h6>
+                  <p class="mb-0 text-muted small">15.8 GB de 50 GB usados</p>
+                </div>
+                <div class="text-primary">31.6%</div>
+              </div>
+              <div class="progress" style="height: 8px;">
+                <div class="progress-bar" role="progressbar" style="width: 31.6%;" aria-valuenow="31.6" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+
+            <div class="mb-4">
+              <div class="d-flex justify-content-between mb-2">
+                <div>
+                  <h6 class="mb-0">Base de Datos</h6>
+                  <p class="mb-0 text-muted small">2.4 MB de 100 MB usados</p>
+                </div>
+                <div class="text-success">2.4%</div>
+              </div>
+              <div class="progress" style="height: 8px;">
+                <div class="progress-bar bg-success" role="progressbar" style="width: 2.4%;" aria-valuenow="2.4" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+
+            <div class="mb-4">
+              <div class="d-flex justify-content-between mb-2">
+                <div>
+                  <h6 class="mb-0">Uso de CPU</h6>
+                  <p class="mb-0 text-muted small">Promedio de los últimos 30 días</p>
+                </div>
+                <div class="text-info">42%</div>
+              </div>
+              <div class="progress" style="height: 8px;">
+                <div class="progress-bar bg-info" role="progressbar" style="width: 42%;" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+
+            <div class="mb-4">
+              <div class="d-flex justify-content-between mb-2">
+                <div>
+                  <h6 class="mb-0">Memoria</h6>
+                  <p class="mb-0 text-muted small">1.2 GB de 4 GB usados</p>
+                </div>
+                <div class="text-warning">30%</div>
+              </div>
+              <div class="progress" style="height: 8px;">
+                <div class="progress-bar bg-warning" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+
+            <div class="d-grid gap-2">
+              <button class="btn btn-outline-secondary btn-lg">
+                <i class="fas fa-sync-alt me-2"></i>Buscar Actualizaciones
+              </button>
+              <button class="btn btn-secondary btn-lg">
+                <i class="fas fa-cloud-download-alt me-2"></i>Actualizar Sistema
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/partials/dashboard.php b/PRODIGIOS/app/views/partials/dashboard.php
new file mode 100644
index 0000000..456c9aa
--- /dev/null
+++ b/PRODIGIOS/app/views/partials/dashboard.php
@@ -0,0 +1,83 @@
+<!-- Dashboard Section -->
+<div class="dashboard">
+  <h2 class="section-title">Panel de Control</h2>
+  <div class="dashboard-cards">
+    <div class="card">
+      <h3><i class="fa-solid fa-user-graduate me-2"></i> Estudiantes Registrados</h3>
+      <p id="total-estudiantes"><?= count($students)?></p>
+      <small>Total en el sistema</small>
+    </div>
+    <div class="card">
+      <h3><i class="fa-solid fa-chalkboard-user me-2"></i> Docentes Activos</h3>
+      <p id="total-docentes"><?= count($teachers)?></p>
+      <small>Enseñando actualmente</small>
+    </div>
+    <div class="card">
+      <h3><i class="fa-solid fa-book"></i> Cursos Disponibles</h3>
+      <p id="total-cursos"><?= count($cursos)?></p>
+      <small>Ofertados este semestre</small>
+    </div>
+    <div class="card">
+      <h3><i class="fa-solid fa-calendar-check me-2"></i> Clases Esta Semana</h3>
+      <p><?= count($clases)?></p>
+      <small>Programadas</small>
+    </div>
+  </div>
+
+  <div class="dashboard-charts">
+    <div class="chart-container">
+      <h4><i class="fa-solid fa-chart-pie"></i> Distribución por Niveles</h4>
+      <canvas id="nivelEstudiantesChart" height="280"></canvas>
+    </div>
+    <div class="chart-container">
+      <h4><i class="fa-solid fa-chart-bar"></i> Cursos por Categoría</h4>
+      <canvas id="categoriaCursosChart" height="280"></canvas>
+    </div>
+    <div class="chart-container">
+      <h4><i class="fa-solid fa-chart-line"></i> Estudiantes por Curso</h4>
+      <canvas id="estudiantesPorCursoChart" height="280"></canvas>
+    </div>
+  </div>
+
+  <div class="recent-activities">
+    <h3><i class="fa-solid fa-clock-rotate-left"></i> Actividades Recientes</h3>
+    <div class="table-responsive">
+      <table class="table table-hover align-middle ">
+        <thead class="table-light">
+          <tr>
+            <th>Fecha</th>
+            <th>Descripción</th>
+            <th>Usuario</th>
+          </tr>
+        </thead>
+        <tbody id="tabla-actividades">
+          <tr>
+            <td>2023-11-15</td>
+            <td>Nuevo estudiante registrado: María Rodríguez</td>
+            <td>Admin</td>
+          </tr>
+          <tr>
+            <td>2023-11-14</td>
+            <td>Curso de Piano Avanzado creado</td>
+            <td>Admin</td>
+          </tr>
+          <tr>
+            <td>2023-11-13</td>
+            <td>Pago registrado: Carlos Mendoza</td>
+            <td>Admin</td>
+          </tr>
+          <tr>
+            <td>2023-11-12</td>
+            <td>Actualización de horarios</td>
+            <td>Admin</td>
+          </tr>
+          <tr>
+            <td>2023-11-10</td>
+            <td>Nueva docente: Laura Méndez</td>
+            <td>Admin</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/PRODIGIOS/app/views/partials/report.php b/PRODIGIOS/app/views/partials/report.php
new file mode 100644
index 0000000..96d231b
--- /dev/null
+++ b/PRODIGIOS/app/views/partials/report.php
@@ -0,0 +1,32 @@
+<!-- Report Section -->
+<div class="reporte" style="display:none">
+  <h2 class="section-title">Reportes Generales</h2>
+  <div class="row">
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100 border-0 shadow-sm">
+        <div class="card-header bg-primary text-white d-flex align-items-center">
+          <i class="fas fa-chart-bar me-2"></i> Estudiantes por Curso
+        </div>
+        <div class="card-body">
+          <canvas id="reporteEstudiantesCurso" height="300"></canvas>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100 border-0 shadow-sm">
+        <div class="card-header bg-success text-white d-flex align-items-center">
+          <i class="fas fa-chart-pie me-2"></i> Distribución de Niveles
+        </div>
+        <div class="card-body">
+          <canvas id="reporteNiveles" height="300"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-4">
+    <button class="btn btn-primary btn-lg"><i class="fas fa-file-pdf me-2"></i></button>
+    <button class="btn btn-success btn-lg"><i class="fas fa-file-excel me-2"></i></button>
+    <button class="btn btn-secondary btn-lg"><i class="fas fa-print me-2"></i></button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/PRODIGIOS/public/css/app.css b/PRODIGIOS/public/css/app.css
new file mode 100644
index 0000000..45c7a0f
--- /dev/null
+++ b/PRODIGIOS/public/css/app.css
@@ -0,0 +1,867 @@
+:root {
+    --primary: #2c3e50;
+    --secondary: #3498db;
+    --accent: #ff9900;
+    --light: #ecf0f1;
+    --dark: #2c3e50;
+    --success: #2ecc71;
+    --warning: #f39c12;
+    --info: #1abc9c;
+    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --transition: all 0.3s ease;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    background-color: #f5f7fa;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Formulario de registro de estudiantes */
+.form-container {
+    background-color: #ffffff;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 30px;
+}
+
+.form-container h3 {
+    margin-bottom: 20px;
+}
+
+/* Navbar superior */
+.navbar {
+    background: linear-gradient(135deg, var(--primary) 0%, #1a2a3a 100%);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1030;
+    padding: 12px 25px;
+    height: 70px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.navbar-brand {
+    font-weight: 100;
+    font-size: 1.8rem;
+    letter-spacing: 1px;
+    color: white !important;
+    display: flex;
+    align-items: center;
+}
+
+.navbar-brand i {
+    margin-right: 10px;
+    color: var(--accent);
+}
+
+/* Sidebar izquierdo */
+.sidebar {
+    width: 250px;
+    background: linear-gradient(180deg, var(--primary) 0%, #1a2a3a 100%);
+    position: fixed;
+    top: 70px;
+    bottom: 0;
+    left: 0;
+    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
+    transition: var(--transition);
+    z-index: 1020;
+    overflow-y: auto;
+}
+
+.sidebar h2 {
+    margin: 20px 0;
+    font-size: 1.4rem;
+    text-align: center;
+    color: var(--light);
+    padding: 15px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+    font-weight: 600;
+}
+
+.sidebar .menu {
+    padding: 0;
+}
+
+.sidebar .menu li {
+    overflow: hidden;
+}
+
+.sidebar .menu li a,
+.sidebar .menu li summary {
+    color: var(--light);
+    text-decoration: none;
+    font-size: 1rem;
+    padding: 14px 20px;
+    display: block;
+    transition: var(--transition);
+    border-left: 4px solid transparent;
+    font-weight: 500;
+    padding-left: 18px !important;
+}
+
+.sidebar .menu li a:hover,
+.sidebar .menu li summary:hover,
+.sidebar .menu li a.active {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-left-color: var(--accent);
+}
+
+.sidebar .menu li a i,
+.sidebar .menu li summary i {
+    width: 25px;
+    text-align: center;
+    margin-right: 12px;
+    font-size: 1.1rem;
+}
+
+.sidebar .submenu {
+    background-color: rgba(0, 0, 0, 0.15);
+    padding: 0;
+}
+
+.sidebar .submenu li a {
+    font-size: 0.95rem;
+}
+
+.sidebar .submenu li a:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Panel de contenido principal */
+.main-content {
+    margin-left: 250px;
+    margin-top: 70px;
+    padding: 30px;
+    flex: 1;
+    transition: var(--transition);
+}
+
+.suboption-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+/* Secciones de contenido */
+.dashboard,
+.gestion-estudiante,
+.gestion-docente,
+.gestion-curso,
+.reporte,
+.configuracion {
+    display: none;
+}
+
+.dashboard {
+    display: block;
+}
+
+/* Títulos de sección */
+.section-title {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 30px;
+    color: var(--primary);
+    position: relative;
+}
+
+/* Tarjetas */
+.dashboard-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 25px;
+    margin-bottom: 40px;
+}
+
+.card {
+    background: white;
+    border: none;
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: var(--card-shadow);
+    transition: var(--transition);
+    position: relative;
+    overflow: hidden;
+}
+
+.card:hover {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background: var(--accent);
+}
+
+.card h3 {
+    font-size: 1.1rem;
+    margin-bottom: 15px;
+    color: #555;
+    font-weight: 600;
+}
+
+.card p {
+    font-size: 2.3rem;
+    font-weight: 700;
+    color: var(--secondary);
+    margin: 0;
+}
+
+.card small {
+    display: block;
+    color: #777;
+    font-size: 0.95rem;
+    margin-top: 5px;
+}
+
+/* Gráficos */
+.dashboard-charts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 30px;
+    margin-bottom: 40px;
+}
+
+.chart-container {
+    background: white;
+    border: none;
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: var(--card-shadow);
+}
+
+.chart-container h4 {
+    font-size: 1.25rem;
+    margin-bottom: 25px;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 600;
+}
+
+.chart-container h4 i {
+    color: var(--accent);
+    background: rgba(231, 76, 60, 0.1);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Tablas y actividades */
+.recent-activities {
+    background: white;
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: var(--card-shadow);
+}
+
+.recent-activities h3 {
+    font-size: 1.35rem;
+    margin-bottom: 25px;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 600;
+}
+
+.recent-activities h3 i {
+    color: var(--accent);
+    background: rgba(231, 76, 60, 0.1);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Botones personalizados */
+.btn-custom {
+    padding: 10px 25px;
+    background: linear-gradient(135deg, var(--secondary) 0%, #2980b9 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: var(--transition);
+    font-weight: 500;
+}
+
+.btn-custom:hover {
+    background: linear-gradient(135deg, #2980b9 0%, #1a5a8a 100%);
+    background-color: #0056b3;
+    color: #fff;
+}
+
+.dataTables_length {
+    padding: 5px 10px;
+}
+
+/* Responsividad */
+@media (max-width: 1200px) {
+    .dashboard-charts {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    }
+}
+
+/* Nuevos estilos para el navbar */
+.navbar-icons {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-right: 20px;
+}
+
+.notification-icon,
+.chat-icon {
+    position: relative;
+    color: white;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.notification-icon:hover,
+.chat-icon:hover {
+    color: var(--accent);
+}
+
+.notification-badge {
+    position: absolute;
+    top: -5px;
+    right: -8px;
+    background-color: var(--accent);
+    color: white;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Perfil de usuario en sidebar */
+.profile-section {
+    padding: 20px 15px;
+    text-align: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.profile-img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid var(--accent);
+    margin-bottom: 15px;
+}
+
+.profile-name {
+    color: var(--light);
+    font-size: 1.1rem;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
+.profile-role {
+    color: var(--accent);
+    font-size: 0.9rem;
+    margin-bottom: 0;
+}
+
+/* Ajuste para acomodar el perfil */
+.sidebar h2 {
+    margin: 10px 0;
+}
+
+/* Otros ajustes menores */
+.navbar-brand {
+    font-size: 1.6rem;
+    /* Ligeramente más pequeño */
+}
+
+.config-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.config-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid var(--primary);
+}
+
+.config-card {
+    background: white;
+    border-radius: 12px;
+    box-shadow: var(--card-shadow);
+    margin-bottom: 25px;
+    height: 100%;
+    transition: var(--transition);
+    overflow: hidden;
+}
+
+.card-header {
+    padding: 18px 25px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.card-body {
+    padding: 25px;
+}
+
+.config-card:hover {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.form-control-lg {
+    border-radius: 8px;
+    border: 1px solid #ddd;
+}
+
+.form-control-lg:focus {
+    border-color: var(--secondary);
+    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
+}
+
+.btn-lg {
+    padding: 12px 25px;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.btn-info {
+    background: linear-gradient(135deg, var(--info) 0%, #16a085 100%);
+    border: none;
+    color: white;
+}
+
+.btn-info:hover {
+    background: linear-gradient(135deg, #16a085 0%, #138a72 100%);
+}
+
+.btn-warning {
+    background: linear-gradient(135deg, var(--warning) 0%, #e67e22 100%);
+    border: none;
+    color: white;
+}
+
+.btn-warning:hover {
+    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary) 0%, #1a2a3a 100%);
+    border: none;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, #1a2a3a 0%, #0e1a25 100%);
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, var(--secondary) 0%, #2980b9 100%);
+    border: none;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: linear-gradient(135deg, #2980b9 0%, #1a5a8a 100%);
+}
+
+.progress {
+    height: 10px;
+    border-radius: 5px;
+}
+
+.progress-bar {
+    background: var(--secondary);
+}
+
+.config-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.system-card {
+    grid-column: span 3;
+}
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 30px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider {
+    background-color: var(--success);
+}
+
+input:checked+.slider:before {
+    transform: translateX(30px);
+}
+
+.switch-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 0;
+    border-bottom: 1px solid #eee;
+}
+
+.switch-label {
+    flex: 1;
+}
+
+.system-metric {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 12px;
+    background: #f8f9fa;
+    border-radius: 8px;
+}
+
+.metric-label {
+    font-weight: 500;
+}
+
+.metric-value {
+    font-weight: 600;
+    color: var(--primary);
+}
+
+.theme-selector {
+    border: 2px solid transparent;
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.theme-selector:hover,
+.theme-selector.active {
+    border-color: var(--accent);
+    background: rgba(255, 153, 0, 0.05);
+}
+
+.theme-selector i {
+    font-size: 2.5rem;
+    margin-bottom: 15px;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+.status-active {
+    background: rgba(46, 204, 113, 0.15);
+    color: var(--success);
+}
+
+.status-warning {
+    background: rgba(243, 156, 18, 0.15);
+    color: var(--warning);
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: var(--primary);
+}
+
+.card-subtitle {
+    color: #777;
+    margin-bottom: 20px;
+}
+
+/* Estilos para modo oscuro */
+body.theme-dark {
+    background-color: #18191a;
+    color: #e4e6eb;
+}
+
+body.theme-dark .navbar {
+    background: linear-gradient(135deg, #242526 0%, #18191a 100%);
+}
+
+body.theme-dark .sidebar {
+    background: linear-gradient(180deg, #242526 0%, #18191a 100%);
+}
+
+body.theme-dark .card,
+body.theme-dark .chart-container,
+body.theme-dark .recent-activities,
+body.theme-dark .form-container,
+body.theme-dark .config-card {
+    background-color: #242526;
+    color: #e4e6eb;
+    border: 1px solid #3a3b3c;
+}
+
+body.theme-dark .table {
+    color: #e4e6eb;
+}
+
+body.theme-dark .table thead {
+    background-color: #3a3b3c;
+}
+
+body.theme-dark .table-hover tbody tr:hover {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+}
+
+body.theme-dark .section-title {
+    color: #e4e6eb;
+}
+
+body.theme-dark .card h3,
+body.theme-dark .card p,
+body.theme-dark .card small {
+    color: #e4e6eb;
+}
+
+body.theme-dark .card small {
+    color: #b0b3b8;
+}
+
+body.theme-dark .form-control,
+body.theme-dark .form-select {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+    border: 1px solid #3a3b3c;
+}
+
+body.theme-dark .form-control:focus,
+body.theme-dark .form-select:focus {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+    border-color: #4a4b4c;
+    box-shadow: 0 0 0 0.25rem rgba(65, 66, 68, 0.25);
+}
+
+body.theme-dark .dropdown-menu {
+    background-color: #242526;
+    border: 1px solid #3a3b3c;
+}
+
+body.theme-dark .dropdown-item {
+    color: #e4e6eb;
+}
+
+body.theme-dark .dropdown-item:hover {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+}
+
+body.theme-dark .progress {
+    background-color: #3a3b3c;
+}
+
+body.theme-dark .dt-buttons .btn {
+    background-color: #3a3b3c !important;
+    color: #e4e6eb !important;
+    border: 1px solid #4a4b4c !important;
+}
+
+body.theme-dark .config-card .card-header {
+    color: #e4e6eb;
+}
+
+body.theme-dark .switch-label h6,
+body.theme-dark .metric-label,
+body.theme-dark .metric-value {
+    color: #e4e6eb;
+}
+
+body.theme-dark .form-control-color {
+    background-color: #3a3b3c;
+}
+
+body.theme-dark {
+    --light: #e4e6eb;
+    --dark: #b0b3b8;
+}
+
+#theme-toggle i {
+    transition: color 0.3s ease;
+}
+
+@media (max-width: 1200px) {
+    .config-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .system-card {
+        grid-column: span 2;
+    }
+}
+
+@media (max-width: 992px) {
+    .sidebar {
+        width: 70px;
+    }
+
+    .sidebar h2 span,
+    .sidebar .menu li a span,
+    .sidebar .menu li summary span {
+        display: none;
+    }
+
+    .sidebar h2 {
+        font-size: 1.8rem;
+        padding: 15px 0;
+    }
+
+    .sidebar .menu li a,
+    .sidebar .menu li summary {
+        text-align: center;
+        padding: 15px 10px;
+    }
+
+    .sidebar .menu li a i,
+    .sidebar .menu li summary i {
+        margin-right: 0;
+        font-size: 1.4rem;
+        display: block;
+        margin: 0 auto 5px;
+    }
+
+    .sidebar .submenu {
+        position: absolute;
+        left: 70px;
+        width: 200px;
+        display: none;
+    }
+
+    .sidebar .menu li details[open] .submenu {
+        display: block;
+    }
+
+    .main-content {
+        margin-left: 70px;
+    }
+
+    .dashboard-charts {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .main-content {
+        padding: 20px;
+    }
+
+    .dashboard-cards {
+        grid-template-columns: 1fr;
+    }
+
+    .config-row {
+        grid-template-columns: 1fr;
+    }
+
+    .system-card {
+        grid-column: span 1;
+    }
+
+    .config-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+}
+
+@media (max-width: 576px) {
+    .navbar {
+        padding: 10px 15px;
+    }
+
+    .navbar-brand {
+        font-size: 1.5rem;
+    }
+}
+
+#calendar {
+    background: #fff;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: var(--card-shadow);
+}
+.fc-toolbar-title {
+    font-size: 1.5rem;
+    color: var(--primary);
+}
+.fc-daygrid-event {
+    border: none;
+    padding: 3px 6px;
+    border-radius: 6px;
+    font-weight: 500;
+}
\ No newline at end of file
diff --git a/PRODIGIOS/public/css/index.css b/PRODIGIOS/public/css/index.css
new file mode 100644
index 0000000..9f6416b
--- /dev/null
+++ b/PRODIGIOS/public/css/index.css
@@ -0,0 +1,748 @@
+:root {
+    --primary-color: #2c4d90;
+    --secondary-color: #f8f9fa;
+    --accent-color: #ff6b6b;
+    --text-color: #333;
+    --light-text: #f8f9fa;
+    --dark-blue: #1a365d;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    color: var(--text-color);
+    line-height: 1.6;
+    scroll-behavior: smooth;
+}
+
+header {
+    background-color: var(--primary-color);
+    padding: 0.5rem 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+/* Modal de detalles del curso */
+.course-modal .modal-content {
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+.course-modal .modal-header {
+    background: var(--primary-color);
+    color: white;
+    border-bottom: none;
+}
+
+.course-modal .modal-body {
+    padding: 30px;
+}
+
+.navbar-brand {
+    font-weight: 700;
+    font-size: 1.5rem;
+    letter-spacing: 1px;
+}
+
+.navbar-nav .nav-link {
+    color: var(--light-text);
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.navbar-nav .nav-link:hover,
+.navbar-nav .nav-link:focus {
+    color: var(--accent-color);
+}
+
+.navbar-nav .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 1rem;
+    width: 0;
+    height: 2px;
+    background-color: var(--accent-color);
+    transition: width 0.3s ease;
+}
+
+.navbar-nav .nav-link:hover::after,
+.navbar-nav .nav-link:focus::after {
+    width: calc(100% - 2rem);
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    background-color: var(--dark-blue);
+    border-color: var(--dark-blue);
+    transform: translateY(-1px);
+}
+
+.btn-outline-light:hover {
+    color: var(--primary-color);
+}
+
+h1,
+h2,
+h3,
+h4 {
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+h2 {
+    position: relative;
+    margin-bottom: 2rem;
+    padding-bottom: 0.5rem;
+}
+
+h2::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background-color: var(--accent-color);
+}
+
+.section-padding {
+    padding: 5rem 0;
+}
+
+.carousel-item img {
+    width: 100%;
+    height: 70vh;
+    object-fit: cover;
+    object-position: center;
+}
+
+.carousel-caption {
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    bottom: 30%;
+}
+
+.accordion-button {
+    background-color: var(--primary-color);
+    color: var(--light-text);
+    font-weight: 600;
+}
+
+.accordion-button:not(.collapsed) {
+    background-color: var(--dark-blue);
+    color: var(--light-text);
+}
+
+.accordion-button:focus {
+    box-shadow: 0 0 0 0.25rem rgba(44, 77, 144, 0.25);
+}
+
+.card {
+    border: none;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+}
+
+.instructor-img {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    border: 3px solid var(--primary-color);
+}
+
+footer {
+    background-color: var(--primary-color);
+    color: var(--light-text);
+    padding: 2rem 0;
+}
+
+.social-icons a {
+    color: var(--light-text);
+    font-size: 1.5rem;
+    margin: 0 0.5rem;
+    transition: all 0.3s ease;
+}
+
+.social-icons a:hover {
+    color: var(--accent-color);
+    transform: translateY(-3px);
+}
+
+.form-control:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.25rem rgba(44, 77, 144, 0.25);
+}
+
+.map-container {
+    height: 100%;
+    min-height: 300px;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+.back-to-top {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    width: 50px;
+    height: 50px;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    z-index: 99;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+
+.course-filter {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 40px;
+}
+
+.filter-btn {
+    padding: 8px 20px;
+    border: 2px solid var(--primary-color);
+    background: transparent;
+    color: var(--primary-color);
+    border-radius: 50px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.filter-btn:hover,
+.filter-btn.active {
+    background: var(--primary-color);
+    color: white;
+}
+
+/* Estilos para la sección de cursos */
+.courses-section {
+    padding: 80px 0;
+    background-color: #f8f9fa;
+}
+
+.courses-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 30px;
+}
+
+.course-card {
+    background: white;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.course-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+}
+
+.course-img {
+    height: 200px;
+    width: 100%;
+    object-fit: cover;
+}
+
+.course-content {
+    padding: 25px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.course-category {
+    display: inline-block;
+    background: rgba(44, 77, 144, 0.1);
+    color: var(--primary-color);
+    padding: 5px 15px;
+    border-radius: 50px;
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+.course-title {
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+    color: var(--primary-color);
+}
+
+.course-description {
+    margin-bottom: 20px;
+    color: #666;
+    flex-grow: 1;
+}
+
+.course-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: auto;
+}
+
+.course-price {
+    font-weight: 700;
+    color: var(--primary-color);
+    font-size: 1.2rem;
+}
+
+.course-duration {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.back-to-top.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.btn-enroll {
+    display: inline-block;
+    padding: 10px 25px;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 50px;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    text-align: center;
+    margin-top: 20px;
+}
+
+.btn-enroll:hover {
+    background: var(--dark-blue);
+    color: white;
+    transform: translateY(-3px);
+}
+
+.back-to-top:hover {
+    background-color: var(--dark-blue);
+    transform: translateY(-3px);
+}
+
+.course-details-img {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+
+.course-features {
+    margin: 30px 0;
+}
+
+.course-features li {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.course-features i {
+    color: var(--primary-color);
+    margin-right: 10px;
+    font-size: 1.2rem;
+}
+
+/* Pestañas de información del curso */
+.course-tabs {
+    margin-top: 30px;
+}
+
+.course-tabs .nav-link {
+    color: var(--text-color);
+    font-weight: 600;
+    border: none;
+    padding: 12px 20px;
+}
+
+.course-tabs .nav-link.active {
+    color: var(--primary-color);
+    border-bottom: 3px solid var(--primary-color);
+    background: transparent;
+}
+
+.tab-content {
+    padding: 20px 0;
+}
+
+/* Estilos específicos solo para la sección de testimonios */
+.testimonials-section {
+    background: linear-gradient(135deg, #1a365d 0%, #2c4d90 100%);
+    padding: 80px 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.testimonials-section::before {
+    content: "";
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    width: 200px;
+    height: 200px;
+    background: rgba(255, 107, 107, 0.1);
+    border-radius: 50%;
+    z-index: 0;
+}
+
+.testimonials-section::after {
+    content: "";
+    position: absolute;
+    bottom: -80px;
+    right: -80px;
+    width: 300px;
+    height: 300px;
+    background: rgba(255, 107, 107, 0.08);
+    border-radius: 50%;
+    z-index: 0;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 60px;
+    position: relative;
+    z-index: 1;
+}
+
+.testimonials-section .section-subtitle {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.1rem;
+    color: #ff6b6b;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin-bottom: 15px;
+    font-weight: 600;
+}
+
+.testimonials-section .section-title {
+    font-family: 'Poppins', sans-serif;
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 20px;
+    position: relative;
+    display: inline-block;
+}
+
+.testimonials-section .section-title::after {
+    content: "";
+    position: absolute;
+    bottom: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 4px;
+    background: #ff6b6b;
+    border-radius: 2px;
+}
+
+.testimonials-section .section-description {
+    max-width: 700px;
+    margin: 30px auto 0;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1.1rem;
+    font-weight: 300;
+    line-height: 1.7;
+}
+
+.testimonials-section .testimonial-card {
+    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
+    border-radius: 20px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+    padding: 40px;
+    transition: all 0.4s ease;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid rgba(44, 77, 144, 0.1);
+    z-index: 1;
+}
+
+.testimonials-section .testimonial-card:hover {
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
+    border-color: rgba(44, 77, 144, 0.3);
+}
+
+.testimonials-section .quote-icon {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    font-size: 5rem;
+    color: rgba(44, 77, 144, 0.05);
+    z-index: 0;
+}
+
+.testimonials-section .testimonial-content {
+    position: relative;
+    z-index: 2;
+}
+
+.testimonials-section .testimonial-text {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: #444;
+    margin-bottom: 25px;
+    position: relative;
+    padding-left: 25px;
+    font-weight: 400;
+}
+
+.testimonials-section .testimonial-text::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    background: #ff6b6b;
+    border-radius: 10px;
+}
+
+.testimonials-section .testimonial-author {
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+}
+
+.testimonials-section .author-image {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid white;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+    margin-right: 20px;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.testimonials-section .author-image::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #ff6b6b;
+    border-radius: 50%;
+    padding: 2px;
+}
+
+.testimonials-section .author-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.testimonials-section .author-info {
+    flex-grow: 1;
+}
+
+.testimonials-section .author-name {
+    font-weight: 700;
+    font-size: 1.3rem;
+    color: #2c4d90;
+    margin-bottom: 5px;
+}
+
+.testimonials-section .author-details {
+    color: #6c757d;
+    font-size: 0.95rem;
+    margin-bottom: 10px;
+    font-weight: 500;
+}
+
+.testimonials-section .author-details span {
+    color: #ff6b6b;
+    font-weight: 600;
+}
+
+.testimonials-section .rating {
+    display: flex;
+    gap: 3px;
+}
+
+.testimonials-section .rating i {
+    color: #ff6b6b;
+    font-size: 1.1rem;
+}
+
+/* Controles específicos para esta sección */
+.testimonials-section .carousel-control-prev,
+.testimonials-section .carousel-control-next {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: #a5a5a5;
+    opacity: 0.7;
+    top: 50%;
+    transform: translateY(-50%);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    z-index: 10;
+}
+
+.testimonials-section .carousel-control-prev {
+    left: 150px;
+}
+
+.testimonials-section .carousel-control-next {
+    right: 150px;
+}
+
+.testimonials-section .carousel-control-prev:hover,
+.testimonials-section .carousel-control-next:hover {
+    background: #ff6b6b;
+}
+
+.testimonials-section .carousel-control-prev:hover .carousel-control-prev-icon,
+.testimonials-section .carousel-control-next:hover .carousel-control-next-icon {
+    filter: invert(0);
+    /* Íconos negros sobre fondo blanco en hover */
+}
+
+.testimonials-section .carousel-indicators {
+    bottom: -60px;
+}
+
+.testimonials-section .carousel-indicators button {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.5);
+    border: none;
+    margin: 0 6px;
+    transition: all 0.3s ease;
+}
+
+.testimonials-section .carousel-indicators .active {
+    background-color: white;
+    transform: scale(1.3);
+}
+
+@media (max-width: 992px) {
+    .testimonials-section .section-title {
+        font-size: 2.4rem;
+    }
+
+    .testimonials-section .testimonial-card {
+        padding: 30px;
+    }
+
+    .testimonials-section .carousel-control-prev {
+        left: 10px;
+    }
+
+    .testimonials-section .carousel-control-next {
+        right: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    .testimonials-section .section-title {
+        font-size: 2rem;
+    }
+
+    .testimonials-section .section-subtitle {
+        font-size: 1rem;
+    }
+
+    .testimonials-section .testimonial-author {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .testimonials-section .author-image {
+        margin-right: 0;
+        margin-bottom: 15px;
+    }
+
+    .testimonials-section .testimonial-text {
+        padding-left: 15px;
+    }
+
+    .testimonials-section .testimonial-text::before {
+        width: 3px;
+    }
+}
+
+@media (max-width: 576px) {
+    .testimonials-section .section-title {
+        font-size: 1.8rem;
+    }
+
+    .testimonials-section .section-description {
+        font-size: 1rem;
+    }
+
+    .testimonials-section .testimonial-card {
+        padding: 25px 20px;
+    }
+
+    .testimonials-section .quote-icon {
+        top: 15px;
+        right: 15px;
+        font-size: 4rem;
+    }
+
+    .testimonials-section .carousel-control-prev,
+    .testimonials-section .carousel-control-next {
+        width: 40px;
+        height: 40px;
+    }
+}
+
+@media (max-width: 768px) {
+    .carousel-item img {
+        height: 50vh;
+    }
+
+    .accordion-body {
+        flex-direction: column;
+    }
+
+    .accordion-body img {
+        width: 100% !important;
+        margin-bottom: 1rem;
+    }
+
+    .section-padding {
+        padding: 3rem 0;
+    }
+}
\ No newline at end of file
diff --git a/PRODIGIOS/public/img/Requinto.jpg b/PRODIGIOS/public/img/Requinto.jpg
new file mode 100644
index 0000000..f2bd49d
Binary files /dev/null and b/PRODIGIOS/public/img/Requinto.jpg differ
diff --git a/PRODIGIOS/public/img/canto.jpg b/PRODIGIOS/public/img/canto.jpg
new file mode 100644
index 0000000..8d2ef5a
Binary files /dev/null and b/PRODIGIOS/public/img/canto.jpg differ
diff --git a/PRODIGIOS/public/img/guitarra.jpg b/PRODIGIOS/public/img/guitarra.jpg
new file mode 100644
index 0000000..df89b5e
Binary files /dev/null and b/PRODIGIOS/public/img/guitarra.jpg differ
diff --git a/PRODIGIOS/public/img/image1.jpg b/PRODIGIOS/public/img/image1.jpg
new file mode 100644
index 0000000..619fb1c
Binary files /dev/null and b/PRODIGIOS/public/img/image1.jpg differ
diff --git a/PRODIGIOS/public/img/image2.jpg b/PRODIGIOS/public/img/image2.jpg
new file mode 100644
index 0000000..79fbeb3
Binary files /dev/null and b/PRODIGIOS/public/img/image2.jpg differ
diff --git a/PRODIGIOS/public/img/image3.jpg b/PRODIGIOS/public/img/image3.jpg
new file mode 100644
index 0000000..214abfc
Binary files /dev/null and b/PRODIGIOS/public/img/image3.jpg differ
diff --git a/PRODIGIOS/public/img/image4.jpg b/PRODIGIOS/public/img/image4.jpg
new file mode 100644
index 0000000..3b5aefe
Binary files /dev/null and b/PRODIGIOS/public/img/image4.jpg differ
diff --git a/PRODIGIOS/public/img/image5.jpg b/PRODIGIOS/public/img/image5.jpg
new file mode 100644
index 0000000..8afb3c9
Binary files /dev/null and b/PRODIGIOS/public/img/image5.jpg differ
diff --git a/PRODIGIOS/public/img/piano.jpg b/PRODIGIOS/public/img/piano.jpg
new file mode 100644
index 0000000..5374aa9
Binary files /dev/null and b/PRODIGIOS/public/img/piano.jpg differ
diff --git a/PRODIGIOS/public/img/prueba.jpg b/PRODIGIOS/public/img/prueba.jpg
new file mode 100644
index 0000000..1e6cd2e
Binary files /dev/null and b/PRODIGIOS/public/img/prueba.jpg differ
diff --git a/PRODIGIOS/public/img/ukelele.jpg b/PRODIGIOS/public/img/ukelele.jpg
new file mode 100644
index 0000000..22db611
Binary files /dev/null and b/PRODIGIOS/public/img/ukelele.jpg differ
diff --git a/PRODIGIOS/public/img/user.jpg b/PRODIGIOS/public/img/user.jpg
new file mode 100644
index 0000000..e960efc
Binary files /dev/null and b/PRODIGIOS/public/img/user.jpg differ
diff --git a/PRODIGIOS/public/img/violin.jpg b/PRODIGIOS/public/img/violin.jpg
new file mode 100644
index 0000000..10c3b41
Binary files /dev/null and b/PRODIGIOS/public/img/violin.jpg differ
diff --git a/PRODIGIOS/public/index.php b/PRODIGIOS/public/index.php
new file mode 100644
index 0000000..43900da
--- /dev/null
+++ b/PRODIGIOS/public/index.php
@@ -0,0 +1,12 @@
+<?php
+define('ROOT', dirname(__DIR__) . '/app/');
+$page = $_GET['page'] ?? 'inicio';
+$flag = false;
+
+if(!$flag) require_once ROOT . 'routes/publicRoute.php';
+if(!$flag) require_once ROOT . 'routes/appRoute.php';
+
+
+if(!$flag) echo 'No se encontró la página';
+
+?>
\ No newline at end of file
diff --git a/PRODIGIOS/public/js/app.js b/PRODIGIOS/public/js/app.js
new file mode 100644
index 0000000..1768c33
--- /dev/null
+++ b/PRODIGIOS/public/js/app.js
@@ -0,0 +1,941 @@
+
+let nivelEstudiantesChart;
+let categoriaCursosChart;
+let estudiantesPorCursoChart;
+
+let nextIds = { estudiantes: 1, docentes: 1, cursos: 1 };
+
+let editingInfo = { tipo: null, id: null };
+
+// Estado de la aplicación
+const state = {
+    estudiantes: [],
+    docentes: [],
+    cursos: [],
+    actividades: []
+};
+
+// Inicialización
+document.addEventListener('DOMContentLoaded', () => {
+    initCharts();
+
+    initializeDataTable();
+    initializeDataTableDocente();
+    initializeDataTableCurso();
+
+    updateCounters();
+    updateCharts();
+    initEventListeners();
+
+    loadTheme();
+    document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+});
+
+
+const registrarBtn = document.getElementById('registrar');
+const registrarBtnDocente = document.getElementById('registrarDocente');
+const registrarBtnCurso = document.getElementById('registrarCurso');
+
+// Funciones auxiliares
+function updateStateFromTable(type) {
+
+    const tableId = type === 'docentes' ? '#tablaDinamicaDocente' :
+        type === 'cursos' ? '#tablaDinamicaCurso' : '#tablaDinamica';
+
+    if ($.fn.DataTable.isDataTable(tableId)) {
+        const table = $(tableId).DataTable();
+        state[type] = table.rows().data().map(row => ({
+            id: parseInt(row[0]),
+            nombre: row[1],
+            dni: row[2],
+            fecha_nacimiento: row[3],
+            direccion: row[4],
+            contacto: row[5],
+            curso: row[6],
+            nivel: row[7],
+            horario: row[8],
+            estado: row[9]
+        })).toArray();
+    }
+}
+
+// FUNCIÓN updateCharts 
+function updateCharts() {
+    // 1. Distribución por niveles 
+    const niveles = { Principiante: 0, Intermedio: 0, Avanzado: 0 };
+    const estudiantesPorCurso = {};
+
+    // Verificar SI EXISTE la tabla de estudiantes
+    if ($.fn.DataTable.isDataTable('#tablaDinamica')) {
+        const studentTable = $('#tablaDinamica').DataTable();
+        const studentRows = studentTable.rows().data().toArray();
+
+        studentRows.forEach(row => {
+            const nivel = row[7];
+            const curso = row[6];
+
+            // Contar niveles
+            if (nivel) niveles[nivel]++;
+
+            // Contar cursos (dinámico)
+            if (curso) {
+                if (!estudiantesPorCurso[curso]) {
+                    estudiantesPorCurso[curso] = 0;
+                }
+                estudiantesPorCurso[curso]++;
+            }
+        });
+    }
+
+    // 2. Actualizar gráfica de niveles
+    if (nivelEstudiantesChart) {
+        nivelEstudiantesChart.data.datasets[0].data = Object.values(niveles);
+        nivelEstudiantesChart.update();
+    }
+
+    // 3. Actualizar gráfica de estudiantes por curso (CORREGIDO)
+    if (estudiantesPorCursoChart) {
+        // Actualizar etiquetas Y datos
+        estudiantesPorCursoChart.data.labels = Object.keys(estudiantesPorCurso);
+        estudiantesPorCursoChart.data.datasets[0].data = Object.values(estudiantesPorCurso);
+        estudiantesPorCursoChart.update();
+    }
+
+    // 4. Cursos por categoría
+
+    const cursosPorCategoria = {};
+
+    // Verificar SI EXISTE la tabla de cursos
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+        const courseTable = $('#tablaDinamicaCurso').DataTable();
+        const courseRows = courseTable.rows().data().toArray();
+
+        courseRows.forEach(row => {
+            const categoria = row[1];
+            if (categoria) {
+                if (!cursosPorCategoria[categoria]) {
+                    cursosPorCategoria[categoria] = 0;
+                }
+                cursosPorCategoria[categoria]++;
+            }
+        });
+    }
+
+    // 5. Actualizar gráfica de cursos
+    if (categoriaCursosChart) {
+        // Actualizar etiquetas Y datos
+        categoriaCursosChart.data.labels = Object.keys(cursosPorCategoria);
+        categoriaCursosChart.data.datasets[0].data = Object.values(cursosPorCategoria);
+        categoriaCursosChart.update();
+    }
+}
+
+function initializeDataTable() {
+    if ($.fn.DataTable.isDataTable('#tablaDinamica')) $('#tablaDinamica').DataTable().destroy();
+
+    $('#tablaDinamica').DataTable({
+        dom: 'Blfrtip',
+        buttons: [
+            {
+                extend: "excelHtml5",
+                text: "<i class='fa-solid fa-file-excel'></i>",
+                titleAttr: "Exportar a Excel",
+                className: "btn btn-success",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "pdfHtml5",
+                text: "<i class='fa-solid fa-file-pdf'></i>",
+                titleAttr: "Esportar a PDF",
+                className: "btn btn-danger",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "print",
+                text: "<i class='fa-solid fa-print'></i>",
+                titleAttr: "Imprimir",
+                className: "btn btn-info",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                },
+            },
+        ],
+        language: {
+            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+        },
+        lengthMenu: [3, 6, 9, 12],
+        columnDefs: [
+            { orderable: false, targets: [10] },
+            { searchable: false, targets: [10] },
+            { width: "10%", targets: [5] },
+            { targets: -1 },
+            { data: null },
+        ],
+        pageLength: 5,
+    });
+}
+
+registrarBtn.addEventListener('click', function () {
+    const nombre = document.getElementById('nombre').value;
+    const dni = document.getElementById('dni').value;
+    const fecha_nacimiento = document.getElementById('fecha_nacimiento').value;
+    const direccion = document.getElementById('direccion').value;
+    const contacto = document.getElementById('contacto').value;
+    const curso = document.getElementById('curso').value;
+    const nivel = document.getElementById('nivel').value;
+    const horario = document.getElementById('horario').value;
+    const estado = document.getElementById('estado').value;
+
+    if (nombre && dni && fecha_nacimiento && direccion && contacto && curso && nivel && horario && estado) {
+        const table = $('#tablaDinamica').DataTable();
+        if (editingInfo.tipo === 'estudiante' && editingInfo.id !== null) {
+            // Actualizar estudiante existente
+            table.rows().every(function () {
+                const data = this.data();
+                if (parseInt(data[0]) === editingInfo.id) {
+                    this.data([editingInfo.id, nombre, dni, fecha_nacimiento, direccion, contacto, curso, nivel, horario, estado,
+                        '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+                    ]);
+                }
+            });
+        } else {
+            table.row.add([nextIds.estudiantes++, nombre, dni, fecha_nacimiento, direccion, contacto, curso, nivel, horario, estado,
+                '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']).draw();
+        }
+
+        document.getElementById('nombre').value = '';
+        document.getElementById('dni').value = '';
+        document.getElementById('fecha_nacimiento').value = '';
+        document.getElementById('direccion').value = '';
+        document.getElementById('contacto').value = '';
+        document.getElementById('curso').value = '';
+        document.getElementById('nivel').value = '';
+        document.getElementById('horario').value = '';
+        document.getElementById('estado').value = '';
+
+        // Resetear estado
+        editingInfo = { tipo: null, id: null };
+        $('#registrar').text('Registrar Estudiante');
+
+    } else {
+        alert("Por favor, complete todos los campos antes de registrar.");
+    }
+
+    updateAll();
+});
+
+$('#tablaDinamica').on('click', '.btn-edit', function () {
+    const row = $(this).closest('tr');
+    const data = $('#tablaDinamica').DataTable().row(row).data();
+    editingInfo = { tipo: 'estudiante', id: parseInt(data[0]) };
+    document.getElementById('nombre').value = data[1];
+    document.getElementById('dni').value = data[2];
+    document.getElementById('fecha_nacimiento').value = data[3];
+    document.getElementById('direccion').value = data[4];
+    document.getElementById('contacto').value = data[5];
+    document.getElementById('curso').value = data[6];
+    document.getElementById('nivel').value = data[7];
+    document.getElementById('horario').value = data[8];
+    document.getElementById('estado').value = data[9];
+    $('#registrar').text('Actualizar');
+    updateAll();
+});
+$('#tablaDinamica').on('click', '.btn-delete', function () {
+    const row = $(this).closest('tr');
+    $('#tablaDinamica').DataTable().row(row).remove().draw();
+    updateAll();
+});
+
+function initializeDataTableDocente() {
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaDocente')) {
+        $('#tablaDinamicaDocente').DataTable().destroy();
+    }
+
+    $('#tablaDinamicaDocente').DataTable({
+        dom: 'Blfrtip',
+        buttons: [
+            {
+                extend: "excelHtml5",
+                text: "<i class='fas fa-file-excel'></i>",
+                titleAttr: "Exportar a Excel",
+                className: "btn btn-success",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "pdfHtml5",
+                text: "<i class='fa-solid fa-file-pdf'></i>",
+                titleAttr: "Exportar a PDF",
+                className: "btn btn-danger",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "print",
+                text: "<i class='fa-solid fa-print'></i>",
+                titleAttr: "Imprimir",
+                className: "btn btn-info",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            }
+        ],
+        language: {
+            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+        },
+        lengthMenu: [3, 6, 9, 12],
+        columnDefs: [
+            { orderable: false, targets: [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }, // Deshabilitar ordenación en la última columna (Acciones)
+            { searchable: false, targets: -1 }, // Deshabilitar búsqueda en la última columna
+            { width: "10%", target: [6] }
+        ],
+        pageLength: 5,
+    });
+}
+
+registrarBtnDocente.addEventListener('click', function () {
+    const nombre = document.getElementById('nombreDocente').value;
+    const dni = document.getElementById('dniDocente').value;
+    const fechaNac = document.getElementById('fechaNacDocente').value;
+    const especialidad = document.getElementById('especialidadDocente').value;
+    const grado = document.getElementById('gradoDocente').value;
+    const experiencia = document.getElementById('experienciaDocente').value;
+    const horario = document.getElementById('horarioDocente').value;
+    const contacto = document.getElementById('contactoDocente').value;
+    const salario = document.getElementById('salarioDocente').value;
+
+    if (nombre && dni && fechaNac && especialidad && grado && experiencia && horario && contacto && salario) {
+        const table = $('#tablaDinamicaDocente').DataTable();
+        if (editingInfo.tipo === 'docente' && editingInfo.id !== null) {
+            // Actualizar la fila por ID
+            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
+                const data = this.data();
+                if (parseInt(data[0]) === editingInfo.id) {
+                    this.data([
+                        editingInfo.id, nombre, dni, fechaNac, especialidad, grado, experiencia, horario, contacto, salario,
+                        '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil"></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+                    ]);
+                }
+            });
+        } else {
+            table.row.add([
+                nextIds.docentes++, nombre, dni, fechaNac, especialidad, grado, experiencia, horario, contacto, salario,
+                '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil"></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>'
+            ]).draw();
+        }
+
+        document.getElementById('nombreDocente').value = '';
+        document.getElementById('dniDocente').value = '';
+        document.getElementById('fechaNacDocente').value = '';
+        document.getElementById('especialidadDocente').value = '';
+        document.getElementById('gradoDocente').value = '';
+        document.getElementById('experienciaDocente').value = '';
+        document.getElementById('horarioDocente').value = '';
+        document.getElementById('contactoDocente').value = '';
+        document.getElementById('salarioDocente').value = '';
+        editingInfo = { tipo: null, id: null };
+        $('#registrarDocente').text('Registrar Docente');
+
+    } else {
+        alert("Por favor, complete todos los campos antes de registrar.");
+    }
+    updateAll();
+});
+
+$('#tablaDinamicaDocente').on('click', '.btn-edit', function () {
+    const row = $(this).closest('tr');
+    const data = $('#tablaDinamicaDocente').DataTable().row(row).data();
+    editingInfo = { tipo: 'docente', id: parseInt(data[0]) };
+    document.getElementById('nombreDocente').value = data[1];
+    document.getElementById('dniDocente').value = data[2];
+    document.getElementById('fechaNacDocente').value = data[3];
+    document.getElementById('especialidadDocente').value = data[4];
+    document.getElementById('gradoDocente').value = data[5];
+    document.getElementById('experienciaDocente').value = data[6];
+    document.getElementById('horarioDocente').value = data[7];
+    document.getElementById('contactoDocente').value = data[8];
+    document.getElementById('salarioDocente').value = data[9];
+    $('#registrarDocente').text('Actualizar');
+    updateAll();
+});
+$('#tablaDinamicaDocente').on('click', '.btn-delete', function () {
+    const row = $(this).closest('tr');
+    $('#tablaDinamicaDocente').DataTable().row(row).remove().draw();
+    updateAll();
+});
+
+function initializeDataTableCurso() {
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+        $('#tablaDinamicaCurso').DataTable().destroy();
+    }
+
+    $('#tablaDinamicaCurso').DataTable({
+        dom: 'Blfrtip',
+        buttons: [
+            {
+                extend: "excelHtml5",
+                text: "<i class='fa-solid fa-file-excel'></i>",
+                titleAttr: "Exportar a Excel",
+                className: "btn btn-success",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "pdfHtml5",
+                text: "<i class='fa-solid fa-file-pdf'></i>",
+                titleAttr: "Esportar a PDF",
+                className: "btn btn-danger",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            },
+            {
+                extend: "print",
+                text: "<i class='fa-solid fa-print'></i>",
+                titleAttr: "Imprimir",
+                className: "btn btn-info",
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+                }
+            }
+        ],
+        language: {
+            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
+        },
+        lengthMenu: [3, 6, 9, 12],
+        columnDefs: [
+            { orderable: false, targets: [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] },
+            { searchable: false, targets: -1 },
+            { width: "1%", targets: [5] },
+            { targets: -1 },
+            { data: null }
+        ],
+        pageLength: 5
+    });
+};
+
+registrarBtnCurso.addEventListener('click', function () {
+    const nombreCurso = document.getElementById('nombreCurso').value;
+    const descripcionCurso = document.getElementById('descripcionCurso').value;
+    const duracionCurso = document.getElementById('duracionCurso').value;
+    const nivelCurso = document.getElementById('nivelCurso').value;
+    const horarioCurso = document.getElementById('horarioCurso').value;
+    const docenteCurso = document.getElementById('docenteCurso').value;
+    const numPlazaCurso = document.getElementById('numPlazaCurso').value;
+    const costoCurso = document.getElementById('costoCurso').value;
+    const materialCurso = document.getElementById('materialCurso').value;
+    if (nombreCurso && descripcionCurso && duracionCurso && nivelCurso && horarioCurso && docenteCurso && numPlazaCurso && costoCurso && materialCurso) {
+        const table = $('#tablaDinamicaCurso').DataTable();
+        if (editingInfo.tipo === 'curso' && editingInfo.id !== null) {
+            // Actualizar la fila por ID
+            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
+                const data = this.data();
+                if (parseInt(data[0]) === editingInfo.id) {
+                    this.data([editingInfo.id, nombreCurso, descripcionCurso, duracionCurso, nivelCurso, horarioCurso, docenteCurso, numPlazaCurso, costoCurso, materialCurso,
+                        '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']);
+                }
+            });
+        } else {
+            table.row.add([nextIds.cursos++, nombreCurso, descripcionCurso, duracionCurso, nivelCurso, horarioCurso, docenteCurso, numPlazaCurso, costoCurso, materialCurso,
+                '<button class="btn btn-warning btn-edit"><i class="fa-solid fa-pencil "></i></button> <button class="btn btn-danger btn-delete"><i class="fa-solid fa-trash-can"></i></button>']).draw();
+        }
+        document.getElementById('nombreCurso').value = '';
+        document.getElementById('descripcionCurso').value = '';
+        document.getElementById('duracionCurso').value = '';
+        document.getElementById('nivelCurso').value = '';
+        document.getElementById('horarioCurso').value = '';
+        document.getElementById('docenteCurso').value = '';
+        document.getElementById('numPlazaCurso').value = '';
+        document.getElementById('costoCurso').value = '';
+        document.getElementById('materialCurso').value = '';
+        editingInfo = { tipo: null, id: null };
+        $('#registrarCurso').text('Registrar Curso');
+    } else {
+        alert('Por favor, complete todos los campos antes de registrar.');
+    }
+    updateAll();
+});
+
+$('#tablaDinamicaCurso').on('click', '.btn-edit', function () {
+    const row = $(this).closest('tr');
+    const data = $('#tablaDinamicaCurso').DataTable().row(row).data();
+    editingInfo = { tipo: 'curso', id: parseInt(data[0]) };
+    document.getElementById('nombreCurso').value = data[1];
+    document.getElementById('descripcionCurso').value = data[2];
+    document.getElementById('duracionCurso').value = data[3];
+    document.getElementById('nivelCurso').value = data[4];
+    document.getElementById('horarioCurso').value = data[5];
+    document.getElementById('docenteCurso').value = data[6];
+    document.getElementById('numPlazaCurso').value = data[7];
+    document.getElementById('costoCurso').value = data[8];
+    document.getElementById('materialCurso').value = data[9];
+    $('#registrarCurso').text('Actualizar');
+    updateAll();
+});
+$('#tablaDinamicaCurso').on('click', '.btn-delete', function () {
+    const row = $(this).closest('tr');
+    $('#tablaDinamicaCurso').DataTable().row(row).remove().draw();
+    updateAll();
+});
+
+function initEventListeners() {
+    // Event listener para logout
+    document.getElementById('logoutBtn').addEventListener('click', function () {
+        localStorage.removeItem('loggedIn');
+        window.location.href = 'index.html';
+    });
+
+    // Event listeners para menú
+    document.querySelectorAll('.sidebar a').forEach(link => {
+        link.addEventListener('click', function () {
+            document.querySelectorAll('.sidebar a').forEach(el => el.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+}
+/*
+function updateCounters() {
+    let totalEst = 0;
+    if ($.fn.DataTable.isDataTable('#tablaDinamica')) {
+        totalEst = $('#tablaDinamica').DataTable().rows().count();
+    }
+    document.getElementById('total-estudiantes').textContent = totalEst;
+
+    let totalDoc = 0;
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaDocente')) {
+        totalDoc = $('#tablaDinamicaDocente').DataTable().rows().count();
+    }
+    document.getElementById('total-docentes').textContent = totalDoc;
+
+    let totalCur = 0;
+    if ($.fn.DataTable.isDataTable('#tablaDinamicaCurso')) {
+        totalCur = $('#tablaDinamicaCurso').DataTable().rows().count();
+    }
+    document.getElementById('total-cursos').textContent = totalCur;
+}
+*/
+
+function toggleVisibility(mainOption, subOption, title) {
+    if (typeof calendar !== 'undefined' && calendar) {
+        calendar.destroy();
+        calendar = null;
+    }
+
+    document.querySelectorAll('.dashboard, .asistencia, .calendario').forEach(div => {
+        div.style.display = 'none';
+    });
+
+    document.querySelectorAll('.suboption-panel > div').forEach(div => {
+        div.style.display = 'none';
+    });
+
+    if (mainOption) {
+        const section = document.querySelector(`.${mainOption.toLowerCase()}`);
+        if (section) section.style.display = 'block';
+
+        if (mainOption.toLowerCase() === 'calendario') {
+            setTimeout(() => {
+                const calendarContainer = document.getElementById('calendar');
+                if (calendarContainer && calendarContainer.offsetParent !== null) {
+                    mostrarCalendario();
+                }
+            }, 100);
+        }
+    }
+
+    if (subOption) {
+        const section = document.querySelector(`.gestion-${subOption}`);
+        if (section) section.style.display = 'block';
+    }
+
+    // Actualizar el título
+    if (title) document.querySelector('.navbar-brand').innerHTML = `${title}`;
+
+    // Inicializar DataTables
+    if (subOption === 'estudiante') {
+        initializeDataTable();
+    } else if (subOption === 'docente') {
+        initializeDataTableDocente();
+    } else if (subOption === 'curso') {
+        initializeDataTableCurso();
+    }
+
+    // Reset de edición
+    editingInfo = { tipo: null, id: null };
+
+    // Restaurar texto de botones
+    document.querySelectorAll('#registrar, #registrarDocente, #registrarCurso')
+        .forEach(btn => {
+            if (btn.id === 'registrar') btn.textContent = 'Registrar Estudiante';
+            if (btn.id === 'registrarDocente') btn.textContent = 'Registrar Docente';
+            if (btn.id === 'registrarCurso') btn.textContent = 'Registrar Curso';
+        });
+
+    if (mainOption === 'dashboard') updateAll();
+}
+
+
+function initCharts() {
+    // Gráfico de distribución por niveles
+    const ctxNivel = document.getElementById('nivelEstudiantesChart');
+    nivelEstudiantesChart = new Chart(ctxNivel, {
+        type: 'doughnut',
+        data: {
+            labels: ['Principiante', 'Intermedio', 'Avanzado'],
+            datasets: [{
+                label: "Estudiantes por Nivel",
+                data: [0, 0, 0], // Datos iniciales vacíos
+                backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
+                borderWidth: 0
+            }]
+        },
+        options: {
+            maintainAspectRatio: true,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                    labels: { font: { size: 14 } }
+                },
+                tooltip: {
+                    bodyFont: { size: 14 },
+                    titleFont: { size: 16 }
+                }
+            }
+        }
+    });
+
+    // Gráfico de categorías de cursos
+    const ctxCategoria = document.getElementById('categoriaCursosChart');
+    categoriaCursosChart = new Chart(ctxCategoria, {
+        type: 'bar',
+        data: {
+            labels: [''],
+            datasets: [{
+                label: 'Cursos por categoría',
+                data: [0, 0, 0, 0, 0], // Datos iniciales vacíos
+                backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74c3c'],
+                borderWidth: 0
+            }]
+        },
+        options: {
+            maintainAspectRatio: true,
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: { font: { size: 12 } }
+                },
+                x: {
+                    ticks: { font: { size: 12 } }
+                }
+            },
+            plugins: { legend: { display: false } }
+        }
+    });
+
+    //Gráfico de Estudiantes por Curso
+    estudiantesPorCursoChart = new Chart(
+        document.getElementById('estudiantesPorCursoChart'),
+        {
+            type: 'bar',
+            data: {
+                labels: [''],
+                datasets: [{
+                    label: 'Estudiantes por Curso',
+                    data: [0, 0, 0, 0, 0],
+                    backgroundColor: [
+                        '#4e73df',
+                        '#1cc88a',
+                        '#36b9cc',
+                        '#f6c23e',
+                        '#e74c3c'
+                    ],
+                    borderRadius: 5,
+                    barThickness: 20
+                }]
+            },
+            options: {
+                maintainAspectRatio: true,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            font: { size: 12 }
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            font: { size: 12 }
+                        }
+                    }
+                },
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        bodyFont: { size: 14 },
+                        titleFont: { size: 16 }
+                    }
+                }
+            }
+        }
+    );
+
+
+    // Gráfico para reportes
+    new Chart(
+        document.getElementById('reporteEstudiantesCurso'),
+        {
+            type: 'pie',
+            data: {
+                labels: ['Guitarra', 'Piano', 'Canto', 'Violín', 'Teoría'],
+                datasets: [{
+                    label: 'Estudiantes por Curso',
+                    data: [15, 12, 8, 5, 3],
+                    backgroundColor: [
+                        '#4e73df',
+                        '#1cc88a',
+                        '#36b9cc',
+                        '#f6c23e',
+                        '#e74c3c'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            font: {
+                                size: 14
+                            }
+                        }
+                    },
+                    tooltip: {
+                        bodyFont: {
+                            size: 14
+                        },
+                        titleFont: {
+                            size: 16
+                        }
+                    }
+                }
+            }
+        }
+    );
+
+    new Chart(
+        document.getElementById('reporteNiveles'),
+        {
+            type: 'polarArea',
+            data: {
+                labels: ['Principiante', 'Intermedio', 'Avanzado'],
+                datasets: [{
+                    label: 'Distribución de Niveles',
+                    data: [25, 15, 10],
+                    backgroundColor: [
+                        'rgba(78, 115, 223, 0.7)',
+                        'rgba(28, 200, 138, 0.7)',
+                        'rgba(54, 185, 204, 0.7)'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            font: {
+                                size: 14
+                            }
+                        }
+                    },
+                    tooltip: {
+                        bodyFont: {
+                            size: 14
+                        },
+                        titleFont: {
+                            size: 16
+                        }
+                    }
+                }
+            }
+        }
+    );
+    updateCharts();
+}
+
+function updateAll() {
+    updateStateFromTable('estudiantes');
+    updateStateFromTable('docentes');
+    updateStateFromTable('cursos');
+    updateCounters();
+    updateCharts();
+}
+
+document.querySelectorAll('.theme-selector').forEach(selector => {
+    selector.addEventListener('click', function () {
+        const theme = this.dataset.theme;
+        applyTheme(theme);
+
+        document.querySelectorAll('.theme-selector').forEach(el => {
+            el.classList.remove('active');
+        });
+        this.classList.add('active');
+    });
+});
+
+// Sistema de temas
+const themeToggle = document.getElementById('theme-toggle');
+const themeToggleIcon = document.getElementById('theme-icon');
+console.log(themeToggleIcon)
+
+// Función para aplicar el tema
+function applyTheme(theme) {
+    document.body.classList.remove('theme-light', 'theme-dark');
+    document.querySelectorAll('.theme-selector').forEach(el => {
+        el.classList.remove('theme-light', 'theme-dark', 'theme-auto');
+    });
+
+    if (theme !== 'default') {
+        document.body.classList.add(`theme-${theme}`);
+    }
+
+    localStorage.setItem('theme', theme);
+
+    const themeIcon = document.getElementById('theme-icon');
+    themeIcon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+}
+
+// Cargar tema guardado o detectar preferencia del sistema
+function loadTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'default';
+    applyTheme(savedTheme);
+}
+
+// Alternar entre temas
+function toggleTheme() {
+    const currentTheme = localStorage.getItem('theme') || 'default';
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    applyTheme(newTheme)
+}
+// FUNCIONES PARA ASISTENCIA
+// Funcion marcar
+function marcar(boton, estado) {
+    const fila = boton.closest("tr");
+    const estadoCelda = fila.querySelector(".estado");
+
+    if (estado === 'presente') {
+    estadoCelda.textContent = "Presente";
+    estadoCelda.className = "estado estado-presente";
+    } else if (estado === 'ausente') {
+    estadoCelda.textContent = "Ausente";
+    estadoCelda.className = "estado estado-ausente";
+    } else if (estado === 'tardanza') {
+        estadoCelda.textContent = "Tardanza";
+        estadoCelda.className = "estado estado-tardanza";
+    } else if (estado === 'justificado') {
+        estadoCelda.textContent = "Justificado";
+        estadoCelda.className = "estado estado-justificado";
+    }
+}
+//Funcion para resetear todo
+function resetearTodo() {
+    document.querySelectorAll("#tablaAsistencia .estado").forEach(celda => {
+    celda.textContent = "Sin marcar";
+    celda.className = "estado estado-pendiente";
+    });
+}
+
+//calendario
+let calendar;
+let eventos = JSON.parse(localStorage.getItem('eventosCursos')) || [];
+
+function mostrarCalendario() {
+    const calendarEl = document.getElementById('calendar');
+    const contenedorCalendario = document.getElementById('calendario');
+
+    // Asegurar que el contenedor esté visible antes de renderizar
+    if (contenedorCalendario.style.display === 'none') return;
+
+    if (calendar) {
+        calendar.destroy();
+    }
+
+    calendar = new FullCalendar.Calendar(calendarEl, {
+        initialView: 'dayGridMonth',
+        locale: 'es',
+        height: 'auto',
+        selectable: true,
+        headerToolbar: {
+            left: 'prev,next today',
+            center: 'title',
+            right: ''
+        },
+        events: eventos,
+        dateClick: function (info) {
+            document.getElementById('cursoId').value = '';
+            document.getElementById('fechaCurso').value = info.dateStr;
+            document.getElementById('tituloCurso').value = '';
+            document.getElementById('colorCurso').value = '#3498db';
+            document.getElementById('btnEliminar').style.display = 'none';
+            const modal = new bootstrap.Modal(document.getElementById('modalCurso'));
+            modal.show();
+        },
+        eventClick: function (info) {
+            const evento = info.event;
+            document.getElementById('cursoId').value = evento.id;
+            document.getElementById('tituloCurso').value = evento.title;
+            document.getElementById('fechaCurso').value = evento.startStr;
+            document.getElementById('colorCurso').value = evento.backgroundColor;
+            document.getElementById('btnEliminar').style.display = 'inline-block';
+            const modal = new bootstrap.Modal(document.getElementById('modalCurso'));
+            modal.show();
+        }
+    });
+
+    calendar.render();
+}
+
+// Listeners de formulario
+document.addEventListener('DOMContentLoaded', function () {
+    document.getElementById('formCurso').addEventListener('submit', function (e) {
+        e.preventDefault();
+        const id = document.getElementById('cursoId').value;
+        const title = document.getElementById('tituloCurso').value;
+        const date = document.getElementById('fechaCurso').value;
+        const color = document.getElementById('colorCurso').value;
+
+        if (id) {
+            eventos = eventos.map(ev => ev.id === id ? { id, title, start: date, backgroundColor: color } : ev);
+        } else {
+            const newId = Date.now().toString();
+            eventos.push({ id: newId, title, start: date, backgroundColor: color });
+        }
+
+        localStorage.setItem('eventosCursos', JSON.stringify(eventos));
+        const modal = bootstrap.Modal.getInstance(document.getElementById('modalCurso'));
+        modal.hide();
+        calendar.destroy();
+        mostrarCalendario();
+    });
+
+    document.getElementById('btnEliminar').addEventListener('click', function () {
+        const id = document.getElementById('cursoId').value;
+        eventos = eventos.filter(ev => ev.id !== id);
+        localStorage.setItem('eventosCursos', JSON.stringify(eventos));
+        const modal = bootstrap.Modal.getInstance(document.getElementById('modalCurso'));
+        modal.hide();
+        calendar.destroy();
+        mostrarCalendario();
+    });
+});
diff --git a/PRODIGIOS/public/js/index.js b/PRODIGIOS/public/js/index.js
new file mode 100644
index 0000000..d389c03
--- /dev/null
+++ b/PRODIGIOS/public/js/index.js
@@ -0,0 +1,77 @@
+    // Mostrar/ocultar botón para volver arriba
+    window.addEventListener('scroll', function() {
+      const backToTopButton = document.querySelector('.back-to-top');
+      if (window.pageYOffset > 300) {
+        backToTopButton.classList.add('active');
+      } else {
+        backToTopButton.classList.remove('active');
+      }
+    });
+
+    // Validación de formularios
+    (function() {
+      'use strict';
+      
+      var forms = document.querySelectorAll('.needs-validation');
+      
+      Array.prototype.slice.call(forms)
+      .forEach(function(form) {
+        form.addEventListener('submit', function(event) {
+        if (!form.checkValidity()) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        
+        form.classList.add('was-validated');
+        }, false);
+      });
+    })();
+
+    // Inicializar tooltips
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
+    // Filtrado de cursos
+    document.addEventListener('DOMContentLoaded', function() {
+      const filterButtons = document.querySelectorAll('.filter-btn');
+      const courseCards = document.querySelectorAll('.course-card');
+
+      filterButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          // Quitar clase active de todos los botones
+          filterButtons.forEach(btn => btn.classList.remove('active'));
+          // Añadir clase active al botón clickeado
+          button.classList.add('active');
+            
+          const filterValue = button.getAttribute('data-filter');
+            
+          courseCards.forEach(card => {
+          if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
+            card.style.display = 'block';
+          } else {
+           card.style.display = 'none';
+          }
+          });
+        });
+      });
+    });
+
+    // Inicializar el carrusel
+    const myCarousel = document.getElementById('premiumTestimonials');
+    const carousel = new bootstrap.Carousel(myCarousel, {
+      interval: 5000,
+      wrap: true
+    });
+    
+    // Efecto hover para las tarjetas
+    document.querySelectorAll('.testimonials-section .testimonial-card').forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        card.style.transform = 'translateY(-10px)';
+      });
+      
+      card.addEventListener('mouseleave', () => {
+        card.style.transform = 'translateY(0)';
+      });
+    });