feat(rutinas): panel de padres con catálogo y selección de días

routines-tab permite definir rutinas en el catálogo y asignarlas a
varios días marcando casillas, reutilizando emoji y color pickers.

frontend/src/app/features/parents/routines-tab.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, computed, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ParentApiService } from '../../core/parent-api.service';
 import { I18nService } from '../../core/i18n.service';
-import { RoutineView } from '../../core/models';
+import { RoutineTaskView, RoutineView } from '../../core/models';
 import { EmojiPickerComponent } from '../../shared/emoji-picker.component';
 import { ColorPickerComponent } from '../../shared/color-picker.component';
 
@@ -16,29 +16,18 @@ const DAYS: { key: string; es: string; ca: string }[] = [
   { key: 'SUNDAY', es: 'Domingo', ca: 'Diumenge' },
 ];
 
-/** Pestaña Rutinas de tarde por día de la semana, de un niño. */
+/**
+ * Pestaña Rutinas de tarde. Dos pasos: (1) definir rutinas en el catálogo de la familia
+ * una sola vez; (2) asignar una rutina del catálogo a varios días del niño de golpe.
+ * Reutiliza el patrón de las mañanas (catálogo de actividades + asignación por día).
+ */
 @Component({
   selector: 'app-routines-tab',
   imports: [FormsModule, EmojiPickerComponent, ColorPickerComponent],
   template: `
+    <!-- 1) Catálogo de rutinas reutilizables de la familia -->
     <div class="adm-card">
-      <div class="adm-row">
-        <span class="adm-label">{{ i18n.t('tabRoutines') }}:</span>
-        @for (d of days; track d.key) {
-          <button
-            class="adm-chip"
-            [style.background]="d.key === day() ? 'var(--accent-purple)' : ''"
-            [style.color]="d.key === day() ? '#fff' : ''"
-            (click)="day.set(d.key)"
-          >
-            {{ i18n.label(d.es, d.ca) }}
-          </button>
-        }
-      </div>
-    </div>
-
-    <div class="adm-card">
-      <p class="adm-label">Nueva rutina</p>
+      <p class="adm-label">Catálogo de rutinas</p>
       <div class="grid2">
         <div class="field">
           <label class="field__label">Rutina (ES)</label>
@@ -57,10 +46,71 @@ const DAYS: { key: string; es: string; ca: string }[] = [
         <label class="field__label">Color</label>
         <app-color-picker [(value)]="color" />
       </div>
-      <button class="adm-btn" [disabled]="!labelEs || !labelCa || !icon" (click)="add()">+ {{ i18n.t('add') }}</button>
+      <button class="adm-btn" [disabled]="!labelEs || !labelCa || !icon" (click)="addToCatalog()">
+        + {{ i18n.t('add') }}
+      </button>
+
+      <div class="adm-list">
+        @for (t of catalog(); track t.id) {
+          <div class="adm-item">
+            <span>{{ t.icon }}</span>
+            <span class="adm-item__grow">{{ i18n.label(t.labelEs, t.labelCa) }}</span>
+            <button class="adm-del" (click)="removeFromCatalog(t)" aria-label="Borrar">✕</button>
+          </div>
+        } @empty {
+          <p class="adm-empty">{{ i18n.t('none') }}</p>
+        }
+      </div>
     </div>
 
+    <!-- 2) Asignar una rutina del catálogo a varios días -->
     <div class="adm-card">
+      <p class="adm-label">Asignar a días</p>
+      <div class="field">
+        <label class="field__label">Rutina</label>
+        <select class="field__input" [(ngModel)]="selectedTaskId">
+          <option [ngValue]="null" disabled>— Elige una rutina —</option>
+          @for (t of catalog(); track t.id) {
+            <option [ngValue]="t.id">{{ t.icon }} {{ i18n.label(t.labelEs, t.labelCa) }}</option>
+          }
+        </select>
+      </div>
+      <div class="adm-row">
+        @for (d of days; track d.key) {
+          <button
+            class="adm-chip"
+            [style.background]="isSelected(d.key) ? 'var(--accent-purple)' : ''"
+            [style.color]="isSelected(d.key) ? '#fff' : ''"
+            (click)="toggleSelectedDay(d.key)"
+          >
+            {{ i18n.label(d.es, d.ca) }}
+          </button>
+        }
+      </div>
+      <button
+        class="adm-btn"
+        [disabled]="selectedTaskId === null || selectedDays().length === 0"
+        (click)="assign()"
+      >
+        Asignar a {{ selectedDays().length }} día(s)
+      </button>
+    </div>
+
+    <!-- Vista de asignaciones por día -->
+    <div class="adm-card">
+      <div class="adm-row">
+        <span class="adm-label">{{ i18n.t('tabRoutines') }}:</span>
+        @for (d of days; track d.key) {
+          <button
+            class="adm-chip"
+            [style.background]="d.key === day() ? 'var(--accent-purple)' : ''"
+            [style.color]="d.key === day() ? '#fff' : ''"
+            (click)="day.set(d.key)"
+          >
+            {{ i18n.label(d.es, d.ca) }}
+          </button>
+        }
+      </div>
       <div class="adm-list">
         @for (r of routinesForDay(); track r.id; let i = $index; let last = $last) {
           <div class="adm-item">
@@ -103,32 +153,36 @@ export class RoutinesTabComponent {
 
   protected readonly days = DAYS;
   protected readonly day = signal('MONDAY');
+  protected readonly catalog = signal<RoutineTaskView[]>([]);
   protected readonly routines = signal<RoutineView[]>([]);
   protected readonly routinesForDay = computed(() =>
     this.routines().filter((r) => r.dayOfWeek === this.day()),
   );
 
+  // Estado del formulario del catálogo.
   protected readonly routineIcons = ['🎒', '🥪', '📝', '🎹', '🍽️', '🛁', '🦷', '📚', '🧹', '🐕', '🛏️', '🎨', '⚽', '🧺'];
   protected icon = '';
   protected labelEs = '';
   protected labelCa = '';
   protected color = '#A78BD0';
 
+  // Estado del formulario de asignación.
+  protected selectedTaskId: number | null = null;
+  protected readonly selectedDays = signal<string[]>([]);
+
   private reload(): void {
+    this.api.listRoutineTasks().subscribe((l) => this.catalog.set(l));
     this.api.listRoutines(this._childId).subscribe((l) => this.routines.set(l));
   }
 
-  add(): void {
-    const order = this.routinesForDay().length;
+  // --- Catálogo ---
+  addToCatalog(): void {
     this.api
-      .createRoutine({
-        childId: this._childId,
-        dayOfWeek: this.day(),
+      .createRoutineTask({
         labelEs: this.labelEs,
         labelCa: this.labelCa,
         icon: this.icon,
         color: this.color,
-        orderIndex: order,
       })
       .subscribe(() => {
         this.labelEs = this.labelCa = this.icon = '';
@@ -136,6 +190,41 @@ export class RoutinesTabComponent {
       });
   }
 
+  removeFromCatalog(t: RoutineTaskView): void {
+    this.api.deleteRoutineTask(t.id).subscribe(() => this.reload());
+  }
+
+  // --- Asignación multi-día ---
+  isSelected(dayKey: string): boolean {
+    return this.selectedDays().includes(dayKey);
+  }
+
+  toggleSelectedDay(dayKey: string): void {
+    const current = this.selectedDays();
+    this.selectedDays.set(
+      current.includes(dayKey) ? current.filter((d) => d !== dayKey) : [...current, dayKey],
+    );
+  }
+
+  assign(): void {
+    if (this.selectedTaskId === null || this.selectedDays().length === 0) {
+      return;
+    }
+    const order = this.routinesForDay().length;
+    this.api
+      .createRoutine({
+        childId: this._childId,
+        routineTaskId: this.selectedTaskId,
+        daysOfWeek: this.selectedDays(),
+        orderIndex: order,
+      })
+      .subscribe(() => {
+        this.selectedTaskId = null;
+        this.selectedDays.set([]);
+        this.reload();
+      });
+  }
+
   /** Mueve una rutina del día arriba (-1) o abajo (+1) y persiste el nuevo orden. */
   move(index: number, delta: number): void {
     const list = [...this.routinesForDay()];