refactor(panel): selector de emoji y color reutilizable

Extrae app-emoji-picker y app-color-picker a shared/ y los usa en las
pestañas de niños, materiales, rutinas y recompensas, que tenían el mismo
problema: input de color a pelo y emoji escrito a mano. Ahora se elige el
icono de una rejilla de emojis y el color de la paleta del handoff.

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

@@ -3,23 +3,38 @@ import { FormsModule } from '@angular/forms';
 import { ParentApiService } from '../../core/parent-api.service';
 import { I18nService } from '../../core/i18n.service';
 import { ActivityView, MaterialView } from '../../core/models';
+import { EmojiPickerComponent } from '../../shared/emoji-picker.component';
+import { ColorPickerComponent } from '../../shared/color-picker.component';
 
 /** Pestaña Materiales: catálogo de materiales y actividades (con su material). */
 @Component({
   selector: 'app-materials-tab',
-  imports: [FormsModule],
+  imports: [FormsModule, EmojiPickerComponent, ColorPickerComponent],
   template: `
     <!-- Alta de material -->
     <div class="adm-card">
       <p class="adm-label">Nuevo material</p>
-      <div class="adm-row">
-        <input class="adm-input adm-input--sm" [(ngModel)]="mIcon" placeholder="🎒" maxlength="4" />
-        <input class="adm-input" [(ngModel)]="mEs" placeholder="Nombre (ES)" />
-        <input class="adm-input" [(ngModel)]="mCa" placeholder="Nom (CA)" />
-        <input class="adm-input adm-input--sm" type="color" [(ngModel)]="mColor" />
-        <button class="adm-btn" [disabled]="!mEs || !mCa || !mIcon" (click)="addMaterial()">+ {{ i18n.t('add') }}</button>
+      <div class="grid2">
+        <div class="field">
+          <label class="field__label">Nombre (ES)</label>
+          <input class="field__input" [(ngModel)]="mEs" placeholder="Ej. Flauta" />
+        </div>
+        <div class="field">
+          <label class="field__label">Nom (CA)</label>
+          <input class="field__input" [(ngModel)]="mCa" placeholder="Ex. Flauta" />
+        </div>
       </div>
-      <div class="adm-list" style="margin-top:12px">
+      <div class="field">
+        <label class="field__label">Icono <span class="field__info" title="Toca un emoji para el material.">ⓘ</span></label>
+        <app-emoji-picker [(value)]="mIcon" [options]="materialIcons" />
+      </div>
+      <div class="field">
+        <label class="field__label">Color</label>
+        <app-color-picker [(value)]="mColor" />
+      </div>
+      <button class="adm-btn" [disabled]="!mEs || !mCa || !mIcon" (click)="addMaterial()">+ {{ i18n.t('add') }}</button>
+
+      <div class="adm-list" style="margin-top:16px">
         @for (m of materials(); track m.id) {
           <div class="adm-item">
             <span>{{ m.icon }}</span>
@@ -35,26 +50,38 @@ import { ActivityView, MaterialView } from '../../core/models';
     <!-- Alta de actividad con su material -->
     <div class="adm-card">
       <p class="adm-label">Nueva actividad</p>
-      <div class="adm-row">
-        <input class="adm-input adm-input--sm" [(ngModel)]="aIcon" placeholder="🤸" maxlength="4" />
-        <input class="adm-input" [(ngModel)]="aEs" placeholder="Actividad (ES)" />
-        <input class="adm-input" [(ngModel)]="aCa" placeholder="Activitat (CA)" />
-        <input class="adm-input adm-input--sm" type="color" [(ngModel)]="aColor" />
+      <div class="grid2">
+        <div class="field">
+          <label class="field__label">Actividad (ES)</label>
+          <input class="field__input" [(ngModel)]="aEs" placeholder="Ej. Gimnasia" />
+        </div>
+        <div class="field">
+          <label class="field__label">Activitat (CA)</label>
+          <input class="field__input" [(ngModel)]="aCa" placeholder="Ex. Gimnàstica" />
+        </div>
       </div>
-      <p class="adm-label" style="margin-top:12px">Material que conlleva:</p>
-      <div class="adm-row">
-        @for (m of materials(); track m.id) {
-          <label class="adm-chip">
-            <input type="checkbox" [checked]="selectedMaterials.has(m.id)" (change)="toggleMaterial(m.id)" />
-            {{ m.icon }} {{ i18n.label(m.labelEs, m.labelCa) }}
-          </label>
-        }
+      <div class="field">
+        <label class="field__label">Icono <span class="field__info" title="Toca un emoji para la actividad.">ⓘ</span></label>
+        <app-emoji-picker [(value)]="aIcon" [options]="activityIcons" />
       </div>
-      <div class="adm-row" style="margin-top:12px">
-        <button class="adm-btn" [disabled]="!aEs || !aCa || !aIcon" (click)="addActivity()">
-          + {{ i18n.t('add') }}
-        </button>
+      <div class="field">
+        <label class="field__label">Color</label>
+        <app-color-picker [(value)]="aColor" />
       </div>
+      <div class="field">
+        <label class="field__label">Material que conlleva</label>
+        <div class="picker">
+          @for (m of materials(); track m.id) {
+            <label class="adm-chip">
+              <input type="checkbox" [checked]="selectedMaterials.has(m.id)" (change)="toggleMaterial(m.id)" />
+              {{ m.icon }} {{ i18n.label(m.labelEs, m.labelCa) }}
+            </label>
+          } @empty {
+            <span class="adm-empty">Crea materiales primero ↑</span>
+          }
+        </div>
+      </div>
+      <button class="adm-btn" [disabled]="!aEs || !aCa || !aIcon" (click)="addActivity()">+ {{ i18n.t('add') }}</button>
     </div>
 
     <!-- Actividades existentes -->
@@ -65,8 +92,7 @@ import { ActivityView, MaterialView } from '../../core/models';
           <div class="adm-item">
             <span>{{ a.icon }}</span>
             <span class="adm-item__grow">
-              <strong>{{ i18n.label(a.labelEs, a.labelCa) }}</strong>
-              — {{ materialNames(a) }}
+              <strong>{{ i18n.label(a.labelEs, a.labelCa) }}</strong> — {{ materialNames(a) }}
             </span>
             <button class="adm-del" (click)="delActivity(a)">✕</button>
           </div>
@@ -76,22 +102,40 @@ import { ActivityView, MaterialView } from '../../core/models';
       </div>
     </div>
   `,
+  styles: [
+    `
+      .field { margin-bottom: var(--space-4); }
+      .field__label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
+      .field__info { cursor: help; color: var(--text-4); font-size: 0.85rem; }
+      .field__input {
+        font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
+        border: 2px solid var(--border-2); border-radius: var(--radius-sm);
+        background: var(--surface); color: var(--text-strong); width: 100%; box-sizing: border-box;
+      }
+      .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+      @media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
+      .picker { display: flex; flex-wrap: wrap; gap: 8px; }
+    `,
+  ],
 })
 export class MaterialsTabComponent {
   private readonly api = inject(ParentApiService);
   protected readonly i18n = inject(I18nService);
 
+  protected readonly materialIcons = ['✏️', '📘', '📏', '🎵', '📓', '👕', '👟', '🧖', '💧', '📖', '📒', '🍎', '🎒', '🖍️', '✂️', '📐', '🧮', '🎨'];
+  protected readonly activityIcons = ['🤸', '🎵', '📘', '📖', '🎨', '⚽', '🔬', '🧮', '🌍', '🎭', '💻', '🏃'];
+
   protected readonly materials = signal<MaterialView[]>([]);
   protected readonly activities = signal<ActivityView[]>([]);
 
   protected mIcon = '';
   protected mEs = '';
   protected mCa = '';
-  protected mColor = '#5b8def';
+  protected mColor = '#5B8DEF';
   protected aIcon = '';
   protected aEs = '';
   protected aCa = '';
-  protected aColor = '#7fbf6b';
+  protected aColor = '#7FBF6B';
   protected selectedMaterials = new Set<number>();
 
   constructor() {