From c49c0bbc0a80d2cb25ace7550c9d8857ea9587fc Mon Sep 17 00:00:00 2001
From: Guillermo Arrieta Medina <guillermo.arrieta@lasallistas.org.mx>
Date: Mon, 6 Oct 2025 16:34:19 -0600
Subject: [PATCH] Bugfix de botones anidados, facultad y carrera faltantes de
 la card de plan de estudios, campo opcional marcado como tal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CreatePlanDialog: el botón con el que selecciona al archivo de referencia se cambió a div para evitar posibles problemas.

planes: se limitó el número de caracteres del estado que se pueden mostrar para darle espacio al div de la facultad y la carrera.

usuarios: se añadió un texto small para indicar que el campo de título es opcional. Se puede hacer lo mismo con los demás en un futuro.
---
 src/components/planes/CreatePlanDialog.tsx | 5 ++---
 src/routes/_authenticated/planes.tsx       | 2 +-
 src/routes/_authenticated/usuarios.tsx     | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/planes/CreatePlanDialog.tsx b/src/components/planes/CreatePlanDialog.tsx
index fde48b5..5175244 100644
--- a/src/components/planes/CreatePlanDialog.tsx
+++ b/src/components/planes/CreatePlanDialog.tsx
@@ -261,8 +261,7 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
                 const ext = fileExt(file.titulo);
                 const selected = isSelected(file.s3_file_path);
                 return (
-                  <button
-                    type="button"
+                  <div
                     key={file.id}
                     role="gridcell"
                     aria-selected={selected}
@@ -353,7 +352,7 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
                       <span className="truncate">{ext.toUpperCase()}</span>
                       {selected ? <span className="font-medium">Seleccionado</span> : <span className="opacity-60">Click para seleccionar</span>}
                     </div>
-                  </button>
+                  </div>
                 )
               })}
 
diff --git a/src/routes/_authenticated/planes.tsx b/src/routes/_authenticated/planes.tsx
index cc8e4db..f1ad984 100644
--- a/src/routes/_authenticated/planes.tsx
+++ b/src/routes/_authenticated/planes.tsx
@@ -154,7 +154,7 @@ function RouteComponent() {
                           className="bg-white/60"
                           style={{ borderColor: (chipTint(fac?.color).borderColor as string) }}
                         >
-                          {p.estado}
+                          {p.estado && p.estado.length > 10 ? `${p.estado.slice(0, 10)}…` : p.estado}
                         </Badge>
                       )}
                     </div>
diff --git a/src/routes/_authenticated/usuarios.tsx b/src/routes/_authenticated/usuarios.tsx
index 52e71d7..4e4eae8 100644
--- a/src/routes/_authenticated/usuarios.tsx
+++ b/src/routes/_authenticated/usuarios.tsx
@@ -371,7 +371,7 @@ function RouteComponent() {
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-1"><Label>Nombre</Label><Input value={form.nombre ?? ""} onChange={(e) => setForm((s) => ({ ...s, nombre: e.target.value }))} /></div>
             <div className="space-y-1"><Label>Apellidos</Label><Input value={form.apellidos ?? ""} onChange={(e) => setForm((s) => ({ ...s, apellidos: e.target.value }))} /></div>
-            <div className="space-y-1"><Label>Título</Label><Input value={form.title ?? ""} onChange={(e) => setForm((s) => ({ ...s, title: e.target.value }))} /></div>
+            <div className="space-y-1"><Label>Título <small>(opcional)</small></Label><Input value={form.title ?? ""} onChange={(e) => setForm((s) => ({ ...s, title: e.target.value }))} /></div>
             <div className="space-y-1"><Label>Clave</Label><Input value={form.clave ?? ""} onChange={(e) => setForm((s) => ({ ...s, clave: e.target.value }))} /></div>
             <div className="space-y-1"><Label>Avatar (URL)</Label><Input value={form.avatar ?? ""} onChange={(e) => setForm((s) => ({ ...s, avatar: e.target.value }))} /></div>
             <div className="space-y-1">
@@ -472,7 +472,7 @@ function RouteComponent() {
 
             <div className="space-y-1"><Label>Nombre</Label><Input value={createForm.nombre ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, nombre: e.target.value }))} /></div>
             <div className="space-y-1"><Label>Apellidos</Label><Input value={createForm.apellidos ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, apellidos: e.target.value }))} /></div>
-            <div className="space-y-1"><Label>Título</Label><Input value={createForm.title ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, title: e.target.value }))} /></div>
+            <div className="space-y-1"><Label>Título <small>(opcional)</small></Label><Input value={createForm.title ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, title: e.target.value }))} /></div>
             <div className="space-y-1"><Label>Clave</Label><Input value={createForm.clave ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, clave: e.target.value }))} /></div>
             <div className="space-y-1 md:col-span-2"><Label>Avatar (URL)</Label><Input value={createForm.avatar ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, avatar: e.target.value }))} /></div>