From 57dd48e308886224678c96cc124857317ece61d8 Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Wed, 15 Jul 2026 13:14:47 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20/expired-link,=20el=20bot=C3=B3n=20descu?=
 =?UTF-8?q?adrado=20y=20el=20mensaje=20que=20no=20se=20ve=C3=ADa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dos cosas, y la segunda dejaba la página sin contenido:

- El botón "Solicitar nuevo cambio de correo" salía de 250x100 pegado a la
  derecha. `.back-to-account` es el botón de la CABECERA de una caja (250px de
  ancho, line-height 50, float right); suelto en el CUERPO el float lo pega a un
  lado, y el texto no cabe en 250px, se parte en dos líneas y cada una se lleva
  sus 50px. Se le deja el aspecto del tema pero ajustado a su texto: pasa a
  336x50 y centrado.
- El mensaje rojo ("el enlace ha expirado") NO SE VEÍA: el tema deja
  `.alert-message` con display:none porque es el hueco que rellena y revela el
  JS, y aquí el aviso es estático. Se pone display:block a mano, igual que hacen
  todos los formularios del proyecto. Comprobado que al original le pasa lo
  mismo: su página de enlace caducado enseña el título y el botón, y la
  explicación queda invisible.

Medido en el navegador: botón 336x50, centrado, sin desbordar, y el mensaje
visible.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/[locale]/expired-link/page.tsx |  6 +++++-
 web-next/app/globals.css                    | 13 +++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/web-next/app/[locale]/expired-link/page.tsx b/web-next/app/[locale]/expired-link/page.tsx
index 49df8e1..721e7e9 100644
--- a/web-next/app/[locale]/expired-link/page.tsx
+++ b/web-next/app/[locale]/expired-link/page.tsx
@@ -29,7 +29,11 @@ export default async function ExpiredLinkPage({ params }: { params: Promise<{ lo
       <ServiceBox heading={t('expiredLink.pageTitle')}>
         <div className="centered">
           <br />
-          <div className="alert-message">
+          {/* `display:block` a mano, como el resto de formularios: el tema deja
+              `.alert-message` OCULTA para que la rellene y la revele el JS. Aquí
+              el aviso es estático y sin esto no se ve NINGUNO — le pasa al
+              original, que enseña esta página con el mensaje invisible. */}
+          <div className="alert-message" style={{ display: 'block' }}>
             <span className="red-form-response">{t('expiredLink.message')}</span>
           </div>
           <br />
diff --git a/web-next/app/globals.css b/web-next/app/globals.css
index 32aefa2..80aaea4 100644
--- a/web-next/app/globals.css
+++ b/web-next/app/globals.css
@@ -40,6 +40,19 @@ input[type='number'] {
 table {
   border-collapse: separate;
 }
+/* `.back-to-account` es el botón de la CABECERA de una caja: 250px de ancho,
+   line-height 50 y flotando a la derecha. Cuando se usa suelto en el CUERPO
+   (el "Solicitar nuevo cambio de correo" de /expired-link) sale mal por dos
+   motivos: el float lo pega a la derecha en vez de centrarlo, y el texto no cabe
+   en 250px, se parte en dos líneas y cada una se lleva sus 50px -> un botón de
+   250x100. Aquí se le deja el aspecto del tema pero ajustado a su texto. */
+.body-box-content .centered a.back-to-account {
+  float: none;
+  display: inline-block;
+  width: auto;
+  padding: 0 24px;
+}
+
 /* Mismo caso que .item-box de la tienda: el tema da a `.cc-box` (creadores de
    contenido) una altura FIJA de 172px contando con el content-box del navegador,
    y el border-box de Tailwind le resta el padding y el borde. Con 24px menos de