From 47b5a2a1458a3ed459f9e9a0b4b33b4ed66af73a Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Wed, 15 Jul 2026 17:03:30 +0000
Subject: [PATCH] Mostrar los errores de send-gift: el tema los dejaba
 invisibles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El botón «Mostrar regalos» parecía no hacer nada: setFormError se llamaba
bien, pero el tema deja `.alert-message` con display:none esperando que la
rellene y la revele el JS antiguo (jQuery), que ya no existe. La caja se
pintaba y no se veía. Se fuerza el display desde React, como el resto de
formularios.

De paso, `.modal-content` estaba definida en globals.css Y en theme.css.
Como theme.css se importa el último (a propósito, para ganarle al preflight
de Tailwind), ganaba él a igual especificidad y el bloque de globals.css era
código muerto: el modal de la tienda salía como hoja pegada al fondo con
borde gris en vez de tarjeta centrada dorada. Se acota a
`.modal-div .modal-content` para ganar por especificidad y no por orden.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/globals.css             | 10 +++++++++-
 web-next/components/StoreBrowser.tsx |  8 +++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web-next/app/globals.css b/web-next/app/globals.css
index ae53c3f..34377c4 100644
--- a/web-next/app/globals.css
+++ b/web-next/app/globals.css
@@ -635,7 +635,12 @@ textarea:focus {
   background: rgba(0, 0, 0, 0.6);
   display: flex; align-items: center; justify-content: center;
 }
-.modal-content {
+/* Acotada al overlay a propósito: el tema trae su propia `.modal-content`
+   (hoja pegada al fondo, borde gris) para un `.modal` que aquí ya no usa
+   nadie. Como theme.css se importa el último, a igual especificidad ganaba
+   él y este bloque no pintaba nada. `.modal-div .modal-content` (0,2,0) le
+   gana al (0,1,0) del tema sin depender del orden de carga. */
+.modal-div .modal-content {
   position: relative;
   background: #17110e;
   border: 2px solid #d79602;
@@ -643,6 +648,9 @@ textarea:focus {
   padding: 26px 30px;
   max-width: 90vw; min-width: 260px;
   text-align: center;
+  /* el tema las aplica vía su `.modal-content`; sin esto se cuelan */
+  left: auto; bottom: auto; width: auto;
+  margin: 0; transform: none; animation: none;
 }
 .modal-close {
   position: absolute; top: 6px; right: 12px;
diff --git a/web-next/components/StoreBrowser.tsx b/web-next/components/StoreBrowser.tsx
index 87d955c..670289d 100644
--- a/web-next/components/StoreBrowser.tsx
+++ b/web-next/components/StoreBrowser.tsx
@@ -411,7 +411,13 @@ export function StoreBrowser({
             </table>
           </form>
           <hr />
-          {formError && <div className="alert-message red-form-response" id="show-gif-response">{formError}</div>}
+          {/* `display:block` a mano: el tema deja `.alert-message` OCULTA
+              (display:none) para que la rellene y la revele el JS. Sin esto la
+              caja se pintaba pero NO se veía: al pulsar «Mostrar regalos» no
+              salía ningún error. El resto de formularios ya lo hacen así. */}
+          <div className="alert-message" id="show-gif-response" style={{ display: formError ? 'block' : 'none' }}>
+            {formError && <span className="red-form-response">{formError}</span>}
+          </div>
         </div>
       )}