fix grafica

assets/css/style.css

@@ -134,6 +134,14 @@ a:hover {
     font-weight: 700;
     color: var(--primary-color);
     margin: 0;
+    display: flex;
+    align-items: center;
+}
+
+.logo-image {
+    max-height: 60px;
+    width: auto;
+    object-fit: contain;
 }
 
 .nav {
@@ -630,11 +638,55 @@ select.form-control {
 .align-center { align-items: center; }
 .gap-1 { gap: var(--spacing-md); }
 
+/* ============================================
+   SEZIONE ISTRUTTRICE
+   ============================================ */
+
+.instructor-section {
+    padding: var(--spacing-2xl) 0;
+    background: var(--gray-100);
+}
+
+.instructor-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-2xl);
+    align-items: center;
+}
+
+.instructor-image img {
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.instructor-text h2 {
+    margin-bottom: var(--spacing-lg);
+}
+
+.instructor-text p {
+    margin-bottom: var(--spacing-md);
+    color: var(--gray-700);
+    font-size: 1.1rem;
+}
+
+.instructor-text .btn {
+    margin-top: var(--spacing-md);
+}
+
 /* ============================================
    RESPONSIVE
    ============================================ */
 
 @media (max-width: 768px) {
+    /* Container più stretto su mobile */
+    .container {
+        padding: 0 var(--spacing-md);
+    }
+    
+    /* Hero section */
     .hero-title {
         font-size: 2rem;
     }
@@ -643,41 +695,155 @@ select.form-control {
         font-size: 1rem;
     }
     
+    /* Header */
+    .header {
+        padding: var(--spacing-md) 0;
+    }
+    
     .header-content {
         flex-direction: column;
         gap: var(--spacing-md);
     }
     
+    .logo {
+        font-size: 1.5rem;
+    }
+    
+    .logo-image {
+        max-height: 50px;
+    }
+    
     .nav {
         flex-wrap: wrap;
         justify-content: center;
+        width: 100%;
     }
     
+    /* Dashboard */
     .dashboard {
         grid-template-columns: 1fr;
     }
     
     .sidebar {
         order: 2;
+        margin-top: var(--spacing-lg);
     }
     
+    /* Griglie */
     .lessons-grid,
     .features-grid {
         grid-template-columns: 1fr;
+        gap: var(--spacing-lg);
     }
     
     .stats-grid {
         grid-template-columns: 1fr;
     }
+    
+    /* Sezione istruttrice */
+    .instructor-content {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-lg);
+    }
+    
+    .instructor-image img {
+        max-width: 300px;
+    }
+    
+    /* Tabelle responsive */
+    .table-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    
+    table {
+        min-width: 600px;
+        font-size: 0.875rem;
+    }
+    
+    /* Form */
+    .form-group {
+        margin-bottom: var(--spacing-md);
+    }
+    
+    .form-control {
+        font-size: 16px; /* Previene zoom su iOS */
+    }
+    
+    /* Card */
+    .card {
+        padding: var(--spacing-lg);
+    }
+    
+    /* Bottoni in flex */
+    .d-flex {
+        flex-direction: column;
+    }
+    
+    .d-flex .btn {
+        width: 100%;
+    }
 }
 
 @media (max-width: 480px) {
+    /* Typography più piccola */
+    .hero-title {
+        font-size: 1.5rem;
+    }
+    
+    .section-title {
+        font-size: 1.75rem;
+    }
+    
+    /* Bottoni full width */
     .btn {
         width: 100%;
         display: block;
+        padding: 0.75rem 1rem;
     }
     
     .btn + .btn {
         margin-top: var(--spacing-sm);
     }
+    
+    .btn-small {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+    }
+    
+    /* Nav stack verticale */
+    .nav {
+        flex-direction: column;
+        width: 100%;
+    }
+    
+    .nav .btn {
+        width: 100%;
+    }
+    
+    /* Stats cards */
+    .stat-card {
+        padding: var(--spacing-md);
+    }
+    
+    .stat-value {
+        font-size: 1.75rem;
+    }
+    
+    /* Sidebar menu */
+    .sidebar-menu {
+        padding: var(--spacing-md);
+    }
+    
+    /* Alert responsive */
+    .alert {
+        padding: var(--spacing-md);
+        font-size: 0.875rem;
+    }
+    
+    /* Footer */
+    .footer {
+        padding: var(--spacing-lg) 0;
+        font-size: 0.875rem;
+    }
 }