From 9b44af967519f16993e13943cd62b53c9160f558 Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Thu, 16 Jul 2026 12:31:47 +0000
Subject: [PATCH] Foro: botones con el estilo del tema y sin descuadres
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Los botones del foro usaban un dorado propio; ahora comparten el lenguaje del
<button> del tema (fondo translúcido, texto crema en mayúsculas, aclara al hover),
el mismo que sale como «Editar» en el resto de la web.

Arreglos de maquetación:
- Altura fija (42px) con inline-flex en .nice_button: los <button> heredaban
  height:50px del tema y los <a> no, y en la misma fila quedaban a distinta altura
  (se notaba sobre todo en «Borrar», que es un <button>).
- Se quita el height:20px del <li> de post_controls, que aplastaba los botones.
- Texto de los enlaces-botón forzado a crema: el a:link/:visited del tema
  (más específico) pintaba de azul el texto de «Crear tema».
- «Editar», «Borrar» y «Desbloquear» pasan a .nice_button para que toda la fila
  de acciones sea homogénea.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/forum.css                  | 55 ++++++++++++++++++++-----
 web-next/components/EditPostForm.tsx    |  2 +-
 web-next/components/ForumModActions.tsx | 22 +++++-----
 3 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/web-next/app/forum.css b/web-next/app/forum.css
index 1bca9cd..74da45d 100644
--- a/web-next/app/forum.css
+++ b/web-next/app/forum.css
@@ -201,12 +201,7 @@ h3.post_field dd { margin: 0; }
 .post_deleted { opacity: .5; }
 
 ul.post_controls { display: flex; justify-content: flex-end; align-items: center; gap: 8px; list-style: none; padding: 15px; margin: auto 0 0; }
-ul.post_controls li { height: 20px; }
-ul.post_controls li a {
-  display: block; border-radius: 2px; padding: 4px 8px; background: rgba(255, 255, 255, .04); font-weight: bold; color: #8a8578;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .13), inset 0 1px 1px rgba(255, 255, 255, .04);
-}
-ul.post_controls li a:hover { background: rgba(255, 255, 255, .08); color: var(--forum-gold); }
+ul.post_controls li { display: inline-flex; align-items: center; }
 ul.post_controls .post_date { color: #6d6a5e; font-weight: bold; font-size: 11px; margin-right: auto; }
 
 /* quick reply / editor */
@@ -221,13 +216,51 @@ ul.post_controls .post_date { color: #6d6a5e; font-weight: bold; font-size: 11px
 }
 .forum-input::placeholder { color: #6d6a5e; }
 
-/* nice_button (no está en theme.css) */
+/* Botón del foro: mismo lenguaje que el <button> del tema (theme.css:159),
+   el que sale como «Editar» en el resto de la web (fondo translúcido, texto
+   crema, mayúsculas, aclara al hover). NO un dorado propio. */
 .nice_button {
-  display: inline-block; padding: 9px 18px; border-radius: 5px; cursor: pointer; font-weight: bold; text-transform: uppercase;
-  color: #1c1305; border: 1px solid #b08f1d; background: linear-gradient(#e3ab2d, #b08f1d); transition: all 150ms;
+  /* inline-flex + altura fija para que <a> y <button> queden a la MISMA altura:
+     los <button> heredan height:50px del tema y los <a> no, y eso descuadraba la
+     fila (se notaba sobre todo en «Borrar», que es un <button>). box-sizing evita
+     que el padding sume por encima de la altura. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 42px;
+  padding: 0 20px;
+  border: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  font-family: futuraef-book, Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: #ebdec2;
+  background: hsla(0, 0%, 100%, 0.05);
+  transition: 0.4s;
+}
+/* Estados de enlace: sin esto, el `a:visited/:link { color:#2471a9 }` del tema
+   (más específico que .nice_button) pinta de azul el texto de «Crear tema». */
+a.nice_button,
+a.nice_button:link,
+a.nice_button:visited {
+  color: #ebdec2;
+}
+.nice_button:hover,
+.nice_button:focus,
+a.nice_button:hover,
+a.nice_button:focus {
+  background: hsla(0, 0%, 100%, 0.1);
+  color: #fff;
+}
+.nice_button:disabled {
+  color: #5c4c44;
+  cursor: default;
+  background: hsla(0, 0%, 100%, 0.05);
 }
-.nice_button:hover { background: linear-gradient(#f0b53a, #c9a836); }
-.nice_button:disabled { opacity: .5; cursor: default; }
 
 /* ===================== responsive ===================== */
 @media (max-width: 991px) {
diff --git a/web-next/components/EditPostForm.tsx b/web-next/components/EditPostForm.tsx
index 518a3a0..b4b8ec3 100644
--- a/web-next/components/EditPostForm.tsx
+++ b/web-next/components/EditPostForm.tsx
@@ -7,7 +7,7 @@ import { Link } from '@/i18n/navigation'
 export function EditPostForm({ postId }: { postId: number; initialText?: string }) {
   const t = useTranslations('Forum')
   return (
-    <Link className="edit" href={`/forum/edit/${postId}`}>
+    <Link className="nice_button" href={`/forum/edit/${postId}`}>
       {t('edit')}
     </Link>
   )
diff --git a/web-next/components/ForumModActions.tsx b/web-next/components/ForumModActions.tsx
index baaca4c..f176c57 100644
--- a/web-next/components/ForumModActions.tsx
+++ b/web-next/components/ForumModActions.tsx
@@ -43,25 +43,23 @@ export function ForumModActions({
 
   return (
     <>
-      <a
-        className="delete"
-        role="button"
-        tabIndex={0}
+      <button
+        type="button"
+        className="nice_button"
         onClick={() => act(deleted ? 'undelete' : 'delete')}
-        style={busy ? { opacity: 0.5 } : undefined}
+        disabled={busy}
       >
         {deleted ? t('undelete') : t('delete')}
-      </a>
+      </button>
       {kind === 'topic' && (
-        <a
-          className="lock"
-          role="button"
-          tabIndex={0}
+        <button
+          type="button"
+          className="nice_button"
           onClick={() => act(locked ? 'unlock' : 'lock')}
-          style={busy ? { opacity: 0.5 } : undefined}
+          disabled={busy}
         >
           {locked ? t('unlock') : t('lock')}
-        </a>
+        </button>
       )}
     </>
   )