From 697871150fcc624ac8a101f8b1bbba85113fa1ca Mon Sep 17 00:00:00 2001
From: ErickHub192 <earriola18@alumnos.uaq.mx>
Date: Fri, 21 Aug 2026 21:04:49 -0600
Subject: [PATCH] El campo del nombre en el perfil se ve como debe

---
 web/src/CuentaPanel.tsx | 20 ++++++++++++++++----
 web/src/styles.css      | 16 ++++++++++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/web/src/CuentaPanel.tsx b/web/src/CuentaPanel.tsx
index e8343a8..f92f813 100644
--- a/web/src/CuentaPanel.tsx
+++ b/web/src/CuentaPanel.tsx
@@ -28,10 +28,18 @@ export function CuentaPanel(props: {
 }) {
   const { t } = useTextos();
   const [abierto, setAbierto] = useState(false);
-  const [nombre, setNombre] = useState(props.usuario?.nombre ?? "");
+  /**
+   * Lo escrito en el input, o `null` si nadie lo ha tocado y vale el del perfil.
+   *
+   * No se arranca con `useState(props.usuario?.nombre)`: eso se evalúa al montar
+   * el panel, y para entonces la cuenta todavía no ha llegado del server. El
+   * campo se quedaba vacío para siempre aunque el perfil sí tuviera nombre.
+   */
+  const [escrito, setEscrito] = useState<string | null>(null);
   const [guardando, setGuardando] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const archivoRef = useRef<HTMLInputElement | null>(null);
+  const nombre = escrito ?? props.usuario?.nombre ?? "";
 
   if (!props.configurado) return null;
 
@@ -43,7 +51,11 @@ export function CuentaPanel(props: {
     setGuardando(true);
     const actualizado = await cambiarNombre(limpio);
     setGuardando(false);
-    if (actualizado) props.onCambio(actualizado);
+    if (actualizado) {
+      props.onCambio(actualizado);
+      // Se suelta lo escrito para que el input vuelva a reflejar el perfil.
+      setEscrito(null);
+    }
   };
 
   const elegirFoto = async (archivo: File | undefined) => {
@@ -128,7 +140,7 @@ export function CuentaPanel(props: {
               value={nombre}
               maxLength={40}
               disabled={guardando}
-              onChange={(e) => setNombre(e.target.value)}
+              onChange={(e) => setEscrito(e.target.value)}
               onKeyDown={(e) => {
                 if (e.key === "Enter") void guardarNombre();
               }}
@@ -146,7 +158,7 @@ export function CuentaPanel(props: {
           <p className="key-nota">{props.usuario.correo}</p>
 
           <button
-            className="key-olvidar"
+            className="key-olvidar perfil-salir"
             onClick={() => {
               // Recargar y no solo limpiar el estado: la sesión vive en una
               // cookie que este código no puede tocar, así que quien manda sobre
diff --git a/web/src/styles.css b/web/src/styles.css
index d3d0117..86467a1 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2224,11 +2224,27 @@ img.av {
   margin-bottom: 8px;
 }
 
+/* El input se lleva el espacio y el botón solo lo que ocupa su texto.
+   Sin el `width: auto` gana el `width: 100%` que `.name-input` trae de la
+   pantalla de entrada, y el flex acaba repartiendo al revés: el botón enorme y
+   el input de 40px. */
 .perfil-nombre .name-input {
   flex: 1;
   min-width: 0;
+  width: auto;
+  margin-top: 0;
+  padding: 8px 10px;
+}
+
+.perfil-nombre .key-guardar {
+  flex-shrink: 0;
 }
 
 .key-error {
   color: #d95d63;
 }
+
+/* Salir va separado del resto: es la acción que no se aprieta por error. */
+.key-panel .perfil-salir {
+  margin-top: 12px;
+}