refactor: usar toastSuccess, mover toasts a izquierda y mejorar AppShell

Co-authored-by: aider (openrouter/openai/gpt-5) <aider@aider.chat>

apps/web/src/lib/ui/feedback/Toast.svelte

@@ -15,7 +15,7 @@
   .toast-region {
     position: fixed;
     bottom: 16px;
-    right: 16px;
+    left: 16px;
     display: flex;
     flex-direction: column;
     gap: 8px;

apps/web/src/lib/ui/layout/AppShell.svelte

@@ -31,17 +31,22 @@
     background: var(--color-surface);
     border-bottom: 1px solid var(--color-border);
     box-shadow: var(--shadow-sm);
+    backdrop-filter: saturate(180%) blur(8px);
+    -webkit-backdrop-filter: saturate(180%) blur(8px);
   }
   .row {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: var(--space-3);
-    min-height: 52px;
+    min-height: 58px;
   }
   .brand {
     font-weight: 700;
     color: var(--color-primary);
     text-decoration: none;
+    letter-spacing: 0.2px;
+    font-size: 1.05rem;
   }
   .nav {
     display: flex;
@@ -49,7 +54,8 @@
     margin-left: auto;
   }
   .nav a {
-    padding: 6px 10px;
+    position: relative;
+    padding: 8px 12px;
     border-radius: var(--radius-sm);
     text-decoration: none;
     color: inherit;
@@ -63,6 +69,17 @@
     color: var(--color-primary);
     font-weight: 600;
   }
+  .nav a.active::after {
+    content: '';
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 3px;
+    height: 2px;
+    background: var(--color-primary);
+    border-radius: 1px;
+    opacity: 0.9;
+  }
   @media (prefers-color-scheme: dark) {
     .nav a:hover,
     .nav a:focus-visible {

apps/web/src/routes/app/preferences/+page.svelte

@@ -2,7 +2,7 @@
   import SegmentedControl from '$lib/ui/inputs/SegmentedControl.svelte';
   import Card from '$lib/ui/layout/Card.svelte';
   import Button from '$lib/ui/atoms/Button.svelte';
-  import { toasts } from '$lib/stores/toasts';
+  import { success as toastSuccess } from '$lib/stores/toasts';
 
 	export let data: {
 		pref: { freq: 'off' | 'daily' | 'weekly' | 'weekdays'; time: string | null };
@@ -13,7 +13,7 @@
 
 	let freq: 'off' | 'daily' | 'weekly' | 'weekdays' = data.pref.freq;
 	let time: string = data.pref.time ?? '08:30';
-  $: if (form?.success) { try { toasts.success('Preferencias guardadas.'); } catch {} }
+  $: if (form?.success) { try { toastSuccess('Preferencias guardadas.'); } catch {} }
 
   const options = [
     { label: 'Apagado', value: 'off' },
@@ -45,9 +45,6 @@
       {#if form?.error}
         <div style="color: var(--color-danger);">{form.error}</div>
       {/if}
-      {#if form?.success}
-        <div style="color: var(--color-success);">Preferencias guardadas.</div>
-      {/if}
 
       <div>
         <Button type="submit" variant="primary">Guardar</Button>