@if (today(); as t) {
  <main class="home">
    <!-- Cabecera -->
    <header class="home__top">
      <button type="button" class="iconbtn" (click)="goProfiles()" aria-label="Volver a perfiles">‹</button>

      <div class="home__greet">
        <p class="home__hello">{{ i18n.t('hello') }}, {{ t.child.name }} {{ t.child.mascot }}</p>
        <p class="home__date">{{ dateLabel() }}</p>
      </div>

      <app-morning-timer [minutes]="t.timer.minutesUntilDeparture" />

      <div class="home__wallet">
        <button type="button" class="iconbtn" (click)="goStore()" aria-label="Tienda">🎁</button>
        <app-wallet #wallet [coins]="t.wallet.coins" />
      </div>
    </header>

    <!-- Conmutador de modo -->
    <div class="modes">
      <button type="button" class="modes__btn" [class.modes__btn--on]="mode() === 'BOARD'" (click)="setMode('BOARD')">
        🗂️ {{ i18n.t('board') }}
      </button>
      <button type="button" class="modes__btn" [class.modes__btn--on]="mode() === 'FOCUS'" (click)="setMode('FOCUS')">
        🎯 {{ i18n.t('focus') }}
      </button>
    </div>

    <!-- Eventos del día -->
    <app-event-banner [events]="t.specialEvents" [ttsEnabled]="t.child.ttsEnabled" />

    <!-- Progreso global -->
    <app-progress-bar [done]="t.progress.totalDone" [total]="t.progress.total" />

    <!-- Tareas: tablero o foco -->
    @if (mode() === 'BOARD') {
      <app-board-view
        [morning]="t.morning"
        [afternoon]="t.afternoon"
        [ttsEnabled]="t.child.ttsEnabled"
        (toggle)="onToggle($event)"
      />
    } @else {
      <app-focus-view [tasksInput]="allTasks()" [ttsEnabled]="t.child.ttsEnabled" (toggle)="onToggle($event)" />
    }
  </main>

  <!-- Monedas voladoras (capa superpuesta) -->
  @for (coin of coins(); track coin.id) {
    <span
      class="flycoin"
      [style.left.px]="coin.x"
      [style.top.px]="coin.y"
      [style.transform]="coin.flying ? 'translate(' + coin.dx + 'px,' + coin.dy + 'px) scale(.4)' : 'translate(0,0) scale(1)'"
      [style.opacity]="coin.flying ? 0 : 1"
      >🪙</span
    >
  }

  <!-- Celebración al completar el día -->
  @if (celebrating()) {
    <app-celebration-overlay
      [coinsDay]="lastEarned()"
      [mascot]="t.child.mascot"
      (close)="celebrating.set(false)"
    />
  }
} @else if (loading()) {
  <p class="home__msg">Cargando el día…</p>
} @else {
  <p class="home__msg">No se pudo cargar el día. ¿Está arrancado el backend?</p>
}