fix(panel): formulario de alta de niños usable

Rediseña el alta de niño que era confusa: selector de mascota por emojis,
paleta de colores clicable, campos con etiqueta legible (la edad antes se
truncaba e impedía activar 'Añadir'), la hora de salida explicada como
opcional y tooltips en cada campo.

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

@@ -12,23 +12,73 @@ import { ChildSummary } from '../../core/models';
     <!-- Alta -->
     <div class="adm-card">
       <p class="adm-label">Nuevo niño/a</p>
-      <div class="adm-row">
-        <input class="adm-input adm-input--sm" [(ngModel)]="mascot" placeholder="🦊" maxlength="4"
-               aria-label="Mascota (emoji)" />
-        <input class="adm-input" [(ngModel)]="name" placeholder="Nombre" />
-        <input class="adm-input adm-input--sm" type="number" min="1" max="18" [(ngModel)]="age"
-               placeholder="Edad" aria-label="Edad" />
-        <input class="adm-input adm-input--sm" type="time" [(ngModel)]="departureTime"
-               aria-label="Hora de salida" />
-        <input class="adm-input adm-input--sm" type="color" [(ngModel)]="accentColor"
-               aria-label="Color" />
-        <button class="adm-btn" [disabled]="!name || !mascot || !age" (click)="add()">
-          + {{ i18n.t('add') }}
-        </button>
+
+      <!-- Nombre -->
+      <div class="field">
+        <label class="field__label">
+          Nombre
+          <span class="field__info" title="Cómo se llama. Aparece en su tarjeta del kiosko.">ⓘ</span>
+        </label>
+        <input class="field__input" [(ngModel)]="name" placeholder="Ej. Nora" maxlength="40" />
       </div>
-      <p class="adm-empty" style="text-align:left">
-        La mascota es un emoji y el color identifica al niño en sus tarjetas.
-      </p>
+
+      <!-- Mascota: elegir un emoji -->
+      <div class="field">
+        <label class="field__label">
+          Mascota
+          <span class="field__info" title="El animalito que representa al niño. Toca uno.">ⓘ</span>
+        </label>
+        <div class="picker">
+          @for (m of mascots; track m) {
+            <button type="button" class="emoji" [class.emoji--sel]="mascot() === m" (click)="mascot.set(m)">
+              {{ m }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <!-- Color de acento -->
+      <div class="field">
+        <label class="field__label">
+          Color
+          <span class="field__info" title="Color que identifica al niño en sus tarjetas y bordes.">ⓘ</span>
+        </label>
+        <div class="picker">
+          @for (c of colors; track c) {
+            <button
+              type="button"
+              class="swatch"
+              [class.swatch--sel]="accentColor() === c"
+              [style.background]="c"
+              [attr.aria-label]="'Color ' + c"
+              (click)="accentColor.set(c)"
+            ></button>
+          }
+        </div>
+      </div>
+
+      <!-- Edad + hora de salida -->
+      <div class="grid2">
+        <div class="field">
+          <label class="field__label">
+            Edad
+            <span class="field__info" title="Años del niño (1–18).">ⓘ</span>
+          </label>
+          <input class="field__input" type="number" min="1" max="18" [(ngModel)]="age" placeholder="años" />
+        </div>
+        <div class="field">
+          <label class="field__label">
+            Hora de salir al cole <span class="field__opt">(opcional)</span>
+            <span class="field__info"
+                  title="A qué hora salís de casa por la mañana. Alimenta el temporizador «Salimos en X min» del kiosko. Si lo dejas vacío, no se muestra.">ⓘ</span>
+          </label>
+          <input class="field__input" type="time" [(ngModel)]="departureTime" />
+        </div>
+      </div>
+
+      <button class="adm-btn field__add" [disabled]="!canAdd()" (click)="add()">
+        + Añadir niño/a
+      </button>
     </div>
 
     <!-- Lista -->
@@ -39,14 +89,78 @@ import { ChildSummary } from '../../core/models';
           <div class="adm-item" [style.borderLeft]="'5px solid ' + c.accentColor">
             <span style="font-size:28px">{{ c.mascot }}</span>
             <span class="adm-item__grow"><strong>{{ c.name }}</strong> · {{ c.age }} años · 🪙 {{ c.coins }}</span>
-            <button class="adm-del" (click)="remove(c)" aria-label="Borrar">✕</button>
+            <button class="adm-del" (click)="remove(c)" aria-label="Borrar" title="Borrar este niño y todos sus datos">✕</button>
           </div>
         } @empty {
-          <p class="adm-empty">Aún no hay niños. Añade el primero arriba ✨</p>
+          <p class="adm-empty">Aún no hay niños. Crea el primero arriba ✨</p>
         }
       </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__opt { font-weight: 400; color: var(--text-3); }
+      .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; }
+      .emoji {
+        all: unset;
+        cursor: pointer;
+        width: 48px;
+        height: 48px;
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 26px;
+        background: var(--surface-soft);
+        border: 2px solid transparent;
+        transition: transform 0.1s, border-color 0.15s;
+      }
+      .emoji:hover { transform: scale(1.08); }
+      .emoji--sel { border-color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 12%, #fff); }
+      .swatch {
+        all: unset;
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        box-shadow: var(--shadow-card);
+        border: 3px solid transparent;
+        transition: transform 0.1s;
+      }
+      .swatch:hover { transform: scale(1.1); }
+      .swatch--sel { border-color: var(--text-strong); transform: scale(1.1); }
+      .field__add { margin-top: var(--space-2); }
+    `,
+  ],
 })
 export class ChildrenTabComponent {
   /** Avisa al panel de que la lista de niños cambió (para refrescar el selector). */
@@ -55,13 +169,17 @@ export class ChildrenTabComponent {
   private readonly api = inject(ParentApiService);
   protected readonly i18n = inject(I18nService);
 
-  protected readonly children = signal<ChildSummary[]>([]);
+  /** Emojis de mascota disponibles para elegir. */
+  protected readonly mascots = ['🦊', '🐢', '🦉', '🐶', '🐱', '🐰', '🦁', '🐼', '🐸', '🐨', '🐵', '🦄', '🐯', '🐧'];
+  /** Paleta de acento del handoff. */
+  protected readonly colors = ['#F2A65A', '#5B8DEF', '#A78BD0', '#7FBF6B', '#5BC0BE', '#F4C95D', '#EC8FA4'];
 
-  protected mascot = '';
+  protected readonly children = signal<ChildSummary[]>([]);
+  protected readonly mascot = signal('');
+  protected readonly accentColor = signal('#F2A65A');
   protected name = '';
   protected age: number | null = null;
   protected departureTime = '';
-  protected accentColor = '#F2A65A';
 
   constructor() {
     this.reload();
@@ -71,21 +189,29 @@ export class ChildrenTabComponent {
     this.api.listChildren().subscribe((list) => this.children.set(list));
   }
 
+  /** Se puede dar de alta cuando hay nombre, mascota y una edad válida. */
+  canAdd(): boolean {
+    return this.name.trim().length > 0 && this.mascot() !== '' && !!this.age && this.age > 0;
+  }
+
   add(): void {
-    if (!this.name || !this.mascot || !this.age) {
+    if (!this.canAdd()) {
       return;
     }
     this.api
       .createChild({
-        name: this.name,
-        mascot: this.mascot,
-        accentColor: this.accentColor,
-        age: this.age,
+        name: this.name.trim(),
+        mascot: this.mascot(),
+        accentColor: this.accentColor(),
+        age: this.age!,
         departureTime: this.departureTime || undefined,
       })
       .subscribe(() => {
-        this.name = this.mascot = this.departureTime = '';
+        this.name = '';
+        this.mascot.set('');
         this.age = null;
+        this.departureTime = '';
+        this.accentColor.set('#F2A65A');
         this.reload();
         this.changed.emit();
       });