From 6d3754a1fadefc02e5bca084b8404d4314e67390 Mon Sep 17 00:00:00 2001
From: borja <borja@brobert.net>
Date: Mon, 13 Oct 2025 23:16:55 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20encapsular=20CSS=20en=20p=C3=A1gina?=
 =?UTF-8?q?s=20app,=20groups=20y=20preferences?=
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/routes/app/+page.svelte          | 30 +++++++++++++-----
 apps/web/src/routes/app/groups/+page.svelte   |  3 +-
 .../src/routes/app/preferences/+page.svelte   | 31 +++++++++++++------
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/routes/app/+page.svelte b/apps/web/src/routes/app/+page.svelte
index 8f62f61..4d584d6 100644
--- a/apps/web/src/routes/app/+page.svelte
+++ b/apps/web/src/routes/app/+page.svelte
@@ -21,11 +21,11 @@
 	};
 </script>
 
-<h1 style="margin-bottom: .5rem;">Panel</h1>
-<p style="color: var(--color-text-muted); margin: 0 0 1rem 0;">Sesión: <strong>{data.userId}</strong></p>
+<h1 class="title">Panel</h1>
+<p class="subtle">Sesión: <strong>{data.userId}</strong></p>
 
-<form method="GET" action="/app" style="margin: 0 0 1rem 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
-	<div style="flex: 1 1 260px; min-width: 200px;">
+<form method="GET" action="/app" class="filters">
+	<div class="grow">
     <TextField name="q" placeholder="Buscar tareas..." value={data.q ?? ''} />
   </div>
 	<select name="soonDays">
@@ -37,12 +37,12 @@
 	<button type="submit">Filtrar</button>
 </form>
 
-<h2 style="margin: .5rem 0;">Mis tareas (abiertas)</h2>
+<h2 class="section-title">Mis tareas (abiertas)</h2>
 {#if data.tasks.length === 0}
 	<p>No tienes tareas abiertas.</p>
 {:else}
   <Card>
-    <ul style="margin: 0; padding: 0;">
+    <ul class="list">
       {#each data.tasks as t}
         <TaskItem {...t} />
       {/each}
@@ -61,4 +61,20 @@
   />
 {/if}
 
-<p style="margin-top:.75rem; color: var(--color-text-muted);">La cookie de sesión se renueva con cada visita (idle timeout).</p>
+<p class="footnote">La cookie de sesión se renueva con cada visita (idle timeout).</p>
+
+<style>
+  .title { margin-bottom: .5rem; }
+  .subtle { color: var(--color-text-muted); margin: 0 0 1rem 0; }
+  .filters {
+    margin: 0 0 1rem 0;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .grow { flex: 1 1 260px; min-width: 200px; }
+  .section-title { margin: .5rem 0; }
+  .list { margin: 0; padding: 0; list-style: none; }
+  .footnote { margin-top: .75rem; color: var(--color-text-muted); }
+</style>
diff --git a/apps/web/src/routes/app/groups/+page.svelte b/apps/web/src/routes/app/groups/+page.svelte
index f30c077..ab43d6e 100644
--- a/apps/web/src/routes/app/groups/+page.svelte
+++ b/apps/web/src/routes/app/groups/+page.svelte
@@ -26,7 +26,7 @@
 {#if groups.length === 0}
   <p>No perteneces a ningún grupo permitido.</p>
 {:else}
-  <h1 style="margin-bottom: .75rem;">Grupos</h1>
+  <h1 class="title">Grupos</h1>
   <div class="grid">
     {#each groups as g}
       <GroupCard id={g.id} name={g.name} counts={g.counts} previews={previews[g.id] || []} />
@@ -35,6 +35,7 @@
 {/if}
 
 <style>
+  .title { margin-bottom: .75rem; }
   .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
diff --git a/apps/web/src/routes/app/preferences/+page.svelte b/apps/web/src/routes/app/preferences/+page.svelte
index c533551..513eba4 100644
--- a/apps/web/src/routes/app/preferences/+page.svelte
+++ b/apps/web/src/routes/app/preferences/+page.svelte
@@ -23,27 +23,27 @@
   ];
 </script>
 
-<section style="max-width: 720px; margin: 1.5rem auto; padding: 0 1rem;">
-	<h1 style="font-size: 1.4rem; font-weight: 600; margin-bottom: .75rem;">Preferencias de recordatorios</h1>
+<section class="page">
+	<h1 class="title">Preferencias de recordatorios</h1>
 
   <Card>
-    <form method="POST" style="display: grid; gap: .75rem;">
+    <form method="POST" class="form">
       <div>
-        <label for="freq" style="display:block; font-weight:600; margin-bottom: 0.25rem;">Frecuencia</label>
+        <label for="freq">Frecuencia</label>
         <SegmentedControl name="freq" options={options} bind:value={freq} />
-        <p style="font-size: 0.9rem; color: var(--color-text-muted); margin-top: 0.25rem;">
+        <p class="help">
           - Diario: cada día a la hora indicada. - Laborables: solo lunes a viernes. - Semanal: los lunes.
         </p>
       </div>
 
       <div>
-        <label for="time" style="display:block; font-weight:600; margin-bottom: 0.25rem;">Hora (HH:MM)</label>
+        <label for="time">Hora (HH:MM)</label>
         <input id="time" name="time" type="time" step="60" bind:value={time} disabled={freq === 'off'} />
-        <p style="font-size: 0.9rem; color: var(--color-text-muted); margin-top: 0.25rem;">Zona horaria: {data.tz}</p>
+        <p class="help">Zona horaria: {data.tz}</p>
       </div>
 
       {#if form?.error}
-        <div style="color: var(--color-danger);">{form.error}</div>
+        <div class="error">{form.error}</div>
       {/if}
 
       <div>
@@ -52,10 +52,21 @@
     </form>
   </Card>
 
-	<div style="margin-top: 1rem;">
-		<h2 style="font-size: 1.1rem; font-weight: 600;">Próximo recordatorio</h2>
+	<div class="section">
+		<h2 class="subtitle">Próximo recordatorio</h2>
 		<ul>
 			<li>Servidor: {data.next ?? '—'}</li>
 		</ul>
 	</div>
 </section>
+
+<style>
+  .page { max-width: 720px; margin: 1.5rem auto; padding: 0 1rem; }
+  .title { font-size: 1.4rem; font-weight: 600; margin-bottom: .75rem; }
+  .form { display: grid; gap: .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>