Feature/tutorial

frontend/src/app/app.component.css

@@ -95,3 +95,45 @@ html, body {
   flex: 1;
   min-height: 0; /* Importante para que funcione el scroll interno */
 }
+
+/* ---- FAB Tutorial ---- */
+.tutorial-fab {
+  position: fixed;
+  bottom: 28px;
+  right: 28px;
+  z-index: 900;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  background: rgba(6, 182, 212, 0.12);
+  border: 1px solid rgba(6, 182, 212, 0.35);
+  border-radius: 50%;
+  color: #67e8f9;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(6, 182, 212, 0.1);
+  transition: all 0.25s ease;
+}
+
+.tutorial-fab svg {
+  width: 20px;
+  height: 20px;
+}
+
+.tutorial-fab:hover {
+  background: rgba(6, 182, 212, 0.22);
+  border-color: rgba(6, 182, 212, 0.6);
+  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.25), 0 0 0 1px rgba(6, 182, 212, 0.2);
+  transform: translateY(-2px);
+}
+
+@media (max-width: 540px) {
+  .tutorial-fab {
+    bottom: 20px;
+    right: 16px;
+    width: 40px;
+    height: 40px;
+  }
+}

frontend/src/app/app.component.html

@@ -8,4 +8,20 @@
   <main class="main-content" [ngClass]="{'auth-content': !showNavbar}">
     <router-outlet></router-outlet>
   </main>
-</div>
+
+  <!-- FAB tutorial (solo fuera de auth) -->
+  @if (showNavbar) {
+    <button class="tutorial-fab" (click)="openTutorial()" aria-label="Abrir tutorial">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"/>
+        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+        <line x1="12" y1="17" x2="12.01" y2="17"/>
+      </svg>
+    </button>
+  }
+
+  <!-- Modal onboarding global -->
+  @if (showOnboarding) {
+    <app-onboarding (closed)="onOnboardingClosed()"></app-onboarding>
+  }
+</div>

frontend/src/app/app.component.ts

@@ -1,19 +1,21 @@
 import { Component, OnInit } from '@angular/core';
-import { RouterOutlet, RouterLink, Router, NavigationEnd } from '@angular/router';
+import { RouterOutlet, RouterLink, Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { TransactionListComponent } from './components/transaction-list/transaction-list.component';
 import { LoginRegisterComponent } from './components/auth-components/login-register/login-register.component';
 import { NavBarComponent } from './components/nav-bar/nav-bar.component';
 import { CommonModule } from '@angular/common';
 import { filter } from 'rxjs/operators';
 import { ThemeService } from './services/theme/theme.service';
+import { OnboardingComponent } from './components/onboarding/onboarding.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
     RouterOutlet,
     NavBarComponent,
-    CommonModule
+    CommonModule,
+    OnboardingComponent
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
@@ -24,7 +26,8 @@ import { ThemeService } from './services/theme/theme.service';
 
 export class AppComponent implements OnInit {
   title = 'smartspend-frontend';
-  showNavbar = false; // Iniciar en false para evitar flash del navbar
+  showNavbar = false;
+  showOnboarding = false;
 
   constructor(private router: Router, private themeService: ThemeService) {
     // Aplicar tema guardado lo antes posible para evitar flash
@@ -35,17 +38,29 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    // 👈 Detectar la ruta inicial inmediatamente
     this.checkCurrentRoute();
 
-    // Escucha los cambios de ruta posteriores
     this.router.events
       .pipe(filter(event => event instanceof NavigationEnd))
       .subscribe((event: any) => {
         this.updateNavbarVisibility(event.url);
+        if (event.url.includes('tutorial=true')) {
+          this.showOnboarding = true;
+          this.router.navigate([], { queryParams: {}, replaceUrl: true });
+        } else if (event.url.startsWith('/dashboard') && !OnboardingComponent.isCompleted()) {
+          this.showOnboarding = true;
+        }
       });
   }
 
+  openTutorial(): void {
+    this.showOnboarding = true;
+  }
+
+  onOnboardingClosed(): void {
+    this.showOnboarding = false;
+  }
+
   private checkCurrentRoute() {
     const currentUrl = this.router.url;
     this.updateNavbarVisibility(currentUrl);

frontend/src/app/components/auth-components/login-register/login-register.component.css

@@ -179,6 +179,12 @@
   margin-right: auto;
   margin-bottom: 0.5rem;
   overflow: hidden;
+  border-radius: 8px;
+}
+
+/* El div que inyecta la librería GSI de Google tiene fondo blanco por defecto */
+.register-card #google-signin-btn > div {
+  background: transparent !important;
 }
 
 .register-card #google-signin-btn {

frontend/src/app/components/create-transaction-modal/create-transaction-modal.component.html

@@ -316,10 +316,10 @@ <h2 class="text-lg font-semibold text-slate-100">
                             [ngModelOptions]="{ standalone: true }"
                             placeholder="Nombre"
                             maxlength="30"
-                    class="flex-1 rounded-lg bg-slate-800 border border-slate-600 px-3 py-2
+                    class="min-w-0 flex-1 rounded-lg bg-slate-800 border border-slate-600 px-3 py-2
                             text-slate-200 focus:outline-none focus:ring-2 focus:ring-cyan-400 text-sm"
                             />
-                          <div class="relative w-28">
+                          <div class="relative w-32 shrink-0">
                             <span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">€</span>
                             <input
                               type="number"

frontend/src/app/components/dashboard/dashboard.component.ts

@@ -6,7 +6,6 @@ import { BaseChartDirective } from 'ng2-charts';
 import { Chart, ChartConfiguration, registerables } from 'chart.js';
 
 import { BankAccount, BankAccountServiceService, CreateBankAccount} from '../../services/bankAccount/bank-account-service.service';
-// import { TransactionService } from '../../services/transaction/transaction.service'; // Este servicio no se usa directamente aquí, puede eliminarse si no se usa para otras cosas en DashboardComponent
 import { TransactionListComponent } from '../transaction-list/transaction-list.component';
 import { CreateTransactionModalComponent } from '../create-transaction-modal/create-transaction-modal.component';
 import { Transaction } from '../../interfaces/transaction.interface';
@@ -101,7 +100,6 @@ export class DashboardComponent implements OnInit {
     private chartsService: ChartsService,
     private transactionService: TransactionService,
     private router: Router
-    // private transactionService: TransactionService // Se eliminó porque no se usa directamente en este componente.
   ) {}
 
   ngOnInit(): void {

frontend/src/app/components/forecast-dashboard/fixed-expenses-card/fixed-expenses-card.component.scss

@@ -14,8 +14,9 @@
 .panel-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   margin-bottom: 1rem;
+  gap: 0.75rem;
 
   h2 {
     margin: 0.15rem 0 0;
@@ -101,6 +102,12 @@
   }
 }
 
+.expense-main {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .title {
   margin: 0;
   color: var(--color-text);
@@ -119,6 +126,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  flex-shrink: 0;
 }
 
 .amount {
@@ -133,6 +141,7 @@
   padding: 0.2rem 0.55rem;
   background: rgba(251, 146, 60, 0.18);
   color: #ffcc8a;
+  white-space: nowrap;
 
   &.paid {
     background: rgba(52, 211, 153, 0.18);
@@ -154,6 +163,26 @@
   opacity: 0.65;
 }
 
+/* ---- Mobile: stack layout so the status badge doesn't overflow ---- */
+@media (max-width: 480px) {
+  .expense-item {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .expense-side {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    text-align: left;
+    width: 100%;
+  }
+
+  .status {
+    font-size: 0.7rem;
+  }
+}
+
 :host-context(html.light-theme) {
   .total-badge {
     background: rgba(241, 245, 249, 0.96);

frontend/src/app/components/nav-bar/nav-bar.component.css

@@ -259,6 +259,56 @@
   opacity: 0.95;
 }
 
+/* ---- Tutorial button ---- */
+.tutorial-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(6, 182, 212, 0.1);
+  border: 1px solid rgba(6, 182, 212, 0.3);
+  border-radius: 8px;
+  color: #67e8f9;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 5px 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.tutorial-btn:hover {
+  background: rgba(6, 182, 212, 0.2);
+  border-color: rgba(6, 182, 212, 0.55);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
+}
+
+.mobile-tutorial-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(6, 182, 212, 0.08);
+  border: 1px solid rgba(6, 182, 212, 0.25);
+  border-radius: 8px;
+  color: #67e8f9;
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 14px 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+  margin-top: 4px;
+}
+
+.mobile-tutorial-btn:hover {
+  background: rgba(6, 182, 212, 0.18);
+  border-color: rgba(6, 182, 212, 0.45);
+}
+
 :host-context(html.light-theme) .nav-bar {
   background: linear-gradient(180deg, rgba(248, 250, 252, 0.97) 0%, rgba(241, 245, 249, 0.94) 100%);
   border-bottom-color: rgba(148, 163, 184, 0.35);