cambia la explicación de los recordatorios para que sea una lista ul

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

@@ -1,25 +1,32 @@
 <script lang="ts">
-  import SegmentedControl from '$lib/ui/inputs/SegmentedControl.svelte';
+  import SegmentedControl from "$lib/ui/inputs/SegmentedControl.svelte";
-  import Card from '$lib/ui/layout/Card.svelte';
+  import Card from "$lib/ui/layout/Card.svelte";
-  import Button from '$lib/ui/atoms/Button.svelte';
+  import Button from "$lib/ui/atoms/Button.svelte";
-  import { success as toastSuccess } from '$lib/stores/toasts';
+  import { success as toastSuccess } from "$lib/stores/toasts";
 
-	export let data: {
+  export let data: {
-		pref: { freq: 'off' | 'daily' | 'weekly' | 'weekdays'; time: string | null };
+    pref: {
-		tz: string;
+      freq: "off" | "daily" | "weekly" | "weekdays";
-		next: string | null;
+      time: string | null;
-	};
+    };
-	export let form: any;
+    tz: string;
+    next: string | null;
+  };
+  export let form: any;
 
-	let freq: 'off' | 'daily' | 'weekly' | 'weekdays' = data.pref.freq;
+  let freq: "off" | "daily" | "weekly" | "weekdays" = data.pref.freq;
-	let time: string = data.pref.time ?? '08:30';
+  let time: string = data.pref.time ?? "08:30";
-  $: if (form?.success) { try { toastSuccess('Preferencias guardadas.'); } catch {} }
+  $: if (form?.success) {
+    try {
+      toastSuccess("Preferencias guardadas.");
+    } catch {}
+  }
 
   const options = [
-    { label: 'Apagado', value: 'off' },
+    { label: "Apagado", value: "off" },
-    { label: 'Diario', value: 'daily' },
+    { label: "Diario", value: "daily" },
-    { label: 'L–V', value: 'weekdays' },
+    { label: "L–V", value: "weekdays" },
-    { label: 'Semanal', value: 'weekly' }
+    { label: "Semanal", value: "weekly" },
   ];
 </script>
 
@@ -29,21 +36,30 @@
 </svelte:head>
 
 <section class="page">
-	<h1 class="title">Preferencias de recordatorios</h1>
+  <h1 class="title">Preferencias de recordatorios</h1>
 
   <Card>
     <form method="POST" class="form">
       <div>
         <label for="freq">Frecuencia</label>
-        <SegmentedControl name="freq" options={options} bind:value={freq} />
+        <SegmentedControl name="freq" {options} bind:value={freq} />
-        <p class="help">
+        <ul class="help">
-          - Diario: cada día a la hora indicada. - Laborables: solo lunes a viernes. - Semanal: los lunes.
+          <li>Diario: cada día a la hora indicada</li>
-        </p>
+          <li>Laborables: solo de lunes a viernes</li>
+          <li>Semanal: los lunes</li>
+        </ul>
       </div>
 
       <div>
         <label for="time">Hora (HH:MM)</label>
-        <input id="time" name="time" type="time" step="60" bind:value={time} disabled={freq === 'off'} />
+        <input
+          id="time"
+          name="time"
+          type="time"
+          step="60"
+          bind:value={time}
+          disabled={freq === "off"}
+        />
         <p class="help">Zona horaria: {data.tz}</p>
       </div>
 
@@ -57,21 +73,47 @@
     </form>
   </Card>
 
-	<div class="section">
+  <div class="section">
-		<h2 class="subtitle">Próximo recordatorio</h2>
+    <h2 class="subtitle">Próximo recordatorio</h2>
-		<ul>
+    <ul>
-			<li>Servidor: {data.next ?? '—'}</li>
+      <li>Servidor: {data.next ?? "—"}</li>
-		</ul>
+    </ul>
-	</div>
+  </div>
 </section>
 
 <style>
-  .page { max-width: 720px; margin: 1.5rem auto; padding: 0 1rem; }
+  .page {
-  .title { font-size: 1.4rem; font-weight: 600; margin-bottom: .75rem; }
+    max-width: 720px;
-  .form { display: grid; gap: .75rem; }
+    margin: 1.5rem auto;
-  label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
+    padding: 0 1rem;
-  .help { font-size: 0.9rem; color: var(--color-text-muted); margin-top: 0.25rem; }
+  }
-  .error { color: var(--color-danger); }
+  .title {
-  .section { margin-top: 1rem; }
+    font-size: 1.4rem;
-  .subtitle { font-size: 1.1rem; font-weight: 600; }
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+  }
+  .form {
+    display: grid;
+    gap: 0.75rem;
+  }
+  label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+  }
+  .help {
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+    margin-top: 0.25rem;
+  }
+  .error {
+    color: var(--color-danger);
+  }
+  .section {
+    margin-top: 1rem;
+  }
+  .subtitle {
+    font-size: 1.1rem;
+    font-weight: 600;
+  }
 </style>