.cuerpo-pagina {
            font-family: Arial, sans-serif;
            background-color: #000;
            text-align: center;
            padding: 20px;
            color: #fff;
        }
        .calculadora-interactiva {
            display: inline-block;
            padding: 20px;
            background-color: #000;
            border-radius: 10px;
            border: 1px solid;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }
        .grupo-entrada {
            margin: 10px 0;
        }
        .entrada-numero {
            width: 35%;
            padding: 10px;
            font-size: 1.2em;
            text-align: center;
            background-color: #000;
            color: #ff0;
            border: 1px solid #777;
        }
        .boton-operacion {
            padding: 10px 20px;
            font-size: 1.6em;
            cursor: pointer;
            margin: 20px 5px 0px 5px;
            background-color: #6666FF;
            color: #000;
            border: 1px solid #777;
        }
        .boton-operacion:hover {
            background-color: #d1d1ff;
        }
        .resultado-salida {
            margin-top: 20px;
            font-size: 1.5em;
            color: #ff0;
        }
        .seccion-cuestionario {
            margin-top: 40px;
            
            margin: 20px auto;
            color: #fff;
        }
        .pregunta-cuestionario {
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            gap: 20px;
        }
        .texto-pregunta {
            width: 32.33%; /* Fixed width for alignment */
            text-align: right;
            margin-right: 10px;
            font-size: 1.2em;
        }
        .respuesta-cuestionario {
            width: 100px;
            padding: 5px;
            text-align: center;
            background-color: #ff0;
            color: #000;
            border: 1px solid #777;
        }
        .mensaje-resultado {
            min-width: 150px; /* Ensure result message does not disturb layout */
            text-align: left;
            margin-left: 10px;
            font-size: 1.2em;
            color: #fff;
        }
        .respuesta-correcta {
            color: green;
            font-weight: bold;
        }
        .respuesta-incorrecta {
            color: red;
            font-weight: bold;
        }
        .sin-respuesta {
            color: orange;
            font-weight: bold;
        }
        .oculto {
            display: none;
        }
        .pregunta-cuestionario span:nth-of-type(2) {
            text-align: left;
            width: 50%;
            overflow: hidden;
        }


@media only screen and (max-width: 768px) {
    .cuerpo-pagina {
        padding: 10px;
    }
    .calculadora-interactiva {
        width: 100%;
        padding: 10px;
    }
    .entrada-numero {
        width: 35%;
        font-size: 1em;
    }
    .boton-operacion {
        padding: 8px 16px;
        font-size: 1em;
    }
    .seccion-cuestionario {
        max-width: 100%;
        margin: 20px 10px;
    }
    .pregunta-cuestionario {
        flex-direction: column;
        align-items: flex-start;
    }
    .texto-pregunta {
        width: 100%;
        text-align: left;
        margin-right: 0;
        font-size: 1em;
    }
    .respuesta-cuestionario {
        width: 100%;
        margin-top: 5px;
        font-size: 1em;
    }
    .mensaje-resultado {
        margin-left: 0;
        font-size: 1em;
    }
}