style.css

/* style.css */
:root {
    --matrix-green-bright: #33FF33;
    --matrix-green-std: #00D000;
    --matrix-green-dark: #008F11;
    --matrix-bg-dark: #050505;
    --matrix-bg-med: #0a0a0a;
    --matrix-bg-light: #101010;
    --matrix-yellow-warn: #FFFF00;
    --matrix-red-error: #FF3333;
    --matrix-red-feedback: #FF6666;
    --matrix-cyan-info: #33CCFF;
    --matrix-orange-exit: #FFAA00;
    --matrix-white-text: #E0E0E0;
    --matrix-font: 'Courier Prime', 'Courier New', Courier, monospace;
}

/* --- Base y Contenedor --- */
body, .gradio-container {
    background: radial-gradient(ellipse at bottom, var(--matrix-bg-light) 0%, var(--matrix-bg-dark) 100%);
    color: var(--matrix-green-std) !important;
    font-family: var(--matrix-font) !important;
    margin: 0;
    padding: 10px !important;
    box-sizing: border-box;
    min-height: 100vh; /* Asegurar altura completa */
}
.gradio-container .gap, .gradio-container .gap > .gr-column {
    gap: 15px !important;
}

/* --- Bloques Principales --- */
.main-content-box {
    background-color: rgba(10, 10, 10, 0.85); /* Más opaco */
    border: 1px solid var(--matrix-green-dark);
    padding: clamp(15px, 4vw, 30px); /* Padding adaptable */
    margin-top: clamp(10px, 3vh, 20px);
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2); /* Sombra más pronunciada */
    border-radius: 2px; /* Ligero redondeo */
}

/* --- Títulos y Texto --- */
.gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4 { /* Target más específico */
    color: var(--matrix-green-bright) !important;
    text-shadow: 0 0 8px var(--matrix-green-std), 0 0 15px var(--matrix-green-dark); /* Más sombra */
    border-bottom: 1px solid var(--matrix-green-dark);
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-align: center;
    letter-spacing: 1.5px;
    font-weight: bold;
}
.gradio-container h5 { color: var(--matrix-white-text) !important; text-align: center; margin: 15px 0; font-weight: normal;}
.gradio-container p { color: var(--matrix-green-std) !important; line-height: 1.7; font-size: clamp(1em, 2.5vw, 1.1em); }
.gradio-container strong, .gradio-container b { color: var(--matrix-green-bright) !important; font-weight: bold; text-shadow: 0 0 3px var(--matrix-green-bright);}
.gradio-container code { background-color: var(--matrix-bg-light); border: 1px solid var(--matrix-green-dark); padding: 2px 6px; border-radius: 3px; color: var(--matrix-green-bright); font-weight: bold; }
.gradio-container 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.85), 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.25); box-shadow: 0 0 8px rgba(255, 255, 0, 0.2); }
.warning-text p { color: var(--matrix-yellow-warn) !important; margin-bottom: 8px; font-size: 0.95em;}
.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 {
    background: linear-gradient(to bottom, var(--matrix-bg-light) 0%, var(--matrix-bg-med) 100%) !important; /* Gradiente sutil */
    border: 1px solid var(--matrix-green-std) !important;
    color: var(--matrix-green-std) !important;
    margin: 5px !important;
    transition: all 0.2s ease-in-out;
    font-family: var(--matrix-font) !important;
    border-radius: 0 !important;
    padding: 12px 18px !important;
    font-size: 1em !important;
    text-align: center;
    cursor: pointer;
    text-shadow: 0 0 2px rgba(0, 255, 0, 0.5); /* Sombra texto botón */
}
.gr-button:hover {
    background: var(--matrix-green-std) !important;
    color: var(--matrix-bg-dark) !important;
    box-shadow: 0 0 18px var(--matrix-green-std) !important; /* Más glow */
    border-color: var(--matrix-green-bright) !important;
    transform: scale(1.03);
    text-shadow: none;
}
.gr-button:active { transform: scale(0.97); }
/* 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 18px var(--matrix-green-bright) !important; color: var(--matrix-bg-dark) !important; }
.btn-menu { min-width: 220px !important; width: 90% !important; max-width: 450px !important; margin-left: auto !important; margin-right: auto !important; display: block !important; font-size: 1.1em !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 18px 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 18px var(--matrix-red-error) !important; color: var(--matrix-bg-dark) !important; }
.btn-matrix-response { min-width: 90px !important; padding: 12px 18px !important; font-size: 1.4em !important; font-weight: bold; flex-grow: 1; /* Ocupar espacio en fila */}

/* --- Input de Texto --- */
.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: 12px !important;
    font-family: var(--matrix-font) !important;
    border-radius: 0 !important;
    line-height: 1.5;
    font-size: 1.1em;
}
.gradio-container .gr-textbox textarea::placeholder, .gradio-container .gr-textbox input[type=text]::placeholder { color: var(--matrix-green-dark) !important; opacity: 0.6; }
.gradio-container .gr-row { align-items: stretch; /* Alinear botones en fila */ } /* Mejorar alineación en Row */

/* --- Contenido Específico del Juego --- */
.progress-indicator { color: grey !important; font-size: 0.9em; text-align: right; padding-right: 10px; min-height: 1.2em; }
.stimulus-display {
    font-size: clamp(4.5em, 18vw, 8em) !important; /* Tamaño muy grande y responsivo */
    font-weight: bold;
    text-align: center;
    min-height: 160px; /* Más alto aún */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    line-height: 1;
    text-shadow: 0 0 15px currentColor; /* Más sombra */
    letter-spacing: 3px;
    font-family: 'Orbitron', var(--matrix-font);
    opacity: 1;
    transition: opacity 0.15s ease-in-out; /* Transición rápida */
    overflow: hidden; /* Evitar que texto grande desborde */
    word-break: break-all; /* Romper si es muy largo (poco probable aquí) */
}
.stimulus-display:empty { opacity: 0; } /* Ocultar si está vacío */
#feedback-display p { text-align: center; min-height: 30px; margin-top: 15px; font-size: 1.25em; font-weight: bold; letter-spacing: 1px; }
.feedback-correct { color: var(--matrix-green-bright) !important; text-shadow: 0 0 8px var(--matrix-green-bright); }
.feedback-incorrect { color: var(--matrix-red-feedback) !important; text-shadow: 0 0 8px var(--matrix-red-feedback);}
.results-list { list-style-type: none; padding-left: 0; margin: 20px 0 20px 10px; }
.results-list li { margin-bottom: 12px; color: var(--matrix-green-std); font-size: 1.2em; }
.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: 25px; font-size: 1.2em; font-weight: bold;}

/* --- Estilo para Dataframe (Historial) --- */
.gradio-container .gr-dataframe { background-color: transparent !important; border: none !important; }
.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: 1px solid var(--matrix-green-dark) !important; /* Bordes también en header */
    text-align: left; padding: 12px;
    text-shadow: 0 0 3px var(--matrix-green-std);
}
.gradio-container .gr-dataframe table.dataframe tr:nth-child(even) td { background-color: rgba(0, 50, 0, 0.2) !important; }
.gradio-container .gr-dataframe table.dataframe tr:hover td { background-color: rgba(0, 255, 0, 0.25) !important; }
.gradio-container .gr-dataframe table.dataframe td {
    color: var(--matrix-green-std) !important;
    border: 1px solid var(--matrix-green-dark) !important; /* Bordes en celdas */
    border-top: none; /* Evitar doble borde */
    padding: 12px;
    vertical-align: middle;
    font-size: 0.95em;
}
/* Estilo de Paginación si existe */
.gradio-container .pagination { filter: grayscale(100%) brightness(1.5); } /* Blanco/Negro */