Update style.css

style.css

@@ -6,7 +6,7 @@
     --matrix-bg-dark: #050505;
     --matrix-bg-med: #0a0a0a;
     --matrix-bg-light: #101010;
-    --matrix-yellow-warn: yellow;
+    --matrix-yellow-warn: #FFFF00; /* Amarillo brillante */
     --matrix-red-error: #FF3333; /* Rojo brillante */
     --matrix-red-feedback: #FF6666; /* Rojo más suave */
     --matrix-cyan-info: #33CCFF;
@@ -15,30 +15,29 @@
     --matrix-font: 'Courier Prime', 'Courier New', Courier, monospace; /* Fuente principal */
 }
 
+/* --- Base y Contenedor --- */
 body, .gradio-container {
     background-color: var(--matrix-bg-dark) !important;
     color: var(--matrix-green-std) !important;
     font-family: var(--matrix-font) !important;
     margin: 0;
-    padding: 0;
+    padding: 10px !important; /* Añadir padding general */
+    box-sizing: border-box;
+}
+.gradio-container .gap, .gradio-container .gap > .gr-column {
+    gap: 15px !important; /* Reducir gap */
 }
 
-/* --- Contenedores y Layout --- */
+/* --- Bloques Principales --- */
 .main-content-box {
-    background-color: rgba(10, 10, 10, 0.7); /* Fondo semi-transparente */
+    background-color: rgba(16, 16, 16, 0.8); /* Fondo un poco más claro y semi-transparente */
     border: 1px solid var(--matrix-green-dark);
-    padding: 25px; /* Más padding */
+    padding: clamp(15px, 3vw, 25px); /* Padding responsivo */
     margin-top: 20px;
-    max-width: 750px; /* Un poco más ancho */
+    max-width: 800px; /* Ancho máximo */
     margin-left: auto;
     margin-right: auto;
-    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1); /* Sombra sutil */
-}
-.gradio-container { /* Evitar padding extra por defecto */
-    padding: 0 !important;
-}
-.gradio-container .gap { /* Espacio entre elementos */
-    gap: 20px !important;
+    box-shadow: 0 0 12px rgba(0, 255, 0, 0.15); /* Sombra verde */
 }
 
 /* --- Títulos y Texto --- */
@@ -46,51 +45,26 @@ body, .gradio-container {
     color: var(--matrix-green-bright) !important;
     text-shadow: 0 0 8px var(--matrix-green-std);
     border-bottom: 1px solid var(--matrix-green-dark);
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     margin-bottom: 25px;
     text-align: center;
-    letter-spacing: 1px; /* Espaciado letras */
-}
-.gr-markdown h5 {
-    color: var(--matrix-white-text) !important;
-    text-align: center;
-    margin: 10px 0;
-}
-.gr-markdown p {
-    color: var(--matrix-green-std) !important;
-    line-height: 1.6;
-    font-size: 1.05em; /* Ligeramente más grande */
-}
-.gr-markdown strong, .gr-markdown b {
-    color: var(--matrix-green-bright) !important;
-    font-weight: bold; /* Asegurar negrita */
-}
-.gr-markdown code { /* Para `[ X ]` etc en instrucciones */
-    background-color: var(--matrix-bg-light);
-    border: 1px solid var(--matrix-green-dark);
-    padding: 1px 4px;
-    border-radius: 3px;
-    color: var(--matrix-green-bright);
+    letter-spacing: 1.5px; /* Más espaciado */
     font-weight: bold;
 }
-.gr-markdown hr {
-   border: 0;
-   border-top: 1px dashed var(--matrix-green-dark) !important;
-   margin: 20px 0 !important;
-}
+.gr-markdown h5 { color: var(--matrix-white-text) !important; text-align: center; margin: 12px 0; }
+.gr-markdown p { color: var(--matrix-green-std) !important; line-height: 1.7; font-size: clamp(0.95em, 2.5vw, 1.1em); } /* Tamaño fuente responsivo */
+.gr-markdown strong, .gr-markdown b { color: var(--matrix-green-bright) !important; font-weight: bold; }
+.gr-markdown code { background-color: var(--matrix-bg-light); border: 1px solid var(--matrix-green-dark); padding: 2px 5px; border-radius: 3px; color: var(--matrix-green-bright); font-weight: bold; }
+.gr-markdown hr, hr.matrix-hr { border: 0 !important; height: 1px !important; background-image: linear-gradient(to right, rgba(0, 143, 17, 0), rgba(0, 143, 17, 0.75), rgba(0, 143, 17, 0)) !important; margin: 25px 0 !important; }
 
 /* --- Advertencia --- */
-.warning-text {
-    border: 1px dashed var(--matrix-yellow-warn);
-    padding: 15px;
-    margin: 20px 0;
-    background-color: rgba(80, 80, 0, 0.2); /* Fondo amarillo oscuro semi-transparente */
-}
-.warning-text p { color: var(--matrix-yellow-warn) !important; margin-bottom: 5px; }
+.warning-text { border: 1px dashed var(--matrix-yellow-warn); padding: 15px; margin: 20px 0; background-color: rgba(80, 80, 0, 0.2); }
+.warning-text p { color: var(--matrix-yellow-warn) !important; margin-bottom: 8px; }
 .warning-text strong { color: var(--matrix-yellow-warn) !important; }
 
 /* --- Errores --- */
 .error-text p { color: var(--matrix-red-error) !important; font-weight: bold; text-align: center; }
+#alias_feedback p { text-align: center; font-weight: bold;}
 
 /* --- Botones Estilo Matrix --- */
 .gr-button {
@@ -98,83 +72,105 @@ body, .gradio-container {
     border: 1px solid var(--matrix-green-std) !important;
     color: var(--matrix-green-std) !important;
     margin: 5px !important;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
     font-family: var(--matrix-font) !important;
     border-radius: 0 !important; /* Bordes cuadrados */
-    padding: 10px 15px !important;
+    padding: 12px 18px !important; /* Más padding */
     font-size: 1em !important;
+    text-align: center;
+    cursor: pointer; /* Cursor de mano */
 }
 .gr-button:hover {
     background-color: var(--matrix-green-std) !important;
     color: var(--matrix-bg-dark) !important;
     box-shadow: 0 0 15px var(--matrix-green-std) !important;
     border-color: var(--matrix-green-bright) !important;
+    transform: scale(1.02); /* Ligero zoom al pasar */
+}
+.gr-button:active {
+    transform: scale(0.98); /* Encoger al clickear */
 }
 /* Botones Específicos */
 .btn-matrix-accept { border-color: var(--matrix-green-bright) !important; color: var(--matrix-green-bright) !important; font-weight: bold; }
 .btn-matrix-accept:hover { background-color: var(--matrix-green-bright) !important; box-shadow: 0 0 15px var(--matrix-green-bright) !important; color: var(--matrix-bg-dark) !important; }
-.btn-menu { min-width: 250px !important; width: 85% !important; max-width: 400px !important; margin-left: auto !important; margin-right: auto !important; display: block !important; }
+.btn-menu { min-width: 200px !important; width: 90% !important; max-width: 450px !important; margin-left: auto !important; margin-right: auto !important; display: block !important; }
 .btn-exit { border-color: var(--matrix-orange-exit) !important; color: var(--matrix-orange-exit) !important; }
 .btn-exit:hover { background-color: var(--matrix-orange-exit) !important; box-shadow: 0 0 15px var(--matrix-orange-exit) !important; color: var(--matrix-bg-dark) !important; }
 .btn-red { border-color: var(--matrix-red-error) !important; color: var(--matrix-red-error) !important; }
 .btn-red:hover { background-color: var(--matrix-red-error) !important; box-shadow: 0 0 15px var(--matrix-red-error) !important; color: var(--matrix-bg-dark) !important; }
-.btn-matrix-response { min-width: 90px !important; padding: 10px 15px !important; font-size: 1.2em !important; font-weight: bold;}
+.btn-matrix-response { min-width: 80px !important; padding: 10px 15px !important; font-size: 1.3em !important; font-weight: bold;} /* Más grandes para móvil */
 
 /* --- Input de Texto --- */
-.gr-textbox textarea { /* Gradio usa textarea a menudo */
+.gradio-container .gr-textbox textarea, .gradio-container .gr-textbox input[type=text] {
     background-color: var(--matrix-bg-light) !important;
     border: 1px solid var(--matrix-green-std) !important;
     color: var(--matrix-green-std) !important;
-    padding: 10px !important;
+    padding: 12px !important; /* Más padding */
     font-family: var(--matrix-font) !important;
     border-radius: 0 !important;
     line-height: 1.5;
+    font-size: 1.1em;
 }
-.gr-textbox textarea::placeholder {
+.gradio-container .gr-textbox textarea::placeholder, .gradio-container .gr-textbox input[type=text]::placeholder {
     color: var(--matrix-green-dark) !important;
-    opacity: 0.7;
+    opacity: 0.6;
+}
+.gradio-container .gr-row { /* Mejorar alineación en Row */
+    align-items: center;
 }
 
 /* --- Contenido Específico del Juego --- */
 .progress-indicator { color: grey !important; font-size: 0.9em; text-align: right; padding-right: 10px; min-height: 1em; }
 .stimulus-display {
-    font-size: 6em !important; /* Más grande */
+    font-size: clamp(4em, 15vw, 7em) !important; /* Tamaño de fuente responsivo */
     font-weight: bold;
     text-align: center;
-    min-height: 140px; /* Más alto */
-    padding: 20px;
+    min-height: 150px; /* Más alto */
+    display: flex; /* Centrar verticalmente */
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
     line-height: 1;
-    text-shadow: 0 0 10px currentColor; /* Sombra del color del texto */
+    text-shadow: 0 0 12px currentColor;
     letter-spacing: 2px;
-    font-family: 'Orbitron', var(--matrix-font); /* Fuente más tech si está disponible */
+    font-family: 'Orbitron', var(--matrix-font);
+    /* Animación sutil de aparición */
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+}
+.stimulus-display:empty { /* Ocultar si está vacío con transición */
+    opacity: 0;
 }
-#feedback-display p { /* Centrar feedback */
+
+#feedback-display p {
     text-align: center;
-    min-height: 25px;
-    margin-top: 10px;
-    font-size: 1.1em;
+    min-height: 30px; /* Más espacio */
+    margin-top: 15px;
+    font-size: 1.2em; /* Más grande */
+    font-weight: bold;
+    letter-spacing: 1px;
 }
 .feedback-correct { color: var(--matrix-green-bright) !important; text-shadow: 0 0 5px var(--matrix-green-bright); }
 .feedback-incorrect { color: var(--matrix-red-feedback) !important; text-shadow: 0 0 5px var(--matrix-red-feedback);}
 .results-list { list-style-type: none; padding-left: 0; margin: 15px 0 15px 20px; }
-.results-list li { margin-bottom: 10px; color: var(--matrix-green-std); font-size: 1.1em;}
+.results-list li { margin-bottom: 12px; color: var(--matrix-green-std); font-size: 1.15em;} /* Más grande */
 .history-list li { margin-bottom: 5px; font-size: 0.9em; color: #00C000;}
-#agent-info-menu { text-align: center; color: var(--matrix-white-text) !important; margin-bottom: 20px; font-size: 1.1em;}
+#agent-info-menu { text-align: center; color: var(--matrix-white-text) !important; margin-bottom: 25px; font-size: 1.2em;} /* Más grande */
 
 /* --- Estilo para Dataframe (Historial) --- */
-.gradio-container table.dataframe { width: 100% !important; border-collapse: collapse !important; }
-.gradio-container table.dataframe th {
+.gradio-container .gr-dataframe table.dataframe { width: 100% !important; border-collapse: collapse !important; background-color: transparent !important; margin-top: 15px;}
+.gradio-container .gr-dataframe table.dataframe th {
     background-color: var(--matrix-bg-light) !important;
     color: var(--matrix-green-bright) !important;
     border-bottom: 1px solid var(--matrix-green-dark) !important;
-    text-align: left; padding: 10px;
+    text-align: left; padding: 12px; /* Más padding */
     text-shadow: 0 0 3px var(--matrix-green-std);
 }
-.gradio-container table.dataframe tr:nth-child(even) td { background-color: rgba(0, 50, 0, 0.1) !important; } /* Bandas sutiles */
-.gradio-container table.dataframe tr:hover td { background-color: rgba(0, 255, 0, 0.15) !important; }
-.gradio-container table.dataframe td {
+.gradio-container .gr-dataframe table.dataframe tr:nth-child(even) td { background-color: rgba(0, 50, 0, 0.15) !important; } /* Bandas más visibles */
+.gradio-container .gr-dataframe table.dataframe tr:hover td { background-color: rgba(0, 255, 0, 0.2) !important; }
+.gradio-container .gr-dataframe table.dataframe td {
     color: var(--matrix-green-std) !important;
     border-bottom: 1px solid var(--matrix-bg-light) !important;
-    padding: 10px;
+    padding: 12px; /* Más padding */
     vertical-align: middle;
 }