From 1b8985bb06002a6329aeac36fb5be31a806c82e6 Mon Sep 17 00:00:00 2001
From: brobert <borja@brobert.net>
Date: Thu, 16 Oct 2025 00:00:59 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20a=C3=B1adir=20barra=20inferior=20m?=
 =?UTF-8?q?=C3=B3vil=20con=204=20pesta=C3=B1as=20y=20nombres=20actualizado?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aider (openrouter/openai/gpt-5) <aider@aider.chat>
---
 apps/web/src/lib/ui/data/TaskItem.svelte   | 40 +++++++++----
 apps/web/src/lib/ui/feedback/Toast.svelte  |  6 ++
 apps/web/src/lib/ui/layout/AppShell.svelte | 70 ++++++++++++++++++++++
 3 files changed, 103 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/lib/ui/data/TaskItem.svelte b/apps/web/src/lib/ui/data/TaskItem.svelte
index 7e6fa07..bcd1f25 100644
--- a/apps/web/src/lib/ui/data/TaskItem.svelte
+++ b/apps/web/src/lib/ui/data/TaskItem.svelte
@@ -250,7 +250,7 @@
 		<span class="group-badge" title="Grupo">{groupLabel}</span>
 		{#if completed}
 			<button
-				class="btn primary"
+				class="btn primary primary-action"
 				aria-label="Deshacer completar"
 				title="Deshacer completar"
 				on:click|preventDefault={doUncomplete}
@@ -281,14 +281,14 @@
 		{#if !completed}
 			{#if !isAssigned}
 				<button
-					class="icon-btn"
+					class="icon-btn secondary-action"
 					aria-label="Reclamar"
 					on:click|preventDefault={doClaim}
 					disabled={busy}>Reclamar</button
 				>
 			{:else}
 				<button
-					class="icon-btn"
+					class="icon-btn secondary-action"
 					aria-label="Soltar"
 					title="Soltar"
 					on:click|preventDefault={doUnassign}
@@ -296,7 +296,7 @@
 				>
 			{/if}
 			<button
-				class="btn primary"
+				class="btn primary primary-action"
 				aria-label="Completar"
 				title="Completar"
 				on:click|preventDefault={doComplete}
@@ -307,7 +307,7 @@
 
 			{#if !editingText}
 				<button
-					class="icon-btn"
+					class="icon-btn secondary-action"
 					aria-label="Editar texto"
 					title="Editar texto"
 					on:click|preventDefault={toggleEditText}
@@ -317,12 +317,12 @@
 				>
 			{:else}
 				<button
-					class="btn primary"
+					class="btn primary secondary-action"
 					on:click|preventDefault={saveText}
 					disabled={busy}>Guardar</button
 				>
 				<button
-					class="btn ghost"
+					class="btn ghost secondary-action"
 					on:click|preventDefault={cancelText}
 					disabled={busy}>Cancelar</button
 				>
@@ -330,7 +330,7 @@
 
 			{#if !editing}
 				<button
-					class="icon-btn"
+					class="icon-btn secondary-action"
 					aria-label="Editar fecha"
 					title="Editar fecha"
 					on:click|preventDefault={toggleEdit}
@@ -339,17 +339,17 @@
 			{:else}
 				<input class="date" type="date" bind:value={dateValue} />
 				<button
-					class="btn primary"
+					class="btn primary secondary-action"
 					on:click|preventDefault={saveDate}
 					disabled={busy}>Guardar</button
 				>
 				<button
-					class="btn danger"
+					class="btn danger secondary-action"
 					on:click|preventDefault={clearDate}
 					disabled={busy}>Quitar</button
 				>
 				<button
-					class="btn ghost"
+					class="btn ghost secondary-action"
 					on:click|preventDefault={toggleEdit}
 					disabled={busy}>Cancelar</button
 				>
@@ -455,11 +455,14 @@
 
 	.actions {
 		justify-self: center;
-		justify-content: space-between;
-		align-content: space-between;
 		grid-column: 2/3;
 		grid-row: 3/4;
 		margin-bottom: 4px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		align-items: center;
+		justify-content: flex-end;
 	}
 	.btn {
 		padding: 4px 8px;
@@ -503,6 +506,17 @@
 		padding: 4px 6px;
 		font-size: 14px;
 	}
+	@media (max-width: 768px) {
+		.actions {
+			justify-self: stretch;
+		}
+		.actions .primary-action {
+			flex: 1 1 100%;
+		}
+		.actions .secondary-action {
+			flex: 0 0 auto;
+		}
+	}
 	@media (max-width: 480px) {
 		.task {
 			grid-template-columns: 1fr;
diff --git a/apps/web/src/lib/ui/feedback/Toast.svelte b/apps/web/src/lib/ui/feedback/Toast.svelte
index e0fd209..d55934b 100644
--- a/apps/web/src/lib/ui/feedback/Toast.svelte
+++ b/apps/web/src/lib/ui/feedback/Toast.svelte
@@ -52,6 +52,12 @@
   .close:focus-visible {
     background: rgba(0,0,0,0.06);
   }
+  /* Evitar solape con tabbar móvil */
+  @media (max-width: 768px) {
+    .toast-region {
+      bottom: calc(16px + 48px + env(safe-area-inset-bottom));
+    }
+  }
   @media (prefers-color-scheme: dark) {
     .close:hover,
     .close:focus-visible { background: rgba(255,255,255,0.08); }
diff --git a/apps/web/src/lib/ui/layout/AppShell.svelte b/apps/web/src/lib/ui/layout/AppShell.svelte
index 9cf18a8..abff8dc 100644
--- a/apps/web/src/lib/ui/layout/AppShell.svelte
+++ b/apps/web/src/lib/ui/layout/AppShell.svelte
@@ -22,6 +22,25 @@
   <slot />
 </main>
 
+<nav class="tabbar" role="navigation" aria-label="Navegación inferior">
+  <a href="/app" class:active={$page.url.pathname === '/app'} aria-label="Tareas">
+    <span class="icon">✅</span>
+    <span class="label">Tareas</span>
+  </a>
+  <a href="/app/groups" class:active={$page.url.pathname.startsWith('/app/groups')} aria-label="Grupos">
+    <span class="icon">👥</span>
+    <span class="label">Grupos</span>
+  </a>
+  <a href="/app/preferences" class:active={$page.url.pathname.startsWith('/app/preferences')} aria-label="Recordatorios">
+    <span class="icon">⏰</span>
+    <span class="label">Recordatorios</span>
+  </a>
+  <a href="/app/integrations" class:active={$page.url.pathname.startsWith('/app/integrations')} aria-label="Calendarios">
+    <span class="icon">📅</span>
+    <span class="label">Calendarios</span>
+  </a>
+</nav>
+
 <Toast />
 
 <style>
@@ -99,4 +118,55 @@
     padding-top: var(--space-4);
     padding-bottom: var(--space-4);
   }
+
+  /* Barra de pestañas inferior (solo móvil) */
+  .tabbar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--color-surface);
+    border-top: 1px solid var(--color-border);
+    display: none;
+    z-index: 20;
+    min-height: 48px;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  @media (max-width: 768px) {
+    .tabbar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      align-items: center;
+    }
+    .tabbar a {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 6px 8px;
+      color: inherit;
+      text-decoration: none;
+    }
+    .tabbar a.active {
+      color: var(--color-primary);
+      font-weight: 600;
+    }
+    .tabbar .icon {
+      font-size: 18px;
+      line-height: 1;
+    }
+    .tabbar .label {
+      font-size: 12px;
+      line-height: 1;
+    }
+    /* Reservar espacio en el main para no tapar contenido */
+    .main {
+      padding-bottom: calc(var(--space-4) + 48px + env(safe-area-inset-bottom));
+    }
+  }
+  @media (max-width: 480px) {
+    .tabbar .label {
+      display: none;
+    }
+  }
 </style>