From a1c472476cbb4c1480bbb3b2e4f415cfd1349ef2 Mon Sep 17 00:00:00 2001
From: ErickHub192 <earriola18@alumnos.uaq.mx>
Date: Fri, 21 Aug 2026 21:24:13 -0600
Subject: [PATCH] El boton de guardar el nombre deja de aplastar al campo

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .gitignore              |  1 +
 web/src/CuentaPanel.tsx |  2 +-
 web/src/styles.css      | 21 +++++++++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2bdaa7a..0ff2df7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,4 @@ ESTADO.md
 # trabajo local, no documentacion del proyecto: lo que un contribuidor
 # necesita esta en README, CONTRIBUTING, E2E y ROADMAP.
 CLAUDE.md
+.gstack/
diff --git a/web/src/CuentaPanel.tsx b/web/src/CuentaPanel.tsx
index f92f813..be68923 100644
--- a/web/src/CuentaPanel.tsx
+++ b/web/src/CuentaPanel.tsx
@@ -146,7 +146,7 @@ export function CuentaPanel(props: {
               }}
             />
             <button
-              className="key-guardar"
+              className="perfil-guardar"
               disabled={guardando || !nombre.trim() || nombre.trim() === props.usuario.nombre}
               onClick={() => void guardarNombre()}
             >
diff --git a/web/src/styles.css b/web/src/styles.css
index 86467a1..f45bb8a 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2225,9 +2225,9 @@ img.av {
 }
 
 /* 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. */
+   Dos cosas peleaban aquí: `.name-input` trae `width: 100%` de la pantalla de
+   entrada, y `.key-panel .key-guardar` pone el botón al 100% porque ahí es el
+   único de su fila. Por eso el botón NO usa esa clase: tiene la suya. */
 .perfil-nombre .name-input {
   flex: 1;
   min-width: 0;
@@ -2236,8 +2236,21 @@ img.av {
   padding: 8px 10px;
 }
 
-.perfil-nombre .key-guardar {
+.perfil-guardar {
   flex-shrink: 0;
+  border: 0;
+  border-radius: 4px;
+  background: var(--ambar);
+  color: #3d2a12;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 9px 14px;
+  cursor: pointer;
+}
+.perfil-guardar:disabled {
+  opacity: 0.4;
+  cursor: default;
 }
 
 .key-error {