From 951098540c12c08d9dc9ced4fe619564fb037944 Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Fri, 5 Dec 2025 23:34:21 +0100
Subject: [PATCH] Fix: MissionReveal con tics blancos y mejor layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar text-4xl a text-5xl para tics más grandes
- Agregar text-white para que los tics sean blancos
- Agregar font-bold para mejor visibilidad
- Mejorar layout con flex-col
- Agregar mensaje informativo
---
 client/src/components/MissionReveal.tsx | 33 ++++++++++++-------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/client/src/components/MissionReveal.tsx b/client/src/components/MissionReveal.tsx
index 2eb026d..6d3ad67 100644
--- a/client/src/components/MissionReveal.tsx
+++ b/client/src/components/MissionReveal.tsx
@@ -7,27 +7,26 @@ interface MissionRevealProps {
 export default function MissionReveal({ votes }: MissionRevealProps) {
     return (
         <motion.div
-            className="fixed inset-0 flex items-center justify-center bg-black/90 z-50"
+            className="fixed inset-0 flex flex-col items-center justify-center bg-black/90 z-50"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
         >
-            <div className="text-center">
-                <h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2>
-                <div className="flex gap-4 justify-center">
-                    {votes.map((vote, idx) => (
-                        <motion.div
-                            key={idx}
-                            className={`w-24 h-32 rounded-lg flex items-center justify-center text-4xl ${vote ? 'bg-blue-600' : 'bg-red-600'
-                                }`}
-                            initial={{ scale: 0, rotate: -180 }}
-                            animate={{ scale: 1, rotate: 0 }}
-                            transition={{ delay: idx * 0.3 }}
-                        >
-                            {vote ? '✓' : '✗'}
-                        </motion.div>
-                    ))}
-                </div>
+            <h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2>
+            <div className="flex gap-4 justify-center mb-8">
+                {votes.map((vote, idx) => (
+                    <motion.div
+                        key={idx}
+                        className={`w-24 h-32 rounded-lg flex items-center justify-center text-5xl font-bold text-white ${vote ? 'bg-blue-600' : 'bg-red-600'
+                            }`}
+                        initial={{ scale: 0, rotate: -180 }}
+                        animate={{ scale: 1, rotate: 0 }}
+                        transition={{ delay: idx * 0.3 }}
+                    >
+                        {vote ? '✓' : '✗'}
+                    </motion.div>
+                ))}
             </div>
+            <p className="text-white text-xl">Los resultados se revelarán automáticamente...</p>
         </motion.div>
     );
 }