@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>

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

    @if (t.progress.total > 0) {
      <!-- 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>

      <!-- 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)" />
      }
    } @else {
      <!-- Día sin tareas: mensaje amable, nunca una pantalla en blanco. -->
      <div class="freeday">
        <span class="freeday__mascot">{{ t.child.mascot }}</span>
        <p class="freeday__title">{{ i18n.t('emptyDayTitle') }}</p>
        <p class="freeday__sub">{{ i18n.t('emptyDaySub') }} 🎉</p>
      </div>
    }
  </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>
}